Renderer React: first example of multiframework support using decorators

[Hypnosphi]

Issue: #3889

TODO:

• Create an addon for rendering React stories in @storybook/html
• Copy some of the stories from offitial storybook to HTML examples
• Add docs
• Move more stuff from @storybook/react to @storybook/renderer-react

Includes changes from #7791

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/g9ijbqng0
🌍 Preview: https://monorepo-git-addon-react.storybook.now.sh

[igor-dv]

Since it's a POC I am not sure how deep we need to go with comments, but anyway =)

1. If we already moving presets out (here in react, but after there will be others), it's better to move them into their own packages, that's how it will be easier to customise them after (maybe even to the sb/presets repo)

2. in the babelrc we have an overrides for the server code to transpile for node 8, so we need to add there frameworks as well (if there will be a server code there)

[igor-dv]

I think it's better to have the presets more accessible, something like:

import { presets } from '@storybook/addon-react';

/* blah blah blah */

frameworkPresets: [
  presets.react,
  require.resolve('./framework-preset-cra.js'),
  presets.reactDocgen,
]

also it will be more formatted way for frameworks to expose their presets.

Another option will be hide the particular presets, for example:

import { createPresets } from '@storybook/addon-react';

/* blah blah blah */

frameworkPresets: [
  ...createPresets({
     afterReact: [require.resolve('./framework-preset-cra.js')],
  });
]

[Hypnosphi]

I don't think we can mix preview and server code in one endpoint, so it probably can't be just @storybook/addon-react.

I think I'll make it just @storybook/addon-react/preset after we merge #6828

[Hypnosphi]

If we already moving presets out (here in react, but after there will be others), it's better to move them into their own packages, that's how it will be easier to customise them after (maybe even to the sb/presets repo)

Creating a separate package makes sense to me, but can we leave the presets that we use internally in monorepo for easier syncing?

in the babelrc we have an overrides for the server code to transpile for node 8, so we need to add there frameworks as well (if there will be a server code there)

It's already under src/server, isn't it enough?

[Hypnosphi]

@igor-dv BTW it's not only about presets. I want stuff like globals.js and element_check to be shared between app/react and addons/frameworks/react as well. Where should they live, in your opinion?

Honestly, I think it's no harm to have the app depend on the add-on. Maybe at some point we can even make the app just a wrapper for addon + @storybook/html (the latter should probably be aliased as @storybook/app)

[igor-dv]

@Hypnosphi

Creating a separate package makes sense to me, but can we leave the presets that we use internally in monorepo for easier syncing?

makes sense.

It's already under src/server, isn't it enough?

That what I see now in the babelrc.

       './lib/core/src/server',
        './lib/node-logger',
        './lib/codemod',
        './addons/storyshots',
        './addons/storysource/src/loader',
        './app/**/src/server/**',
        './app/**/src/bin/**',

BTW it's not only about presets. I want stuff like globals.js and element_check to be shared between app/react and addons/frameworks/react as well. Where should they live, in your opinion?

I think those kind of pkgs we can put under the lib.

Honestly, I think it's no harm to have the app depend on the add-on. Maybe at some point we can even make the app just a wrapper for addon + @storybook/html (the latter should probably be aliased as @storybook/app)

Agree with that

[Hypnosphi]

@shilman what's the easiest way to migrate our own examples to module format? I'm talking about https://github.com/storybookjs/storybook/tree/addon-react/examples/html-kitchen-sink/stories/react

[devinus]

I'm so excited about this. My team will benefit from this exact scenario. We have a storybook for HTML "components" and React components right now, but we're forced to render the React components now.