@storybook/vue3 7.1.0-alpha.3 → 7.1.0-alpha.31

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 import * as _storybook_types from '@storybook/types';
 import { Addon_ClientStoryApi, Addon_Loadable, Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations } from '@storybook/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
-import { App, ComponentOptions, FunctionalComponent, ConcreteComponent, VNodeChild } from 'vue';
-import { V as VueRenderer } from './render-c842c5d5.js';
-export { s as setup } from './render-c842c5d5.js';
-import { Simplify, SetOptional, RemoveIndexSignature } from 'type-fest';
+import { App, FunctionalComponent, VNodeChild } from 'vue';
+import { V as VueRenderer } from './render-32b7dd3f.js';
+export { s as setup } from './render-32b7dd3f.js';
+import { Simplify, SetOptional, Constructor, RemoveIndexSignature } from 'type-fest';
+import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
 
 interface ClientApi extends Addon_ClientStoryApi<VueRenderer['storyResult']> {
     configure(loader: Addon_Loadable, module: NodeModule): void;
@@ -39,15 +40,13 @@ type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
     render?: ArgsStoryFn<VueRenderer, any>;
     component?: infer Component;
     args?: infer DefaultArgs;
-} ? Simplify<ComponentProps<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<VueRenderer, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>> : never : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
-type ExtractSlots<C> = C extends new (...args: any[]) => {
-    $slots: infer T;
-} ? AllowNonFunctionSlots<Partial<RemoveIndexSignature<T>>> : unknown;
+} ? Simplify<ComponentPropsAndSlots<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<VueRenderer, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>> : never : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
+type ExtractSlots<C> = AllowNonFunctionSlots<Partial<RemoveIndexSignature<ComponentSlots<C>>>>;
 type AllowNonFunctionSlots<Slots> = {
     [K in keyof Slots]: Slots[K] | VNodeChild;
 };
