stencil-storybook-boilerplate

A boilerplate template for creating fast and robust design systems for React, Remix, Next.js, Vue, Angular or Vanilla JS Application ✨ with Stencil, Storybook, Vite and TypeScript.

Monorepo setup with Lerna according to the documentation at: stenciljs.com/output-targets

For Storybook, we use the most commonly used integration for web components with Lit, Vite and TypeScript, so you already have a basic implementation of buttons, headers etc. Lit is not required and therefore basically optional. When writing stories for web components built with Stencil, you don't have to use it, but you can, if you want, perform more advanced operations using the HTML tag for example. Alternatively, Storybook can also be reinstalled with npx storybook@latest init with another integration-template.

💡 Requirements

Node.js 20
Git

🚀 Getting Started

To start using this boilerplate, clone this repo to a new directory:

git clone https://github.com/artursopelnik/stencil-storybook-boilerplate.git

👩‍💻 Usage

Install dependencies: npm install
Navigate to the stencil core package: cd /packages/core and build it with: npm run build. To generate a new component, run:

npm run generate <sub-folder>

Go to the Storybook package: cd /packages/storybook
- Use npm run storybook.run to monitor only the stories for changes in Storybook.
- Use npm run storybook to also watch for changes in the web component itself.

👏 Contributing

:octocat: Pull requests and 🌟 stars are always welcome.
For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.