Merge branch 'release/3.3' into select-knob-ordering

storybookjs · Aug 28, 2017 · 54c09a8 · 54c09a8
2 parents 55fdf53 + 039aa83
commit 54c09a8
Show file tree

Hide file tree

Showing 49 changed files with 21,895 additions and 140 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -6,7 +6,7 @@ defaults: &defaults
 version: 2
 dependencies:
   pre:
-    - npm install -g npm
+    - yarn global add npm
 jobs:
   validate:
     <<: *defaults
@@ -28,7 +28,7 @@ jobs:
       - run:
           name: "Install root dependencies"
           command: |
-            yarn install
+            yarn
       - save_cache:
           key: root-dependencies-{{ checksum "package.json" }}
           paths:
@@ -40,7 +40,7 @@ jobs:
       - run:
           name: "Bootstrapping"
           command: |
-            npm run bootstrap -- --all
+            yarn bootstrap -- --all
       - save_cache:
           key: package-dependencies-{{ checksum "package.json" }}
           paths:
@@ -59,19 +59,19 @@ jobs:
       - run:
           name: "Install root dependencies"
           command: |
-            yarn install
+            yarn
       - run:
           name: "Bootstrapping"
           command: |
-            npm run bootstrap -- --core
+            yarn bootstrap -- --core
       - run:
           name: "Build react kitchen-sink"
           command: |
-            cd examples/cra-kitchen-sink && npm run build-storybook
+            cd examples/cra-kitchen-sink && yarn build-storybook
       - run:
           name: "Build vue kitchen-sink"
           command: |
-            cd examples/vue-kitchen-sink && npm run build-storybook
+            cd examples/vue-kitchen-sink && yarn build-storybook
   example-react-native:
     <<: *defaults
     steps:
@@ -83,11 +83,11 @@ jobs:
       - run:
           name: "Install root dependencies"
           command: |
-            yarn install
+            yarn
       - run:
           name: "Bootstrapping packages"
           command: |
-            npm run bootstrap -- --core --reactnative
+            yarn bootstrap -- --core --reactnative
       - run:
           name: "Running react-native"
           command: |
@@ -103,15 +103,15 @@ jobs:
       - run:
           name: "Install root dependencies"
           command: |
-            yarn install
+            yarn
       - run:
           name: "Bootstrapping"
           command: |
-            npm run bootstrap -- --docs
+            yarn bootstrap -- --docs
       - run:
           name: "Running docs"
           command: |
-            npm run docs:build
+            yarn docs:build
   lint:
     <<: *defaults
     steps:
@@ -123,11 +123,11 @@ jobs:
       - run:
           name: "Install root dependencies"
           command: |
-            yarn install
+            yarn
       - run:
           name: "Linting"
           command: |
-            npm run lint
+            yarn lint
   unit-test:
     <<: *defaults
     steps:
@@ -139,16 +139,16 @@ jobs:
       - run:
           name: "Install root dependencies"
           command: |
-            yarn install
+            yarn
       - run:
           name: "Bootstrapping"
           command: |
-            npm run bootstrap -- --core --reactnative
+            yarn bootstrap -- --core --reactnative
       - run:
           name: "Unit testing"
           command: |
-            npm run test -- --coverage -i
-            npm run coverage
+            yarn test -- --coverage -i
+            yarn coverage
   deploy:
     <<: *defaults
     steps:

diff --git a/.gitignore b/.gitignore
@@ -12,7 +12,6 @@ coverage/
 *.lerna_backup
 build
 packages/examples/automated-*
