Storybook 主题提供程序插件

维护者对用户的个人呼吁

大家好，我叫 Dima。我创建了这个 Storybook 插件。感谢您在项目中使用它。希望它能帮助您实现目标和想法。

目前我正在德国柏林寻找一份技术负责人/高级前端开发的工作。如果您的公司有相关需求，我希望能得到您的内推。您可以在这里找到我的简历和作品集。如果内推不相关，给插件仓库加个星🌟也是对我很大的鼓励。我相信拥有一个受欢迎的开源项目对找工作有所帮助。

谢谢，祝您编程愉快！

介绍

该插件用于管理由 Styled components、Emotion 或任何其他基于 React 组件（接收 prop theme?: Record<string, unknown> 和 children 节点）的解决方案提供的全局主题。此插件兼容 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 component 主题或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>
}