Feat: Publish Storybook in CI (#56)

.github/workflows/ci.yml

@@ -132,6 +132,33 @@ jobs:
       - name: Build Affected
         run: npx nx affected --target=build --parallel=3
 
+  publish-storybook:
+    name: Publish Storybook
+    needs: [build, lint, test]
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: nrwl/nx-set-shas@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: npm
+
+      - name: Cache NPM Dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            node_modules
+            ~/.cache
+            dist
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
+
+      - name: Publish Storybook Affected
+        run: npx nx affected --target=publish-storybook --parallel=3 --project-token=${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
   deploy-front-end:
     name: Deploy Front-End
     needs: [build, lint, test]

libs/ui/project.json

@@ -67,7 +67,15 @@
           "quiet": true
         }
       }
+    },
+    "publish-storybook": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build-storybook"],
+      "options": {
+        "parallel": false,
+        "commands": ["npx chromatic -d ./dist/storybook/ui --exit-zero-on-changes"]
+      }
     }
   },
-  "tags": []
+  "tags": ["frontend"]
 }

package.json

@@ -68,6 +68,7 @@
     "@typescript-eslint/parser": "5.60.1",
     "@vitest/coverage-c8": "0.32.0",
     "@vitest/ui": "0.32.0",
+    "chromatic": "^7.2.0",
     "cypress": "^13.0.0",
     "esbuild": "^0.19.2",
     "eslint": "8.46.0",