Overview

• This is a collection of web components reusable across projects and frameworks.

• It is built with a web component framework called StencilJS - https://stenciljs.com

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

• Currently the following frameworks support the use of these components:

  • Angular 2.+
  • React
  • VueJS
  • Vanilla JS

• We encourage you to contribute to this repo when you are developing a component that can be useful in other projects

Project Structure

atajo-web-components
│
│   README.md - This file
│   stencil.config.ts - The main stencil config file (see stenciljs.com)
│   tsconfig.json - The main typescript config file
│   typedoc.config.ts - The typedoc config file
│
└───src
│   │   components.d.ts - Auto generated by the Stencil compiler
│   │   index.html - Add and test your components here
│   │
│   └───assets
│   │   └───images - place image assets related to your components here
│   │
│   └───components
│   │   └───atajo - add your composite components here (e.g. atajo-auth)
│   │   └───base - base components (StencilJS wrappers for https://material.io/develop/web/)
│   │
│   └───global - place you global definitions here (shared by components)
│
└───docs - auto generated by running: npm run docs

Getting Started

Clone the repo:

git clone https://[email protected]/BritehouseMobile/atajo-web-components

Install dependencies:

npm install

Run the dev server:

npm start

Run tests:

npm test

Generate docs:

npm run docs

Build for production:

npm run build

Deploy:

npm run deploy

Naming Components

• We strongly encourage you to use the atajo- prefix when creating a new composite component.
• Choose a name that fits the function of your component

Using components

TODO