storybookjs/storybook

How to write this in new format

angelod1as opened this issue · 2 comments

angelod1as commented

What's the problem?
I have this code in my codebase and need to upgrade to Storybook's new format:

import React from 'react';
import withMock from 'storybook-addon-mock';

storiesOf('Storybook Addon Mock', module)
  .addDecorator(withMock)
  .add('Getting Mock API Response', () => <ComponentWithAPICall />, {
    mockData: [{
      url: '/api/get-users',
      method: 'GET',
      status: 200,
      response: {
        data: [{ id: 1}],
      },
    }],
  });

My code, right now is:

import React from 'react'
import withMock from 'storybook-addon-mock'
import CycleCard from './CycleCard'

export default {
  title: 'Settings/CycleCard',
  component: CycleCard,
  argTypes: {},
  decorators: [
    Story => (
      <withMock> // I don't know exactly where to put the code in `.add` function
        <Story />
      </withMock>
    ),
  ],
}

const Template = args => <CycleCard {...args} />

export const Default = Template.bind({})
Default.args = {}

Is there documentation on this?
This code comes from this addon but I think you can help me better how to translate this code, as it's more a syntax difference than addon functionality

shilman commented 
import React from 'react'
import withMock from 'storybook-addon-mock'
import CycleCard from './CycleCard'

export default {
  title: 'Settings/CycleCard',
  component: CycleCard,
  decorators: [withMock],
}

const Template = args => <CycleCard {...args} />

export const Default = Template.bind({})
Default.parameters = {
    mockData: [{
      url: '/api/get-users',
      method: 'GET',
      status: 200,
      response: {
        data: [{ id: 1}],
      },
    }],
}

You can also use the storiesof-to-csf codemod to do this automatically for you: https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#storiesof-to-csf