Use storybook parameters instead of maintaining a separate store

[BPScott]

Currently percy-storybook maintains its own parameter store for attaching parameters to a particular Story.

Storybook 4.0.0 added support for adding arbitrary parameters to stories.

It would be great if percy-storybook could use this idiomatic way instead of storing data instead of its own store. This would also enable setting global options for all stories within storybook itself instead of having to pass command line flags.

Essentially instead of writing:

 storiesOf('My Story', module)
  .addWithPercyOptions(
    'with multiple widths',
    { widths: [222, 333], rtl: true },
    () => <span>This span renders in widths of 222px and 333px</span>
  );

Consumers would be able to write:

storiesOf('My Story', module)
  .add(
    'with multiple widths',
    () => <span>This span renders in widths of 222px and 333px</span>,
    { percy: { widths: [222, 333], rtl: true } }
  );

// OR

storiesOf('My Story', module)
  .addParameters({ percy: { widths: [222, 333], rtl: true } });
  .add(
    'with multiple widths',
    () => <span>This span renders in widths of 222px and 333px</span>,
  );

This would also allow global settings defined in storybook config itself instead of having to rely on CLI arguments:

//global parameters, applied to all stories
addParameters({ percy: { widths: [222, 333, 444], rtl: true } });

storiesOf('My Story', module)
  .add(
    'with default widths',
    () => <span>This span renders in widths of 222px, 333px and 444px</span>,
  )

Example of parameter usage for reference: https://storybooks-official.netlify.com/?selectedKind=Core%7CParameters&selectedStory=passed%20to%20story&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel

[marcoala]

Also the skip option should use standard parameter api.

[timhaines]

This would also allow us to simplify the setup steps for percy-storybook.

When we do this, I'd suggest percy-storybook moves to the new format, stops supporting the old format, and makes this a major version release.

[BPScott]

If you're looking at a new major version of percy-storybook, it might also be worth investigating storybook's register step for addons. This might help encapsulate and simplify the existing instructions around adding a createPercyAddon() function.

It'd also be worth keeping an eye on storybookjs/storybook#4878 which suggests a standard mechanism for exposing story data instead of relying on your bespoke window.__storybook_stories__ approach.

[timhaines]

@BPScott @marcoala I've prepared a PR that adds support for this. It's dependent on the soon-to-be-released Storybook v5 where the SB team has introduced a new raw() API for reading the params. Would either of you like to try it?

[BPScott]

Woo thank you for this! I'm excited for this and Storybook v5. Let me know when you've got a beta version of percy-storybook deployed to npm and I'll give that + storybook v5 a spin in https://github.com/shopify/polaris-react

[marcoala]

@timhaines thank you very much! I'll try to do it by the end of the week!