capgemini/dcx-react-library

React Library UI/UX agnostic

DCX React library

Motivation

dcx-react-library is a React library with a set of components ready to use in your project.
There are plenty of libraries available in React that can help to increase your productivity however most of them contain lots of css and are hard to style based on your project's requirements.
dcx-react-library is UI/UX agnostic, this allows the dcx-react-library to be easily integrated into any project.
You have few options to make your components good looking 💄:

1. You can provide the styling to match the look and feel of your application passing the class to every component 👷
2. 🔥 🔥You can use the design system tokens that we built for you - from version 1.0.0 🔥 🔥

Components

To see the full list of components built in dcx-react-library, and how to use it, have a look on our storybook-showcase In Storybook, each component is presented with 4 main sections:

• documentation: describes the list of properties available, optional and mandatory;
• live: you can play directly with all the properties and see the component's behaviour;
• unstyled: the bare component without any styling applied;
• styled: an example (mainly based on GDS) of how to style the component and the final result.
• design system: an example of how to style the component using the tokens exposed by the design system.

How to use it

Using dcx-react-library should not require any particular setup.
You only need to import the component and use it 😃

Steps:

• yarn add @capgeminiuk/dcx-react-library
• Import the component you need and use it. For example:

import { Button } from '@capgeminiuk/dcx-react-library';

const App = () => {
  return <Button label="start" onClick={() => {}} />;
};

Styling

We don't ship dcx-react-library with any included CSS. However, some stylesheet is required to use some components (for example, toggle and tooltip).

/* The following line can be included in your src/index.js or App.js file */
import '@capgeminiuk/dcx-react-library/dist/dcx-react-library.css';

Design System

The dcx-react-library supports opt-in styling customizable via CSS custom properties.

To keep the library UI/UX agnostic the styles are not shipped by default. In order to include them in your project you can import them as follows:

/* main.jsx */

import '@capgeminiuk/dcx-react-library/design-system/index.css';

Note that this will setup the styling for all the components in the library. You may want to fine-tune the imports if performance is critical for your application.

All the components have their own stylesheet and can be imported individually when needed:

/* Needed for core styles */
import '@capgeminiuk/dcx-react-library/design-system/base.css';

/* Individual imports, works well with tree-shaking */
import '@capgeminiuk/dcx-react-library/design-system/form-control.css';
import '@capgeminiuk/dcx-react-library/design-system/button.css';
// ...

Don't forget to add the base.css import before loading the individual stylesheets. It contains the core definitions used for the design system to work.

Contributing

If you'd like to contribute, please follow our CONTRIBUTING section.

Blog posts

• For an introduction to the DCX React Library please read our Introducing the DCX React Library blog post.
• For tips on how you can contribute to the DCX React Library please read our Contributing to the DCX React Library blog post.
• If you want to know more about the DCX React Library 1.0.0 release please read our 1.0.0 release update blog post

Raise a bug or enhancement

If you find a bug or you would like to recommend an improvement, please raise an issue and use the appropriate template. We will be more than happy to improve the library, smashing all the bugs found and improve the functionality.

Contributors ✨ ✨

Thanks goes to these wonderful people

Daniele Zurico	Marius Mirca	Isaac Babalola	Alex Webber	Nikki Algar	Niku Sharma
Claudio Ricci	Sandra Ro Diaz	Ellie Tahmasebi	Sri Viswanathan	Julian Taylor	Sergio Bandera Garcia
Szilvi Horvath	Jaya Rathore	Arpana Kumari	Caner Shefik	Jadhav Jeet	Soundar Arumugam
Javier Gonzalez Moya	Kavitha Kurella	Yunus Firat	Yohannes Berhane	Ahmet Kucukibrahimoglu	Ismael Akhtaab
Bayraktutan Yasemin	Muttoo Shivam	Joseph Oldfield	Aranzazu Vázquez Moreno

dcx-react-library's Issues

# checkbox

• - Single checkbox
• - Labels
• - pre checked / pre selected
• - multiple checkboxes
• - disabled / enabled
• - hintPosition

