[#370] Storybook & Headless UI 추가 (#371)

* chore: storybook, chromatic 패키지 추가

* feat: 스토리북 프리뷰 확인용 workflow 작성

* chore: @babel/core 등 몇몇 종속성 패키지 추가

* chore: Headless UI 추가

* chore: Tailwind CSS 추가

* setting: tailwind 설정

* Update tailwind.config.js

Co-authored-by: harry kim <[email protected]>

* feat: PR에 새로운 커밋 발생하면 새로 코멘트를 생성하지 않고 수정

---------

Co-authored-by: harry kim <[email protected]>

.eslintrc.json

@@ -12,7 +12,8 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "next/core-web-vitals"
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
   ],
   "rules": {
     "@typescript-eslint/no-unused-vars": [

.github/workflows/chromatic.yml

@@ -0,0 +1,47 @@
+name: Storybook Deployment
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  chromatic-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+
+      - name: Install Dependency
+        run: yarn install --immutable
+
+      - name: Publish Chromatic
+        id: chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
+
+      - name: Find Comment
+        if: github.event_name == 'pull_request'
+        uses: peter-evans/find-comment@v2
+        id: find_comment
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: 🚀 Storybook
+
+      - name: Create or update comment
+        if: github.event_name == 'pull_request'
+        uses: peter-evans/create-or-update-comment@v2
+        with:
+          comment-id: ${{ steps.find_comment.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: '🚀 Storybook: ${{ steps.chromatic.outputs.storybookUrl }}'
+          edit-mode: replace

.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        postCss: true,
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  refs: {
+    '@chakra-ui/react': {
+      disable: true,
+    },
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,19 @@
+import type { Preview } from '@storybook/react';
+import '@/styles/global.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};
+
+export default preview;

package.json

@@ -7,13 +7,16 @@
     "build": "next build",
     "start": "next start -H local.dev.dadok.site",
     "lint": "next lint",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.17",
     "@chakra-ui/react": "^2.4.9",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@headlessui/react": "^1.7.15",
     "@tanstack/react-query": "^4.24.4",
     "@tanstack/react-query-devtools": "^4.24.12",
     "@types/node": "18.13.0",
@@ -31,19 +34,38 @@
     "recoil": "^0.7.7"
   },
   "devDependencies": {
+    "@babel/core": "^7.22.8",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-interactions": "^7.0.26",
+    "@storybook/addon-links": "^7.0.26",
+    "@storybook/addon-styling": "^1.3.2",
+    "@storybook/blocks": "^7.0.26",
+    "@storybook/nextjs": "^7.0.26",
+    "@storybook/react": "^7.0.26",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "@svgr/webpack": "^6.5.1",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "autoprefixer": "^10.4.14",
+    "chromatic": "^6.19.9",
     "eslint": "^8.34.0",
     "eslint-config-next": "^13.1.6",
+    "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.1",
+    "postcss": "^8.4.25",
     "prettier": "^2.8.4",
-    "typescript": "^4.9.5"
+    "storybook": "^7.0.26",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^4.9.5",
+    "webpack": "^5.88.1"
   },
   "lint-staged": {
     "src/**/*.{ts,tsx}": [
       "eslint --fix --max-warnings 0",
       "prettier --write"
     ]
-  }
+  },
+  "readme": "ERROR: No README data found!",
+  "_id": "[email protected]"
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import ContextProvider from '@/components/ContextProvider';
 import { ReactNode } from 'react';
+import '@/styles/global.css';
 
 const RootLayout = ({ children }: { children: ReactNode }) => {
   return (

src/stories/Button.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

src/stories/Button.tsx

@@ -0,0 +1,56 @@
+// ./src/stories/Button.js
+
+import React, { ComponentPropsWithoutRef, useMemo } from 'react';
+
+const getSizeClasses = (size: string) => {
+  switch (size) {
+    case 'small': {
+      return 'px-4 py-2.5';
+    }
+    case 'large': {
+      return 'px-6 py-3';
+    }
+    default: {
+      return 'px-5 py-2.5';
+    }
+  }
+};
+
+const getModeClasses = (isPrimary: boolean) =>
+  isPrimary
+    ? 'text-white bg-pink-600 border-pink-600 dark:bg-pink-700 dark:border-pink-700'
+    : 'text-slate-700 bg-transparent border-slate-700 dark:text-white dark:border-white';
+
+const BASE_BUTTON_CLASSES =
+  'cursor-pointer rounded-full border-2 font-bold leading-none inline-block';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  label,
+  ...props
+}: {
+  primary: boolean;
+  size: string;
+  label: string;
+} & ComponentPropsWithoutRef<'button'>) => {
+  const computedClasses = useMemo(() => {
+    const modeClass = getModeClasses(primary);
+    const sizeClass = getSizeClasses(size);
+
+    return [modeClass, sizeClass].join(' ');
+  }, [primary, size]);
+
+  return (
+    <button
+      type="button"
+      className={`${BASE_BUTTON_CLASSES} ${computedClasses}`}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

src/stories/Switch.stories.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import MySwitch from './Switch';
+
+const meta: Meta<typeof MySwitch> = {
+  title: 'Example/MySwitch',
+  component: MySwitch,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MySwitch>;
+
+export const Primary: Story = {
+  args: {},
+};

src/stories/Switch.tsx

@@ -0,0 +1,25 @@
+import { Switch } from '@headlessui/react';
+import { Fragment } from 'react';
+
+const MySwitch = () => {
+  return (
+    <Switch name="terms-of-service" defaultChecked={true} as={Fragment}>
+      {({ checked }) => (
+        <button
+          className={`${
+            checked ? 'bg-blue-600' : 'bg-gray-200'
+          } relative inline-flex h-6 w-11 items-center rounded-full`}
+        >
+          <span className="sr-only">Enable notifications</span>
+          <span
+            className={`${
+              checked ? 'translate-x-6' : 'translate-x-1'
+            } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+          />
+        </button>
+      )}
+    </Switch>
+  );
+};
+
+export default MySwitch;

src/styles/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/pages/**/*.{ts,tsx}',
+    './src/components/**/*.{ts,tsx}',
+    './src/ui/**/*.{ts,tsx}',
+    './src/app/**/*.{ts,tsx}',
+    './src/stories/**/*.{ts,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};