@storybook/html 7.0.0-alpha.47 → 7.0.0-alpha.49

package/dist/{chunk-6IUTZSAA.mjs → chunk-3CDDCMPH.mjs}

@@ -1,7 +1,7 @@
-import d from"global";import{dedent as f}from"ts-dedent";import{simulatePageLoad as l,simulateDOMContentLoaded as c}from"@storybook/preview-web";var{Node:m}=d,h=(e,s)=>{let{id:p,component:t}=s;if(typeof t=="string"){let r=t;return Object.keys(e).forEach(o=>{r=r.replace(`{{${o}}}`,e[o])}),r}if(t instanceof HTMLElement){let r=t.cloneNode(!0);return Object.keys(e).forEach(o=>{r.setAttribute(o,typeof e[o]=="string"?e[o]:JSON.stringify(e[o]))}),r}if(typeof t=="function")return t(e,s);throw console.warn(f`
+import d from"global";import{dedent as f}from"ts-dedent";import{simulatePageLoad as m,simulateDOMContentLoaded as l}from"@storybook/preview-web";var{Node:u}=d,H=(e,s)=>{let{id:p,component:t}=s;if(typeof t=="string"){let r=t;return Object.keys(e).forEach(o=>{r=r.replace(`{{${o}}}`,e[o])}),r}if(t instanceof HTMLElement){let r=t.cloneNode(!0);return Object.keys(e).forEach(o=>{r.setAttribute(o,typeof e[o]=="string"?e[o]:JSON.stringify(e[o]))}),r}if(typeof t=="function")return t(e,s);throw console.warn(f`
     Storybook's HTML renderer only supports rendering DOM elements and strings.
     Received: ${t}
-  `),new Error(`Unable to render story ${p}`)};function H({storyFn:e,kind:s,name:p,showMain:t,showError:r,forceRemount:o},n){let i=e();if(t(),typeof i=="string")n.innerHTML=i,l(n);else if(i instanceof m){if(n.firstChild===i&&o===!1)return;n.innerHTML="",n.appendChild(i),c()}else r({title:`Expecting an HTML snippet or DOM node from the story: "${p}" of "${s}".`,description:f`
+  `),new Error(`Unable to render story ${p}`)};function h({storyFn:e,kind:s,name:p,showMain:t,showError:r,forceRemount:o},n){let i=e();if(t(),typeof i=="string")n.innerHTML=i,m(n);else if(i instanceof u){if(n.firstChild===i&&o===!1)return;n.innerHTML="",n.appendChild(i),l()}else r({title:`Expecting an HTML snippet or DOM node from the story: "${p}" of "${s}".`,description:f`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
-      `})}export{h as a,H as b};
+      `})}export{H as a,h as b};

package/dist/config.d.ts

@@ -1,4 +1,4 @@
 import 'lib/docs-tools/dist';
-export { a as argTypesEnhancers, d as decorators, p as parameters, b as render, r as renderToDOM } from './types-b05dd2df.js';
+export { a as argTypesEnhancers, d as decorators, p as parameters, b as render, r as renderToCanvas } from './types-84590f3a.js';
 import '@storybook/types';
 import 'lib/types/dist';

package/dist/config.js

@@ -1,7 +1,7 @@
-"use strict";var w=Object.create;var a=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var L=(e,r)=>{for(var t in r)a(e,t,{get:r[t],enumerable:!0})},c=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of E(r))!k.call(e,n)&&n!==t&&a(e,n,{get:()=>r[n],enumerable:!(o=H(r,n))||o.enumerable});return e};var b=(e,r,t)=>(t=e!=null?w(F(e)):{},c(r||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),O=e=>c(a({},"__esModule",{value:!0}),e);var I={};L(I,{argTypesEnhancers:()=>h,decorators:()=>g,parameters:()=>$,render:()=>M,renderToDOM:()=>C});module.exports=O(I);var u=require("@storybook/docs-tools");var f=require("@storybook/docs-tools"),m=require("@storybook/addons"),l=require("ts-dedent");function A(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)===f.SourceType.DYNAMIC?!1:!t||(r==null?void 0:r.code)||(r==null?void 0:r.type)===f.SourceType.CODE}function N(e){return(0,l.dedent)(e)}function R(e,r){return((r.parameters.docs??{}).transformSource??N)(e,r)}function S(e,r){var n,s;let t=(s=(n=r==null?void 0:r.parameters.docs)==null?void 0:n.source)!=null&&s.excludeDecorators?r.originalStoryFn(r.args,r):e(),o;return A(r)||(typeof t=="string"?o=t:t instanceof Element&&(o=t.outerHTML),o&&(o=R(o,r))),(0,m.useEffect)(()=>{o&&m.addons.getChannel().emit(f.SNIPPET_RENDERED,r.id,o)}),t}var g=[S],T={docs:{inlineStories:!0,transformSource:void 0,source:{type:u.SourceType.DYNAMIC,language:"html",code:void 0,excludeDecorators:void 0}}},h=[u.enhanceArgTypes];var D=b(require("global")),y=require("ts-dedent"),d=require("@storybook/preview-web"),{Node:_}=D.default,M=(e,r)=>{let{id:t,component:o}=r;if(typeof o=="string"){let n=o;return Object.keys(e).forEach(s=>{n=n.replace(`{{${s}}}`,e[s])}),n}if(o instanceof HTMLElement){let n=o.cloneNode(!0);return Object.keys(e).forEach(s=>{n.setAttribute(s,typeof e[s]=="string"?e[s]:JSON.stringify(e[s]))}),n}if(typeof o=="function")return o(e,r);throw console.warn(y.dedent`
+"use strict";var D=Object.create;var m=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var L=(e,r)=>{for(var t in r)m(e,t,{get:r[t],enumerable:!0})},c=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of M(r))!E.call(e,n)&&n!==t&&m(e,n,{get:()=>r[n],enumerable:!(o=F(r,n))||o.enumerable});return e};var b=(e,r,t)=>(t=e!=null?D(k(e)):{},c(r||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e)),A=e=>c(m({},"__esModule",{value:!0}),e);var I={};L(I,{argTypesEnhancers:()=>h,decorators:()=>g,parameters:()=>$,render:()=>w,renderToCanvas:()=>H});module.exports=A(I);var d=require("@storybook/docs-tools");var f=require("@storybook/docs-tools"),a=require("@storybook/addons"),l=require("ts-dedent");function N(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)===f.SourceType.DYNAMIC?!1:!t||(r==null?void 0:r.code)||(r==null?void 0:r.type)===f.SourceType.CODE}function O(e){return(0,l.dedent)(e)}function R(e,r){return((r.parameters.docs??{}).transformSource??O)(e,r)}function S(e,r){var n,s;let t=(s=(n=r==null?void 0:r.parameters.docs)==null?void 0:n.source)!=null&&s.excludeDecorators?r.originalStoryFn(r.args,r):e(),o;return N(r)||(typeof t=="string"?o=t:t instanceof Element&&(o=t.outerHTML),o&&(o=R(o,r))),(0,a.useEffect)(()=>{o&&a.addons.getChannel().emit(f.SNIPPET_RENDERED,r.id,o)}),t}var g=[S],T={docs:{inlineStories:!0,transformSource:void 0,source:{type:d.SourceType.DYNAMIC,language:"html",code:void 0,excludeDecorators:void 0}}},h=[d.enhanceArgTypes];var C=b(require("global")),y=require("ts-dedent"),u=require("@storybook/preview-web"),{Node:_}=C.default,w=(e,r)=>{let{id:t,component:o}=r;if(typeof o=="string"){let n=o;return Object.keys(e).forEach(s=>{n=n.replace(`{{${s}}}`,e[s])}),n}if(o instanceof HTMLElement){let n=o.cloneNode(!0);return Object.keys(e).forEach(s=>{n.setAttribute(s,typeof e[s]=="string"?e[s]:JSON.stringify(e[s]))}),n}if(typeof o=="function")return o(e,r);throw console.warn(y.dedent`
     Storybook's HTML renderer only supports rendering DOM elements and strings.
     Received: ${o}
-  `),new Error(`Unable to render story ${t}`)};function C({storyFn:e,kind:r,name:t,showMain:o,showError:n,forceRemount:s},i){let p=e();if(o(),typeof p=="string")i.innerHTML=p,(0,d.simulatePageLoad)(i);else if(p instanceof _){if(i.firstChild===p&&s===!1)return;i.innerHTML="",i.appendChild(p),(0,d.simulateDOMContentLoaded)()}else n({title:`Expecting an HTML snippet or DOM node from the story: "${t}" of "${r}".`,description:y.dedent`
+  `),new Error(`Unable to render story ${t}`)};function H({storyFn:e,kind:r,name:t,showMain:o,showError:n,forceRemount:s},i){let p=e();if(o(),typeof p=="string")i.innerHTML=p,(0,u.simulatePageLoad)(i);else if(p instanceof _){if(i.firstChild===p&&s===!1)return;i.innerHTML="",i.appendChild(p),(0,u.simulateDOMContentLoaded)()}else n({title:`Expecting an HTML snippet or DOM node from the story: "${t}" of "${r}".`,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 $={framework:"html",...T};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToDOM});
+      `})}var $={framework:"html",...T};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToCanvas});

