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;

common/storybook/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "@univerjs/storybook",
+    "version": "1.0.0-rc.0",
+    "private": true,
+    "description": "Some infrastructures for univerjs",
+    "author": "DreamNum <developer@univer.ai>",
+    "license": "Apache-2.0",
+    "homepage": "https://github.com/dream-num/univer",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/dream-num/univer.git"
+    },
+    "keywords": [],
+    "scripts": {
+        "dev:storybook": "storybook dev -p 6006 --no-open",
+        "build:storybook": "storybook build"
+    },
+    "dependencies": {
+        "@chromatic-com/storybook": "^5.2.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/icons": "^2.1.0",
+        "@storybook/react": "^10.4.6",
+        "@storybook/react-webpack5": "^10.4.6",
+        "@univerjs/core": "workspace:*",
+        "@univerjs/design": "workspace:*",
+        "@univerjs/themes": "workspace:*",
+        "@univerjs/ui": "workspace:*",
+        "css-loader": "^7.1.4",
+        "postcss-loader": "^8.2.1",
+        "storybook": "^10.4.6",
+        "storybook-addon-swc": "^1.2.0",
+        "style-loader": "^4.0.0",
+        "tsconfig-paths-webpack-plugin": "^4.2.0",
+        "typescript": "^6.0.3"
+    },
+    "devDependencies": {
+        "@univerjs-infra/shared": "workspace:*",
+        "postcss": "^8.5.28",
+        "tailwindcss": "3.4.18",
+        "tailwindcss-animate": "^1.0.7"
+    }
+}

common/storybook/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@univerjs-infra/shared/postcss';

common/storybook/tailwind.config.ts

@@ -0,0 +1,31 @@
+import type { Config } from 'tailwindcss';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import preset from '@univerjs-infra/shared/tailwind';
+import animate from 'tailwindcss-animate';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const packagesDir = fs.readdirSync(path.resolve(__dirname, '../../packages')).map((dir) => path.resolve(__dirname, `../../packages/${dir}`));
+
+const tailwindProjects = packagesDir.reduce((acc, dir) => {
+    const tailwindConfig = path.resolve(dir, 'tailwind.config.ts');
+    if (fs.existsSync(tailwindConfig)) {
+        acc.push(`${dir}/src/**/*.{js,ts,jsx,tsx}`);
+    }
+    return acc;
+}, [] as string[]);
+
+const config: Config = {
+    presets: [preset],
+    content: [
+        '.storybook/**/*.{js,ts,jsx,tsx}',
+        ...tailwindProjects,
+    ],
+    plugins: [
+        animate,
+    ],
+};
+
+export default config;

common/storybook/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "extends": "@univerjs-infra/shared/tsconfigs/base",
+    "compilerOptions": {
+        "useDefineForClassFields": false,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "rootDir": ".",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "allowJs": true,
+        "declaration": false,
+        "importHelpers": true,
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        ".storybook/**/*",
+        "tailwind.config.ts"
+    ],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}

common/storybook/tsconfig.storybook.json

@@ -0,0 +1,19 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "target": "es6",
+        "useDefineForClassFields": false,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "moduleResolution": "node"
+    },
+    "include": [
+        "src/**/*.stories.ts",
+        "src/**/*.stories.js",
+        "src/**/*.stories.jsx",
+        "src/**/*.stories.tsx",
+        "src/**/*.stories.mdx",
+        ".storybook/**/*"
+    ],
+    "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}