build(storybook): set up docs addon

It generates a nice "Docs" tab with a list of all the element's
attributes & properties, as well as code usage examples.

Author: urish

.gitignore

@@ -5,3 +5,4 @@ dist
 build
 *.log
 storybook-static
+custom-elements.json

.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  addons: ['@storybook/addon-docs'],
+};

.storybook/config.js renamed to .storybook/preview.js

@@ -1,4 +1,6 @@
 import { configure } from '@storybook/web-components';
+import { setCustomElements } from '@storybook/web-components';
+import customElements from '../custom-elements.json';
 
 // automatically import all files ending in *.stories.ts
 const req = require.context('../src', true, /\.stories\.ts$/);
@@ -10,3 +12,6 @@ if (module.hot) {
     window.location.reload();
   });
 }
+
+// Configure Storybook Docs Addon for Web Components
+setCustomElements(customElements);

README.md

@@ -30,10 +30,10 @@ can interact with the elements and see your changes live, similar to
 The easiest way to create a new element is to run the generator:
 
 ```
-npm run new-element --name my-element
+npm run new-element --name demo
 ```
 
-This will generate a new element called `my-element`. It will also
+This will generate a new element called `demo`. It will also
 create a storybook file, so you will be able to see the new element
 in storybook (see the "Local development" section above).
 

_templates/element/new/element.stories.ts.t

@@ -7,6 +7,7 @@ import { html } from 'lit-html';
 import './<%= name %>-element';
 
 storiesOf('<%= h.changeCase.title(h.className(name)) %>', module)
+  .addParameters({ component: 'wokwi-<%= name %>' })
   .addDecorator(withKnobs)
   .add(
     'Default',