# @flowplatform/ui

> > **[View Storybook](https://github.com/eyedea-io/flow-ui/deployments?environment=storybook#activity-log)**

Latest version **0.32.3** (published 2020-03-14) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @flowplatform/ui
pnpm add @flowplatform/ui
yarn add @flowplatform/ui
bun add @flowplatform/ui
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.32.3 |
| Published | 2020-03-14 |
| First published | 2019-11-28 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 1015.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | amroz123, aparacki, hzub, idered, mkolakowska, mzbiejczuk |

## Links

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

## Dependencies (4)

- [yup](https://npm.io/package/yup.md) 0.27.0
- [rc-table](https://npm.io/package/rc-table.md) 7.0.0-alpha.20
- [deepmerge](https://npm.io/package/deepmerge.md) 4.2.2
- [@types/yup](https://npm.io/package/@types/yup.md) 0.26.26

## Recent versions

- 0.32.3 (latest) — 2020-03-14
- 0.5.1-alpha.0 (canary) — 2019-12-06
- 0.32.2 — 2020-03-13
- 0.32.1 — 2020-03-13
- 0.32.0 — 2020-03-12
- 0.31.0 — 2020-03-10
- 0.30.0 — 2020-03-09
- 0.29.0 — 2020-03-05
- 0.28.0 — 2020-03-05
- 0.27.0 — 2020-03-04
- 0.26.4 — 2020-03-02
- 0.26.3 — 2020-02-27
- 0.26.2 — 2020-02-25
- 0.26.1 — 2020-02-24
- 0.26.0 — 2020-02-24
- … 41 more at https://npm.io/package/@flowplatform/ui/versions

## README

# Flow UI

> **[View Storybook](https://github.com/eyedea-io/flow-ui/deployments?environment=storybook#activity-log)**

## Getting started

**Install package**

```sh
yarn add [PACKAGE_NAME_HERE]
```

**Add Theme Provider**

```tsx
import {FlowThemeProvider} from [PACKAGE_NAME_HERE]

const App = () => <FlowThemeProvider>{/* ... */}</FlowThemeProvider>
```

You can read more about [smashing theme provider](https://github.com/eyedea-io/smashing-ui/tree/master/packages/theme) to learn how to customize theme.

## Basic usage

This is a simple example that uses `@smashing/form` and Flow components to create simple validated form.

```tsx
import {FlowSelectMenu} from [PACKAGE_NAME_HERE]
import {useForm} from '@smashing/form'

const MyForm = () => {
  const validationSchema = yup.object({
    fruit: yup
      .string()
      .transform(val => (val === 'Banana' ? '' : val))
      .required('No banana!')
  })

  const {Form} = useForm({
    initialValues: {
      fruit: 'Apple'
    },
    validationSchema,
    validateOnChange: true
  })

  return (
    <section>
      <p>Select "Banana" to trigger the error</p>
      <Form>
        <FlowSelectMenu
          options={options}
          name="fruit"
          label="This is a fruit field"
        />
      </Form>
    </section>
  )
}
```

## Components

### Core

- **[Alert](https://github.com/eyedea-io/smashing-ui/tree/master/packages/alert)** - Component used to give feedback to the user about an action or state.
- **[Avatar](https://github.com/eyedea-io/smashing-ui/tree/master/packages/avatar)** - Component used to represent users.
- **[Button](https://github.com/eyedea-io/smashing-ui/tree/master/packages/button)** - Common button component
- **[Dialog](https://github.com/eyedea-io/smashing-ui/tree/master/packages/dialog)** - Component is used to show content on top of an overlay.
- **[FormField](https://github.com/eyedea-io/smashing-ui/tree/master/packages/form-field)** - Component used for to add label, description, hint and error handling to input.
- **[Menu](https://github.com/eyedea-io/smashing-ui/tree/master/packages/menu)** - Multiple components that help create menus.
- **[Popover](https://github.com/eyedea-io/smashing-ui/tree/master/packages/popover)** - Component displays floating content in relation to a target.
- **[Select](https://github.com/eyedea-io/smashing-ui/tree/master/packages/select)** - Simple select component being an overlay to a default system one.
- **[TextInput](https://github.com/eyedea-io/smashing-ui/tree/master/packages/text-input)** - Text input component used in forms.
- **[Tooltip](https://github.com/eyedea-io/smashing-ui/tree/master/packages/tooltip)** - Component used to describe icon buttons.

### Typography

- **[Text](https://github.com/eyedea-io/smashing-ui/tree/master/packages/typography)** - Inline text component.
- **[Strong](https://github.com/eyedea-io/smashing-ui/tree/master/packages/typography)** - Bold variant of Text component.
- **[Paragraph](https://github.com/eyedea-io/smashing-ui/tree/master/packages/typography)** - Component used for bigger chunks of texts.
- **[Heading](https://github.com/eyedea-io/smashing-ui/tree/master/packages/typography)** - Component used for article and section titles.
- **[Label](https://github.com/eyedea-io/smashing-ui/tree/master/packages/typography)** - Component used to describe form inputs.

### Functional

- **[Head](https://github.com/eyedea-io/smashing-ui/tree/master/packages/head)** - Manage page `<head>` tag content.
- **[Title](https://github.com/eyedea-io/smashing-ui/tree/master/packages/title)** - Manage page `<title>` tag content.
- **[css](https://github.com/eyedea-io/smashing-ui/tree/master/packages/css)** - Global css styles - normalize.css and reset.

## Development

1. Install packages `yarn`
2. Run `yarn build`
3. Run `yarn watch` for hot reload and open a new terminal window in the same folder and run `yarn storybook`

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