fix: update storybook/linting; adjust story labels, eslint ignores

.gitignore

@@ -8,8 +8,8 @@
 .DS_Store
 
 ## npm
-/node_modules/
-/npm-debug.log
+node_modules/
+npm-debug.log
 
 # we do prefer yarn.lock so we do not want npms version of it
 /package-lock.json

.storybook/.babelrc

@@ -7,8 +7,9 @@
     [
       "@babel/preset-env",
       {
-        "useBuiltIns": "entry"
-      },
+        "useBuiltIns": "entry",
+        "corejs": "2",
+      }
     ]
   ]
 }

.storybook/addons.js

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

.storybook/config.js

@@ -1,9 +1,5 @@
 import { configure } from '@storybook/polymer';
-import { setOptions } from '@storybook/addon-options';
-
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+import '@storybook/addon-console';
 
 const req = require.context('../stories', true, /\.stories\.js$/);
 function loadStories() {

.storybook/webpack.config.js

@@ -1,41 +1,8 @@
-const path = require('path');
+const defaultConfig = require('@open-wc/demoing-storybook/default-storybook-webpack-config.js');
 
-module.exports = (storybookBaseConfig, configType, defaultConfig) => {
-  defaultConfig.module.rules.push({
-    test: [/\.stories\.js$/, /index\.js$/],
-    loaders: [require.resolve('@storybook/addon-storysource/loader')],
-    enforce: 'pre',
+module.exports = ({ config }) => {
+  return defaultConfig({
+    config,
+    transpilePackages: ['lit-html', 'lit-element', '@open-wc', 'autosize'],
   });
-
-  const transpilePackages = ['lit-html', 'lit-element', '@open-wc', 'autosize'];
-
-  // this is a separate config for only those packages
-  // the main storybook will use the .babelrc which is needed so storybook itself works in IE
-  defaultConfig.module.rules.push({
-    test: new RegExp(`node_modules(\\\/|\\\\)(${transpilePackages.join('|')})(.*)\\.js$`),
-    use: {
-      loader: 'babel-loader',
-      options: {
-        plugins: [
-          '@babel/plugin-syntax-dynamic-import',
-          '@babel/plugin-proposal-object-rest-spread',
-        ],
-        presets: [
-          [
-            '@babel/preset-env',
-            {
-              useBuiltIns: 'entry',
-            },
-          ],
-        ],
-        babelrc: false,
-      },
-    },
-  });
-
-  defaultConfig.devServer = {
-    headers: { 'X-UA-Compatible': 'IE=Edge' },
-  };
-
-  return defaultConfig;
 };

package.json

@@ -8,10 +8,10 @@
   "devDependencies": {
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.0",
-    "@open-wc/eslint-config": "^0.4.0",
+    "@open-wc/demoing-storybook": "^0.2.0",
+    "@open-wc/eslint-config": "^0.4.5",
     "@open-wc/prettier-config": "^0.1.0",
-    "@open-wc/storybook": "^0.1.5",
-    "@open-wc/testing": "^0.11.1",
+    "@open-wc/testing": "^0.11.5",
     "@open-wc/testing-karma": "^1.0.0",
     "@open-wc/testing-karma-bs": "^1.0.0",
     "@webcomponents/webcomponentsjs": "^2.2.5",

packages/ajax/package.json

@@ -34,7 +34,7 @@
     "@lion/core": "^0.1.2"
   },
   "devDependencies": {
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1",
     "sinon": "^7.2.2"
   }

packages/ajax/src/AjaxClass.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { axios } from '@bundled-es-modules/axios';
 import { LionSingleton } from '@lion/core';
 import {

packages/ajax/src/interceptors.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { axios } from '@bundled-es-modules/axios';
 
 // FIXME: lang must be dynamic, fallback to html tag lang attribute or use the user-provided one

packages/ajax/stories/index.stories.js

@@ -1,10 +1,9 @@
-import { storiesOf, html, action } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 
 import { ajax } from '../src/ajax.js';
 import { AjaxClass } from '../src/AjaxClass.js';
 
-/* eslint-disable indent */
-storiesOf('Ajax system|ajax', module)
+storiesOf('Ajax system|Ajax', module)
   .addParameters({ options: { selectedPanel: 'storybook/actions/actions-panel' } })
   .add(
     'Get',
@@ -14,10 +13,10 @@ storiesOf('Ajax system|ajax', module)
           ajax
             .get('./dummy-jsons/peter.json')
             .then(response => {
-              action('request-response')(response.data);
+              console.log(response.data);
             })
             .catch(error => {
-              action('request-error')(error);
+              console.log(error);
             });
         }}
       >
@@ -38,10 +37,10 @@ storiesOf('Ajax system|ajax', module)
           myAjax
             .get('./dummy-jsons/peter.json')
             .then(response => {
-              action('request-response')(response.data);
+              console.log(response.data);
             })
             .catch(error => {
-              action('request-error')(error);
+              console.log(error);
             });
         }}
       >
@@ -58,19 +57,19 @@ storiesOf('Ajax system|ajax', module)
           myAjax
             .get('./dummy-jsons/peter.json')
             .then(response => {
-              action('Request 1:')(response.data);
+              console.log(response.data);
             })
             .catch(error => {
-              action('Request 1: I got cancelled:')(error.message);
+              console.log(error.message);
             });
 
           myAjax
             .get('./dummy-jsons/max.json')
             .then(response => {
-              action('Request 2:')(response.data);
+              console.log(response.data);
             })
             .catch(error => {
-              action('Request 2: I got cancelled:')(error.message);
+              console.log(error.message);
             });
         }}
       >

