Merge branch 'master' into fixes-877

.circleci/config.yml

@@ -0,0 +1,185 @@
+defaults: &defaults
+  working_directory: /tmp/storybook
+  docker:
+    - image: node:8
+
+version: 2
+dependencies:
+  pre:
+    - npm install -g npm
+jobs:
+  validate:
+    <<: *defaults
+    steps:
+      - run:
+          name: "Checking Versions"
+          command: |
+            node --version
+            npm --version
+            yarn --version
+  build:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - root-dependencies-{{ checksum "package.json" }}
+            - root-dependencies-
+      - run:
+          name: "Install root dependencies"
+          command: |
+            yarn install
+      - save_cache:
+          key: root-dependencies-{{ checksum "package.json" }}
+          paths:
+            - node_modules
+      - restore_cache:
+          keys:
+            - package-dependencies-{{ checksum "package.json" }}
+            - package-dependencies-
+      - run:
+          name: "Bootstrapping"
+          command: |
+            npm run bootstrap
+      - save_cache:
+          key: package-dependencies-{{ checksum "package.json" }}
+          paths:
+            - app/**/node_modules
+            - docs/**/node_modules
+            - examples/**/node_modules
+            - lib/**/node_modules
+  example-kitchen-sink:
+    <<: *defaults
+    steps:
+      - run:
+          name: "Running kitchen-sink"
+          command: |
+            echo "TODO"
+  example-test-cra:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - root-dependencies-{{ checksum "package.json" }}
+            - root-dependencies-
+      - run:
+          name: "Install root dependencies"
+          command: |
+            yarn install
+      - run:
+          name: "Bootstrapping"
+          command: |
+            npm run bootstrap
+            npm run bootstrap:test-cra
+      - run:
+          name: "Running test-cra"
+          command: |
+            echo "TODO"
+  example-react-native:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - root-dependencies-{{ checksum "package.json" }}
+            - root-dependencies-
+      - run:
+          name: "Install root dependencies"
+          command: |
+            yarn install
+      - run:
+          name: "Bootstrapping packages"
+          command: |
+            npm run bootstrap
+            npm run bootstrap:react-native-vanilla
+      - run:
+          name: "Running react-native"
+          command: |
+            echo "TODO"
+
+  docs:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - root-dependencies-{{ checksum "package.json" }}
+            - root-dependencies-
+      - run:
+          name: "Install root dependencies"
+          command: |
+            yarn install
+      - run:
+          name: "Bootstrapping"
+          command: |
+            npm run bootstrap:docs
+      - run:
+          name: "Running docs"
+          command: |
+            npm run docs:build
+  lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - root-dependencies-{{ checksum "package.json" }}
+            - root-dependencies-
+      - run:
+          name: "Install root dependencies"
+          command: |
+            yarn install
+      - run:
+          name: "Linting"
+          command: |
+            npm run lint
+  unit-test:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - root-dependencies-{{ checksum "package.json" }}
+            - root-dependencies-
+      - run:
+          name: "Install root dependencies"
+          command: |
+            yarn install
+      - run:
+          name: "Bootstrapping"
+          command: |
+            npm run bootstrap
+            npm run bootstrap:docs
+            npm run bootstrap:test-cra
+            npm run bootstrap:react-native-vanilla
+      - run:
+          name: "Unit testing"
+          command: |
+            npm run test -- --coverage -i
+            npm run coverage
+  deploy:
+    <<: *defaults
+    steps:
+      - run:
+          name: "Deploy"
+          command: |
+            echo "TODO"
+workflows:
+  version: 2
+  build_accept_deploy:
+    jobs:
+      - validate
+      - build
+      - example-kitchen-sink
+      - example-test-cra
+      - example-react-native
+      - docs
+      - lint
+      - unit-test
+      - deploy:
+          type: approval
+          requires:
+            - lint
+            - unit-test
+            - docs

.travis.yml

