feat(ui): add storybook

invokeai/frontend/web/.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'plugin:react/jsx-runtime',
     'prettier',
+    'plugin:storybook/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {

invokeai/frontend/web/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

invokeai/frontend/web/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.dark,
+});

invokeai/frontend/web/.storybook/preview.tsx

@@ -0,0 +1,47 @@
+import { Preview } from '@storybook/react';
+import { themes } from '@storybook/theming';
+import i18n from 'i18next';
+import React from 'react';
+import { initReactI18next } from 'react-i18next';
+import { Provider } from 'react-redux';
+import GlobalHotkeys from '../src/app/components/GlobalHotkeys';
+import ThemeLocaleProvider from '../src/app/components/ThemeLocaleProvider';
+import { createStore } from '../src/app/store/store';
+// TODO: Disabled for IDE performance issues with our translation JSON
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import translationEN from '../public/locales/en.json';
+
+i18n.use(initReactI18next).init({
+  lng: 'en',
+  resources: {
+    en: { translation: translationEN },
+  },
+  debug: true,
+  interpolation: {
+    escapeValue: false,
+  },
+  returnNull: false,
+});
+
+const store = createStore(undefined, false);
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <ThemeLocaleProvider>
+          <GlobalHotkeys />
+          <Story />
+        </ThemeLocaleProvider>
+      </Provider>
+    ),
+  ],
+  parameters: {
+    docs: {
+      theme: themes.dark,
+    },
+  },
+};
+
+export default preview;

invokeai/frontend/web/package.json

@@ -33,7 +33,9 @@
     "preinstall": "npx only-allow pnpm",
     "postinstall": "patch-package && pnpm run theme",
     "theme": "chakra-cli tokens src/theme/theme.ts",
-    "theme:watch": "chakra-cli tokens src/theme/theme.ts --watch"
+    "theme:watch": "chakra-cli tokens src/theme/theme.ts --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "madge": {
     "detectiveOptions": {
@@ -116,6 +118,13 @@
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-vite": "^7.6.4",
+    "@storybook/test": "^7.6.4",
     "@types/dateformat": "^5.0.2",
     "@types/lodash-es": "^4.17.11",
     "@types/node": "^20.9.0",
@@ -133,11 +142,13 @@
     "eslint-plugin-path": "^1.2.2",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "madge": "^6.1.0",
     "openapi-types": "^12.1.3",
     "openapi-typescript": "^6.7.0",
     "prettier": "^3.0.3",
     "rollup-plugin-visualizer": "^5.9.2",
+    "storybook": "^7.6.4",
     "ts-toolbelt": "^9.6.0",
     "typescript": "^5.2.2",
     "vite": "^4.5.1",

invokeai/frontend/web/src/app/store/store.ts

@@ -87,12 +87,13 @@ const idbKeyValDriver: Driver = {
   setItem: (key, value) => set(key, value, idbKeyValStore),
 };
 
-export const createStore = (uniqueStoreKey?: string) =>
+export const createStore = (uniqueStoreKey?: string, persist = true) =>
   configureStore({
     reducer: rememberedRootReducer,
     enhancers: (existingEnhancers) => {
-      return existingEnhancers
+      const _enhancers = existingEnhancers.concat(autoBatchEnhancer());
-        .concat(
+      if (persist) {
+        _enhancers.push(
           rememberEnhancer(idbKeyValDriver, rememberedKeys, {
             persistDebounce: 300,
             serialize,
@@ -101,8 +102,9 @@ export const createStore = (uniqueStoreKey?: string) =>
               ? `${STORAGE_PREFIX}${uniqueStoreKey}-`
               : STORAGE_PREFIX,
           })
-        )
+        );
-        .concat(autoBatchEnhancer());
+      }
+      return _enhancers;
     },
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({

invokeai/frontend/web/tsconfig.json

@@ -23,7 +23,7 @@
       "*": ["./src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "*.d.ts"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "*.d.ts", ".ladle"],
   "exclude": ["src/services/fixtures/*", "node_modules", "dist"],
   "references": [{ "path": "./tsconfig.node.json" }],
   "ts-node": {