Feat/design storybook config

ui-admin/design/package.json

@@ -12,6 +12,7 @@
     "start-image": "node dist/index.js"
   },
   "devDependencies": {
+    "@atls-ui/design-storybook": "workspace:*",
     "@chromatic-com/storybook": "5.2.1",
     "@mdx-js/react": "3.1.1",
     "@storybook/addon-docs": "10.4.6",

ui-admin/design/src/constants.ts

@@ -0,0 +1,6 @@
+export const designStorybookStories = [
+  '../../**/src/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+  '../../**/src/*.mdx',
+  '../../**/stories/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+  '../../**/stories/*.mdx',
+]

ui-admin/design/src/main.ts

@@ -1,84 +1,7 @@
-import type { StorybookConfig } from '@storybook/react-webpack5'
+import { createDesignStorybookMain } from '@atls-ui/design-storybook/main'
 
-import { createRequire }        from 'node:module'
-import { dirname }              from 'node:path'
-import { join }                 from 'node:path'
+import { designStorybookStories }    from './constants.js'
 
-import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin'
-import MiniCssExtractPlugin     from 'mini-css-extract-plugin'
-
-const require = createRequire(import.meta.url)
-
-const getAbsolutePath = (value: string): string =>
-  dirname(require.resolve(join(value, 'package.json')))
-
-const config: StorybookConfig = {
-  stories: [
-    '../../**/src/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
-    '../../**/src/*.mdx',
-    '../../**/stories/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
-    '../../**/stories/*.mdx',
-  ],
-  addons: [
-    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-docs'),
-    getAbsolutePath('@chromatic-com/storybook'),
-    {
-      name: getAbsolutePath('@storybook/addon-styling-webpack'),
-      options: {
-        plugins: [new VanillaExtractPlugin(), new MiniCssExtractPlugin()],
-        rules: [
-          {
-            test: /\.css$/,
-            sideEffects: true,
-            use: [
-              require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {},
-              },
-            ],
-            exclude: /\.vanilla\.css$/,
-          },
-          {
-            test: /\.vanilla\.css$/i,
-            sideEffects: true,
-            use: [
-              MiniCssExtractPlugin.loader,
-              {
-                loader: require.resolve('css-loader'),
-                options: { url: false },
-              },
-            ],
-          },
-        ],
-      },
-    },
-  ],
-  framework: {
-    name: getAbsolutePath('@storybook/react-webpack5'),
-    options: {},
-  },
-  webpackFinal: async (webpackConfig) => {
-    webpackConfig.resolve = {
-      ...webpackConfig.resolve,
-      extensionAlias: {
-        ...webpackConfig.resolve?.extensionAlias,
-        '.js': ['.ts', '.tsx', '.js'],
-      },
-    }
-
-    if (webpackConfig.resolve.fallback) {
-      webpackConfig.resolve.fallback = {
-        ...webpackConfig.resolve.fallback,
-        assert: false,
-        url: false,
-      }
-    }
-
-    return webpackConfig
-  },
-}
-
-export default config
+export default createDesignStorybookMain({
+  stories: designStorybookStories,
+})

ui-admin/design/src/preview.tsx

@@ -1,14 +1,3 @@
-import type { Preview } from '@storybook/react'
+import { createDesignStorybookPreview } from '@atls-ui/design-storybook/preview'
 
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-}
-
-export default preview
+export default createDesignStorybookPreview()

ui-parts/design/package.json

@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@atls-ui-parts/theme": "workspace:*",
+    "@atls-ui/design-storybook": "workspace:*",
     "@chromatic-com/storybook": "5.2.1",
     "@mdx-js/react": "3.1.1",
     "@storybook/addon-docs": "10.4.6",

ui-parts/design/src/constants.ts

@@ -0,0 +1,6 @@
+export const designStorybookStories = [
+  '../../**/src/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+  '../../**/src/*.mdx',
+  '../../**/stories/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
+  '../../**/stories/*.mdx',
+]

ui-parts/design/src/main.ts

@@ -1,84 +1,7 @@
-import type { StorybookConfig } from '@storybook/react-webpack5'
+import { createDesignStorybookMain } from '@atls-ui/design-storybook/main'
 
-import { createRequire }        from 'node:module'
-import { dirname }              from 'node:path'
-import { join }                 from 'node:path'
+import { designStorybookStories }    from './constants.js'
 
-import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin'
-import MiniCssExtractPlugin     from 'mini-css-extract-plugin'
-
-const require = createRequire(import.meta.url)
-
-const getAbsolutePath = (value: string): string =>
-  dirname(require.resolve(join(value, 'package.json')))
-
-const config: StorybookConfig = {
-  stories: [
-    '../../**/src/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
-    '../../**/src/*.mdx',
-    '../../**/stories/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
-    '../../**/stories/*.mdx',
-  ],
-  addons: [
-    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-docs'),
-    getAbsolutePath('@chromatic-com/storybook'),
-    {
-      name: getAbsolutePath('@storybook/addon-styling-webpack'),
-      options: {
-        plugins: [new VanillaExtractPlugin(), new MiniCssExtractPlugin()],
-        rules: [
-          {
-            test: /\.css$/,
-            sideEffects: true,
-            use: [
-              require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {},
-              },
-            ],
-            exclude: /\.vanilla\.css$/,
-          },
-          {
-            test: /\.vanilla\.css$/i,
-            sideEffects: true,
-            use: [
-              MiniCssExtractPlugin.loader,
-              {
-                loader: require.resolve('css-loader'),
-                options: { url: false },
-              },
-            ],
-          },
-        ],
-      },
-    },
-  ],
-  framework: {
-    name: getAbsolutePath('@storybook/react-webpack5'),
-    options: {},
-  },
-  webpackFinal: async (webpackConfig) => {
-    webpackConfig.resolve = {
-      ...webpackConfig.resolve,
-      extensionAlias: {
-        ...webpackConfig.resolve?.extensionAlias,
-        '.js': ['.ts', '.tsx', '.js'],
-      },
-    }
-
-    if (webpackConfig.resolve.fallback) {
-      webpackConfig.resolve.fallback = {
-        ...webpackConfig.resolve.fallback,
-        assert: false,
-        url: false,
-      }
-    }
-
-    return webpackConfig
-  },
-}
-
-export default config
+export default createDesignStorybookMain({
+  stories: designStorybookStories,
+})

ui-parts/design/src/preview.tsx

@@ -1,10 +1,10 @@
-import type { Preview }           from '@storybook/react'
-import type { ReactNode }         from 'react'
-import type { PropsWithChildren } from 'react'
+import type { ReactNode }               from 'react'
+import type { PropsWithChildren }       from 'react'
 
-import { useEffect }              from 'react'
+import { useEffect }                    from 'react'
 