packages/ajax/test/AjaxClass.interceptors.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/ajax/test/AjaxClass.languages.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/ajax/test/AjaxClass.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/ajax/test/AjaxClass.transformers.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/ajax/test/ajax.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/button/package.json

@@ -36,7 +36,7 @@
     "@lion/form": "^0.1.2",
     "@lion/icon": "^0.1.2",
     "@lion/input": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1",
     "@polymer/iron-test-helpers": "^3.0.1",
     "sinon": "^7.2.2"

packages/button/src/LionButton.js

@@ -1,8 +1,6 @@
-/* eslint-disable no-underscore-dangle */
 import { css, html, DelegateMixin, SlotMixin } from '@lion/core';
 import { LionLitElement } from '@lion/core/src/LionLitElement.js';
 
-// eslint-disable-next-line no-unused-vars
 export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
   static get properties() {
     return {

packages/button/stories/index.stories.js

@@ -1,13 +1,12 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { storiesOf, html, action } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 import { bug12 } from '@lion/icon/stories/icons/bugs-collection';
 import '@lion/icon/lion-icon.js';
 import '@lion/form/lion-form.js';
 import '@lion/input/lion-input.js';
 
 import '../lion-button.js';
 
-storiesOf('Buttons|<lion-button>', module)
+storiesOf('Buttons|Button', module)
   .add(
     'Used on its own',
     () => html`
@@ -39,8 +38,7 @@ storiesOf('Buttons|<lion-button>', module)
           <lion-input name="foo" label="Foo" .modelValue=${'bar'}></lion-input>
           <lion-button
             type="submit"
-            @click=${() =>
-              action('serializeGroup')(document.querySelector('#form').serializeGroup())}
+            @click=${() => console.log(document.querySelector('#form').serializeGroup())}
             >Submit</lion-button
           >
         </form></lion-form

packages/button/test/lion-button.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
 import { pressEnter, pressSpace } from '@polymer/iron-test-helpers/mock-interactions.js';

packages/checkbox-group/package.json

@@ -37,7 +37,7 @@
     "@lion/checkbox": "^0.1.2",
     "@lion/form": "^0.1.2",
     "@lion/localize": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1",
     "sinon": "^7.2.2"
   }

packages/checkbox-group/src/LionCheckboxGroup.js

@@ -1,7 +1,5 @@
 import { LionFieldset } from '@lion/fieldset';
 
-/* eslint-disable no-underscore-dangle */
-
 export class LionCheckboxGroup extends LionFieldset {
   constructor() {
     super();

packages/checkbox-group/stories/index.stories.js

@@ -1,10 +1,10 @@
-import { storiesOf, html, action } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 
 import '../lion-checkbox-group.js';
 import '@lion/checkbox/lion-checkbox.js';
 import '@lion/form/lion-form.js';
 
-storiesOf('Forms|<lion-checkbox-group>', module)
+storiesOf('Forms|Checkbox Group', module)
   .add(
     'Default',
     () => html`
@@ -92,7 +92,7 @@ storiesOf('Forms|<lion-checkbox-group>', module)
     const submit = () => {
       const form = document.querySelector('#form');
       if (form.errorState === false) {
-        action('serializeGroup')(form.serializeGroup());
+        console.log(form.serializeGroup());
       }
     };
     return html`

packages/checkbox-group/test/lion-checkbox-group.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-underscore-dangle, no-unused-expressions */
 import { expect, html, fixture, triggerFocusFor, nextFrame } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/checkbox/package.json

@@ -35,7 +35,7 @@
     "@lion/input": "^0.1.2"
   },
   "devDependencies": {
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/choice-input/package.json

@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@lion/input": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/choice-input/src/ChoiceInputMixin.js

@@ -1,8 +1,9 @@
+/* eslint-disable class-methods-use-this */
+
 import { html, css, nothing } from '@lion/core';
 import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
 import { FormatMixin } from '@lion/field';
 
-/* eslint-disable no-underscore-dangle, class-methods-use-this */
 export const ChoiceInputMixin = superclass =>
   // eslint-disable-next-line
   class ChoiceInputMixin extends FormatMixin(ObserverMixin(superclass)) {

packages/choice-input/test/ChoiceInputMixin.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-expressions */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from '@lion/core';
 

packages/core/package.json

@@ -33,7 +33,7 @@
     "lit-html": "1.0.0"
   },
   "devDependencies": {
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1",
     "sinon": "^7.2.2"
   }

packages/core/src/CssClassMixin.js

@@ -1,7 +1,5 @@
 import { dedupeMixin } from './dedupeMixin.js';
 
-/* eslint-disable no-underscore-dangle */
-
 /**
  * # CssClassMixin
  * `CssClassMixin` is a base mixin for the use of css in lion-components.

packages/core/src/DelegateMixin.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-underscore-dangle, class-methods-use-this */
+/* eslint-disable class-methods-use-this */
 
 import { dedupeMixin } from './dedupeMixin.js';
 

packages/core/src/DomHelpersMixin.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { dedupeMixin } from './dedupeMixin.js';
 
 /**

packages/core/src/ElementMixin.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle, class-methods-use-this */
 /* global ShadyCSS */
 import { dedupeMixin } from './dedupeMixin.js';
 import { DomHelpersMixin } from './DomHelpersMixin.js';

packages/core/src/EventMixin.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-underscore-dangle, class-methods-use-this */
+/* eslint-disable class-methods-use-this */
 
 import { dedupeMixin } from './dedupeMixin.js';
 

packages/core/src/LionSingleton.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 /**
  * 'LionSingleton' provides an instance of the given class via .getInstance(foo, bar) and will
  * return the same instance if already created. It can reset its instance so a new one will be

packages/core/src/ObserverMixin.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { dedupeMixin } from './dedupeMixin.js';
 
 /**