Search code examples
vue.jsstorybook

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


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"
        />
    `,
});

Solution

  • 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:  ...