# @meniga/ui

The UI library is a set of small UI components that make developing new apps quick and easy. The styling is based on Suit-CSS and uses a package called suit-cx to help with that.

## Demo

We use Storybook to develop and demo our components in isolation. 

* [Latest alpha release](http://developer.meniga.com/storybook)

## Run storybook

In order to test and demo your UI components, you can run storybook.

If you haven't already installed and built the @meniga packages, go to the root folder of mono-cosmic and run:

```bash
yarn 
yarn prebuild
yarn build
```

Then go back to meniga-ui (cd packages/meniga-ui) and start storybook

```bash
yarn dev
```

Your default browser should open up on localhost:6006

If you run into problems, try to clean the yarn cache and install dependencies again from the mono-cosmic root folder

```bash
yarn cache clean
yarn install
```

then go into meniga-ui again and run `yarn dev`.

## How to use the library

All components can be imported as named imports from '@meniga/ui'. 

### Example:

```
import { Button, Form, FormGroup, FormInput, FormSubmit } from '@meniga/ui'

<div>
	<Form onSubmit={ (valid, formData) => onSubmitForm(valid, formData) }>
		<FormGroup>
			<FormInput name="test" />
		</FormGroup>
		<FormGroup>
			<FormSubmit label="Submit" />
			<Button onClick={ () => onCancelForm() }>
		</FormGroup>
	</Form>
</div>

```



