ZenUI

A collection of UI components that are shared across Reciprocity applications.

Powered by Stencil and Storybook.

Installation

Before installing, download and install Node.js. Latest LTS version is recommended.

It is not necessary to have Docker installed as the project is not containerized.

Quick start

Install dependencies:

yarn

Start Stencil compiler and Storybook server (available at http://localhost:6006):

# Runs both in watch mode with HMR
yarn start

Create new Web Components

Scaffolds a new component, creating the folder structure with basic code, styles, unit tests, and documentation:

yarn create-component zen-{component-name}

Testing

To run unit and integration tests in Jest:

yarn test

To run E2E/visual tests in Cypress:

yarn run test:e2e

For more details on testing (including visual testing) check the Testing doc.

Linting and Formatting

The code is both linted and formatted with ESlint and Prettier on every commit, using a Husky hook.

You can fix lint/format errors in src/* files with the following commands:

# Fix linting errors
yarn lint:all
# Fix formatting errors
yarn format:all

You can also manually run the lint:check and/or format:check to validate possible errors:

# Only checks for linting errors
yarn lint:check
# Only checks for formatting errors
yarn format:check

Using components within your own app

For instructions on how to consume this library check the Getting Started stories.

Contributing

To contribute, please familiarize yourself with the Contributing doc.