# WET-React UI components library
React implementation of the Web Experience Toolkit (WET).
:warning: This project is early stages of development. We are actively working hard to implement more components.
## Build status
[](https://github.com/ised-ocp-dev/wet-react/actions/workflows/chromatic.yaml)
[](https://github.com/ised-ocp-dev/wet-react/actions/workflows/ci-tests.yaml)
[](https://codecov.io/gh/ised-ocp-dev/wet-react)
[](https://www.npmjs.com/package/wet-react)
## Storybook deployments
The Storybook build can be found here:
[](https://master--627956c91eb0d9004ac32d72.chromatic.com/)
## Core documentation
This react component library is implemented based on the WET frontend CSS framework and React Bootstrap.
The documentation for these core projects can be found here:
[](https://wet-boew.github.io/wet-boew/index-en.html)
[](https://react-bootstrap.github.io/)
## The purpose
The purpose of this package is to "Reactify" the Web Experience Toolkit (WET). This will make it faster and easier to develope applications using WET. It also removes the JQuery dependency of WET.
This project has 3 main goals:
- :rocket: make it easier to create frontend apps
- :wheelchair: have accessible components (WCAG AA)
- :books: clean and accurate documentation (Storybook)
## How to use
### Installation
The best way to consume React-Bootstrap is via the npm package which you can install with npm (or yarn if you prefer).
```shell
npm i wet-react
```
### Importing Components
You can import the desired component form `@wet-react` as shown below
```typescript
import { Button } from '@wet-react';
```
### Stylesheet
WET-React doesn't ship with a specific stylesheet. It is made to be compatible with either the WET or GCWeb theme (based on Bootstrap 3). To allow for this flexibility, you can choose to import either CSS file in the HTML header of your project.
As an example, using the following file in the HTML header will give the components the GCWeb theme.
```html
```
## Development
### How to run locally
1. clone the repo to you local machine
2. open terminal inside the project directory
3. install packages using `npm install`
4. launch Storybook using `npm run storybook`
5. navigate to `http://localhost:6006` to see Storybook running based on you local code. As you save your changes, the storybook will automatically update.
### Project scripts
Here is what each script in the `package.json` does:
- `test`: runs the component tests
- `lint`: runs ESlint to check for issues
- `lint:fix`: runs ESlint to check for issues and auto fixes them
- `prettier`: runs prettier to check for code styling issues
- `prettier:fix`: runs prettier to check for code styling issues and auto fixes them
- `storybook`: spins up a dev instance of Storybook that is based on the local changes. The running application can be found at `http://localhost:6006`
- `build-storybook`: builds a static version of Storybook (not often needed)
- `chromatic`: Deploy the current code to a chromatic image and provide a sharable link
- `prepare`: Enable Git hooks
React implementation of the Web Experience Toolkit (WET).
:warning: This project is early stages of development. We are actively working hard to implement more components.
## Build status
[](https://github.com/ised-ocp-dev/wet-react/actions/workflows/chromatic.yaml)
[](https://github.com/ised-ocp-dev/wet-react/actions/workflows/ci-tests.yaml)
[](https://codecov.io/gh/ised-ocp-dev/wet-react)
[](https://www.npmjs.com/package/wet-react)
## Storybook deployments
The Storybook build can be found here:
[](https://master--627956c91eb0d9004ac32d72.chromatic.com/)
## Core documentation
This react component library is implemented based on the WET frontend CSS framework and React Bootstrap.
The documentation for these core projects can be found here:
[](https://wet-boew.github.io/wet-boew/index-en.html)
[](https://react-bootstrap.github.io/)
## The purpose
The purpose of this package is to "Reactify" the Web Experience Toolkit (WET). This will make it faster and easier to develope applications using WET. It also removes the JQuery dependency of WET.
This project has 3 main goals:
- :rocket: make it easier to create frontend apps
- :wheelchair: have accessible components (WCAG AA)
- :books: clean and accurate documentation (Storybook)
## How to use
### Installation
The best way to consume React-Bootstrap is via the npm package which you can install with npm (or yarn if you prefer).
```shell
npm i wet-react
```
### Importing Components
You can import the desired component form `@wet-react` as shown below
```typescript
import { Button } from '@wet-react';
```
### Stylesheet
WET-React doesn't ship with a specific stylesheet. It is made to be compatible with either the WET or GCWeb theme (based on Bootstrap 3). To allow for this flexibility, you can choose to import either CSS file in the HTML header of your project.
As an example, using the following file in the HTML header will give the components the GCWeb theme.
```html
```
## Development
### How to run locally
1. clone the repo to you local machine
2. open terminal inside the project directory
3. install packages using `npm install`
4. launch Storybook using `npm run storybook`
5. navigate to `http://localhost:6006` to see Storybook running based on you local code. As you save your changes, the storybook will automatically update.
### Project scripts
Here is what each script in the `package.json` does:
- `test`: runs the component tests
- `lint`: runs ESlint to check for issues
- `lint:fix`: runs ESlint to check for issues and auto fixes them
- `prettier`: runs prettier to check for code styling issues
- `prettier:fix`: runs prettier to check for code styling issues and auto fixes them
- `storybook`: spins up a dev instance of Storybook that is based on the local changes. The running application can be found at `http://localhost:6006`
- `build-storybook`: builds a static version of Storybook (not often needed)
- `chromatic`: Deploy the current code to a chromatic image and provide a sharable link
- `prepare`: Enable Git hooks