@@ -1,33 +0,0 @@
-language: node_js
-cache:
-  directories:
-  - node_modules
-  - ".cache"
-notifications:
-  email: false
-node_js:
-- node
-before_install: "./scripts/travis/before_install.sh"
-after_success: "./scripts/travis/after_success.sh"
-script:
-- npm run bootstrap
-- npm run bootstrap:test-cra
-- npm run bootstrap:react-native-vanilla
-- npm run bootstrap:docs
-- npm run lint
-- npm run test -- --coverage
-- npm run coverage
-- ([ -z "$DANGER_GITHUB_API_TOKEN" ] && echo "DANGER_GITHUB_API_TOKEN not set") || npm run danger
-git:
-  depth: 1
-env:
-  global:
-  - CXX=g++-4.8
-  - secure: cAde4wBX75KtTWcyOOLAG3Z9ODdqvmbkL7+8fVNj/+QkZZWE8pFa3deaTIHF9NyVO2h6/jutSkzmsz/nOyBYVPHhGsxBTmsyXoko48Wg+iNm7epoH5uts/kmAPiwpzaWGXwuiAvsOGZjYYFzM335jyaOAcZW3f0C5gIJ5XCCdWBQRaFFLq+ZLKsLSME6xTfV2OMVH24hxXvbF9wvO0aj6p/GaT0cS8Rpg4sQ9eeih2IM/uLiqWzp9UUM2m8SUiFfveqYJFkBtzqAus9pbwsoQjnAT5e3CKJUpPiruCAe5FOt57Hl+mH1N1xqP1ei8j2ZNF+E6zuDdAcMpArTIMM69L+D7wzJYDoF2PuF+jeet7ytAFxSgnZHSTsBJn5cZMPh2tuX7aWwgrpMknVe3bdoINwkyVCaIW+Ur6vc37l/Kuw25eiMBtRDyMhUf4V3FAFi3PV1XKn+34cR4kvpOHt6vk8v5CobBHfQdwU+6FMZMo3GFIkDBcLydLn3WLQ3jKa4OcLqWws6o85k+bHZkLhlADjbiX/PzG23D+sT7Inzj//Tef93SIL02yN+ooZdIUtDus3+qZzhcSrDeSb2octjLXRzPiGn5cFNI86HVcu7qF0+4zCPconhM4+mfAh5S19fmnRdTQctQQxbsObuT9jcMvgJdhIX89aA7Ry3pAx2b6Q=
-  - secure: 1iZAjDqikmJaXvql/bpNZay9u5yyQCwNyz3OmcvhJDds6lIKUUU24S3srsYatmE2lkpUuRertieGtzMPkhNx/rFRePD7SZAnSMADyA+lxW9SWu8LHEBcjgsDY89iJH6+4BiYIrldP0vjORYJDwtiEKB3bSJX88zkLpTVTS/L5EHS9kQ/xtQsvoNB69C1ExCt7EVgSL9cDVccFvrU1FhC8w4eH5j3fNikQduaPhF+iqoTo8GW/m22/95Xhmngcu7n6Fm8G/YA2xmkvdCBLL7rLSwccwG9j9MRei704NrBOux7xN/2euVg5jYbFCaDQNjuu4UrvVB2YFxqvpsjYByktfqNMTheqcGdVuh3Jd7cMGmkMSBhUgmUW5KPH4v73mLUlHroywQUU3iiMiCvVMmTd5Xy0o0X0ks5mvXAXWHTmnQkvPyy/V6cwcUfgJC5k3M/V1hDCRMeMVPZsmh73lZffwpAkfx3xJsNf46f7h9aN9Q++danf9JryoS9YsdRBtjfJTtNaO2uH+iUMNSNzAbJmgxtsi3NuX+G+2N02mtaUCzN/SOmKKoZsuPfKVcpHgVa41mgio6QJs7wy9/VWYYASNZddj2HnvLGLBLnJpv+uKKpdSB0Xe6k8dOl1MbaWJT4Xy0/NUD3gawLCvhfN9qL0+QnlJAXCbOoms6EoAyc6fY=
-addons:
-  apt:
-    sources:
-    - ubuntu-toolchain-r-test
-    packages:
-    - g++-4.8

addons/actions/package.json

@@ -24,7 +24,7 @@
     "@storybook/addons": "^3.1.6",
     "deep-equal": "^1.0.1",
     "json-stringify-safe": "^5.0.1",
-    "prop-types": "^15.5.8",
+    "prop-types": "^15.5.10",
     "react-inspector": "^2.1.1",
     "uuid": "^3.1.0"
   },

addons/comments/package.json

@@ -31,7 +31,7 @@
     "insert-css": "^1.0.0",
     "marked": "^0.3.6",
     "moment": "^2.18.1",
-    "prop-types": "^15.5.8",
+    "prop-types": "^15.5.10",
     "react-render-html": "^0.1.6",
     "react-textarea-autosize": "^4.3.0"
   },

addons/events/package.json

