📖
Atomico and Storybook
- 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.
Easily render webcomponents created with Atomico inside storytbook stories.
.storybook/preview.js
import { decorator } from "@atomico/storybook";
export const decorators = [decorator];
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 has exclusive storybook utilities, with these it seeks to facilitate the use of Atomico's JSX /TSX and live reload..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/**/*[email protected](js|jsx|ts|tsx)",
"../../components/*.stories.mdx",
"../../components/*[email protected](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"
}
}
Last modified 5mo ago