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

package/dist/render-c842c5d5.d.ts

@@ -1,14 +0,0 @@
-import { WebRenderer, ArgsStoryFn, RenderContext } from '@storybook/types';
-import { ConcreteComponent } from 'vue';
-
-type StoryFnVueReturnType = ConcreteComponent<any>;
-interface VueRenderer extends WebRenderer {
-    component: Omit<ConcreteComponent<this['T']>, 'props'>;
-    storyResult: StoryFnVueReturnType;
-}
-
-declare const render: ArgsStoryFn<VueRenderer>;
-declare const setup: (fn: (app: any) => void) => void;
-declare function renderToCanvas({ storyFn, forceRemount, showMain, showException, storyContext }: RenderContext<VueRenderer>, canvasElement: VueRenderer['canvasElement']): () => void;
-
-export { VueRenderer as V, renderToCanvas as a, render as r, setup as s };

package/template/stories/GlobalUsage.vue

@@ -1,3 +0,0 @@
-<template>
-  <global-button v-bind="$props" />
-</template>

package/template/stories/ReactiveArgs.stories.js

@@ -1,44 +0,0 @@
-import { expect } from '@storybook/jest';
-import { global as globalThis } from '@storybook/global';
-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';
-
-export default {
-  component: ReactiveArgs,
-  argTypes: {
-    // To show that other props are passed through
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export const ReactiveTest = {
-  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');
-  },
-};

package/template/stories/decorators.stories.js

@@ -1,66 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-import { h } from 'vue';
-
-const { Button, Pre } = globalThis.Components;
-
-export default {
-  component: Button,
-};
-
-export const ComponentTemplate = {
-  args: { label: 'With component' },
-  decorators: [
-    () => ({
-      components: {
-        Pre,
-      },
-      template: `
-        <Pre text="decorator" />
-        <story/>
-      `,
-    }),
-  ],
-};
-
-export const SimpleTemplate = {
-  args: { label: 'With border' },
-  decorators: [
-    () => ({
-      template: `
-        <div style="border: 5px solid red;">
-          <story/>
-        </div>
-        `,
-    }),
-  ],
-};
-
-export const VueWrapper = {
-  args: { label: 'With Vue wrapper' },
-  decorators: [
-    (storyFn) => {
-      // Call the `storyFn` to receive a component that Vue can render
-      const story = storyFn();
-      // Vue 3 "Functional" component as decorator
-      return () => {
-        return h('div', { style: 'border: 2px solid blue' }, h(story));
-      };
-    },
-  ],
-};
-
-export const DynamicWrapper = {
-  args: { label: 'With dynamic wrapper', primary: true },
-  argTypes: {
-    // Number type is detected, but we still want to constrain the range from 1-6
-    level: { control: { type: 'range', min: 1, max: 6 } },
-  },
-  decorators: [
-    (storyFn, { args }) => ({
-      template: `<div :style="{ borderWidth: level, borderColor: 'red', borderStyle: 'solid' }"><story /></div>`,
-      data() {
-        return { level: `${args.level}px` };
-      },
-    }),
-  ],
-};