@storybook/web-components 7.0.0-alpha.8 → 7.0.0-beta.0

package/dist/chunk-UOPG23OB.mjs

@@ -0,0 +1,5 @@
+import global3 from"global";import global from"global";var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="web-components";import{start}from"@storybook/preview-api";import global2 from"global";import{dedent}from"ts-dedent";import{render as litRender}from"lit-html";import{isTemplateResult}from"lit-html/directive-helpers.js";import{simulatePageLoad,simulateDOMContentLoaded}from"@storybook/preview-api";var{Node}=global2,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),isTemplateResult(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');litRender(element,renderTo),simulatePageLoad(canvasElement)}else if(typeof element=="string")canvasElement.innerHTML=element,simulatePageLoad(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),simulateDOMContentLoaded()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:dedent`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}var FRAMEWORK="web-components",api=start(renderToCanvas),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({framework:FRAMEWORK}),configure=(...args)=>api.configure(FRAMEWORK,...args),forceReRender=api.forceReRender,raw=api.clientApi.raw;function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
+    See the readme of addon-docs for web components for more details.`)}function setCustomElements(customElements){window.__STORYBOOK_CUSTOM_ELEMENTS__=customElements}function setCustomElementsManifest(customElements){window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=customElements}function getCustomElements(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:window2,EventSource}=global3;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window2.location.reload()}catch{}}));export{render,renderToCanvas,storiesOf,configure,forceReRender,raw,isValidComponent,isValidMetaData,setCustomElements,setCustomElementsManifest,getCustomElements};

package/dist/config.d.ts

@@ -1,32 +1,30 @@
-import * as lib_docs_tools_dist_types from 'lib/docs-tools/dist/types';
-import * as lib_api_dist_types from 'lib/api/dist/types';
-import * as lib_addons_dist_types from 'lib/addons/dist/types';
-import * as _storybook_csf from '@storybook/csf';
-import { PartialStoryFn, StoryContext } from '@storybook/csf';
-import { W as WebComponentsFramework } from './types-7ab3c005.js';
-import { RenderContext } from '@storybook/store';
+import * as lib_docs_tools_dist from 'lib/docs-tools/dist';
+import * as lib_types_dist from 'lib/types/dist';
+import { PartialStoryFn, StoryContext, ArgsStoryFn, RenderContext } from '@storybook/types';
+import { W as WebComponentsRenderer } from './types-cbbc479a.js';
 import 'lit-html';
 
-declare function sourceDecorator(storyFn: PartialStoryFn<WebComponentsFramework>, context: StoryContext<WebComponentsFramework>): WebComponentsFramework['storyResult'];
+declare function sourceDecorator(storyFn: PartialStoryFn<WebComponentsRenderer>, context: StoryContext<WebComponentsRenderer>): WebComponentsRenderer['storyResult'];
 
 declare const decorators: (typeof sourceDecorator)[];
-declare const argTypesEnhancers: (<TFramework extends _storybook_csf.AnyFramework>(context: _storybook_csf.StoryContextForEnhancers<TFramework, _storybook_csf.Args>) => _storybook_csf.StrictArgTypes<_storybook_csf.Args> | lib_addons_dist_types.Parameters)[];
+declare const argTypesEnhancers: (<TRenderer extends lib_types_dist.Renderer>(context: lib_types_dist.StoryContextForEnhancers<TRenderer, lib_types_dist.Args>) => lib_types_dist.StrictArgTypes<lib_types_dist.Args>)[];
 
-declare function renderToDOM({ storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<WebComponentsFramework>, domElement: Element): void;
+declare const render: ArgsStoryFn<WebComponentsRenderer>;
+declare function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<WebComponentsRenderer>, canvasElement: WebComponentsRenderer['canvasElement']): void;
 
 declare const parameters: {
     docs: {
         extractArgTypes: (tagName: string) => {
-            [x: string]: lib_api_dist_types.ArgType;
+            [x: string]: lib_types_dist.InputType;
         };
         extractComponentDescription: (tagName: string) => string;
         inlineStories: boolean;
         source: {
-            type: lib_docs_tools_dist_types.SourceType;
+            type: lib_docs_tools_dist.SourceType;
             language: string;
         };
     };
     framework: "web-components";
 };
 
-export { argTypesEnhancers, decorators, parameters, renderToDOM };
+export { argTypesEnhancers, decorators, parameters, render, renderToCanvas };

package/dist/config.js

@@ -1,5 +1,5 @@
-var j=Object.create;var l=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames,D=Object.getOwnPropertySymbols,J=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable;var C=(e,r,o)=>r in e?l(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,i=(e,r)=>{for(var o in r||(r={}))A.call(r,o)&&C(e,o,r[o]);if(D)for(var o of D(r))X.call(r,o)&&C(e,o,r[o]);return e};var s=(e,r)=>l(e,"name",{value:r,configurable:!0});var Z=(e,r)=>{for(var o in r)l(e,o,{get:r[o],enumerable:!0})},E=(e,r,o,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of W(r))!A.call(e,n)&&n!==o&&l(e,n,{get:()=>r[n],enumerable:!(t=q(r,n))||t.enumerable});return e};var T=(e,r,o)=>(o=e!=null?j(J(e)):{},E(r||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),z=e=>E(l({},"__esModule",{value:!0}),e);var de={};Z(de,{argTypesEnhancers:()=>B,decorators:()=>H,parameters:()=>ce,renderToDOM:()=>g});module.exports=z(de);var S=require("@storybook/docs-tools");var h=require("@storybook/client-logger");var k=T(require("global"));var b=T(require("global")),{window:G}=b.default;G.STORYBOOK_ENV="web-components";var N=require("@storybook/core-client");var x=T(require("global")),R=T(require("ts-dedent")),v=require("lit-html"),L=require("lit-html/directive-helpers.js"),m=require("@storybook/preview-web"),{Node:Q}=x.default;function g({storyFn:e,kind:r,name:o,showMain:t,showError:n,forceRemount:c},a){let d=e();if(t(),(0,L.isTemplateResult)(d)){(c||!a.querySelector('[id="root-inner"]'))&&(a.innerHTML='<div id="root-inner"></div>');let F=a.querySelector('[id="root-inner"]');(0,v.render)(d,F),(0,m.simulatePageLoad)(a)}else if(typeof d=="string")a.innerHTML=d,(0,m.simulatePageLoad)(a);else if(d instanceof Q){if(a.firstChild===d&&!c)return;a.innerHTML="",a.appendChild(d),(0,m.simulateDOMContentLoaded)()}else n({title:`Expecting an HTML snippet or DOM node from the story: "${o}" of "${r}".`,description:R.default`
+var V=Object.create;var f=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var B=(e,r)=>{for(var t in r)f(e,t,{get:r[t],enumerable:!0})},b=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of $(r))!K.call(e,n)&&n!==t&&f(e,n,{get:()=>r[n],enumerable:!(o=Y(r,n))||o.enumerable});return e};var y=(e,r,t)=>(t=e!=null?V(H(e)):{},b(r||!e||!e.__esModule?f(t,"default",{value:e,enumerable:!0}):t,e)),j=e=>b(f({},"__esModule",{value:!0}),e);var se={};B(se,{argTypesEnhancers:()=>U,decorators:()=>N,parameters:()=>ne,render:()=>h,renderToCanvas:()=>u});module.exports=j(se);var l=require("@storybook/docs-tools");var S=require("@storybook/client-logger");var x=y(require("global"));var R=y(require("global")),{window:q}=R.default;q.STORYBOOK_ENV="web-components";var M=require("@storybook/preview-api");var w=y(require("global")),_=require("ts-dedent"),A=require("lit-html"),E=require("lit-html/directive-helpers.js"),d=require("@storybook/preview-api"),{Node:J}=w.default,h=(e,r)=>{let{id:t,component:o}=r;if(!o)throw new Error(`Unable to render story ${t} as the component annotation is missing from the default export`);let n=document.createElement(o);return Object.entries(e).forEach(([i,s])=>{n[i]=s}),n};function u({storyFn:e,kind:r,name:t,showMain:o,showError:n,forceRemount:i},s){let a=e();if(o(),(0,E.isTemplateResult)(a)){(i||!s.querySelector('[id="root-inner"]'))&&(s.innerHTML='<div id="root-inner"></div>');let P=s.querySelector('[id="root-inner"]');(0,A.render)(a,P),(0,d.simulatePageLoad)(s)}else if(typeof a=="string")s.innerHTML=a,(0,d.simulatePageLoad)(s);else if(a instanceof J){if(s.firstChild===a&&!i)return;s.innerHTML="",s.appendChild(a),(0,d.simulateDOMContentLoaded)()}else n({title:`Expecting an HTML snippet or DOM node from the story: "${t}" of "${r}".`,description:_.dedent`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
-      `})}s(g,"renderToDOM");var f=(0,N.start)(g);var me=f.clientApi.addDecorator,ye=f.clientApi.addParameters,Te=f.clientApi.clearDecorators,ge=f.clientApi.setAddon,we=f.forceReRender,Se=f.clientApi.getStorybook,_e=f.clientApi.raw;function _(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"')}s(_,"isValidComponent");function M(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().
-    See the readme of addon-docs for web components for more details.`)}s(M,"isValidMetaData");function O(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}s(O,"getCustomElements");var{window:ee,EventSource:re}=k.default;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new re("__webpack_hmr").addEventListener("message",s(function(o){try{let{action:t}=JSON.parse(o.data);t==="built"&&ee.location.reload()}catch{}},"fullPageReload")));function U(e,r){var t,n;let o=r==="properties"?{name:((t=e.type)==null?void 0:t.text)||e.type}:{name:"void"};return{name:e.name,required:!1,description:e.description,type:o,table:{category:r,type:{summary:((n=e.type)==null?void 0:n.text)||e.type},defaultValue:{summary:e.default!==void 0?e.default:e.defaultValue}}}}s(U,"mapItem");function oe(e){let r=e.name.replace(/(-|_|:|\.|\s)+(.)?/g,(o,t,n)=>n?n.toUpperCase():"").replace(/^([A-Z])/,o=>o.toLowerCase());return r=`on${r.charAt(0).toUpperCase()+r.substr(1)}`,[{name:r,action:{name:e.name},table:{disable:!0}},U(e,"events")]}s(oe,"mapEvent");function u(e,r){return e&&e.filter(o=>o&&o.name).reduce((o,t)=>{if(t.kind==="method")return o;switch(r){case"events":oe(t).forEach(n=>{o[n.name]=n});break;default:o[t.name]=U(t,r);break}return o},{})}s(u,"mapData");var te=s((e,r)=>{if(!_(e)||!M(r))return null;let o=r.tags.find(t=>t.name.toUpperCase()===e.toUpperCase());return o||h.logger.warn(`Component not found in custom-elements.json: ${e}`),o},"getMetaDataExperimental"),ne=s((e,r)=>{var t;if(!_(e)||!M(r))return null;let o;return(t=r==null?void 0:r.modules)==null||t.forEach(n=>{var c;(c=n==null?void 0:n.declarations)==null||c.forEach(a=>{a.tagName===e&&(o=a)})}),o||h.logger.warn(`Component not found in custom-elements.json: ${e}`),o},"getMetaDataV1"),I=s((e,r)=>(r==null?void 0:r.version)==="experimental"?te(e,r):ne(e,r),"getMetaData"),se=s((e,r)=>{let o=I(e,r);return o&&i(i(i(i(i(i(i({},u(o.attributes,"attributes")),u(o.members,"properties")),u(o.properties,"properties")),u(o.events,"events")),u(o.slots,"slots")),u(o.cssProperties,"css custom properties")),u(o.cssParts,"css shadow parts"))},"extractArgTypesFromElements"),V=s(e=>{let r=O();return se(e,r)},"extractArgTypes"),Y=s(e=>{let r=I(e,O());return r&&r.description},"extractComponentDescription");var P=require("lit-html"),w=require("@storybook/addons"),y=require("@storybook/docs-tools"),ae=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function ie(e){var t;let r=(t=e==null?void 0:e.parameters.docs)==null?void 0:t.source,o=e==null?void 0:e.parameters.__isArgsStory;return(r==null?void 0:r.type)===y.SourceType.DYNAMIC?!1:!o||(r==null?void 0:r.code)||(r==null?void 0:r.type)===y.SourceType.CODE}s(ie,"skipSourceRender");function pe(e,r){let{transformSource:o}=r.parameters.docs??{};return typeof o!="function"?e:o(e,r)}s(pe,"applyTransformSource");function $(e,r){var n,c;let o=(c=(n=r==null?void 0:r.parameters.docs)==null?void 0:n.source)!=null&&c.excludeDecorators?r.originalStoryFn(r.args,r):e(),t;if((0,w.useEffect)(()=>{t&&w.addons.getChannel().emit(y.SNIPPET_RENDERED,r.id,t)}),!ie(r)){let a=window.document.createElement("div");(0,P.render)(o,a),t=pe(a.innerHTML.replace(ae,""),r)}return o}s($,"sourceDecorator");var H=[$],K={docs:{extractArgTypes:V,extractComponentDescription:Y,inlineStories:!0,source:{type:S.SourceType.DYNAMIC,language:"html"}}},B=[S.enhanceArgTypes];var ce=i({framework:"web-components"},K);0&&(module.exports={argTypesEnhancers,decorators,parameters,renderToDOM});
+      `})}var O=(0,M.start)(u);var de=O.forceReRender,me=O.clientApi.raw;function g(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 C(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().
+    See the readme of addon-docs for web components for more details.`)}function T(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:X,EventSource:Z}=x.default;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new Z("__webpack_hmr").addEventListener("message",function(t){try{let{action:o}=JSON.parse(t.data);o==="built"&&X.location.reload()}catch{}}));function D(e,r){var o,n;let t=r==="properties"?{name:((o=e.type)==null?void 0:o.text)||e.type}:{name:"void"};return{name:e.name,required:!1,description:e.description,type:t,table:{category:r,type:{summary:((n=e.type)==null?void 0:n.text)||e.type},defaultValue:{summary:e.default!==void 0?e.default:e.defaultValue}}}}function z(e){let r=e.name.replace(/(-|_|:|\.|\s)+(.)?/g,(t,o,n)=>n?n.toUpperCase():"").replace(/^([A-Z])/,t=>t.toLowerCase());return r=`on${r.charAt(0).toUpperCase()+r.substr(1)}`,[{name:r,action:{name:e.name},table:{disable:!0}},D(e,"events")]}function p(e,r){return e&&e.filter(t=>t&&t.name).reduce((t,o)=>{if(o.kind==="method")return t;switch(r){case"events":z(o).forEach(n=>{t[n.name]=n});break;default:t[o.name]=D(o,r);break}return t},{})}var G=(e,r)=>{if(!g(e)||!C(r))return null;let t=r.tags.find(o=>o.name.toUpperCase()===e.toUpperCase());return t||S.logger.warn(`Component not found in custom-elements.json: ${e}`),t},Q=(e,r)=>{var o;if(!g(e)||!C(r))return null;let t;return(o=r==null?void 0:r.modules)==null||o.forEach(n=>{var i;(i=n==null?void 0:n.declarations)==null||i.forEach(s=>{s.tagName===e&&(t=s)})}),t||S.logger.warn(`Component not found in custom-elements.json: ${e}`),t},I=(e,r)=>(r==null?void 0:r.version)==="experimental"?G(e,r):Q(e,r),ee=(e,r)=>{let t=I(e,r);return t&&{...p(t.attributes,"attributes"),...p(t.members,"properties"),...p(t.properties,"properties"),...p(t.events,"events"),...p(t.slots,"slots"),...p(t.cssProperties,"css custom properties"),...p(t.cssParts,"css shadow parts")}},L=e=>{let r=T();return ee(e,r)},W=e=>{let r=I(e,T());return r&&r.description};var v=require("lit-html"),c=require("@storybook/preview-api"),m=require("@storybook/docs-tools"),re=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function te(e){var o;let r=(o=e==null?void 0:e.parameters.docs)==null?void 0:o.source,t=e==null?void 0:e.parameters.__isArgsStory;return(r==null?void 0:r.type)===m.SourceType.DYNAMIC?!1:!t||(r==null?void 0:r.code)||(r==null?void 0:r.type)===m.SourceType.CODE}function oe(e,r){let{transformSource:t}=r.parameters.docs??{};return typeof t!="function"?e:t(e,r)}function k(e,r){var n,i;let t=(i=(n=r==null?void 0:r.parameters.docs)==null?void 0:n.source)!=null&&i.excludeDecorators?r.originalStoryFn(r.args,r):e(),o;if((0,c.useEffect)(()=>{o&&c.addons.getChannel().emit(m.SNIPPET_RENDERED,r.id,o)}),!te(r)){let s=window.document.createElement("div");(0,v.render)(t,s),o=oe(s.innerHTML.replace(re,""),r)}return t}var N=[k],F={docs:{extractArgTypes:L,extractComponentDescription:W,inlineStories:!0,source:{type:l.SourceType.DYNAMIC,language:"html"}}},U=[l.enhanceArgTypes];var ne={framework:"web-components",...F};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToCanvas});

package/dist/config.mjs

@@ -1 +1 @@
-import{a,b as s,c as b,m as c,n as f,q as d}from"./chunk-LW7MJT4D.mjs";import{SourceType as _,enhanceArgTypes as L}from"@storybook/docs-tools";import{logger as y}from"@storybook/client-logger";function D(e,r){var o,n;let t=r==="properties"?{name:((o=e.type)==null?void 0:o.text)||e.type}:{name:"void"};return{name:e.name,required:!1,description:e.description,type:t,table:{category:r,type:{summary:((n=e.type)==null?void 0:n.text)||e.type},defaultValue:{summary:e.default!==void 0?e.default:e.defaultValue}}}}s(D,"mapItem");function A(e){let r=e.name.replace(/(-|_|:|\.|\s)+(.)?/g,(t,o,n)=>n?n.toUpperCase():"").replace(/^([A-Z])/,t=>t.toLowerCase());return r=`on${r.charAt(0).toUpperCase()+r.substr(1)}`,[{name:r,action:{name:e.name},table:{disable:!0}},D(e,"events")]}s(A,"mapEvent");function p(e,r){return e&&e.filter(t=>t&&t.name).reduce((t,o)=>{if(o.kind==="method")return t;switch(r){case"events":A(o).forEach(n=>{t[n.name]=n});break;default:t[o.name]=D(o,r);break}return t},{})}s(p,"mapData");var M=s((e,r)=>{if(!c(e)||!f(r))return null;let t=r.tags.find(o=>o.name.toUpperCase()===e.toUpperCase());return t||y.warn(`Component not found in custom-elements.json: ${e}`),t},"getMetaDataExperimental"),w=s((e,r)=>{var o;if(!c(e)||!f(r))return null;let t;return(o=r==null?void 0:r.modules)==null||o.forEach(n=>{var i;(i=n==null?void 0:n.declarations)==null||i.forEach(u=>{u.tagName===e&&(t=u)})}),t||y.warn(`Component not found in custom-elements.json: ${e}`),t},"getMetaDataV1"),C=s((e,r)=>(r==null?void 0:r.version)==="experimental"?M(e,r):w(e,r),"getMetaData"),v=s((e,r)=>{let t=C(e,r);return t&&a(a(a(a(a(a(a({},p(t.attributes,"attributes")),p(t.members,"properties")),p(t.properties,"properties")),p(t.events,"events")),p(t.slots,"slots")),p(t.cssProperties,"css custom properties")),p(t.cssParts,"css shadow parts"))},"extractArgTypesFromElements"),g=s(e=>{let r=d();return v(e,r)},"extractArgTypes"),E=s(e=>{let r=C(e,d());return r&&r.description},"extractComponentDescription");import{render as I}from"lit-html";import{addons as k,useEffect as V}from"@storybook/addons";import{SNIPPET_RENDERED as $,SourceType as S}from"@storybook/docs-tools";var O=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function R(e){var o;let r=(o=e==null?void 0:e.parameters.docs)==null?void 0:o.source,t=e==null?void 0:e.parameters.__isArgsStory;return(r==null?void 0:r.type)===S.DYNAMIC?!1:!t||(r==null?void 0:r.code)||(r==null?void 0:r.type)===S.CODE}s(R,"skipSourceRender");function U(e,r){let{transformSource:t}=r.parameters.docs??{};return typeof t!="function"?e:t(e,r)}s(U,"applyTransformSource");function T(e,r){var n,i;let t=(i=(n=r==null?void 0:r.parameters.docs)==null?void 0:n.source)!=null&&i.excludeDecorators?r.originalStoryFn(r.args,r):e(),o;if(V(()=>{o&&k.getChannel().emit($,r.id,o)}),!R(r)){let u=window.document.createElement("div");I(t,u),o=U(u.innerHTML.replace(O,""),r)}return t}s(T,"sourceDecorator");var j=[T],h={docs:{extractArgTypes:g,extractComponentDescription:E,inlineStories:!0,source:{type:_.DYNAMIC,language:"html"}}},F=[L];var K=a({framework:"web-components"},h);export{F as argTypesEnhancers,j as decorators,K as parameters,b as renderToDOM};
+import{getCustomElements,isValidComponent,isValidMetaData,render,renderToCanvas}from"./chunk-UOPG23OB.mjs";import{SourceType as SourceType2,enhanceArgTypes}from"@storybook/docs-tools";import{logger}from"@storybook/client-logger";function mapItem(item,category){let type=category==="properties"?{name:item.type?.text||item.type}:{name:"void"};return{name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:item.type?.text||item.type},defaultValue:{summary:item.default!==void 0?item.default:item.defaultValue}}}}function mapEvent(item){let name=item.name.replace(/(-|_|:|\.|\s)+(.)?/g,(_match,_separator,chr)=>chr?chr.toUpperCase():"").replace(/^([A-Z])/,match=>match.toLowerCase());return name=`on${name.charAt(0).toUpperCase()+name.substr(1)}`,[{name,action:{name:item.name},table:{disable:!0}},mapItem(item,"events")]}function mapData(data,category){return data&&data.filter(item=>item&&item.name).reduce((acc,item)=>{if(item.kind==="method")return acc;switch(category){case"events":mapEvent(item).forEach(argType=>{acc[argType.name]=argType});break;default:acc[item.name]=mapItem(item,category);break}return acc},{})}var getMetaDataExperimental=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metaData=customElements.tags.find(tag=>tag.name.toUpperCase()===tagName.toUpperCase());return metaData||logger.warn(`Component not found in custom-elements.json: ${tagName}`),metaData},getMetaDataV1=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return customElements?.modules?.forEach(_module=>{_module?.declarations?.forEach(declaration=>{declaration.tagName===tagName&&(metadata=declaration)})}),metadata||logger.warn(`Component not found in custom-elements.json: ${tagName}`),metadata},getMetaData=(tagName,manifest)=>manifest?.version==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.attributes,"attributes"),...mapData(metaData.members,"properties"),...mapData(metaData.properties,"properties"),...mapData(metaData.events,"events"),...mapData(metaData.slots,"slots"),...mapData(metaData.cssProperties,"css custom properties"),...mapData(metaData.cssParts,"css shadow parts")}},extractArgTypes=tagName=>{let cem=getCustomElements();return extractArgTypesFromElements(tagName,cem)},extractComponentDescription=tagName=>{let metaData=getMetaData(tagName,getCustomElements());return metaData&&metaData.description};import{render as render2}from"lit-html";import{addons,useEffect}from"@storybook/preview-api";import{SNIPPET_RENDERED,SourceType}from"@storybook/docs-tools";var LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return sourceParams?.type===SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===SourceType.CODE}function applyTransformSource(source,context){let{transformSource}=context.parameters.docs??{};return typeof transformSource!="function"?source:transformSource(source,context)}function sourceDecorator(storyFn,context){let story=context?.parameters.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context):storyFn(),source;if(useEffect(()=>{source&&addons.getChannel().emit(SNIPPET_RENDERED,context.id,source)}),!skipSourceRender(context)){let container=window.document.createElement("div");render2(story,container),source=applyTransformSource(container.innerHTML.replace(LIT_EXPRESSION_COMMENTS,""),context)}return story}var decorators=[sourceDecorator],parameters={docs:{extractArgTypes,extractComponentDescription,inlineStories:!0,source:{type:SourceType2.DYNAMIC,language:"html"}}},argTypesEnhancers=[enhanceArgTypes];var parameters2={framework:"web-components",...parameters};export{argTypesEnhancers,decorators,parameters2 as parameters,render,renderToCanvas};

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations } from '@storybook/csf';
-import { W as WebComponentsFramework, I as IStorybookSection } from './types-7ab3c005.js';
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
+export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
+import { W as WebComponentsRenderer } from './types-cbbc479a.js';
+export { W as WebComponentsRenderer } from './types-cbbc479a.js';
 import 'lit-html';
 
 /**
@@ -8,42 +9,41 @@ import 'lit-html';
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-declare type Meta<TArgs = Args> = ComponentAnnotations<WebComponentsFramework, TArgs>;
+type Meta<TArgs = Args> = ComponentAnnotations<WebComponentsRenderer, TArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsFramework, TArgs>;
+type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsRenderer, TArgs>;
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-declare type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsFramework, TArgs>;
+type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsRenderer, TArgs>;
 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-declare type Story<TArgs = Args> = StoryObj<TArgs>;
+type Story<TArgs = Args> = StoryFn<TArgs>;
+type Decorator<TArgs = StrictArgs> = DecoratorFunction<WebComponentsRenderer, TArgs>;
+type Loader<TArgs = StrictArgs> = LoaderFunction<WebComponentsRenderer, TArgs>;
+type StoryContext<TArgs = StrictArgs> = StoryContext$1<WebComponentsRenderer, TArgs>;
 
-interface ClientApi extends ClientStoryApi<WebComponentsFramework['storyResult']> {
-    setAddon(addon: any): void;
-    configure(loader: Loadable, module: NodeModule): void;
-    getStorybook(): IStorybookSection[];
-    clearDecorators(): void;
+interface ClientApi extends Addon_ClientStoryApi<WebComponentsRenderer['storyResult']> {
+    configure(loader: Addon_Loadable, module: NodeModule): void;
     forceReRender(): void;
     raw: () => any;
 }
 declare const storiesOf: ClientApi['storiesOf'];
 declare const configure: ClientApi['configure'];
-declare const addDecorator: ClientApi['addDecorator'];
-declare const addParameters: ClientApi['addParameters'];
-declare const clearDecorators: ClientApi['clearDecorators'];
-declare const setAddon: ClientApi['setAddon'];
 declare const forceReRender: ClientApi['forceReRender'];
-declare const getStorybook: ClientApi['getStorybook'];
 declare const raw: ClientApi['raw'];
 
 declare function isValidComponent(tagName: string): boolean;
@@ -55,4 +55,4 @@ declare function setCustomElements(customElements: any): void;
 declare function setCustomElementsManifest(customElements: any): void;
 declare function getCustomElements(): any;
 
-export { Meta, Story, StoryFn, StoryObj, addDecorator, addParameters, clearDecorators, configure, forceReRender, getCustomElements, getStorybook, isValidComponent, isValidMetaData, raw, setAddon, setCustomElements, setCustomElementsManifest, storiesOf };
+export { Decorator, Loader, Meta, Story, StoryContext, StoryFn, StoryObj, configure, forceReRender, getCustomElements, isValidComponent, isValidMetaData, raw, setCustomElements, setCustomElementsManifest, storiesOf };

package/dist/index.js

@@ -1,5 +1,5 @@
-var A=Object.create;var p=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var r=(e,o)=>p(e,"name",{value:o,configurable:!0});var R=(e,o)=>{for(var t in o)p(e,t,{get:o[t],enumerable:!0})},m=(e,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of b(o))!L.call(e,a)&&a!==t&&p(e,a,{get:()=>o[a],enumerable:!(s=E(o,a))||s.enumerable});return e};var l=(e,o,t)=>(t=e!=null?A(C(e)):{},m(o||!e||!e.__esModule?p(t,"default",{value:e,enumerable:!0}):t,e)),D=e=>m(p({},"__esModule",{value:!0}),e);var G={};R(G,{addDecorator:()=>Y,addParameters:()=>B,clearDecorators:()=>H,configure:()=>P,forceReRender:()=>k,getCustomElements:()=>j,getStorybook:()=>F,isValidComponent:()=>q,isValidMetaData:()=>I,raw:()=>V,setAddon:()=>U,setCustomElements:()=>W,setCustomElementsManifest:()=>$,storiesOf:()=>K});module.exports=D(G);var y=l(require("global"));var _=l(require("global")),{window:N}=_.default;N.STORYBOOK_ENV="web-components";var g=require("@storybook/core-client");var O=l(require("global")),w=l(require("ts-dedent")),T=require("lit-html"),M=require("lit-html/directive-helpers.js"),f=require("@storybook/preview-web"),{Node:v}=O.default;function S({storyFn:e,kind:o,name:t,showMain:s,showError:a,forceRemount:u},n){let d=e();if(s(),(0,M.isTemplateResult)(d)){(u||!n.querySelector('[id="root-inner"]'))&&(n.innerHTML='<div id="root-inner"></div>');let h=n.querySelector('[id="root-inner"]');(0,T.render)(d,h),(0,f.simulatePageLoad)(n)}else if(typeof d=="string")n.innerHTML=d,(0,f.simulatePageLoad)(n);else if(d instanceof v){if(n.firstChild===d&&!u)return;n.innerHTML="",n.appendChild(d),(0,f.simulateDOMContentLoaded)()}else a({title:`Expecting an HTML snippet or DOM node from the story: "${t}" of "${o}".`,description:w.default`
+var S=Object.create;var p=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var x=(e,o)=>{for(var r in o)p(e,r,{get:o[r],enumerable:!0})},l=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of A(o))!h.call(e,i)&&i!==r&&p(e,i,{get:()=>o[i],enumerable:!(n=b(o,i))||n.enumerable});return e};var a=(e,o,r)=>(r=e!=null?S(M(e)):{},l(o||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),E=e=>l(p({},"__esModule",{value:!0}),e);var V={};x(V,{configure:()=>H,forceReRender:()=>K,getCustomElements:()=>v,isValidComponent:()=>Y,isValidMetaData:()=>B,raw:()=>U,setCustomElements:()=>F,setCustomElementsManifest:()=>k,storiesOf:()=>W});module.exports=E(V);var g=a(require("global"));var c=a(require("global")),{window:L}=c.default;L.STORYBOOK_ENV="web-components";var O=require("@storybook/preview-api");var u=a(require("global")),y=require("ts-dedent"),_=require("lit-html"),C=require("lit-html/directive-helpers.js"),s=require("@storybook/preview-api"),{Node:N}=u.default;function w({storyFn:e,kind:o,name:r,showMain:n,showError:i,forceRemount:m},t){let d=e();if(n(),(0,C.isTemplateResult)(d)){(m||!t.querySelector('[id="root-inner"]'))&&(t.innerHTML='<div id="root-inner"></div>');let T=t.querySelector('[id="root-inner"]');(0,_.render)(d,T),(0,s.simulatePageLoad)(t)}else if(typeof d=="string")t.innerHTML=d,(0,s.simulatePageLoad)(t);else if(d instanceof N){if(t.firstChild===d&&!m)return;t.innerHTML="",t.appendChild(d),(0,s.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.
-      `})}r(S,"renderToDOM");var x="web-components",i=(0,g.start)(S),K=r((e,o)=>i.clientApi.storiesOf(e,o).addParameters({framework:x}),"storiesOf"),P=r((...e)=>i.configure(x,...e),"configure"),Y=i.clientApi.addDecorator,B=i.clientApi.addParameters,H=i.clientApi.clearDecorators,U=i.clientApi.setAddon,k=i.forceReRender,F=i.clientApi.getStorybook,V=i.clientApi.raw;function q(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"')}r(q,"isValidComponent");function I(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().
-    See the readme of addon-docs for web components for more details.`)}r(I,"isValidMetaData");function W(e){window.__STORYBOOK_CUSTOM_ELEMENTS__=e}r(W,"setCustomElements");function $(e){window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=e}r($,"setCustomElementsManifest");function j(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}r(j,"getCustomElements");var{window:J,EventSource:z}=y.default;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new z("__webpack_hmr").addEventListener("message",r(function(t){try{let{action:s}=JSON.parse(t.data);s==="built"&&J.location.reload()}catch{}},"fullPageReload")));0&&(module.exports={addDecorator,addParameters,clearDecorators,configure,forceReRender,getCustomElements,getStorybook,isValidComponent,isValidMetaData,raw,setAddon,setCustomElements,setCustomElementsManifest,storiesOf});
+      `})}var R="web-components",f=(0,O.start)(w),W=(e,o)=>f.clientApi.storiesOf(e,o).addParameters({framework:R}),H=(...e)=>f.configure(R,...e),K=f.forceReRender,U=f.clientApi.raw;function Y(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 B(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().
+    See the readme of addon-docs for web components for more details.`)}function F(e){window.__STORYBOOK_CUSTOM_ELEMENTS__=e}function k(e){window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=e}function v(){return window.__STORYBOOK_CUSTOM_ELEMENTS__||window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:D,EventSource:P}=g.default;module&&module.hot&&module.hot.decline&&(module.hot.decline(),new P("__webpack_hmr").addEventListener("message",function(r){try{let{action:n}=JSON.parse(r.data);n==="built"&&D.location.reload()}catch{}}));0&&(module.exports={configure,forceReRender,getCustomElements,isValidComponent,isValidMetaData,raw,setCustomElements,setCustomElementsManifest,storiesOf});

