@qlue/react-component NPM

`Qlue UI Storybook`

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

Changelog

Current @qlue/react-component version is 1.36.41

feature changes

1.36.39 - 31 Oktober 2022 - `commit id: e649e8f`

Fix Card Table

Installation

Install with npm or yarn

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

Requirements

@qlue/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

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

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

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

How to make this library synchronized with `YourApp`

Clone the repository using git clone and navigate inside using cd react-component
Run yarn link to make this package linkable to YourApp locally. More about yarn link
Run second terminal window without closing the first one
Second terminal: navigate to the root directory of YourApp
Second terminal: run yarn link @qlue/react-component to make YourApp utilizing the previously-linked package
First terminal: run yarn run watch
Second terminal: run YourApp
If YourApp refreshes after any changes on this package, it means it is already working

Usage

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

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

Testing

Test with npm or yarn using Jest and Enzyme

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.38** - [*27 September 2022*] - `commit id: 8bdaaed`
- **TM-855** - create monthAhead prop on MonthPicker

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