Qlue UI Storybook

@qlue-ui/react-component is a collection of React components that conforms to Qlue Style created by Qlue UI/UX team.

Installation

Install with npm or yarn

1npm i -S @qlue-ui/react-component
2# OR
3yarn add @qlue-ui/react-component

Requirements

@qlue-ui/react-component uses Tachyons for the design system and it is required to import the CSS in your project. Please refer to Tachyons CSS Documentation for available CSS classnames

1// Required CSS import including the Tachyons CSS
2import "@qlue-ui/react-component/dist/styles.css";
3
4// Map Component CSS (Import if you use Map!)
5import "@qlue-ui/react-component/dist/Map/styles.css";
6
7// Table Component css (Import if you use Table!)
8import "@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
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

1import React from "react";
2import Select from "@qlue-ui/react-component/dist/Select";
3import "@qlue-ui/react-component/dist/styles.css";
4
5const App = props => (
6  <Select {...props} options={selectOptions} value={getValue} />
7);

Testing

Test with npm or yarn using Jest and Enzyme

1npm run test
2# OR
3yarn 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

---

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: