@storybook/react 7.0.0-alpha.5 → 7.0.0-alpha.51

package/dist/chunk-3ETZESFO.mjs

@@ -0,0 +1 @@
+import E from"global";import n,{Component as y,StrictMode as C,Fragment as w,useLayoutEffect as g,useRef as x}from"react";import l,{version as i}from"react-dom";var{FRAMEWORK_OPTIONS:u}=E,s=new Map,O=(t,e)=>{let{id:o,component:r}=e;if(!r)throw new Error(`Unable to render story ${o} as the component annotation is missing from the default export`);return n.createElement(r,{...t})},S=({callback:t,children:e})=>{let o=x();return g(()=>{o.current!==t&&(o.current=t,t())},[t]),e},M=async(t,e)=>{let o=await D(e);return new Promise(r=>{o?o.render(n.createElement(S,{callback:()=>r(null)},t)):l.render(t,e,()=>r(null))})},A=i&&(i.startsWith("18")||i.startsWith("0.0.0")),F=u?.legacyRootApi!==!0,R=F&&A,p=t=>{let e=s.get(t);e&&R?(e.unmount(),s.delete(t)):l.unmountComponentAtNode(t)},D=async t=>{if(!R)return null;let e=s.get(t);return e||(e=(await import("react-dom/client")).default.createRoot(t),s.set(t,e)),e},a=class extends y{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidMount(){let{hasError:o}=this.state,{showMain:r}=this.props;o||r()}componentDidCatch(o){let{showException:r}=this.props;r(o)}render(){let{hasError:o}=this.state,{children:r}=this.props;return o?null:r}},d=u?.strictMode?C:w;async function U({storyContext:t,unboundStoryFn:e,showMain:o,showException:r,forceRemount:h},c){let m=n.createElement(a,{showMain:o,showException:r},n.createElement(e,{...t})),f=d?n.createElement(d,null,m):m;return h&&p(c),await M(f,c),()=>p(c)}export{O as a,U as b};

package/dist/config.d.ts

@@ -0,0 +1,22 @@
+import * as lib_docs_tools_dist from 'lib/docs-tools/dist';
+import { R as ReactRenderer, S as StoryFnReactReturnType } from './types-7d102855.js';
+import * as lib_types_dist from 'lib/types/dist';
+import { ArgsStoryFn, Store_RenderContext } from '@storybook/types';
+import 'react';
+
+declare const decorators: ((storyFn: lib_types_dist.PartialStoryFn<ReactRenderer, lib_types_dist.Args>, context: lib_types_dist.StoryContext<ReactRenderer, lib_types_dist.Args>) => StoryFnReactReturnType)[];
+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 const render: ArgsStoryFn<ReactRenderer>;
+declare function renderToCanvas({ storyContext, unboundStoryFn, showMain, showException, forceRemount, }: Store_RenderContext<ReactRenderer>, canvasElement: ReactRenderer['canvasElement']): Promise<() => void>;
+
+declare const parameters: {
+    docs: {
+        inlineStories: boolean;
+        extractArgTypes: lib_docs_tools_dist.ArgTypesExtractor;
+        extractComponentDescription: typeof lib_docs_tools_dist.extractComponentDescription;
+    };
+    framework: string;
+};
+
+export { argTypesEnhancers, decorators, parameters, render, renderToCanvas };

package/dist/config.js

@@ -0,0 +1,3 @@
+"use strict";var nt=Object.create;var v=Object.defineProperty;var ot=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var it=Object.getPrototypeOf,pt=Object.prototype.hasOwnProperty;var at=(e,t)=>{for(var r in t)v(e,r,{get:t[r],enumerable:!0})},le=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of st(t))!pt.call(e,o)&&o!==r&&v(e,o,{get:()=>t[o],enumerable:!(n=ot(t,o))||n.enumerable});return e};var l=(e,t,r)=>(r=e!=null?nt(it(e)):{},le(t||!e||!e.__esModule?v(r,"default",{value:e,enumerable:!0}):r,e)),ct=e=>le(v({},"__esModule",{value:!0}),e);var rr={};at(rr,{argTypesEnhancers:()=>Ge,decorators:()=>Ke,parameters:()=>tr,render:()=>et,renderToCanvas:()=>rt});module.exports=ct(rr);var z=require("@storybook/docs-tools");var pe=l(require("prop-types")),P=require("@storybook/docs-tools");var C=require("@storybook/docs-tools");function fe(e,t){let r=e!=null,n=t!=null;if(!r&&!n)return"";let o=[];if(r){let s=e.map(p=>{let a=p.getPrettyName(),i=p.getTypeName();return i!=null?`${a}: ${i}`:a});o.push(`(${s.join(", ")})`)}else o.push("()");return n&&o.push(`=> ${t.getTypeName()}`),o.join(" ")}function me(e,t){let r=e!=null,n=t!=null;if(!r&&!n)return"";let o=[];return r?o.push("( ... )"):o.push("()"),n&&o.push(`=> ${t.getTypeName()}`),o.join(" ")}function ye(e){return e.replace(/,/g,`,\r
+`)}var w="custom",I="object",j="array",Te="class",y="func",T="element";var de=l(require("html-tags"));function x(e){return de.default.includes(e.toLowerCase())}var ge=require("escodegen"),Ee=require("ts-dedent"),Ie={format:{indent:{style:"  "},semicolons:!1}},ut={...Ie,format:{newline:""}},lt={...Ie};function d(e,t=!1){return(0,ge.generate)(e,t?ut:lt)}function J(e,t=!1){return t?ft(e):d(e)}function ft(e){let t=d(e,!0);return t.endsWith(" }")||(t=`${t.slice(0,-1)} }`),t}function Z(e,t=!1){return t?yt(e):mt(e)}function mt(e){let t=d(e);return t.endsWith("  }]")&&(t=(0,Ee.dedent)(t)),t}function yt(e){let t=d(e,!0);return t.startsWith("[    ")&&(t=t.replace("[    ","[")),t}var _=e=>e.$$typeof===Symbol.for("react.memo"),he=e=>e.$$typeof===Symbol.for("react.forward_ref");var Ce=require("acorn"),Pe=l(require("acorn-jsx")),R=l(require("acorn-walk"));var ee={...R.base,JSXElement:()=>{}},Tt=Ce.Parser.extend((0,Pe.default)());function M(e){return e!=null?e.name:null}function Re(e){return e.filter(t=>t.type==="ObjectExpression"||t.type==="ArrayExpression")}function Ne(e){let t=[];return R.ancestor(e,{ObjectExpression(r,n){t.push(Re(n).length)},ArrayExpression(r,n){t.push(Re(n).length)}},ee),Math.max(...t)}function dt(e){return{inferredType:{type:"Identifier",identifier:M(e)},ast:e}}function gt(e){return{inferredType:{type:"Literal"},ast:e}}function Et(e){let t;R.simple(e.body,{JSXElement(s){t=s}},ee);let n={type:t!=null?"Element":"Function",params:e.params,hasParams:e.params.length!==0},o=M(e.id);return o!=null&&(n.identifier=o),{inferredType:n,ast:e}}function It(e){let t;return R.simple(e.body,{JSXElement(n){t=n}},ee),{inferredType:{type:t!=null?"Element":"Class",identifier:M(e.id)},ast:e}}function ht(e){let t={type:"Element"},r=M(e.openingElement.name);return r!=null&&(t.identifier=r),{inferredType:t,ast:e}}function Rt(e){let t=e.callee.type==="MemberExpression"?e.callee.property:e.callee;return M(t)==="shape"?Oe(e.arguments[0]):null}function Oe(e){return{inferredType:{type:"Object",depth:Ne(e)},ast:e}}function Ct(e){return{inferredType:{type:"Array",depth:Ne(e)},ast:e}}function Pt(e){switch(e.type){case"Identifier":return dt(e);case"Literal":return gt(e);case"FunctionExpression":case"ArrowFunctionExpression":return Et(e);case"ClassExpression":return It(e);case"JSXElement":return ht(e);case"CallExpression":return Rt(e);case"ObjectExpression":return Oe(e);case"ArrayExpression":return Ct(e);default:return null}}function xe(e){let t=Tt.parse(`(${e})`),r={inferredType:{type:"Unknown"},ast:t};if(t.body[0]!=null){let n=t.body[0];switch(n.type){case"ExpressionStatement":{let o=Pt(n.expression);o!=null&&(r=o);break}default:break}}return r}function f(e){try{return{...xe(e)}}catch{}return{inferredType:{type:"Unknown"}}}var Nt=150;function c({name:e,short:t,compact:r,full:n,inferredType:o}){return{name:e,short:t,compact:r,full:n??t,inferredType:o}}function Fe(e){return e.replace(/PropTypes./g,"").replace(/.isRequired/g,"")}function Ae(e){return e.split(/\r?\n/)}function B(e,t=!1){return Fe(J(e,t))}function Se(e,t=!1){return Fe(d(e,t))}function Ot(e){switch(e){case"Object":return I;case"Array":return j;case"Class":return Te;case"Function":return y;case"Element":return T;default:return w}}function je(e,t){let{inferredType:r,ast:n}=f(e),{type:o}=r,s,p,a;switch(o){case"Identifier":case"Literal":s=e,p=e;break;case"Object":{let{depth:i}=r;s=I,p=i===1?B(n,!0):null,a=B(n);break}case"Element":{let{identifier:i}=r;s=i!=null&&!x(i)?i:T,p=Ae(e).length===1?e:null,a=e;break}case"Array":{let{depth:i}=r;s=j,p=i<=2?Se(n,!0):null,a=Se(n);break}default:s=Ot(o),p=Ae(e).length===1?e:null,a=e;break}return c({name:t,short:s,compact:p,full:a,inferredType:o})}function xt({raw:e}){return e!=null?je(e,"custom"):c({name:"custom",short:w,compact:w})}function At(e){let{jsDocTags:t}=e;return t!=null&&(t.params!=null||t.returns!=null)?c({name:"func",short:me(t.params,t.returns),compact:null,full:fe(t.params,t.returns)}):c({name:"func",short:y,compact:y})}function St(e,t){let r=Object.keys(e.value).map(p=>`${p}: ${A(e.value[p],t).full}`).join(", "),{inferredType:n,ast:o}=f(`{ ${r} }`),{depth:s}=n;return c({name:"shape",short:I,compact:s===1&&o?B(o,!0):null,full:o?B(o):null})}function te(e){return`objectOf(${e})`}function bt(e,t){let{short:r,compact:n,full:o}=A(e.value,t);return c({name:"objectOf",short:te(r),compact:n!=null?te(n):null,full:o&&te(o)})}function Dt(e,t){if(Array.isArray(e.value)){let r=e.value.reduce((n,o)=>{let{short:s,compact:p,full:a}=A(o,t);return n.short.push(s),n.compact.push(p),n.full.push(a),n},{short:[],compact:[],full:[]});return c({name:"union",short:r.short.join(" | "),compact:r.compact.every(n=>n!=null)?r.compact.join(" | "):null,full:r.full.join(" | ")})}return c({name:"union",short:e.value,compact:null})}function Ft({value:e,computed:t}){return t?je(e,"enumvalue"):c({name:"enumvalue",short:e,compact:e})}function jt(e){if(Array.isArray(e.value)){let t=e.value.reduce((r,n)=>{let{short:o,compact:s,full:p}=Ft(n);return r.short.push(o),r.compact.push(s),r.full.push(p),r},{short:[],compact:[],full:[]});return c({name:"enum",short:t.short.join(" | "),compact:t.compact.every(r=>r!=null)?t.compact.join(" | "):null,full:t.full.join(" | ")})}return c({name:"enum",short:e.value,compact:e.value})}function re(e){return`${e}[]`}function be(e){return`[${e}]`}function De(e,t,r){return c({name:"arrayOf",short:re(e),compact:t!=null?be(t):null,full:r&&be(r)})}function Jt(e,t){let{name:r,short:n,compact:o,full:s,inferredType:p}=A(e.value,t);if(r==="custom"){if(p==="Object")return De(n,o,s)}else if(r==="shape")return De(n,o,s);return c({name:"arrayOf",short:re(n),compact:re(n)})}function A(e,t){try{switch(e.name){case"custom":return xt(e);case"func":return At(t);case"shape":return St(e,t);case"instanceOf":return c({name:"instanceOf",short:e.value,compact:e.value});case"objectOf":return bt(e,t);case"union":return Dt(e,t);case"enum":return jt(e);case"arrayOf":return Jt(e,t);default:return c({name:e.name,short:e.name,compact:e.name})}}catch(r){console.error(r)}return c({name:"unknown",short:"unknown",compact:"unknown"})}function Je(e){let{type:t}=e.docgenInfo;if(t==null)return null;try{switch(t.name){case"custom":case"shape":case"instanceOf":case"objectOf":case"union":case"enum":case"arrayOf":{let{short:r,compact:n,full:o}=A(t,e);return n!=null&&!(0,C.isTooLongForTypeSummary)(n)?(0,C.createSummaryValue)(n):o?(0,C.createSummaryValue)(r,o):(0,C.createSummaryValue)(r)}case"func":{let{short:r,full:n}=A(t,e),o=r,s;return n&&n.length<Nt?o=n:n&&(s=ye(n)),(0,C.createSummaryValue)(o,s)}default:return null}}catch(r){console.error(r)}return null}var g=require("@storybook/docs-tools");var L=require("@storybook/docs-tools");function Y({inferredType:e,ast:t}){let{depth:r}=e;if(r===1){let n=J(t,!0);if(!(0,L.isTooLongForDefaultValueSummary)(n))return(0,L.createSummaryValue)(n)}return(0,L.createSummaryValue)(I,J(t))}var U=require("@storybook/docs-tools");function W({inferredType:e,ast:t}){let{depth:r}=e;if(r<=2){let n=Z(t,!0);if(!(0,U.isTooLongForDefaultValueSummary)(n))return(0,U.createSummaryValue)(n)}return(0,U.createSummaryValue)(j,Z(t))}function V(e,t){return t?`${e}( ... )`:`${e}()`}function S(e){return`<${e} />`}function ne(e){let{type:t,identifier:r}=e;switch(t){case"Function":return V(r,e.hasParams);case"Element":return S(r);default:return r}}function Mt({inferredType:e,ast:t}){let{identifier:r}=e;if(r!=null)return(0,g.createSummaryValue)(ne(e),d(t));let n=d(t,!0);return(0,g.isTooLongForDefaultValueSummary)(n)?(0,g.createSummaryValue)(y,d(t)):(0,g.createSummaryValue)(n)}function Lt(e,t){let{inferredType:r}=t,{identifier:n}=r;if(n!=null&&!x(n)){let o=ne(r);return(0,g.createSummaryValue)(o,e)}return(0,g.isTooLongForDefaultValueSummary)(e)?(0,g.createSummaryValue)(T,e):(0,g.createSummaryValue)(e)}function X(e){try{let t=f(e);switch(t.inferredType.type){case"Object":return Y(t);case"Function":return Mt(t);case"Element":return Lt(e,t);case"Array":return W(t);default:return null}}catch(t){console.error(t)}return null}var Me=l(require("lodash/isPlainObject")),oe=l(require("lodash/isFunction")),Le=l(require("lodash/isString")),se=l(require("react-element-to-jsx-string")),m=require("@storybook/docs-tools");function Ue(e){return e.$$typeof!=null}function ie(e,t){let{name:r}=e;return r!==""&&r!=="anonymous"&&r!==t?r:null}var Ut=e=>(0,m.createSummaryValue)(JSON.stringify(e));function Vt(e){let{type:t}=e,{displayName:r}=t,n=(0,se.default)(e,{});if(r!=null){let o=S(r);return(0,m.createSummaryValue)(o,n)}if((0,Le.default)(t)&&x(t)){let s=(0,se.default)(e,{tabStop:0}).replace(/\r?\n|\r/g,"");if(!(0,m.isTooLongForDefaultValueSummary)(s))return(0,m.createSummaryValue)(s)}return(0,m.createSummaryValue)(T,n)}var kt=e=>{if(Ue(e)&&e.type!=null)return Vt(e);if((0,Me.default)(e)){let t=f(JSON.stringify(e));return Y(t)}if(Array.isArray(e)){let t=f(JSON.stringify(e));return W(t)}return(0,m.createSummaryValue)(I)},vt=(e,t)=>{let r=!1,n;if((0,oe.default)(e.render))r=!0;else if(e.prototype!=null&&(0,oe.default)(e.prototype.render))r=!0;else{let s;try{n=f(e.toString());let{hasParams:p,params:a}=n.inferredType;p?a.length===1&&a[0].type==="ObjectPattern"&&(s=e({})):s=e(),s!=null&&Ue(s)&&(r=!0)}catch{}}let o=ie(e,t.name);if(o!=null){if(r)return(0,m.createSummaryValue)(S(o));n!=null&&(n=f(e.toString()));let{hasParams:s}=n.inferredType;return(0,m.createSummaryValue)(V(o,s))}return(0,m.createSummaryValue)(r?T:y)},wt=e=>(0,m.createSummaryValue)(e.toString()),Ve={string:Ut,object:kt,function:vt,default:wt};function ke(e={}){return{...Ve,...e}}function H(e,t,r=Ve){try{switch(typeof e){case"string":return r.string(e,t);case"object":return r.object(e,t);case"function":return r.function(e,t);default:return r.default(e,t)}}catch(n){console.error(n)}return null}function ve(e,t){let{propTypes:r}=t;return r!=null?Object.keys(r).map(n=>e.find(o=>o.name===n)).filter(Boolean):e}var q=require("@storybook/docs-tools");var _t=(e,{name:t,type:r})=>{let n=r.summary==="element"||r.summary==="elementType",o=ie(e,t);if(o!=null){if(n)return(0,q.createSummaryValue)(S(o));let{hasParams:s}=f(e.toString()).inferredType;return(0,q.createSummaryValue)(V(o,s))}return(0,q.createSummaryValue)(n?T:y)},we=ke({function:_t});function $t(e,t){let{propDef:r}=e,n=Je(e);n!=null&&(r.type=n);let{defaultValue:o}=e.docgenInfo;if(o!=null&&o.value!=null){let s=X(o.value);s!=null&&(r.defaultValue=s)}else if(t!=null){let s=H(t,r,we);s!=null&&(r.defaultValue=s)}return r}function _e(e,t){let r=t.defaultProps!=null?t.defaultProps:{},n=e.map(o=>$t(o,r[o.propDef.name]));return ve(n,t)}function Bt(e,t){let{propDef:r}=e,{defaultValue:n}=e.docgenInfo;if(n!=null&&n.value!=null){let o=X(n.value);o!=null&&(r.defaultValue=o)}else if(t!=null){let o=H(t,r);o!=null&&(r.defaultValue=o)}return r}function $e(e){return e.map(t=>Bt(t))}var Be=new Map;Object.keys(pe.default).forEach(e=>{let t=pe.default[e];Be.set(t,e),Be.set(t.isRequired,e)});function Yt(e,t){let r=e;!(0,P.hasDocgen)(e)&&!e.propTypes&&_(e)&&(r=e.type);let n=(0,P.extractComponentProps)(r,t);if(n.length===0)return[];switch(n[0].typeSystem){case P.TypeSystem.JAVASCRIPT:return _e(n,e);case P.TypeSystem.TYPESCRIPT:return $e(n);default:return n.map(o=>o.propDef)}}var Ye=e=>({rows:Yt(e,"props")});var We=e=>{if(e){let{rows:t}=Ye(e);if(t)return t.reduce((r,n)=>{let{name:o,description:s,type:p,sbType:a,defaultValue:i,jsDocTags:h,required:F}=n;return r[o]={name:o,description:s,type:{required:F,...a},table:{type:p,jsDocTags:h,defaultValue:i}},r},{})}return null};var b=l(require("react")),K=l(require("react-element-to-jsx-string")),G=require("@storybook/addons"),N=require("@storybook/docs-tools"),k=require("@storybook/client-logger");var Wt=(e,t,r)=>typeof t.transformSource!="function"?e:t.transformSource(e,r),Xt=(e,t)=>{if(typeof e>"u")return k.logger.warn("Too many skip or undefined component"),null;let r=e,n=r.type;for(let i=0;i<t.skip;i+=1){if(typeof r>"u")return k.logger.warn("Cannot skip undefined element"),null;if(b.default.Children.count(r)>1)return k.logger.warn("Trying to skip an array of elements"),null;typeof r.props.children>"u"?(k.logger.warn("Not enough children to skip elements."),typeof r.type=="function"&&r.type.name===""&&(r=b.default.createElement(n,{...r.props}))):typeof r.props.children=="function"?r=r.props.children():r=r.props.children}let p={...typeof t.displayName=="string"?{showFunctions:!0,displayName:()=>t.displayName}:{displayName:i=>i.type.displayName||(i.type===Symbol.for("react.profiler")?"Profiler":null)||(0,N.getDocgenSection)(i.type,"displayName")||(i.type.name!=="_default"?i.type.name:null)||(typeof i.type=="function"?"No Display Name":null)||(he(i.type)?i.type.render.name:null)||(_(i.type)?i.type.type.name:null)||i.type},...{filterProps:(i,h)=>i!==void 0},...t};return b.default.Children.map(e,i=>{let h=typeof i=="number"?i.toString():i,E=(typeof K.default=="function"?K.default:K.default.default)(h,p);if(E.indexOf("&quot;")>-1){let ce=E.match(/\S+=\\"([^"]*)\\"/g);ce&&ce.forEach(ue=>{E=E.replace(ue,ue.replace(/&quot;/g,"'"))})}return E}).join(`
+`).replace(/function\s+noRefCheck\(\)\s+\{\}/g,"() => {}")},Ht={skip:0,showFunctions:!1,enableBeautify:!0,showDefaultProps:!1},qt=e=>{var n;let t=(n=e==null?void 0:e.parameters.docs)==null?void 0:n.source,r=e==null?void 0:e.parameters.__isArgsStory;return(t==null?void 0:t.type)===N.SourceType.DYNAMIC?!1:!r||(t==null?void 0:t.code)||(t==null?void 0:t.type)===N.SourceType.CODE},Kt=e=>{var t,r;return((t=e.type)==null?void 0:t.displayName)==="MDXCreateElement"&&!!((r=e.props)!=null&&r.mdxType)},Xe=e=>{if(!Kt(e))return e;let{mdxType:t,originalType:r,children:n,...o}=e.props,s=[];return n&&(s=(Array.isArray(n)?n:[n]).map(Xe)),(0,b.createElement)(r,o,...s)},He=(e,t)=>{var F,E;let r=G.addons.getChannel(),n=qt(t),o="";(0,G.useEffect)(()=>{n||r.emit(N.SNIPPET_RENDERED,(t||{}).id,o)});let s=e();if(n)return s;let p={...Ht,...(t==null?void 0:t.parameters.jsx)||{}},a=(E=(F=t==null?void 0:t.parameters.docs)==null?void 0:F.source)!=null&&E.excludeDecorators?t.originalStoryFn(t.args,t):s,i=Xe(a),h=Xt(i,p);return h&&(o=Wt(h,p,t)),s};var qe={docs:{inlineStories:!0,extractArgTypes:We,extractComponentDescription:z.extractComponentDescription}},Ke=[He],Ge=[z.enhanceArgTypes];var Ze=l(require("global")),u=l(require("react")),O=l(require("react-dom")),{FRAMEWORK_OPTIONS:D}=Ze.default,Q=new Map,et=(e,t)=>{let{id:r,component:n}=t;if(!n)throw new Error(`Unable to render story ${r} as the component annotation is missing from the default export`);return u.default.createElement(n,{...e})},Gt=({callback:e,children:t})=>{let r=(0,u.useRef)();return(0,u.useLayoutEffect)(()=>{r.current!==e&&(r.current=e,e())},[e]),t},zt=async(e,t)=>{let r=await er(t);return new Promise(n=>{r?r.render(u.default.createElement(Gt,{callback:()=>n(null)},e)):O.default.render(e,t,()=>n(null))})},Qt=O.version&&(O.version.startsWith("18")||O.version.startsWith("0.0.0")),Zt=(D==null?void 0:D.legacyRootApi)!==!0,tt=Zt&&Qt,ze=e=>{let t=Q.get(e);t&&tt?(t.unmount(),Q.delete(e)):O.default.unmountComponentAtNode(e)},er=async e=>{if(!tt)return null;let t=Q.get(e);return t||(t=(await import("react-dom/client")).default.createRoot(e),Q.set(e,t)),t},ae=class extends u.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidMount(){let{hasError:r}=this.state,{showMain:n}=this.props;r||n()}componentDidCatch(r){let{showException:n}=this.props;n(r)}render(){let{hasError:r}=this.state,{children:n}=this.props;return r?null:n}},Qe=D!=null&&D.strictMode?u.StrictMode:u.Fragment;async function rt({storyContext:e,unboundStoryFn:t,showMain:r,showException:n,forceRemount:o},s){let a=u.default.createElement(ae,{showMain:r,showException:n},u.default.createElement(t,{...e})),i=Qe?u.default.createElement(Qe,null,a):a;return o&&ze(s),await zt(i,s),()=>ze(s)}var tr={framework:"react",...qe};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToCanvas});

package/dist/config.mjs

@@ -0,0 +1,3 @@
+import{a as Je,b as Le}from"./chunk-3ETZESFO.mjs";import{extractComponentDescription as vt,enhanceArgTypes as _t}from"@storybook/docs-tools";import Ce from"prop-types";import{hasDocgen as ht,extractComponentProps as At,TypeSystem as Re}from"@storybook/docs-tools";import{createSummaryValue as D,isTooLongForTypeSummary as et}from"@storybook/docs-tools";function K(e,t){let r=e!=null,n=t!=null;if(!r&&!n)return"";let o=[];if(r){let s=e.map(p=>{let a=p.getPrettyName(),i=p.getTypeName();return i!=null?`${a}: ${i}`:a});o.push(`(${s.join(", ")})`)}else o.push("()");return n&&o.push(`=> ${t.getTypeName()}`),o.join(" ")}function G(e,t){let r=e!=null,n=t!=null;if(!r&&!n)return"";let o=[];return r?o.push("( ... )"):o.push("()"),n&&o.push(`=> ${t.getTypeName()}`),o.join(" ")}function z(e){return e.replace(/,/g,`,\r
+`)}var A="custom",T="object",x="array",Q="class",l="func",f="element";import Ve from"html-tags";function I(e){return Ve.includes(e.toLowerCase())}import{generate as Me}from"escodegen";import{dedent as Ue}from"ts-dedent";var Z={format:{indent:{style:"  "},semicolons:!1}},ke={...Z,format:{newline:""}},ve={...Z};function m(e,t=!1){return Me(e,t?ke:ve)}function C(e,t=!1){return t?_e(e):m(e)}function _e(e){let t=m(e,!0);return t.endsWith(" }")||(t=`${t.slice(0,-1)} }`),t}function U(e,t=!1){return t?$e(e):we(e)}function we(e){let t=m(e);return t.endsWith("  }]")&&(t=Ue(t)),t}function $e(e){let t=m(e,!0);return t.startsWith("[    ")&&(t=t.replace("[    ","[")),t}var S=e=>e.$$typeof===Symbol.for("react.memo"),ee=e=>e.$$typeof===Symbol.for("react.forward_ref");import{Parser as Be}from"acorn";import Ye from"acorn-jsx";import*as g from"acorn-walk";var k={...g.base,JSXElement:()=>{}},Xe=Be.extend(Ye());function R(e){return e!=null?e.name:null}function te(e){return e.filter(t=>t.type==="ObjectExpression"||t.type==="ArrayExpression")}function re(e){let t=[];return g.ancestor(e,{ObjectExpression(r,n){t.push(te(n).length)},ArrayExpression(r,n){t.push(te(n).length)}},k),Math.max(...t)}function We(e){return{inferredType:{type:"Identifier",identifier:R(e)},ast:e}}function He(e){return{inferredType:{type:"Literal"},ast:e}}function qe(e){let t;g.simple(e.body,{JSXElement(s){t=s}},k);let n={type:t!=null?"Element":"Function",params:e.params,hasParams:e.params.length!==0},o=R(e.id);return o!=null&&(n.identifier=o),{inferredType:n,ast:e}}function Ke(e){let t;return g.simple(e.body,{JSXElement(n){t=n}},k),{inferredType:{type:t!=null?"Element":"Class",identifier:R(e.id)},ast:e}}function Ge(e){let t={type:"Element"},r=R(e.openingElement.name);return r!=null&&(t.identifier=r),{inferredType:t,ast:e}}function ze(e){let t=e.callee.type==="MemberExpression"?e.callee.property:e.callee;return R(t)==="shape"?ne(e.arguments[0]):null}function ne(e){return{inferredType:{type:"Object",depth:re(e)},ast:e}}function Qe(e){return{inferredType:{type:"Array",depth:re(e)},ast:e}}function Ze(e){switch(e.type){case"Identifier":return We(e);case"Literal":return He(e);case"FunctionExpression":case"ArrowFunctionExpression":return qe(e);case"ClassExpression":return Ke(e);case"JSXElement":return Ge(e);case"CallExpression":return ze(e);case"ObjectExpression":return ne(e);case"ArrayExpression":return Qe(e);default:return null}}function oe(e){let t=Xe.parse(`(${e})`),r={inferredType:{type:"Unknown"},ast:t};if(t.body[0]!=null){let n=t.body[0];switch(n.type){case"ExpressionStatement":{let o=Ze(n.expression);o!=null&&(r=o);break}default:break}}return r}function u(e){try{return{...oe(e)}}catch{}return{inferredType:{type:"Unknown"}}}var tt=150;function c({name:e,short:t,compact:r,full:n,inferredType:o}){return{name:e,short:t,compact:r,full:n??t,inferredType:o}}function ce(e){return e.replace(/PropTypes./g,"").replace(/.isRequired/g,"")}function se(e){return e.split(/\r?\n/)}function F(e,t=!1){return ce(C(e,t))}function ie(e,t=!1){return ce(m(e,t))}function rt(e){switch(e){case"Object":return T;case"Array":return x;case"Class":return Q;case"Function":return l;case"Element":return f;default:return A}}function ue(e,t){let{inferredType:r,ast:n}=u(e),{type:o}=r,s,p,a;switch(o){case"Identifier":case"Literal":s=e,p=e;break;case"Object":{let{depth:i}=r;s=T,p=i===1?F(n,!0):null,a=F(n);break}case"Element":{let{identifier:i}=r;s=i!=null&&!I(i)?i:f,p=se(e).length===1?e:null,a=e;break}case"Array":{let{depth:i}=r;s=x,p=i<=2?ie(n,!0):null,a=ie(n);break}default:s=rt(o),p=se(e).length===1?e:null,a=e;break}return c({name:t,short:s,compact:p,full:a,inferredType:o})}function nt({raw:e}){return e!=null?ue(e,"custom"):c({name:"custom",short:A,compact:A})}function ot(e){let{jsDocTags:t}=e;return t!=null&&(t.params!=null||t.returns!=null)?c({name:"func",short:G(t.params,t.returns),compact:null,full:K(t.params,t.returns)}):c({name:"func",short:l,compact:l})}function st(e,t){let r=Object.keys(e.value).map(p=>`${p}: ${E(e.value[p],t).full}`).join(", "),{inferredType:n,ast:o}=u(`{ ${r} }`),{depth:s}=n;return c({name:"shape",short:T,compact:s===1&&o?F(o,!0):null,full:o?F(o):null})}function v(e){return`objectOf(${e})`}function it(e,t){let{short:r,compact:n,full:o}=E(e.value,t);return c({name:"objectOf",short:v(r),compact:n!=null?v(n):null,full:o&&v(o)})}function pt(e,t){if(Array.isArray(e.value)){let r=e.value.reduce((n,o)=>{let{short:s,compact:p,full:a}=E(o,t);return n.short.push(s),n.compact.push(p),n.full.push(a),n},{short:[],compact:[],full:[]});return c({name:"union",short:r.short.join(" | "),compact:r.compact.every(n=>n!=null)?r.compact.join(" | "):null,full:r.full.join(" | ")})}return c({name:"union",short:e.value,compact:null})}function at({value:e,computed:t}){return t?ue(e,"enumvalue"):c({name:"enumvalue",short:e,compact:e})}function ct(e){if(Array.isArray(e.value)){let t=e.value.reduce((r,n)=>{let{short:o,compact:s,full:p}=at(n);return r.short.push(o),r.compact.push(s),r.full.push(p),r},{short:[],compact:[],full:[]});return c({name:"enum",short:t.short.join(" | "),compact:t.compact.every(r=>r!=null)?t.compact.join(" | "):null,full:t.full.join(" | ")})}return c({name:"enum",short:e.value,compact:e.value})}function _(e){return`${e}[]`}function pe(e){return`[${e}]`}function ae(e,t,r){return c({name:"arrayOf",short:_(e),compact:t!=null?pe(t):null,full:r&&pe(r)})}function ut(e,t){let{name:r,short:n,compact:o,full:s,inferredType:p}=E(e.value,t);if(r==="custom"){if(p==="Object")return ae(n,o,s)}else if(r==="shape")return ae(n,o,s);return c({name:"arrayOf",short:_(n),compact:_(n)})}function E(e,t){try{switch(e.name){case"custom":return nt(e);case"func":return ot(t);case"shape":return st(e,t);case"instanceOf":return c({name:"instanceOf",short:e.value,compact:e.value});case"objectOf":return it(e,t);case"union":return pt(e,t);case"enum":return ct(e);case"arrayOf":return ut(e,t);default:return c({name:e.name,short:e.name,compact:e.name})}}catch(r){console.error(r)}return c({name:"unknown",short:"unknown",compact:"unknown"})}function le(e){let{type:t}=e.docgenInfo;if(t==null)return null;try{switch(t.name){case"custom":case"shape":case"instanceOf":case"objectOf":case"union":case"enum":case"arrayOf":{let{short:r,compact:n,full:o}=E(t,e);return n!=null&&!et(n)?D(n):o?D(r,o):D(r)}case"func":{let{short:r,full:n}=E(t,e),o=r,s;return n&&n.length<tt?o=n:n&&(s=z(n)),D(o,s)}default:return null}}catch(r){console.error(r)}return null}import{createSummaryValue as O,isTooLongForDefaultValueSummary as ye}from"@storybook/docs-tools";import{createSummaryValue as fe,isTooLongForDefaultValueSummary as lt}from"@storybook/docs-tools";function j({inferredType:e,ast:t}){let{depth:r}=e;if(r===1){let n=C(t,!0);if(!lt(n))return fe(n)}return fe(T,C(t))}import{createSummaryValue as me,isTooLongForDefaultValueSummary as ft}from"@storybook/docs-tools";function J({inferredType:e,ast:t}){let{depth:r}=e;if(r<=2){let n=U(t,!0);if(!ft(n))return me(n)}return me(x,U(t))}function h(e,t){return t?`${e}( ... )`:`${e}()`}function P(e){return`<${e} />`}function w(e){let{type:t,identifier:r}=e;switch(t){case"Function":return h(r,e.hasParams);case"Element":return P(r);default:return r}}function mt({inferredType:e,ast:t}){let{identifier:r}=e;if(r!=null)return O(w(e),m(t));let n=m(t,!0);return ye(n)?O(l,m(t)):O(n)}function yt(e,t){let{inferredType:r}=t,{identifier:n}=r;if(n!=null&&!I(n)){let o=w(r);return O(o,e)}return ye(e)?O(f,e):O(e)}function L(e){try{let t=u(e);switch(t.inferredType.type){case"Object":return j(t);case"Function":return mt(t);case"Element":return yt(e,t);case"Array":return J(t);default:return null}}catch(t){console.error(t)}return null}import Tt from"lodash/isPlainObject";import Te from"lodash/isFunction";import dt from"lodash/isString";import de from"react-element-to-jsx-string";import{createSummaryValue as y,isTooLongForDefaultValueSummary as gt}from"@storybook/docs-tools";function ge(e){return e.$$typeof!=null}function $(e,t){let{name:r}=e;return r!==""&&r!=="anonymous"&&r!==t?r:null}var It=e=>y(JSON.stringify(e));function Et(e){let{type:t}=e,{displayName:r}=t,n=de(e,{});if(r!=null){let o=P(r);return y(o,n)}if(dt(t)&&I(t)){let s=de(e,{tabStop:0}).replace(/\r?\n|\r/g,"");if(!gt(s))return y(s)}return y(f,n)}var Pt=e=>{if(ge(e)&&e.type!=null)return Et(e);if(Tt(e)){let t=u(JSON.stringify(e));return j(t)}if(Array.isArray(e)){let t=u(JSON.stringify(e));return J(t)}return y(T)},Ot=(e,t)=>{let r=!1,n;if(Te(e.render))r=!0;else if(e.prototype!=null&&Te(e.prototype.render))r=!0;else{let s;try{n=u(e.toString());let{hasParams:p,params:a}=n.inferredType;p?a.length===1&&a[0].type==="ObjectPattern"&&(s=e({})):s=e(),s!=null&&ge(s)&&(r=!0)}catch{}}let o=$(e,t.name);if(o!=null){if(r)return y(P(o));n!=null&&(n=u(e.toString()));let{hasParams:s}=n.inferredType;return y(h(o,s))}return y(r?f:l)},Nt=e=>y(e.toString()),Ie={string:It,object:Pt,function:Ot,default:Nt};function Ee(e={}){return{...Ie,...e}}function V(e,t,r=Ie){try{switch(typeof e){case"string":return r.string(e,t);case"object":return r.object(e,t);case"function":return r.function(e,t);default:return r.default(e,t)}}catch(n){console.error(n)}return null}function Pe(e,t){let{propTypes:r}=t;return r!=null?Object.keys(r).map(n=>e.find(o=>o.name===n)).filter(Boolean):e}import{createSummaryValue as B}from"@storybook/docs-tools";var xt=(e,{name:t,type:r})=>{let n=r.summary==="element"||r.summary==="elementType",o=$(e,t);if(o!=null){if(n)return B(P(o));let{hasParams:s}=u(e.toString()).inferredType;return B(h(o,s))}return B(n?f:l)},Oe=Ee({function:xt});function Ct(e,t){let{propDef:r}=e,n=le(e);n!=null&&(r.type=n);let{defaultValue:o}=e.docgenInfo;if(o!=null&&o.value!=null){let s=L(o.value);s!=null&&(r.defaultValue=s)}else if(t!=null){let s=V(t,r,Oe);s!=null&&(r.defaultValue=s)}return r}function Ne(e,t){let r=t.defaultProps!=null?t.defaultProps:{},n=e.map(o=>Ct(o,r[o.propDef.name]));return Pe(n,t)}function Rt(e,t){let{propDef:r}=e,{defaultValue:n}=e.docgenInfo;if(n!=null&&n.value!=null){let o=L(n.value);o!=null&&(r.defaultValue=o)}else if(t!=null){let o=V(t,r);o!=null&&(r.defaultValue=o)}return r}function xe(e){return e.map(t=>Rt(t))}var he=new Map;Object.keys(Ce).forEach(e=>{let t=Ce[e];he.set(t,e),he.set(t.isRequired,e)});function St(e,t){let r=e;!ht(e)&&!e.propTypes&&S(e)&&(r=e.type);let n=At(r,t);if(n.length===0)return[];switch(n[0].typeSystem){case Re.JAVASCRIPT:return Ne(n,e);case Re.TYPESCRIPT:return xe(n);default:return n.map(o=>o.propDef)}}var Ae=e=>({rows:St(e,"props")});var Se=e=>{if(e){let{rows:t}=Ae(e);if(t)return t.reduce((r,n)=>{let{name:o,description:s,type:p,sbType:a,defaultValue:i,jsDocTags:d,required:W}=n;return r[o]={name:o,description:s,type:{required:W,...a},table:{type:p,jsDocTags:d,defaultValue:i}},r},{})}return null};import Y,{createElement as bt}from"react";import X from"react-element-to-jsx-string";import{addons as Dt,useEffect as Ft}from"@storybook/addons";import{SourceType as be,SNIPPET_RENDERED as jt,getDocgenSection as Jt}from"@storybook/docs-tools";import{logger as M}from"@storybook/client-logger";var Lt=(e,t,r)=>typeof t.transformSource!="function"?e:t.transformSource(e,r),Vt=(e,t)=>{if(typeof e>"u")return M.warn("Too many skip or undefined component"),null;let r=e,n=r.type;for(let i=0;i<t.skip;i+=1){if(typeof r>"u")return M.warn("Cannot skip undefined element"),null;if(Y.Children.count(r)>1)return M.warn("Trying to skip an array of elements"),null;typeof r.props.children>"u"?(M.warn("Not enough children to skip elements."),typeof r.type=="function"&&r.type.name===""&&(r=Y.createElement(n,{...r.props}))):typeof r.props.children=="function"?r=r.props.children():r=r.props.children}let p={...typeof t.displayName=="string"?{showFunctions:!0,displayName:()=>t.displayName}:{displayName:i=>i.type.displayName||(i.type===Symbol.for("react.profiler")?"Profiler":null)||Jt(i.type,"displayName")||(i.type.name!=="_default"?i.type.name:null)||(typeof i.type=="function"?"No Display Name":null)||(ee(i.type)?i.type.render.name:null)||(S(i.type)?i.type.type.name:null)||i.type},...{filterProps:(i,d)=>i!==void 0},...t};return Y.Children.map(e,i=>{let d=typeof i=="number"?i.toString():i,N=(typeof X=="function"?X:X.default)(d,p);if(N.indexOf("&quot;")>-1){let H=N.match(/\S+=\\"([^"]*)\\"/g);H&&H.forEach(q=>{N=N.replace(q,q.replace(/&quot;/g,"'"))})}return N}).join(`
+`).replace(/function\s+noRefCheck\(\)\s+\{\}/g,"() => {}")},Mt={skip:0,showFunctions:!1,enableBeautify:!0,showDefaultProps:!1},Ut=e=>{let t=e?.parameters.docs?.source,r=e?.parameters.__isArgsStory;return t?.type===be.DYNAMIC?!1:!r||t?.code||t?.type===be.CODE},kt=e=>e.type?.displayName==="MDXCreateElement"&&!!e.props?.mdxType,De=e=>{if(!kt(e))return e;let{mdxType:t,originalType:r,children:n,...o}=e.props,s=[];return n&&(s=(Array.isArray(n)?n:[n]).map(De)),bt(r,o,...s)},Fe=(e,t)=>{let r=Dt.getChannel(),n=Ut(t),o="";Ft(()=>{n||r.emit(jt,(t||{}).id,o)});let s=e();if(n)return s;let p={...Mt,...t?.parameters.jsx||{}},a=t?.parameters.docs?.source?.excludeDecorators?t.originalStoryFn(t.args,t):s,i=De(a),d=Vt(i,p);return d&&(o=Lt(d,p,t)),s};var je={docs:{inlineStories:!0,extractArgTypes:Se,extractComponentDescription:vt}},wt=[Fe],$t=[_t];var Jn={framework:"react",...je};export{$t as argTypesEnhancers,wt as decorators,Jn as parameters,Je as render,Le as renderToCanvas};

package/dist/index.d.ts

@@ -0,0 +1,193 @@
+import * as _storybook_types from '@storybook/types';
+import { Addon_ClientStoryApi, Addon_Loadable, Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, DecoratorFunction, StrictArgs, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, Store_ComposedStory, Store_CSFExports, Store_StoriesWithPartialProps } from '@storybook/types';
+export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
+import { R as ReactRenderer, S as StoryFnReactReturnType } from './types-7d102855.js';
+export { R as ReactRenderer } from './types-7d102855.js';
+import { ComponentType, ComponentProps, JSXElementConstructor } from 'react';
+import { Simplify, SetOptional } from 'type-fest';
+
+interface ClientApi extends Addon_ClientStoryApi<ReactRenderer['storyResult']> {
+    configure(loader: Addon_Loadable, module: NodeModule): void;
+    forceReRender(): void;
+    raw: () => any;
+}
+declare const storiesOf: ClientApi['storiesOf'];
+declare const configure: ClientApi['configure'];
+declare const forceReRender: ClientApi['forceReRender'];
+declare const raw: ClientApi['raw'];
+
+type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any> ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>> : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any> ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>> : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
+    render?: ArgsStoryFn<ReactRenderer, any>;
+    component?: infer Component;
+    args?: infer DefaultArgs;
+} ? Simplify<(Component extends ComponentType<any> ? ComponentProps<Component> : unknown) & ArgsFromMeta<ReactRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<ReactRenderer, TArgs, SetOptional<TArgs, keyof TArgs & keyof (DefaultArgs & ActionArgs<TArgs>)>> : never : TMetaOrCmpOrArgs extends ComponentType<any> ? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>> : StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;
+type ActionArgs<TArgs> = {
+    [P in keyof TArgs as TArgs[P] extends (...args: any[]) => any ? ((...args: any[]) => void) extends TArgs[P] ? P : never : never]: TArgs[P];
+};
+/**
+ * @deprecated Use `Meta` instead, e.g. ComponentMeta<typeof Button> -> Meta<typeof Button>.
+ *
+ * For the common case where a component's stories are simple components that receives args as props:
+ *
+ * ```tsx
+ * export default { ... } as ComponentMeta<typeof Button>;
+ * ```
+ */
+type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
+/**
+ * @deprecated Use `StoryFn` instead, e.g. ComponentStoryFn<typeof Button> -> StoryFn<typeof Button>.
+ * 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/
+ *
+ * For the common case where a (CSFv2) story is a simple component that receives args as props:
+ *
+ * ```tsx
+ * const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />
+ * ```
+ */
+type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
+/**
+ * @deprecated Use `StoryObj` instead, e.g. ComponentStoryObj<typeof Button> -> StoryObj<typeof Button>.
+ *
+ * For the common case where a (CSFv3) story is a simple component that receives args as props:
+ *
+ * ```tsx
+ * const MyStory: ComponentStoryObj<typeof Button> = {
+ *   args: { buttonArg1: 'val' },
+ * }
+ * ```
+ */
+type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;
+/**
+ * @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)
+ */
+type Story<TArgs = Args> = StoryFn<TArgs>;
+/**
+ * @deprecated Use `StoryFn` instead, e.g. ComponentStory<typeof Button> -> StoryFn<typeof Button>.
+ * 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/.
+ *
+ * For the common case where a (CSFv3) story is a simple component that receives args as props:
+ *
+ * ```tsx
+ * const MyStory: ComponentStory<typeof Button> = {
+ *   args: { buttonArg1: 'val' },
+ * }
+ * ```
+ */
+type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
+/**
+ * @deprecated Use Decorator instead.
+ */
+type DecoratorFn = DecoratorFunction<ReactRenderer>;
+type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;
+type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;
+type StoryContext<TArgs = StrictArgs> = StoryContext$1<ReactRenderer, TArgs>;
+
+/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *```jsx
+ * // setup.js (for jest)
+ * import { setProjectAnnotations } from '@storybook/react';
+ * import * as projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ *```
+ *
+ * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ */
+declare function setProjectAnnotations(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void;
+/** Preserved for users migrating from `@storybook/testing-react`.
+ *
+ * @deprecated Use setProjectAnnotations instead
+ */
+declare function setGlobalConfig(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void;
+/**
+ * Function that will receive a story along with meta (e.g. a default export from a .stories file)
+ * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
+ * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStory } from '@storybook/react';
+ * import Meta, { Primary as PrimaryStory } from './Button.stories';
+ *
+ * const Primary = composeStory(PrimaryStory, Meta);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param story
+ * @param componentAnnotations - e.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ */
+declare function composeStory<TArgs extends Args = Args>(story: Store_ComposedStory<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): {
+    (extraArgs: Partial<TArgs>): StoryFnReactReturnType;
+    storyName: string;
+    args: Args;
+    play: _storybook_types.Store_ComposedStoryPlayFn;
+    parameters: _storybook_types.Parameters;
+};
+/**
+ * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
+ * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
+ * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStories } from '@storybook/react';
+ * import * as stories from './Button.stories';
+ *
+ * const { Primary, Secondary } = composeStories(stories);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param csfExports - e.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ */
+declare function composeStories<TModule extends Store_CSFExports<ReactRenderer>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<Store_StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports<_storybook_types.Renderer>>;
+
+export { ComponentMeta, ComponentStory, ComponentStoryFn, ComponentStoryObj, Decorator, DecoratorFn, Loader, Meta, Story, StoryContext, StoryFn, StoryObj, composeStories, composeStory, configure, forceReRender, raw, setGlobalConfig, setProjectAnnotations, storiesOf };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var T=Object.create;var d=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)d(e,o,{get:t[o],enumerable:!0})},A=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of D(t))!U.call(e,s)&&s!==o&&d(e,s,{get:()=>t[s],enumerable:!(r=k(t,s))||r.enumerable});return e};var p=(e,t,o)=>(o=e!=null?T(W(e)):{},A(t||!e||!e.__esModule?d(o,"default",{value:e,enumerable:!0}):o,e)),N=e=>A(d({},"__esModule",{value:!0}),e);var Z={};L(Z,{composeStories:()=>X,composeStory:()=>_,configure:()=>q,forceReRender:()=>z,raw:()=>H,setGlobalConfig:()=>J,setProjectAnnotations:()=>M,storiesOf:()=>$});module.exports=N(Z);var S=p(require("global")),{window:C}=S.default;C&&(C.STORYBOOK_ENV="react");var P=require("@storybook/core-client");var x=p(require("global")),n=p(require("react")),i=p(require("react-dom")),{FRAMEWORK_OPTIONS:a}=x.default,m=new Map,R=(e,t)=>{let{id:o,component:r}=t;if(!r)throw new Error(`Unable to render story ${o} as the component annotation is missing from the default export`);return n.default.createElement(r,{...e})},G=({callback:e,children:t})=>{let o=(0,n.useRef)();return(0,n.useLayoutEffect)(()=>{o.current!==e&&(o.current=e,e())},[e]),t},V=async(e,t)=>{let o=await Y(t);return new Promise(r=>{o?o.render(n.default.createElement(G,{callback:()=>r(null)},e)):i.default.render(e,t,()=>r(null))})},B=i.version&&(i.version.startsWith("18")||i.version.startsWith("0.0.0")),O=(a==null?void 0:a.legacyRootApi)!==!0,w=O&&B,g=e=>{let t=m.get(e);t&&w?(t.unmount(),m.delete(e)):i.default.unmountComponentAtNode(e)},Y=async e=>{if(!w)return null;let t=m.get(e);return t||(t=(await import("react-dom/client")).default.createRoot(e),m.set(e,t)),t},u=class extends n.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidMount(){let{hasError:o}=this.state,{showMain:r}=this.props;o||r()}componentDidCatch(o){let{showException:r}=this.props;r(o)}render(){let{hasError:o}=this.state,{children:r}=this.props;return o?null:r}},h=a!=null&&a.strictMode?n.StrictMode:n.Fragment;async function E({storyContext:e,unboundStoryFn:t,showMain:o,showException:r,forceRemount:s},f){let y=n.default.createElement(u,{showMain:o,showException:r},n.default.createElement(t,{...e})),F=h?n.default.createElement(h,null,y):y;return s&&g(f),await V(F,f),()=>g(f)}var b="react",l=(0,P.start)(E,{render:R}),$=(e,t)=>l.clientApi.storiesOf(e,t).addParameters({framework:b}),q=(...e)=>l.configure(b,...e),z=l.forceReRender,H=l.clientApi.raw;var c=require("@storybook/store"),j=require("@storybook/client-logger");function M(e){(0,c.setProjectAnnotations)(e)}function J(e){(0,j.deprecate)("setGlobalConfig is deprecated. Use setProjectAnnotations instead."),M(e)}var Q={render:R};function _(e,t,o,r){return(0,c.composeStory)(e,t,o,Q,r)}function X(e,t){return(0,c.composeStories)(e,t,_)}var v;(v=module==null?void 0:module.hot)==null||v.decline();0&&(module.exports={composeStories,composeStory,configure,forceReRender,raw,setGlobalConfig,setProjectAnnotations,storiesOf});

package/dist/index.mjs

@@ -0,0 +1 @@
+import{a as t,b as s}from"./chunk-3ETZESFO.mjs";import p from"global";var{window:i}=p;i&&(i.STORYBOOK_ENV="react");import{start as d}from"@storybook/core-client";var a="react",r=d(s,{render:t}),P=(e,o)=>r.clientApi.storiesOf(e,o).addParameters({framework:a}),x=(...e)=>r.configure(a,...e),j=r.forceReRender,_=r.clientApi.raw;import{composeStory as R,composeStories as m,setProjectAnnotations as f}from"@storybook/store";import{deprecate as l}from"@storybook/client-logger";function A(e){f(e)}function M(e){l("setGlobalConfig is deprecated. Use setProjectAnnotations instead."),A(e)}var S={render:t};function y(e,o,n,c){return R(e,o,n,S,c)}function k(e,o){return m(e,o,y)}module?.hot?.decline();export{k as composeStories,y as composeStory,x as configure,j as forceReRender,_ as raw,M as setGlobalConfig,A as setProjectAnnotations,P as storiesOf};

package/dist/types-7d102855.d.ts

@@ -0,0 +1,10 @@
+import { ComponentType, ReactElement } from 'react';
+import { WebRenderer } from '@storybook/types';
+
+interface ReactRenderer extends WebRenderer {
+    component: ComponentType<this['T']>;
+    storyResult: StoryFnReactReturnType;
+}
+type StoryFnReactReturnType = ReactElement<unknown>;
+
+export { ReactRenderer as R, StoryFnReactReturnType as S };

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/react",
-  "version": "7.0.0-alpha.5",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -19,50 +19,71 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/config.js",
+      "import": "./dist/config.mjs",
+      "types": "./dist/config.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
+    "template/**/*",
     "types/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.5",
-    "@storybook/client-logger": "7.0.0-alpha.5",
-    "@storybook/core-client": "7.0.0-alpha.5",
-    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/docs-tools": "7.0.0-alpha.5",
-    "@storybook/store": "7.0.0-alpha.5",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "@types/estree": "^0.0.51",
-    "@types/node": "^14.14.20 || ^16.0.0",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
-    "core-js": "^3.8.2",
     "escodegen": "^2.0.0",
     "global": "^4.4.0",
     "html-tags": "^3.1.0",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
-    "react-element-to-jsx-string": "^14.3.4",
+    "react-element-to-jsx-string": "^15.0.0",
     "ts-dedent": "^2.0.0",
+    "type-fest": "^2.19.0",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.5",
-    "@types/util-deprecate": "^1.0.0"
+    "@babel/core": "^7.20.2",
+    "@types/util-deprecate": "^1.0.0",
+    "expect-type": "^0.14.2",
+    "jest-specific-snapshot": "^6.0.0",
+    "require-from-string": "^2.0.2",
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
-    "jest-specific-snapshot": "^4.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "require-from-string": "^2.0.2"
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -75,5 +96,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3dd46982823b34d9f37be917b6247631081feff7"
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/config.ts"
+    ],
+    "platform": "browser"
+  },
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }

package/preview.js

@@ -1 +1 @@
-export * from './dist/esm/config';
+export * from './dist/config.mjs';

package/template/cli/.eslintrc.json

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

package/template/cli/js/Button.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './button.css';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary: PropTypes.bool,
+  /**
+   * What background color to use
+   */
+  backgroundColor: PropTypes.string,
+  /**
+   * How large should the button be?
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Button contents
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Optional click handler
+   */
+  onClick: PropTypes.func,
+};
+
+Button.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: 'medium',
+  onClick: undefined,
+};

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

@@ -0,0 +1,39 @@
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  component: Button,
+  tags: ['docsPage'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/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.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button } from './Button';
+import './header.css';
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+  <header>
+    <div className="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 ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);
+
+Header.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }),
+  onLogin: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onCreateAccount: PropTypes.func.isRequired,
+};
+
+Header.defaultProps = {
+  user: null,
+};

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

@@ -0,0 +1,22 @@
+import { Header } from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['docsPage'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut = {};