สร้าง Component แรกด้วย Storybook

สร้าง Component แรกด้วย Storybook

ในบทที่แล้ว เราได้เรียนรู้วิธีการสร้าง UI Component ชิ้นแรกด้วย Bit ซึ่งเน้นการนำ Component กลับมาใช้ซ้ำได้อย่างมีประสิทธิภาพ ในบทนี้ เราจะมาสำรวจอีกเครื่องมือที่ทรงพลังอย่าง Storybook ซึ่งเน้นที่การพัฒนา UI Component แบบ Isolation และการสร้างเอกสารประกอบการใช้งานที่ชัดเจน Storybook ช่วยให้เราสามารถพัฒนา Component ได้อย่างอิสระจากบริบทของแอปพลิเคชันทั้งหมด ทำให้ง่ายต่อการทดสอบ, แสดงตัวอย่าง และแชร์ Component กับทีม

บทนี้จะพาคุณไปสร้าง Component ง่ายๆ ด้วย Storybook พร้อมทั้งเรียนรู้วิธีการสร้าง Story เพื่อแสดงตัวอย่างการใช้งาน Component ที่หลากหลาย เราจะเริ่มต้นด้วยการติดตั้ง Storybook จากนั้นสร้าง Component และ Story แล้วสุดท้าย Deploy Storybook เพื่อแชร์กับทีม

การติดตั้ง Storybook

Storybook สามารถติดตั้งได้หลายวิธี แต่เราจะเน้นวิธีที่ง่ายที่สุดคือการใช้ Create React App (หรือเครื่องมือสร้างโปรเจกต์อื่นๆ ที่รองรับ) ร่วมกับ Storybook CLI

1. สร้างโปรเจกต์ React: หากคุณยังไม่มีโปรเจกต์ React ให้สร้างโปรเจกต์ใหม่ด้วย Create React App:

   npx create-react-app my-storybook-app
   cd my-storybook-app
   

2. ติดตั้ง Storybook: ใช้ Storybook CLI เพื่อติดตั้ง Storybook ในโปรเจกต์:

   npx storybook init
   

   Storybook CLI จะตรวจจับประเภทของโปรเจกต์ของคุณ (ในที่นี้คือ React) และติดตั้ง dependencies ที่จำเป็นทั้งหมดโดยอัตโนมัติ

   ข้อผิดพลาดที่พบบ่อย: หากคุณพบข้อผิดพลาดเกี่ยวกับการติดตั้ง dependencies ให้ลองอัปเดต npm หรือ yarn เป็นเวอร์ชันล่าสุด