@@ -21,15 +21,15 @@
   },
   "dependencies": {
     "@storybook/addons": "^3.1.6",
-    "babel-runtime": "^6.5.0",
+    "babel-runtime": "^6.23.0",
     "format-json": "^1.0.3",
     "prop-types": "^15.5.10",
-    "react-textarea-autosize": "^4.0.5",
+    "react-textarea-autosize": "^4.3.0",
-    "uuid": "^3.0.1"
+    "uuid": "^3.1.0"
   },
   "devDependencies": {
-    "react": "^15.3.2",
+    "react": "^15.5.4",
-    "react-dom": "^15.3.2"
+    "react-dom": "^15.5.4"
   },
   "peerDependencies": {
     "react": "*"

addons/info/package.json

@@ -18,7 +18,7 @@
     "babel-runtime": "^6.23.0",
     "global": "^4.3.2",
     "marksy": "^2.0.0",
-    "prop-types": "^15.5.8",
+    "prop-types": "^15.5.10",
     "react-addons-create-fragment": "^15.5.3"
   },
   "devDependencies": {

addons/knobs/package.json

@@ -23,7 +23,7 @@
     "insert-css": "^1.0.0",
     "lodash.debounce": "^4.0.8",
     "moment": "^2.18.1",
-    "prop-types": "^15.5.8",
+    "prop-types": "^15.5.10",
     "react-color": "^2.11.4",
     "react-datetime": "^2.8.10",
     "react-textarea-autosize": "^4.3.0"

addons/storyshots/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "babel-runtime": "^6.23.0",
     "global": "^4.3.2",
-    "prop-types": "^15.5.8",
+    "prop-types": "^15.5.10",
     "read-pkg-up": "^2.0.0"
   },
   "devDependencies": {

app/react-native/package.json

@@ -29,7 +29,7 @@
     "@storybook/addons": "^3.1.6",
     "@storybook/channel-websocket": "^3.1.6",
     "@storybook/ui": "^3.1.9",
-    "autoprefixer": "^7.0.1",
+    "autoprefixer": "^7.1.1",
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
     "babel-plugin-syntax-async-functions": "^6.13.0",
@@ -47,22 +47,22 @@
     "babel-runtime": "^6.23.0",
     "case-sensitive-paths-webpack-plugin": "^2.0.0",
     "commander": "^2.9.0",
-    "css-loader": "^0.28.0",
+    "css-loader": "^0.28.1",
     "events": "^1.1.1",
-    "express": "^4.15.2",
+    "express": "^4.15.3",
     "file-loader": "^0.11.1",
     "find-cache-dir": "^1.0.0",
     "global": "^4.3.2",
     "json-loader": "^0.5.4",
     "json5": "^0.5.1",
-    "postcss-loader": "^2.0.3",
+    "postcss-loader": "^2.0.5",
     "shelljs": "^0.7.7",
     "style-loader": "^0.17.0",
     "url-loader": "^0.5.8",
     "util-deprecate": "^1.0.2",
-    "uuid": "^3.0.1",
+    "uuid": "^3.1.0",
-    "webpack": "^2.4.1",
+    "webpack": "^2.5.1 || ^3.0.0",
-    "webpack-dev-middleware": "^1.10.1",
+    "webpack-dev-middleware": "^1.10.2",
     "webpack-hot-middleware": "^2.18.0",
     "ws": "^3.0.0"
   },

app/react/package.json

@@ -39,7 +39,7 @@
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.23.0",
     "case-sensitive-paths-webpack-plugin": "^2.0.0",
-    "chalk": "^1.1.3",
+    "chalk": "^2.0.1",
     "commander": "^2.9.0",
     "common-tags": "^1.4.0",
     "configstore": "^3.1.0",
@@ -67,7 +67,7 @@
     "style-loader": "^0.17.0",
     "url-loader": "^0.5.8",
     "util-deprecate": "^1.0.2",
-    "uuid": "^3.0.1",
+    "uuid": "^3.1.0",
     "webpack": "^2.5.1 || ^3.0.0",
     "webpack-dev-middleware": "^1.10.2",
     "webpack-hot-middleware": "^2.18.0"

app/react/src/server/config.js

