npm package: @qlue-ui/react-component
Description: <p align="center">   <img src="https://cdn-images-1.medium.com/max/250/0*U68q6t0QLURZDgS9.png" alt="Qlue Logo" /> </p>
Author: dhegana
Latest version: 1.36.1

<p align="center">
  <img src="https://cdn-images-1.medium.com/max/250/0*U68q6t0QLURZDgS9.png" alt="Qlue Logo" />
</p>

## [`Qlue UI Storybook`](http://ui.qlue.dev)

[`@qlue-ui/react-component`](https://www.npmjs.com/package/@qlue-ui/react-component) is a collection of [React](https://reactjs.org/)
components that conforms to Qlue Style created by Qlue UI/UX team.

# Installation

Install with `npm` or `yarn`

```javascript
npm i -S @qlue-ui/react-component
# OR
yarn add @qlue-ui/react-component
```

# Requirements

[`@qlue-ui/react-component`](https://www.npmjs.com/package/@qlue-ui/react-component) uses [`Tachyons`](https://tachyons.io/) for the design system and it is required to import the CSS in your project. Please refer to [`Tachyons CSS Documentation`](https://tachyons.io/docs/table-of-styles/) for available CSS classnames

```javascript
// Required CSS import including the Tachyons CSS
import "@qlue-ui/react-component/dist/styles.css";

// Map Component CSS (Import if you use Map!)
import "@qlue-ui/react-component/dist/Map/styles.css";

// Table Component css (Import if you use Table!)
import "@qlue-ui/react-component/dist/Table/styles.css";
```

## How to make this library synchronized with `YourApp`

1. Clone the repository using `git clone` and navigate inside using `cd react-component`
2. Run `yarn link` to make this package linkable to `YourApp` locally. [More about yarn link](https://classic.yarnpkg.com/en/docs/cli/link/)
3. Run second terminal window **without closing the first one**
4. Second terminal: navigate to the root directory of `YourApp`
5. Second terminal: run `yarn link @qlue-ui/react-component` to make `YourApp` utilizing the previously-linked package
6. First terminal: run `yarn run watch`
7. Second terminal: run `YourApp`
8. If `YourApp` refreshes after any changes on this package, it means it is already working

# Usage

```javascript
import React from "react";
import Select from "@qlue-ui/react-component/dist/Select";
import "@qlue-ui/react-component/dist/styles.css";

const App = props => (
  <Select {...props} options={selectOptions} value={getValue} />
);
```

# Testing

Test with `npm` or `yarn` using [`Jest`](https://jestjs.io/) and [`Enzyme`](https://airbnb.io/enzyme/)

```javascript
npm run test
# OR
yarn test
```

# Contributing

Qlue React Front End team is required to be active in developing the UI Component as it will be used across product. Always make a PR into `development`! Be active in develop each component functionality, UI, & testing as it will recorded in the history

**1. Please update the readme in the component your working on to track the changes history.** Below is the example

- `src/qlueDashboard/DateFilter/README.md`
- `src/qlueDashboard/CardSummary/README.md`
```
## Changelog
## bugfix

#### **1.35.7** - [*29 Juni 2021*] - `commit id: cc133404`
- **QWD-1921** - Remove restprops spread into the Date Component

#### **1.35.8** - [*30 Juni 2021*] - `commit id: zwasd344`
- **QWD-1922** -  Remove the onChange function

## feature change

#### **1.36.0** - [*30 Juni 2021*] - `commit id: 091jksal`
- **QWD-1923** - Added props for maxEndDate & maxStartDate for date filter range pick
```
Write the `version release`, `date changes`, `commit id`, `JIRA task id`, & `description`

**2. Don't forget to update the prop-types as it will automatically updates the storybook**
**3. Update the storybook component inside `stories` folder**

<hr style="border-bottom: 1px solid red;" />

### How to Run Storybook locally:

1. Install the packages -> yarn / npm i
2. create dist folder -> yarn watch / npm run watch
3. run storybook -> yarn storybook/ npm run storybook

### TODO:

1. Test (react-testing-library)!

Contributor are very welcome to help build awesome UI :)

### Why we use Storybook:

[![Storybook](https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg)](https://www.youtube.com/watch?v=p-LFh5Y89eM&t=)