@atomico/storybook

Improves the generation of stories in Storybook.

This package has 2 main objectives:

1. Render as stories webcomponents created with Atomico using JSX/TSX within Storybook

2. Facilitate and automate the generation of stories.

Render as stories webcomponents created with Atomico using JSX/TSX within Storybook.

@atomico/storybook has a decorator that allows Storybook to render the JSX/TSX of webcomponents created with Atomico.

Config

The following configuration can be added per story or in the .storybook/preview.js file:

import { decorator } from "@atomico/storybook";

export const decorators = [decorator()];

Facilitate and automate the generation of stories.

@atomico/storybook has the define function to infer from its webcomponent created with Atomico the configuration of the argTypes and args for Storybook, example:

my-component.stories.tsx

import { define } from "@atomico/storybook";
import { MyComponent } from "./my-component";

export default {
    title: "Components/Card",
    ...define(MyComponent),
};

export const Default = (props)=><MyComponent {...props}/>

my-component.tsx

import { c } from "atomico";

function myComponent() {
  return <host></host>;
}

myComponent.props = {
  checked: Boolean,
  message: String,
};

export const MyComponent = c(myComponent);

customElements.define("my-component", MyComponent);

@atomico/storybook transforms its component's props into argTypes valid for Storybook.

You can also rewrite all or part of the configuration created by @atomico/storybook by giving the function define a second argument, example:

export default {
  title: "Components/Card",
  ...define(MyComponent, {
    argTypes: {
      message: {
        // Opcional, define la categoria para la tabla.
        category: "Internals",
        description: "Define un mensaje para el componente",
      },
      checked: {
        control: "radio",
        options: ["Show", "Hide"],
      },
    },
  }),
};

You can use the spread operator according to the storybook configuration.

• Storybook 6.* webpack 4 + Vite, does not support the spread operator in the default export of your story.

• Storybook 7.* + Vite, if it supports the spread operator in its story.

• Storybook 8.* + Vite, if it supports the spread operator in its story.