next() Packaged Middleware

    @toptal/davinci-storybook-live-edit-addon

    0.2.2 • Public • Published

    Storybook Addon Live Edit

    Storybook Addon Live Edit allows user editing code in realtime

    Installation

    1. Install addon

    yarn add -D @toptal/davinci-storybook-live-edit-addon

    2. Register this addon to Storybook

    module.exports = {
      addons: ['@toptal/davinci-storybook-live-edit-addon']
    }

    This live-edit addon also brings @toptal/davinci-storybook-theme.

    Usage

    Instead of overriding the whole Canvas, this addon extends the default DocStory component and keeps default Canvas. Basically, it adds a new button Live Edit next to Show Code button.

    NOTE: You must specify a scope for each story, beforehand. It means, all variables that are used inside story must be specified inside the scope

    // extra variables that are used inside stories
    const extraVariable = 1;
    const MyCustomComponent = () => null
    
    export default {
      title: 'Example/Button',
      component: Button,
      parameters: {
        scope: {
          // all variables that are used inside stories must be defined inside the scope
          Button,
          extraVariable,
          MyCustomComponent
        },
      },
    } as ComponentMeta<typeof Button>;
    
    export const Primary = (args) => {
      return (
        <MyCustomComponent> // <-- MyCustomComponent must be defined
          <Button {...args}> // <-- Button must be defined
            {extraVariable} // <-- extraVariable must be defined
          </Button>
        </MyCustomComponent>
      )
    };
    
    Primary.args = {
      primary: true,
      label: 'Button',
    };

    Implementation

    This addon uses react-live under the hood.

    Install

    npm i @toptal/davinci-storybook-live-edit-addon

    DownloadsWeekly Downloads

    2,329

    Version

    0.2.2

    License

    ISC

    Unpacked Size

    32.7 kB

    Total Files

    26

    Last publish

    Collaborators

    • talbot