Switch to using Storybook's new story parameters (Storybook v5)

[timhaines]

Important: This requires a major version bump when releasing and is dependent on Storybook v5.

Breaking Change: This PR removes addWithPercyOptions and replaces it with Storybook's own story parameters for providing options to Percy.

Options are now provided in a percy object in story parameters, either as the 3rd argument to the add function, or with a addParameters function. i.e.:

// add Percy parameters to a single story via the 3rd argument to the `add` function.
storiesOf('Circle Stories', module)
  .add(
    'with multiple widths',
    () => <span>This span renders in widths of 222px and 333px</span>,
    { percy: { widths: [222, 333], rtl: true } }
  );

// OR

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

// OR

// add global parameters to all stories with addParameters in your storybook's config.js.
import { configure, setAddon, addParameters } from '@storybook/react';
addParameters({ percy: { widths: [320, 800] } });

Storybook's behavior is that adding parameters with the add function will be merged into and overwrite clashing parameters provided by addParameters.

This PR also significantly simplifies installation, removing the need for the long step 3.

Closes #50.

Todo:

• Docs update for on each Percy Storybook docs page for this release, simplifying setup, and replacing options section
• Maintain docs for v2 that supports Storybook < v5.
• Ship as pre-release, and have some folk test it.

[djones]

🍍 LGTM

[BPScott]

Nice! I got very excited about that −19,422 diff before realising it's mostly deleting a stray package.lock, oh well :D

I can't see any tests for global parameters, it'd be nice to make sure those work as you'd expect.

e.g.

//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>,
  )

---

Now that global parameters are possible within Percy, is it worth removing the --widths, --rtl and --rtl_regex options from the CLI, as they can be easily expressed with a global addParameters() call? That might help simplify the docs too as you can talk about CLI options, and then parameters that affect stories that can be configured within Percy.

[timhaines]

@BPScott In my one attempt, supplying global params with addParameters did not work. I'll follow up on that. If they're supposed to work, I'll figure out why they're not.

[timhaines]

@BPScott Have confirmed that adding global parameters does work. My previous test must have been flawed.

[Robdel12]

It'd be nice to also switch this package to use the @percy namespace on NPM since we're doing a major version bump

CC: @djones