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
   

   View Slide

2. We used to design pages
   

   View Slide

3. But that didn’t scale
   

   View Slide

4. So we started building reusable components
   

   View Slide

5. More like
   “I have no idea how to use these”
   components
   

   View Slide

6. And so we started documenting them
   

   View Slide

7. × KSS 2011
   !
   × Hologram 2013
   !
   × Pattern Lab 2013
   × Fabricator 2014
   !
   × Fractal 2015
   × Styleguidist 2015
   × …
   

   View Slide

8. /*doc
   ---
   title: Alert
   name: alert
   category: basics
   ---
   ```html_example
   Hello
   ```
   */
   .alert {
   …
   }
   

   View Slide

9. ---
   notes: |
   These are notes written in `markdown`
   ---
   My Component
   

   View Slide

10. {% extends "@page-layout" %}
    {{ home.greeting }}, {{ name }}!
    {% block content %}
    {% render '@button', { variant: 'primary' } %}
    {% endblock content %}
    

    View Slide

11. How about going even further?
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. THINKING IN STORIES
    

    View Slide

16. StoriesOf API
    import React from 'react';
    import { storiesOf } from '@storybook/react';
    import Button from './Button';
    storiesOf('Atoms|Button', module)
    .add('with text', () => Hello Button)
    .add('with some emoji', () => (
    
    
    ! " # $
    
    
    ));
    src/stories/button.stories.js
    

    View Slide

17. Component Story Format (CSF)
    import React from 'react';
    import Button from './Button';
    export default {
    component: Button,
    title: 'Atoms|Button',
    };
    export const text = () => (Hello Button);
    export const emoji = () => (
    
    
    ! " # $
    
    
    );
    src/stories/button.stories.js
    

    View Slide

18. CONFIGURING STORYBOOK
    

    View Slide

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
    

    View Slide

20. ADDONS
    LET’S PIMP IT
    

    View Slide

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
    

    View Slide

22. ADDON
    KNOBS
    

    View Slide

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 = () => (
    
    {text('Label', 'Hello Storybook')}
    
    );
    

    View Slide

24. View Slide

25. ADDON
    ACTIONS
    

    View Slide

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 = () => (
    
    Hello button
    
    );
    

    View Slide

27. View Slide

28. ADDON
    VIEWPORT
    

    View Slide

29. View Slide

30. ADDON
    BACKGROUNDS
    

    View Slide

31. View Slide

32. ADDON
    ACCESSIBILITY
    

    View Slide

33. View Slide

34. × Knobs
    × Actions
    × Source
    × Notes
    × Viewport
    × Storyshots
    × Backgrounds
    × Accessibility
    × Console
    × Links
    And many more community addons…
    

    View Slide

35. PRESETS
    

    View Slide

36. module.exports = [
    '@storybook/addon-docs/react/preset',
    ...
    ];
    .storybook/presets.js
    

    View Slide

37. THEMING
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

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
    

    View Slide

42. import theme from './theme';
    addParameters({
    options: {
    theme,
    },
    });
    .storybook/config.js
    

    View Slide

43. DOCS
    SINCE VERSION 5.2
    

    View Slide

44. View Slide

45. View Slide

46. <br/>/**<br/>* Styled `a` or `button` element<br/>*/<br/>export default {<br/>props: {<br/>/**<br/>* The HTML tag used for the button.<br/>*/<br/>tag: {<br/>type: String,<br/>default: 'button',<br/>},<br/>…<br/>},<br/>…<br/>}<br/>
    src/components/Btn.vue
    

    View Slide

47. View Slide

48. View Slide

49. MDX stories
    import { Meta } from '@storybook/addon-docs/blocks';
    
    # 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
    

    View Slide

50. import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
    import { Checkbox } from './Checkbox';
    
    # Checkbox
    With `MDX` we can define a story for `Checkbox` right in the middle of our
    markdown documentation.
    
    
    
    
    
    
    
    
    
    

    View Slide

51. View Slide

52. import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
    
    # Colors
    
    title="North Star Blue"
    subtitle="$primary-color"
    colors={['#2625a5']}
    />
    ...
    
    src/stories/colors.stories.mdx
    

    View Slide

53. View Slide

54. PUBLISHING
    

    View Slide

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
    

    View Slide

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
    

    View Slide

57. THANK YOU!
    × storybook.js.org
    × learnstorybook.com
    × github.com/storybookjs
    × twitter.com/storybookjs
    @LeBenLeBen
    

    View Slide