การใช้ Tailwind CSS ร่วมกับ Storybook

การใช้ Tailwind CSS ร่วมกับ Storybook

Storybook เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการพัฒนาและทดสอบ UI components แบบ isolated environment ช่วยให้เราสามารถสร้าง, จัดระเบียบ, และแสดงผล components ได้อย่างเป็นระบบ โดยไม่ต้องพึ่งพา context ของ application ทั้งหมด การใช้ Storybook ร่วมกับ Tailwind CSS ช่วยให้เราสามารถทดสอบการ styling components ของเราได้อย่างมีประสิทธิภาพ, มั่นใจได้ว่า components เหล่านั้นทำงานได้อย่างถูกต้องในทุก state และ variant ที่เป็นไปได้

เหตุผลที่ควรใช้ Storybook ร่วมกับ Tailwind CSS

• การพัฒนา Component-Driven: Storybook สนับสนุนแนวทางการพัฒนาแบบ component-driven อย่างเต็มที่ ทำให้เราสามารถโฟกัสกับการสร้าง components ที่ reusable และ maintainable
• การทดสอบ Isolated: Storybook ช่วยให้เราทดสอบ components ในสภาพแวดล้อมที่แยกจากกัน ทำให้ง่ายต่อการ debug และระบุปัญหา
• Documentation: Storybook สร้าง documentation ของ components โดยอัตโนมัติ ทำให้ทีมงานสามารถเข้าใจการใช้งาน components ได้ง่ายขึ้น
• การทำงานร่วมกัน: Storybook ช่วยให้ทีมงาน (นักพัฒนา, นักออกแบบ, QA) สามารถทำงานร่วมกันได้อย่างมีประสิทธิภาพ โดยการแชร์ components และ states ต่างๆ ได้อย่างง่ายดาย
• Visual Testing: Storybook รองรับ visual testing ทำให้เราสามารถตรวจจับ visual regressions ได้อย่างรวดเร็ว

การตั้งค่า Storybook

เริ่มต้นด้วยการสร้างโปรเจกต์ React (หรือ framework อื่นๆ ที่ Storybook รองรับ) หากมีอยู่แล้ว ข้ามไปขั้นตอนถัดไป

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

จากนั้น ติดตั้ง Storybook โดยใช้คำสั่ง:

npx storybook init

คำสั่งนี้จะติดตั้ง dependencies ที่จำเป็น และสร้างไฟล์ configuration พื้นฐานสำหรับ Storybook หากโปรเจกต์ของคุณใช้ TypeScript ให้ตรวจสอบให้แน่ใจว่า Storybook ได้ตั้งค่า TypeScript correctly แล้ว

ต่อไป ติดตั้ง Tailwind CSS และ PostCSS (ถ้ายังไม่ได้ติดตั้ง):

npm install -D tailwindcss postcss autoprefixer

สร้างไฟล์ tailwind.config.js และ postcss.config.js:

npx tailwindcss init -p

กำหนดค่า tailwind.config.js (ตัวอย่าง):

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./stories/**/*.{js,jsx,ts,tsx}", // เพิ่ม path นี้เพื่อรวม stories
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

กำหนดค่า postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

สร้างไฟล์ ./src/index.css (หรือไฟล์ CSS หลักของคุณ) และเพิ่ม Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

import ไฟล์ CSS นี้ใน .storybook/preview.js:

// .storybook/preview.js

import '../src/index.css';

const preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

ตอนนี้ Storybook ของคุณควรรองรับ Tailwind CSS แล้ว

การเขียน Stories

สร้างไฟล์ story สำหรับ component ที่คุณต้องการทดสอบ ตัวอย่างเช่น สร้าง component ชื่อ Button ใน ./src/components/Button.jsx:

// ./src/components/Button.jsx

import React from 'react';

const Button = ({ children, onClick, className }) => {
  return (
    <button
      className={`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ${className}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;

จากนั้น สร้างไฟล์ story สำหรับ Button ใน ./stories/Button.stories.jsx:

// ./stories/Button.stories.jsx

import React from 'react';
import Button from '../src/components/Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    onClick: { action: 'clicked' },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  children: 'Primary Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  children: 'Secondary Button',
  className: 'bg-gray-500 hover:bg-gray-700',
};

ในตัวอย่างนี้ เราได้สร้างสอง stories: Primary และ Secondary โดยแต่ละ story จะแสดงผล Button component ด้วย props ที่แตกต่างกัน

รัน Storybook โดยใช้คำสั่ง:

npm run storybook

Storybook จะเปิดใน browser ของคุณ และคุณจะเห็น Button component ที่แสดงผลด้วย styles ที่กำหนดไว้ใน Tailwind CSS

การใช้ Addons

Storybook มี addons มากมายที่ช่วยเพิ่มประสิทธิภาพในการพัฒนาและทดสอบ UI components ตัวอย่างเช่น:

• @storybook/addon-essentials: รวม addons พื้นฐาน เช่น controls, actions, และ backgrounds
• @storybook/addon-a11y: ช่วยตรวจสอบ accessibility ของ components
• @storybook/addon-jest: ช่วยรัน Jest tests ภายใน Storybook
• @storybook/addon-viewport: ช่วยทดสอบ components ใน viewports ที่แตกต่างกัน

ติดตั้ง addon โดยใช้คำสั่ง:

npm install -D @storybook/addon-essentials

เพิ่ม addon ใน .storybook/main.js:

// .storybook/main.js

const config = {
  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-essentials",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

หลังจากติดตั้งและกำหนดค่า addons แล้ว คุณจะสามารถใช้ features ต่างๆ ที่ addons เหล่านั้นมีให้ได้ใน Storybook

Trade-offs และแนวปฏิบัติที่ดี

• Consistency: ใช้ Tailwind CSS classes อย่างสม่ำเสมอทั้งใน Storybook และใน application หลัก เพื่อให้มั่นใจว่า components มีลักษณะที่เหมือนกันในทุกสภาพแวดล้อม
• Component Composition: สร้าง components ที่เล็กและ reusable และประกอบ components เหล่านั้นเข้าด้วยกันใน Storybook เพื่อสร้าง stories ที่ซับซ้อนยิ่งขึ้น
• Visual Testing: ใช้ visual testing addons เพื่อตรวจจับ visual regressions โดยอัตโนมัติ
• Accessibility: ใช้ accessibility addons เพื่อตรวจสอบให้แน่ใจว่า components ของคุณสามารถเข้าถึงได้ง่ายสำหรับผู้ใช้ทุกคน
• Documentation: เขียน documentation ที่ชัดเจนและกระชับสำหรับ components ของคุณใน Storybook เพื่อให้ทีมงานสามารถเข้าใจการใช้งาน components ได้ง่ายขึ้น

การใช้ Tailwind CSS ร่วมกับ Storybook เป็นแนวทางที่มีประสิทธิภาพในการพัฒนา UI components ที่ reusable, maintainable, และ accessible การลงทุนในการตั้งค่า Storybook และการเขียน stories ที่ดี จะช่วยลดเวลาในการพัฒนา, เพิ่มคุณภาพของโค้ด, และส่งเสริมการทำงานร่วมกันในทีม