1.36.1 • Published 3 years ago

@qlue-ui/react-component v1.36.1

Weekly downloads
45
License
MIT
Repository
-
Last release
3 years ago

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

  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

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:

  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

1.36.1

3 years ago

1.36.0

3 years ago

1.35.8

3 years ago

1.35.7

3 years ago

1.35.6

3 years ago

1.35.5

3 years ago

1.35.3

3 years ago

1.35.4

3 years ago

1.35.2

3 years ago

1.34.0

3 years ago

1.34.1

3 years ago

1.35.1

3 years ago

1.35.0

3 years ago

1.33.0

4 years ago

1.32.34

4 years ago

1.32.36

4 years ago

1.32.35

4 years ago

1.32.33

4 years ago

1.32.32

4 years ago

1.32.31

4 years ago

1.32.30

4 years ago

1.32.29

4 years ago

1.32.28

4 years ago

1.32.27

4 years ago

1.32.26

4 years ago

1.32.25

4 years ago

1.32.23

4 years ago

1.32.24

4 years ago

1.32.22

4 years ago

1.32.21

4 years ago

1.32.20

4 years ago

1.32.19

4 years ago

1.32.18

4 years ago

1.32.17

4 years ago

1.32.16

4 years ago

1.32.15

4 years ago

1.32.14

4 years ago

1.32.13

4 years ago

1.32.12

4 years ago

1.32.11

4 years ago

1.32.10

4 years ago

1.32.9

4 years ago

1.32.8

4 years ago

1.32.7

4 years ago

1.32.6

4 years ago

1.32.5

4 years ago

1.32.4

4 years ago

1.32.3

4 years ago

1.32.2

4 years ago

1.32.1

4 years ago

1.32.0

4 years ago

1.31.1

4 years ago

1.31.0

4 years ago

1.30.11

4 years ago

1.30.10

4 years ago

1.30.9

4 years ago

1.30.8

4 years ago

1.30.6

4 years ago

1.30.7

4 years ago

1.30.5

4 years ago

1.30.4

4 years ago

1.30.3

4 years ago

1.30.2

4 years ago

1.30.1

4 years ago

1.30.0

4 years ago

1.29.8

4 years ago

1.29.9

4 years ago

1.29.10

4 years ago

1.29.7

4 years ago

1.29.6

4 years ago

1.29.5

4 years ago

1.29.4

4 years ago

1.29.1

4 years ago

1.29.2

4 years ago

1.29.3

4 years ago

1.29.0

4 years ago

1.28.7

4 years ago

1.28.6

4 years ago

1.28.5

4 years ago

1.28.4

4 years ago

1.28.3

4 years ago

1.28.2

4 years ago

1.28.1

4 years ago

1.28.0

4 years ago

1.27.6

4 years ago

1.27.3

4 years ago

1.27.4

4 years ago

1.27.5

4 years ago

1.27.2

4 years ago

1.27.1

4 years ago

1.27.0

4 years ago

1.26.29

4 years ago

1.26.28

4 years ago

1.26.26

4 years ago

1.26.25

4 years ago

1.26.27

4 years ago

1.26.24

4 years ago

1.26.23

4 years ago

1.26.22

4 years ago

1.26.21

4 years ago

1.26.20

5 years ago

1.26.19

5 years ago

1.26.18

5 years ago

1.26.17

5 years ago

1.26.16

5 years ago

1.26.15

5 years ago

1.26.14

5 years ago

1.26.13

5 years ago

1.26.12

5 years ago

1.26.11

5 years ago

1.26.10

5 years ago

1.26.9

5 years ago

1.26.8

5 years ago

1.26.4

5 years ago

1.26.5

5 years ago

1.26.6

5 years ago

1.26.3

5 years ago

1.26.2

5 years ago

1.25.8

5 years ago

1.25.9

5 years ago

1.25.10

5 years ago

1.25.7

5 years ago

1.25.6

5 years ago

1.25.4

5 years ago

1.25.3

5 years ago

1.25.2

5 years ago

1.25.1

5 years ago

1.25.0

5 years ago

1.24.1

5 years ago

1.24.0

5 years ago

1.23.1

5 years ago

1.23.0

5 years ago

1.22.0

5 years ago

1.21.4

5 years ago

1.21.3

5 years ago

1.21.2

5 years ago

1.21.0

5 years ago

1.21.1

5 years ago

1.20.0

5 years ago

1.19.1

5 years ago

1.19.0

5 years ago

1.18.8

5 years ago

1.18.7

5 years ago

1.18.6

5 years ago

1.18.5

5 years ago

1.18.4

5 years ago

1.18.3

5 years ago

1.18.1

5 years ago

1.18.0

5 years ago

1.17.12

5 years ago

1.17.11

5 years ago

1.17.10

5 years ago

1.17.9

5 years ago

1.17.8

5 years ago

1.17.7

5 years ago

1.17.6

5 years ago

1.17.5

5 years ago

1.17.4

5 years ago

1.17.3

5 years ago

1.17.2

5 years ago

1.17.1

5 years ago

1.17.0

5 years ago

1.16.7

5 years ago

1.16.6

5 years ago

1.16.5

5 years ago

1.16.4

5 years ago

1.16.3

5 years ago

1.16.2

5 years ago

1.16.1

5 years ago

1.16.0

5 years ago

1.15.0

5 years ago

1.15.1

5 years ago

1.14.6

5 years ago

1.14.5

5 years ago

1.14.4

5 years ago

1.14.3

5 years ago

1.14.2

5 years ago

1.14.1

5 years ago

1.14.0

5 years ago

1.13.4

5 years ago

1.13.3

5 years ago

1.13.2

5 years ago

1.13.1

5 years ago

1.13.0

5 years ago

1.12.2

5 years ago

1.12.1

5 years ago

1.12.0

5 years ago

1.11.0

5 years ago

1.10.3

5 years ago

1.10.2

5 years ago

1.10.1

5 years ago

1.10.0

5 years ago

1.9.3

5 years ago

1.9.1

5 years ago

1.9.0

5 years ago

1.8.1

5 years ago

1.8.0

5 years ago

1.7.0

5 years ago

1.6.2

5 years ago

1.6.1

5 years ago

1.6.0

5 years ago

1.5.6

5 years ago

1.5.5

5 years ago

1.5.4

5 years ago

1.5.3

5 years ago

1.5.2

5 years ago

1.5.0

5 years ago

1.4.4

5 years ago

1.4.3

5 years ago

1.4.2

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.0

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago

0.0.14

5 years ago

0.0.13

5 years ago

0.0.12

6 years ago

0.0.11

6 years ago

0.0.10

6 years ago

0.0.9

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago