Chromatic CI 파이프라인 구축

.github/workflows/chromatic.yml

@@ -0,0 +1,39 @@
+# .github/workflows/chromatic.yml
+
+name: 'Chromatic'
+
+on: workflow_call
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}-chromatic
+  cancel-in-progress: true
+
+permissions:
+  actions: write
+  contents: read
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install dependencies
+        # ⚠️ Pick one of these, matching the package manager for your project
+        # run: npm ci
+        # run: pnpm install
+        run: yarn install --immutable --immutable-cache --check-cache
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: apps/docs
+          onlyChanged: true # 👈 Required option to enable TurboSnap / 터보스냅이 필요할지는 테스트 여부에 따라 상이할 예정
+          exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing
+          autoAcceptChanges: 'master' # 👈 Option to accept all changes on master
+          # ignoreLastBuildOnBranch: 'my-branch' # 👈 Option to ignore the last build on target branch

.github/workflows/deploy.yml

@@ -0,0 +1,43 @@
+# .github/workflows/deploy.yml
+name: 🚀 Deploy
+
+on:
+  push:
+    branches:
+      - master
+      - devlop
+      - feature/**
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  actions: write
+  contents: read
+
+jobs:
+  changed-files:
+    runs-on: ubuntu-latest
+    name: changed-files
+    outputs:
+      all_changed_files: ${{ steps.changed-files.outputs.all_changed_files }}
+      any_changed: ${{ steps.changed-files.outputs.any_changed }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v44
+        with:
+          files: |
+            apps/docs/**
+
+  chromatic:
+    name: Run visual tests
+    needs: [changed-files]
+    if: ${{ needs.changed-files.outputs.any_changed == 'true' }}
+    uses: ./.github/workflows/chromatic.yml
+    secrets: inherit

.gitignore

@@ -28,4 +28,7 @@ out
 coverage
 
 # Turbo
-.turbo
+.turbo
+
+# Env
+.env

apps/docs/.storybook/main.ts

@@ -1,33 +1,48 @@
 import fs from 'fs';
-import path from 'path';
+import path, { dirname, join } from 'path';
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
 function findStories() {
   const filePattern = /^.*\.stories\.tsx$/;
-  const pkgStoriesPath = `./stories`;
-  const files = fs.readdirSync(`${pkgStoriesPath}`);
+  const pkgStoriesPath = `../stories`;
+  const files = fs.readdirSync(path.resolve(__dirname, pkgStoriesPath));
 
   return files
     .filter((file) => filePattern.test(file))
-    .map((file) => `../${pkgStoriesPath}/${file}`);
+    .map((file) => `${pkgStoriesPath}/${file}`);
 }
 
 const config: StorybookConfig = {
   stories: [...findStories()],
+
   addons: [
-    '@storybook/addon-links',
+    '@chromatic-com/storybook',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-links',
+    '@storybook/addon-webpack5-compiler-swc',
     'storybook-dark-mode',
   ],
+
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
+
+  docs: {},
+
+  // NOTE: https://storybook.js.org/docs/configure/compilers#the-swc-compiler-doesnt-work-with-react
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
+
   webpackFinal: async (config) => {
     if (config.resolve) {
       config.resolve.plugins = [
@@ -37,7 +52,6 @@ const config: StorybookConfig = {
         }),
       ];
     }
-
     return config;
   },
 };

apps/docs/.storybook/preview.tsx

@@ -45,7 +45,6 @@ function CustomDjProvider(props: PropsWithChildren) {
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,

apps/docs/chromatic.config.json

@@ -0,0 +1,8 @@
+{
+  "projectId": "Project:664871fb3ef2a81e82b1f66f",
+  "autoAcceptChanges": "master",
+  "onlyChanged": true,
+  "exitOnceUploaded": true,
+  "storybookBaseDir": "apps/docs",
+  "zip": true
+}

apps/docs/package.json

@@ -6,30 +6,34 @@
   "homepage": "",
   "license": "ISC",
   "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build": "storybook build --docs",
+    "storybook": "storybook dev -p 6006",
+    "build": "storybook build",
+    "build-storybook": "storybook build",
     "preview": "serve storybook-static",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf storybook-static"
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf storybook-static",
+    "chromatic": "dotenv -e apps/docs/.env chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
   },
   "dependencies": {
     "@danji/components": "^0.0.0",
+    "@danji/css": "^0.0.0",
     "@danji/styled": "^0.0.0",
-    "@danji/css": "^0.0.0"
+    "@storybook/test": "^8.0.9"
   },
   "devDependencies": {
-    "serve": "^14.2.1",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
-    "@storybook/blocks": "^7.0.18",
-    "@storybook/cli": "^7.0.18",
-    "@storybook/react": "^7.0.18",
-    "@storybook/react-webpack5": "^7.0.18",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@chromatic-com/storybook": "^1.3.3",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.1.1",
+    "@storybook/cli": "^8.1.1",
+    "@storybook/react": "^8.1.1",
+    "@storybook/react-webpack5": "^8.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.18",
-    "storybook-dark-mode": "^3.0.3",
+    "serve": "^14.2.1",
+    "storybook": "^8.0.9",
+    "storybook-dark-mode": "^4.0.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
   "eslintConfig": {

package.json

@@ -17,6 +17,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
     "cross-env": "^7.0.3",
+    "dotenv-cli": "^7.4.2",
     "eslint": "^8.41.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -26,7 +27,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
     "hygen": "^6.2.11",
     "jest": "^29.5.0",