emerald-ui v3.4.0

emerald-ui

Visual component library.

                    .------------------------.
                    |    Thanks for using    |
     _         _    |       EMERALD UI       |
^~^~/o\_______/ \   /------------------------'
         _______/  /
        |_____
__  __________\
  | |_
  |___\

Check out live examples in Storybook or go to the docs

Installation

Notes:

1. Emerald UI has two peer dependencies: react and react-bootstrap. You must have those installed in order for Emerald-UI to work completely. Certain components don't depend on react-bootstrap so you might use them without having to install it. But it's recommended to install react-bootstrap nevertheless.

2. Material Icons are used by components like Icon. You must import them, e.g. in your head tag: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Run npm i emerald-ui

To import the styles to your app:

import 'emerald-ui/lib/styles.css';

Append tm, ceb or ec to apply the respective theme:

import 'emerald-ui/lib/styles-tm.css';

Note: By importing styles.css the ec theme will be applied.

To import components with a single import:

import { ComponentName1, ComponentName2 } from 'emerald-ui';

To import individual components:

import ComponentName from 'emerald-ui/lib/ComponentName';

For developers and collaborators

Installation

After cloning the repo, run npm i to install all the dependencies.

Important: If you get an error while installing the dependencies, run npm install -f -g node-sass and then remove the entry from package.json. This will force the installation of node-sass.

Usage tips

For testing the components visually we use Storybook. There you can see the components in action. For the optimal development performance we recommend running npm start in a Terminal tab and npm t in another. This way we activate the storybook server and the tests runner, so when a change is made you can get Storybook reloaded and see in real time whether the tests are green.

• npm start will run Storybook.
• npm t will run the tests with a watch. npm t -- --coverage will run the tests with a coverage report (both in console and in HTML). This will not run with a watch. If you want tu run the tests with coverage and watch, run npm t -- --coverage --watch.
• npm run build will build the JS and CSS files, run the linter and will copy the svg and images to the lib folder.

Collaboration

Be sure to run npm run build to check that everything is green, which is that no tests are broken as well as the linter, before commiting and pushing changes to master. Under no circumstances should a broken build exist in the repo.