chore(web, sds): Storybook & Chromatic 세팅 (#59)

* chore: apps/web storybook init

* storybook: 기본 컴포넌트 제거 및 Home 스토리북 추가

* chore: sds storybook init

* chore: storybook log ignore

* chore: rebase 이후 storybook lock 파일 변경사항 적용

* chore: Home, Button Storybook 작성

css prop 안 먹힘
react not defined 문제

* fix: eslint 에러 수정

* fix: react not defined, css props 오류 해결

* chore: pnpm 8.15.6 버전 적용

* refactor: storybook control 파라미터 추가

* feat: FirstFeatureOfFirstDomainTestButton Storybook 생성

* refactor: Props 오타 수정

* refactor: Storybook 디렉토리명 변경

* fix: FirstFeatureOfFirstDomainTestButton 'use client' 추가

* refactor: FirstFeatureOfFirstDomainTestButton client Component 적용

* refactor: 불필요한 use client 제거

* chore: chromatic 설정

* chore: chromatic deploy yml 작성

* refactor: chromatic yml log

* refactor: chromatic yml log-2

* refactor: chromatic yml log-3

* refactor: chromatic yml deploy

* refactor: chromatic yml deploy-2

* refactor: chromatic yml deploy-3

* refactor: chromatic yml deploy-4

* refactor: chromatic yml deploy-5

* refactor: chromatic yml deploy-6

* chore: chromatic deployment PR Comment

* chore: chromatic deployment PR Comment-2

* chore: chromatic deployment PR Comment-3

* chore: chromatic deployment PR Comment-finally

* chore: chromatic deployment PR Comment new line

* chore: storybook sds port 번호 변경

.github/workflows/chromatic.yml

@@ -0,0 +1,61 @@
+name: 'Chromatic Deployment'
+
+on:
+  pull_request:
+    branches: [main, develop]
+    paths:
+      - '**.stories.tsx'
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 8
+
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Cache Dependencies
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}-storybook
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install Dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: pnpm install
+
+      - name: Publish Project packages/core/sds to Chromatic
+        id: chromatic-sds
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_SDS }}
+          workingDir: packages/core/sds
+          onlyChanged: true
+          externals: packages/core/sds/assets/**
+
+      - name: Publish Project apps/web to Chromatic
+        id: chromatic-web
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN_WEB }}
+          workingDir: apps/web
+          onlyChanged: true
+          externals: packages/web-domains/assets/**
+
+      - name: Storybook Deployment PR Comment
+        uses: thollander/actions-comment-pull-request@v1
+        if: ${{ github.event_name == 'pull_request' }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+        with:
+          message: |
+            📣 SDS Storybook Deployment: ${{ steps.chromatic-sds.outputs.storybookUrl }}
+            📣 Web Storybook Deployment: ${{ steps.chromatic-web.outputs.storybookUrl }}

.gitignore

@@ -36,3 +36,5 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+*storybook.log

apps/web/.eslintrc.js

@@ -1,7 +1,7 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ['@sambad/eslint-config/next.js'],
+  extends: ['@sambad/eslint-config/next.js', 'plugin:storybook/recommended'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     tsconfigRootDir: __dirname,

apps/web/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

apps/web/.storybook/main.ts

@@ -0,0 +1,40 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+import { dirname, join } from 'path';
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/nextjs'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+  swc: () => ({
+    jsc: {
+      parser: {
+        syntax: 'typescript',
+        tsx: true,
+      },
+      transform: {
+        react: {
+          runtime: 'automatic',
+          importSource: '@emotion/react',
+        },
+      },
+    },
+  }),
+};
+export default config;

apps/web/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

apps/web/package.json

@@ -7,22 +7,36 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@sambad/web-domains": "workspace:*",
+    "next": "14.2.4",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "next": "14.2.4"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
     "@sambad/eslint-config": "workspace:*",
     "@sambad/typescript-config": "workspace:*",
-    "typescript": "^5",
+    "@storybook/addon-essentials": "^8.2.2",
+    "@storybook/addon-interactions": "^8.2.2",
+    "@storybook/addon-links": "^8.2.2",
+    "@storybook/addon-onboarding": "^8.2.2",
+    "@storybook/blocks": "^8.2.2",
+    "@storybook/nextjs": "^8.2.2",
+    "@storybook/react": "^8.2.2",
+    "@storybook/test": "^8.2.2",
     "@types/node": "^20",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "chromatic": "^11.5.5",
     "eslint": "^8",
-    "eslint-config-next": "14.2.4"
+    "eslint-config-next": "14.2.4",
+    "eslint-plugin-storybook": "^0.8.0",
+    "storybook": "^8.2.2",
+    "typescript": "^5"
   }
 }

apps/web/stories/FirstFeatureOfFirstDomainTestButton.stories.tsx

@@ -0,0 +1,25 @@
+import { FirstFeatureOfFirstDomainTestButton } from '@sambad/web-domains/first-domain';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/FirstFeatureOfFirstDomainTestButton',
+  component: FirstFeatureOfFirstDomainTestButton,
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'FirstFeatureOfFirstDomainTestButton 컴포넌트가 표시할 내용을 정의합니다.',
+    },
+  },
+} satisfies Meta<typeof FirstFeatureOfFirstDomainTestButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+  },
+  render: (args) => <FirstFeatureOfFirstDomainTestButton {...args} />,
+};

packages/core/sds/.eslintrc.js

@@ -1,7 +1,7 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ['@sambad/eslint-config/react-internal.js'],
+  extends: ['@sambad/eslint-config/react-internal.js', 'plugin:storybook/recommended'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     tsconfigRootDir: __dirname,

packages/core/sds/.storybook/main.ts

@@ -0,0 +1,40 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+import { dirname, join } from 'path';
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  swc: () => ({
+    jsc: {
+      parser: {
+        syntax: 'typescript',
+        tsx: true,
+      },
+      transform: {
+        react: {
+          runtime: 'automatic',
+          importSource: '@emotion/react',
+        },
+      },
+    },
+  }),
+};
+export default config;

packages/core/sds/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/core/sds/package.json

@@ -8,18 +8,33 @@
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
     "@sambad/eslint-config": "workspace:*",
     "@sambad/typescript-config": "workspace:*",
+    "@storybook/addon-essentials": "^8.2.2",
+    "@storybook/addon-interactions": "^8.2.2",
+    "@storybook/addon-links": "^8.2.2",
+    "@storybook/addon-onboarding": "^8.2.2",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
+    "@storybook/blocks": "^8.2.2",
+    "@storybook/react": "^8.2.2",
+    "@storybook/react-webpack5": "^8.2.2",
+    "@storybook/test": "^8.2.2",
     "@turbo/gen": "^1.12.4",
-    "@types/node": "^20.11.24",
     "@types/eslint": "^8.56.5",
+    "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
+    "chromatic": "^11.5.5",
     "eslint": "^8.57.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "react": "^18",
+    "storybook": "^8.2.2",
     "typescript": "^5.3.3"
   }
 }

packages/core/sds/src/components/Button.tsx

@@ -1,10 +1,9 @@
 'use client';
 
 import { css } from '@emotion/react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-import type { HTMLAttributes, ReactNode } from 'react';
-
-interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
   className?: string;
   appName: string;

packages/core/sds/src/stories/Button.stories.tsx

@@ -0,0 +1,35 @@
+import { Button } from '../components/Button';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Button 컴포넌트가 표시할 내용을 정의합니다.',
+    },
+    appName: {
+      control: 'text',
+      description: 'Button 컴포넌트를 click시 표시할 alert 내용을 정의합니다.',
+    },
+    className: {
+      control: 'text',
+      description: 'Button 컴포넌트의 className을 정의합니다.',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+    appName: 'undefined',
+    className: 'undefined',
+  },
+  render: (args) => <Button {...args} />,
+};

packages/web-domains/src/first-domain/features/components/FirstFeatureOfFirstDomainTestButton.tsx

@@ -1,17 +1,19 @@
+'use client';
+
 import { Button } from '@sambad/sds';
 
 import { useFirstFeatureOfFirstDomainTestButton } from '../hooks/useFirstFeatureOfFirstDomainTestButton';
 
 import type { HTMLAttributes, ReactNode } from 'react';
 
-interface FirstFeaturedOfFirstDomainTestButtonProps extends HTMLAttributes<HTMLButtonElement> {
+export interface FirstFeatureOfFirstDomainTestButtonProps extends HTMLAttributes<HTMLButtonElement> {
   children?: ReactNode;
 }
 
 export const FirstFeatureOfFirstDomainTestButton = ({
   children,
   ...rest
-}: FirstFeaturedOfFirstDomainTestButtonProps) => {
+}: FirstFeatureOfFirstDomainTestButtonProps) => {
   const { testText, handleChangeTestText } = useFirstFeatureOfFirstDomainTestButton();
 
   return (

packages/web-domains/src/first-domain/index.ts

@@ -1 +1,3 @@
 export { FirstDomainExampleScreen } from './screens/FirstDomainExampleScreen';
+export { FirstFeatureOfFirstDomainTestButton } from './features/components/FirstFeatureOfFirstDomainTestButton';
+export type { FirstFeatureOfFirstDomainTestButtonProps } from './features/components/FirstFeatureOfFirstDomainTestButton';