@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

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:

yarn 
yarn prebuild
yarn build

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

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

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>