Storybook Addon Stencil
A Stencil integration for Storybook (v8). Provides correct custom element definition for ArgTypes
and Controls
and handles HMR.
Usage
Install the addon:
npm install storybook-addon-stencil -D
yarn add storybook-addon-stencil -D
pnpm add storybook-addon-stencil -D
Register the addon in your Storybook config:
.storybook/main.js
/** @type { import('@storybook/web-components-vite').StorybookConfig } */
const config = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
framework: "@storybook/web-components-vite",
addons: [
...,
{
name: "storybook-addon-stencil",
options: {
stencilOptions: {},
},
},
],
};
export default config;
Set stencilOptions
if you need to change something for the transpile
function of Stencil.
Import the components in your story
my-component.stories.js
import "./my-component";
The addon will handle transpilation of the Stencil components, adding all needed code in the stories file (dependencies, styles, custom element definition). This way you don't need to call defineCustomElements
in your preview.js
file of Storybook, so you have to remove it.
N.B. you must import all the components you want to use in your stories, except for the dependencies of the already imported components.
You can see an example of story in the demo
folder.
Automated docs from Storybook
Automated docs from Storybook still shows incomplete informations for the components, so you have to use the ArgTypes
doc block manually in the mdx file.
The component
field in the Meta
object, automatically infers the argTypes
for the component, filling also the Controls
table with ALL the properties of the component. If you want to show only the controls for the argTypes
defined in your Meta
, simply omit the field.