@storybook/web-components

What is @storybook/web-components?

@storybook/web-components is a tool for developing UI components in isolation for web components. It allows developers to build, test, and document components independently, which can improve the development workflow and ensure components are robust and reusable.

What are @storybook/web-components's main functionalities?

Component Story Creation

This feature allows developers to create stories for their web components. A story is a function that returns a rendered component, which can be used to showcase different states and variations of the component.

import { html } from 'lit-html';

export default {
  title: 'MyComponent',
};

export const Default = () => html`<my-component></my-component>`;

Interactive Component Testing

This feature allows developers to interactively test components using knobs. Knobs are UI controls that allow users to dynamically edit props and see the changes in real-time, which is useful for testing different states and configurations of a component.

import { html } from 'lit-html';
import { withKnobs, text } from '@storybook/addon-knobs';

export default {
  title: 'MyComponent',
  decorators: [withKnobs],
};

export const WithKnobs = () => {
  const label = text('Label', 'Hello Storybook');
  return html`<my-component label="${label}"></my-component>`;
};

Documentation

This feature allows developers to add documentation to their components directly within Storybook. It supports custom documentation pages, which can include usage instructions, API details, and more.

import { html } from 'lit-html';

export default {
  title: 'MyComponent',
  parameters: {
    docs: {
      page: () => html`<h1>MyComponent Documentation</h1><p>This is a custom web component.</p>`
    }
  }
};

0

README

Storybook web-components renderer