[Feature] `defineArgs` macro and local `<Story :args />` override

[floroz]

From the Storybook docs: "a story is a component with a set of arguments that define how the component should render. “Args” are Storybook’s mechanism for defining those arguments in a single JavaScript object."

Storybook provides users with the possibility of settings default args on the Meta, and local overrides on each individual StoryObj.

The problem

Currently, the addon doesn't provide any mechanism to declare Story Args.

Proposal and API

Based on the discussions held on #73 the proposal to support this feature would involve both a global macro, and local args override.

<script setup lang="ts">
const openModal1 = ref(false);
const openModal2 = ref(true);

// Global args definition inherited by all Story components
defineArgs<typeof Dialog>({ label: "Label"});
</script>

<template>
<Stories :component="Dialog">
  <!-- Args are exposed to the template via scoped slots -->
 <Story v-slot="{ args }">
   <Dialog v-model="openModal1" :label="args.label" /> <!-- the value here is "Label"-->
</Story>
  <!-- Args can be overridden locally by passing them to the Story component   -->
 <Story v-slot="{ args }" :args="{ label: 'Custom Label'}">
   <Dialog v-model="openModal2" :label="args.label"/> <!-- the value here is "Custom Label"-->
</Story>
<Stories>
</template>

Types

For the first iteration, this proposal would only provide types and autocompletion via the generic signature of function defineArgs<T>(): Args<T>.

Once #70 is resolved, and defineArgTypes will be used to provide type information to the <Story /> component, the local :args prop override will expose type information, alongside the scoped slot v-slot="{ args }".

Pending to define

• What happens when there are multiple defineArgs functions invoked within a single script context? Do we only parse the last one, or do we parse each individual one and merge the results?

There should be no need to define multiple defineArgs in a script context, and therefore my suggestion would be to ignore all calls but the last one.

• How to pass Components as args ?

Often components need to be rendered with dynamic component passed as args within their supported slots:

<template>
<Story v-slot="{args}">
<IconButton>
   <template #default>
       {{ args.icon }}
   </template>
</IconButton>
</Story>
</template>

For such cases, do we want to support components as args (like the above proposals) or would clients need to opt out and render that themselves?

<template>
<Story v-slot="{args}">
<IconButton>
   <template #default>
       <ChevronIcon />
   </template>
</IconButton>
</Story>
</template>

• Could the name defineArgs conflict with any other macros?

Should we create a special prefix or unique ID in the name to only this addon? defineStorybookArgs ?

[Jogai]

@tobiasdiez Not asking for eta, but will this come at some point?

[Jogai]

And why wouldnt this work:

<template>
	<Stories
		:component="Panel"
		:meta="{
			argTypes: {
				header: { control: 'text' },
				toggleable: Boolean
			},
			parameters: { docs: { description: { component: 'Test' } } },
			args: {
				header: 'Arg header',
				toggleable: false
			}
		}">
		<Story
			title="Primary"
			:meta="{ args: { header: 'Story header', toggleable: true } }">
			<Panel :header="meta.args.Header">
				{{ meta }}
			</Panel>
		</Story>
	</Stories>
</template>