English
Ask or search…
K
Links
Comment on page

@atomico/storybook

Improves the generation of stories in Storybook.
This package has 2 main objectives:
  1. 1.
    Render as stories webcomponents created with Atomico using JSX/TSX within Storybook.
  2. 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
my-component.tsx
import { define } from "@atomico/storybook";
import { MyComponent } from "./my-component";
export default {
title: "Components/Card",
...define(MyComponent),
};
export const Default = (props)=><MyComponent {...props}/>
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.