@@ -73,7 +73,10 @@ export default function(configType, baseConfig, configDir) {
       ...config.module,
       // We need to use our and custom rules.
       ...customConfig.module,
-      rules: [...config.module.rules, ...(customConfig.module.rules || [])],
+      rules: [
+        ...config.module.rules,
+        ...((customConfig.module && customConfig.module.rules) || []),
+      ],
     },
     resolve: {
       ...config.resolve,

examples/cra-kitchen-sink/package.json

@@ -16,7 +16,7 @@
     "prop-types": "^15.5.10",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "uuid": "^3.0.1"
+    "uuid": "^3.1.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.0.0",

examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap

@@ -0,0 +1,613 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots App full app 1`] = `
+<div
+  className="App"
+>
+  <div
+    className="App-header"
+  >
+    <img
+      alt="logo"
+      className="App-logo"
+      src="file-stub"
+    />
+    <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>
+`;
+
+exports[`Storyshots Button with knobs 1`] = `
+<div
+  style={
+    Object {
+      "backgroundColor": "#ffff00",
+      "border": "3px solid #ff00ff",
+      "padding": "10px",
+    }
+  }
+>
+  <p>
+    My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
+  </p>
+  <p>
+    My birthday is: 
+    2017-1-20
+  </p>
+  <p>
+    My wallet contains: $
+    12.50
+  </p>
+  <p>
+    In my backpack, I have:
+  </p>
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  <p>
+    Nice to meet you!
+  </p>
+</div>
+`;
+
+exports[`Storyshots Button with notes 1`] = `
+<button
+  className="css-1yjiefr"
+>
+  Check my notes in the notes panel
+</button>
+`;
+
+exports[`Storyshots Button with some emoji 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Button with some info 1`] = `
+<div>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <button
+      className="css-1yjiefr"
+    >
+      click the "?" in top right for info
+    </button>
+  </div>
+  <a
+    onClick={[Function]}
+    role="button"
+    style={
+      Object {
+        "background": "#28c",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": "12px",
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "textDecoration": "none",
+        "top": 0,
+      }
+    }
+    tabIndex="0"
+  >
+    Show Info
+  </a>
+  <div
+    style={
+      Object {
+        "background": "white",
+        "bottom": 0,
+        "display": "none",
+        "left": 0,
+        "overflow": "auto",
+        "padding": "0 40px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+        "zIndex": 99999,
+      }
+    }
+  >
+    <a
+      onClick={[Function]}
+      role="button"
+      style={
+        Object {
+          "background": "#28c",
+          "borderRadius": "0 0 0 5px",
+          "color": "#fff",
+          "cursor": "pointer",
+          "display": "block",
+          "fontFamily": "sans-serif",
+          "fontSize": "12px",
+          "padding": "5px 15px",
+          "position": "fixed",
+          "right": 0,
+          "textDecoration": "none",
+          "top": 0,
+        }
+      }
+      tabIndex="0"
+    >
+      ×
+    </a>
+    <div
+      style={undefined}
+    >
+      <div
+        style={
+          Object {
+            "WebkitFontSmoothing": "antialiased",
+            "backgroundColor": "#fff",
+            "border": "1px solid #eee",
+            "borderRadius": "2px",
+            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
+            "color": "#444",
+            "fontFamily": "
+              -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
+              \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
+            ",
+            "fontSize": "15px",
+            "fontWeight": 300,
+            "lineHeight": 1.45,
+            "marginTop": "50px",
+            "padding": "20px 40px 40px",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "borderBottom": "1px solid #eee",
+              "marginBottom": 10,
+              "paddingTop": 10,
+            }
+          }
+        >
+          <h1
+            style={
+              Object {
+                "fontSize": "35px",
+                "margin": 0,
+                "padding": 0,
+              }
+            }
+          >
+            Button
+          </h1>
+          <h2
+            style={
+              Object {
+                "fontSize": "22px",
+                "fontWeight": 400,
+                "margin": "0 0 10px 0",
+                "padding": 0,
+              }
+            }
+          >
+            with some info
+          </h2>
+        </div>
+        <div
+          style={
+            Object {
+              "marginBottom": 0,
+            }
+          }
+        >
+          <p
+            style={
+              Object {
+                "WebkitFontSmoothing": "antialiased",
+                "color": "#444",
+                "fontFamily": "
+                  -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
+                  \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
+                ",
+                "fontSize": "15px",
+              }
+            }
+          >
+            Use the 
+            <a
+              href="https://github.com/storybooks/storybook/tree/master/addons/info"
+              rel="noopener noreferrer"
+              style={
+                Object {
+                  "color": "#3498db",
+                }
+              }
+              target="_blank"
+            >
+              info addon
+            </a>
+             with its painful API.
+          </p>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Story Source
+          </h1>
+          <pre
+            style={
+              Object {
+                "backgroundColor": "#fafafa",
+                "fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
+                "fontSize": ".88em",
+                "lineHeight": 1.5,
+                "overflowX": "scroll",
+                "padding": ".5rem",
+              }
+            }
+          >
+            <div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;
+                  Button
+                </span>
+                <span />
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &gt;
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  click the "?" in top right for info
+                </span>
+              </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 18,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                >
+                  &lt;/
+                  Button
+                  &gt;
+                </span>
+              </div>
+            </div>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style={
+              Object {
+                "borderBottom": "1px solid #EEE",
+                "fontSize": "25px",
+                "margin": "20px 0 0 0",
+                "padding": "0 0 5px 0",
+              }
+            }
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h2
+              style={
+                Object {
+                  "margin": "20px 0 0 0",
+                }
+              }
+            >
+              "
+              Button
+              " Component
+            </h2>
+            <table
+              style={
+                Object {
+                  "borderCollapse": "separate",
+                  "borderSpacing": "10px 5px",
+                  "marginLeft": -10,
+                }
+              }
+            >
+              <thead>
+                <tr>
+                  <th>
+                    property
+                  </th>
+                  <th>
+                    propType
+                  </th>
+                  <th>
+                    required
+                  </th>
+                  <th>
+                    default
+                  </th>
+                  <th>
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    children
+                  </td>
+                  <td>
+                    node
+                  </td>
+                  <td>
+                    yes
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td />
+                </tr>
+                <tr>
+                  <td>
+                    onClick
+                  </td>
+                  <td>
+                    func
+                  </td>
+                  <td>
+                    no
+                  </td>
+                  <td>
+                    -
+                  </td>
+                  <td />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Centered Button with text 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": "center",
+      "bottom": 0,
+      "display": "flex",
+      "justifyContent": "center",
+      "left": 0,
+      "overflow": "auto",
+      "position": "fixed",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "margin": "auto",
+      }
+    }
+  >
+    <button
+      className="css-1yjiefr"
+      onClick={[Function]}
+    >
+      Hello Button
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<article
+  className="css-1fqbdip"
+>
+  <h1
+    className="css-nil"
+  >
+    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
+      className="css-mteq83"
+    >
+      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
+      className="css-ca0824"
+      onClick={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      stories
+    </a>
+     
+    for a component called
+     
+    <code
+      className="css-mteq83"
+    >
+      Button
+    </code>
+    .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories.
+    <br />
+    You can also edit those components and see changes right away.
+    <br />
+    (Try editing the 
+    <code
+      className="css-mteq83"
+    >
+      Button
+    </code>
+     stories located at 
+    <code
+      className="css-mteq83"
+    >
+      src/stories/index.js
+    </code>
+    .)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the
+     
+    <a
+      className="css-ca0824"
+      href="https://storybook.js.org/basics/writing-stories"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Writing Stories
+    </a>
+     
+    section in our documentation.
+  </p>
+  <p
+    className="css-bwdon3"
+  >
+    <b>
+      NOTE:
+    </b>
+    <br />
+    Have a look at the
+     
+    <code
+      className="css-mteq83"
+    >
+      .storybook/webpack.config.js
+    </code>
+     
+    to add webpack loaders and plugins you are using in this project.
+  </p>
+</article>
+`;
+
+exports[`Storyshots WithEvents Logger 1`] = `
+<div
+  style={
+    Object {
+      "color": "rgb(51, 51, 51)",
+      "fontFamily": "
+          -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
+          \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
+        ",
+      "padding": 20,
+    }
+  }
+>
+  <h1>
+    Logger
+  </h1>
+  <dl />
+</div>
+`;

examples/cra-kitchen-sink/src/storyshots.test.js

@@ -1,30 +1,17 @@
-describe('Storyshots', () => {
+import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';
-  xit('should run snapshot tests, but we\'ve disabled this temporarily', () => {});
+import path from 'path';
-});
 
-// NOTE: this file should contain a snapshot test, but it is temporarily disabled.
+function createNodeMock(element) {
-//
+  if (element.type === 'div') {
-// From @tmeasday: "Both Lerna/npm5 and Jest are incompatible, so we cannot run
+    return { scrollWidth: 123 };
-// Jest tests right now, unless we go to great lengths (see `test-cra`'s build process)."
+  }
-//
+  return null;
-// A succinct repro here: https://github.com/tmeasday/preserve-symlinks-test
+}
-//
+
-// Once this difference is resolved, we should uncomment the following code:
+initStoryshots({
-//
+  framework: 'react',
-// import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';
+  configPath: path.join(__dirname, '..', '.storybook'),
-// import path from 'path';
+  test: snapshotWithOptions({
-//
+    createNodeMock,
-// function createNodeMock(element) {
+  }),
-//   if (element.type === 'div') {
+});
-//     return { scrollWidth: 123 };
-//   }
-//   return null;
-// }
-//
-// initStoryshots({
-//   framework: 'react',
-//   configPath: path.join(__dirname, '..', '.storybook'),
-//   test: snapshotWithOptions({
-//     createNodeMock,
-//   }),
-// });

examples/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "@storybook/examples",
-  "version": "1.0.0",
-  "description": "A set of examples of how to use storybook, also used for regression testing",
-  "main": "index.js",
-  "scripts": {
-    "test:automated-cra-getstorybook": "node scripts/automated-cra-getstorybook.js"
-  },
-  "license": "ISC",
-  "dependencies": {
-    "child-process-promise": "^2.2.1",
-    "getstorybook": "^1.7.0",
-    "rimraf": "^2.6.1"
-  }
-}

examples/react-native-vanilla/package.json

@@ -14,7 +14,7 @@
   "devDependencies": {
     "babel-jest": "20.0.3",
     "babel-preset-react-native": "1.9.2",
-    "jest": "20.0.4",
+    "jest": "^20.0.4",
     "react-test-renderer": "16.0.0-alpha.6",
     "@storybook/addon-actions": "file:../../addons/actions",
     "@storybook/addon-links": "file:../../addons/links",

examples/react-native-vanilla/storybook/storybook.js

@@ -19,4 +19,5 @@ setTimeout(
 );
 
 AppRegistry.registerComponent('ReactNativeVanilla', () => StorybookUI);
-export default StorybookUI;
+
+export { StorybookUI as default };

examples/scripts/automated-cra-getstorybook.js

@@ -1,25 +0,0 @@
-#!/usr/bin/env node
-
-/* eslint-disable */
-/* This is an automated install of create-react-app & getstorybook */
-
-const { exec } = require('child-process-promise');
-const rimraf = require('rimraf');
-
-const targetFolder = 'automated-cra-getstorybook';
-
-const cleanDir = () => new Promise(resolve => rimraf(`./${targetFolder}`, resolve));
-
-const craInstaller = () => exec('npm install create-react-app');
-const craBoot = () => exec(`create-react-app ${targetFolder}`);
-
-const storybookBoot = () => exec(`cd ${targetFolder} && getstorybook`);
-const storybookBuild = () => exec(`cd ${targetFolder} && npm run build-storybook`);
-
-Promise.all([craInstaller(), cleanDir()])
-  .then(craBoot)
-  .then(storybookBoot)
-  .then(storybookBuild)
-  .catch(error => {
-    console.log('rejected: ', error);
-  });

examples/test-cra/package.json

@@ -19,7 +19,6 @@
   "devDependencies": {
     "@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
     "@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
-    "@storybook/addon-storyshots": "file:../../packs/storybook-addon-storyshots.tgz",
     "@storybook/addons": "file:../../packs/storybook-addons.tgz",
     "@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
     "@storybook/channels": "file:../../packs/storybook-channels.tgz",

examples/test-cra/src/__snapshots__/storyshots.test.js.snap

@@ -1,124 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Button with some emoji 1`] = `
-<button
-  className="css-1yjiefr"
-  onClick={[Function]}
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots Button with text 1`] = `
-<button
-  className="css-1yjiefr"
-  onClick={[Function]}
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots ComponentWithRef basic 1`] = `<div />`;
-
-exports[`Storyshots Welcome to Storybook 1`] = `
-<article
-  className="css-1fqbdip"
->
-  <h1
-    className="css-nil"
-  >
-    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
-      className="css-mteq83"
-    >
-      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
-      className="css-ca0824"
-      onClick={[Function]}
-      role="button"
-      tabIndex="0"
-    >
-      stories
-    </a>
-     
-    for a component called
-     
-    <code
-      className="css-mteq83"
-    >
-      Button
-    </code>
-    .
-  </p>
-  <p>
-    Just like that, you can add your own components as stories.
-    <br />
-    You can also edit those components and see changes right away.
-    <br />
-    (Try editing the 
-    <code
-      className="css-mteq83"
-    >
-      Button
-    </code>
-     stories located at 
-    <code
-      className="css-mteq83"
-    >
-      src/stories/index.js
-    </code>
-    .)
-  </p>
-  <p>
-    Usually we create stories with smaller UI components in the app.
-    <br />
-    Have a look at the
-     
-    <a
-      className="css-ca0824"
-      href="https://storybook.js.org/basics/writing-stories"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      Writing Stories
-    </a>
-     
-    section in our documentation.
-  </p>
-  <p
-    className="css-bwdon3"
-  >
-    <b>
-      NOTE:
-    </b>
-    <br />
-    Have a look at the
-     
-    <code
-      className="css-mteq83"
-    >
-      .storybook/webpack.config.js
-    </code>
-     
-    to add webpack loaders and plugins you are using in this project.
-  </p>
-</article>
-`;

