Flow UI
Getting started
Install package
yarn add [PACKAGE_NAME_HERE]Add Theme Provider
import {FlowThemeProvider} from [PACKAGE_NAME_HERE]
const App = () => <FlowThemeProvider>{/* ... */}</FlowThemeProvider>You can read more about smashing theme provider 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.
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 - 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.
Typography
- 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.
Functional
-
Head - Manage page
<head>tag content. -
Title - Manage page
<title>tag content. - css - Global css styles - normalize.css and reset.
Development
- Install packages
yarn - Run
yarn build - Run
yarn watchfor hot reload and open a new terminal window in the same folder and runyarn storybook