[WIP] Transformation mapping between Storybook CSF -> Vue SFC

[floroz]

I am going to provide some real case example to discuss complex Stories' setup and how the same setup would look like using storybook-vue-addon

1. Story inheritance

One of the main benefits of the StoryObj setup is the ability to inherit configuration from the previous Stories.

This also includes being able to reuse the same rendering and just changing a property:

export const Black: Story = {
  args: {
    color: 'black',
  },
  render: args => ({
    setup() {
      return { args }
    },
    template: `
      <MyComponent v-bind="args">
        <MyAdditionalSetup />
      </MyComponent>
    `
  })
};

export const White: Story = {
  ...Black,
  args: {
    color: 'white',
  }
};

1.2 Approach

• Use a Component to create a shared setup

<script setup>
const SharedSetup = defineComponent({
  props: ['args'],
  template: `
      <MyComponent v-bind="$props.args">
        <MyAdditionalSetup />
      </MyComponent>
  `
})
</script>

<template>
  <Story>
    <template #meta="{ args }">
      <SharedSetup :args="args" />
    </template>
  </Story>
  <Story :args="{ color: 'white' }">
    <SharedSetup :args="args" />
  </Story>
  <template>

1.3 Challenges

• The parsing of the <Story /> cannot be done by our loader
• The <Story /> tag should always be explicit in the template
• Clients are forced to duplicate the boilerplate setup

<template>
  <Story>
    <template #meta="{ args }">
      <MyComponent v-bind="args">
        <MyAdditionalSetup />
      </MyComponent>
    </template>
  </Story>
  <Story :args="{ color: 'white' }">
    <MyComponent v-bind="args">
        <MyAdditionalSetup />
      </MyComponent>
  </Story>
  <template>

2. Isolated Context: Components depending on provide/inject and Decorators.

export default {
  title: "Components/Breadcrumbs/BreadcrumbsItem",
  component: BBreadcrumbsItem,
} satisfies Meta<typeof BBreadcrumbsItem>;

type Story = StoryObj<typeof BBreadcrumbsItem>;
export const DefaultBlack: Story = {
  decorators: [
    () => ({
      template: `<div class="bg-white"><story /></div>`,
      setup() {
        provide(BREADCRUMB_COLORSCHEME_SYMBOL, 'black');
      },
    }),
  ],
  args: {
    label: "label",
    to: "https://www.labelin.org/",
  },
};

export const DefaultWhite: Story = {
  decorators: [
    () => ({
      template: `<div class="bg-black"><story /></div>`,
      setup() {
        provide(BREADCRUMB_COLORSCHEME_SYMBOL, 'white');
      },
    }),
  ],
  args: {
    label: "label",
    to: "https://www.label.org/",
  },
};

In this example, we have two things to tackle:

• usage of different decorators in each story
• component needing dependency injection from a parent, whose value needs to be different in each story

2.1 Proposal

• Creation of a Vue component that acts both as decorator and as provider

<script setup>
// your imports here...

defineMeta<typeof BBreadcrumbsItem>({
  component: BBreadcrumbsItem,
  args: {
    label: "label"
    to: "https://www.labelin.org/"""
  }
})

const DecoratorBlack= defineComponent({
  setup() {
    provide(BREADCRUMB_COLORSCHEME_SYMBOL, "white")
  },
  template: `
    <div class="bg-white">
      <slot/>
    </div>
  `
})

const DecoratorWhite= defineComponent({
  setup() {
    provide(BREADCRUMB_COLORSCHEME_SYMBOL, "white")
  },
  template:`
    <div class="bg-black">
      <slot/>
    </div>
  `
})
</script>

<template>
  <Story :args="{label: 'black'}">
      <template #meta="{args}">
        <DecoratorBlack>
          <BBreadcrumbsItem v-bind="args"/>
        </DecoratorBlack>
      </template>
  </Story>
  <Story :args="{label: 'white'}">
     <template #meta="{args}">
        <DecoratorWhite>
          <BBreadcrumbsItem v-bind="args"/>
        </DecoratorWhite>
      </template>
  </Story>
<template>

• The Decorators won't conflict with our transformer and will be handled as normal components by the vue compiler

[floroz]

submitted early by mistake.