@storybook/vue3 7.1.0-alpha.0 → 7.1.0-alpha.10

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,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "7.1.0-alpha.0",
+  "version": "7.1.0-alpha.10",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
@@ -48,11 +48,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.1.0-alpha.0",
-    "@storybook/docs-tools": "7.1.0-alpha.0",
+    "@storybook/core-client": "7.1.0-alpha.10",
+    "@storybook/docs-tools": "7.1.0-alpha.10",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.1.0-alpha.0",
-    "@storybook/types": "7.1.0-alpha.0",
+    "@storybook/preview-api": "7.1.0-alpha.10",
+    "@storybook/types": "7.1.0-alpha.10",
     "ts-dedent": "^2.0.0",
     "type-fest": "2.19.0"
   },
@@ -80,5 +80,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4"
+  "gitHead": "e7c833e690dd0d2966ffb7fb806a3bda89a508c8"
 }

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

@@ -1,6 +1,6 @@
 import MyButton from './Button.vue';
 
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 export default {
   title: 'Example/Button',
   component: MyButton,
@@ -19,7 +19,7 @@ export default {
   },
 };
 
-// More on writing stories with args: https://storybook.js.org/docs/7.0/vue/writing-stories/args
+// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args
 export const Primary = {
   args: {
     primary: true,

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

@@ -3,7 +3,7 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
   tags: ['autodocs'],
   render: (args) => ({
     // Components used in your story `template` are defined in the `components` object
@@ -21,7 +21,7 @@ export default {
     template: '<my-header :user="user" />',
   }),
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/vue/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };

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

@@ -5,14 +5,14 @@ export default {
   title: 'Example/Page',
   component: MyPage,
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/vue/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/7.0/vue/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
 export const LoggedIn = {
   render: () => ({
     components: {

package/template/cli/ts-3-8/Button.stories.ts

@@ -2,11 +2,11 @@ import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
 
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
   tags: ['autodocs'],
   argTypes: {
     size: { control: 'select', options: ['small', 'medium', 'large'] },
@@ -20,7 +20,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * See https://storybook.js.org/docs/vue/api/csf
  * to learn how to use render functions.
  */
 export const Primary: Story = {

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

@@ -4,7 +4,7 @@ import MyHeader from './Header.vue';
 
 const meta: Meta<typeof MyHeader> = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Example/Header',
@@ -17,10 +17,10 @@ const meta: Meta<typeof MyHeader> = {
     template: '<my-header :user="args.user" />',
   }),
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
   tags: ['autodocs'],
 };
 

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

@@ -10,17 +10,17 @@ const meta: Meta<typeof MyPage> = {
     template: '<my-page />',
   }),
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/vue/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
   tags: ['autodocs'],
 };
 
 export default meta;
 type Story = StoryObj<typeof MyPage>;
 
-// More on interaction testing: https://storybook.js.org/docs/7.0/vue/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }: any) => {
     const canvas = within(canvasElement);

package/template/cli/ts-4-9/Button.stories.ts

@@ -2,11 +2,11 @@ import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
 
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta = {
   title: 'Example/Button',
   component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
   tags: ['autodocs'],
   argTypes: {
     size: { control: 'select', options: ['small', 'medium', 'large'] },
@@ -20,7 +20,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
+ * See https://storybook.js.org/docs/vue/api/csf
  * to learn how to use render functions.
  */
 export const Primary: Story = {

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

@@ -4,7 +4,7 @@ import MyHeader from './Header.vue';
 
 const meta = {
   /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Example/Header',
@@ -17,10 +17,10 @@ const meta = {
     template: '<my-header :user="args.user" />',
   }),
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
   tags: ['autodocs'],
 } satisfies Meta<typeof MyHeader>;
 

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

@@ -10,17 +10,17 @@ const meta = {
     template: '<my-page />',
   }),
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/vue/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
   tags: ['autodocs'],
 } satisfies Meta<typeof MyPage>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on interaction testing: https://storybook.js.org/docs/7.0/vue/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }: any) => {
     const canvas = within(canvasElement);

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,34 @@
+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,
+  DecoratorFunctionalComponentArgsFromProps,
+  DecoratorComponentOptions,
+  DecoratorComponentOptionsArgsFromData,
+  DecoratorComponentOptionsArgsFromProps,
+} from './ReactiveDecorators.stories';

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

@@ -0,0 +1,47 @@
+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,
+  DecoratorFunctionalComponentArgsFromProps,
+  DecoratorComponentOptions,
+  DecoratorComponentOptionsArgsFromData,
+  DecoratorComponentOptionsArgsFromProps,
+} from './ReactiveDecorators.stories';

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

@@ -0,0 +1,33 @@
+import type { Meta } from '@storybook/vue3';
+import { defineComponent } from 'vue';
+import Reactivity from './Reactivity.vue';
+import * as ReactiveDecorators from './ReactiveDecorators.stories';
+
+const meta = {
+  ...ReactiveDecorators.default,
+  component: Reactivity,
+  render: (args, { argTypes }) => {
+    return defineComponent({
+      props: Object.keys(argTypes),
+      components: { Reactivity },
+      template: `<div>Custom render uses options api and binds args to props: <Reactivity v-bind="$props">
+         <template #header="{title}"><h3>{{ header }} - Title: {{ title }}</h3></template>
+         {{ $props.default }}
+         <template #footer>{{ footer }}</template>
+         </Reactivity>
+        </div>`,
+    });
+  },
+} satisfies Meta<typeof Reactivity>;
+
+export default meta;
+
+export {
+  NoDecorators,
+  DecoratorFunctionalComponent,
+  DecoratorFunctionalComponentArgsFromContext,
+  DecoratorFunctionalComponentArgsFromProps,
+  DecoratorComponentOptions,
+  DecoratorComponentOptionsArgsFromData,
+  DecoratorComponentOptionsArgsFromProps,
+} 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>

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

@@ -0,0 +1,12 @@
+<!-- <MyComponent> template -->
+<script setup lang="ts">
+const props = defineProps({
+  label: String,
+  year: Number,
+});
+</script>
+<template>
+  <div data-testid="scoped-slot">
+    <slot :text="`Hello ${props.label} from the slot`" :year="props.year"></slot>
+  </div>
+</template>

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

@@ -10,7 +10,7 @@ const icons = {
   },
 };
 
-export default {
+const meta = {
   component: OverrideArgs,
   argTypes: {
     // To show that other props are passed through
@@ -39,4 +39,6 @@ export default {
   },
 };
 
+export default meta;
+
 export const TestOne = {};