@storybook/web-components 7.0.0-alpha.45 → 7.0.0-alpha.47

package/dist/index.js

@@ -1,4 +1,4 @@
-var M=Object.create;var d=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var x=(e,o)=>{for(var r in o)d(e,r,{get:o[r],enumerable:!0})},l=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of b(o))!R.call(e,i)&&i!==r&&d(e,i,{get:()=>o[i],enumerable:!(n=A(o,i))||n.enumerable});return e};var f=(e,o,r)=>(r=e!=null?M(h(e)):{},l(o||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e)),E=e=>l(d({},"__esModule",{value:!0}),e);var V={};x(V,{configure:()=>v,forceReRender:()=>N,getCustomElements:()=>Y,isValidComponent:()=>D,isValidMetaData:()=>H,raw:()=>W,setCustomElements:()=>K,setCustomElementsManifest:()=>U,storiesOf:()=>k});module.exports=E(V);var S=f(require("global"));var c=f(require("global")),{window:L}=c.default;L.STORYBOOK_ENV="web-components";var C=require("@storybook/core-client");var u=f(require("global")),_=require("ts-dedent"),w=require("lit-html"),y=require("lit-html/directive-helpers.js"),a=require("@storybook/preview-web"),{Node:F}=u.default;function O({storyFn:e,kind:o,name:r,showMain:n,showError:i,forceRemount:m},t){let s=e();if(n(),(0,y.isTemplateResult)(s)){(m||!t.querySelector('[id="root-inner"]'))&&(t.innerHTML='<div id="root-inner"></div>');let T=t.querySelector('[id="root-inner"]');(0,w.render)(s,T),(0,a.simulatePageLoad)(t)}else if(typeof s=="string")t.innerHTML=s,(0,a.simulatePageLoad)(t);else if(s instanceof F){if(t.firstChild===s&&!m)return;t.innerHTML="",t.appendChild(s),(0,a.simulateDOMContentLoaded)()}else i({title:`Expecting an HTML snippet or DOM node from the story: "${r}" of "${o}".`,description:_.dedent`
+var M=Object.create;var d=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var x=(e,o)=>{for(var r in o)d(e,r,{get:o[r],enumerable:!0})},l=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of b(o))!R.call(e,i)&&i!==r&&d(e,i,{get:()=>o[i],enumerable:!(n=A(o,i))||n.enumerable});return e};var f=(e,o,r)=>(r=e!=null?M(h(e)):{},l(o||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e)),E=e=>l(d({},"__esModule",{value:!0}),e);var V={};x(V,{configure:()=>v,forceReRender:()=>N,getCustomElements:()=>Y,isValidComponent:()=>D,isValidMetaData:()=>H,raw:()=>W,setCustomElements:()=>K,setCustomElementsManifest:()=>U,storiesOf:()=>k});module.exports=E(V);var S=f(require("global"));var c=f(require("global")),{window:L}=c.default;L.STORYBOOK_ENV="web-components";var C=require("@storybook/core-client");var u=f(require("global")),y=require("ts-dedent"),_=require("lit-html"),w=require("lit-html/directive-helpers.js"),a=require("@storybook/preview-web"),{Node:F}=u.default;function O({storyFn:e,kind:o,name:r,showMain:n,showError:i,forceRemount:m},t){let s=e();if(n(),(0,w.isTemplateResult)(s)){(m||!t.querySelector('[id="root-inner"]'))&&(t.innerHTML='<div id="root-inner"></div>');let T=t.querySelector('[id="root-inner"]');(0,_.render)(s,T),(0,a.simulatePageLoad)(t)}else if(typeof s=="string")t.innerHTML=s,(0,a.simulatePageLoad)(t);else if(s instanceof F){if(t.firstChild===s&&!m)return;t.innerHTML="",t.appendChild(s),(0,a.simulateDOMContentLoaded)()}else i({title:`Expecting an HTML snippet or DOM node from the story: "${r}" of "${o}".`,description:y.dedent`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
       `})}var g="web-components",p=(0,C.start)(O),k=(e,o)=>p.clientApi.storiesOf(e,o).addParameters({framework:g}),v=(...e)=>p.configure(g,...e),N=p.forceReRender,W=p.clientApi.raw;function D(e){if(!e)return!1;if(typeof e=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function H(e){if(!e)return!1;if(e.tags&&Array.isArray(e.tags)||e.modules&&Array.isArray(e.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "7.0.0-alpha.45",
+  "version": "7.0.0-alpha.47",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit-html",
@@ -43,6 +43,7 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
+    "template/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
@@ -52,14 +53,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.45",
-    "@storybook/api": "7.0.0-alpha.45",
-    "@storybook/client-logger": "7.0.0-alpha.45",
-    "@storybook/core-client": "7.0.0-alpha.45",
-    "@storybook/docs-tools": "7.0.0-alpha.45",
-    "@storybook/preview-web": "7.0.0-alpha.45",
-    "@storybook/store": "7.0.0-alpha.45",
-    "@storybook/types": "7.0.0-alpha.45",
+    "@storybook/addons": "7.0.0-alpha.47",
+    "@storybook/api": "7.0.0-alpha.47",
+    "@storybook/client-logger": "7.0.0-alpha.47",
+    "@storybook/core-client": "7.0.0-alpha.47",
+    "@storybook/docs-tools": "7.0.0-alpha.47",
+    "@storybook/preview-web": "7.0.0-alpha.47",
+    "@storybook/store": "7.0.0-alpha.47",
+    "@storybook/types": "7.0.0-alpha.47",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -86,5 +87,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532"
+  "gitHead": "1c706a4a778831e012343c905f86225fa71491a7"
 }

package/template/cli/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/extensions": "off"
+  }
+}

package/template/cli/js/Button.js

@@ -0,0 +1,21 @@
+import { html } from 'lit-html';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import './button.css';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  return html`
+    <button
+      type="button"
+      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
+      style=${styleMap({ backgroundColor })}
+      @click=${onClick}
+    >
+      ${label}
+    </button>
+  `;
+};

package/template/cli/js/Button.stories.js

@@ -0,0 +1,44 @@
+import { Button } from './Button';
+
+// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Button',
+  // More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
+  render: (args) => Button(args),
+  // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    onClick: { action: 'onClick' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/template/cli/js/Header.js

@@ -0,0 +1,45 @@
+import { html } from 'lit-html';
+
+import { Button } from './Button';
+import './header.css';
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html`
+  <header>
+    <div class="wrapper">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        ${user
+          ? Button({ size: 'small', onClick: onLogout, label: 'Log out' })
+          : html`${Button({
+              size: 'small',
+              onClick: onLogin,
+              label: 'Log in',
+            })}
+            ${Button({
+              primary: true,
+              size: 'small',
+              onClick: onCreateAccount,
+              label: 'Sign up',
+            })}`}
+      </div>
+    </div>
+  </header>
+`;

package/template/cli/js/Header.stories.js

@@ -0,0 +1,16 @@
+import { Header } from './Header';
+
+export default {
+  title: 'Example/Header',
+  render: (args) => Header(args),
+};
+
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut = {};

package/template/cli/js/Page.js

@@ -0,0 +1,61 @@
+import { html } from 'lit-html';
+import { Header } from './Header';
+import './page.css';
+
+export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`
+  <article>
+    ${Header({
+      user,
+      onLogin,
+      onLogout,
+      onCreateAccount,
+    })}
+
+    <section>
+      <h2>Pages in Storybook</h2>
+      <p>
+        We recommend building UIs with a
+        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+          <strong>component-driven</strong> </a
+        >process starting with atomic components and ending with pages.
+      </p>
+      <p>
+        Render pages with mock data. This makes it easy to build and review page states without
+        needing to navigate to them in your app. Here are some handy patterns for managing page data
+        in Storybook:
+      </p>
+      <ul>
+        <li>
+          Use a higher-level connected component. Storybook helps you compose such data from the
+          "args" of child component stories
+        </li>
+        <li>
+          Assemble data in the page component from your services. You can mock these services out
+          using Storybook.
+        </li>
+      </ul>
+      <p>
+        Get a guided tutorial on component-driven development at
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+          Storybook tutorials
+        </a>
+        . Read more in the
+        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
+        .
+      </p>
+      <div class="tip-wrapper">
+        <span class="tip">Tip</span> Adjust the width of the canvas with the
+        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+              id="a"
+              fill="#999"
+            />
+          </g>
+        </svg>
+        Viewports addon in the toolbar
+      </div>
+    </section>
+  </article>
+`;

package/template/cli/js/Page.stories.js

@@ -0,0 +1,20 @@
+import { Page } from './Page';
+import * as HeaderStories from './Header.stories';
+
+export default {
+  title: 'Example/Page',
+  render: (args) => Page(args),
+};
+
+export const LoggedIn = {
+  args: {
+    // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
+    ...HeaderStories.LoggedIn.args,
+  },
+};
+
+export const LoggedOut = {
+  args: {
+    ...HeaderStories.LoggedOut.args,
+  },
+};

package/template/cli/ts/Button.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { ButtonProps } from './Button';
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
+const meta: Meta<ButtonProps> = {
+  title: 'Example/Button',
+  render: (args) => Button(args),
+  // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    onClick: { action: 'onClick' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ButtonProps>;
+
+// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/template/cli/ts/Button.ts

@@ -0,0 +1,43 @@
+import { html } from 'lit-html';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import './button.css';
+
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor = null, size, label, onClick }: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  return html`
+    <button
+      type="button"
+      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
+      style=${styleMap({ backgroundColor })}
+      @click=${onClick}
+    >
+      ${label}
+    </button>
+  `;
+};

package/template/cli/ts/Header.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { HeaderProps } from './Header';
+import { Header } from './Header';
+
+const meta: Meta<HeaderProps> = {
+  title: 'Example/Header',
+  render: (args) => Header(args),
+};
+
+export default meta;
+type Story = StoryObj<HeaderProps>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jonh Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};

package/template/cli/ts/Header.ts

@@ -0,0 +1,56 @@
+import { html } from 'lit-html';
+
+import { Button } from './Button';
+import './header.css';
+
+type User = {
+  name: string;
+};
+
+export interface HeaderProps {
+  user?: User;
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
+  <header>
+    <div class="wrapper">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        ${user
+          ? Button({ size: 'small', onClick: onLogout, label: 'Log out' })
+          : html`${Button({
+              size: 'small',
+              onClick: onLogin,
+              label: 'Log in',
+            })}
+            ${Button({
+              primary: true,
+              size: 'small',
+              onClick: onCreateAccount,
+              label: 'Sign up',
+            })}`}
+      </div>
+    </div>
+  </header>
+`;

package/template/cli/ts/Page.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import type { PageProps } from './Page';
+import { Page } from './Page';
+import * as HeaderStories from './Header.stories';
+
+const meta: Meta<PageProps> = {
+  title: 'Example/Page',
+  render: (args) => Page(args),
+};
+
+export default meta;
+type Story = StoryObj<PageProps>;
+
+export const LoggedIn: Story = {
+  args: {
+    // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
+    ...HeaderStories.LoggedIn.args,
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    ...HeaderStories.LoggedOut.args,
+  },
+};

package/template/cli/ts/Page.ts

@@ -0,0 +1,72 @@
+import { html } from 'lit-html';
+import { Header } from './Header';
+import './page.css';
+
+type User = {
+  name: string;
+};
+
+export interface PageProps {
+  user?: User;
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+}
+
+export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => html`
+  <article>
+    ${Header({
+      user,
+      onLogin,
+      onLogout,
+      onCreateAccount,
+    })}
+
+    <section>
+      <h2>Pages in Storybook</h2>
+      <p>
+        We recommend building UIs with a
+        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+          <strong>component-driven</strong> </a
+        >process starting with atomic components and ending with pages.
+      </p>
+      <p>
+        Render pages with mock data. This makes it easy to build and review page states without
+        needing to navigate to them in your app. Here are some handy patterns for managing page data
+        in Storybook:
+      </p>
+      <ul>
+        <li>
+          Use a higher-level connected component. Storybook helps you compose such data from the
+          "args" of child component stories
+        </li>
+        <li>
+          Assemble data in the page component from your services. You can mock these services out
+          using Storybook.
+        </li>
+      </ul>
+      <p>
+        Get a guided tutorial on component-driven development at
+        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+          Storybook tutorials
+        </a>
+        . Read more in the
+        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
+        .
+      </p>
+      <div class="tip-wrapper">
+        <span class="tip">Tip</span> Adjust the width of the canvas with the
+        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+              id="a"
+              fill="#999"
+            />
+          </g>
+        </svg>
+        Viewports addon in the toolbar
+      </div>
+    </section>
+  </article>
+`;

package/template/components/Button.js

@@ -0,0 +1,71 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import globalThis from 'global';
+import { html, LitElement } from 'lit';
+
+const { CustomEvent, customElements } = globalThis;
+
+/**
+ * @attr {string} label - Label of the button
+ * @attr {string} size - Size of the button, can be "small", "medium" or "large"; default is "medium".
+ * @attr {string} backgroundColor - Color of the button's background
+ *
+ * @cssprop [--sb-primary-color=#1ea7fd] - Controls the color of bar
+ *
+ * @prop {boolean} primary - Set button in primary mode
+ *
+ * @event {CustomEvent} sb-button:click - Custom event send when the button is clicked
+ *
+ * @summary This is a simple Storybook Button
+ *
+ * @tag sb-button
+ */
+export class SbButton extends LitElement {
+  // Currently TS decorators are not reflected so we have to use static `properties` function
+  // https://github.com/Polymer/lit-html/issues/1476
+  static get properties() {
+    return {
+      label: { type: String, reflect: true },
+      primary: { type: Boolean },
+      size: { type: String },
+      backgroundColor: { type: String, attribute: 'background-color' },
+    };
+  }
+
+  constructor() {
+    super();
+    this.primary = undefined;
+    this.backgroundColor = undefined;
+    this.size = 'medium';
+    this.label = '';
+  }
+
+  onClick() {
+    const options = {
+      bubbles: true,
+      composed: true,
+    };
+    this.dispatchEvent(new CustomEvent('sb-button:click', options));
+  }
+
+  render() {
+    const mode = this.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+    return html`
+      <button
+        type="button"
+        class=${['storybook-button', `storybook-button--${this.size ?? 'medium'}`, mode].join(' ')}
+        @click="${this.onClick}"
+      >
+        ${this.label}
+      </button>
+    `;
+  }
+
+  // render into the light dom so we can test this
+  createRenderRoot() {
+    return this;
+  }
+}
+
+export const ButtonTag = 'sb-button';
+customElements.define(ButtonTag, SbButton);

package/template/components/Form.js

@@ -0,0 +1,81 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import globalThis from 'global';
+import { html, LitElement } from 'lit';
+
+const { CustomEvent, customElements } = globalThis;
+
+/**
+ * Form test component for framework-independent stories
+ *
+ * @tag sb-form
+ */
+export class SbForm extends LitElement {
+  // Currently TS decorators are not reflected so we have to use static `properties` function
+  // https://github.com/Polymer/lit-html/issues/1476
+  static get properties() {
+    return {
+      value: { type: String },
+      complete: { type: Boolean },
+      onSuccess: { type: Function },
+    };
+  }
+
+  constructor() {
+    super();
+    this.value = '';
+    this.complete = false;
+    this.onSuccess = undefined;
+  }
+
+  onSubmit(event) {
+    event.preventDefault();
+    const options = {
+      bubbles: true,
+      composed: true,
+    };
+
+    this.dispatchEvent(new CustomEvent('sb-form:success', options));
+    if (this.onSuccess) {
+      this.onSuccess(this.value);
+    }
+
+    setTimeout(() => {
+      this.complete = true;
+    }, 500);
+
+    setTimeout(() => {
+      this.complete = false;
+    }, 1500);
+  }
+
+  render() {
+    return html`
+      <form id="interaction-test-form" @submit=${this.onSubmit}>
+        <label>
+          Enter Value
+          <input
+            type="text"
+            data-testid="value"
+            value=${this.value}
+            required
+            @change=${(event) => {
+              event.preventDefault();
+              this.value = event.target.value;
+              return false;
+            }}
+          />
+        </label>
+        <button type="submit">Submit</button>
+        ${this.complete ? 'Completed!!' : ''}
+      </form>
+    `;
+  }
+
+  // render into the light dom so we can test this
+  createRenderRoot() {
+    return this;
+  }
+}
+
+export const FormTag = 'sb-form';
+customElements.define(FormTag, SbForm);

package/template/components/Html.js

@@ -0,0 +1,34 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import globalThis from 'global';
+import { LitElement } from 'lit';
+
+const { customElements } = globalThis;
+
+/**
+ *
+ * @tag sb-html
+ */
+export class SbHtml extends LitElement {
+  static get properties() {
+    return {
+      content: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.content = '';
+  }
+
+  render() {
+    this.renderRoot.innerHTML = this.content;
+  }
+
+  // render into the light dom so we can test this
+  createRenderRoot() {
+    return this;
+  }
+}
+
+export const HtmlTag = 'sb-html';
+customElements.define(HtmlTag, SbHtml);

package/template/components/Pre.js

@@ -0,0 +1,42 @@
+/* eslint-disable import/extensions, import/no-extraneous-dependencies */
+import globalThis from 'global';
+import { html, LitElement } from 'lit';
+import { styleMap } from 'lit-html/directives/style-map.js';
+
+const { customElements } = globalThis;
+
+/**
+ *
+ * @tag sb-pre
+ */
+export class SbPre extends LitElement {
+  // Currently TS decorators are not reflected so we have to use static `properties` function
+  // https://github.com/Polymer/lit-html/issues/1476
+  static get properties() {
+    return {
+      style: { type: Object },
+      object: { type: Object },
+      text: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.style = {};
+    this.object = undefined;
+    this.text = undefined;
+  }
+
+  render() {
+    const text = this.object ? JSON.stringify(this.object, null, 2) : this.text;
+    return html`<pre data-testid="pre" style=${styleMap(this.style)}>${text}</pre>`;
+  }
+
+  // render into the light dom so we can test this
+  createRenderRoot() {
+    return this;
+  }
+}
+
+export const PreTag = 'sb-pre';
+customElements.define(PreTag, SbPre);

package/template/components/button.css

@@ -0,0 +1,30 @@
+.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/components/index.js

@@ -0,0 +1,14 @@
+import globalThis from 'global';
+
+import { ButtonTag } from './Button';
+import { FormTag } from './Form';
+import { HtmlTag } from './Html';
+import { PreTag } from './Pre';
+
+globalThis.Components = {
+  Button: ButtonTag,
+  Form: FormTag,
+  Html: HtmlTag,
+  Pre: PreTag,
+};
+globalThis.storybookRenderer = 'web-components';

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

@@ -0,0 +1,95 @@
+{
+  "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

@@ -0,0 +1,162 @@
+{
+  "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": [
+            {
+              "description": "This is an unnamed slot (the default slot)",
+              "name": ""
+            }
+          ],
+          "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"
+          }
+        }
+      ]
+    }
+  ]
+}

package/template/stories/demo-wc-card/DemoWcCard.js

@@ -0,0 +1,101 @@
+import global from 'global';
+import { LitElement, html } from 'lit';
+// eslint-disable-next-line import/extensions
+import { demoWcCardStyle } from './demoWcCardStyle.css.js';
+
+const { CustomEvent } = global;
+
+/**
+ * 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'));
+    }
+  }
+}

package/template/stories/demo-wc-card/demoWcCardStyle.css.js

@@ -0,0 +1,97 @@
+import { css } from 'lit';
+
+export 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;
+  }
+`;

package/template/stories/demo-wc-card/index.js

@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/extensions
+import { DemoWcCard } from './DemoWcCard.js';
+
+// eslint-disable-next-line no-undef
+customElements.define('demo-wc-card', DemoWcCard);

package/template/stories/demo-wc-card.stories.js

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+import './demo-wc-card';
+
+export default {
+  component: 'demo-wc-card',
+};
+
+const Template = ({ backSide, header, rows }) =>
+  html`
+    <demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
+      >A simple card</demo-wc-card
+    >
+  `;
+
+export const Front = Template.bind({});
+Front.args = { backSide: false, header: undefined, rows: [] };

package/template/stories/preview.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { setCustomElementsManifest } from '@storybook/web-components';
+
+import customElementsManifest from './custom-elements.json';
+
+setCustomElementsManifest(customElementsManifest);