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.
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}