chore: moved storybook config to config library

.github/workflows/master.yml

@@ -11,7 +11,7 @@ jobs:
     name: Linting project
     runs-on: ubuntu-latest
     steps:
-      # Node.js and pnpm setup
+      # Node.js and yarn setup
       - uses: actions/checkout@v3
       - name: Installing Node.js 19.x
         uses: actions/setup-node@v3
@@ -28,7 +28,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-        # Node.js and pnpm setup
+        # Node.js and yarn setup
       - name: Installing Node.js 19.x
         uses: actions/setup-node@v3
         with:
@@ -47,3 +47,27 @@ jobs:
           FOLDER: dist
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           MESSAGE: "Build: ({sha}) {msg}"
+      - name: Building storybook
+        run: yarn dlx nx run ui:storybook:build
+      - name: Pushing to build-storybook branch
+      - uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist/storybook/ui
+          branch: storybook-build
+  testing:
+    name: Testing project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        # Node.js and yarn setup
+      - name: Installing Node.js 19.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 19.x
+        # Installing deps
+      - name: Installing dependencies
+        run: yarn install
+        # Main rules
+      - name: Testing storybook
+        run: yarn dlx nx run ui:storybook:test
+

apps/client/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "cg-config/tsconfig/base.json",
+  "extends": "cg-config/src/tsconfig/base.json",
   "compilerOptions": {
     "target": "ESNext",
     "module": "ESNext",

apps/server/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "cg-config/tsconfig/base.json",
+  "extends": "cg-config/src/tsconfig/base.json",
   "files": [],
   "include": [],
   "references": [

libs/client-shared/src/storybook/index.ts

@@ -1,2 +1,2 @@
 export * from './decorators'
-export { createViewPorts } from './config/viewports'
+export * from './lib'

libs/client-shared/src/storybook/lib/create-storybook-variant.ts

@@ -0,0 +1,11 @@
+import { Decorator } from '@storybook/react'
+
+export const createStorybookVariant = <T>(defaultArgs: T) => {
+  return (additionalArgs: Partial<T> = {}, decorators: Decorator[] = []) => ({
+    args: {
+      ...defaultArgs,
+      ...additionalArgs
+    },
+    decorators
+  })
+}

libs/client-shared/src/storybook/lib/index.ts

@@ -0,0 +1 @@
+export { createStorybookVariant } from 'src/storybook/lib/create-storybook-variant'

libs/client-shared/tsconfig.json

@@ -17,5 +17,5 @@
       "path": "./tsconfig.spec.json"
     }
   ],
-  "extends": "cg-config/tsconfig/base.json"
+  "extends": "cg-config/src/tsconfig/base.json"
 }

libs/client-shared/vite.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
   plugins: [
     dts({
       entryRoot: 'src',
-      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.consts.json'),
       skipDiagnostics: true
     }),
     react(),

libs/config/src/index.ts

@@ -1,2 +1,5 @@
-export * from './lib/client'
-export * from './lib/server'
+export * from './consts/client'
+export * from './consts/server'
+
+export { createStorybookConfig } from './storybook/create-storybook-config'
+export { createPreviewDefaults } from './storybook/create-preview-defaults'

libs/config/src/storybook/create-preview-defaults.ts

@@ -0,0 +1,31 @@
+import { Decorator, Preview } from '@storybook/react'
+import { createViewPorts } from './plugins/create-viewports'
+
+interface PreviewDefaultsPayload {
+  decorators: Decorator[]
+}
+
+type CreatePreviewDefaults = (args: PreviewDefaultsPayload) => Preview
+
+export const createPreviewDefaults: CreatePreviewDefaults = ({
+  decorators
+}) => ({
+  parameters: {
+    viewport: {
+      viewports: createViewPorts()
+    },
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    },
+    backgrounds: {
+      values: []
+    },
+    storySort: (a, b) =>
+      a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true })
+  },
+  decorators
+})

libs/config/src/storybook/create-storybook-config.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+interface StorybookConfigPayload {
+  viteConfigPath: string
+  viteFinal: (config: StorybookConfig) => StorybookConfig
+}
+
+type CreateStorybookConfig = (args: StorybookConfigPayload) => StorybookConfig
+
+export const createStorybookConfig: CreateStorybookConfig = ({
+  viteConfigPath,
+  viteFinal
+}) => ({
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath
+      }
+    }
+  },
+  viteFinal
+})

libs/config/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "cg-config/tsconfig/base.json",
+  "extends": "cg-config/src/tsconfig/base.json",
   "compilerOptions": {
     "module": "commonjs",
     "forceConsistentCasingInFileNames": true,

libs/config/tsconfig.lib.json

@@ -6,7 +6,8 @@
     "types": ["node"],
     "baseUrl": ".",
     "paths": {
-      "$/services": ["../services/src/index.ts"],
+      "$/services": ["../nest-services/src/index.ts"],
+      "$/client-shared": ["../client-shared/src/index.ts"],
       "$/server/*": ["../../apps/server/src/*"]
     }
   },

