#Upgrading to storybook 7 - using Template.bind({})

1 messages · Page 1 of 1 (latest)

empty rose
#

Our migration to Storybook 7 has been fairly painless so far, but we've come across a blocker where we can't migrate some of our stories if they're using Template.bind({}). ie:

  <RadioToggleComponent {...args} />
);

export const Primary = Template.bind({});
Primary.args = {
  size: 'large',
  values: ['Organisation', 'Individual'],
  name: 'account-type',
  defaultChecked: 'Individual',
};```

We get the following Typescript error: `Property 'bind' does not exist on type 'StoryAnnotations<ReactRenderer, Props>'` 

What's the migration process for stories like this?
#

Do I need to do this each time? Or can I still set a template?

export const Primary: StoryObj<typeof RadioToggleComponent> = args => (
  <RadioToggleComponent {...args} />
);

Primary.args = {
  size: 'large',
  values: ['Organisation', 'Individual'],
  name: 'account-type',
  defaultChecked: 'Individual',
};

export const Secondary: StoryObj<typeof RadioToggleComponent> = args => (
  <RadioToggleComponent {...args} />
);

Secondary.args = {
  size: 'small',
  values: ['Option One', 'Option two', 'Option three'],
  defaultChecked: 'Show content-only',
};
worldly inlet