> **[View Storybook](https://github.com/eyedea-io/flow-ui/deployments?environment=storybook#activity-log)**
Install package
``sh`
yarn add [PACKAGE_NAME_HERE]
Add Theme Provider
`tsx
import {FlowThemeProvider} from [PACKAGE_NAME_HERE]
const App = () =>
`
You can read more about smashing theme provider to learn how to customize theme.
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 ( Select "Banana" to trigger the error
)
}
`
- Alert - Component used to give feedback to the user about an action or state.
- Avatar - Component used to represent users.
- Button - Common button component
- Dialog - Component is used to show content on top of an overlay.
- FormField - Component used for to add label, description, hint and error handling to input.
- Menu - Multiple components that help create menus.
- Popover - Component displays floating content in relation to a target.
- Select - Simple select component being an overlay to a default system one.
- TextInput - Text input component used in forms.
- Tooltip - Component used to describe icon buttons.
- Text - Inline text component.
- Strong - Bold variant of Text component.
- Paragraph - Component used for bigger chunks of texts.
- Heading - Component used for article and section titles.
- Label - Component used to describe form inputs.
- Head - Manage page
tag content.
- Title - Manage page tag content.
- 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`