@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.
@atomico/storybook has a decorator that allows Storybook to render the JSX/TSX of webcomponents created with Atomico.The following configuration can be added per story or in the
.storybook/preview.js file:import { decorator } from "@atomico/storybook";
export const decorators = [decorator];
@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.
Last modified 3mo ago