DEV Community

Cover image for StoryBook and Lit Element
Manu
Manu

Posted on • Edited on

StoryBook and Lit Element

WebComponents and StoryBook

Currently, javascript component development is in full swing. There are dozens of libraries for the development of these components React, Vue, Stencil, Svelte, Lit Element, ... in this case I will take this last one (Google library for the development of web components) as the basis for a small tutorial how to use the StoryBook demo tool.

LitElement makes it easy to define Web Components – ideal for sharing elements across your organization or building a UI design system.
Use your components anywhere you use HTML: in your main document, a CMS, Markdown, or a javascript framework like React or Vue.LitElement’s simple, familiar development model makes it easier than ever to build Web Components.

StoryBook is a free source tool for developing isolated user interfaces. It has become a standard when it comes to performing visual demonstrations of components that can work "alone" in a dynamic demonstration that can test components in real-time before using them as a dependency, or make visual catalogues that have large collections of visible components and thus make its use and documentation easier. Demonstrate all the necessary tools to list the properties, observe the events, generate documentation, ... it has a multitude of plugins that call plugins, making their possibilities great. Here are some of the most interesting:

  • Knobs: Interact with component inputs dynamically in the SotryBook UI interface
  • Actions: Get UI feedback when an action is performed on an interactive element
  • Source: View a story´s source code to see how it works and paste into your app
  • Docs: Document component usage and properties in MarkDown
  • Viewport: Build responsive components by adjusting StoryBook´s viewport size and orientation
  • StoryShots: Take a code snapshot of every story automatically with Jest (only if you use Jest framework ...)
  • Background: Switch backgrounds to view components in different settings
  • Accessibility: Test component compliance with web accessibility standards
  • Console: Show console output like logs, errors, and warnings in the Storybook
  • Links: Link stories together to build demos and prototypes with your UI components

And much more from the community ... Themes, Story2Sketch, styled-components theme, GraphCMS, Copy code block, ..

Lit Element and StoryBook case

Install storyBook dependency

  • Install storybooks open wc dependency - @open-wc/storybook

package.json

{
  "name": "@bbva-web-components/lit-playground",
  "version": "1.0.0-rc.1",
  "description": "",
  "keywords": [],
  "main": "lit-playground.js",
  "scripts": {
    "start:storybook": "start-storybook -p 9001"
  },
  "dependencies": {
    "@bbva-web-components/bbva-foundations-styles": "^1.0.0",
    "@cells-components/cells-lit-helpers": "^1.0.0",
    "lit-element": "^2.0.0",
    "@open-wc/storybook": "^0.2.8"
  },
  "devDependencies": {
    "@cells/cells-component-core": "^1.0.0",
  }
}

Enter fullscreen mode Exit fullscreen mode
  • Create .storybook configuration folder with the following files

.babelrc

  {
    "plugins": [
      "@babel/plugin-syntax-dynamic-import",
      "@babel/plugin-proposal-object-rest-spread"
    ],
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "entry"
        }
      ]
    ]
  }
Enter fullscreen mode Exit fullscreen mode

config.js

  import { configure } from '@storybook/polymer';
  import { setOptions } from '@storybook/addon-options';

  setOptions({
    hierarchyRootSeparator: /\|/,
  });

  const req = require.context('../stories', true, /\.stories\.js$/);
  function loadStories() {
    req.keys().forEach(filename => req(filename));
  }

  configure(loadStories, module);

Enter fullscreen mode Exit fullscreen mode

addons.js (plugins)

  import '@storybook/addon-storysource/register';
  import '@storybook/addon-actions/register';
  import '@storybook/addon-backgrounds/register';
  import '@storybook/addon-notes/register';
  // disable until https://github.com/storybooks/storybook/issues/4321 is resolved
  // import '@storybook/addon-knobs/register';
  import '@storybook/addon-links/register';
  import '@storybook/addon-viewport/register';
  import '@storybook/addon-options/register';

Enter fullscreen mode Exit fullscreen mode

webpack.config.js

  const path = require('path');

  module.exports = (storybookBaseConfig, configType, defaultConfig) => {
    defaultConfig.resolve.modules.push('bower_components');

    defaultConfig.module.rules.push({
      test: [/\.stories\.js$/, /index\.js$/],
      loaders: [require.resolve('@storybook/addon-storysource/loader')],
      enforce: 'pre',
    });

    // Searches through all exclude rules and replaces them if they exclude node_modules
    // Replacement will exclude node_modules with the exeption of listed below packages
    for (let i = 0; i < defaultConfig.module.rules.length; i += 1) {
      const rule = defaultConfig.module.rules[i];
      if (rule.exclude) {
        for (let j = 0; j < rule.exclude.length; j += 1) {
          if (rule.exclude[j] === path.resolve('node_modules')) {
            rule.exclude[j] = modulePath => {
              return (
                /node_modules/.test(modulePath) &&
                !/node_modules\/lit-html/.test(modulePath) &&
                !/node_modules\/lit-element/.test(modulePath) &&
                !/node_modules\/@open-wc/.test(modulePath)
              );
            };
          }
        }
      }
    }

    return defaultConfig;
  };

Enter fullscreen mode Exit fullscreen mode
  • Add package.json scripts
  "scripts": {
    "site:build": "npm run storybook:build",
    "storybook:build": "build-storybook -o _site",
    "storybook:start": "start-storybook -p 9001"
  }
Enter fullscreen mode Exit fullscreen mode

Create custom histories

  • Create stories folder

  • Add 'Default’ storybook case

    • lit-playground.stories.js (example)
    /* eslint-disable import/no-extraneous-dependencies */
    import { storiesOf, html } from '@open-wc/storybook';
    import '../lit-playground.js';
    
    storiesOf('lit-playground', module)
        .add('Default', () => html`    
          <lit-playground>
                </lit-playground>
      `).add('Other case', () => html`
           <lit-playground bank="Compass" logo="BBVA USA flavour ...">
                 </lit-playground>
    `);
    
  • npm run storybook:start


Official npm package documentation

Top comments (2)

Collapse
 
dcfdev profile image
dcfdev

Really like this post, and I realize its just a typo, but 'playgroud' vs 'playground' threw me off. What about the contents of lit-playground.js? I get an error on startup that it cant be found.
Thanks again for the great post.

Collapse
 
imacnu profile image
Manu

Oooh, thanks, I have fixed playgroud !! Regards