https://github.com/mbeaseley/ccdesigns-components
A component library for all CCDesign projects
https://github.com/mbeaseley/ccdesigns-components
azure stenciljs-components typescript web-components
Last synced: 12 months ago
JSON representation
A component library for all CCDesign projects
- Host: GitHub
- URL: https://github.com/mbeaseley/ccdesigns-components
- Owner: mbeaseley
- License: mit
- Created: 2018-10-14T16:19:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-03-29T00:10:43.000Z (about 1 year ago)
- Last Synced: 2025-05-11T23:48:44.274Z (about 1 year ago)
- Topics: azure, stenciljs-components, typescript, web-components
- Language: TypeScript
- Size: 4.2 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
npm i ccdesign-component
```
## Getting Started For Development
To start building a new web component using Stencil, clone this repo to a new directory:
```bash
git clone https://github.com/mbeaseley/ccdesigns-components.git
cd ccdesigns-components
```
and run:
```bash
npm i
npm run stencil:start
```
To build the component for production, run:
```bash
npm run stencil:build
```
To run the unit and e2e tests for the components, run:
```bash
npm run stencil:test
```
## Naming Components
When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: ``). 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:
```bash
npm i -g st-cc
```
To add a new component
```bash
st-cc cc-newcomponent
```
## Storybook
Component are presented in Storybook. For each new component, a storybook file is required.
For testing:
```bash
npm run story
```
For pre-production test:
Do a build:
```bash
npm run storybook:build
```
To run:
```bash
npx http-server .out
```
To deploy to production:
```bash
npm run storybook:deploy
```