Add support for args

[tobiasdiez]

Proposal:

<script setup>
import Button from './Button.vue'

const args = defineArgs({
  color: { control: 'color' },
})
</script>
<template>
  <Stories :initial-args="{ label: 'Button' }">
     <Story title="Primary" :inital-args="{ color: 'red' }">
        <Button v-bind="args" />
      </Story>
  </Stories>
</template>

The parameter to defineArgs is optional and is automatically mapped to argTypes in the default export.

Ideally, we can reuse the workarounds of https://github.com/storybookjs/storybook/issues/13917 to have a working source code display, that shows the current state of the component.

[JoJk0]

@tobiasdiez any update on this? I love using .vue files instead of CSF but I've had to ditch it as lack of args customization is a show stopper for me 👎

[andreasvirkus]

Same as @JoJk0 above ☝️ 😞

[floroz]

Proposal:

<script setup>
import Button from './Button.vue'

const args = defineArgs({
  color: { control: 'color' },
})
</script>
<template>
  <Stories :initial-args="{ label: 'Button' }">
     <Story title="Primary" :inital-args="{ color: 'red' }">
        <Button v-bind="args" />
      </Story>
  </Stories>
</template>

The parameter to defineArgs is optional and is automatically mapped to argTypes in the default export.

Ideally, we can reuse the workarounds of storybookjs/storybook#13917 to have a working source code display, that shows the current state of the component.

In this example, you are binding v-bind="args" where args is referencing the scope of the script setup.

How is the :initial-args object mutating that?

I wonder if supporting args is necessary and brings more advantages than an additional syntax overhead to map 1:1 with the Storybook CSF.

Ultimately, instead of declaring a value on an object key, you declare a variable within the script context:

<script setup lang="ts">
import BButton from "./b-button.vue";

const shortLabel = 'Click';
const longLabel = 'Click me';
</script>

<template>
  <Stories title="Components/Button" :component="BButton">
    <Story title="ShortLabel">
      <BButton :label="shortLabel"/>
    </Story>
    <Story title="LongLabel">
      <BButton :label="longLabel" />
    </Story>
  </Stories>
</template>

Since you are passing the value directly to the component, you won't need the type inference since the value of shortLabel will be check for compatibility directly on the Component prop :label.

I am not sure I can see an immediate benefit of defineArgs when compared to this approach since it follows the natural Vue SFC logic?

However, there is definitely the need to have a defineArgTypes to customize the controls.

[tobiasdiez]

I agree for simple templates there is little advantages over having multiple story defs. But if the story template gets more involved, you don't want to copy-paste it to every variant of the args. But probably this use case can be taken care of by https://github.com/tobiasdiez/storybook-vue-addon/issues/1.

[floroz]

This could be closed and we could track the progress in https://github.com/tobiasdiez/storybook-vue-addon/issues/76