Add CRA React15 example to test back-compat (#6475)

Add CRA React15 example to test back-compat

.circleci/config.yml

@@ -109,6 +109,11 @@ jobs:
           command: |
             cd examples/preact-kitchen-sink
             yarn build-storybook
+      - run:
+          name: Build cra react15
+          command: |
+            cd examples/cra-react15
+            yarn build-storybook
       - run:
           name: Build official-storybook
           command: |
@@ -186,6 +191,11 @@ jobs:
           command: |
             cd examples/preact-kitchen-sink
             yarn storybook --smoke-test --quiet
+      - run:
+          name: Run cra reac15 (smoke test)
+          command: |
+            cd examples/cra-react15
+            yarn storybook --smoke-test --quiet
   native-smoke-tests:
     <<: *defaults
     steps:

.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt

@@ -9,7 +9,7 @@ import jetbrains.buildServer.configs.kotlin.v2017_2.failureConditions.failOnMetr
 enum class StorybookApp(val appName: String, val exampleDir: String, val merged: Boolean = true) {
     CRA("CRA", "cra-kitchen-sink"),
     CRA_TS("CRA TS", "cra-ts-kitchen-sink"),
-    CRA_REACT15("CRA REACT15", "cra-react15", false),
+    CRA_REACT15("CRA REACT15", "cra-react15"),
     VUE("Vue", "vue-kitchen-sink"),
     ANGULAR("Angular", "angular-cli"),
     POLYMER("Polymer", "polymer-cli"),

addons/links/src/preview.ts

@@ -3,7 +3,7 @@ import { document } from 'global';
 import qs from 'qs';
 import addons from '@storybook/addons';
 import { SELECT_STORY, STORY_CHANGED } from '@storybook/core-events';
-import { toId } from '@storybook/router';
+import { toId } from '@storybook/router/utils';
 
 interface Params {
   kind: string;

docs/src/pages/configurations/theming/index.md

@@ -15,7 +15,7 @@ As the simplest example example, you can tell Storybook to use the "dark" theme
 
 ```js
 import { addParameters } from '@storybook/react';
-import { themes } from '@storybook/theming';
+import { themes } from '@storybook/theming/create';
 
 // Option defaults.
 addParameters({
@@ -47,14 +47,14 @@ Read on for more on how to create your own theme.
 
 ## Create a theme quickstart
 
-The easiest way to customize Storybook is to generate a new theme using the `create()` function from `storybook/theming`. This function includes shorthands for the most common theme variables. Here's how to use it:
+The easiest way to customize Storybook is to generate a new theme using the `create()` function from `storybook/theming/create`. This function includes shorthands for the most common theme variables. Here's how to use it:
 
 First create a new file in `.storybook` called `yourTheme.js`.
 
 Next paste the code below and tweak the variables.
 
 ```ts
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 
 export default create({
   base: 'light',
@@ -110,7 +110,7 @@ The `storybook/theming` package is built using TypeScript, so this should help c
 Many theme variables are optional, the `base` property is NOT. This is a perfectly valid theme:
 
 ```ts
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 
 export default create({
   base: 'light',

examples/cra-react15/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react"]
+}

examples/cra-react15/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

examples/cra-react15/.storybook/config.js

@@ -0,0 +1,14 @@
+import { configure, addParameters } from '@storybook/react';
+import { create } from '@storybook/theming/create';
+
+function loadStories() {
+  require('../src/stories');
+}
+
+addParameters({
+  options: {
+    theme: create({ colorPrimary: 'hotpink', colorSecondary: 'orangered' }),
+  },
+});
+
+configure(loadStories, module);

examples/cra-react15/README.md

@@ -0,0 +1 @@
+This is a [Create React App](https://github.com/facebookincubator/create-react-app) that uses an old version of CRA and an old version of React (15.4.x). It's not meant to be exhaustive but rather to make sure we don't break legacy support.

examples/cra-react15/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "cra-react15",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "babel-loader": "7",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-scripts": "1.1.5",
+    "global": "^4.3.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "now-build": "node ../../scripts/bootstrap --core && yarn run build-storybook --quiet",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "5.1.0-alpha.39",
+    "@storybook/addon-links": "5.1.0-alpha.39",
+    "@storybook/theming": "5.1.0-alpha.39",
+    "@storybook/react": "5.1.0-alpha.39",
+    "babel-core": "6",
+    "babel-runtime": "6"
+  }
+}

examples/cra-react15/public/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/cra-react15/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/cra-react15/src/App.css

@@ -0,0 +1,32 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-title {
+  font-size: 1.5em;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

examples/cra-react15/src/App.js

@@ -0,0 +1,22 @@
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h1 className="App-title">Welcome to React</h1>
+        </header>
+        <p className="App-intro">
+          To get started, edit <code>src/App.js</code> and save to reload.
+        </p>
+      </div>
+    );
+  }
+}
+
+export default App;

examples/cra-react15/src/App.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { document } from 'global';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

examples/cra-react15/src/index.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

examples/cra-react15/src/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import { document } from 'global';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));

examples/cra-react15/src/stories/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button, Welcome } from '@storybook/react/demo';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+storiesOf('Button', module)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ));

examples/official-storybook/README.md

@@ -6,3 +6,9 @@ This storybook includes stories for:
 - `@storybook/ui` - the UI of storybook itself
 - `@storybook/addon-*` - various addons.
 - `@storybook/other-*` - various examples.
+
+## How to make new `build-storybook`s:
+
+```sh
+sudo ln -s ../../{new-example}/storybook-static /Users/{user}/{location-of-storybook-repo}/core/examples/official-storybook/built-storybooks/{new-example}
+```

examples/official-storybook/built-storybooks/cra-react15

@@ -0,0 +1 @@
+../../cra-react15/storybook-static

examples/official-storybook/built-storybooks/preact-kitchen-sink

@@ -1 +1 @@
-../../preact-kitchen-sink/storybook-static
+../../preact-kitchen-sink/storybook-static

examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot

@@ -16,6 +16,14 @@ exports[`Storyshots App|acceptance cra-kitchen-sink 1`] = `
 />
 `;
 
+exports[`Storyshots App|acceptance cra-react15 1`] = `
+<iframe
+  src="cra-react15/index.html"
+  style="border:0;position:absolute;top:0;left:0;width:100vw;height:100vh"
+  title="cra-react15"
+/>
+`;
+
 exports[`Storyshots App|acceptance cra-ts-kitchen-sink 1`] = `
 <iframe
   src="cra-ts-kitchen-sink/index.html"

examples/official-storybook/stories/app-acceptance.stories.js

@@ -26,6 +26,7 @@ const style = {
   'html-kitchen-sink',
   'riot-kitchen-sink',
   'preact-kitchen-sink',
+  'cra-react15',
 ].forEach(name => {
   chapter.add(name, () => <iframe style={style} title={name} src={`${name}/index.html`} />, {
     chromatic: { delay: 2000 },

jest.config.js

@@ -34,8 +34,9 @@ module.exports = {
     '/dist/',
     'addon-jest.test.js',
     '/cli/test/',
-    '/examples/cra-kitchen-sink/src/App.test.js',
-    '/examples/cra-ts-kitchen-sink/src/components/',
+    '/examples/cra-kitchen-sink/src/*',
+    '/examples/cra-react15/src/*',
+    '/examples/cra-ts-kitchen-sink/src/components/*',
     '/examples/angular-cli/src/app/*',
   ],
   collectCoverage: false,

lib/router/package.json

@@ -22,7 +22,6 @@
   },
   "dependencies": {
     "@reach/router": "^1.2.1",
-    "@storybook/theming": "5.1.0-alpha.39",
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",

lib/router/src/visibility.tsx

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+
+interface Props {
+  hidden: boolean;
+  children: ReactNode;
+}
+
+export const ToggleVisibility = ({ hidden, children }: Props) => (
+  <div hidden={hidden}>{children}</div>
+);