Building UI components with Storybook

An introduction to Storybook features.

Transcript

1. BUILDING UI COMPONENTS WITH Storybook Benoît Burgener · @LeBenLeBen · Webmardi · November 5, 2019 · Liip, Lausanne
2. We used to design pages
3. But that didn’t scale
4. So we started building reusable components
5. More like “I have no idea how to use these” components
6. And so we started documenting them
7. × KSS 2011 ! × Hologram 2013 ! × Pattern Lab 2013 × Fabricator 2014 ! × Fractal 2015 × Styleguidist 2015 × …
8. /*doc --- title: Alert name: alert category: basics --- ```html_example <div class='alert'>Hello</div> ``` */ .alert { … }
9. --- notes: | These are notes written in `markdown` --- <div class="component">My Component</div>
10. {% extends "@page-layout" %} <h1>{{ home.greeting }}, {{ name }}!</h1> {% block content %} {% render '@button', { variant: 'primary' } %} {% endblock content %}
11. How about going even further?
15. THINKING IN STORIES
16. StoriesOf API import React from 'react'; import { storiesOf } from '@storybook/react'; import Button from './Button'; storiesOf('Atoms|Button', module) .add('with text', () => <Button>Hello Button</Button>) .add('with some emoji', () => ( <Button> <span role="img" aria-label="so cool"> ! " # $ </span> </Button> )); src/stories/button.stories.js
17. Component Story Format (CSF) import React from 'react'; import Button from './Button'; export default { component: Button, title: 'Atoms|Button', }; export const text = () => (<Button>Hello Button</Button>); export const emoji = () => ( <Button> <span role="img" aria-label="so cool"> ! " # $ </span> </Button> ); src/stories/button.stories.js
18. CONFIGURING STORYBOOK
19. import { configure } from '@storybook/react'; // Load our global stylesheet into stories view import '@/assets/tailwind.css'; // Load stories configure( require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module ); .storybook/config.js
20. ADDONS LET’S PIMP IT
21. import '@storybook/addon-knobs/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-viewport/register'; import '@storybook/addon-backgrounds/register'; import '@storybook/addon-a11y/register'; .storybook/addons.js
22. ADDON KNOBS
23. import React from 'react'; import { withKnobs, text, boolean } from '@storybook/addon-knobs'; import Button from './Button'; export default { component: Button, title: 'Atoms|Button', decorators: [withKnobs] }; export const text = () => ( <Button disabled={boolean('Disabled', false)}> {text('Label', 'Hello Storybook')} </Button> );
25. ADDON ACTIONS
26. import React from 'react'; import { action } from '@storybook/addon-actions'; import Button from './Button'; export default { component: Button, title: 'Atoms|Button', }; export const text = () => ( <Button onClick="action('clicked')"> Hello button </Button> );
28. ADDON VIEWPORT
30. ADDON BACKGROUNDS
32. ADDON ACCESSIBILITY
34. × Knobs × Actions × Source × Notes × Viewport × Storyshots × Backgrounds × Accessibility × Console × Links And many more community addons…
35. PRESETS
36. module.exports = [ '@storybook/addon-docs/react/preset', ... ]; .storybook/presets.js
37. THEMING
41. import { create } from '@storybook/theming'; export default create({ base: 'light', colorPrimary: '#00d5ff', colorSecondary: '#2625a5', textColor: '#2625a5', brandTitle: 'Webmardi', brandImage: require('./theme/webmardi.svg'), }); .storybook/theme.js
42. import theme from './theme'; addParameters({ options: { theme, }, }); .storybook/config.js
43. DOCS SINCE VERSION 5.2
46. <script> /** * Styled `a` or `button` element */ export default { props: { /** * The HTML tag used for the button. */ tag: { type: String, default: 'button', }, … }, … } </script> src/components/Btn.vue
49. MDX stories import { Meta } from '@storybook/addon-docs/blocks'; <Meta title="Docs|About" /> # Webmardi Web Styleguide This project is based on [Tailwind CSS](https://tailwindcss.com/). For the sake of clarity, its classes are not documented here. You can find a dedicated documentation at [tailwindcss.com/docs](https://tailwindcss.com/docs). ## Usage The styleguide is available as a npm package, you can install it by running: ... src/stories/about.stories.mdx
50. import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { Checkbox } from './Checkbox'; <Meta title="MDX|Checkbox" component={Checkbox} /> # Checkbox With `MDX` we can define a story for `Checkbox` right in the middle of our markdown documentation. <Preview> <Story name="all checkboxes"> <form> <Checkbox id="Unchecked" label="Unchecked" /> <Checkbox id="Checked" label="Checked" checked /> <Checkbox appearance="secondary" id="second" label="Secondary" checked /> </form> </Story> </Preview>
52. import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'; <Meta title="Docs|Colors" /> # Colors <ColorPalette> <ColorItem title="North Star Blue" subtitle="$primary-color" colors={['#2625a5']} /> ... </ColorPalette> src/stories/colors.stories.mdx
54. PUBLISHING
55. package.json { "scripts": { "storybook:build": "build-storybook -c .storybook -o build", "storybook:build:docs": "build-storybook -c .storybook -o build --docs", } } # Create a build npm run storybook:build # Preview the result npx http-server build
56. RECAP × Build components in isolation × Mock hard-to-reach use cases × Supercharge your workflow with addons × Match your project brand easily with theming × Generate a styleguide automatically
57. THANK YOU! × storybook.js.org × learnstorybook.com × github.com/storybookjs × twitter.com/storybookjs @LeBenLeBen