@storybook/vue3 7.1.0-alpha.6 → 7.1.0-alpha.7

package/template/stories/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/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/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/{GlobalUsage.stories.js → 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/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/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/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');
+};

package/template/stories/ReactiveDecorators.stories.ts

@@ -0,0 +1,112 @@
+import { global as globalThis } from '@storybook/global';
+import { userEvent, within } from '@storybook/testing-library';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { h } from 'vue';
+import { RESET_STORY_ARGS, STORY_ARGS_UPDATED, UPDATE_STORY_ARGS } from '@storybook/core-events';
+import Reactivity from './Reactivity.vue';
+
+const meta = {
+  component: Reactivity,
+  argTypes: {
+    header: { control: { type: 'text' } },
+    footer: { control: { type: 'text' } },
+    default: { control: { type: 'text' } },
+  },
+  args: {
+    label: 'If you see this then the label arg was not reactive.',
+    default: 'If you see this then the default slot was not reactive.',
+    header: 'If you see this, the header slot was not reactive.', // this can be useless if you have custom render function that overrides the slot
+    footer: 'If you see this, the footer slot was not reactive.',
+  },
+  play: async ({ canvasElement, id, args }) => {
+    const channel = (globalThis as any).__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 input = await canvas.findByLabelText<HTMLInputElement>('Some input:');
+    await userEvent.type(input, 'value');
+
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: {
+        label: 'updated label',
+        header: 'updated header slot', // this can be useless if you have custom render function that overrides the slot which the case here
+        footer: 'updated footer slot',
+        default: 'updated default slot',
+      },
+    });
+    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));
+  },
+} satisfies Meta<typeof Reactivity>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const NoDecorators: Story = {};
+
+export const DecoratorFunctionalComponent: Story = {
+  decorators: [
+    (storyFn, context) => {
+      const story = storyFn();
+      return () => h('div', [h('h2', ['Decorator not using args']), [h(story, context.args)]]);
+    },
+  ],
+};
+
+export const DecoratorFunctionalComponentArgsFromContext: Story = {
+  decorators: [
+    (storyFn, context) => {
+      const story = storyFn();
+      return () =>
+        h('div', [
+          h('h2', ['Decorator using args.label: ', context.args.label]),
+          [h(story, context.args)],
+        ]);
+    },
+  ],
+};
+
+export const DecoratorFunctionalComponentArgsFromProps: Story = {
+  decorators: [
+    (storyFn, context) => {
+      const story = storyFn();
+      return (args) =>
+        h('div', [h('h2', `Decorator using args.label: ${args.label}`), h(story, context.args)]);
+    },
+  ],
+};
+
+export const DecoratorComponentOptions: Story = {
+  decorators: [
+    (storyFn, context) => {
+      return {
+        template: '<div><h2>Decorator not using args</h2><story/></div>',
+      };
+    },
+  ],
+};
+
+export const DecoratorComponentOptionsArgsFromData: Story = {
+  decorators: [
+    (storyFn, context) => {
+      return {
+        data: () => ({ args: context.args }),
+        template: '<div><h2>Decorator using args.label: {{args.label}}</h2><story/></div>',
+      };
+    },
+  ],
+};
+
+export const DecoratorComponentOptionsArgsFromProps: Story = {
+  decorators: [
+    (storyFn, context) => {
+      return {
+        props: ['label'],
+        template: '<div><h2>Decorator using label: {{label}}</h2><story /></div>',
+      };
+    },
+  ],
+};

package/template/stories/ReactiveSlots.stories.ts

