Is it possible to access story's data in storybook decorator?

user_3477084 0
Viewed 1687

In Vue.js, I have series of custom input components that have v-model. in Storybook, I want to add a decorator to my stories to show the current value of my custom input, How can I access the component's data on decorator?

Here is the TextField.stories.js story:

import TextField from 'TextField';
import decorator from 'decorator';

export default {
    title: 'Example/TextField',
    component: TextField,
    decorators: [decorator],
    argTypes: {
        update: { action: 'update' },
        // value: { control: { type: 'text' } },
    },
};

const Template = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { TextField },
    template: '<text-field v-model="value" @update="update" v-bind="$props" />',
    data() {
        return {
            value: 'foo bar',
        };
    },
});

export const Simple = Template.bind({});
Simple.args = {
    label: 'Simple Text Field',
};

Here is the decorator.js, I want to access the value from the story in here:

export default () => ({
    template: '<div class="m-5"><story /><pre class="bg-secondary mt-5 p-4">{{ value }}</pre></div>',
});
storybook vue.js
1 Answers

You can access an individual story's args from a global decorator:

// preview.js:
export const decorators = [(storyFn, context) => {
  const { label, ...otherArgs } = context.args;

  // use in decorator output
}]

And then in CSF format:

export const MyStory = ({ label, ...otherArgs }) => { ... }
MyStory.args = {
   label: 'whatever',
   // etc.
}
user_116146390
Related