@storybook/vue3 7.1.0-alpha.1 → 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.1",
+  "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.1",
-    "@storybook/docs-tools": "7.1.0-alpha.1",
+    "@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.1",
-    "@storybook/types": "7.1.0-alpha.1",
+    "@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": "48a1df25493b1cc26a405096e723301f4bb04b4e"
+  "gitHead": "e7c833e690dd0d2966ffb7fb806a3bda89a508c8"
 }

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 = {};

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

@@ -5,8 +5,8 @@
   </button>
 </template>
 
-<script lang="typescript">
-import { h, computed, reactive } from 'vue';
+<script lang="ts">
+import { computed } from 'vue';
 
 export default {
   name: 'override-args',
@@ -22,7 +22,7 @@ export default {
     },
   },
 
-  // @ts-expect-error (Converted from ts-ignore)
+
   setup(props, { emit }) {
     const classes = {
       'storybook-button': true,

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

@@ -0,0 +1,135 @@
+import { expect } from '@storybook/jest';
+import { global as globalThis } from '@storybook/global';
+import type { Meta, StoryObj, StoryFn } from '@storybook/vue3';
+import { within, userEvent } from '@storybook/testing-library';
+import { UPDATE_STORY_ARGS, STORY_ARGS_UPDATED, RESET_STORY_ARGS } from '@storybook/core-events';
+
+import ReactiveArgs from './ReactiveArgs.vue';
+
+const meta = {
+  component: ReactiveArgs,
+  argTypes: {
+    // To show that other props are passed through
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof ReactiveArgs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ReactiveTest: Story = {
+  args: {
+    label: 'Button',
+  },
+  // test that args are updated correctly in rective mode
+  play: async ({ canvasElement, id }) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    const canvas = within(canvasElement);
+
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    const reactiveButton = await canvas.getByRole('button');
+    await expect(reactiveButton).toHaveTextContent('Button 0');
+
+    await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: { label: 'updated' },
+    });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    await expect(canvas.getByRole('button')).toHaveTextContent('updated 1');
+
+    await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+    await expect(reactiveButton).toHaveTextContent('updated 2');
+  },
+};
+
+export const ReactiveHtmlWrapper: Story = {
+  args: { label: 'Wrapped Button' },
+
+  decorators: [
+    () => ({
+      template: `
+        <div style="border: 5px solid red;">
+          <story/>
+        </div>
+        `,
+    }),
+  ],
+  play: async ({ canvasElement, id }) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    const canvas = within(canvasElement);
+
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    const reactiveButton = await canvas.getByRole('button');
+    await expect(reactiveButton).toHaveTextContent('Wrapped Button 0');
+
+    await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: { label: 'updated Wrapped Button' },
+    });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    await expect(canvas.getByRole('button')).toHaveTextContent('updated Wrapped Button 1');
+
+    await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+    await expect(reactiveButton).toHaveTextContent('updated Wrapped Button 2');
+  },
+};
+
+// to test that Simple html Decorators in CSF2 format are applied correctly in reactive mode
+const ReactiveCSF2WrapperTempl: StoryFn = (args, { argTypes }) => ({
+  components: { ReactiveArgs },
+  props: Object.keys(argTypes),
+  template: '<ReactiveArgs v-bind="$props" />',
+});
+
+export const ReactiveCSF2Wrapper = ReactiveCSF2WrapperTempl.bind({});
+
+ReactiveCSF2Wrapper.args = {
+  label: 'CSF2 Wrapped Button',
+};
+ReactiveCSF2Wrapper.decorators = [
+  () => ({
+    template: `
+      <div style="border: 5px solid red;">
+        <story/>
+      </div>
+      `,
+  }),
+];
+
+ReactiveCSF2Wrapper.play = async ({ canvasElement, id }) => {
+  const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+  const canvas = within(canvasElement);
+
+  await channel.emit(RESET_STORY_ARGS, { storyId: id });
+  await new Promise((resolve) => {
+    channel.once(STORY_ARGS_UPDATED, resolve);
+  });
+  const reactiveButton = await canvas.getByRole('button');
+  await expect(reactiveButton).toHaveTextContent('CSF2 Wrapped Button 0');
+
+  await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+  await channel.emit(UPDATE_STORY_ARGS, {
+    storyId: id,
+    updatedArgs: { label: 'updated CSF2 Wrapped Button' },
+  });
+  await new Promise((resolve) => {
+    channel.once(STORY_ARGS_UPDATED, resolve);
+  });
+  await expect(canvas.getByRole('button')).toHaveTextContent('updated CSF2 Wrapped Button 1');
+
+  await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+  await expect(reactiveButton).toHaveTextContent('updated CSF2 Wrapped Button 2');
+};