# @ethereansos/interfaces-ui

> This package holds the design system and the complex components and widgets.

Latest version **0.4.34** (published 2021-11-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install @ethereansos/interfaces-ui
pnpm add @ethereansos/interfaces-ui
yarn add @ethereansos/interfaces-ui
bun add @ethereansos/interfaces-ui
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.34 |
| Published | 2021-11-08 |
| First published | 2021-07-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | marcopiraccini, vasapower, davidefiorello |

## Links

- npm: https://www.npmjs.com/package/@ethereansos/interfaces-ui
- npm.io page: https://npm.io/package/@ethereansos/interfaces-ui

## Dependencies (5)

- [yup](https://npm.io/package/yup.md) ^0.32.9
- [formik](https://npm.io/package/formik.md) ^2.2.9
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [react-color](https://npm.io/package/react-color.md) 2.19.3
- [react-select](https://npm.io/package/react-select.md) ^4.3.1

## Recent versions

- 0.4.34 (latest) — 2021-11-08
- 0.4.14 — 2021-11-07
- 0.3.1 — 2021-09-15
- 0.1.1 — 2021-07-31
- 0.1.0 — 2021-07-26

## README

# Ethos UI

This package holds the design system and the complex components and widgets.

It should grow with all the components needed by the application.


## Components

The available sample components are:

- [ConnectWidget](./src/ConnectWidget/README.md)

## Styling

## Styling

All the components are styled with [postcss-modules](https://github.com/css-modules/postcss-modules).

Let's take the `Button` component as an example.

The stylesheet is in the `button.modules.scss` SASS file.
The name of all stylesheet files needs to be `COMPONENT.modules.scss`, where `COMPONENT` is the name of the component.
Every stylesheet should have a `.root` selector for the component, for example:

```scss
.root {
  font-size: 15px;
  font-weight: bold;

  &.primary {
    background-color: $color-primary;
  }

  &.secondary {
    background-color: $color-secondary;
  }
}
```

To use this stylesheet, you need to import it and reference it as follows:

```jsx
import classNames from 'classnames'
import style from './button.module.scss'

const Button = ({ text, onClick, variant, className }) => (
  <button className={classNames(style['root'], style[variant], className)}>
    Hello!
  </button>
)
```

To reference a stylesheet class from the component use `style[CLASS]`.
The postcss-modules build will convert it into a class named `'dfo-ds_COMPONENT_CLASS`, as defined in the `rollup.config.js` file.
So, for our button component, the name will be `dfo-ds_button_root`.

The `classNames` function imported by the [classnames](https://www.npmjs.com/package/classnames) module converts the arguments into a string of space-separated classes.
The arguments can be of different types: see the module documentation for more information.

## Storybook

Every component includes the stories for [Storybook](https://storybook.js.org/).

You can build Storybook with:

```shell script
npm run build-storybook
```

You can launch Storybook with:

```shell script
npm run storybook
```

## Build

This package uses [rollup](https://rollupjs.org/guide/en/) to create the bundle.

To build the package, you can use the `lerna` scripts in the root project (`build` and `build-dev`), as stated in the root project documentation.

If you prefer to build only this package, just run:

```shell script
npm run build
```

to simply build the package, or

```shell script
npm run build:dev
```

to build and keep watching for changes.

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