package/dist/index.mjs

@@ -1 +1 @@
-import{d as a,e as b,f as c,g as d,h as e,i as f,j as g,k as h,l as i,m as j,n as k,o as l,p as m,q as n}from"./chunk-LW7MJT4D.mjs";export{c as addDecorator,d as addParameters,e as clearDecorators,b as configure,g as forceReRender,n as getCustomElements,h as getStorybook,j as isValidComponent,k as isValidMetaData,i as raw,f as setAddon,l as setCustomElements,m as setCustomElementsManifest,a as storiesOf};
+import{configure,forceReRender,getCustomElements,isValidComponent,isValidMetaData,raw,setCustomElements,setCustomElementsManifest,storiesOf}from"./chunk-UOPG23OB.mjs";export{configure,forceReRender,getCustomElements,isValidComponent,isValidMetaData,raw,setCustomElements,setCustomElementsManifest,storiesOf};

package/dist/types-cbbc479a.d.ts

@@ -0,0 +1,10 @@
+import { WebRenderer } from '@storybook/types';
+import { TemplateResult, SVGTemplateResult } from 'lit-html';
+
+type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
+interface WebComponentsRenderer extends WebRenderer {
+    component: string;
+    storyResult: StoryFnHtmlReturnType;
+}
+
+export { WebComponentsRenderer as W };

