Renderer React: first example of multiframework support using decorators

.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt

@@ -14,6 +14,7 @@ object OpenSourceProjects_Storybook_Bootstrap : BuildType({
 
     artifactRules = """
         addons/*/dist/** => dist.zip/addons
+        addons/frameworks/*/dist/** => dist.zip/addons/frameworks
         addons/storyshots/*/dist/** => dist.zip/addons/storyshots
         app/*/dist/** => dist.zip/app
         lib/*/dist/** => dist.zip/lib

addons/frameworks/react/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@storybook/addon-react",
+  "version": "5.1.0-beta.1",
+  "description": "React addon for Storybook",
+  "keywords": [
+    "storybook",
+    "react"
+  ],
+  "homepage": "https://github.com/storybooks/storybook/tree/master/addons/app/react",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git",
+    "directory": "app/react"
+  },
+  "license": "MIT",
+  "main": "dist/client/index.js",
+  "types": "dist/client/index.d.ts",
+  "scripts": {
+    "prepare": "node ../../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.1.0-beta.1",
+    "@storybook/core-events": "5.1.0-beta.1",
+    "global": "^4.3.2"
+  },
+  "peerDependencies": {
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

addons/frameworks/react/src/client/index.ts

@@ -0,0 +1,36 @@
+import ReactDOM from 'react-dom';
+import addons, { makeDecorator } from '@storybook/addons';
+import { REGISTER_SUBSCRIPTION, STORY_CHANGED } from '@storybook/core-events';
+import { document } from 'global';
+
+let node = document.createElement('div');
+
+const unmount = () => {
+  ReactDOM.unmountComponentAtNode(node);
+  node = document.createElement('div');
+};
+
+const subscription = () => {
+  const channel = addons.getChannel();
+  channel.on(STORY_CHANGED, unmount);
+  return () => {
+    unmount();
+    channel.removeListener(STORY_CHANGED, unmount);
+  };
+};
+
+export default makeDecorator({
+  name: 'withReact',
+  parameterName: 'framework',
+  wrapper: (getStory, context, { parameters }) => {
+    const story = getStory(context);
+    if (!parameters || !parameters.react) {
+      return story;
+    }
+
+    const channel = addons.getChannel();
+    channel.emit(REGISTER_SUBSCRIPTION, subscription);
+    ReactDOM.render(story, node);
+    return node;
+  },
+});

addons/frameworks/react/src/typings.d.ts

@@ -0,0 +1 @@
+declare module 'global';

addons/frameworks/react/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ]
+}

addons/links/src/react/components/link.tsx

@@ -29,7 +29,7 @@ interface State {
 }
 
 export default class LinkTo extends PureComponent<Props, State> {
-  defaultProps: Props = {
+  static defaultProps: Props = {
     kind: null,
     story: null,
     children: undefined,

app/react/package.json

@@ -29,6 +29,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@storybook/addon-react": "5.1.0-beta.1",
     "@storybook/core": "5.1.0-beta.1",
     "@storybook/node-logger": "5.1.0-beta.1",
     "@svgr/webpack": "^4.0.3",

app/react/src/server/options.js

@@ -3,8 +3,8 @@ import packageJson from '../../package.json';
 export default {
   packageJson,
   frameworkPresets: [
-    require.resolve('./framework-preset-react.js'),
+    require.resolve('@storybook/addon-react/dist/server/framework-preset-react.js'),
     require.resolve('./framework-preset-cra.js'),
-    require.resolve('./framework-preset-react-docgen.js'),
+    require.resolve('@storybook/addon-react/dist/server/framework-preset-react-docgen.js'),
   ],
 };

examples/html-kitchen-sink/.storybook/config.js

@@ -1,8 +1,22 @@
 import { configure, addParameters, addDecorator } from '@storybook/html';
 import { withA11y } from '@storybook/addon-a11y';
+import withReact from '@storybook/addon-react';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+import React from 'react';
 
 addDecorator(withA11y);
 
+addDecorator((getStory, context) => {
+  const story = getStory(context);
+  const { framework } = context.parameters;
+  if (!framework || !framework.react) {
+    return story;
+  }
+
+  return <ThemeProvider theme={convert(themes.light)}>{story}</ThemeProvider>;
+});
+addDecorator(withReact);
+
 addParameters({
   a11y: {
     config: {},

examples/html-kitchen-sink/.storybook/presets.js

@@ -0,0 +1,4 @@
+module.exports = [
+  '@storybook/addon-react/dist/server/framework-preset-react',
+  '@storybook/addon-react/dist/server/framework-preset-react-docgen',
+];

examples/html-kitchen-sink/package.json

@@ -24,15 +24,21 @@
     "@storybook/addon-links": "5.1.0-beta.1",
     "@storybook/addon-notes": "5.1.0-beta.1",
     "@storybook/addon-options": "5.1.0-beta.1",
+    "@storybook/addon-react": "5.1.0-beta.1",
     "@storybook/addon-storyshots": "5.1.0-beta.1",
     "@storybook/addon-storysource": "5.1.0-beta.1",
     "@storybook/addon-viewport": "5.1.0-beta.1",
     "@storybook/addons": "5.1.0-beta.1",
     "@storybook/core": "5.1.0-beta.1",
     "@storybook/core-events": "5.1.0-beta.1",
     "@storybook/html": "5.1.0-beta.1",
+    "@storybook/theming": "5.1.0-beta.1",
     "eventemitter3": "^3.1.0",
     "format-json": "^1.0.3",
-    "global": "^4.3.2"
+    "global": "^4.3.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "prop-types": "^15.7.2",
+    "uuid": "^3.3.2"
   }
 }

examples/html-kitchen-sink/stories/react/Logger.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import json from 'format-json';
+import PropTypes from 'prop-types';
+
+import { styled } from '@storybook/theming';
+import EventEmitter from 'eventemitter3';
+import uuid from 'uuid/v4';
+
+const Wrapper = styled.div({
+  padding: 20,
+});
+const Title = styled.h1({
+  margin: 0,
+});
+const Item = styled.div({
+  listStyle: 'none',
+  marginBottom: 10,
+});
+
+export default class Logger extends Component {
+  static LOG_EVENT = 'Logger:log';
+
+  static propTypes = {
+    emitter: PropTypes.instanceOf(EventEmitter).isRequired,
+    title: PropTypes.string,
+  };
+
+  static defaultProps = {
+    title: 'Logger',
+  };
+
+  state = {
+    events: [],
+  };
+
+  componentDidMount() {
+    const { emitter } = this.props;
+
+    emitter.on(Logger.LOG_EVENT, this.onEventHandler);
+  }
+
+  componentWillUnmount() {
+    const { emitter } = this.props;
+
+    emitter.removeListener(Logger.LOG_EVENT, this.onEventHandler);
+  }
+
+  onEventHandler = ({ name, payload }) => {
+    this.setState(({ events }) => ({
+      events: [...events, { name, id: uuid(), payload }],
+    }));
+  };
+
+  render() {
+    const { events } = this.state;
+    const { title } = this.props;
+
+    return (
+      <Wrapper>
+        <Title>{title}</Title>
+        <dl>
+          {events.map(({ id, name, payload }) => (
+            <Item key={id}>
+              <dt>
+                <b>Event name:</b> {name}
+              </dt>
+              <dd>
+                <b>Event payload:</b> {json.plain(payload)}
+              </dd>
+            </Item>
+          ))}
+        </dl>
+      </Wrapper>
+    );
+  }
+}