# UI Components
[![npm (scoped)](https://img.shields.io/npm/v/@propellerads/ui-components?style=plastic)](https://www.npmjs.com/package/@propellerads/ui-components)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

1. `yarn`
2. `yarn lerna`
3. `yarn storybook`

## docker
1. `docker/yarn.sh install`
2. `docker/yarn.sh lerna`
3. `docker/yarn.sh storybook`
4. open http://localhost:6006

## Docs
* [How to create your own components](./CREATE_COMPONENT.md)
* [How to use Lerna](https://github.com/lerna/lerna)

### Packages list
* [AdFormat](https://www.npmjs.com/package/@propellerads/ad-format)
* [Alert](https://www.npmjs.com/package/@propellerads/alert)
* [ArrowButton](https://www.npmjs.com/package/@propellerads/arrow-button)
* [Badge](https://www.npmjs.com/package/@propellerads/badge)
* [Button](https://www.npmjs.com/package/@propellerads/button)
* [Card](https://www.npmjs.com/package/@propellerads/card)
* [CheckboxCardGroup](https://www.npmjs.com/package/@propellerads/checkbox-card-group)
* [CodeViewer](https://www.npmjs.com/package/@propellerads/code-viewer)
* [Collapser](https://www.npmjs.com/package/@propellerads/collapser)
* [ColorPicker](https://www.npmjs.com/package/@propellerads/color-picker)
* [CookieMessage](https://www.npmjs.com/package/@propellerads/cookie-message)
* [Countdown](https://www.npmjs.com/package/@propellerads/countdown)
* [Currency](https://www.npmjs.com/package/@propellerads/currency)
* [DatePicker](https://www.npmjs.com/package/@propellerads/date-picker)
* [EditableField](https://www.npmjs.com/package/@propellerads/editable-field)
* [EmptyState](https://www.npmjs.com/package/@propellerads/empty-state)
* [ErrorLabel](https://www.npmjs.com/package/@propellerads/error-label)
* [FormattedNumber](https://www.npmjs.com/package/@propellerads/formatted-number)
* [Header](https://www.npmjs.com/package/@propellerads/header)
* [Icon](https://www.npmjs.com/package/@propellerads/icon)
* [InputCheckbox](https://www.npmjs.com/package/@propellerads/input-checkbox)
* [InputNumber](https://www.npmjs.com/package/@propellerads/input-number)
* [InputPassword](https://www.npmjs.com/package/@propellerads/input-password)
* [InputText](https://www.npmjs.com/package/@propellerads/input-text)
* [Label](https://www.npmjs.com/package/@propellerads/label)
* [MoneyDashboard](https://www.npmjs.com/package/@propellerads/money-dashboard)
* [PageHeader](https://www.npmjs.com/package/@propellerads/page-header)
* [PasswordValidator](https://www.npmjs.com/package/@propellerads/password-validator)
* [Popup](https://www.npmjs.com/package/@propellerads/popup)
* [RadioCardGroup](https://www.npmjs.com/package/@propellerads/radio-card-group)
* [RadioGroup](https://www.npmjs.com/package/@propellerads/radio-group)
* [Select](https://www.npmjs.com/package/@propellerads/select)
* [Slider](https://www.npmjs.com/package/@propellerads/slider)
* [SmartHint](https://www.npmjs.com/package/@propellerads/smart-hint)
* [SmartTooltip](https://www.npmjs.com/package/@propellerads/smart-tooltip)
* [Spinner](https://www.npmjs.com/package/@propellerads/spinner)
* [SuccessLabel](https://www.npmjs.com/package/@propellerads/success-label)
* [Switch](https://www.npmjs.com/package/@propellerads/switch)
* [Table](https://www.npmjs.com/package/@propellerads/table)
* [Tabs](https://www.npmjs.com/package/@propellerads/tabs)
* [Textarea](https://www.npmjs.com/package/@propellerads/textarea)
* [TagsInput](https://www.npmjs.com/package/@propellerads/tags-input)
* [TextMaxLength](https://www.npmjs.com/package/@propellerads/text-max-lenght)
* [Title](https://www.npmjs.com/package/@propellerads/title)
* [UI Components](https://www.npmjs.com/package/@propellerads/ui-components)
* [style-variables](https://www.npmjs.com/package/@propellerads/stylevariables)