The case for Stories vs Variants

[davestewart]

Something I realised recently – we've potentially inherited a misunderstanding of Storybook nomenclature from Histoire.

In Storybook the hierarchy is:

Component(s) > Page(s) > Story

Where:

• Component is essentially an item in the navigation tree
• it can render multiple pages, including Docs and Story pages
• each page Story is in effect a instance of the documented component, with different settings.

In other words, there is no "variant" type in Storybook.

I'm guessing Variant is then actually a Histoire-specific mechanism to wire (varied) props to the wrapped component.

This being the case, something like this...

• should really be a Story not a Variant (with a for-loop of buttons)
• each individual button should be wrapped by a Variant

In other words, rather than this:

<template>
  <Story :layout="{ type: 'grid', width: '250' }">
    ...
    <Variant title="size">
      <div v-for="size in sizes" :key="size" class="mb-4">
        <UiButton :size="size" :label="`${size} button`" icon="i-heroicons-light-bulb" />
      </div>
    </Variant>

It should be:

<template>
  ...
  <Story title="size">
    <Variant v-for="size in sizes" :key="size">
      <UiButton :size="size" :label="`${size} button`" icon="i-heroicons-light-bulb" />
    </Variant>
  </Story>

  <Story title="color">
    ...
  </Story>

Treating variants like this would give us other benefits:

• we could better target code to copy, as a Variant should only ever hold a single component
• we could more easily annotate actual variants like
• we could more easily format text in a Story, as it would always be within a story but never in a Variant

For example:

<Story title="variant shortcuts">
  <p>Buttons provide shortcut boolean props to quickly set a variant</p>
  <Variant desc="Ghost button shortcut">
    <UiButton label="solid" solid />
  </Variant>
  <Variant desc="Solid button shortcut">
    <UiButton label="ghost" ghost />
  </Variant>
</Story>

I don't know how we would style all this, but it would certainly give us more structure and more easily target specific examples.

Anyway, I just wanted to mention it whilst it was fresh in my head.

[aideremir]

I'm guessing Variant is then actually a Histoire-specific mechanism to wire (varied) props to the wrapped component.

Totally agree, so it should be one component per Variant. Ideally each Variant should have one prop changed avoiding such cases like 'large warning button' — should be variant 'large button' and 'warning button'. But this gonna lead to story layout to be overcrowded by a number of almost similar component variants.

From this perspective there was a useful feature in Storybook: ability to tweak all the props in realtime. Could we add this in Bedtime as well?

[timhanlon]

Variant v-for="size in sizes"

This would be very nice, and definitely fits the goal of making stories as close to plain-old Vue as possible. Would need to confirm but I'm almost certain it'd require a rewrite of the story parsing.

ability to tweak all the props in realtime

A built-in way to handle this would be great. #28 suggests implementing nuxt-component-meta. I did a test implementation of leches for the UI part at some point, which is a possibility.