Setting(design-system): storybook 설정 및 chromatic 배포

.github/workflows/chromatic.yml

@@ -0,0 +1,72 @@
+name: 'Chromatic Publish'
+
+on:
+  pull_request:
+    branches:
+      - develop
+
+permissions: write-all
+
+jobs:
+  storybook:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install PNPM
+        run: npm i -g pnpm
+
+      - name: Cache node modules
+        id: cache-node
+        uses: actions/cache@v3
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install Dependencies
+        if: steps.cache-node.outputs.cache-hit != 'true'
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Storybook for design system(pds)
+        run: pnpm --filter @pinback/design-system run build:storybook
+
+      - name: Publish to Chromatic
+        id: chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: packages/design-system
+          buildScriptName: build:storybook
+          onlyChanged: true
+          autoAcceptChanges: true
+          exitOnceUploaded: true
+
+      - name: Comment PR on Success
+        if: success() && github.event_name == 'pull_request'
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          comment_tag: ${{ github.event.number }}-storybook
+          message: |
+            ✅ Storybook chromatic 배포 확인:
+            🐿️ [storybook](${{ steps.chromatic.outputs.storybookUrl }})
+
+      - name: Comment PR on Failure
+        if: failure() && github.event_name == 'pull_request'
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          comment_tag: ${{ github.event.number }}-storybook
+          message: |
+            🚨 Storybook 배포 실패
+            : Github Actions 로그를 확인해주세요.

.gitignore

@@ -40,3 +40,6 @@ yarn-error.log*
 # typescript
 # 증분 빌드 정보 파일
 *.tsbuildinfo
+
+*storybook.log
+storybook-static

.vscode/settings.json

@@ -17,5 +17,6 @@
   "tailwindCSS.suggestions": true,
   "editor.quickSuggestions": {
     "strings": true
-  }
+  },
+  "tailwindCSS.experimental.configFile": "./packages/design-system/styles.css"
 }

packages/design-system/.storybook/main.ts

@@ -0,0 +1,32 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { dirname, join } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-vitest'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  docs: {
+    defaultName: 'Documentation',
+  },
+  typescript: {
+    check: true,
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+export default config;

packages/design-system/.storybook/preview.ts

@@ -0,0 +1,20 @@
+import type { Preview } from '@storybook/react-vite';
+import '../styles.css';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+        text: /(title|label|name|placeholder|text)$/i,
+      },
+    },
+  },
+
+  tags: ['autodocs'],
+};
+
+export default preview;

packages/design-system/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

packages/design-system/eslint.config.mjs

@@ -1,4 +1,23 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from 'eslint-plugin-storybook';
+
 import config from '@pinback/eslint-config/react-internal';
 
 /** @type {import("eslint").Linter.Config} */
-export default config;
+export default [
+  ...storybook.configs['flat/recommended'],
+  ...config,
+  {
+    files: ['**/*.js', '**/*.ts'],
+    ignores: [
+      'node_modules',
+      'dist',
+      'build',
+      'public',
+      'public/**',
+      'public/**/*',
+      'storybook-static',
+      'icons/**/*',
+    ],
+  },
+];

packages/design-system/package.json

@@ -11,25 +11,41 @@
   },
   "scripts": {
     "lint": "eslint .",
-    "build": "vite build",
     "check-types": "tsc --noEmit",
+    "build": "vite build",
+    "build:storybook": "storybook build",
+    "dev:storybook": "storybook dev -p 6006",
     "generate:component": "turbo gen react-component"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "4.1.1",
     "@pinback/eslint-config": "workspace:*",
     "@pinback/tailwind-config": "workspace:*",
     "@pinback/typescript-config": "workspace:*",
+    "@storybook/addon-a11y": "9.1.3",
+    "@storybook/addon-docs": "9.1.3",
+    "@storybook/addon-onboarding": "^9.1.3",
+    "@storybook/addon-vitest": "9.1.3",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react-vite": "9.1.3",
     "@tailwindcss/vite": "^4.1.12",
-    "@vitejs/plugin-react": "^4.5.2",
     "@turbo/gen": "^2.5.0",
     "@types/node": "^22.15.3",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.1",
+    "@vitejs/plugin-react": "^4.5.2",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "chromatic": "^13.1.3",
     "eslint": "^9.33.0",
+    "eslint-plugin-storybook": "9.1.3",
+    "playwright": "^1.55.0",
+    "storybook": "9.1.3",
     "tailwindcss": "^4.1.12",
     "typescript": "5.9.2",
     "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2"
+    "vite": "^7.1.2",
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",

packages/design-system/src/Introduction.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Introduction" />
+
+# PinBack Design System (pds)
+
+#### pds는 PinBack 서비스를 위한 통합된 디자인 언어입니다.
+
+<br />
+<br />
+<br />
+
+## pds 사용하기
+
+#### pds는 총 3개의 서비스에 걸쳐 제공됩니다. [(Github)](https://github.com/Pinback-Team/pinback-client)<br />이 사이트는 모든 PinBack 서비스의 기반이 되어 디자인에 필요한 가이드라인 및 스펙을 제공합니다.
+
+- client
+- extension
+- landing
+
+<br />
+
+## 가이드라인
+
+- Components
+- Colors
+- Fonts
+- Icons

packages/design-system/src/components/button/Button.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Button from './Button';
+
+// Storybook에 컴포넌트를 어떻게 표시할지 정의합니다.
+const meta: Meta<typeof Button> = {
+  title: 'UI/Button',
+  component: Button,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+  },
+};

packages/design-system/src/components/button/Button.tsx

@@ -1,5 +1,13 @@
-const Button = () => {
-  return <div>Button</div>;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}
+
+const Button = ({ children, ...props }: ButtonProps) => {
+  return (
+    <button type="button" {...props}>
+      {children}
+    </button>
+  );
 };
 
 export default Button;

packages/design-system/turbo.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../../node_modules/turbo/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "with": ["build:storybook"]
+    },
+    "build:storybook": {
+      "outputs": ["storybook-static/**"]
+    },
+    "dev:storybook": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}

packages/design-system/vite.config.ts

@@ -1,8 +1,16 @@
+/// <reference types="vitest/config" />
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import { defineConfig } from 'vite';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
 
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
   plugins: [react(), tailwindcss()],
   resolve: {
@@ -27,4 +35,32 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({
+            configDir: path.join(dirname, '.storybook'),
+          }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: 'playwright',
+            instances: [
+              {
+                browser: 'chromium',
+              },
+            ],
+          },
+          setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+      },
+    ],
+  },
 });

packages/design-system/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />