6.0.0 • Published 12 months ago

storybook-addon-playroom v6.0.0

Weekly downloads
1,692
License
MIT
Repository
github
Last release
12 months ago

Storybook Playroom Addon

npm package version Build status Dependencies status

🧩 Design with Playroom inside Storybook, using each story source as a starting point.

Demo

View demo →

Getting started

Note: Playroom must be set up and running before using this addon, see instructions.

npm install --save-dev storybook-addon-playroom
// .storybook/main.js

export default {
  addons: ['storybook-addon-playroom'],
}

Configuration

The addon can be configured via the playroom parameter. The following options are available:

OptionTypeDescriptionDefault
urlstringthe Playroom URLhttp://localhost:9000
codestringcode to be used instead of story source
disablebooleanwhether to disable the addonfalse
includeDecoratorsbooleanwhether to include global decorators in stories codefalse
reactElementToJSXStringOptionsobjectreact-element-to-jsx-string options{ sortProps: false }

To configure for all stories, set the playroom parameter:

// .storybook/preview.js

export const parameters = {
  playroom: {
    url: 'http://localhost:9000',
  },
}

You can also configure on per-story or per-component basis using parameter inheritance:

// Button.stories.js

export default {
  title: 'Button',
  component: Button,
  parameters: {
    playroom: {
      // Use predefined code instead of story source on all Button stories
      code: '<Button>Hello Button</Button>',
    },
  },
}

export const Large = {
  args: {
    size: 'large',
  },
  parameters: {
    playroom: {
      // Disable addon in Button/Large story only
      disable: true,
    },
  },
}

Note: Disabling the addon does not hide the Playroom tab. For that, you must use Storybook's own previewTabs parameter:

// Button.stories.js

export const Large = {
  parameters: {
    playroom: {
      disable: true,
    },
    previewTabs: {
      // Hide Playroom tab
      'storybook/playroom/tab': {
        hidden: true,
      },
    },
  },
}

FAQ

Why does my generated Playroom code contain nonsensical component names?

If you see mangled component names like <O /> instead of <Card />, you may need to customize Storybook's Vite setup and disable minification:

// .storybook/main.js

export default {
  addons: ['storybook-addon-playroom'],
  async viteFinal(config) {
    return mergeConfig(config, {
      build: {
        // Disable minification
        minify: false,
      },
    })
  },
}
6.0.0

12 months ago

5.0.0

2 years ago

4.0.0

2 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.1.4

4 years ago

2.1.3

4 years ago

2.1.2

4 years ago

2.1.1

4 years ago

2.1.0

4 years ago

2.0.0

5 years ago

1.3.0

5 years ago

1.2.0

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago