edk-storybook v0.0.50

Development infos

This project uses the web component framework "lit" to create web components following the open-wc standard. The components itself can be found and defined/developed inside the "/src/"-folder. If you create a new component which should be included in the npm package release, it should be exported inside the ./src/index.ts . To build the webcomponents we use "webpack" and typescript to compile and bundle the webcomponents.

To support webcomponent development, documentation and management we use storybook. To add a lit webcomponent to storybook you need to create a "stories.ts" file for each webcomponent you want to import into storybook. These files should be contained inside the "./stories/" folder. (min example in : ./stories/edk-radiobutton.stories.ts)

Commands :

To run storybook locally (for demoing and development):

npm run storybook

To build for npm:

npm run build:production

To build and publish to npm :

npm publish

Useful developement links

Webcomponent development: Lit webcompnents documentation: https://lit.dev/docs/components/overview/ Documentation for storybook .stories : https://storybook.js.org/docs/react/writing-stories/introduction

Build Tools: Webpack with typescrit : https://webpack.js.org/guides/typescript/#basic-setup

Build information

The build project delivers the file ./dist/package/index.js which includes the bundled webcomponents transpile to es6.

Usage of npm package

Currently the only way to effectivly use the published package with the webcomponents inside Server Side Rendering (SSR) Applications, is to use a CDN to load the npm package at client side and load them at this point.

We will test further other methods to intergrate them at Server side.

Installation

npm i edk-storybook

Usage

In native browser Html Apps:

<script type="module">
  import 'edk-storybook/edk-button.js';
</script>

<edk-button></edk-button>

For SSR Applications :

<script type="module" src="https://unpkg.com/edk-storybook@latest"></script>
<edk-button></edk-button>

Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Testing with Web Test Runner

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html