Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
floroz opened this issue Sep 12, 2023 · 0 comments
Open

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

floroz opened this issue Sep 12, 2023 · 0 comments

Comments

@floroz
Copy link
Contributor

floroz commented Sep 12, 2023

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant