refactor(lsd-react): cleanup Storybook configs and switch to @storybook/builder-vite

.prettierignore

@@ -1,3 +1,4 @@
 .next
 coverage
 dist
+storybook-static

packages/lsd-react/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+storybook-static

packages/lsd-react/.storybook/main.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  stories: [
+    '../src/components/**/*.stories.mdx',
+    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+}

packages/lsd-react/.storybook/main.js

@@ -1,13 +0,0 @@
-module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/preset-create-react-app',
-  ],
-  framework: '@storybook/react',
-  core: {
-    builder: '@storybook/builder-webpack5',
-  },
-}

packages/lsd-react/.storybook/preview.js

@@ -1,9 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}

packages/lsd-react/.storybook/preview.tsx

@@ -0,0 +1,56 @@
+import { DecoratorFunction, Parameters } from '@storybook/addons'
+import { defaultThemes } from '../src'
+import { withTheme } from './withTheme.decorator'
+
+export const parameters: Parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  backgrounds: {
+    default: 'light',
+    values: Object.entries(defaultThemes).map(([name, theme]) => ({
+      name,
+      value: theme.palette.background.primary,
+    })),
+  },
+  viewport: {
+    viewports: {
+      ...Object.fromEntries(
+        Object.entries(defaultThemes.light.breakpoints).map(
+          ([key, { width }]) => [
+            key,
+            {
+              name: key,
+              styles: {
+                width: (width > 0 ? width : 360) + 'px',
+                height: 'auto',
+                minHeight: 400,
+              },
+            },
+          ],
+        ),
+      ),
+    },
+  },
+}
+
+export const decorators: DecoratorFunction[] = [withTheme]
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Theme',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: [
+        { value: 'light', icon: 'circlehollow', title: 'light' },
+        { value: 'dark', icon: 'circle', title: 'dark' },
+      ],
+    },
+  },
+}

packages/lsd-react/.storybook/withTheme.decorator.tsx

@@ -0,0 +1,30 @@
+import { DecoratorFunction, useGlobals } from '@storybook/addons'
+import React, { useEffect } from 'react'
+import { defaultThemes, ThemeProvider } from '../src'
+
+export const withTheme: DecoratorFunction = (Story, context) => {
+  const StoryComponent = Story as any as React.ComponentType
+
+  const themeName = context.globals?.theme ?? 'light'
+  const theme = defaultThemes[themeName]
+
+  const [globals, setGlobals] = useGlobals()
+
+  useEffect(() => {
+    setGlobals({
+      ...globals,
+      backgrounds: {
+        ...(globals.background ?? {}),
+        value: theme.palette.background.primary,
+      },
+    })
+  }, [theme])
+
+  return (
+    <div>
+      <ThemeProvider theme={theme}>
+        <StoryComponent />
+      </ThemeProvider>
+    </div>
+  )
+}

packages/lsd-react/package.json

@@ -2,6 +2,7 @@
   "name": "@acid-info/lsd-react",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/lsd-react.js",
   "require": "./dist/lsd-react.umd.cjs",
@@ -9,8 +10,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "watch": "tsc && vite build --watch --emptyOutDir false",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "start-storybook -p 6006 -s .storybook/public",
+    "build-storybook": "build-storybook -s .storybook/public",
     "chromatic": "npx chromatic --project-token=00a17b037bed",
     "preview": "vite preview"
   },
@@ -20,7 +21,6 @@
     "clsx": "^1.2.1",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
-    "react-scripts": "5.0.1",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
@@ -30,20 +30,20 @@
     "@babel/preset-typescript": "^7.18.6",
     "@emotion/babel-plugin": "^11.10.5",
     "@rollup/plugin-babel": "^6.0.3",
-    "@types/lodash": "^4.14.191",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^3.0.0",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-vite": "^0.4.0",
     "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/node-logger": "^6.5.16",
-    "@storybook/preset-create-react-app": "^4.1.2",
     "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
+    "@types/lodash": "^4.14.191",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^3.0.0",
     "chromatic": "^6.15.0",
     "sass": "^1.58.0",
     "typescript": "^4.9.3",