snapshot of https://github.com/dream-num/univer.git (dev, 2026-09-16; blobs > 131072B omitted)

common/storybook/.storybook/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

common/storybook/.storybook/main.ts

@@ -0,0 +1,120 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { StoriesEntry } from 'storybook/internal/types';
+import { existsSync, readdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+const __dirname = pathToFileURL(new URL('.', import.meta.url).pathname).pathname;
+
+const tsconfigPathsPlugin = new TsconfigPathsPlugin({
+    configFile: resolve(__dirname, '../tsconfig.storybook.json'),
+    extensions: ['.ts', '.tsx', '.js'],
+});
+
+const config: StorybookConfig = {
+    stories: async () => {
+        const rootPaths = ['../../../packages'];
+        const isSubmodules = __dirname.includes('submodules');
+        if (isSubmodules) {
+            rootPaths.push('../../../../../packages');
+        }
+
+        const stories: StoriesEntry[] | PromiseLike<StoriesEntry[]> = [];
+        rootPaths.forEach((rootPath) => {
+            const rootDir = resolve(__dirname, rootPath);
+            if (existsSync(rootDir)) {
+                readdirSync(rootDir).forEach((pkg) => {
+                    const pkgPath = resolve(rootDir, pkg, 'package.json');
+                    const srcDir = resolve(rootDir, pkg, 'src');
+                    if (existsSync(pkgPath) && existsSync(srcDir)) {
+                        stories.push({
+                            directory: `${rootPath}/${pkg}/src`,
+                            files: '**/*.stories.@(js|jsx|mjs|ts|tsx)',
+                            titlePrefix: pkg,
+                        });
+                    }
+                });
+            }
+        });
+
+        return stories;
+    },
+    addons: [
+        '@storybook/addon-links',
+        '@chromatic-com/storybook',
+        '@storybook/addon-webpack5-compiler-swc',
+        {
+            name: '@storybook/addon-styling-webpack',
+            options: {
+                rules: [
+                    {
+                        test: /\.css$/,
+                        sideEffects: true,
+                        use: [
+                            'style-loader',
+                            {
+                                loader: 'css-loader',
+                                options: {
+                                    importLoaders: 1,
+                                },
+                            },
+                            {
+                                loader: 'postcss-loader',
+                                options: {
+                                    implementation: 'postcss',
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
+        '@storybook/addon-docs',
+    ],
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {},
+    },
+    swc: () => {
+        return {
+            isModule: true,
+            module: {
+                type: 'es6',
+                noInterop: true,
+            },
+            env: {
+                target: 'es2022',
+            },
+            jsc: {
+                parser: {
+                    syntax: 'typescript',
+                    tsx: true,
+                    decorators: true,
+                    decoratorsBeforeExport: true,
+                    dynamicImport: true,
+                },
+                transform: {
+                    react: {
+                        runtime: 'automatic',
+                    },
+                    legacyDecorator: true,
+                    decoratorMetadata: true,
+                },
+                loose: true,
+            },
+        };
+    },
+    docs: {
+        defaultName: 'documentatie',
+    },
+    async webpackFinal(config) {
+        if (config.resolve) {
+            config.resolve.plugins = [tsconfigPathsPlugin];
+        }
+
+        return config;
+    },
+};
+
+export default config;

common/storybook/.storybook/preview.tsx

@@ -0,0 +1,140 @@
+import type { Preview } from '@storybook/react';
+import type { Theme } from '@univerjs/themes';
+import {
+    CommandService,
+    ConfigService,
+    ContextService,
+    DesktopLogService,
+    ErrorService,
+    ICommandService,
+    IConfigService,
+    IContextService,
+    ILocalStorageService,
+    ILogService,
+    Injector,
+    IPermissionService,
+    IResourceManagerService,
+    IUndoRedoService,
+    IUniverInstanceService,
+    LifecycleService,
+    LocaleService,
+    LocaleType,
+    LocalUndoRedoService,
+    PermissionService,
+    ResourceManagerService,
+    ThemeService,
+    UniverInstanceService,
+} from '@univerjs/core';
+import { ConfigProvider } from '@univerjs/design';
+import enUS from '@univerjs/design/locale/en-US';
+import zhCN from '@univerjs/design/locale/zh-CN';
+import { defaultTheme, greenTheme } from '@univerjs/themes';
+import { DesktopLocalStorageService, RediContext, ThemeSwitcherService } from '@univerjs/ui';
+import { useEffect, useMemo } from 'react';
+import './global.css';
+
+export const themes: Record<string, Theme> = {
+    default: defaultTheme,
+    green: greenTheme,
+};
+
+const preview: Preview = {
+    parameters: {
+        // actions: { argTypesRegex: '^on[A-Z].*' },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+        backgrounds: {
+            values: [
+                { name: 'Light', value: '#F9FAFB' },
+            ],
+            default: 'Light',
+        },
+    },
+
+    globalTypes: {
+        theme: {
+            name: 'Theme',
+            description: 'Global theme for components',
+            defaultValue: 'default',
+            toolbar: {
+                icon: 'cog',
+                items: Object.keys(themes),
+            },
+        },
+        i18n: {
+            name: 'i18n',
+            description: 'Global theme for components',
+            defaultValue: LocaleType.ZH_CN,
+            toolbar: {
+                icon: 'globe',
+                items: [LocaleType.ZH_CN, LocaleType.EN_US],
+            },
+        },
+        darkMode: {
+            name: 'darkMode',
+            description: 'Dark mode',
+            defaultValue: 'light',
+            toolbar: {
+                icon: 'sun',
+                items: ['light', 'dark'],
+            },
+        },
+    },
+
+    decorators: [(Story, context) => {
+        // themeInstance.setTheme(document.body, themes[context.globals.theme]);
+        const designLocale = context.globals.i18n === LocaleType.ZH_CN ? zhCN.design : enUS.design;
+
+        if (context.globals.darkMode === 'dark') {
+            document.body.classList.add('univer-dark');
+        } else {
+            document.body.classList.remove('univer-dark');
+        }
+
+        const rediContext = useMemo(() => {
+            const injector = new Injector([
+                [ThemeSwitcherService],
+                [IUniverInstanceService, { useClass: UniverInstanceService }],
+                [ErrorService],
+                [LocaleService],
+                [ThemeService],
+                [LifecycleService],
+                [ILogService, { useClass: DesktopLogService, lazy: true }],
+                [ICommandService, { useClass: CommandService, lazy: true }],
+                [IUndoRedoService, { useClass: LocalUndoRedoService, lazy: true }],
+                [IConfigService, { useClass: ConfigService }],
+                [IContextService, { useClass: ContextService }],
+                [IResourceManagerService, { useClass: ResourceManagerService, lazy: true }],
+                [IPermissionService, { useClass: PermissionService }],
+
+                // services
+                [ILocalStorageService, { useClass: DesktopLocalStorageService, lazy: true }],
+            ]);
+
+            injector.get(LocaleService).setLocale(context.globals.i18n);
+            return {
+                injector,
+            };
+        }, []);
+
+        useEffect(() => {
+            const theme = themes[context.globals.theme];
+
+            rediContext.injector.get(ThemeSwitcherService).injectThemeToHead(theme);
+        }, [context.globals.theme]);
+
+        return (
+            <RediContext.Provider value={rediContext}>
+                <ConfigProvider locale={designLocale} mountContainer={document.body}>
+                    <Story />
+                </ConfigProvider>
+            </RediContext.Provider>
+        );
+    }],
+};
+
+export default preview;