📖Atomico and Storybook

Status

• Decorator, Atomico's decorator extends atomico's rendering capabilities to storybook.

• Monorepo, We invite you to use the recipe through the CLI npm init atomico, you can also find this configuration on Github

• Decorator for Storybook, Easily render webcomponents created with Atomico inside storytbook stories.

• storybook 7 and storybook + Vite

• MDX.

@Atomico/storybook

@atomico/storybook

decorador

Easily render webcomponents created with Atomico inside storytbook stories.

.storybook/preview.js

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

export const decorators = [decorator()];

define

It facilitates the creation of stories, analyzing the components created with Atomico to automatically define the argTypes and args.

import { define } from "@atomico/storybook";
import { ColorPicker } from "./color-picker";

export default {
  title: "components/brand",
  ...define(ColorPicker)
};

export const Default = (props: any) => <ColorPicker {...props}></ColorPicker>;

define also improves the declaration of stories by improving the autocompletion of these.

@atomico/vite

@atomico/vite has exclusive storybook utilities, with these it seeks to facilitate the use of Atomico's JSX /TSX and live reload.

Config storybook 7

.storybook/main.mjs

import { mergeConfig } from "vite";

export default {
    stories: [
        // 📌 remember to define the path according to your configuration
        "../../components/**/*.stories.mdx",
        "../../components/**/*.stories.@(js|jsx|ts|tsx)",
        "../../components/*.stories.mdx",
        "../../components/*.stories.@(js|jsx|ts|tsx)",
    ],
    addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
    framework: {
        name: "@storybook/web-components-vite",
        options: {},
    },
    async viteFinal(config, { configType }) {
        // 📌 return the customized config
        return mergeConfig(config, {
            plugins: [
                ...(await import("@atomico/vite")).default({
                    // 📌 needed to define files that use JSX/TSX
                    storybook: ["components/**/*"],
                }),
            ],
        });
    },
};
v

package.json

Frequent questions