How can I make an enum to choose between one data or another in a storybook?

yavgz 0
Viewed 102

I want the user to be able to select whether to use one of these jsons: DataA or DataB.

With this code only loads DataA.

   args: {
            getData: () => new Promise((resolve) => setTimeout(() => resolve({ data: dataA }))),

How can I fix it?

import dataA from "../__fixtures__/dataA.json";
import dataB from "../__fixtures__/dataB.json";

export default {
    component: ParentComponent,
    argTypes: {
        getData: {
            control: "function",
        },
    },
    args: {
        getData: () => new Promise((resolve) => setTimeout(() => resolve({ data: dataA }))),
    },
};

export const Default = (args) => ({
    components: { ParentComopnent },
    props: Object.keys(args),
    template: `
        <ParentComopnent
        :getData="getData"
        />
    `,
});
storybook vue.js
1 Answers

It's likely that story control needs to specifically select a dataset, similarly shown in the documentation, something like:

argTypes: {
    dataset: {
      options: ['dataA', 'dataB'],
      mapping: { dataA, dataB },
      defaultValue: dataA,
    }
},

Then a value that depends on a dataset can be computed in story component:

computed: {
  getData() {
    return this.dataset ?
      new Promise((resolve) => setTimeout(() => resolve({ data: this.dataset }))) :
      null;
  }
},
template:  ...
Estus Flask0
Related