WEB-84: (-) 'npm run storybook'

.storybook/.babelrc

@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-object-rest-spread"
+  ],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "corejs": "2",
+      }
+    ]
+  ]
+}

.storybook/addons.js

@@ -0,0 +1,6 @@
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-viewport/register';

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/polymer';
+import '@storybook/addon-console';
+
+const req = require.context('../docs', true, /\.stories\.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,5 @@
+const defaultConfig = require('@open-wc/demoing-storybook/default-storybook-webpack-config.js');
+
+module.exports = ({ config }) => {
+  return defaultConfig({ config, transpilePackages: ['lit-html', 'lit-element', '@open-wc'] });
+};

docs/index.stories.js

@@ -0,0 +1,53 @@
+import { storiesOf, html, withKnobs, withClassPropertiesKnobs } from '@open-wc/demoing-storybook';
+
+// import {BULibSearch, LibHours, Locoso, BULibFooter} from '../src/index';
+
+// bulib-search
+import '../src/search/bulib-search';
+import BULibSearch from '../src/search/search';
+
+// bulib-hours
+import '../src/libhours/bulib-hours';
+import LibHours from '../src/libhours/libhours';
+
+// bulib-libsel
+import '../src/libsel/bulib-libsel';
+
+// bulib-locoso
+import '../src/locoso/bulib-locoso';
+import Locoso from '../src/locoso/locoso';
+
+// bulib-footer
+import '../src/footer/bulib-footer';
+import BULibFooter from '../src/footer/footer';
+
+const main_html  = html`
+  <div id="main-content">
+    <h2><code>bulib-hours</code></h2>
+    <bulib-hours></bulib-hours>
+    <hr />
+    
+    <h2><code>bulib-locoso</code></h2>
+    <bulib-locoso></bulib-locoso>
+    <hr />
+    
+    <h2><code>bulib-search</code></h2>
+    <bulib-search></bulib-search>
+  </div>
+
+  <br /><hr /><br />
+
+  <bulib-footer></bulib-footer>
+`;
+
+storiesOf('bulib-wc', module)
+  .addDecorator(withKnobs)
+  .add('ensemble', () => main_html)
+  // .add('bulib-dropdown', () => withClassPropertiesKnobs(BULibDropdown))
+  .add('bulib-search', () => withClassPropertiesKnobs(BULibSearch))
+  .add('bulib-hours',  () => withClassPropertiesKnobs(LibHours))
+  .add('bulib-locoso', () => withClassPropertiesKnobs(Locoso))
+  .add('bulib-footer', () => withClassPropertiesKnobs(BULibFooter))
+  // .add('bulib-header', () => withClassPropertiesKnobs(BULibHeader))
+;
+

src/locoso/locoso.js

@@ -51,6 +51,7 @@ export default class Locoso extends LitElement {
       `;
     }
     return html`
+      <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/bulib/bulib-wc@latest/assets/css/common.css">
       <style>
         /* layout and responsiveness */
         .locoso-left { flex: 1; }