# mo-display

[![CircleCI](https://img.shields.io/circleci/build/github/ModaOperandi/display-library/master?token=572d6428bd210fd3e6ddbb97bd4f4e5c0b9aaf63)](https://circleci.com/gh/ModaOperandi/display-library)

## React Display Library by [Team Moda](https://www.modaoperandi.com/)

### Contributing Guidelines

- Write clean code

### Getting Started

#### Making Commits

We are using [semantic release](https://github.com/semantic-release/semantic-release) for this repo and [commitizen](https://github.com/commitizen/cz-cli) to help with formatting commits.

- Install the commitizen CLI with `yarn global add commitizen`
- To run through the CLI: stage your files to commit and run `git cz`.

#### Development

Currently this library is exposed in two ways: as a package over NPM and as a static JavaScript file over CDN.

#### Building

[`Mojo`](https://github.com/ModaOperandi/mojo) consumes this package through the CDN — which exposes the library over `window.MoDisplay`.

```sh
yarn build:mojo
```

#### Publishing on NPM

[`Website`](https://github.com/ModaOperandi/website) consumes this package through the actual NPM package; but then declares it as external when it too is built and exposed over the CDN.

Does this make version mismatch bugs likely? Yes. Be careful making breaking changes to anything that is consumed in both repos.

```sh
yarn publish
```

#### Running locally inside of `mojo`

- Start the dev server with `yarn mojo:dev`
- Start mojo with these environment variables:

```
DISPLAY_LIB_CSS_URL=http://localhost:8002/mo-display.css
DISPLAY_LIB_SCRIPT_URL=http://localhost:8002/mo-display.min.js
```
#### Storybook
Sometimes it's easier and makes for better code to develop your component in isolation. To help with that we use a tool called [storybook](https://storybook.js.org/docs/basics/introduction/).

To create a new story, add a file to the `stories/` directory with a `*.stories.js` extension.

To run storybook you can use `yarn start` or `yarn storybook`. 
Then you can view the storybook at `http://localhost:9001`

#### Useful URLs

##### Production
https://assets10.modaoperandi.com/assets/display-lib/mo-display-production.min.js
https://assets10.modaoperandi.com/assets/display-lib/mo-display-production.css

##### Staging
https://assets10.modaoperandi.com/assets/display-lib/mo-display-staging.min.js
https://assets10.modaoperandi.com/assets/display-lib/mo-display-staging.css

##### Master ("Integration")
https://assets10.modaoperandi.com/assets/display-lib/mo-display-master.min.js
https://assets10.modaoperandi.com/assets/display-lib/mo-display-master.css