Storybook
Storybook is a great tool for developing and demoing components. By default, it is based on Webpack and Webpack dev server.
The @web/dev-server-storybook plugin uses an opinionated build of Storybook, making it possible to use it with Web Dev Server for es modules and buildless workflows.
Setup
Install the package:
npm i --save-dev @web/dev-server-storybook
Add the plugin and set the project type. See below for supported project types.
//import { storybookPlugin } from '@web/dev-server-storybook';export default {// type can be 'web-components' or 'preact'plugins: [storybookPlugin({ type: 'web-components' })],};
Add a .storybook/main.js
file:
//
module.exports = {stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],};
Add a story: stories/MyButton.stories.js
:
//export default {title: 'Example/Button',argTypes: {backgroundColor: { control: 'color' },},};const Button = ({ backgroundColor = 'white', text }) => {return `
<button type="button" style="background-color: ${backgroundColor}">
${text}
</button>
`;};export const ButtonA = Button.bind({});
ButtonA.args = {text: 'Button A',};export const ButtonB = Button.bind({});
ButtonB.args = {text: 'Button B',};
See the plugin documentation for more features and all configuration options.