package/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "7.0.0-alpha.8",
+  "version": "7.0.0-beta.0",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit-html",
@@ -43,31 +43,29 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
+    "template/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "esrun ../../scripts/prepare/bundle.ts"
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.8",
-    "@storybook/api": "7.0.0-alpha.8",
-    "@storybook/client-logger": "7.0.0-alpha.8",
-    "@storybook/core-client": "7.0.0-alpha.8",
-    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "7.0.0-alpha.8",
-    "@storybook/preview-web": "7.0.0-alpha.8",
-    "@storybook/store": "7.0.0-alpha.8",
-    "core-js": "^3.8.2",
+    "@storybook/client-logger": "7.0.0-beta.0",
+    "@storybook/core-client": "7.0.0-beta.0",
+    "@storybook/docs-tools": "7.0.0-beta.0",
+    "@storybook/manager-api": "7.0.0-beta.0",
+    "@storybook/preview-api": "7.0.0-beta.0",
+    "@storybook/types": "7.0.0-beta.0",
     "global": "^4.4.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@digitak/esrun": "^3.2.2",
-    "lit-html": "2.0.2"
+    "lit": "2.3.1",
+    "lit-html": "2.0.2",
+    "typescript": "~4.9.3"
   },
   "peerDependencies": {
     "lit-html": "^1.4.1 || ^2.0.0"
@@ -78,9 +76,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "bundlerEntrypoint": [
-    "./src/index.ts",
-    "./src/config.ts"
-  ],
-  "gitHead": "24725501c32a073cebc6bf2674a47357136fbe3a"
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/config.ts"
+    ],
+    "platform": "browser"
+  },
+  "gitHead": "2e4ddde6a0a291266d91fe6a5ecda767bf119e70"
 }

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 how to set up stories at: https://storybook.js.org/docs/7.0/web-components/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  tags: ['docsPage'],
+  render: (args) => Button(args),
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    onClick: { action: 'onClick' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/web-components/writing-stories/args
+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,18 @@
+import { Header } from './Header';
+
+export default {
+  title: 'Example/Header',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/web-components/vue/writing-docs/docs-page
+  tags: ['docsPage'],
+  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/7.0/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/7.0/web-components/writing-stories/introduction
+const meta: Meta<ButtonProps> = {
+  title: 'Example/Button',
+  tags: ['docsPage'],
+  render: (args) => Button(args),
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    onClick: { action: 'onClick' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ButtonProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/web-components/writing-stories/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',
+  },
+};