Merge pull request #48 from dgd03146/chore/storybook-deploy

chore: Deply Storybook with Chromatic #47

.github/workflows/storybook.yml

@@ -0,0 +1,68 @@
+name: Storybook Deployment
+run-name: ${{ github.actor }}'s storybook deploy
+on:
+  pull_request:
+    branches: [main, develop]
+    paths: apps/workshop/**
+  push:
+    branches:
+      - develop
+    paths:
+      - 'apps/workshop/src/**'
+
+jobs:
+  storybook:
+    runs-on: ubuntu-20.04
+    outputs:
+      status: ${{ job.status }}
+    steps:
+      - name: checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: set up Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: depedency install
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: pnpm install -no-frozen-lockfile
+        working-directory: apps/workshop
+
+      - name: publish to chromatic
+        id: chromatic
+        uses: chromaui/action@v1
+        with:
+          workingDir: apps/workshop
+          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+      - name: comment PR
+        if: github.event_name == 'pull_request'
+        uses: thollander/actions-comment-pull-request@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          message: '🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}'

apps/workshop/chromatic.config.json

@@ -0,0 +1,7 @@
+{
+  "autoAcceptChanges": "develop",
+  "exitOnceUploaded": true,
+  "onlyChanged": true,
+  "externals": ["public/**"],
+  "skip": "dependabot/**"
+}

apps/workshop/package.json

@@ -1,37 +1,39 @@
 {
-	"name": "workshop",
-	"private": true,
-	"version": "0.0.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite",
-		"build": "tsc && vite build",
-		"format": "pnpm biome format --write ./src",
-		"lint": "pnpm biome lint ./src --apply",
-		"preview": "vite preview",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build"
-	},
-	"dependencies": {
-		"@jung/design-system": "workspace:*",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"devDependencies": {
-		"@jung/configs": "workspace:*",
-		"@storybook/addon-essentials": "^8.0.5",
-		"@storybook/addon-interactions": "^8.0.5",
-		"@storybook/addon-links": "^8.0.5",
-		"@storybook/blocks": "^8.0.5",
-		"@storybook/react": "^8.0.5",
-		"@storybook/react-vite": "^8.0.5",
-		"@storybook/test": "^8.0.5",
-		"@types/react": "^18.2.56",
-		"@types/react-dom": "^18.2.19",
-		"@vanilla-extract/vite-plugin": "latest",
-		"@vitejs/plugin-react-swc": "latest",
-		"storybook": "^8.0.5",
-		"typescript": "^5.2.2",
-		"vite": "^5.1.4"
-	}
+  "name": "workshop",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "format": "pnpm biome format --write ./src",
+    "lint": "pnpm biome lint ./src --apply",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "pnpm dlx chromatic"
+  },
+  "dependencies": {
+    "@jung/design-system": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@jung/configs": "workspace:*",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-vite": "^8.0.5",
+    "@storybook/test": "^8.0.5",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "@vanilla-extract/vite-plugin": "latest",
+    "@vitejs/plugin-react-swc": "latest",
+    "chromatic": "^11.4.0",
+    "storybook": "^8.0.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
+  }
 }

package.json

@@ -1,47 +1,49 @@
 {
-	"name": "jung",
-	"private": true,
-	"scripts": {
-		"build": "turbo build",
-		"dev": "turbo dev",
-		"lint": "turbo lint",
-		"format": "turbo format",
-		"test": "turbo test",
-		"test:e2e": "turbo test:e2e",
-		"test:watch": "turbo test:watch",
-		"prepare": "husky",
-		"web": "pnpm --filter web",
-		"admin": "pnpm --filter admin",
-		"api": "pnpm --filter api",
-		"workshop": "pnpm --filter workshop"
-	},
-	"lint-staged": {
-		"*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [
-			"biome check --apply --no-errors-on-unmatched",
-			"biome check --apply --organize-imports-enabled=false --no-errors-on-unmatched",
-			"biome check --apply-unsafe --no-errors-on-unmatched",
-			"biome format --write --no-errors-on-unmatched",
-			"biome lint --apply --no-errors-on-unmatched"
-		]
-	},
-	"devDependencies": {
-		"@biomejs/biome": "1.6.1",
-		"@playwright/test": "^1.42.1",
-		"@jung/typescript-config": "workspace:*",
-		"@testing-library/jest-dom": "^6.4.2",
-		"@testing-library/react": "^14.2.1",
-		"@testing-library/user-event": "^14.5.2",
-		"@types/jest": "^29.5.2",
-		"@types/node": "^20.11.27",
-		"@jung/configs": "workspace:*",
-		"husky": "^9.0.11",
-		"jest": "^29.7.0",
-		"lint-staged": "^15.2.2",
-		"prettier": "^3.2.5",
-		"turbo": "latest"
-	},
-	"packageManager": "pnpm@8.9.0",
-	"engines": {
-		"node": ">=18"
-	}
+  "name": "jung",
+  "private": true,
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo lint",
+    "format": "turbo format",
+    "test": "turbo test",
+    "test:e2e": "turbo test:e2e",
+    "test:watch": "turbo test:watch",
+    "prepare": "husky",
+    "web": "pnpm --filter web",
+    "admin": "pnpm --filter admin",
+    "api": "pnpm --filter api",
+    "workshop": "pnpm --filter workshop",
+    "build-storybook": "turbo run build-storybook --filter=workshop",
+    "chromatic": "turbo run chromatic --filter=workshop"
+  },
+  "lint-staged": {
+    "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [
+      "biome check --apply --no-errors-on-unmatched",
+      "biome check --apply --organize-imports-enabled=false --no-errors-on-unmatched",
+      "biome check --apply-unsafe --no-errors-on-unmatched",
+      "biome format --write --no-errors-on-unmatched",
+      "biome lint --apply --no-errors-on-unmatched"
+    ]
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.6.1",
+    "@playwright/test": "^1.42.1",
+    "@jung/typescript-config": "workspace:*",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^20.11.27",
+    "@jung/configs": "workspace:*",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "turbo": "latest"
+  },
+  "packageManager": "pnpm@8.9.0",
+  "engines": {
+    "node": ">=18"
+  }
 }

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

@@ -2,7 +2,7 @@ import { type ButtonHTMLAttributes, type ReactNode, forwardRef } from 'react';
 import ClipLoader from 'react-spinners/ClipLoader';
 import { Box } from '..';
 import type { AtomProps } from '../../types/atoms';
-import { button } from './Button.css';
+import * as styles from './Button.css';
 
 export interface ButtonProps
 	extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'prefix' | 'color'>,
@@ -36,7 +36,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 				display='flex'
 				alignItems='center'
 				columnGap='1'
-				className={button({ variant, size, rounded, disabled, loading })}
+				className={styles.button({ variant, size, rounded, disabled, loading })}
 				disabled={disabled || loading}
 				aria-busy={loading}
 				ref={ref}

packages/design-system/components/Select/Select.tsx → packages/design-system/components/Select/SelectRoot.tsx

@@ -13,7 +13,7 @@ export interface SelectProps
 	defaultValue?: string;
 }
 
-export const Select = forwardRef<HTMLDivElement, SelectProps>(
+export const SelectRoot = forwardRef<HTMLDivElement, SelectProps>(
 	({ children, defaultValue, onValueChange, ...restProps }, ref?) => {
 		const valueProps = {
 			defaultValue,

packages/design-system/components/Select/index.ts

@@ -1,10 +1,11 @@
-import { Select } from './Select';
 import { SelectItem } from './SelectItem';
 import { SelectLabel } from './SelectLabel';
 import { SelectMenu } from './SelectMenu';
+import { SelectRoot } from './SelectRoot';
 import { SelectTrigger } from './SelectTrigger';
+export type { SelectProps } from './SelectRoot';
 
-const SelectCompound = Object.assign(Select, {
+const SelectCompound = Object.assign(SelectRoot, {
 	Trigger: SelectTrigger,
 	Menu: SelectMenu,
 	Item: SelectItem,

packages/design-system/components/index.ts

@@ -11,8 +11,8 @@ export { ListItem } from './List/ListItem';
 export { List } from './List/List';
 
 // Components
-export { Select } from './Select';
-export { type SelectProps } from './Select/Select';
+export { Select, type SelectProps } from './Select';
+
 export { Tabs } from './Tabs';
 export { Tag, type TagProps } from './Tag/Tag';
 export { Typography } from './Typography';

packages/design-system/icons/CheckIcon.tsx

@@ -1,4 +1,4 @@
-import { BiCheck } from "react-icons/Bi";
+import { BiCheck } from 'react-icons/bi';
 
 export const CheckIcon = () => {
 	return <BiCheck aria-hidden />;

packages/design-system/package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "lodash": "^4.17.21",
+    "react-icons": "^5.0.1",
     "react-spinners": "^0.13.8"
   }
 }

turbo.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "globalDependencies": ["**/.env.*local"],
+  "pipeline": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": [".next/**", "!.next/cache/**"]
+    },
+    "lint": {
+      "dependsOn": ["^lint"]
+    },
+    "format": {
+      "dependsOn": ["^format"]
+    },
+    "test": {
+      "dependsOn": ["^test"]
+    },
+    "test:e2e": {
+      "dependsOn": ["^test:e2e"]
+    },
+    "test:watch": {
+      "dependsOn": ["^test:watch"]
+    },
+    "build-storybook": {
+      "dependsOn": ["^build-storybook"]
+    },
+    "chromatic": {
+      "dependsOn": ["^chromatic"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}