examples/test-cra/src/storyshots.test.js

@@ -1,17 +0,0 @@
-import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';
-import path from 'path';
-
-function createNodeMock(element) {
-  if (element.type === 'div') {
-    return { scrollWidth: 123 };
-  }
-  return null;
-}
-
-initStoryshots({
-  framework: 'react',
-  configPath: path.join(__dirname, '..', '.storybook'),
-  test: snapshotWithOptions({
-    createNodeMock,
-  }),
-});

jest.config.js

@@ -14,7 +14,6 @@ module.exports = {
     '<rootDir>/examples/test-cra',
   ],
   testPathIgnorePatterns: ['/node_modules/'],
-  projects: ['./', './examples/react-native-vanilla'],
   collectCoverage: false,
   collectCoverageFrom: [
     'app/**/*.{js,jsx}',

lerna.json

@@ -1,5 +1,5 @@
 {
-  "lerna": "2.0.0-rc.5",
+  "lerna": "2.0.0",
   "commands": {
     "bootstrap": {
       "ignore": [

lib/addons/src/index.js

@@ -2,7 +2,7 @@ export class AddonStore {
   constructor() {
     this.loaders = {};
     this.panels = {};
-    this.channel = null;
+    this.channel = { on() {}, emit() {} };
     this.preview = null;
     this.database = null;
   }

lib/cli/package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@storybook/codemod": "^3.1.6",
-    "chalk": "^1.1.3",
+    "chalk": "^2.0.1",
     "child-process-promise": "^2.2.1",
     "commander": "^2.9.0",
     "cross-spawn": "^5.0.1",

lib/ui/package.json

@@ -26,11 +26,11 @@
     "lodash.sortby": "^4.7.0",
     "mantra-core": "^1.7.0",
     "podda": "^1.2.2",
-    "prop-types": "^15.5.8",
+    "prop-types": "^15.5.10",
     "qs": "^6.4.0",
-    "react-inspector": "^2.0.0",
+    "react-inspector": "^2.1.1",
     "react-komposer": "^2.0.0",
-    "react-modal": "^1.7.6",
+    "react-modal": "^1.7.7",
     "react-split-pane": "^0.1.63",
     "redux": "^3.6.0"
   },

package.json

@@ -1,14 +1,15 @@
 {
   "name": "storybook",
+  "version": "3.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/storybooks/storybook.git"
   },
   "scripts": {
-    "bootstrap": "lerna bootstrap",
+    "bootstrap": "lerna bootstrap --concurrency 1 --npm-client=\"yarn\" --hoist && node ./scripts/hoist-internals.js",
-    "bootstrap:docs": "cd docs && npmc install",
+    "bootstrap:docs": "cd docs && yarn install",
-    "bootstrap:test-cra": "npm run build-packs && lerna exec --scope test-cra -- npmc install",
+    "bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- yarn install",
-    "bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- npmc install",
+    "bootstrap:test-cra": "npm run build-packs && lerna exec --scope test-cra -- yarn install",
     "build-packs": "lerna exec --scope '@storybook/*' --parallel -- ../../scripts/build-pack.sh ../../packs",
     "changelog": "pr-log --sloppy",
     "precommit": "lint-staged",
@@ -27,13 +28,11 @@
     "publish": "lerna publish",
     "test": "jest --projects ./ ./examples/react-native-vanilla"
   },
-  "engines": {
-    "node": "node"
-  },
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.3",
+    "babel-plugin-transform-md-import-to-string": "^1.0.6",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-env": "^1.5.1",
@@ -52,15 +51,17 @@
     "eslint-plugin-jsx-a11y": "^5.0.3",
     "eslint-plugin-prettier": "^2.1.1",
     "eslint-plugin-react": "^7.0.1",
+    "fs-extra": "^4.0.0",
     "gh-pages": "^1.0.0",
     "github-release-from-changelog": "^1.2.1",
+    "glob": "^7.1.2",
     "husky": "^0.14.3",
     "jest": "^20.0.4",
     "jest-enzyme": "^3.2.0",
     "lerna": "2.0.0",
     "lint-staged": "^4.0.0",
     "nodemon": "^1.11.0",
-    "npmc": "^5.1.0-canary.2",
+    "npmlog": "^4.1.2",
     "prettier": "^1.5.2",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
@@ -71,7 +72,11 @@
     "remark-lint-code-eslint": "^2.0.0",
     "remark-preset-lint-recommended": "^2.0.0",
     "remark-toc": "^4.0.0",
-    "shelljs": "^0.7.7"
+    "shelljs": "^0.7.7",
+    "symlink-dir": "^1.1.0"
+  },
+  "engines": {
+    "node": "node"
   },
   "collective": {
     "type": "opencollective",
@@ -82,6 +87,10 @@
       "npm run lint:js -- --fix",
       "git add"
     ],
+    "*.json": [
+      "npm run lint:js -- --fix",
+      "git add"
+    ],
     "*.md": [
       "npm run lint:md -- -o",
       "git add"

scripts/hoist-internals.js

@@ -0,0 +1,112 @@
+const path = require('path');
+const fs = require('fs-extra');
+const fse = require('fs-extra');
+const shell = require('shelljs');
+const glob = require('glob');
+const symlink = require('symlink-dir');
+const log = require('npmlog');
+
+const targetPath = path.join(__dirname, '..', 'node_modules', '@storybook');
+const prefix = 'hoist-internals';
+const cwd = path.join(__dirname, '..');
+
+log.heading = 'lerna+';
+log.addLevel('success', 3001, { fg: 'green', bold: true });
+log.info(prefix, 'Hoisting internal packages');
+
+const getLernaPackages = () =>
+  fse.readJson(path.join(__dirname, '..', 'lerna.json')).then(json => json.packages);
+const passingLog = fn => i => {
+  fn(i);
+  return i;
+};
+const getPackageNameOfFolder = sourcePath =>
+  fse
+    .readJson(path.join(sourcePath, 'package.json'))
+    .then(json => json.name.replace('@storybook/', ''));
+
+const task = getLernaPackages()
+  .then(
+    passingLog(packages => {
+      log.verbose(prefix, 'working dir paths: %j', cwd);
+      log.verbose(prefix, 'source paths: %j', packages);
+      log.verbose(prefix, 'target paths: %j', targetPath);
+    })
+  )
+  .then(packages => `@(${packages.map(s => s.replace('/*', '')).join('|')})/*/`)
+  .then(
+    passingLog(pattern => {
+      log.silly(prefix, 'pattern to look for packages: %j', pattern);
+    })
+  )
+  .then(
+    pattern =>
+      new Promise((resolve, reject) => {
+        glob(pattern, { cwd }, (error, results) => (error ? reject(error) : resolve(results)));
+      })
+  )
+  .then(results =>
+    Promise.all(
+      results
+        .map(sourcePath => path.resolve(fs.realpathSync(sourcePath)))
+        .reduce((acc, item) => {
+          if (!acc.includes(item)) {
+            acc.push(item);
+          }
+          return acc;
+        }, [])
+        .map(
+          passingLog(item => {
+            log.silly(prefix, 'found package path', item);
+          })
+        )
+        .map(sourcePath =>
+          getPackageNameOfFolder(sourcePath)
+            .then(
+              passingLog(packageName => {
+                log.silly(prefix, 'found package name', packageName);
+              })
+            )
+            .then(packageName => path.join(targetPath, packageName))
+            .then(localTargetPath =>
+              symlink(sourcePath, localTargetPath)
+                .then(
+                  passingLog(() => {
+                    log.silly(prefix, 'symlinked ', [sourcePath, localTargetPath]);
+                  })
+                )
+                .then(() => localTargetPath)
+                .catch(error => {
+                  log.error(prefix, 'symlink', error);
+                  throw new Error('failed symlink');
+                })
+            )
+        )
+    )
+  )
+  .then(locations =>
+    Promise.all(
+      locations
+        .map(location => path.join(location, 'node_modules', '@storybook'))
+        .map(
+          passingLog(removePath => {
+            log.verbose(prefix, 'removing ', removePath);
+          })
+        )
+        .map(removePath => shell.rm('-rf', removePath))
+        .map(
+          (item, index) =>
+            item.code === 0 ? Promise.resolve(locations[index]) : Promise.reject(item)
+        )
+    )
+  );
+
+task
+  .then(packages => {
+    log.info(prefix, packages.map(dir => dir.replace(cwd, '')).join(',\n'));
+    log.success(prefix, 'complete');
+  })
+  .catch(error => {
+    log.error(prefix, 'failed', error);
+    shell.exit(1);
+  });