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
package.json
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
{
  "type": "module",
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "atomico": "^1.68.0"
  },
  "devDependencies": {
    "@atomico/storybook": "^1.5.0",
    "@atomico/tsconfig": "^1.1.2",
    "@atomico/vite": "^2.3.2",
    "@storybook/addon-actions": "^7.0.0-alpha.47",
    "@storybook/addon-essentials": "^7.0.0-alpha.47",
    "@storybook/addon-links": "^7.0.0-alpha.47",
    "@storybook/web-components": "^7.0.0-alpha.47",
    "@storybook/web-components-vite": "^7.0.0-alpha.47",
    "lit-html": "^2.4.0",
    "storybook": "^7.0.0-alpha.47",
    "vite": "^3.2.2"
  }
}
Frequent questions
​
​
​
Slot
Frequent questions
Last modified 11mo ago