tobiasdiez / storybook-vue-addon

Storybook stories in native Vue format
MIT License
46 stars 1 forks source link

Vue Language Plugin for type inference of `defineMeta` and `args` #119

Open tobiasdiez opened 3 months ago

tobiasdiez commented 3 months ago

At the moment, one needs to pass the meta object to the Story component to get the correct types for args etc. The idea would be to add a language plugin that does this automatically. So the following code would work and provide proper types for args

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

defineMeta({
  component: Button,
  args: {
    label: 'Click',
    variant: 'primary',
  }
})

</script>

<template>
<Story v-slot="{ args }">
   <Button :label="args.label" /> <!-- the value here is "Click"-->
</Story>
<!-- Args can be overridden locally by passing them to the Story component   -->
<Story v-slot="{ args }" :args="{ label: 'Custom Label'}">
   <Button :label="args.label"/> <!-- the value here is "Custom Label"-->
</Story>
</template>

References: