# 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](https://react-styleguidist.js.org/docs/documenting.html).

### 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](https://storybook.js.org/). 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](https://danieldmo.github.io/qwil-react-components/)


## 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/](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}
```