@qlue-ui/react-component v1.36.1
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
npm i -S @qlue-ui/react-component
# OR
yarn 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
// 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
- Clone the repository using
git clone
and navigate inside usingcd react-component
- Run
yarn link
to make this package linkable toYourApp
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-ui/react-component
to makeYourApp
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-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
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.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:
- Install the packages -> yarn / npm i
- create dist folder -> yarn watch / npm run watch
- run storybook -> yarn storybook/ npm run storybook
TODO:
- Test (react-testing-library)!
Contributor are very welcome to help build awesome UI :)
Why we use Storybook:
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago