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 component theming 或 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>
}