chore(soba): init storybook

Author: Chau Tran

libs/soba/.storybook/main.js

@@ -0,0 +1,14 @@
+const config = {
+    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/packages/storybook/documents/custom-builder-configs

libs/soba/.storybook/preview.js

@@ -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"
+    ]
+}

libs/soba/.storybook/tsconfig.json

@@ -42,6 +42,47 @@
             "options": {
                 "lintFilePatterns": ["libs/soba/**/*.ts", "libs/soba/**/*.html"]
             }
+        },
+        "storybook": {
+            "executor": "@storybook/angular:start-storybook",
+            "options": {
+                "port": 4400,
+                "configDir": "libs/soba/.storybook",
+                "browserTarget": "soba:build-storybook",
+                "compodoc": false
+            },
+            "configurations": {
+                "ci": {
+                    "quiet": true
+                }
+            }
+        },
+        "build-storybook": {
+            "executor": "@storybook/angular:build-storybook",
+            "outputs": ["{options.outputDir}"],
+            "options": {
+                "outputDir": "dist/storybook/soba",
+                "configDir": "libs/soba/.storybook",
+                "browserTarget": "soba:build-storybook",
+                "compodoc": false
+            },
+            "configurations": {
+                "ci": {
+                    "quiet": true
+                }
+            }
+        },
+        "static-storybook": {
+            "executor": "@nx/web:file-server",
+            "options": {
+                "buildTarget": "soba:build-storybook",
+                "staticFilePath": "dist/storybook/soba"
+            },
+            "configurations": {
+                "ci": {
+                    "buildTarget": "soba:build-storybook:ci"
+                }
+            }
         }
     }
 }

libs/soba/project.json

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

libs/soba/tsconfig.json

@@ -7,6 +7,13 @@
         "inlineSources": true,
         "types": []
     },
-    "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"],
+    "exclude": [
+        "src/**/*.spec.ts",
+        "src/test-setup.ts",
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "**/*.stories.ts",
+        "**/*.stories.js"
+    ],
     "include": ["src/**/*.ts"]
 }

libs/soba/tsconfig.lib.json

@@ -5,7 +5,7 @@
         "default": {
             "runner": "nx-cloud",
             "options": {
-                "cacheableOperations": ["build", "lint", "test", "e2e"],
+                "cacheableOperations": ["build", "lint", "test", "e2e", "build-storybook"],
                 "accessToken": "OWIxOTExNDctYWVjOC00MTY5LWJmMDktYWVhYzg3ZjhlYTZlfHJlYWQtd3JpdGU="
             }
         }
@@ -20,6 +20,9 @@
         },
         "lint": {
             "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
+        },
+        "build-storybook": {
+            "inputs": ["default", "^production", "!{projectRoot}/.storybook/**/*"]
         }
     },
     "namedInputs": {
@@ -29,7 +32,9 @@
             "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
             "!{projectRoot}/tsconfig.spec.json",
             "!{projectRoot}/jest.config.[jt]s",
-            "!{projectRoot}/.eslintrc.json"
+            "!{projectRoot}/.eslintrc.json",
+            "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+            "!{projectRoot}/.storybook/**/*"
         ],
         "sharedGlobals": []
     },

nx.json

@@ -24,10 +24,15 @@
         "@nx/js": "16.1.1",
         "@nx/linter": "16.1.1",
         "@nx/plugin": "16.1.1",
+        "@nx/storybook": "16.1.1",
+        "@nx/web": "16.1.1",
         "@nx/workspace": "16.1.1",
         "@release-it/bumper": "^4.0.2",
         "@release-it/conventional-changelog": "^5.1.1",
         "@schematics/angular": "16.0.0",
+        "@storybook/addon-essentials": "^7.0.8",
+        "@storybook/angular": "^7.0.8",
+        "@storybook/core-server": "^7.0.8",
         "@swc-node/register": "^1.6.4",
         "@swc/cli": "0.1.62",
         "@swc/core": "^1.3.49",
@@ -71,6 +76,8 @@
         "@swc/helpers": "0.5.1",
         "ngx-resize": "^2.0.0",
         "nice-color-palettes": "^3.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "rxjs": "~7.8.0",
         "three": "^0.150.1",
         "three-stdlib": "^2.21.8",