-type ComponentProps<C> = C extends ComponentOptions<infer P> ? P & ExtractSlots<C> : C extends FunctionalComponent<infer P> ? P : unknown;
-type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends ConcreteComponent<any> ? unknown extends ComponentProps<TCmpOrArgs> ? TCmpOrArgs : ComponentProps<TCmpOrArgs> : TCmpOrArgs;
+type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;
+type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs extends FunctionalComponent<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs;
 /**
  * @deprecated Use `StoryFn` instead.
  * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
@@ -63,4 +62,4 @@ type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
 type StoryContext<TArgs = StrictArgs> = StoryContext$1<VueRenderer, TArgs>;
 type Preview = ProjectAnnotations<VueRenderer>;
 
-export { ComponentProps, Decorator, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj, VueRenderer, configure, forceReRender, raw, storiesOf };
+export { ComponentPropsAndSlots, Decorator, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj, VueRenderer, configure, forceReRender, raw, storiesOf };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{configure:()=>configure,forceReRender:()=>forceReRender,raw:()=>raw,setup:()=>setup,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";var import_preview_api2=require("@storybook/preview-api");var import_vue=require("vue"),import_preview_api=require("@storybook/preview-api");function normalizeFunctionalComponent(options){return typeof options=="function"?{render:options,name:options.name}:options}function prepare(rawStory,innerStory){let story=rawStory;return story==null?null:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return(0,import_vue.h)(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...(0,import_preview_api.sanitizeStoryContextUpdate)(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,(0,import_vue.h)(story,context.args))},context=>prepare(storyFn(context)))}var import_vue2=require("vue"),render=(props,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return(0,import_vue2.h)(Component,props,getSlots(props,context))},setupFunction=_app=>{},setup=fn=>{setupFunction=fn},map=new Map,elementMap=new Map;function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext},canvasElement){var _a2;storyContext.args=(0,import_vue2.reactive)(storyContext.args);let element=storyFn();elementMap.set(canvasElement,element);let props=(_a2=element.render)==null?void 0:_a2.call(element).props,reactiveArgs=props?(0,import_vue2.reactive)(props):storyContext.args,existingApp=map.get(canvasElement);if(existingApp&&!forceRemount)return updateArgs(existingApp.reactiveArgs,reactiveArgs),()=>{teardown(existingApp.vueApp,canvasElement)};existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let storybookApp=(0,import_vue2.createApp)({render(){let renderedElement=elementMap.get(canvasElement),current=renderedElement&&renderedElement.template?renderedElement:element;return map.set(canvasElement,{vueApp:storybookApp,reactiveArgs}),(0,import_vue2.h)(current,reactiveArgs)}});return storybookApp.config.errorHandler=e=>showException(e),setupFunction(storybookApp),storybookApp.mount(canvasElement),showMain(),()=>{teardown(storybookApp,canvasElement)}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key,value])=>{var _a2,_b;return((_b=(_a2=argTypes[key])==null?void 0:_a2.table)==null?void 0:_b.category)==="slots"}).map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return Object.fromEntries(slots)}function updateArgs(reactiveArgs,nextArgs){nextArgs&&(Object.keys(reactiveArgs).forEach(key=>{delete reactiveArgs[key]}),Object.assign(reactiveArgs,nextArgs))}function teardown(storybookApp,canvasElement){storybookApp==null||storybookApp.unmount(),map.has(canvasElement)&&map.delete(canvasElement)}var RENDERER="vue3",api=(0,import_preview_api2.start)(renderToCanvas,{decorateStory,render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),{forceReRender}=api,{raw}=api.clientApi;var _a;(_a=module==null?void 0:module.hot)==null||_a.decline();0&&(module.exports={configure,forceReRender,raw,setup,storiesOf});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{configure:()=>configure,forceReRender:()=>forceReRender,raw:()=>raw,setup:()=>setup,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";var import_preview_api2=require("@storybook/preview-api");var import_vue=require("vue"),import_preview_api=require("@storybook/preview-api");function normalizeFunctionalComponent(options){return typeof options=="function"?{render:options,name:options.name}:options}function prepare(rawStory,innerStory){let story=rawStory;return story===null?null:typeof story=="function"?story:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return(0,import_vue.h)(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=(0,import_preview_api.sanitizeStoryContextUpdate)(update);return update&&(sanitizedUpdate.args=Object.assign(context.args,sanitizedUpdate.args)),story=decorated({...context,...sanitizedUpdate}),story},context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,()=>(0,import_vue.h)(story))},context=>prepare(storyFn(context)))}var import_vue2=require("vue"),render=(props,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return()=>(0,import_vue2.h)(Component,props,generateSlots(context))},setupFunctions=new Set,setup=fn=>{setupFunctions.add(fn)},runSetupFunctions=(app,storyContext)=>{setupFunctions.forEach(fn=>fn(app,storyContext))},map=new Map;function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args),()=>{teardown(existingApp.vueApp,canvasElement)}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=(0,import_vue2.createApp)({setup(){storyContext.args=(0,import_vue2.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue2.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue2.h)(rootElement)}});return vueApp.config.errorHandler=e=>showException(e),runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function generateSlots(context){let{argTypes}=context,slots=Object.entries(argTypes).filter(([key,value])=>{var _a2,_b;return((_b=(_a2=argTypes[key])==null?void 0:_a2.table)==null?void 0:_b.category)==="slots"}).map(([key,value])=>{let slotValue=context.args[key];return[key,typeof slotValue=="function"?slotValue:()=>slotValue]});return(0,import_vue2.reactive)(Object.fromEntries(slots))}function getArgs(element,storyContext){return element.props&&(0,import_vue2.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue2.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue2.reactive)(reactiveArgs);Object.keys(currentArgs).forEach(key=>{key in nextArgs||delete currentArgs[key]}),Object.assign(currentArgs,nextArgs)}function teardown(storybookApp,canvasElement){storybookApp==null||storybookApp.unmount(),map.has(canvasElement)&&map.delete(canvasElement)}var RENDERER="vue3",api=(0,import_preview_api2.start)(renderToCanvas,{decorateStory,render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),{forceReRender}=api,{raw}=api.clientApi;var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());0&&(module.exports={configure,forceReRender,raw,setup,storiesOf});

package/dist/index.mjs

@@ -1 +1,8 @@
-import{decorateStory,render,renderToCanvas,setup}from"./chunk-2GDW2BFM.mjs";import{global}from"@storybook/global";var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";import{start}from"@storybook/preview-api";var RENDERER="vue3",api=start(renderToCanvas,{decorateStory,render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),{forceReRender}=api,{raw}=api.clientApi;module?.hot?.decline();export{configure,forceReRender,raw,setup,storiesOf};
+import { renderToCanvas, decorateStory, render } from './chunk-HSFPF76R.mjs';
+export { setup } from './chunk-HSFPF76R.mjs';
+import { global } from '@storybook/global';
+import { start } from '@storybook/preview-api';
+
+var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";var RENDERER="vue3",api=start(renderToCanvas,{decorateStory,render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),{forceReRender}=api,{raw}=api.clientApi;typeof module<"u"&&module?.hot?.decline();
+
+export { configure, forceReRender, raw, storiesOf };

package/dist/render-32b7dd3f.d.ts

@@ -0,0 +1,148 @@
+import { ConcreteComponent, App } from 'vue';
+import { WebRenderer, ArgsStoryFn as ArgsStoryFn$1, RenderContext } from '@storybook/types';
+
+type StoryFnVueReturnType = ConcreteComponent<any>;
+interface VueRenderer extends WebRenderer {
+    component: Omit<ConcreteComponent<this['T']>, 'props'>;
+    storyResult: StoryFnVueReturnType;
+}
+
+interface SBBaseType {
+    required?: boolean;
+    raw?: string;
+}
+type SBScalarType = SBBaseType & {
+    name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
+};
+type SBArrayType = SBBaseType & {
+    name: 'array';
+    value: SBType;
+};
+type SBObjectType = SBBaseType & {
+    name: 'object';
+    value: Record<string, SBType>;
+};
+type SBEnumType = SBBaseType & {
+    name: 'enum';
+    value: (string | number)[];
+};
+type SBIntersectionType = SBBaseType & {
+    name: 'intersection';
+    value: SBType[];
+};
+type SBUnionType = SBBaseType & {
+    name: 'union';
+    value: SBType[];
+};
+type SBOtherType = SBBaseType & {
+    name: 'other';
+    value: string;
+};
+type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
+
+type StoryId = string;
+type ComponentId = string;
+type ComponentTitle = string;
+type StoryName = string;
+type Tag = string;
+interface StoryIdentifier {
+    componentId: ComponentId;
+    title: ComponentTitle;
+    /** @deprecated */
+    kind: ComponentTitle;
+    id: StoryId;
+    name: StoryName;
+    /** @deprecated */
+    story: StoryName;
+    tags: Tag[];
+}
+interface Parameters {
+    [name: string]: any;
+}
+type ConditionalTest = {
+    truthy?: boolean;
+} | {
+    exists: boolean;
+} | {
+    eq: any;
+} | {
+    neq: any;
+};
+type ConditionalValue = {
+    arg: string;
+} | {
+    global: string;
+};
+type Conditional = ConditionalValue & ConditionalTest;
+interface InputType {
+    name?: string;
+    description?: string;
+    defaultValue?: any;
+    type?: SBType | SBScalarType['name'];
+    if?: Conditional;
+    [key: string]: any;
+}
+interface StrictInputType extends InputType {
+    name: string;
+    type?: SBType;
+}
+interface Args {
+    [name: string]: any;
+}
+type StrictArgTypes<TArgs = Args> = {
+    [name in keyof TArgs]: StrictInputType;
+};
+type Globals = {
+    [name: string]: any;
+};
+type Renderer = {
+    /** What is the type of the `component` annotation in this renderer? */
+    component: unknown;
+    /** What does the story function return in this renderer? */
+    storyResult: unknown;
+    /** What type of element does this renderer render to? */
+    canvasElement: unknown;
+    T?: unknown;
+};
+type StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryIdentifier & {
+    component?: (TRenderer & {
+        T: any;
+    })['component'];
+    subcomponents?: Record<string, (TRenderer & {
+        T: any;
+    })['component']>;
+    parameters: Parameters;
+    initialArgs: TArgs;
+    argTypes: StrictArgTypes<TArgs>;
+};
+type StoryContextUpdate<TArgs = Args> = {
+    args?: TArgs;
+    globals?: Globals;
+    [key: string]: any;
+};
+type ViewMode = 'story' | 'docs';
+type StoryContextForLoaders<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForEnhancers<TRenderer, TArgs> & Required<StoryContextUpdate<TArgs>> & {
+    hooks: unknown;
+    viewMode: ViewMode;
+    originalStoryFn: StoryFn<TRenderer>;
+};
+type StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForLoaders<TRenderer, TArgs> & {
+    loaded: Record<string, any>;
+    abortSignal: AbortSignal;
+    canvasElement: TRenderer['canvasElement'];
+};
+type LegacyStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
+type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: TArgs, context: StoryContext<TRenderer, TArgs>) => (TRenderer & {
+    T: TArgs;
+})['storyResult'];
+type StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyStoryFn<TRenderer, TArgs> | ArgsStoryFn<TRenderer, TArgs>;
+
+declare const render: ArgsStoryFn$1<VueRenderer>;
+/** add a setup function to set that will be call when story is created a d
+ *
+ * @param fn
+ */
+declare const setup: (fn: (app: App, storyContext?: StoryContext<VueRenderer>) => void) => void;
+declare function renderToCanvas({ storyFn, forceRemount, showMain, showException, storyContext, id }: RenderContext<VueRenderer>, canvasElement: VueRenderer['canvasElement']): () => void;
+
+export { VueRenderer as V, renderToCanvas as a, render as r, setup as s };

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@storybook/vue3",
-  "version": "7.1.0-alpha.3",
+  "version": "7.1.0-alpha.31",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/renderers/vue3",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/renderers/vue3",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "renderers/vue3"
+    "directory": "code/renderers/vue3"
   },
   "funding": {
     "type": "opencollective",
@@ -21,15 +21,15 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
     "./preview": {
+      "types": "./dist/config.d.ts",
       "require": "./dist/config.js",
-      "import": "./dist/config.mjs",
-      "types": "./dist/config.d.ts"
+      "import": "./dist/config.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -48,13 +48,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.1.0-alpha.3",
-    "@storybook/docs-tools": "7.1.0-alpha.3",
+    "@storybook/core-client": "7.1.0-alpha.31",
+    "@storybook/docs-tools": "7.1.0-alpha.31",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.1.0-alpha.3",
-    "@storybook/types": "7.1.0-alpha.3",
+    "@storybook/preview-api": "7.1.0-alpha.31",
+    "@storybook/types": "7.1.0-alpha.31",
     "ts-dedent": "^2.0.0",
-    "type-fest": "2.19.0"
+    "type-fest": "^3.11.0",
+    "vue-component-type-helpers": "latest"
   },
   "devDependencies": {
     "@digitak/esrun": "^3.2.2",
@@ -62,7 +63,7 @@
     "@vue/vue3-jest": "29",
     "typescript": "~4.9.3",
     "vue": "^3.2.47",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "latest"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
@@ -80,5 +81,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "d0acd16fdf394463add948bac3f226b93f92c235"
-}
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+}

