Renderer React: first example of multiframework support using decorators

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>
+    );
+  }
+}

examples/html-kitchen-sink/stories/react/addon-a11y.stories.js

@@ -0,0 +1,101 @@
+import React, { Fragment } from 'react';
+import { storiesOf } from '@storybook/html';
+
+import { Form } from '@storybook/components';
+import BaseButton from './components/BaseButton';
+import DelayedRender from './components/DelayedRender';
+import Button from './components/addon-a11y/Button';
+
+const text = 'Testing the a11y addon';
+const image = 'http://placehold.it/350x150';
+// eslint-disable-next-line no-script-url
+const href = 'javascript:void 0';
+
+storiesOf('React|A11y/BaseButton', module)
+  .addParameters({
+    framework: { react: true },
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  })
+  .add('Default', () => <BaseButton label="" />)
+  .add('Label', () => <BaseButton label={text} />)
+  .add('Disabled', () => <BaseButton disabled label={text} />)
+  .add('Invalid contrast', () => (
+    // FIXME: has no effect on score
+    <BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
+  ))
+  .add('delayed render', () => (
+    <DelayedRender>
+      <BaseButton label="This button has a delayed render of 1s" />
+    </DelayedRender>
+  ));
+
+storiesOf('React|A11y/Button', module)
+  .addParameters({
+    framework: { react: true },
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  })
+  .add('Default', () => <Button />)
+  .add('Content', () => <Button content={text} />)
+  .add('Label', () => <Button label={text} />)
+  .add('Disabled', () => <Button disabled content={text} />)
+  .add('Invalid contrast', () => <Button contrast="wrong" content={text} />);
+
+storiesOf('React|A11y/Form', module)
+  .addParameters({
+    framework: { react: true },
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  })
+  .add('Without Label', () => (
+    <Form.Field label="">
+      <Form.Input />
+    </Form.Field>
+  ))
+  .add('With label', () => (
+    <Form.Field label={text}>
+      <Form.Input id="1" />
+    </Form.Field>
+  ))
+  .add('With placeholder', () => (
+    <Form.Field label="">
+      <Form.Input id="1" placeholder={text} />
+    </Form.Field>
+  ));
+
+storiesOf('React|A11y/Image', module)
+  .addParameters({
+    framework: { react: true },
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  })
+  /* eslint-disable jsx-a11y/alt-text */
+  .add('Without alt', () => <img src={image} />)
+  .add('Without alt but unchecked', () => <img src={image} />, {
+    a11y: {
+      config: {
+        disableOtherRules: true,
+        rules: [],
+      },
+      options: {},
+    },
+  })
+  .add('With alt', () => <img src={image} alt={text} />)
+  .add('Presentation', () => <img role="presentation" src={image} />);
+
+storiesOf('React|A11y/Typography', module)
+  .addParameters({
+    framework: { react: true },
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  })
+  .add('Correct', () => (
+    <Fragment>
+      <h1>{text}</h1>
+      <p>{text}</p>
+      <a href={href}>{`${text}...`}</a>
+    </Fragment>
+  ))
+  /* eslint-disable jsx-a11y/heading-has-content */
+  .add('Empty Heading', () => <h1 />)
+  .add('Empty Paragraph', () => <p />)
+  /* eslint-disable jsx-a11y/anchor-has-content */
+  .add('Empty Link', () => <a href={href} />)
+  /* eslint-disable jsx-a11y/anchor-is-valid */
+  .add('Link without href', () => <a>{`${text}...`}</a>);