add & deploy storybook

.github/workflows/ci.yml

@@ -33,5 +33,5 @@ jobs:
         run: npx playwright install --with-deps
       - uses: nrwl/nx-set-shas@v4
 
-      - run: npx nx-cloud record -- nx format:check
+      # - run: npx nx-cloud record -- nx format:check
       - run: npx nx affected -t lint test build e2e-ci

.github/workflows/storybook.yml

@@ -0,0 +1,47 @@
+name: 'Storybook Publish'
+
+on:
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  storybook-deployment:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Checkout source
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: 'package.json'
+          cache: 'npm'
+
+      - uses: nrwl/nx-set-shas@v4
+
+      - name: Install dependencies
+        run: |
+          npm ci
+
+      - name: Restore nx cache
+        id: nxcache
+        uses: actions/cache@v4
+        with:
+          path: node_modules/.cache/nx
+          key: ${{ runner.os }}-nxcache-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-nxcache-
+
+      - name: build storybook
+        run: nx run sketch:build-storybook
+
+      - name: Publish to Chromatic
+        # see https://github.com/chromaui/action/tags for versions
+        uses: chromaui/[email protected]
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          storybookBuildDir: ./dist/storybook/sketch

.gitignore

@@ -40,3 +40,4 @@ Thumbs.db
 
 .nx/cache
 .angular
+.eslintcache

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
-  "*.ts": ["npx nx lint --fix --files"],
+  "*.ts": ["eslint --cache --fix"],
   "*": ["npx nx format:write --files"],
   "*.css": ["npx stylelint --fix"]
 }

README.md

@@ -4,6 +4,12 @@
 
 ✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨
 
+## Storybook
+
+Deployed from main: https://661d194a3f6d14d86c328554-yfvvdffiwi.chromatic.com/
+
+Chromatic app: https://www.chromatic.com/builds?appId=661d194a3f6d14d86c328554
+
 ## Integrate with editors
 
 Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console

chromatic.config.json

@@ -0,0 +1,8 @@
+{
+  "projectId": "Project:661d194a3f6d14d86c328554",
+  "autoAcceptChanges": "main",
+  "exitOnceUploaded": true,
+  "externals": ["public/**"],
+  "onlyChanged": true,
+  "storybookBuildDir": "dist/storybook/sketch"
+}

libs/sketch/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": ["!**/*", "storybook-static"],
   "overrides": [
     {
       "files": ["*.ts"],

libs/sketch/.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+};
+
+export default config;
+
+// To customize your webpack configuration you can use the webpackFinal field.
+// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
+// and https://nx.dev/recipes/storybook/custom-builder-configs

libs/sketch/.storybook/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true
+  },
+  "exclude": ["../**/*.spec.ts"],
+  "include": [
+    "../src/**/*.stories.ts",
+    "../src/**/*.stories.js",
+    "../src/**/*.stories.jsx",
+    "../src/**/*.stories.tsx",
+    "../src/**/*.stories.mdx",
+    "*.js",
+    "*.ts"
+  ]
+}

libs/sketch/project.json

@@ -31,6 +31,48 @@
     },
     "lint": {
       "executor": "@nx/eslint:lint"
+    },
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/sketch/.storybook",
+        "browserTarget": "sketch:build-storybook",
+        "compodoc": false
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@storybook/angular:build-storybook",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/sketch",
+        "configDir": "libs/sketch/.storybook",
+        "browserTarget": "sketch:build-storybook",
+        "compodoc": false
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "static-storybook": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "sketch:build-storybook",
+        "staticFilePath": "dist/storybook/sketch",
+        "spa": true
+      },
+      "configurations": {
+        "ci": {
+          "buildTarget": "sketch:build-storybook:ci"
+        }
+      }
     }
   }
 }

libs/sketch/src/lib/sketch/sketch.component.stories.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { SketchComponent } from './sketch.component';
+
+const meta: Meta<SketchComponent> = {
+  component: SketchComponent,
+  title: 'SketchComponent',
+};
+export default meta;
+type Story = StoryObj<SketchComponent>;
+
+export const Primary: Story = {
+  args: {},
+};

libs/sketch/tsconfig.json

@@ -17,6 +17,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
     }
   ],
   "extends": "../../tsconfig.base.json",

libs/sketch/tsconfig.lib.json

@@ -11,7 +11,9 @@
     "src/**/*.spec.ts",
     "src/test-setup.ts",
     "jest.config.ts",
-    "src/**/*.test.ts"
+    "src/**/*.test.ts",
+    "**/*.stories.ts",
+    "**/*.stories.js"
   ],
   "include": ["src/**/*.ts"]
 }

nx.json

@@ -10,7 +10,10 @@
       "!{projectRoot}/tsconfig.spec.json",
       "!{projectRoot}/jest.config.[jt]s",
       "!{projectRoot}/src/test-setup.[jt]s",
-      "!{projectRoot}/test-setup.[jt]s"
+      "!{projectRoot}/test-setup.[jt]s",
+      "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+      "!{projectRoot}/.storybook/**/*",
+      "!{projectRoot}/tsconfig.storybook.json"
     ],
     "sharedGlobals": []
   },
@@ -46,6 +49,15 @@
       "cache": true,
       "dependsOn": ["^build"],
       "inputs": ["production", "^production"]
+    },
+    "build-storybook": {
+      "cache": true,
+      "inputs": [
+        "default",
+        "^production",
+        "{projectRoot}/.storybook/**/*",
+        "{projectRoot}/tsconfig.storybook.json"
+      ]
     }
   },
   "plugins": [
@@ -77,6 +89,5 @@
       "style": "css"
     }
   },
-  "defaultProject": "demo-app",
-  "nxCloudAccessToken": "ZDI5MjU3NmYtYWU2OS00OGJkLWI0ODEtY2I1NDM2MGM1MDJifHJlYWQtd3JpdGU="
+  "defaultProject": "demo-app"
 }