-yarn.lock
 /**/LICENSE
 docs/public
 packs/*.tgz

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -4,6 +4,8 @@ Thanks for your interest in improving Storybook! We are a community-driven proje
 
 Please review this document to help to streamline the process and save everyone's precious time.
 
+This guide assumes you're using `yarn` as package manager. You may have some success using `npm` as well, but there are chances you'll get wrong versions of root dependencies in that case (we only commit `yarn.lock` to the repo).
+
 ## Issues
 
 No software is bug free. So, if you got an issue, follow these steps:
@@ -18,28 +20,29 @@ No software is bug free. So, if you got an issue, follow these steps:
 
 ### Testing against `master`
 
-To test your project against the current latest version of storybook, you can clone the repository and link it with `npm`. Try following these steps:
+To test your project against the current latest version of storybook, you can clone the repository and link it with `yarn`. Try following these steps:
 
 1.  Download the latest version of this project, and build it:
 
-```sh
-git clone https://github.com/storybooks/storybook.git
-cd storybook
-npm install
-npm run bootstrap -- --core
-```
+    ```sh
+    git clone https://github.com/storybooks/storybook.git
+    cd storybook
+    yarn
+    yarn bootstrap -- --core
+    ```
+
 
 2.  Link `storybook` and any other required dependencies:
 
-```sh
-cd app/react
-npm link
+    ```sh
+    cd app/react
+    yarn link
 
-cd <your-project>
-npm link @storybook/react
+    cd <your-project>
+    yarn link @storybook/react
 
-# repeat with whichever other parts of the monorepo you are using.
-```
+    # repeat with whichever other parts of the monorepo you are using.
+    ```
 
 ### Reproductions
 
@@ -51,13 +54,11 @@ A good way to do that is using the example `cra-kitchen-sink` app embedded in th
 # Download and build this repository:
 git clone https://github.com/storybooks/storybook.git
 cd storybook
-npm install
-npm run bootstrap -- --core
-
-cd examples/cra-kitchen-sink
+yarn
+yarn bootstrap -- --core
 
 # make changes to try and reproduce the problem, such as adding components + stories
-npm start storybook
+yarn start
 
 # see if you can see the problem, if so, commit it:
 git checkout "branch-describing-issue"
@@ -71,7 +72,7 @@ git push -u <your-username> master
 
 If you follow that process, you can then link to the github repository in the issue. See <https://github.com/storybooks/storybook/issues/708#issuecomment-290589886> for an example.
 
-**NOTE**: If your issue involves a webpack config, create-react-app will prevent you from modifying the _app's_ webpack config, however you can still modify storybook's to mirror your app's version of storybook. Alternatively, use `npm run eject` in the CRA app to get a modifiable webpack config.
+**NOTE**: If your issue involves a webpack config, create-react-app will prevent you from modifying the _app's_ webpack config, however you can still modify storybook's to mirror your app's version of storybook. Alternatively, use `yarn eject` in the CRA app to get a modifiable webpack config.
 
 ## Pull Requests (PRs)
 
@@ -82,7 +83,7 @@ We welcome your contributions. There are many ways you can help us. This is few
 -   Work on [API](https://github.com/storybooks/storybook/labels/enhancement%3A%20api), [Addons](https://github.com/storybooks/storybook/labels/enhancement%3A%20addons), [UI](https://github.com/storybooks/storybook/labels/enhancement%3A%20ui) or [Webpack](https://github.com/storybooks/storybook/labels/enhancement%3A%20webpack) use enhancements and new [features](https://github.com/storybooks/storybook/labels/feature%20request).
 -   Add more [tests](https://codecov.io/gh/storybooks/storybook/tree/master/packages) (specially for the [UI](https://codecov.io/gh/storybooks/storybook/tree/master/packages/storybook-ui/src)).
 
-Before you submit a new PR, make you to run `npm test`. Do not submit a PR if tests are failing. If you need any help, create an issue and ask.
+Before you submit a new PR, make you to run `yarn test`. Do not submit a PR if tests are failing. If you need any help, create an issue and ask.
 
 ### Reviewing PRs
 
@@ -136,7 +137,7 @@ This project written in ES2016+ syntax so, we need to transpile it before use.
 So run the following command:
 
 ```sh
-npm run dev
+yarn dev
 ```
 
 This will watch files and transpile in watch mode.
@@ -146,14 +147,14 @@ This will watch files and transpile in watch mode.
 First of all link this repo with:
 
 ```sh
-npm link
+yarn link
 ```
 
 In order to test features you add, you may need to link the local copy of this repo.
 For that we need a sample project. Let's create it.
 
 ```sh
-npm install --global create-react-app getstorybook
+yarn global install --global create-react-app getstorybook
 create-react-app my-demo-app
 cd my-demo-app
 getstorybook
@@ -165,12 +166,12 @@ getstorybook
 Then link storybook inside the sample project with:
 
 ```sh
-npm link @storybook/react
+yarn link @storybook/react
 ```
 
 ### Getting Changes
 
-After you've done any change, you need to run the `npm run storybook` command every time to see those changes.
+After you've done any change, you need to run the `yarn storybook` command every time to see those changes.
 
 ## Release Guide
 
@@ -198,7 +199,7 @@ git status
 git clean -fdx && yarn
 
 # build all the packages
-npm run bootstrap -- --all
+yarn bootstrap -- --all
 ```
 
 From here there are different procedures for prerelease (e.g. alpha/beta/rc) and proper release.
@@ -209,7 +210,7 @@ From here there are different procedures for prerelease (e.g. alpha/beta/rc) and
 
 ```sh
 # publish and tag the release
-npm run publish -- --concurrency 1 --npm-tag=alpha
+yarn publish -- --concurrency 1 --npm-tag=alpha
 
 # push the tags
 git push --tags
@@ -219,14 +220,14 @@ git push --tags
 
 ```sh
 # publish but don't commit to git
-npm run publish -- --concurrency 1 --skip-git
+yarn publish -- --concurrency 1 --skip-git
 
 # Update `CHANGELOG.md`
 # - Edit PR titles/labels on github until output is good
 # - Optionally, edit a handwritten description in `CHANGELOG.md`
-npm run changelog
+yarn changelog
 
 # tag the release and push `CHANGELOG.md` and tags
 # FIXME: not end-to-end tested!
-npm run github-release
+yarn github-release
 ```
diff --git a/README.md b/README.md
@@ -92,30 +92,30 @@ We welcome contributions to Storybook!
 
 ### Development scripts
 
-#### `npm run bootstrap`
+#### `yarn bootstrap`
 
 > Installs package dependencies and links packages together - using lerna
 
-#### `npm run publish`
+#### `yarn publish`
 
 > Push a release to git and npm
 > will ask for version in interactive mode - using lerna.
 
-#### `npm run lint`
+#### `yarn lint`
 
 > boolean check if code conforms to linting rules - uses remark & eslint
 
--   `npm run lint:js` - will check js
--   `npm run lint:md` - will check markdown + code samples
+-   `yarn lint:js` - will check js
+-   `yarn lint:md` - will check markdown + code samples
 
--   `npm run lint:js -- --fix` - will automatically fix js
--   `npm run lint:md -- -o` - will automatically fix markdown
+-   `yarn lint:js -- --fix` - will automatically fix js
+-   `yarn lint:md -- -o` - will automatically fix markdown
 
-#### `npm run test`
+#### `yarn test`
 
 > boolean check if unit tests all pass - uses jest
 
--   `npm run test:watch` - will run tests in watch-mode
+-   `yarn test:watch` - will run tests in watch-mode
 
 ### Backers
 

diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md
@@ -145,6 +145,10 @@ Just render the story, don't check the output at all (useful if you just want to
 
 Like the default, but allows you to specify a set of options for the test renderer. [See for example here](https://github.com/storybooks/storybook/blob/b915b5439786e0edb17d7f5ab404bba9f7919381/examples/test-cra/src/storyshots.test.js#L14-L16).
 
+### `multiSnapshotWithOptions(options)`
+
+Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes.
+
 ### `shallowSnapshot`
 
 Take a snapshot of a shallow-rendered version of the component.
diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
@@ -11,11 +11,14 @@
   "scripts": {
     "build-storybook": "build-storybook",
     "prepublish": "babel ./src --out-dir ./dist",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "start-storybook -p 6006",
+    "example": "jest storyshot.test"
   },
   "dependencies": {
     "babel-runtime": "^6.23.0",
+    "glob": "^7.1.2",
     "global": "^4.3.2",
+    "jest-specific-snapshot": "^0.2.0",
     "prop-types": "^15.5.10",
     "read-pkg-up": "^2.0.0"
   },
@@ -24,11 +27,14 @@
     "@storybook/channels": "^3.2.0",
     "@storybook/react": "^3.2.8",
     "babel-cli": "^6.24.1",
+    "babel-jest": "^20.0.3",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react-dom": "^15.6.1",
+    "jest": "^20.0.4",
+    "jest-cli": "^20.0.4"
   },
   "peerDependencies": {
     "@storybook/addons": "^3.2.6",