Building UI components with Storybook

Building UI components with Storybook

An introduction to Storybook features.

6a5681378ef043b9050ae1a38d689313?s=128

Benoît Burgener

November 03, 2019
Tweet

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?

  12. None
  13. None
  14. None
  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> );
  24. None
  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> );
  27. None
  28. ADDON VIEWPORT

  29. None
  30. ADDON BACKGROUNDS

  31. None
  32. ADDON ACCESSIBILITY

  33. None
  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

  38. None
  39. None
  40. None
  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

  44. None
  45. None
  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
  47. None
  48. None
  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>
  51. None
  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
  53. None
  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