wuhaui

This library aims to unify a maximum number of React components to use among all front applications.

1. Components
   1. Texts
   2. Text-inputs
   3. Spacings
   4. Buttons
   5. Containers
   6. Decorators
   7. Images
   8. Selectors
   9. Lists
   10. Loaders
   11. Modals
2. Build
3. Deploy
4. Projects

Components

This library includes the following components.

Texts

These components take the following props:

• children: its content
• text: its content
• title: its title on hover
• color: one of red|dark-blue|dark-gray|light-gray except stated otherwise
• style: additional style

// default color: dark-blue
<WuhaTitle>Title</WuhaTitle>

<WuhaTitle text="Title"/>

// default color: dark-blue
<WuhaSubTitle>Sub title</WuhaSubTitle>

<WuhaTitle text="Sub title"/>

// default color: dark-gray
<WuhaDescription>Description</WuhaDescription>

<WuhaTitle text="Description"/>

// default color: dark-gray
<WuhaSubDescription>Sub description</WuhaSubDescription>

<WuhaTitle text="Sub description"/>

// default color: dark-gray
<WuhaCaption>Caption</WuhaCaption>

<WuhaTitle text="Caption"/>

// default color: red
<WuhaLink color="red|light-gray">Underlined link</WuhaLink>

<WuhaTitle color="red|light-gray" text="Underlined link"/>

// color: dark-blue
<WuhaTextLocked>Locked but selectable</WuhaTextLocked>

// color: dark-gray (uses WuhaCaption)
<WuhaError text="There was an error" />

Text-inputs

These components share the following props:

• name: the name that will be passed in the callback (ie: myCustomField)
• value: the value to populate the component with
• hint: a hint to be displayed to the user
• onChange: a callback when the field updates

// color: dark-blue
<WuhaTextInput type="text|password" value="First Name" />

// color: dark-blue
<WuhaTextArea value="I ate an ice cream yesterday" />

Spacings

I highly recommend you to read this article https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62 to better understand the use of the following components.

These two use the same types for spaces which are:

• thin: 4px
• xxs: 8px
• xs: 16px
• s: 24px
• m: 32px
• l: 48px
• xl: 64px
• xxl: 96px
• giant: 128px

Vertical spacing:

<WuhaSpace type="..." />

Horizontal spacing:

<WuhaInline type="..." />

Buttons

These components share the following props:

• type: either button (normal use) or submit (form use)
• onClick: a callback when the component is clicked

// default type: button
// default color: red
<WuhaButton color="red|white" text=""/>

// default type: button
<WuhaImageButton>
  ...
</WuhaImageButton>

<WuhaImageButton 
  src="path/to/my/image" 
  alt="My fabulous image" 
  width={100} 
  height={35} 
/>

Containers

The following components accept only a children prop to be passed:

<WuhaBox>
  ...
</WuhaBox>

<WuhaCard style={myCustomStyleClass}>
  ...
</WuhaBox>

Decorators

Changers the color CSS property of its children:

<WuhaColor color="red|dark-blue|dark-gray|light-gray">
  ...
</WuhaColor>

Draws a horizontal line with a height of 1px:

// color: light-gray
<WuhaSeparator />

Images

This components accepts the following props:

• src: a path to the image
• alt: an alt description
• height: a height
• width: a width
• style: an additional style

<WuhaImage />

Selectors

<WuhaSelect />

<WuhaRadioList />

Lists

Connectors:

<WuhaConnectorsList />

<WuhaConnectorAvailable />

<WuhaConnectorComing />

<WuhaConnectorConnected />

Extensions:

<WuhaExtensionsList />

Search results:

<WuhaResultsList />

Loaders

<WuhaLoader />

<WuhaRefresh />

Modals

This components expects the DOM to be populated with a <div id="modal"></div>. Check this link for more informations https://reactjs.org/docs/portals.html

<WuhaModal />

Build

• npm run build to build the final package

It will execute the following commands:

• npm run clean to clean the dist folder
• npm run lint to run the linter on the code
• npm run test to run the tests
• npm run webpack to bundle the project with webpack

To run the linter on the code and fix some errors and warnings (use with caution) you can use npm run lint:fix

Deploy

Deploying a new version to NPM implies being registred as a publisher. At the moment only [e-mail] is.

Once you have access to NPM as a publisher you will need to bump the version of the package:

npm version [major|minor|patch] -m "Upgrading to %s to ..."

Don't forget to push the changes to git:

git push

Once done, to publish to package on the NPM registry:

• npm run deploy to build and publish the final package

It will execute the following commands:

• npm run build to build the final package
• npm publish . to publish the package on NPM

Projects

The projects using this library:

• mother
• user-interface
• thesurfer
• connectors/fs