<CheckBox/>

---

assigned-to: @nikkialgar

# checkbox (Part 2)

• Conditionally revealing content
• on error validation display
• bubbling up of errors to parent component ??

Look into Aria attributes for the autocomplete

The auto complete and maybe the select needs some aria attributes adding to it such as
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions otherwise user with a screen reader might not know the list has appeared on screen.

[Component Generator] - AriaLabel is an invalid property

The generated code for the link component needs updating to use

const newProps = { href, text, 'aria-label': ariaLabel, ...props };

as 'ariaLabel' is not a valid property and returns an error when used

# Multi-Upload

• file upload

[FEAT] Radio Buttons Group

• Radio items with text dividers (add a group divider (e.g. or options))
• Conditional revealing content
• by default it should render at least two radios

Add Knobs and snippets to the storybook files

I think that the Knobs (https://storybook.js.org/addons/@storybook/addon-knobs/) and the code snippet functionality for story book would be a good addition to the repo. It will help users better understand what can be changed on a component without without having to read the full documentation. When you change the knob in storybook the view will update showing the changes making it really easy to play around with components.

The code snippet also helps the end user by giving them a snippet to copy directly into their codebase, any changes made with the knobs will be reflected in the snippet making customising and copying the components even simpler.

Documentation for checkbox does not match

If you navigate to the un-styled page for the checkbox in story book and then click view code the code that gets displayed does not make sense and is not helpful to the end user.

` const [value, setValue] = React.useState('');
const [isChecked, setIsChecked] = React.useState(false);

const handleChange = event => {
setValue(event.currentTarget.value);
setIsChecked(!isChecked);
};

return <FormCheckbox label="text example" value={value} id="checkbox-1" inputProps={{
name: 'checkbox-1'
}} />;`

this is what gets displayed currently, the event isn't hooked up to the checkbox and setChecked isn't even used anywhere on the screen. ischecked isn't even a property in the documentation so I'm not sure if it's supposed to be or if this is just an error as well.

Add dedicated loading state to the button component

I think the button component could benefit from a dedicated loading state where the user can just toggle it on and off with an attribute.

Three new attributes could be added:

• loading - if the button should be loading or not
• loadingMessage - any text that the user want to switch out the regular cta text for when loading, can be optional
• loadingIcon - a specific loading icon to be added inside the button when the loading state is active, it could be optional

When the loading state is active the button could be disabled and maybe an extra class added if the user wanted to grey out the button for example.

The generated component script should generate Link

it could be good if I can generate a href links without writing them manually using the script and the json file

Extract the login form in a component

Store the component inside a folder under components

import config from './config.json';
type FormValues = {
	username: string;
	password: string;
}


const handleLoginClick = (isValid: boolean, formValues: FormValues) => {
	const {username, password} = formValues;
	if(isValid) {
		//post api passing username and password
	}

}

<LoginForm onClick={(isValid, formValues) => handleLoginClick(isValid, formValues)} enableDefaultSubmit={config.enableDefaultSubmit}/>

buttons & imagebutton

---

assigned-to: @daniele-zurico

Change the FormGroup heading to be a different element

The FormGroup heading is using the H1 tag at the moment but that will break accessibility on most pages where there will be another H1 tag as the header. So it should either be changed to a H2 or be dynamic so the user can pass in the correct tag to use for the scenario.

[Button] The Button remain disable after click

After you click the button will remain disabled:

 <Button label="daniele" onClick={handleClick}  />

Expected Behaviour: it should back enable after you click

Autocomplete Active class should not replace the default class name

When using the autocomplete component the first item in the list has the "resultActiveClass" added to it by default which is fine however it replaces any class I add in the resultlLiClass property which it should not do. The active class needs to be added alongside the resultlLiClass and not replace it.

Storybook descriptionts review

review all the storybook descriptions. It could be good to see if the narrative is consistent and exhaustive

Radio button documentation issues and potential bug

In the radio button documentation I can see this chunk of code conditional={{ name: "conditional-reveal", label: "label", type: "text", className: "classes", groupClassName: "group-classes", id: "conditional-id", inputClassName: "input-classes", inputId: "input-id" }}

with no related documentation so I'm not sure what it's for or how to use it .

Inside the input props section there is a onChange event as well as one in the main body of the element. As a new user which one would be correct or are they both needed?

inputProps={{ className: 'class-name', onChange: handleChange }}

Not sure if this is a bug or not but if there are multiple radio buttons, when I click the label it will always select the first radio button regardless of which label I click. I can only select a different option by clicking the radio button directly.

# checkbox list

• ensure we have a component that groups checkboxes

<CheckBoxList items=[]/>

[When 0.1 is completed] - Build the dcx-react-library and deploy on NPM

As soon as we finish all the 0.1 component we need to build the library and deploy on npmjs.ord

Slack integration with dcx-react-library broken

Describe the bug
slack integration with the dcx-react-library channel seems to be broken for me, none of my actions are reflecting in the channel and I’m having to manually add my gitHub events within the channel

To Reproduce
Steps to reproduce the behavior:

1. Go to 'dcx-react-library'
2. Click on 'create issue, create or merge a pull request'
3. See that no message appears in the dcx-react-library

Expected behavior
I should see a message in the dcx channel cognisant of my changes with the gitHub repo

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[Build Library] - When you build the library you can't use the generate component

Steps:

• in the dcx-react-library run npm pack this will create a .tgz file
• create a new project npx create-react-app my-app --template typescript
• run yarn install

you can't use the command:

yarn dcx-generate-presentational-component --input src/component-template src/components

Expected behaviour:
the file dcx-generate-presentational-component is suppose to be copied inside node_modules/.bin

Note:
with npm install it completely fail
with yarn it allows you to use the library but doesn't copy the file to the .bin folder

Select part 2

Is your feature request related to a problem? Please describe.
It could be good to add more functionalities to the select components

Describe the solution you'd like

• grouped
  for example:
  colours (2)
  blue
  red
  flabour (2)
  vanilla
  chocolate

• disable some value
• disabled
• preselect one

Describe alternatives you've considered
a good example is the following select
https://react-select.com/home

Deploy the show case folder in a server

Find a place where we can host the showcasing of the react components

[Component Generator] - allow to pass { for default values

It could be good if the component generator will manage this:

{
    "link": {
      "tag": "a",
      "props": ["href", "text", "classes"],
      "defaultValues": {
          "className": "{['btn' ,'btn-sm', 'btn-link', classes].join(' ')}"
      }
    }
}

generating:

import React from 'react';
import { DynamicComponent, brandedComponentStyle } from 'dcx-react-library';
import jsonStyle from '../component-template/link.json';
export const Link = ({href,text,className,...props}: any) => {
  const branded: any = brandedComponentStyle(jsonStyle.link);
  const newProps = {href,text,classes,...props};
  return (
    <DynamicComponent dynamicStyle={branded.style} tag={branded.tag} className={['btn' ,'btn-sm', 'btn-link', classes].join(' ')}  {...newProps}>
      {props.children}
    </DynamicComponent>
  );
};

at the moment instead it generate:

import React from 'react';
import { DynamicComponent, brandedComponentStyle } from 'dcx-react-library';
import jsonStyle from '../component-template/link.json';
export const Link = ({href,text,className,...props}: any) => {
  const branded: any = brandedComponentStyle(jsonStyle.link);
  const newProps = {href,text,className,...props};
  return (
    <DynamicComponent dynamicStyle={branded.style} tag={branded.tag} className="{['btn' ,'btn-sm', 'btn-link', className].join(' ')}"  {...newProps}>
      {props.children}
    </DynamicComponent>
  );
};

the rule could be when a defaultprops contains a { remove the quotes

[FormInput] - Trigger the error message without interact with the input

Some form have the submit button enable bu default and they allow you to click without interact with all the components inside.
The forminput should display an error message (if not valid) as soon the button is pressed

0.2 Ideas

This is an idea of components we can implement on 0.2... feel free to add more if you think about some other useful component. As soon as we finish 0.1 we'll start elaborate and split them in separate tickets.

1. TabPanel
2. CopyToClipboard (when over it appear icon and message copy to clipboard, when click message copied)
3. drag to resize div (height or width direction)
4. sidebar

# Date Input

date input select: dd mm yyyy:
features:

• allow to change the order of the inputs (mm dd yyyy or yyyy mm dd)
• validation for valid date
• not allow date in the past
• not allow date in the future more then x
• allow the user to specify his validation

HMRC
https://design-system.service.gov.uk/components/date-input/

needs to accept props:
format="dd mm yyyy | mm dd yyyy" optional - set to dd mm yyyy by default
allowPastDate="true|false" optional - set to true by default
furthestDateInFuture="ddmmyyyy" - optional - set to +100 years from current by default
furthestDateInPast="ddmmyyyy" - optional - set to -100 years from current by default

By default, validation needs to be applied so that any date entered is a real/valid date e.g. not allowed to enter 31/2/2021

[FEAT] Create dynamically functional components for the typography

Problem

When a new project starts the first thing the developer needs to do is to create a set of typography components that match the look and feel defined by the UX/UI. Example:

• Title
• Subtitle
• Label
• Hint
  These component do not perform any action but they store a common style that is usable around the application.
  Ex:

.label {
 color: 'gray;
 font-weight: 'bold'
}

export const Title = ({label}) => <label className='label'>{label}</label> 

It could be useful if the developer doesn't have to write these components on his own but they will provided by the library.

Technical Solution

When the developer install dcx-react-library he will define:

1. Json file that describe his component (title.json):

{
    "title": {
        "tag": "h1",
        "color": {
            "value": "red"
        },
        "fontWeight": {
            "value": "bold"
        }   
    }
}

2. he runs a command yarn generate-typography:
3. in his src folder a new subfolder is created and it will contain title.tsx

example: yarn generate-typography --input stories/typographyDemo/input --output stories/typographyDemo/output

HOW TO IMPLEMENT THIS

1. create a generic component that will accept whatever style and tag (span,div,h1) and will render correctly:
   ex:

{
    "title": {
        "tag": "h1",
        "color": {
            "value": "red"
        },
        "fontWeight": {
            "value": "bold"
        }   
    }
}

will generate:

<h1 className="class">{props.children}</h1>

2. a nodeJs task that will scan a directory and will read all the .json file
3. a nodeJs task that given a template component will generate the new .tsx file:
   ex:

export const Title = (props: any) => {
  const style: any = brandedComponentStyle(jsonStyle.title);

  return (
    <DynamicComponent {...style} {...props}>
      {props.children}
    </DynamicComponent>
  );
};

4. will save this component in the project he created under:
   src/components/typography

The button doesn't disable correctly

When we set the status disabled on the button component it doesn't disable correctly but it remains enabled

Implement sign up page

The signup page will try to use all the components that we already built for 0.1.... use your fantasy ;)

example:

username: forminput component
country: search component
gender: radio
.... : toggle

Multi Select component

Is your feature request related to a problem? Please describe.
Create a multi select component

Describe the solution you'd like
the multi select should allow to select more than one item. It should allow removing one of the items selected. When the item is selected it should disappear from the list of available selections

Describe alternatives you've considered
https://react-select.com/home

Additional context

FormInput component doesn't set validity correctly

If I define a formInput component:

const handleUserNameValidity = valid => setUsernameValid(valid);
return(
<FormInput
            name="username"
            type="text"
            value={username}
            onChange={handleChange}
            isValid={valid => handleUserNameValidity(valid)}
            inputProps={{
              placeholder: 'Enter your username',
              autoComplete: 'username',
            }}
            errorProps={{
              className: 'error',
            }}
            validation={{
              rule: {
                type: 'string',
                notEmpty: true,
              },
              message: 'Please enter a username',
            }}
            errorPosition="bottom"
          />
)

I expect that on load the username input is not valid instead it returns valid

## radio-button group component

• We have created a component to render a single / number of radio button(s) however would be good to have a component that renders a list of radio buttons based on given properties
• Will add the capability to add a title to a group of radio components
• Will add the capability to add hint text to a group of radio components
• Will add the capability to add validation if a selection has not been made from a group of given radio components

Assigned to:
@Ibabalola

Generating components title's are breaking

I have noticed a few issues with the naming convention for generating components. You can't have a hyphen in the filename such as "heading-one" otherwise it will break the React component. This needs to be added to the documentation letting the users know they can and can not include in the file name.

The second is that despite calling the json file "headingOne.json" and the contents of the file being
{ "headingOne": { "tag": "h1" } }

the generated component is called Headingone, is that accurate or should it keep the camel case syntax and be HeadingOne?

Add storybook Accessibility plugin

Is your feature request related to a problem? Please describe.
Add storybook a11y plugin
Describe the solution you'd like
Check if the components have accessibility problems

Additional context
Fix all the components with accessibility problems

Create a custom select component

Is your feature request related to a problem? Please describe.
Create a select component

Describe the solution you'd like
I would like to have a custom select ready to be used

[Example showcase]: Create a registration form that uses FormInput and the FormInputMask for showcase

Create a registration form that uses FormInput and the FormInputMask for showcase

Component generator does not add attributes to the created component

After generating a component and using it like
<Label id="input-label" for="username">Test</Label>
The attributes are getting removed in the DOM, when it should render as
<label class="style-0-2-1" id="input-label" for="username">Test</label>

the DynamicComponent should have the following syntax:

<DynamicComponent dynamicStyle={brandedStyle} tag={brandedTag} {props}>
   {props.children}
</DynamicComponent>

note that I just added {props}

I want to display an error only after I interact with the input

When I place an input on the page, when it first load I don't want to see the error message despite the input is not valid.
After I interact with the field the error message will be visible

The default styling for errors in the input needs to be removed

The error elements in the input component should not have a default style applied to them as it makes it hard to remove which pretty much every user will want to do.

# Multi-Upload - add Error Message and Complete

• error message
• complete message

ShowCase login page should use link instead button

In the show case login page we should use 2 links instead of the 2 buttons for forgotten password and sign up

<Button
      label="Forgotten Password"
      className="btn btn-sm btn-link"
      type="button"
 />

<Button
    label="Sign Up!"
    className="btn btn-sm btn-link"
    type="button"
 />

Use the command:

yarn generate-presentational-component --input component-template --output generated-components

to generate the link component (please look on storybook documentation to understand how to do)

and use the Link component generated in the Login.tsx page.

# Progress

• e.g. a progress bar

Progress

[form-date] should limit the number of digits

if I select a format yyyy/mm/dd

in the year input (and also for the other) should not allow you to have more then 4 digits

[Example showcase]: href link to storybook

Add a href link to storybook in the example app

Autocomplete - server render

in the autocomplete component it could be good to support the server fetch. At the moment it's done only on the FE side

Create a toggle component

Simple snipet:

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

Usage:

<Toggle
        checked={checked}
        onChange={e => {
          setChecked(e);
        }}
        onColor="orange"
        offColor="gray"
        borderRadius="0px"
      />

Create Sign-in component

Is your feature request related to a problem? Please describe.
In the example folder create a sign-in page.

Describe the solution you'd like
It will contain:
label: username and password generated with the script generate-presentational-component
input: username and password using the component formInput (feel free to choose the validation that they need to have)
button: to sign in. Use the button component

It will contains as well 2 link for:

1. forgot password
2. Sign-up

Let's use the material design style: https://material.io/components/

# Text area - WYSIWYG

it looks quite nice: https://quilljs.com/

[Example showcase] Side bar will create first menu that has forms as parents

The sidebar will stay on the left-hand side of the screen and will contain the list of the components available (the same way as storybook does).
The navbar will load dynamically the components from a json file so we don't need to change it all the time a new component is added.