@storybook/web-components 7.4.0-alpha.0 → 7.4.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "7.4.0-alpha.0",
+  "version": "7.4.0-alpha.1",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",
@@ -41,23 +41,24 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "template/**/*",
+    "template/cli/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
     "check": "../../../scripts/prepare/check.ts",
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.4.0-alpha.0",
-    "@storybook/core-client": "7.4.0-alpha.0",
-    "@storybook/docs-tools": "7.4.0-alpha.0",
+    "@storybook/client-logger": "7.4.0-alpha.1",
+    "@storybook/core-client": "7.4.0-alpha.1",
+    "@storybook/docs-tools": "7.4.0-alpha.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.4.0-alpha.0",
-    "@storybook/preview-api": "7.4.0-alpha.0",
-    "@storybook/types": "7.4.0-alpha.0",
+    "@storybook/manager-api": "7.4.0-alpha.1",
+    "@storybook/preview-api": "7.4.0-alpha.1",
+    "@storybook/types": "7.4.0-alpha.1",
     "tiny-invariant": "^1.3.1",
     "ts-dedent": "^2.0.0"
   },

package/src/docs/__testfixtures__/lit-element-demo-card/input.js

@@ -1,199 +0,0 @@
-import { global } from '@storybook/global';
-
-import { LitElement, html, css } from 'lit-element';
-
-const { CustomEvent } = global;
-
-const demoWcCardStyle = css`
-  :host {
-    display: block;
-    position: relative;
-    width: 250px;
-    height: 200px;
-    border-radius: 10px;
-    transform-style: preserve-3d;
-    transition: all 0.8s ease;
-  }
-
-  .header {
-    font-weight: bold;
-    font-size: var(--demo-wc-card-header-font-size, 16px);
-    text-align: center;
-  }
-
-  .content {
-    padding: 20px 10px 0 10px;
-    flex-grow: 1;
-  }
-
-  .footer {
-    display: flex;
-  }
-
-  dl {
-    margin: 0;
-    text-align: left;
-  }
-
-  dd {
-    margin-left: 15px;
-  }
-
-  button {
-    border-radius: 15px;
-    width: 30px;
-    height: 30px;
-    background: #fff;
-    border: 1px solid #ccc;
-    color: #000;
-    font-size: 21px;
-    line-height: 27px;
-    font-weight: bold;
-    cursor: pointer;
-    margin: 5px;
-  }
-
-  .note {
-    flex-grow: 1;
-    color: #666;
-    font-size: 16px;
-    font-weight: bold;
-    text-align: left;
-    padding-top: 15px;
-  }
-
-  :host([back-side]) {
-    transform: rotateY(180deg);
-  }
-
-  #front,
-  #back {
-    position: absolute;
-    width: 250px;
-    box-sizing: border-box;
-    box-shadow: #ccc 3px 3px 2px 1px;
-    padding: 10px;
-    display: flex;
-    flex-flow: column;
-    top: 0;
-    left: 0;
-    height: 100%;
-    border-radius: 10px;
-    backface-visibility: hidden;
-    overflow: hidden;
-  }
-
-  #front {
-    background: linear-gradient(141deg, #aaa 25%, #eee 40%, #ddd 55%);
-    color: var(--demo-wc-card-front-color, #000);
-  }
-
-  #back {
-    background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%);
-    color: var(--demo-wc-card-back-color, #fff);
-    text-align: center;
-    transform: rotateY(180deg) translate3d(0px, 0, 1px);
-  }
-
-  #back .note {
-    color: #fff;
-  }
-`;
-
-/**
- * This is a container looking like a card with a back and front side you can switch
- *
- * @slot - This is an unnamed slot (the default slot)
- * @fires side-changed - Fires whenever it switches between front/back
- * @cssprop --demo-wc-card-header-font-size - Header font size
- * @cssprop --demo-wc-card-front-color - Font color for front
- * @cssprop --demo-wc-card-back-color - Font color for back
- * @csspart front - Front of the card
- * @csspart back - Back of the card
- */
-export class DemoWcCard extends LitElement {
-  static get properties() {
-    return {
-      backSide: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'back-side',
-      },
-      header: { type: String },
-      rows: { type: Object },
-    };
-  }
-
-  static get styles() {
-    return demoWcCardStyle;
-  }
-
-  constructor() {
-    super();
-
-    /**
-     * Indicates that the back of the card is shown
-     */
-    this.backSide = false;
-
-    /**
-     * Header message
-     */
-    this.header = 'Your Message';
-
-    /**
-     * Data rows
-     */
-    this.rows = [];
-  }
-
-  toggle() {
-    this.backSide = !this.backSide;
-  }
-
-  render() {
-    return html`
-      <div id="front" part="front">
-        <div class="header">${this.header}</div>
-        <div class="content">
-          <slot></slot>
-        </div>
-        <div class="footer">
-          <div class="note">A</div>
-          <button @click=${this.toggle}>></button>
-        </div>
-      </div>
-      <div id="back" part="back">
-        <div class="header">${this.header}</div>
-
-        <div class="content">
-          ${this.rows.length === 0
-            ? html``
-            : html`
-                <dl>
-                  ${this.rows.map(
-                    (row) => html`
-                      <dt>${row.header}</dt>
-                      <dd>${row.value}</dd>
-                    `
-                  )}
-                </dl>
-              `}
-        </div>
-        <div class="footer">
-          <div class="note">B</div>
-          <button @click=${this.toggle}>></button>
-        </div>
-      </div>
-    `;
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has('backSide') && changedProperties.get('backSide') !== undefined) {
-      this.dispatchEvent(new CustomEvent('side-changed'));
-    }
-  }
-}
-
-// eslint-disable-next-line no-undef
-customElements.define('input', DemoWcCard);

package/src/docs/__testfixtures__/lit-html-welcome/input.js

@@ -1,61 +0,0 @@
-import { html } from 'lit';
-
-export const Welcome = () => html`
-  <div class="main">
-    <h1>Welcome to Storybook for Web Components</h1>
-    <p>This is a UI component dev environment for your plain HTML snippets.</p>
-    <p>
-      We've added some basic stories inside the <code class="code">stories</code> directory.
-      <br />
-      A story is a single state of one or more UI components. You can have as many stories as you
-      want.
-      <br />
-      (Basically a story is like a visual test case.)
-    </p>
-    <p>
-      See these sample
-      <a class="link" href="#" data-sb-kind="Demo Card" data-sb-story="Front">stories</a>
-    </p>
-    <p>
-      Just like that, you can add your own snippets as stories.
-      <br />
-      You can also edit those snippets and see changes right away.
-      <br />
-    </p>
-    <p>
-      Usually we create stories with smaller UI components in the app.<br />
-      Have a look at the
-      <a class="link" href="https://storybook.js.org/basics/writing-stories" target="_blank">
-        Writing Stories
-      </a>
-      section in our documentation.
-    </p>
-  </div>
-
-  <style>
-    .main {
-      padding: 15px;
-      line-height: 1.4;
-      font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
-      background-color: #ffffff;
-    }
-
-    .logo {
-      width: 256px;
-      margin: 15px;
-    }
-
-    .code {
-      font-size: 15px;
-      font-weight: 600;
-      padding: 2px 5px;
-      border: 1px solid #eae9e9;
-      border-radius: 4px;
-      background-color: #f3f2f2;
-      color: #3a3a3a;
-    }
-  </style>
-`;
-
-// eslint-disable-next-line no-undef
-customElements.define('input', Welcome);

package/src/typings.d.ts

@@ -1,5 +0,0 @@
-/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */
-declare var STORYBOOK_ENV: 'web-components';
-declare var __STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__: any;
-declare var __STORYBOOK_CUSTOM_ELEMENTS__: any;
-declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

package/template/components/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}

package/template/stories/custom-elements-experimental.json

@@ -1,95 +0,0 @@
-{
-  "version": "experimental",
-  "tags": [
-    {
-      "name": "demo-wc-card",
-      "path": "./demo-wc-card.js",
-      "description": "This is a container looking like a card with a back and front side you can switch",
-      "attributes": [
-        {
-          "name": "back-side",
-          "description": "Indicates that the back of the card is shown",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "header",
-          "description": "Header message",
-          "type": "string",
-          "default": "\"Your Message\""
-        },
-        {
-          "name": "rows",
-          "description": "Data rows",
-          "type": "object",
-          "default": "[]"
-        }
-      ],
-      "properties": [
-        {
-          "name": "backSide",
-          "attribute": "back-side",
-          "description": "Indicates that the back of the card is shown",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "header",
-          "attribute": "header",
-          "description": "Header message",
-          "type": "string",
-          "default": "\"Your Message\""
-        },
-        {
-          "name": "rows",
-          "attribute": "rows",
-          "description": "Data rows",
-          "type": "object",
-          "default": "[]"
-        }
-      ],
-      "events": [
-        {
-          "name": "side-changed",
-          "description": "Fires whenever it switches between front/back"
-        }
-      ],
-      "methods": [
-        {
-          "name": "testMethod",
-          "description": "Some web component frameworks like Stencil generate extra docs for methods. These are also displayed in the ArgsTable."
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "This is an unnamed slot (the default slot)"
-        }
-      ],
-      "cssProperties": [
-        {
-          "name": "--demo-wc-card-header-font-size",
-          "description": "Header font size"
-        },
-        {
-          "name": "--demo-wc-card-front-color",
-          "description": "Font color for front"
-        },
-        {
-          "name": "--demo-wc-card-back-color",
-          "description": "Font color for back"
-        }
-      ],
-      "cssParts": [
-        {
-          "name": "front",
-          "description": "Front of the card"
-        },
-        {
-          "name": "back",
-          "description": "Back of the card"
-        }
-      ]
-    }
-  ]
-}

