React: Add DecoratorFn type to exports

[hipstersmoothie]

What I did

With the old @types/storybook__react, users could use StoryDecorator to make a decorator outside of the addDecorator function. With the new types I had to do a little type math to get it to work

import { storiesOf, addDecorator } from '@storybook/react';

type StoryDecorator = Parameters<typeof addDecorator>[0]

const container: StoryDecorator = storyFn => (
  <div style={{ maxWidth: 800, margin: 'auto', padding: '20px 0' }}>
    {storyFn()}
  </div>
);

storiesOf('Components|Deck/Carrousel', module)
  .addDecorator(container)

This PR add Decorator to the @storybook/react types.

import { storiesOf, StoryDecorator } from '@storybook/react';

const container: StoryDecorator = storyFn => (
  <div style={{ maxWidth: 800, margin: 'auto', padding: '20px 0' }}>
    {storyFn()}
  </div>
);

storiesOf('Components|Deck/Carrousel', module)
  .addDecorator(container)

How to test

• Is this testable with Jest or Chromatic screenshots? no
• Does this need a new example in the kitchen sink apps? no
• Does this need an update to the documentation? no

If your answer is yes to any of these, please make sure to include it in your PR.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-react-decorator.storybook.now.sh

[shilman]

@hipstersmoothie @kroeder Do we need to add this to every other framework as well?

[hipstersmoothie]

I am unfamiliar with the other frameworks but it would probably make sense. Would you like me to add it to the other apps?

[ndelangen]

@hipstersmoothie if you could add it to the other frameworks too, that'd be great, but I think we can do that in a separate PR tbh, no reason to block this one for that.

[ndelangen]

TIL

[ndelangen]

I personally think the name StoryDecorator is a bit verbose, either DecoratorFn or DecoratorFunction would be a bit better IMHO.

This IS what it's called in the addons package btw.

[hipstersmoothie]

I am open to change the name. I was just copying what the definitely typed package named it to cause the least friction. But will change it to anything you want as it's pretty easy to replace it in my stories.

[github-actions]

Automention: Hey @emilio-martinez @gaetanmaisse @kroeder, you've been tagged! Can you give a hand here?

[ndelangen]

@hipstersmoothie what do you think of the proposed namechange?

[hipstersmoothie]

I am open to change the name. I was just copying what the DefinitelyTyped package named it to cause the least friction. But will change it to anything you want as it's pretty easy to replace it in my stories.

[ndelangen]

Yeah I'd rather change the name to something that makes sense to us.

[hipstersmoothie]

@ndelangen changed it to DecoratorFn

[mvasin]

Renaming StoryDecorator to DecoratorFn is a breaking change, and you just bump a patch version. Not quite semver-friendly.

[shilman]

@mvasin is there something we can do to make it back-compat? want to create a PR for that?

[MichaelDeBoey]

@mvasin Technically it's not a breaking change, since the types were not in this repo yet and were maintained externally.