ised-ocp-dev / 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

wet-react's Issues

Alex-working on lightbox, then grid system, then tabbed interface and carousel

Putting it all here because idk if I'll be around to update it, since I'm too busy actually working

Prettyprint custom linenums don't work

In prettyprint, the linenums property doesn't work. Maybe it's a jquery thing? You can get them with an <ol>

Modal Component Missing Pop-Up Story

There is no story on how to set up a Pop-Up Modal.

Fix Modal Component Bugs

Modal component is missing the onHide prop -- a callback fired when a modal is hidden. The props fullscreen and restoreFocus are incorrectly typed.

DataTable test has mui error

console.warn
MUI: The page size 5 is not preset in the rowsPerPageOptions
Add it to show the pagination select.

  at GridPagination (node_modules/@mui/x-data-grid/node/components/GridPagination.js:72:15)
  at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
  at updateForwardRef (node_modules/react-dom/cjs/react-dom.development.js:17044:20)
  at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19098:16)
  at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23940:14)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
  at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
  at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)

Alex-Making Secondary Menu

Alex-need to make Lists component so I can make Secondary Menu and Details/Summary components

Create DataTable component

Create the DataTable component:

WET reference: https://wet-boew.github.io/wet-boew-styleguide/design/tables-en.html

wrong import statement in readme

Hey everyone,

I just found out that in the README of this project the import statement is wrong:
"Importing Components
You can import the desired component form @wet-react as shown below

import { Button } from '@wet-react';"
In addition, a small spelling mistake has crept in there ;)

In my opinion, it should read correctly:

"Importing Components
You can import the desired component from wet-react as shown below:

import { Button } from 'wet-react';"

Cheers
Michael

Form radio checkboxes are not mutually exclusive

Checking one radio checkbox doesn't uncheck all others. This is very bad, makes them essentially unusable
https://wet-boew.github.io/wet-boew-styleguide/design/forms-en.html#radio
-Alex (will try to resolve)

Write Documentation Regarding Icon Use

Need to write documentation (i.e., create a story) detailing how to display icons.

Create Toggle and Group Toggle Components

Create the Toggle component and Group Toggle components:

WET reference: https://wet-boew.github.io/v4.0-ci/docs/ref/toggle/toggle-en.html#toggle-other
react -bootstrap reference: https://react-bootstrap.netlify.app/components/buttons/#toggle-button-props

Create Carousel component

Create the Carousel component:

WET reference: https://wet-boew.github.io/v4.0-ci/demos/tabs/tabs-carousel-en.html

need documentation for charts and graphs

Feeds component causes npm rollup errors

The Feeds component causes npm rollup errors.

ShareWidget needs X icon for top-right close button

TypeError: (0 , _css.default) is not a function

When testing certain functionality, I sometimes ran into the following error: TypeError: (0 , _css.default) is not a function

Proposed solution from the closed react-bootstrap issue : react-bootstrap/react-bootstrap#6346

Additional Icon Story Example

Adding an additional example to the Font Awesome story that outlines how to use an IconDefinition with the ShareWidget component.

Make multimedia player

ReferenceError: regeneratorRuntime is not defined

When writing async await test functions (so I can use the waitFor function and test component changes) I ran into the following error:

href's don't work in storybook

When I add an HREF in storybook element to link to something else in the same canvas, it doesn't link. This is an issue for footnotes and lightbox.

Alex - working on lightbox

ToggleGroup onChange type bug

Alex - need to do tabs

DataTable component missing 1 line of test

DataTable is at 90%, can't figure out how to trigger
onPageSizeChange={(newPage) => setPageSizeValue(newPage)}

Footnotes need to be made -Alex

Create Feeds component

Create the Feeds component:

WET reference: https://wet-boew.github.io/v4.0-ci/docs/ref/feeds/feeds-en.html

Modal X button rendering as square

Create ShareWidget Component

Create the ShareWidget component:

WET reference: https://wet-boew.github.io/v4.0-ci/demos/share/share-en.html

Create DatePicker component

Create the DatePicker component:

WET reference: https://wet-boew.github.io/v4.0-ci/docs/ref/datepicker/datepicker-en.html

Tabs component doesn't mesh with WET-REACT-TEMPLATE

Sometimes changing tabs in tabs-component forces user back to language select screen. It only happens if the tabs-component is on the website-tab that you go to when you first load the page, e.g. 'Home' or current website-tab after refresh. I think the tabs-component is meshing with the website-tabs in the header, but I can't prove it and idk how to troubleshoot it

Alex-making details/summary polyfill

@Mui causes errors to pop up in template

Errors pop up, changing versions (suggested solution) has no effect. Solution is to replace e.useId and e.useInsertionEffect with e['use'+'Id'] and equivalent inside dist/esm/inde.js, but file is from npm package itself so not a good solution bc difficult to implement and maybe bad practice. Should contact @mui with issue.

Create SessionTimeout component