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

    1.0.0 • Public • Published

    Storybook CSS Custom Properties Addon

    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 intial -- 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;

    Controls default to colour, but can be switched to text by adding cssprops.myparam.control: 'text'.

    Disable the picker with cssprops.disable: true

    Customise preset colours for the colourpicker with cssprops.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

    [] Auto detect input type.
    [] Look for the args of a defined component when in MDX
    [] Configurable per story localstorage.
    [] Better specificity when injecting styles (with & without iframes) [] Functioning reset button.

    Credits

    Portions of this package are sourced from the storybook source code in order to maintain look and feel.

    Install

    npm i @ljcl/storybook-addon-cssprops

    DownloadsWeekly Downloads

    2,298

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    110 kB

    Total Files

    69

    Last publish

    Collaborators

    • ljcl