package/dist/config.mjs

@@ -1 +1 @@
-import{a as m,b as i}from"./chunk-6IUTZSAA.mjs";import{SourceType as g,enhanceArgTypes as D}from"@storybook/docs-tools";import{SNIPPET_RENDERED as p,SourceType as s}from"@storybook/docs-tools";import{addons as u,useEffect as f}from"@storybook/addons";import{dedent as d}from"ts-dedent";function y(o){let r=o?.parameters.docs?.source,e=o?.parameters.__isArgsStory;return r?.type===s.DYNAMIC?!1:!e||r?.code||r?.type===s.CODE}function S(o){return d(o)}function l(o,r){return((r.parameters.docs??{}).transformSource??S)(o,r)}function a(o,r){let e=r?.parameters.docs?.source?.excludeDecorators?r.originalStoryFn(r.args,r):o(),t;return y(r)||(typeof e=="string"?t=e:e instanceof Element&&(t=e.outerHTML),t&&(t=l(t,r))),f(()=>{t&&u.getChannel().emit(p,r.id,t)}),e}var T=[a],c={docs:{inlineStories:!0,transformSource:void 0,source:{type:g.DYNAMIC,language:"html",code:void 0,excludeDecorators:void 0}}},E=[D];var M={framework:"html",...c};export{E as argTypesEnhancers,T as decorators,M as parameters,m as render,i as renderToDOM};
+import{a as c,b as m}from"./chunk-3CDDCMPH.mjs";import{SourceType as l,enhanceArgTypes as g}from"@storybook/docs-tools";import{SNIPPET_RENDERED as i,SourceType as s}from"@storybook/docs-tools";import{addons as p,useEffect as u}from"@storybook/addons";import{dedent as f}from"ts-dedent";function d(o){let r=o?.parameters.docs?.source,e=o?.parameters.__isArgsStory;return r?.type===s.DYNAMIC?!1:!e||r?.code||r?.type===s.CODE}function y(o){return f(o)}function S(o,r){return((r.parameters.docs??{}).transformSource??y)(o,r)}function n(o,r){let e=r?.parameters.docs?.source?.excludeDecorators?r.originalStoryFn(r.args,r):o(),t;return d(r)||(typeof e=="string"?t=e:e instanceof Element&&(t=e.outerHTML),t&&(t=S(t,r))),u(()=>{t&&p.getChannel().emit(i,r.id,t)}),e}var T=[n],a={docs:{inlineStories:!0,transformSource:void 0,source:{type:l.DYNAMIC,language:"html",code:void 0,excludeDecorators:void 0}}},C=[g];var A={framework:"html",...a};export{C as argTypesEnhancers,T as decorators,A as parameters,c as render,m as renderToCanvas};

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Addon_ClientStoryApi, Addon_Loadable, Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations } from '@storybook/types';
 export { ArgTypes, Args, Parameters } from '@storybook/types';
-import { H as HtmlFramework } from './types-b05dd2df.js';
+import { H as HtmlFramework } from './types-84590f3a.js';
 import 'lib/docs-tools/dist';
 import 'lib/types/dist';
 

package/dist/index.js