-import { globalThemeId }          from '@atls-ui-parts/theme'
+import { globalThemeId }                from '@atls-ui-parts/theme'
+import { createDesignStorybookPreview } from '@atls-ui/design-storybook/preview'
 
 const ThemeContainer = ({ children }: PropsWithChildren): ReactNode => {
   useEffect(() => {
@@ -14,20 +14,12 @@ const ThemeContainer = ({ children }: PropsWithChildren): ReactNode => {
   return children
 }
 
-const preview: Preview = {
-  decorators: (Story) => (
-    <ThemeContainer>
-      <Story />
-    </ThemeContainer>
-  ),
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-}
-
-export default preview
+export default createDesignStorybookPreview({
+  decorators: [
+    (Story) => (
+      <ThemeContainer>
+        <Story />
+      </ThemeContainer>
+    ),
+  ],
+})

ui/design-storybook/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@atls-ui/design-storybook",
+  "version": "0.1.1",
+  "private": true,
+  "license": "BSD-3-Clause",
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    "./config": "./src/config/index.ts",
+    "./main": "./src/storybook/main/index.ts",
+    "./preview": "./src/storybook/preview/index.ts",
+    "./ui/matrix": "./src/ui/matrix/index.ts"
+  },
+  "bin": {
+    "hyperion-design-storybook": "./dist/app/cli.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc --project tsconfig.json",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "@atls-ui-parts/theme": "workspace:*",
+    "@chromatic-com/storybook": "5.2.1",
+    "@mdx-js/react": "3.1.1",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-links": "10.4.6",
+    "@storybook/addon-styling-webpack": "3.0.2",
+    "@storybook/addon-webpack5-compiler-swc": "4.0.3",
+    "@storybook/react": "10.4.6",
+    "@storybook/react-webpack5": "10.4.6",
+    "@vanilla-extract/webpack-plugin": "2.3.27",
+    "css-loader": "7.1.4",
+    "mini-css-extract-plugin": "2.10.2",
+    "storybook": "10.4.6",
+    "style-loader": "4.0.0",
+    "webpack": "5.107.2"
+  },
+  "devDependencies": {
+    "@types/node": "25.9.3",
+    "@types/react": "19.1.2",
+    "@vanilla-extract/css": "1.17.1",
+    "@vanilla-extract/dynamic": "2.1.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "typescript": "5.5.4"
+  },
+  "peerDependencies": {
+    "@vanilla-extract/css": "*",
+    "@vanilla-extract/dynamic": "*",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "exports": {
+      "./package.json": "./package.json",
+      "./config": {
+        "import": "./dist/config/index.js",
+        "types": "./dist/config/index.d.ts",
+        "default": "./dist/config/index.js"
+      },
+      "./main": {
+        "import": "./dist/storybook/main/index.js",
+        "types": "./dist/storybook/main/index.d.ts",
+        "default": "./dist/storybook/main/index.js"
+      },
+      "./preview": {
+        "import": "./dist/storybook/preview/index.js",
+        "types": "./dist/storybook/preview/index.d.ts",
+        "default": "./dist/storybook/preview/index.js"
+      },
+      "./ui/matrix": {
+        "import": "./dist/ui/matrix/index.js",
+        "types": "./dist/ui/matrix/index.d.ts",
+        "default": "./dist/ui/matrix/index.js"
+      }
+    }
+  },
+  "typecheckSkipLibCheck": true
+}

ui/design-storybook/src/app/argv.ts

@@ -0,0 +1,30 @@
+import type { CliOptions }             from './interfaces.js'
+import type { DesignStorybookCommand } from './interfaces.js'
+
+import { cliOptionNames }              from './constants.js'
+import { defaultCliOptions }           from './constants.js'
+import { designStorybookCommands }     from './constants.js'
+
+const getOptionValue = (args: Array<string>, name: string, fallback: string): string => {
+  const index = args.indexOf(name)
+
+  if (index === -1) {
+    return fallback
+  }
+
+  return args[index + 1] ?? fallback
+}
+
+export const parseArgv = (args: Array<string>): CliOptions => {
+  const command = designStorybookCommands.includes(args[0] as DesignStorybookCommand)
+    ? (args[0] as DesignStorybookCommand)
+    : defaultCliOptions.command
+
+  return {
+    command,
+    configDir: getOptionValue(args, cliOptionNames.configDir, defaultCliOptions.configDir),
+    configPath: getOptionValue(args, cliOptionNames.configPath, defaultCliOptions.configPath),
+    outputDir: getOptionValue(args, cliOptionNames.outputDir, defaultCliOptions.outputDir),
+    port: getOptionValue(args, cliOptionNames.port, defaultCliOptions.port),
+  }
+}

ui/design-storybook/src/app/cli.ts

@@ -0,0 +1,11 @@
+import { runDesignStorybook } from './run.js'
+
+runDesignStorybook(process.argv.slice(2)).catch((error: unknown) => {
+  if (error instanceof Error) {
+    process.stderr.write(`${error.message}\n`)
+  } else {
+    process.stderr.write(`${String(error)}\n`)
+  }
+
+  process.exitCode = 1
+})