chore(ui): configured storybook, updated yarn to 3.6.2

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
     spec: "@yarnpkg/plugin-typescript"
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.2.cjs

libs/ui/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'libs/ui/vite.config.ts'
+      }
+    }
+  }
+}
+
+export default config
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/packages/storybook/documents/custom-builder-configs

libs/ui/project.json

@@ -9,7 +9,56 @@
       "command": "cross-env HYGEN_TMPLS=../generator/templates hygen {args.m} {args.com} --module_name={args.n}",
       "options": {
         "cwd": "libs/ui",
-        "args": ["m", "com", "n"]
+        "args": [
+          "m",
+          "com",
+          "n"
+        ]
+      }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/ui/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": [
+        "{options.outputDir}"
+      ],
+      "options": {
+        "outputDir": "dist/storybook/ui",
+        "configDir": "libs/ui/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c libs/ui/.storybook --url=http://localhost:4400"
+      }
+    },
+    "static-storybook": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "ui:build-storybook",
+        "staticFilePath": "dist/storybook/ui"
+      },
+      "configurations": {
+        "ci": {
+          "buildTarget": "ui:build-storybook:ci"
+        }
       }
     },
     "lint": {

libs/ui/tsconfig.json

@@ -1,4 +1,3 @@
-
 {
   "extends": "cg-config/tsconfig/base.json",
   "compilerOptions": {
@@ -20,6 +19,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
     }
-  ],
+  ]
 }

libs/ui/tsconfig.lib.json

@@ -8,9 +8,15 @@
     ],
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
-      "$/client-shared": ["../client-shared/src/index.ts"],
-      "$/styles": ["../client-shared/src/styles/index.ts"]
+      "@/*": [
+        "src/*"
+      ],
+      "$/client-shared": [
+        "../client-shared/src/index.ts"
+      ],
+      "$/styles": [
+        "../client-shared/src/styles/index.ts"
+      ]
     }
   },
   "files": [
@@ -25,7 +31,11 @@
     "**/*.spec.js",
     "**/*.test.js",
     "**/*.spec.jsx",
-    "**/*.test.jsx"
+    "**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
   ],
   "include": [
     "**/*.js",

libs/ui/tsconfig.storybook.json

@@ -0,0 +1,31 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": ""
+  },
+  "files": [
+    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.js"
+  ],
+  "include": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    ".storybook/*.js",
+    ".storybook/*.ts"
+  ]
+}

nx.json

@@ -8,7 +8,8 @@
           "build",
           "lint",
           "test",
-          "e2e"
+          "e2e",
+          "build-storybook"
         ],
         "accessToken": "MDYwYjBjOTMtZjZhMi00YmVkLTg2MmMtZjgwNmI0OGFiNmRkfHJlYWQtd3JpdGU="
       }
@@ -43,6 +44,14 @@
         "{workspaceRoot}/.eslintrc.js",
         "{workspaceRoot}/.eslintignore"
       ]
+    },
+    "build-storybook": {
+      "inputs": [
+        "default",
+        "^production",
+        "{projectRoot}/.storybook/**/*",
+        "{projectRoot}/tsconfig.storybook.json"
+      ]
     }
   },
   "namedInputs": {
@@ -55,7 +64,10 @@
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
       "!{projectRoot}/tsconfig.spec.json",
       "!{projectRoot}/.eslintrc.json",
-      "!{projectRoot}/jest.config.[jt]s"
+      "!{projectRoot}/jest.config.[jt]s",
+      "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+      "!{projectRoot}/.storybook/**/*",
+      "!{projectRoot}/tsconfig.storybook.json"
     ],
     "sharedGlobals": []
   },

package.json

@@ -5,7 +5,7 @@
   "auhtor": "Gearonix egor.uzhanin@gmail.com",
   "repository": "git@github.com:Gearonix/CodeGear.git",
   "description": "Fast online code editor built on Preact, Nest and Nx.",
-  "packageManager": "yarn@3.6.1",
+  "packageManager": "yarn@3.6.2",
   "engines": {
     "node": ">=16.0.0",
     "yarn": ">=3.2.0",
@@ -84,12 +84,21 @@
     "@nx/nest": "16.6.0",
     "@nx/node": "16.4.0",
     "@nx/react": "16.6.0",
+    "@nx/storybook": "16.6.0",
     "@nx/vite": "16.4.0",
+    "@nx/web": "16.6.0",
     "@nx/webpack": "16.4.0",
     "@nx/workspace": "16.4.0",
     "@nxext/preact": "^16.2.0",
     "@preact/preset-vite": "^2.5.0",
     "@release-it/conventional-changelog": "^7.0.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-interactions": "^7.1.0",
+    "@storybook/core-server": "^7.1.0",
+    "@storybook/jest": "~0.1.0",
+    "@storybook/react-vite": "^7.1.0",
+    "@storybook/test-runner": "^0.11.0",
+    "@storybook/testing-library": "~0.2.0",
     "@testing-library/preact": "^3.2.3",
     "@testing-library/react": "14.0.0",
     "@types/antd": "^1.0.0",

tsconfig.base.json

@@ -4,7 +4,8 @@
   "compilerOptions": {
     "rootDir": ".",
     "baseUrl": ".",
-    "paths": {}
+    "paths": {},
+    "skipLibCheck": true
   },
   "exclude": [
     "node_modules",