wet-react

WET-React UI components library

React implementation of the Web Experience Toolkit (WET).

⚠️ This project is early stages of development. We are actively working hard to implement more components.

Build status

Storybook deployments

The Storybook build can be found here:

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:

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:

• 🚀 make it easier to create frontend apps
• ♿ have accessible components (WCAG AA)
• 📚 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).

npm i wet-react

Importing Components

You can import the desired component form @wet-react as shown below

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.

<link
  rel="stylesheet"
  href="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/css/theme.min.css"
/>

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