val-components v0.0.1

Project information

Technologies

• Stencil.js - Stencil is a compiler for building fast web apps using Web Components.
• TailwindCSS - A utility-first CSS framework.
• Stencil tailwind plugin - Third-party plugin to integrate TailwindCSS with Stenciljs.
• Storybook - Storybook is a frontend workshop for building UI components and pages in isolation.

Project setup

From the root of the project, run.

1. npm ci
2. npm run start

Stencil will render src/index.html with the components on /localhost:3333.

Storybook

Run npm run storybook and the storybook will open on /localhost:6006.

Run both stencil & storybook

To see changes made to components in storybook in real time, run npm run dev This will start storybook application and run stencil in the background to keep track of changes.

Developing

Generating new components

The project is using stencils naming convention (snake-case) for naming the components, so all components need to be on the form my-component. Do not use stencil in the component name, because it should be used as any other web component.

From the root of the project - run npm run generate. You will get to name the component, and choose what files to generate. E22-tests files, stylesheet and spec tests.

Reusing this component library

There are three strategies we recommend for using web components built with Stencil.

The first step for all three of these strategies is to publish to NPM.