npm package: @flowplatform/ui
Description: > **[View Storybook](https://github.com/eyedea-io/flow-ui/deployments?environment=storybook#activity-log)**
Latest version: 0.32.3

# 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`