feat: setup chromatic

Author: noahluftyang

.github/workflows/chromatic.yaml

@@ -0,0 +1,28 @@
+name: Chromatic
+
+on:
+  push:
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: pnpm 설치
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+      - name: Node.js 환경 설정
+        uses: actions/setup-node@v4
+        with:
+          cache: pnpm
+          node-version-file: .nvmrc
+      - name: 의존성 설치
+        run: pnpm install
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -174,4 +174,6 @@ dist
 # Finder (MacOS) folder config
 .DS_Store
 
-*storybook.log
+# Storybook
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+export default {
+  stories: [
+    '../packages/**/*.mdx',
+    '../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-links',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+} satisfies StorybookConfig;

.storybook/preview.ts

@@ -0,0 +1,7 @@
+import 'sanitize.css';
+import 'sanitize.css/typography.css';
+import type { Preview } from '@storybook/react';
+
+export default {
+  tags: ['autodocs'],
+} satisfies Preview;

chromatic.config.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://www.chromatic.com/config-file.schema.json",
+  "buildScriptName": "build:storybook"
+}

package.json

@@ -2,12 +2,26 @@
   "name": "sipe-design-system",
   "private": true,
   "type": "module",
+  "scripts": {
+    "build:storybook": "storybook build",
+    "dev:storybook": "storybook dev -p 6006"
+  },
   "devDependencies": {
     "@biomejs/biome": "catalog:",
     "@changesets/cli": "^2.27.9",
+    "@storybook/addon-essentials": "catalog:",
+    "@storybook/addon-interactions": "catalog:",
+    "@storybook/addon-links": "catalog:",
+    "@storybook/blocks": "catalog:",
+    "@storybook/react": "catalog:",
+    "@storybook/react-vite": "catalog:",
+    "@storybook/test": "catalog:",
     "@tsconfig/strictest": "^2.0.5",
     "@types/node": "^22.8.1",
+    "chromatic": "^11.19.0",
     "knip": "catalog:",
+    "sanitize.css": "^13.0.0",
+    "storybook": "catalog:",
     "typescript": "catalog:"
   },
   "packageManager": "[email protected]"

packages/Input/src/Input.stories.tsx

@@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
 import { Action, Input } from './Input';
 
 const meta = {
+  title: 'Input',
   component: Input,
   parameters: {
     layout: 'centered',

packages/skeleton/src/Skeleton.stories.tsx

@@ -4,6 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Skeleton } from './Skeleton';
 
 const meta = {
+  title: 'Skeleton',
   component: Skeleton,
   parameters: {
     layout: 'centered',

packages/typography/src/Typography.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Typography } from './Typography';
 
 const meta = {
+  title: 'Typography',
   component: Typography,
   parameters: {
     layout: 'centered',