diff --git a/.circleci/config.yml b/.circleci/config.yml index cac07699e4f..3dd3b7f79b2 100644 --- a/.circleci/config.yml +++ b/.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: diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt index 51038da7797..a64fd61d6a3 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt @@ -9,6 +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"), VUE("Vue", "vue-kitchen-sink"), ANGULAR("Angular", "angular-cli"), POLYMER("Polymer", "polymer-cli"), diff --git a/examples/cra-react15/.babelrc b/examples/cra-react15/.babelrc new file mode 100644 index 00000000000..4ffef06dbfb --- /dev/null +++ b/examples/cra-react15/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["env", "react"] +} diff --git a/examples/cra-react15/.storybook/addons.js b/examples/cra-react15/.storybook/addons.js new file mode 100644 index 00000000000..6aed412d04a --- /dev/null +++ b/examples/cra-react15/.storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/examples/cra-react15/.storybook/config.js b/examples/cra-react15/.storybook/config.js new file mode 100644 index 00000000000..352a5946749 --- /dev/null +++ b/examples/cra-react15/.storybook/config.js @@ -0,0 +1,14 @@ +import { configure, addParameters } from '@storybook/react'; +import { create } from '@storybook/theming'; + +function loadStories() { + require('../src/stories'); +} + +addParameters({ + options: { + theme: create({ colorPrimary: 'hotpink', colorSecondary: 'orangered' }), + }, +}); + +configure(loadStories, module); diff --git a/examples/cra-react15/README.md b/examples/cra-react15/README.md new file mode 100644 index 00000000000..d3442797bfc --- /dev/null +++ b/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. diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json new file mode 100644 index 00000000000..6efdcc5a5d6 --- /dev/null +++ b/examples/cra-react15/package.json @@ -0,0 +1,28 @@ +{ + "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", + "storybook": "start-storybook -p 9009 -s public", + "build-storybook": "build-storybook -s public" + }, + "devDependencies": { + "@storybook/addon-actions": "5.1.0-alpha.24", + "@storybook/addon-links": "5.1.0-alpha.24", + "@storybook/theming": "5.1.0-alpha.24", + "@storybook/react": "5.1.0-alpha.24", + "babel-core": "6", + "babel-runtime": "6" + } +} diff --git a/examples/cra-react15/public/favicon.ico b/examples/cra-react15/public/favicon.ico new file mode 100644 index 00000000000..a11777cc471 Binary files /dev/null and b/examples/cra-react15/public/favicon.ico differ diff --git a/examples/cra-react15/public/index.html b/examples/cra-react15/public/index.html new file mode 100644 index 00000000000..ed0ebafa1b7 --- /dev/null +++ b/examples/cra-react15/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + React App + + + +
+ + + diff --git a/examples/cra-react15/public/manifest.json b/examples/cra-react15/public/manifest.json new file mode 100644 index 00000000000..ef19ec243e7 --- /dev/null +++ b/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" +} diff --git a/examples/cra-react15/src/App.css b/examples/cra-react15/src/App.css new file mode 100644 index 00000000000..31be39dcc49 --- /dev/null +++ b/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); + } +} diff --git a/examples/cra-react15/src/App.js b/examples/cra-react15/src/App.js new file mode 100644 index 00000000000..5c30e5e818b --- /dev/null +++ b/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 ( +
+
+ logo +

Welcome to React

+
+

+ To get started, edit src/App.js and save to reload. +

+
+ ); + } +} + +export default App; diff --git a/examples/cra-react15/src/App.test.js b/examples/cra-react15/src/App.test.js new file mode 100644 index 00000000000..2fa98e36949 --- /dev/null +++ b/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(, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/examples/cra-react15/src/index.css b/examples/cra-react15/src/index.css new file mode 100644 index 00000000000..b4cc7250b98 --- /dev/null +++ b/examples/cra-react15/src/index.css @@ -0,0 +1,5 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} diff --git a/examples/cra-react15/src/index.js b/examples/cra-react15/src/index.js new file mode 100644 index 00000000000..ad8982e6fb1 --- /dev/null +++ b/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(, document.getElementById('root')); diff --git a/examples/cra-react15/src/logo.svg b/examples/cra-react15/src/logo.svg new file mode 100644 index 00000000000..6b60c1042f5 --- /dev/null +++ b/examples/cra-react15/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/cra-react15/src/stories/index.js b/examples/cra-react15/src/stories/index.js new file mode 100644 index 00000000000..aa04241802d --- /dev/null +++ b/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', () => ); + +storiesOf('Button', module) + .add('with text', () => ) + .add('with some emoji', () => ( + + )); diff --git a/examples/official-storybook/stories/app-acceptance.stories.js b/examples/official-storybook/stories/app-acceptance.stories.js index 07b936acdcd..edea0adc912 100644 --- a/examples/official-storybook/stories/app-acceptance.stories.js +++ b/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, () =>