How to use the addon with CSF?

[sreejith-ms]

Hi,

The Preview addon is working fine when I use the format defined in the documentation. stories.addDecorator(withKnobs).addDecorator(withPreview);

But how can I use this with the Component Story Format?

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as Meta;

const Template: Story<Page> = (args: Page) => ({
  component: Page,
  props: args,
});

export const LoggedIn = Template.bind({});

[daybrush]

@sreejith-ms

Oh thank you for question :) https://storybook.js.org/docs/react/api/csf

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  decorators: [withKnobs, withPreview],
} as Meta;

export const LoggedIn = Template.bind({});
LoggedIn. parameters = {
   preview: [
      .....
   ],
}

[sreejith-ms]

@daybrush Thank you, that works. Is it possible to load ts source code in previewTemplate ?

[daybrush]

@sreejith-ms

uhmm shouldn't you use something like a raw-loader?