@@ -1,7 +1,7 @@
-"use strict";var C=Object.create;var d=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var L=(e,o)=>{for(var r in o)d(e,r,{get:o[r],enumerable:!0})},c=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of H(o))!h.call(e,t)&&t!==r&&d(e,t,{get:()=>o[t],enumerable:!(n=g(o,t))||n.enumerable});return e};var a=(e,o,r)=>(r=e!=null?C(b(e)):{},c(o||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e)),T=e=>c(d({},"__esModule",{value:!0}),e);var E={};L(E,{configure:()=>k,forceReRender:()=>_,raw:()=>D,storiesOf:()=>F});module.exports=T(E);var u=a(require("global")),{window:x}=u.default;x.STORYBOOK_ENV="HTML";var O=require("@storybook/core-client");var y=a(require("global")),m=require("ts-dedent"),f=require("@storybook/preview-web"),{Node:S}=y.default,A=(e,o)=>{let{id:r,component:n}=o;if(typeof n=="string"){let t=n;return Object.keys(e).forEach(i=>{t=t.replace(`{{${i}}}`,e[i])}),t}if(n instanceof HTMLElement){let t=n.cloneNode(!0);return Object.keys(e).forEach(i=>{t.setAttribute(i,typeof e[i]=="string"?e[i]:JSON.stringify(e[i]))}),t}if(typeof n=="function")return n(e,o);throw console.warn(m.dedent`
+"use strict";var O=Object.create;var d=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var L=(e,o)=>{for(var r in o)d(e,r,{get:o[r],enumerable:!0})},a=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of M(o))!h.call(e,t)&&t!==r&&d(e,t,{get:()=>o[t],enumerable:!(n=g(o,t))||n.enumerable});return e};var c=(e,o,r)=>(r=e!=null?O(b(e)):{},a(o||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e)),T=e=>a(d({},"__esModule",{value:!0}),e);var N={};L(N,{configure:()=>k,forceReRender:()=>_,raw:()=>E,storiesOf:()=>S});module.exports=T(N);var u=c(require("global")),{window:x}=u.default;x.STORYBOOK_ENV="HTML";var C=require("@storybook/core-client");var y=c(require("global")),l=require("ts-dedent"),f=require("@storybook/preview-web"),{Node:F}=y.default,w=(e,o)=>{let{id:r,component:n}=o;if(typeof n=="string"){let t=n;return Object.keys(e).forEach(i=>{t=t.replace(`{{${i}}}`,e[i])}),t}if(n instanceof HTMLElement){let t=n.cloneNode(!0);return Object.keys(e).forEach(i=>{t.setAttribute(i,typeof e[i]=="string"?e[i]:JSON.stringify(e[i]))}),t}if(typeof n=="function")return n(e,o);throw console.warn(l.dedent`
     Storybook's HTML renderer only supports rendering DOM elements and strings.
     Received: ${n}
-  `),new Error(`Unable to render story ${r}`)};function w({storyFn:e,kind:o,name:r,showMain:n,showError:t,forceRemount:i},p){let s=e();if(n(),typeof s=="string")p.innerHTML=s,(0,f.simulatePageLoad)(p);else if(s instanceof S){if(p.firstChild===s&&i===!1)return;p.innerHTML="",p.appendChild(s),(0,f.simulateDOMContentLoaded)()}else t({title:`Expecting an HTML snippet or DOM node from the story: "${r}" of "${o}".`,description:m.dedent`
+  `),new Error(`Unable to render story ${r}`)};function A({storyFn:e,kind:o,name:r,showMain:n,showError:t,forceRemount:i},p){let s=e();if(n(),typeof s=="string")p.innerHTML=s,(0,f.simulatePageLoad)(p);else if(s instanceof F){if(p.firstChild===s&&i===!1)return;p.innerHTML="",p.appendChild(s),(0,f.simulateDOMContentLoaded)()}else t({title:`Expecting an HTML snippet or DOM node from the story: "${r}" of "${o}".`,description:l.dedent`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
-      `})}var R="html",l=(0,O.start)(w,{render:A}),F=(e,o)=>l.clientApi.storiesOf(e,o).addParameters({framework:R}),k=(...e)=>l.configure(R,...e),_=l.forceReRender,D=l.clientApi.raw;var M;(M=module==null?void 0:module.hot)==null||M.decline();0&&(module.exports={configure,forceReRender,raw,storiesOf});
+      `})}var R="html",m=(0,C.start)(A,{render:w}),S=(e,o)=>m.clientApi.storiesOf(e,o).addParameters({framework:R}),k=(...e)=>m.configure(R,...e),_=m.forceReRender,E=m.clientApi.raw;var H;(H=module==null?void 0:module.hot)==null||H.decline();0&&(module.exports={configure,forceReRender,raw,storiesOf});

package/dist/index.mjs