libs/editor/tsconfig.json

@@ -17,5 +17,5 @@
       "path": "./tsconfig.spec.json"
     }
   ],
-  "extends": "cg-config/tsconfig/base.json"
+  "extends": "cg-config/src/tsconfig/base.json"
 }

libs/nest-common/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "cg-config/tsconfig/base.json",
+  "extends": "cg-config/src/tsconfig/base.json",
   "compilerOptions": {
     "module": "commonjs",
     "forceConsistentCasingInFileNames": true,

libs/nest-services/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "cg-config/tsconfig/base.json",
+  "extends": "cg-config/src/tsconfig/base.json",
   "compilerOptions": {
     "module": "commonjs",
     "forceConsistentCasingInFileNames": true,

libs/nest-services/tsconfig.lib.json

@@ -1,5 +1,5 @@
 {
-  "extends": "cg-config/tsconfig/base.json",
+  "extends": "cg-config/src/tsconfig/base.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "declaration": true,

libs/ui/.eslintrc.json

@@ -3,6 +3,7 @@
     "../../.eslintrc.js"
   ],
   "ignorePatterns": [
-    "!**/*"
+    "!**/*",
+    ".storybook"
   ]
 }

libs/ui/.storybook/main.ts

@@ -1,24 +1,20 @@
+import { createStorybookConfig } from 'cg-config/src'
 import type { StorybookConfig } from '@storybook/react-vite'
 import { mergeConfig } from 'vite'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
 
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {
-      builder: {
-        viteConfigPath: 'libs/ui/vite.config.ts'
-      }
-    }
-  },
-  viteFinal: (config) => {
+const config: StorybookConfig = createStorybookConfig({
+  viteConfigPath: 'libs/ui/vite.config.ts',
+  viteFinal: (config: StorybookConfig): StorybookConfig => {
     return mergeConfig(config, {
       define: {
         'process.env': process.env
-      }
+      },
+      plugins: [
+        viteTsConfigPaths()
+      ]
     })
   }
-}
+})
 
 export default config

libs/ui/.storybook/preview.ts

@@ -1,29 +1,9 @@
-import {
-  createViewPorts,
-  ThemeDecorator,
-  StylesDecorator
-} from '$/client-shared'
-import { Preview, Decorator } from '@storybook/react'
+import { StylesDecorator, ThemeDecorator } from '$/client-shared'
+import { Preview } from '@storybook/react'
+import { createPreviewDefaults } from '$/config'
 
-const decorators: Decorator[] = [StylesDecorator, ThemeDecorator]
-
-const preview: Preview = {
-  parameters: {
-    viewport: {
-      viewports: createViewPorts()
-    },
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/
-      }
-    },
-    backgrounds: {
-      values: []
-    }
-  },
-  decorators
-}
+const preview: Preview = createPreviewDefaults({
+  decorators: [StylesDecorator, ThemeDecorator]
+})
 
 export default preview

libs/ui/package.json

@@ -9,6 +9,9 @@
       "require": "./index.js"
     }
   },
+  "dependencies": {
+    "cg-client-shared": "workspace:^"
+  },
   "devDependencies": {
     "cg-config": "workspace:^",
     "cg-generator": "workspace:^"

libs/ui/project.json

@@ -5,7 +5,7 @@
   "projectType": "library",
   "tags": [],
   "targets": {
-    "generate": {
+    "generate:ui": {
       "command": "cross-env HYGEN_TMPLS=../generator/templates hygen {args.m} {args.com} --module_name={args.n}",
       "options": {
         "cwd": "libs/ui",
@@ -16,7 +16,7 @@
         ]
       }
     },
-    "storybook": {
+    "storybook:serve": {
       "executor": "@nx/storybook:storybook",
       "options": {
         "port": 4400,
@@ -28,7 +28,7 @@
         }
       }
     },
-    "build-storybook": {
+    "storybook:build": {
       "executor": "@nx/storybook:build",
       "outputs": [
         "{options.outputDir}"
@@ -43,21 +43,22 @@
         }
       }
     },
-    "test-storybook": {
+    "storybook:test": {
       "executor": "nx:run-commands",
       "options": {
         "command": "test-storybook -c libs/ui/.storybook --url=http://localhost:4400"
-      }
+      },
+      "dependsOn": ["storybook:serve"]
     },
-    "static-storybook": {
+    "storybook:preview": {
       "executor": "@nx/web:file-server",
       "options": {
-        "buildTarget": "ui:build-storybook",
+        "buildTarget": "ui:storybook:build",
         "staticFilePath": "dist/storybook/ui"
       },
       "configurations": {
         "ci": {
-          "buildTarget": "ui:build-storybook:ci"
+          "buildTarget": "ui:storybook:build:ci"
         }
       }
     },