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

Add support for args #13

Open
tobiasdiez opened this issue Nov 8, 2022 · 5 comments
Open

Add support for args #13

tobiasdiez opened this issue Nov 8, 2022 · 5 comments
Labels
type: enhancement Improving upon an existing feature

Comments

@tobiasdiez
Copy link
Owner

tobiasdiez commented Nov 8, 2022

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.

@JoJk0
Copy link

JoJk0 commented Jul 18, 2023

@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
Copy link

Same as @JoJk0 above ☝️ 😞

@floroz
Copy link
Contributor

floroz commented Aug 15, 2023

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
Copy link
Owner Author

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 #1.

@tobiasdiez tobiasdiez added the type: enhancement Improving upon an existing feature label Sep 4, 2023
@floroz
Copy link
Contributor

floroz commented Sep 12, 2023

This could be closed and we could track the progress in #76

tobiasdiez pushed a commit that referenced this issue Aug 4, 2024
tobiasdiez added a commit that referenced this issue Aug 4, 2024
* chore: init

* chore: remove enforce

* chore: npm run

* fix: nuxt options

* chore: update deps

* chore: fix tsup commands (#1)

* fix: path, close #2

* build: use tsup.config.ts

* chore: update dependencies (#5)

* chore: update deps

* fix: `pnpm run dev` error (#7)

* fix: pnpm run dev error

* style: lint fix

* fix: fix dev error (#9)

* chore: update deps

* chore: update

* fix: cjs exports (#10) (#11)

* feat: add esbuild export (#12)

* ci: update release script

* chore: update deps

* feat: add esbuild export (#14)

* feat: add esbuild export (#13)

* chore: lint

* chore: add deps of 'chalk' (#15)

Co-authored-by: Anthony Fu <[email protected]>

* chore: update deps

* fix: 'UserOptions' set to optional (#18)

* feat: use type=module (#16) (#17)

* fix: pnpm workspace config (#19)

* chore: update deps

* fix: nuxt module hooks (#20)

* chore: update deps

* chore: update deps

* chore: update ci matrix

* chore: update deps

* chore: lint

* feat: update builds

* ci: add permission

* docs: update (#21)

* docs: update playground link (#22)

* feat: template update (#25)

* fix: require(...) is not a function (#28)

* update

* fix linter

* fix astro

* fix tests

* use jiti over esno

* update all eslint

* dedupe

* update node used for linter

* fix prettier

---------

Co-authored-by: Anthony Fu <[email protected]>
Co-authored-by: TropicalRaisel <[email protected]>
Co-authored-by: dengqing <[email protected]>
Co-authored-by: Tedy <[email protected]>
Co-authored-by: snowingfox <[email protected]>
Co-authored-by: Rongger <[email protected]>
Co-authored-by: 三咲智子 <[email protected]>
Co-authored-by: Alex Liu <[email protected]>
Co-authored-by: ntnyq <[email protected]>
Co-authored-by: Robert Soriano <[email protected]>
Co-authored-by: Ray <[email protected]>
Co-authored-by: yuyin <[email protected]>
Co-authored-by: lrs <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: enhancement Improving upon an existing feature
Projects
None yet
Development

No branches or pull requests

4 participants