@@ -0,0 +1,127 @@
+import { expect } from '@storybook/jest';
+import { global as globalThis } from '@storybook/global';
+import { within } from '@storybook/testing-library';
+import { STORY_ARGS_UPDATED, RESET_STORY_ARGS, UPDATE_STORY_ARGS } from '@storybook/core-events';
+import { h } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import BaseLayout from './BaseLayout.vue';
+
+const meta = {
+  component: BaseLayout,
+  args: {
+    label: 'Storybook Day',
+    default: () => 'Default Text Slot',
+    footer: h('p', 'Footer VNode Slot'),
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof BaseLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SimpleSlotTest: Story = {
+  args: {
+    label: 'Storybook Day',
+    header: () => h('h1', 'Header Text Slot'),
+    default: () => 'Default Text Slot',
+    footer: h('p', 'Footer VNode Slot'),
+  },
+  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);
+    });
+    await expect(canvas.getByTestId('footer-slot').innerText).toContain('Footer VNode Slot');
+    await expect(canvas.getByTestId('default-slot').innerText).toContain('Default Text Slot');
+
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: {
+        default: () => 'Default Text Slot Updated',
+        footer: h('p', 'Footer VNode Slot Updated'),
+      },
+    });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    await expect(canvas.getByTestId('default-slot').innerText).toContain(
+      'Default Text Slot Updated'
+    );
+    await expect(canvas.getByTestId('footer-slot').innerText).toContain(
+      'Footer VNode Slot Updated'
+    );
+  },
+};
+
+export const NamedSlotTest: Story = {
+  args: {
+    label: 'Storybook Day',
+    header: ({ title }: { title: string }) => h('h1', title),
+    default: () => 'Default Text Slot',
+    footer: h('p', 'Footer VNode Slot'),
+  },
+  // 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);
+    });
+    await expect(canvas.getByTestId('header-slot').innerText).toContain(
+      'Header title from the slot'
+    );
+    await expect(canvas.getByTestId('default-slot').innerText).toContain('Default Text Slot');
+    await expect(canvas.getByTestId('footer-slot').innerText).toContain('Footer VNode Slot');
+
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: {
+        default: () => 'Default Text Slot Updated',
+        footer: h('p', 'Footer VNode Slot Updated'),
+      },
+    });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    await expect(canvas.getByTestId('default-slot').innerText).toContain(
+      'Default Text Slot Updated'
+    );
+    await expect(canvas.getByTestId('footer-slot').innerText).toContain(
+      'Footer VNode Slot Updated'
+    );
+  },
+};
+
+export const SlotWithRenderFn: Story = {
+  args: {
+    label: 'Storybook Day',
+    header: ({ title }: { title: string }) => `${title}`,
+    default: () => 'Default Text Slot',
+    footer: h('p', 'Footer VNode Slot'),
+  },
+  render: (args) => ({
+    components: { BaseLayout },
+    setup() {
+      return { args };
+    },
+    template: `<BaseLayout :label="args.label" data-testid="layout">
+  	            {{args.default()}}
+                <template #header="{ title }"><h1>{{args.header({title})}}</h1></template>
+              </BaseLayout>`,
+  }),
+  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);
+    });
+    await expect(canvas.getByTestId('layout').innerText).toContain('Default Text Slot');
+  },
+};

package/template/stories/Reactivity.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+defineProps<{ label: string }>();
+</script>
+<template>
+  <div style="padding: 20px;background-color: pink;">
+    <header data-testid="header-slot">
+      <slot name="header" title="Header title from the slot">
+        If you see this, the header slot was not reactive.
+      </slot>
+    </header>
+    <div id="content">
+      <label>
+        Some input:
+        <input style='width: 400px' placeholder='If you see this, an args update caused the input field to loose state' />
+      </label>
+      <hr>
+      <button class="storybook-button storybook-button--primary storybook-button--medium"> {{ label
+      }}</button>
+    </div>
+
+    <main data-testid="default-slot">
+      <slot>Default slot placeholder</slot>
+    </main>
+    <footer data-testid="footer-slot">
+      <slot name="footer">
+        Footer slot placeholder
+      </slot>
+    </footer>
+  </div>
+</template>
+
+<style>
+header,
+footer {
+  background-color: #fff0ff;
+  padding: 20px;
+}
+
+main,
+#content {
+  background-color: #f0f0f0;
+  padding: 20px;
+}
+</style>

package/template/stories/ScopedSlots.stories.ts

@@ -0,0 +1,81 @@
+import { expect } from '@storybook/jest';
+import { global as globalThis } from '@storybook/global';
+import type { Channel } from '@storybook/channels';
+import { within } from '@storybook/testing-library';
+import { UPDATE_STORY_ARGS, STORY_ARGS_UPDATED, RESET_STORY_ARGS } from '@storybook/core-events';
+
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MySlotComponent from './MySlotComponent.vue';
+
+declare global {
+  // eslint-disable-next-line no-var,vars-on-top,@typescript-eslint/naming-convention
+  var __STORYBOOK_ADDONS_CHANNEL__: Channel;
+}
+
+const meta = {
+  component: MySlotComponent,
+  args: {
+    label: 'Storybook Day',
+    year: 2022,
+    default: ({ text, year }) => `${text}, ${year}`,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof MySlotComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  // test that args are updated correctly in reactive 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));
+    await expect(canvas.getByTestId('scoped-slot').innerText).toMatch(
+      'Hello Storybook Day from the slot, 2022'
+    );
+
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: {
+        label: 'Storybook Day updated',
+        year: 2023,
+      },
+    });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+
+    await expect(canvas.getByTestId('scoped-slot').innerText).toMatch(
+      'Hello Storybook Day updated from the slot, 2023'
+    );
+  },
+};
+
+export const CustomRender: Story = {
+  render: (args) => ({
+    components: { MySlotComponent },
+    setup() {
+      return { args };
+    },
+    template: `<MySlotComponent :label="args.label" v-slot="slotProps">
+  	              {{ slotProps.text }}, {{ slotProps.year }}
+              </MySlotComponent>`,
+  }),
+  play: Basic.play,
+};
+
+export const CustomRenderUsingFunctionSlot: Story = {
+  render: (args: any) => ({
+    components: { MySlotComponent },
+    setup() {
+      return { args };
+    },
+    template: `<MySlotComponent :label="args.label" v-slot="slotProps">
+  	            {{args.default(slotProps)}}
+              </MySlotComponent>`,
+  }),
+  play: Basic.play,
+};