@storybook/vue3 7.4.0-alpha.0 → 7.4.0-alpha.2

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

@@ -1,29 +0,0 @@
-import GlobalUsage from './GlobalUsage.vue';
-
-export default {
-  component: GlobalUsage,
-  argTypes: {},
-  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
-    setup() {
-      return { args };
-    },
-    // And then the `args` are bound to your component with `v-bind="args"`
-    template: '<global-usage v-bind="args" />',
-  }),
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Globally Defined',
-  },
-};
-
-export const Secondary = {
-  args: {
-    label: 'Globally Defined',
-  },
-};

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

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

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

@@ -1,12 +0,0 @@
-<!-- <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_vue3-vite-default-ts/OverrideArgs.vue

@@ -1,40 +0,0 @@
-<template>
-  <button type="button" :class="classes" :style="style">
-    <!-- You can use <component /> with `:is` when passing a component as a prop -->
-    <component :is="icon" />
-  </button>
-</template>
-
-<script lang="ts">
-import { computed } from 'vue';
-
-export default {
-  name: 'override-args',
-
-  props: {
-    icon: {
-      type: Object,
-      required: true,
-    },
-
-    backgroundColor: {
-      type: String
-    },
-  },
-
-
-  setup(props, { emit }) {
-    const classes = {
-      'storybook-button': true,
-      'storybook-button--primary': true,
-      'storybook-button--large': true,
-    };
-    const style = computed(() => ({
-      backgroundColor: props.backgroundColor,
-    }));
-
-    // Notice that `icon` prop component is still passed through even though it isn't mapped
-    return { classes, style, }
-  },
-};
-</script>

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

@@ -1,137 +0,0 @@
-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) => ({
-  components: { ReactiveArgs },
-  setup() {
-    return { args };
-  },
-  template: '<ReactiveArgs v-bind="args" />',
-});
-
-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_vue3-vite-default-ts/ReactiveArgs.vue

@@ -1,40 +0,0 @@
-<template>
-  <button type="button" @click="onClick" :class="classes" :style="style">{{ label }} {{ counter }}</button>
-</template>
-
-<script>
-import { computed, ref } from 'vue';
-
-export default {
-  name: 'reactive-args',
-
-  props: {
-    label: {
-      type: String,
-    },
-
-    backgroundColor: {
-      type: String
-    },
-  },
-
-  setup(props, { emit }) {
-    const classes = {
-      'storybook-button': true,
-      'storybook-button--primary': true,
-      'storybook-button--large': true,
-    };
-    const style = computed(() => ({
-      backgroundColor: props.backgroundColor,
-    }));
-    const counter = ref(0);
-    const onClick = () => {
-      emit('click', 1);
-      counter.value += 1;
-    };
-
-    // Notice that `icon` prop component is still passed through even though it isn't mapped
-    return { classes, style, counter, onClick }
-  },
-};
-</script>

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

@@ -1,88 +0,0 @@
-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)]]);
-    },
-  ],
-};
-
-export const DecoratorFunctionalComponentArgsFromContext: Story = {
-  decorators: [
-    (storyFn, context) => {
-      const story = storyFn();
-      return () =>
-        h('div', [h('h2', ['Decorator using args.label: ', context.args.label]), [h(story)]]);
-    },
-  ],
-};
-
-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>',
-      };
-    },
-  ],
-};

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

@@ -1,127 +0,0 @@
-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_vue3-vite-default-ts/Reactivity.vue

@@ -1,44 +0,0 @@
-<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_vue3-vite-default-ts/ScopedSlots.stories.ts

@@ -1,81 +0,0 @@
-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 v-bind="args" 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 v-bind="args" v-slot="slotProps">
-  	            {{args.default(slotProps)}}
-              </MySlotComponent>`,
-  }),
-  play: Basic.play,
-};

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

@@ -1,46 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import GlobalUsage from './GlobalUsage.vue';
-import GlobalSetup from './GlobalSetup.vue';
-
-const meta: Meta = {
-  component: GlobalUsage,
-  argTypes: {},
-  tags: ['autodocs'],
-} satisfies Meta<typeof GlobalUsage>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const MultiComponents: Story = {
-  args: {
-    label: 'Button',
-    size: 'large',
-    backgroundColor: '#aa00ff',
-    btn1Args: { label: 'Button 10', size: 'small', backgroundColor: '#aa00ff' },
-  },
-  render(args: any) {
-    return {
-      components: { GlobalUsage, GlobalSetup },
-      setup() {
-        return { args };
-      },
-      template: `<div style="background-color:pink;opacity:0.9;padding:20px" >
-                  
-                  <div style="display:flex;gap:10px">
-                    <img src="https://user-images.githubusercontent.com/263385/199832481-bbbf5961-6a26-481d-8224-51258cce9b33.png" width="200" />  
-                    <GlobalUsage v-bind="args.btn1Args" />&nbsp;
-                  </div>
-                  <h2>Complex Story Custom template </h2> <br/> <hr/>
-                
-                <GlobalSetup  :label="args.label" />
-                <div style="margin:8px"><span style="font-size:28px;color:green">Multiple </span>
-                <span style="background-color:magenta;opacity:0.9;padding:8px"><i>Components</i></span></div>
-                <div style="display:flex;gap:10px">
-                  <GlobalUsage v-bind="args" />
-                  <GlobalUsage label="Static Label Dynamic color" :background-color="args.backgroundColor"/>  
-                </div>   
-               </div>`,
-    };
-  },
-};