Merge pull request #965 from storybooks/webpack-babel-fixes

FIX webpack overriding && CLEANUP && ADD example
storybookjs · Apr 27, 2017 · 1e840db · 1e840db
2 parents c9afedc + eb2eb55
commit 1e840db
Show file tree

Hide file tree

Showing 53 changed files with 431 additions and 1,842 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,9 @@
+{
+  "presets": ["env", "stage-0", "react"],
+  "plugins": [
+    ["transform-runtime", {
+      "polyfill": false,
+      "regenerator": true
+    }]
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -5,7 +5,7 @@ npm-shrinkwrap.json
 dist
 .tern-port
 *.DS_Store
-.jest
+.cache
 junit.xml
 coverage/
 *.lerna_backup

diff --git a/.jestrc b/.jestrc
@@ -1,5 +1,5 @@
 {
-  "cacheDirectory": ".jest",
+  "cacheDirectory": ".cache/jest",
   "clearMocks": true,
   "moduleNameMapper": {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",

diff --git a/.travis.yml b/.travis.yml
@@ -2,7 +2,7 @@ language: node_js
 cache:
   directories:
     - node_modules
-    - .jest
+    - .cache
 notifications:
   email: false
 node_js:

diff --git a/examples/cra-storybook/README.md b/examples/cra-storybook/README.md
diff --git a/examples/cra-storybook/package.json b/examples/cra-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-storybook",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "devDependencies": {
     "@kadira/storybook": "*",

diff --git a/examples/test-cra/.gitignore b/examples/test-cra/.gitignore
@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/examples/test-cra/.storybook/config.js b/examples/test-cra/.storybook/config.js
@@ -0,0 +1,7 @@
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+  require('../src/stories');
+}
+
+configure(loadStories, module);
diff --git a/examples/test-cra/README.md b/examples/test-cra/README.md
diff --git a/examples/test-cra/package.json b/examples/test-cra/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "test-cra",
+  "version": "1.0.0",
+  "private": true,
+  "devDependencies": {
+    "@kadira/storybook": "file:../../packages/react-storybook",
+    "@kadira/storybook-addons": "file:../../packages/addons",
+    "@kadira/storybook-channel": "file:../../packages/channel",
+    "@kadira/storybook-ui": "file:../../packages/storybook-ui",
+    "@kadira/storybook-addon-actions": "file:../../packages/addon-actions",
+    "@kadira/storybook-channel-postmsg": "file:../../packages/channel-postmessage",
+    "react-scripts": "0.9.5"
+  },
+  "dependencies": {
+    "react": "^15.4.2",
+    "react-dom": "^15.4.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"
+  }
+}
diff --git a/examples/test-cra/public/favicon.ico b/examples/test-cra/public/favicon.ico
diff --git a/examples/test-cra/public/index.html b/examples/test-cra/public/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag 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>
+    <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`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/examples/test-cra/src/App.css b/examples/test-cra/src/App.css
@@ -0,0 +1,24 @@
+.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-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
diff --git a/examples/test-cra/src/App.js b/examples/test-cra/src/App.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h2>Welcome to React</h2>
+        </div>
+        <p className="App-intro">
+          To get started, edit <code>src/App.js</code> and save to reload.
+        </p>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/examples/test-cra/src/App.test.js b/examples/test-cra/src/App.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});
diff --git a/examples/test-cra/src/index.css b/examples/test-cra/src/index.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
diff --git a/examples/test-cra/src/index.js b/examples/test-cra/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/examples/test-cra/src/logo.svg b/examples/test-cra/src/logo.svg
diff --git a/examples/test-cra/src/stories/Button.js b/examples/test-cra/src/stories/Button.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const buttonStyles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+const Button = ({ children, onClick }) => (
+  <button style={buttonStyles} onClick={onClick}>
+    {children}
+  </button>
+);
+
+Button.propTypes = {
+  children: React.PropTypes.string.isRequired,
+  onClick: React.PropTypes.func,
+};
+
+export default Button;
diff --git a/examples/test-cra/src/stories/Welcome.js b/examples/test-cra/src/stories/Welcome.js
@@ -0,0 +1,111 @@
+import React from 'react';
+
+const styles = {
+  main: {
+    margin: 15,
+    maxWidth: 600,
+    lineHeight: 1.4,
+    fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+  },
+
+  logo: {
+    width: 200,
+  },
+
+  link: {
+    color: '#1474f3',
+    textDecoration: 'none',
+    borderBottom: '1px solid #1474f3',
+    paddingBottom: 2,
+  },
+
+  code: {
+    fontSize: 15,
+    fontWeight: 600,
+    padding: '2px 5px',
+    border: '1px solid #eae9e9',
+    borderRadius: 4,
+    backgroundColor: '#f3f2f2',
+    color: '#3a3a3a',
+  },
+
+  codeBlock: {
+    backgroundColor: '#f3f2f2',
+    padding: '1px 10px',
+    margin: '10px 0',
+  },
+};
+
+const codeBlock = `
+// Add this code to "src/stories/index.js"
+
+import '../index.css';
+import App from '../App';
+
+storiesOf('App', module)
+  .add('default view', () => (
+    &lt;App /&gt;
+  ))
+`;
+
+export default class Welcome extends React.Component {
+  showApp(e) {
+    e.preventDefault();
+    if (this.props.showApp) this.props.showApp();
+  }
+
+  render() {
+    return (
+      <div style={styles.main}>
+        <h1>Welcome to STORYBOOK</h1>
+        <p>
+          This is a UI component dev environment for your app.
+        </p>
+        <p>
+          We've added some basic stories inside the
+          {' '}
+          <code style={styles.code}>src/stories</code>
+          {' '}
+          directory.
+          <br />
+          A story is a single state of one or more UI components. You can have as many stories as you want.
+          <br />
+          (Basically a story is like a visual test case.)
+        </p>
+        <p>
+          See these sample
+          {' '}
+          <a style={styles.link} href="#" onClick={this.showApp.bind(this)}>stories</a>
+          {' '}
+          for a component called
+          {' '}
+          <code style={styles.code}>Button</code>
+          .
+        </p>
+        <p>
+          Just like that, you can add your own components as stories.
+          <br />
+          Here's how to add your <code style={styles.code}>App</code> component as a story.
+          <div
+            style={styles.codeBlock}
+            dangerouslySetInnerHTML={{ __html: `<pre>${codeBlock}</pre>` }}
+          />
+        </p>
+        <p>
+          Usually we create stories with smaller UI components in the app.<br />
+          Have a look at the
+          {' '}
+          <a
+            style={styles.link}
+            href="https://getstorybook.io/docs/basics/writing-stories"
+            target="_blank"
+          >
+            Writing Stories
+          </a>
+          {' '}
+          section in our documentation.
+        </p>
+      </div>
+    );
+  }
+}
diff --git a/examples/test-cra/src/stories/index.js b/examples/test-cra/src/stories/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf, action, linkTo } from '@kadira/storybook';
+import Button from './Button';
+import Welcome from './Welcome';
+
+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')}>😀 😎 👍 💯</Button>);
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "lerna": "2.0.0-beta.38",
+  "lerna": "2.0.0-rc.3",
   "version": "3.0.0",
   "packages": [
     "packages/*",

diff --git a/package.json b/package.json
@@ -1,7 +1,14 @@
 {
   "name": "storybook",
   "devDependencies": {
+    "babel-cli": "^6.14.0",
+    "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.2",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.13.0",
+    "babel-preset-env": "^1.4.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0",
     "codecov": "^2.1.0",
     "enzyme": "^2.8.2",
     "enzyme-to-json": "^1.5.1",
@@ -16,7 +23,8 @@
     "prettier": "^1.1.0",
     "react": "^15.5.4",
     "react-addons-test-utils": "^15.5.1",
-    "react-dom": "^15.5.4"
+    "react-dom": "^15.5.4",
+    "shelljs": "^0.7.7"
   },
   "scripts": {
     "postinstall": "lerna bootstrap --hoist",

diff --git a/packages/addon-actions/.babelrc b/packages/addon-actions/.babelrc