ccdesign-components v2.0.3

CCDesign Component Library

This is a web component library that is used on ccdesign.me.uk. All components are now available to be looked at on mbeaseley.github.io/ccdesigns-components/

Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Using this component library

Use the following command:

npm i ccdesign-component

Getting Started For Development

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/mbeaseley/ccdesigns-components.git
cd ccdesigns-components

and run:

npm i
npm run stencil:start

To build the component for production, run:

npm run stencil:build

To run the unit and e2e tests for the components, run:

npm run stencil:test

Naming Components

When creating new component tags, we recommend not using stencil in the component name (ex: <stencil-datepicker>). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion.

Making a Stencil Component

The easiest way of creating a stencil component is using this cli as documentation here: https://www.npmjs.com/package/st-cc

To install:

npm i -g st-cc

To add a new component

st-cc cc-newcomponent

Storybook

Component are presented in Storybook. For each new component, a storybook file is required.

For testing:

npm run story

For pre-production test: Do a build:

npm run storybook:build

To run:

npx http-server .out

To deploy to production:

npm run storybook:deploy