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",
  }
}

• 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"
        }
      ]
    ]
  }

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);

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';

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;
  };

• Add package.json scripts

  "scripts": {
    "site:build": "npm run storybook:build",
    "storybook:build": "build-storybook -o _site",
    "storybook:start": "start-storybook -p 9001"
  }

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