package/template/stories/custom-elements.json

@@ -1,162 +0,0 @@
-{
-  "schemaVersion": "1.0.0",
-  "readme": "",
-  "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "demo-wc-card/index.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "demo-wc-card",
-          "declaration": {
-            "name": "DemoWcCard",
-            "module": "demo-wc-card/DemoWcCard.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "demo-wc-card/DemoWcCard.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "This is a container looking like a card with a back and front side you can switch",
-          "name": "DemoWcCard",
-          "cssProperties": [
-            {
-              "description": "Header font size",
-              "name": "--demo-wc-card-header-font-size"
-            },
-            {
-              "description": "Font color for front",
-              "name": "--demo-wc-card-front-color"
-            },
-            {
-              "description": "Font color for back",
-              "name": "--demo-wc-card-back-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "Front of the card",
-              "name": "front"
-            },
-            {
-              "description": "Back of the card",
-              "name": "back"
-            }
-          ],
-          "slots": [
-            {
-              "name": "prefix",
-              "description": "Label prefix"
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "toggle"
-            },
-            {
-              "kind": "field",
-              "name": "backSide",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Indicates that the back of the card is shown",
-              "default": "false",
-              "privacy": "public",
-              "attribute": "back-side",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "header",
-              "type": {
-                "text": "string"
-              },
-              "description": "Header message",
-              "default": "'Your Message'",
-              "privacy": "public",
-              "attribute": "header"
-            },
-            {
-              "kind": "field",
-              "name": "rows",
-              "type": {
-                "text": "array"
-              },
-              "description": "Data rows",
-              "default": "[]",
-              "privacy": "public",
-              "attribute": "rows"
-            }
-          ],
-          "events": [
-            {
-              "name": "side-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fires whenever it switches between front/back"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "back-side",
-              "fieldName": "backSide"
-            },
-            {
-              "name": "header",
-              "fieldName": "header"
-            },
-            {
-              "name": "rows",
-              "fieldName": "rows"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "demo-wc-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DemoWcCard",
-          "declaration": {
-            "name": "DemoWcCard",
-            "module": "demo-wc-card/DemoWcCard.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "demo-wc-card/demoWcCardStyle.css.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "demoWcCardStyle",
-          "default": "css`\n  :host {\n    display: block;\n    position: relative;\n    width: 250px;\n    height: 200px;\n    border-radius: 10px;\n    transform-style: preserve-3d;\n    transition: all 0.8s ease;\n  }\n\n  .header {\n    font-weight: bold;\n    font-size: var(--demo-wc-card-header-font-size, 16px);\n    text-align: center;\n  }\n\n  .content {\n    padding: 20px 10px 0 10px;\n    flex-grow: 1;\n  }\n\n  .footer {\n    display: flex;\n  }\n\n  dl {\n    margin: 0;\n    text-align: left;\n  }\n\n  dd {\n    margin-left: 15px;\n  }\n\n  button {\n    border-radius: 15px;\n    width: 30px;\n    height: 30px;\n    background: #fff;\n    border: 1px solid #ccc;\n    color: #000;\n    font-size: 21px;\n    line-height: 27px;\n    font-weight: bold;\n    cursor: pointer;\n    margin: 5px;\n  }\n\n  .note {\n    flex-grow: 1;\n    color: #666;\n    font-size: 16px;\n    font-weight: bold;\n    text-align: left;\n    padding-top: 15px;\n  }\n\n  :host([back-side]) {\n    transform: rotateY(180deg);\n  }\n\n  #front,\n  #back {\n    position: absolute;\n    width: 250px;\n    box-sizing: border-box;\n    box-shadow: #ccc 3px 3px 2px 1px;\n    padding: 10px;\n    display: flex;\n    flex-flow: column;\n    top: 0;\n    left: 0;\n    height: 100%;\n    border-radius: 10px;\n    backface-visibility: hidden;\n    overflow: hidden;\n  }\n\n  #front {\n    background: linear-gradient(141deg, #aaa 25%, #eee 40%, #ddd 55%);\n    color: var(--demo-wc-card-front-color, #000);\n  }\n\n  #back {\n    background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%);\n    color: var(--demo-wc-card-back-color, #fff);\n    text-align: center;\n    transform: rotateY(180deg) translate3d(0px, 0, 1px);\n  }\n\n  #back .note {\n    color: #fff;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "demoWcCardStyle",
-          "declaration": {
-            "name": "demoWcCardStyle",
-            "module": "demo-wc-card/demoWcCardStyle.css.js"
-          }
-        }
-      ]
-    }
-  ]
-}