# wuhaui

> A list of components to be used in all front applications at Wuha.

Latest version **2.8.0** (published 2018-07-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install wuhaui
pnpm add wuhaui
yarn add wuhaui
bun add wuhaui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: insecure dependencies; abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.8.0 |
| Published | 2018-07-16 |
| First published | 2018-02-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 801.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Wuha |
| Maintainers | aymericwuha |

## Links

- npm: https://www.npmjs.com/package/wuhaui
- Repository: git@gitlab.wuha.io:libraries/wuhaui
- npm.io page: https://npm.io/package/wuhaui

## Dependencies (8)

- [ramda](https://npm.io/package/ramda.md) ^0.25.0
- [moment](https://npm.io/package/moment.md) ^2.22.2
- [platform](https://npm.io/package/platform.md) ^1.3.5
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [react-intl](https://npm.io/package/react-intl.md) ^2.4.0
- [unescape-html](https://npm.io/package/unescape-html.md) ^1.1.0
- [@wuha/wuha-types](https://npm.io/package/@wuha/wuha-types.md) git+https://fvoron%40wuha.io:MRKGLFtxNGD7uTTtqs2s@gitlab.wuha.io/libraries/wuha-types.git#master
- [react-click-outside](https://npm.io/package/react-click-outside.md) ^3.0.1

## Recent versions

- 2.8.0 (latest) — 2018-07-16
- 2.7.0 — 2018-07-11
- 2.6.0 — 2018-07-03
- 2.5.0 — 2018-07-03
- 2.4.0 — 2018-06-29
- 2.3.0 — 2018-06-28
- 2.2.1 — 2018-06-18
- 2.2.0 — 2018-06-13
- 2.1.0 — 2018-06-12
- 2.0.0 — 2018-06-08
- 1.8.11 — 2018-06-08
- 1.8.10 — 2018-06-07
- 1.8.9 — 2018-06-07
- 1.8.8 — 2018-06-07
- 1.8.7 — 2018-06-06
- … 51 more at https://npm.io/package/wuhaui/versions

## README

# wuhaui

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

1. [Components](#components)
    1. [Texts](#texts)
    2. [Text-inputs](#text-inputs)
    3. [Spacings](#spacings)
    4. [Buttons](#buttons)
    5. [Containers](#containers)
    6. [Decorators](#decorators)
    7. [Images](#images)
    8. [Selectors](#selectors)
    9. [Lists](#lists)
    10. [Loaders](#loaders)
    11. [Modals](#modals)
2. [Build](#build)
3. [Deploy](#deploy)
4. [Projects](#projects)

## Components <a name="components"></a>

This library includes the following components.

### Texts <a name="texts"></a>

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

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

<WuhaTitle text="Title"/>
```

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

<WuhaTitle text="Sub title"/>
```

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

<WuhaTitle text="Description"/>
```

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

<WuhaTitle text="Sub description"/>
```

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

<WuhaTitle text="Caption"/>
```

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

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

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

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

### Text-inputs <a name="text-inputs"></a>

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

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

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

### Spacings <a name="spacings"></a>

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:

```html
<WuhaSpace type="..." />
```

Horizontal spacing:

```html
<WuhaInline type="..." />
```

### Buttons <a name="buttons"></a>

These components share the following props:

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

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

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

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

### Containers <a name="containers"></a>

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

```html
<WuhaBox>
  ...
</WuhaBox>
```

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

### Decorators <a name="decorators"></a>

Changers the `color` CSS property of its children:
```html
<WuhaColor color="red|dark-blue|dark-gray|light-gray">
  ...
</WuhaColor>
```

Draws a horizontal line with a height of `1px`:
```html
// color: light-gray
<WuhaSeparator />
```

### Images <a name="images"></a>

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


```html
<WuhaImage />
```

### Selectors <a name="selectors"></a>

`<WuhaSelect />`

`<WuhaRadioList />`

### Lists <a name="lists"></a>

#### Connectors:
`<WuhaConnectorsList />`

`<WuhaConnectorAvailable />`

`<WuhaConnectorComing />`

`<WuhaConnectorConnected />`

#### Extensions:

`<WuhaExtensionsList />`

#### Search results:

`<WuhaResultsList />`


### Loaders <a name="loaders"></a>

`<WuhaLoader />`

`<WuhaRefresh />`

### Modals <a name="modals"></a>

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

```html
<WuhaModal />
```

## Build <a name="build"></a>

* `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 <a name="deploy"></a>

Deploying a new version to NPM implies being registred as a publisher. At the moment only achauvin@wuha.io 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 <a name="projects"></a>

The projects using this library:

* `mother`
* `user-interface`
* `thesurfer`
* `connectors/fs`

---
_Source: https://npm.io/package/wuhaui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._