sguilly / stencil-storybook-7

Stencil project with storybook 7

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Install stencil packages

npm i

Run stencil project

npm run start

Test stencil project

npm run test

Build stencil project

npm un build

Open storybook in a separate shell

npm i
npm run storybook

Why storybook in a sub folder

Stencil and storybook use jest as test tool but not the same version

Storybook as a sub folder offer a way to have a separate package.json

Write stories in the sub folder storybook

see storybook/stories/my-component.stories.(js|ts)

How integrate stencil's web component in the storybook project

Just add those two lines in storybook/.storybook/preview.js

import { defineCustomElements } from '../../loader';
defineCustomElements();

loader is the stencil folder generate during the compilation

About

Stencil project with storybook 7

License:MIT License


Languages

Language:TypeScript 89.8%Language:JavaScript 5.4%Language:HTML 4.6%Language:CSS 0.2%