Novel Planetary Movement

    storybook-addon-themepack
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    🎨 storybook-themepack

    Better themepacks for Storybook

    npm version

    Storybook addon for custom themes.

    Ideal for themes based on CSS custom properties (CSS variables).

    Demo

    Online demo link here.

    Demo source code.

    Example

    Feel free to test this addon in your local environment: npm run demo.

    Usage

    Install:

    npm install --save-dev storybook-themepack
    
    // Install peer deps
    npm install --save-dev @storybook/components @storybook/api @storybook/addons

    Then register addon:

    // main.js
    module.exports = {
        "addons": [
            'storybook-addon-themepack'
        ]
    }

    And add some configuration:

    const gaps = {
        // Some pretty plain CSS in this values
        gapSmall: '--gap: 12px;',
        gapMedium: '--gap: 16px;'
    };
    
    export default {
        title: 'Components/MyComponent',
        parameters: {
            themepack: {
                pack: {
                    gap: [ 'Gap', pack(gaps) ]
                }
            }
        }
    }

    Voilà! Now you can use all the power of themes based on CSS custom properties.

    TypeScript

    You can find an example repo here: examples/storybook-themepack-example

    Configuration and options

    Example configuration

    // config.js
    import {pack} from 'storybook-themepack';
    
    addParameters({
        themepack: {
            // This items will be preloaded
            preloadedState: {
                brand: 'My'
            },
    
            // All the styles
            pack: {
                brand: ['Brand', pack({'My': defaultMyTheme, 'Project': defaultProjectTheme})],
                color: [
                    'Color',
                    pack(
                        {colorMyDefault, colorMyBrand, colorMyInverse, colorMySuccess},
                        ({brand}) => brand ? brand === 'My' : false
                    ),
                    pack(
                        {colorProjectBrand, colorProjectDefault, colorProjectInverse, colorProjectSuccess},
                        ({brand}) => brand ? brand === 'Project' : false
                    ),
                ],
                gap: ['Gap', pack({gapSmall, gapMedium})]
            },
    
            // Themepack icon
            icon: 'mirror',
    
            // Use preview sign for themepack contents
            usePreview: true,
    
            // Caption for clear item
            labelForClear: '-',
    
            // If there is `sortFunction` themepack uses it to sort main panel menu items
            sortFunction: (a, b) => {
                if (a === 'brand') {
                    return 1;
                }
                return a === b ? 0 : a > b ? 1 : -1;
            },
    
            // Custom styles for preview items and for the storybook preview iframe
            styles: {
                preview: `
                    border-color: var(--color-bg-border);
                    color: var(--color-typo-brand);
                    background-color: var(--color-bg-default);
                `,
                iframe: `
                    background-color: var(--color-bg-default);
                `
            }
        },
    });

    pack

    Main themepack configuration. Every field of this object is an array.

    Every option (for example, brand) contain sources for tooltips that can switch theme and preview your themed component. Packs' content for any option is merged in tooltip options.

    Syntax:

    [ <theme name>, <pack(...)>, <pack(...)>, ... ]
    

    Packs' syntax:

    pack(
        // Object contains options for tooltip
        {'theme option item name': 'css content'},
        // Optional function for conditional drawing. Uses selected values for every option
        ({yourThemeOption1, yourThemeOption2}) => true
    );
    
    pack(
        // Array of options for tooltip
        [{ label: 'theme option item name', css: 'css content' }]
    );

    icon

    Icon for the first item.

    Variants are in @storybook/components.

    Default value is mirror.

    usePreview

    Adds preview for every option of the tooltips.

    You can set up preview styles in configuration property styles.preview.

    Default value is true.

    labelForClear

    Text for the element that clears tooltip.

    Default value is -.

    sortFunction

    Function that sorts keys of your themepack.

    Default value is not set.

    styles

    Object {preview: 'string', iframe 'string'} with CSS styles.

    It contains styles for a themepack item preview inside every tooltip and global style for your component preview inside Storybook.

    Default value is not set.

    TODO

    [ ] Update Readme and examples to Storybook v6

    Keywords

    none

    Install

    npm i storybook-addon-themepack

    DownloadsWeekly Downloads

    2

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    216 kB

    Total Files

    74

    Last publish

    Collaborators

    • hhcz