English
Ask or search…
K
Links
Comment on page
📖

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

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"
}
}