@@ -1 +1 @@
-import{a as e,b as n}from"./chunk-6IUTZSAA.mjs";import i from"global";var{window:m}=i;m.STORYBOOK_ENV="HTML";import{start as A}from"@storybook/core-client";var s="html",o=A(n,{render:e}),l=(r,p)=>o.clientApi.storiesOf(r,p).addParameters({framework:s}),f=(...r)=>o.configure(s,...r),g=o.forceReRender,c=o.clientApi.raw;module?.hot?.decline();export{f as configure,g as forceReRender,c as raw,l as storiesOf};
+import{a as r,b as t}from"./chunk-3CDDCMPH.mjs";import d from"global";var{window:p}=d;p.STORYBOOK_ENV="HTML";import{start as l}from"@storybook/core-client";var i="html",e=l(t,{render:r}),f=(o,n)=>e.clientApi.storiesOf(o,n).addParameters({framework:i}),c=(...o)=>e.configure(i,...o),A=e.forceReRender,R=e.clientApi.raw;module?.hot?.decline();export{c as configure,A as forceReRender,R as raw,f as storiesOf};

package/dist/{types-b05dd2df.d.ts → types-84590f3a.d.ts}

@@ -1,14 +1,14 @@
-import { PartialStoryFn, ArgsStoryFn, Store_RenderContext, StoryContext as StoryContext$1 } from '@storybook/types';
+import { PartialStoryFn, ArgsStoryFn, Store_RenderContext, WebFramework, StoryContext as StoryContext$1 } from '@storybook/types';
 import * as lib_docs_tools_dist from 'lib/docs-tools/dist';
 import * as lib_types_dist from 'lib/types/dist';
 
 declare function sourceDecorator(storyFn: PartialStoryFn<HtmlFramework>, context: StoryContext): StoryFnHtmlReturnType;
 
 declare const decorators: (typeof sourceDecorator)[];
-declare const argTypesEnhancers: (<TFramework extends lib_types_dist.AnyFramework>(context: lib_types_dist.StoryContextForEnhancers<TFramework, lib_types_dist.Args>) => lib_types_dist.StrictArgTypes<lib_types_dist.Args>)[];
+declare const argTypesEnhancers: (<TFramework extends lib_types_dist.Framework>(context: lib_types_dist.StoryContextForEnhancers<TFramework, lib_types_dist.Args>) => lib_types_dist.StrictArgTypes<lib_types_dist.Args>)[];
 
 declare const render: ArgsStoryFn<HtmlFramework>;
-declare function renderToDOM({ storyFn, kind, name, showMain, showError, forceRemount }: Store_RenderContext<HtmlFramework>, domElement: Element): void;
+declare function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount }: Store_RenderContext<HtmlFramework>, canvasElement: HtmlFramework['canvasElement']): void;
 
 declare const parameters: {
     docs: {
@@ -25,12 +25,12 @@ declare const parameters: {
 };
 
 declare type StoryFnHtmlReturnType = string | Node;
-declare type HtmlFramework = {
+interface HtmlFramework extends WebFramework {
     component: string | HTMLElement | ArgsStoryFn<HtmlFramework>;
     storyResult: StoryFnHtmlReturnType;
-};
+}
 declare type StoryContext = StoryContext$1<HtmlFramework> & {
     parameters: StoryContext$1<HtmlFramework>['parameters'] & typeof parameters;
 };
 
-export { HtmlFramework as H, argTypesEnhancers as a, render as b, decorators as d, parameters as p, renderToDOM as r };
+export { HtmlFramework as H, argTypesEnhancers as a, render as b, decorators as d, parameters as p, renderToCanvas as r };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "7.0.0-alpha.47",
+  "version": "7.0.0-alpha.49",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
@@ -51,12 +51,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "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",
+    "@storybook/addons": "7.0.0-alpha.49",
+    "@storybook/core-client": "7.0.0-alpha.49",
+    "@storybook/docs-tools": "7.0.0-alpha.49",
+    "@storybook/preview-web": "7.0.0-alpha.49",
+    "@storybook/store": "7.0.0-alpha.49",
+    "@storybook/types": "7.0.0-alpha.49",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -81,5 +81,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "1c706a4a778831e012343c905f86225fa71491a7"
+  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
 }

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

@@ -3,6 +3,8 @@ import { createButton } from './Button';
 // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 export default {
   title: 'Example/Button',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
+  tags: ['docsPage'],
   // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
   render: ({ label, ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!

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

@@ -2,6 +2,8 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => createHeader(args),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout

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

@@ -5,6 +5,8 @@ import { createButton } from './Button';
 // More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;

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

@@ -4,6 +4,8 @@ import { createHeader } from './Header';
 
 const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
+  tags: ['docsPage'],
   render: (args) => createHeader(args),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout