Node's Power Meal

    @ljcl/storybook-addon-cssprops
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.5 • Public • Published

    Storybook CSS Custom Properties Addon

    Installation

    npm i -D @ljcl/storybook-addon-cssprops

    Enable the addon in .storybook/main.js:

    module.exports = {
      addons: ["@ljcl/storybook-addon-cssprops"],
    };

    To use it inside MDX, or when customising the docs page:

    import { CssPropsBlock } from "@ljcl/storybook-addon-cssprops";

    Usage

    Include your CSS Custom Properties without the initial -- prefix, the addon will apply and document this automatically.

    export default {
      title: "Simple Component",
      parameters: {
        cssprops: {
          "css-custom-property-1": {
            value: "hsl(120deg 100% 25% / 49%)",
            description: "Optional description",
          },
        }
      },
    } as Meta;

    Configuration

    The addon can be configured wherever other parameters can be configured (at the Global, Story, or individual story level). It will also attempt to detect between colour and text, this can be overriden by specifying the control property.

    parameters: {
      cssprops: {
        // Disable the addon by setting disable to true:
        disable: false,
        // Override the detected default control type:
        "override-property-detection-type": {
          value: "green",
          control: "text",
          description: "Maybe you want 'green' for reasons differing to colour"
        },
        // Override the detected default control type:
        "optional-category-or-subcategory": {
          value: "red",
          category: "Optional",
          subcategory: "Very Optional",
          description: "This property will be grouped under a category called 'Optional', and then a further subcategory of 'Very Optional'",
        },
        // Customise preset colours for the colourpicker
        presetColors: ['#FFF']
      }
    }

    Adding to DocsPage and MDX

    DocsPage

    Modify the docs page based by following the storybook docs. Including <CssPropsBlock /> where you prefer.

    Development

    This monorepo uses npm@7 workspaces, run npm i at the root.

    TODO

    • [ ] Look for the args of a defined component when in MDX
    • [ ] Better specificity when injecting styles (with & without iframes)
    • [ ] Reset the default values without requiring a page refresh (ArgsTable)

    Install

    npm i @ljcl/storybook-addon-cssprops

    DownloadsWeekly Downloads

    1,784

    Version

    2.3.5

    License

    MIT

    Unpacked Size

    95.8 kB

    Total Files

    55

    Last publish

    Collaborators

    • ljcl