3. เริ่มต้น Storybook: หลังจากติดตั้งเสร็จสิ้น คุณสามารถเริ่ม Storybook ได้โดยใช้คำสั่ง:

   npm run storybook
   

   Storybook จะเปิดในเบราว์เซอร์ของคุณโดยอัตโนมัติ (โดยปกติที่ http://localhost:6006)

การสร้าง Component ด้วย Storybook

เมื่อ Storybook ทำงานแล้ว เราสามารถเริ่มสร้าง Component แรกของเราได้ ในตัวอย่างนี้ เราจะสร้าง Component ง่ายๆ ชื่อว่า Button

1. สร้างไฟล์ Component: สร้างไฟล์ src/components/Button.js (หรือ .jsx ถ้าคุณใช้ JSX) และใส่โค้ดต่อไปนี้:

   import React from 'react';
   
   const Button = ({ label, onClick }) => {
     return (
       <button onClick={onClick}>
         {label}
       </button>
     );
   };
   
   export default Button;
   

2. สร้างไฟล์ CSS (Optional): หากคุณต้องการใส่ style ให้กับ Button สร้างไฟล์ src/components/Button.css และ import เข้ามาใน Button.js

   button {
     background-color: #4CAF50; /* Green */
     border: none;
     color: white;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     cursor: pointer;
   }
   

   // src/components/Button.js
   import React from 'react';
   import './Button.css'; // Import CSS
   
   const Button = ({ label, onClick }) => {
     return (
       <button onClick={onClick}>
         {label}
       </button>
     );
   };
   
   export default Button;
   

การสร้าง Story

Story คือตัวอย่างการใช้งาน Component ที่ช่วยให้เราเห็นภาพการทำงานของ Component ในสถานการณ์ต่างๆ Storybook จะใช้ Story เหล่านี้เพื่อสร้าง UI ที่เราสามารถโต้ตอบและทดสอบ Component ได้

1. สร้างไฟล์ Story: สร้างไฟล์ src/components/Button.stories.js (หรือ .jsx) และใส่โค้ดต่อไปนี้:

   import React from 'react';
   import Button from './Button';
   
   export default {
     title: 'Components/Button',
     component: Button,
   };
   
   const Template = (args) => <Button {...args} />;
   
   export const Primary = Template.bind({});
   Primary.args = {
     label: 'Click Me',
     onClick: () => alert('Button Clicked!'),
   };
   
   export const Secondary = Template.bind({});
   Secondary.args = {
     label: 'Secondary Button',
     onClick: () => alert('Secondary Button Clicked!'),
   };
   

   คำอธิบายโค้ด:

   • title: 'Components/Button': กำหนดชื่อของ Component ใน Storybook UI
   • component: Button: กำหนด Component ที่ Story นี้จะแสดง
   • Template: เป็น function ที่ render Component ด้วย props ที่กำหนด
   • Primary และ Secondary: คือ Story แต่ละอัน แต่ละ Story จะ bind กับ Template และกำหนด props ที่แตกต่างกัน
2. ตรวจสอบ Storybook: กลับไปที่ Storybook ในเบราว์เซอร์ของคุณ คุณจะเห็น Component Button ในหมวด Components พร้อมกับ Story Primary และ Secondary คุณสามารถคลิกที่ปุ่มเพื่อดูการทำงานของ onClick event
3. กรณีใช้งานจริงและข้อผิดพลาดที่พบบ่อย:
   • การจัดการ Props ที่หลากหลาย: ลองเพิ่ม props อื่นๆ ให้กับ Button เช่น disabled, size, หรือ style แล้วสร้าง Story ที่แสดงการใช้งาน props เหล่านั้น
   • การจัดการ Event Handlers: Storybook สามารถจำลอง Event Handlers ได้อย่างง่ายดาย คุณสามารถใช้ libraries เช่น @storybook/addon-actions เพื่อ log event ที่เกิดขึ้นใน Story
   • ข้อผิดพลาดที่พบบ่อย: หาก Storybook ไม่แสดงผล Component ของคุณ ตรวจสอบให้แน่ใจว่าคุณได้ import Component อย่างถูกต้อง และชื่อไฟล์ Story ตรงกับชื่อ Component

การ Deploy Storybook

หลังจากที่คุณสร้าง Component และ Story เสร็จเรียบร้อยแล้ว คุณอาจต้องการแชร์ Storybook กับทีมของคุณ Storybook สามารถ deploy ไปยัง hosting providers ต่างๆ ได้อย่างง่ายดาย

1. สร้าง Storybook build: ใช้คำสั่งต่อไปนี้เพื่อสร้าง Storybook build:

   npm run build-storybook
   

   คำสั่งนี้จะสร้างโฟลเดอร์ storybook-static ที่มีไฟล์ HTML, CSS และ JavaScript ที่จำเป็นสำหรับการรัน Storybook

2. Deploy Storybook build: คุณสามารถ deploy โฟลเดอร์ storybook-static ไปยัง hosting providers ต่างๆ เช่น:
   • Netlify: ลากและวางโฟลเดอร์ storybook-static ไปยัง Netlify
   • Vercel: ใช้ Vercel CLI เพื่อ deploy โฟลเดอร์ storybook-static
   • GitHub Pages: Deploy โฟลเดอร์ storybook-static ไปยัง GitHub Pages

   กรณีใช้งานจริง: การ deploy Storybook ไปยัง Netlify หรือ Vercel เป็นวิธีที่ง่ายและรวดเร็วในการแชร์ Storybook กับทีมของคุณ คุณสามารถตั้งค่า continuous deployment เพื่อให้ Storybook อัปเดตโดยอัตโนมัติเมื่อมีการเปลี่ยนแปลงใน codebase

แนวคิดเชิงระบบและ Pattern ทั่วไป:

• Atomic Design: Storybook สนับสนุนแนวคิด Atomic Design ซึ่งเป็น methodology สำหรับการสร้าง UI ที่ประกอบด้วย Atoms, Molecules, Organisms, Templates และ Pages
• Component-Driven Development: Storybook ส่งเสริม Component-Driven Development ซึ่งเป็นแนวทางในการพัฒนา UI โดยเริ่มจากการสร้าง Component ที่เล็กที่สุดก่อน แล้วค่อยๆ ประกอบ Component เหล่านั้นเข้าด้วยกันเป็น UI ที่ซับซ้อนยิ่งขึ้น

ในบทนี้ เราได้เรียนรู้วิธีการสร้าง UI Component ชิ้นแรกด้วย Storybook ตั้งแต่การติดตั้ง Storybook, การสร้าง Component, การสร้าง Story, ไปจนถึงการ deploy Storybook เพื่อแชร์กับทีม Storybook เป็นเครื่องมือที่ทรงพลังสำหรับการพัฒนา UI Component แบบ Isolation และการสร้างเอกสารประกอบการใช้งานที่ชัดเจน ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการจัดการ State ใน Component