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
Top comments (2)
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.
Oooh, thanks, I have fixed playgroud !! Regards