package/src/typings.d.ts

@@ -0,0 +1 @@
+declare var STORYBOOK_ENV: 'vue3';

package/template/cli/js/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">

package/template/cli/js/Page.vue

@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @createAccount="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a

package/template/cli/ts-3-8/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">

package/template/cli/ts-3-8/Page.vue

@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
@@ -28,7 +28,9 @@
       </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>
+        <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>
         .
@@ -40,7 +42,9 @@
           <g fill="none" fill-rule="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" />
+              id="a"
+              fill="#999"
+            />
           </g>
         </svg>
         Viewports addon in the toolbar
@@ -55,7 +59,7 @@ import MyHeader from './Header.vue';
 
 import { ref } from 'vue';
 
-const user = ref<{ name: string } | null>(null)
+const user = ref<{ name: string } | null>(null);
 
 const onLogin = () => {
   user.value = { name: 'Jane Doe' };
@@ -66,5 +70,4 @@ const onLogout = () => {
 const onCreateAccount = () => {
   user.value = { name: 'Jane Doe' };
 };
-
 </script>

package/template/cli/ts-4-9/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fill-rule="evenodd">

package/template/cli/ts-4-9/Page.vue

@@ -2,7 +2,7 @@
   <article>
     <my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
@@ -28,7 +28,9 @@
       </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>
+        <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>
         .
@@ -40,7 +42,9 @@
           <g fill="none" fill-rule="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" />
+              id="a"
+              fill="#999"
+            />
           </g>
         </svg>
         Viewports addon in the toolbar
@@ -55,7 +59,7 @@ import MyHeader from './Header.vue';
 
 import { ref } from 'vue';
 
-const user = ref<{ name: string } | null>(null)
+const user = ref<{ name: string } | null>(null);
 
 const onLogin = () => {
   user.value = { name: 'Jane Doe' };
@@ -66,5 +70,4 @@ const onLogout = () => {
 const onCreateAccount = () => {
   user.value = { name: 'Jane Doe' };
 };
-
 </script>

package/template/stories/preview.js

@@ -2,12 +2,37 @@ import { global as globalThis } from '@storybook/global';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { setup } from '@storybook/vue3';
 
-// TODO: I'd like to be able to export rather than imperatively calling an imported function
-// export const setup = (app) => {
-//   app.component('GlobalButton', Button);
-// };
+const somePlugin = {
+  install: (app, options) => {
+    // inject a globally available $greetingText() method
+    // eslint-disable-next-line no-param-reassign
+    app.config.globalProperties.$greetingMessage = (key) => {
+      // retrieve a nested property in `options`
+      // using `key`
+      return options.greetings[key];
+    };
+  },
+};
+const someColor = 'someColor';
 
+// add components to global scope
 setup((app) => {
   // This adds a component that can be used globally in stories
   app.component('GlobalButton', globalThis.Components.Button);
 });
+
+// this adds a plugin to vue app that can be used globally in stories
+setup((app, context) => {
+  app.use(somePlugin, {
+    greetings: {
+      hello: `Hello Story! from some plugin your name is ${context?.name}!`,
+      welcome: `Welcome Story! from some plugin your name is ${context?.name}!`,
+      hi: `Hi Story! from some plugin your name is ${context?.name}!`,
+    },
+  });
+});
+
+// additonal setup to provide some propriety  to the app
+setup((app, context) => {
+  app.provide(someColor, 'green');
+});

package/template/stories_vue3-vite-default-ts/BaseLayout.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps({
+  label: String,
+});
+</script>
+<template>
+  <div>
+    <header data-testid="header-slot">
+      <slot name="header" title="Header title from the slot"></slot>
+    </header>
+    <main data-testid="default-slot">
+      <slot></slot>
+    </main>
+    <footer data-testid="footer-slot">
+      <slot name="footer"></slot>
+    </footer>
+  </div>
+</template>

package/template/stories_vue3-vite-default-ts/CustomRenderFunctionalComponent.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/vue3';
+import { h } from 'vue';
+import Reactivity from './Reactivity.vue';
+import * as ReactiveDecorators from './ReactiveDecorators.stories';
+
+const meta = {
+  ...ReactiveDecorators.default,
+  component: Reactivity,
+  // storybook render function is not a functional component. it returns a functional component or a component options
+  render: (args) => {
+    // create the slot contents as a functional components
+    const header = ({ title }: { title: string }) => h('h3', `${args.header} - Title: ${title}`);
+    const defaultSlot = () => h('p', `${args.default}`);
+    const footer = () => h('p', `${args.footer}`);
+    // vue render function is a functional components
+    return () =>
+      h('div', [
+        `Custom render uses a functional component, and passes slots to the component:`,
+        h(Reactivity, args, { header, default: defaultSlot, footer }),
+      ]);
+  },
+} satisfies Meta<typeof Reactivity>;
+
+export default meta;
+
+export {
+  NoDecorators,
+  DecoratorFunctionalComponent,
+  DecoratorFunctionalComponentArgsFromContext,
+  DecoratorComponentOptions,
+  DecoratorComponentOptionsArgsFromData,
+} from './ReactiveDecorators.stories';

package/template/stories_vue3-vite-default-ts/CustomRenderOptionsArgsFromData.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta } from '@storybook/vue3';
+import { defineComponent, shallowReactive } from 'vue';
+import Reactivity from './Reactivity.vue';
+import * as ReactiveDecorators from './ReactiveDecorators.stories';
+
+// when you use custom render, you can use any vue api to create your story and garanti reactivity, otherwise i can ease kill the reactivity.
+const state = shallowReactive<{ header: any; default: any; footer: any }>({
+  header: '',
+  default: '',
+  footer: '',
+}); // or reactive
+
+const meta = {
+  ...ReactiveDecorators.default,
+  component: Reactivity,
+  render: (args, { argTypes }) => {
+    state.header = args.header;
+    state.default = args.default;
+    state.footer = args.footer;
+    // return a component options
+    return defineComponent({
+      data: () => ({ args, header: state.header, default: state.default, footer: state.footer }),
+      components: {
+        Reactivity,
+      },
+      template: `<div>Custom render uses options api and binds args to data: 
+                    <Reactivity v-bind="args">
+                      <template #header="{title}"><h3>{{ args.header }} - Title: {{ title }}</h3></template>
+                      <template #default>{{ args.default }}</template>
+                      <template #footer>{{ args.footer }} </template>
+                    </Reactivity>
+                  </div>`,
+    });
+  },
+} satisfies Meta<typeof Reactivity>;
+
+export default meta;
+
+export {
+  NoDecorators,
+  DecoratorFunctionalComponent,
+  DecoratorFunctionalComponentArgsFromContext,
+  DecoratorComponentOptions,
+  DecoratorComponentOptionsArgsFromData,
+} from './ReactiveDecorators.stories';

package/template/stories_vue3-vite-default-ts/GlobalSetup.stories.ts

@@ -0,0 +1,52 @@
+import { expect } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { within } from '@storybook/testing-library';
+import { inject } from 'vue';
+import GlobalSetup from './GlobalSetup.vue';
+
+const meta: Meta = {
+  component: GlobalSetup,
+  argTypes: {},
+  render: (args: any) => ({
+    // Components used in your story `template` are defined in the `components` object
+    components: { GlobalUsage: GlobalSetup },
+    // The story's `args` need to be mapped into the template through the `setup()` method
+    setup() {
+      const color = inject('someColor', 'red'); // <-- this is the global setup from .storybook/preview.ts
+      return { args: { ...args, backgroundColor: color } };
+    },
+    // And then the `args` are bound to your component with `v-bind="args"`
+    template: '<global-usage v-bind="args" />',
+  }),
+} satisfies Meta<typeof GlobalSetup>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'someColor injected from .storybook/preview.ts',
+  },
+  play: async ({ canvasElement, id }) => {
+    const canvas = within(canvasElement);
+
+    const button = await canvas.getByRole('button');
+    await expect(button).toHaveStyle('background-color: rgb(0, 128, 0)'); // <-- this provide themeColor = green from .storybook/preview.ts
+
+    const h2 = await canvas.getByRole('heading', { level: 2 });
+    await expect(h2).toHaveTextContent('Hi Story! from some plugin your name is Primary!');
+
+    const h3 = await canvas.getByRole('heading', { level: 3 });
+    await expect(h3).toHaveTextContent('Hello Story! from some plugin your name is Primary!');
+
+    const h4 = await canvas.getByRole('heading', { level: 4 });
+    await expect(h4).toHaveTextContent('Welcome Story! from some plugin your name is Primary!');
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'someColor injected from .storybook/preview.ts',
+  },
+};

package/template/stories_vue3-vite-default-ts/GlobalSetup.vue

@@ -0,0 +1,6 @@
+<template>
+  <global-button v-bind="$attrs"> </global-button>
+  <h2> Hi message: {{ $greetingMessage('hi') }}</h2>
+  <h3> Hello message: {{ $greetingMessage('hello') }}</h3>
+  <h4> Welcome message: {{ $greetingMessage('welcome') }}</h4>
+</template>

package/template/{stories/GlobalUsage.stories.js → stories_vue3-vite-default-ts/GlobalUsage.stories.ts}

@@ -3,7 +3,7 @@ import GlobalUsage from './GlobalUsage.vue';
 export default {
   component: GlobalUsage,
   argTypes: {},
-  render: (args) => ({
+  render: (args: any) => ({
     // Components used in your story `template` are defined in the `components` object
     components: { GlobalUsage },
     // The story's `args` need to be mapped into the template through the `setup()` method

package/template/stories_vue3-vite-default-ts/GlobalUsage.vue

@@ -0,0 +1,3 @@
+<template>
+  <global-button />
+</template>