feat(storybook): vite + chore(pnpm): hoist storybook

`storiesOf` are deprecated with `storyStoreV7` so `Icon.stories.tsx` is being explicitly ignored in storybook until it's been refactored

Author: oscario2

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*storybook*

.storybook/main.js

@@ -1,13 +1,44 @@
-//'../packages/**/*.stories.mdx',
+const { sync: glob } = require('fast-glob');
+const tsconfigPaths = require('vite-tsconfig-paths');
+
+// do not change
+const previewFolder = 'node_modules/.cache/storybook/public';
+
+// create `cache` folder if not exists
+require('fs').mkdirSync(previewFolder, { recursive: true });
+
+/** @type {import('@storybook/builder-vite').StorybookViteConfig} */
 module.exports = {
-  stories: [
-    "../packages/**/*.stories.mdx",
-    "../packages/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: "@storybook/react",
+    stories: glob('packages/**/*.stories.@(js|jsx|ts|tsx)', {
+        ignore: [
+            'packages/**/node_modules/**/*',
+            'packages/**/Icon.stories.tsx',
+        ],
+        onlyFiles: true,
+        absolute: true,
+    }),
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+    framework: '@storybook/react',
+    staticDirs: ['../' + previewFolder],
+    typescript: {
+        check: true,
+    },
+    core: {
+        builder: '@storybook/builder-vite',
+        disableTelemetry: true,
+    },
+    features: {
+        storyStoreV7: true,
+    },
+    async viteFinal(config, { configType }) {
+        config.plugins.push(tsconfigPaths.default());
+        config.resolve = {
+            ...config.resolve,
+            alias: {
+                ...config.resolve.alias,
+                fs: require.resolve('rollup-plugin-node-builtins'),
+            },
+        };
+        return config;
+    },
 };

.storybook/preview.js

@@ -1,12 +1,15 @@
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/
-    }
-  },
-  options: {
-    storySort: (a, b) => (a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }))
-  }
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+    options: {
+        storySort: (a, b) =>
+            a.title === b.title
+                ? 0
+                : a.id.localeCompare(b.id, undefined, { numeric: true }),
+    },
 };

package.json

@@ -49,12 +49,15 @@
         "@vitejs/plugin-react": "^1.3.2",
         "eslint": "~8.12.0",
         "eslint-config-prettier": "8.1.0",
+        "fast-glob": "^3.2.11",
         "jest": "^28.1.0",
         "jest-styled-components": "^7.0.8",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-lazily": "^0.9.1",
         "rollup-plugin-dts": "^4.2.1",
+        "rollup-plugin-node-builtins": "^2.1.2",
+        "storybook": "^6.5.8",
         "styled-components": "^5.3.5",
         "ts-jest": "27.1.4",
         "ts-node": "9.1.1",

packages/config/vite.config.ts

@@ -1,31 +1,32 @@
 import react from '@vitejs/plugin-react';
+import { PluginOption } from 'vite';
 import { UserConfigExport } from 'vite';
 import dts from 'vite-plugin-dts';
 
 /**
- *
  * @param cwd
- * @param external
+ * @param external packages as peer dependencies
  */
 const config = (cwd: string, external?: string[]): UserConfigExport => {
-  return {
-    root: cwd,
-    plugins: [
-      react(),
-      dts({ entryRoot: cwd + "/src", outputDir: cwd + "/dist" }),
-    ],
-    build: {
-      emptyOutDir: true,
-      lib: {
-        entry: cwd + '/src/index.ts',
-        fileName: 'index',
-        formats: ['es', 'cjs'],
-      },
-      outDir: cwd + '/dist',
-      rollupOptions: {
-        external,
-      },
-    },
-  };
+    const cfg: UserConfigExport = {
+        root: cwd,
+        plugins: [
+            react() as PluginOption,
+            dts({ entryRoot: cwd + '/src', outputDir: cwd + '/dist' }),
+        ],
+        build: {
+            emptyOutDir: true,
+            lib: {
+                entry: cwd + '/src/index.ts',
+                fileName: 'index',
+                formats: ['es', 'cjs'],
+            },
+            outDir: cwd + '/dist',
+            rollupOptions: {
+                external,
+            },
+        },
+    };
+    return cfg;
 };
 export default config;

packages/core/vite.config.ts

@@ -1,4 +1,6 @@
-import { defineConfig } from 'vite';
+import { defineConfig, UserConfigExport } from 'vite';
 import config from './node_modules/@web3uikit/config/vite.config';
 
-export default defineConfig({ ...config(__dirname, ['react', 'react-dom']) });
+export default defineConfig({
+    ...(config(__dirname, ['react', 'react-dom']) as UserConfigExport),
+});

packages/icons/vite.config.ts

@@ -1,4 +1,6 @@
-import { defineConfig } from 'vite';
+import { defineConfig, UserConfigExport } from 'vite';
 import config from './node_modules/@web3uikit/config/vite.config';
 
-export default defineConfig({ ...config(__dirname, ['react', 'react-dom']) });
+export default defineConfig({
+    ...(config(__dirname, ['react', 'react-dom']) as UserConfigExport),
+});

packages/ui/vite.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite';
+import { defineConfig, UserConfigExport } from 'vite';
 import config from './node_modules/@web3uikit/config/vite.config';
 
 export default defineConfig({
-    ...config(__dirname, ['react', 'react-dom', 'moralis', 'react-moralis']),
+    ...(config(__dirname, ['react', 'react-dom']) as UserConfigExport),
 });