Storybook 插件主题提供程序

维护者对用户的个人呼吁您好，我叫 Dima。我创建了这个 Storybook 插件。感谢您为您的项目选择它。希望它能帮助您实现目标并实施您的想法。目前我正在寻找柏林，德国的首席/高级前端开发人员职位。因此，如果这与您的情况相关，我想请您推荐我到您的公司。您可以在此处找到我的简历和作品集。如果与您的情况不符，给插件仓库加星🌟也是值得赞赏的。我相信拥有一个受欢迎的开源项目对求职有帮助。感谢您并祝您编码愉快！

用于管理由 Styled Components、Emotion 或任何其他基于 React 组件的解决方案提供的全局主题的插件，该解决方案接收 prop theme?: Record<string, unknown> 和子节点。此插件兼容Storybook 7 和 8 版本。

受storybook-addon-themes启发。

安装

1. 使用您选择的包管理器安装插件。

npm i -D storybook-addon-theme-provider
yarn add -D storybook-addon-theme-provider
pnpm i -D storybook-addon-theme-provider

2. 在 .storybook/main.(js|ts) 中注册插件

export default {
    //...
    addons: [
        //...
        "storybook-addon-theme-provider",
        //...
    ],
};

使用主题

将装饰器 withThemeProvider 添加到 .storybook/preview.(js|ts)。这会在全局级别应用主题设置。

import {withThemeProvider} from 'storybook-addon-theme-provider';
import {Provider} from './Provider';

export default {
    //...
    decorators:[
        withThemeProvider(Provider),
        ///...
    ],
    globals: {
        // Set initially selected theme name
        selectedTheme: 'foo',
        // Provide a list of available themes
        themes: [
            {
                // Provide a name for the theme.
                name: 'foo',
                // Set a color to display after theme name
                color: 'red',
                // Provide object with foo theme data
                themeObject: {
                    baseColor: 'red',
                    //...
                }
            },
            {
                name: 'bar',
                color: '#AAAAAA',
                themeObject: {
                    baseColor: 'green',
                }
            }
        ]
    },
    //...
}

也可以在故事级别启用装饰器。

// some CSF story file

export const story = {
  decorators: [withThemeProvider(Provider)]
};

使用 Provider 组件

Provider 是一个 React 组件，它接收 theme prop（包含选定的主题对象）和 children 节点。请参阅Styled Components 主题或Emotion ThemeProvider。

开发人员也可以使用自定义 Provider 组件。

import React, {ReactNode} from 'react';

export const Provider = <TTheme,>({children, theme}: {children?: ReactNode; theme?: TTheme}) => {
    // apply theme somehow
    console.log('theme', theme)
    return <div>{children}</div>
}