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

package/template/stories/decorators.stories.ts

@@ -0,0 +1,84 @@
+import type { DecoratorFunction } from '@storybook/csf';
+import { global as globalThis } from '@storybook/global';
+import type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';
+import { h } from 'vue';
+
+const { Button, Pre } = (globalThis as any).Components;
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ComponentTemplateWrapper = () => ({
+  components: {
+    Pre,
+  },
+  template: `
+    <Pre text="decorator" />
+    <story v-bind="$attrs"/>
+  `,
+});
+
+const SimpleTemplateWrapper = () => ({
+  template: `
+    <div style="border: 5px solid red;">
+      <story/>
+    </div>
+    `,
+});
+
+const VueWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, context) => {
+  // 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: 5px solid blue' }, h(story, context.args));
+  };
+};
+
+const DynamicWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, { args }) => ({
+  template: `<div :style="{ borderWidth: level, borderColor: 'green', borderStyle: 'solid' }"><story /></div>`,
+  computed: { level: () => `${args.level}px` },
+});
+
+export const ComponentTemplate: Story = {
+  args: { label: 'With component' },
+  decorators: [ComponentTemplateWrapper],
+};
+
+export const SimpleTemplate: Story = {
+  args: { label: 'With border' },
+  decorators: [SimpleTemplateWrapper],
+};
+
+export const VueWrapper: Story = {
+  args: { label: 'With Vue wrapper' },
+  decorators: [VueWrapperWrapper],
+};
+
+export const DynamicWrapper: Story = {
+  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: [DynamicWrapperWrapper],
+};
+
+export const MultipleWrappers = {
+  args: { label: 'With multiple wrappers' },
+  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: [
+    ComponentTemplateWrapper,
+    SimpleTemplateWrapper,
+    VueWrapperWrapper,
+    DynamicWrapperWrapper,
+  ],
+};

package/dist/chunk-2GDW2BFM.mjs

@@ -1 +0,0 @@
-var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __commonJS=(cb,mod)=>function(){return mod||(0,cb[__getOwnPropNames(cb)[0]])((mod={exports:{}}).exports,mod),mod.exports};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));import{h}from"vue";import{sanitizeStoryContextUpdate}from"@storybook/preview-api";function normalizeFunctionalComponent(options){return typeof options=="function"?{render:options,name:options.name}:options}function prepare(rawStory,innerStory){let story=rawStory;return story==null?null:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return h(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...sanitizeStoryContextUpdate(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,h(story,context.args))},context=>prepare(storyFn(context)))}import{createApp,h as h2,reactive}from"vue";var render=(props,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return h2(Component,props,getSlots(props,context))},setupFunction=_app=>{},setup=fn=>{setupFunction=fn},map=new Map,elementMap=new Map;function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext},canvasElement){storyContext.args=reactive(storyContext.args);let element=storyFn();elementMap.set(canvasElement,element);let props=element.render?.().props,reactiveArgs=props?reactive(props):storyContext.args,existingApp=map.get(canvasElement);if(existingApp&&!forceRemount)return updateArgs(existingApp.reactiveArgs,reactiveArgs),()=>{teardown(existingApp.vueApp,canvasElement)};existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let storybookApp=createApp({render(){let renderedElement=elementMap.get(canvasElement),current=renderedElement&&renderedElement.template?renderedElement:element;return map.set(canvasElement,{vueApp:storybookApp,reactiveArgs}),h2(current,reactiveArgs)}});return storybookApp.config.errorHandler=e=>showException(e),setupFunction(storybookApp),storybookApp.mount(canvasElement),showMain(),()=>{teardown(storybookApp,canvasElement)}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key,value])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return Object.fromEntries(slots)}function updateArgs(reactiveArgs,nextArgs){nextArgs&&(Object.keys(reactiveArgs).forEach(key=>{delete reactiveArgs[key]}),Object.assign(reactiveArgs,nextArgs))}function teardown(storybookApp,canvasElement){storybookApp?.unmount(),map.has(canvasElement)&&map.delete(canvasElement)}export{__commonJS,__toESM,decorateStory,render,setup,renderToCanvas};

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` };
-      },
-    }),
-  ],
-};