Qwil React Components

General Shared React components for Qwil

Installation

yarn add qwil-react-components

##Components

All components must be implemented under src/components folder with its own folder, e.g Button component will live in src/components/Button. Each component must have a <componentName>.md file, like Button.md which will have a description of how to use it including the example code.

For information about how document a component, see here.

Components styles

Each component must have a <componentName>.scss file and a file per tenant to specify the variables it will use which have different values for each tenant. Example:

Button.scss

Button.qwil.scss

Button.cambridge.scss

See Build section for available tenants.

Documentation

The project uses Storybook. The use of it is part of the development process since will allow you to create your components and see it live with the documentation and the running example.

here

Build

dev and prod builds must specify a tenant to use. By default qwil is set.

Available tenant:

• qwil
• cambridge

Build for prod

This will produce the index.js file to be publish and will generate the documentation too (yarn docs)

yarn build

The build is output in dist folder and the bundle is a UMD module.

build for testing in the webapp

This will produce the same bundle as for prod but it will generate the source maps inside the bundle. DO NOT USE IT FOR PROD BUILD.

Build documentation

yarn docs

The docs are generated under styleguide folder.

Dev server

To start the server run:

yarn start

It will start the dev server in watch mode in http://localhost:6060/. You can change the port in styleguide.config.js under serverPort prop. The dev server will compile your components and render the documentation with the live examples.

Deployment

make ship tag={a_tag}