Merge branch 'master' into test-storyshots

.jestrc → .jestrc.json

@@ -5,7 +5,10 @@
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
     "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
   },
-  "roots": ["packages"],
+  "projects": [
+    "<rootDir>/packages/*",
+    "<rootDir>/examples/*"
+  ],
   "collectCoverage": false,
   "collectCoverageFrom": [
     "packages/**/*.{js,jsx}",

.travis.yml

@@ -14,6 +14,5 @@ script:
   - npm run lint
   - npm run test -- --coverage
   - npm run coverage
-  - npm run test-examples
 git:
   depth: 1

CONTRIBUTING.md

@@ -15,28 +15,57 @@ No software is bug free. So, if you got an issue, follow these steps:
   * Share error logs, screenshots and etc.
   * To speed up the issue fixing process, send us a sample repo with the issue you faced:
 
+### 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:
+
+1. Download the latest version of this project, and build it
+
+  ```
+  git clone https://github.com/storybooks/storybook.git
+  cd storybook
+  npm install
+  npm run bootstrap
+  ```
+
+2. Link `storybook` and any other required dependencies
+
+  ```
+  cd packages/react-storybook
+  npm link
+  
+  cd <your-project>
+  npm link @kadira/storybook
+  
+  # repeat with whichever other parts of the monorepo you are using.
+  ```
+
 ### Reproductions
 
-The best way to help figure out an issue you are having is to produce a minimal reproduction. A good way to do that is using Create React App:
+The best way to help figure out an issue you are having is to produce a minimal reproduction against the `master` branch. 
+
+A good way to do that is using the example `test-cra` app embedded in this repository:
 
 ```bash
-npm install --global create-react-app getstorybook
+# Download and build this repository:
+git clone https://github.com/storybooks/storybook.git
+cd storybook
+npm install
+npm run bootstrap
 
-create-react-app reproduction
-cd reproduction
-getstorybook
+cd examples/test-cra
 
 # make changes to try and reproduce the problem, such as adding components + stories
 npm start storybook
 
 # see if you can see the problem, if so, commit it:
-git init
+git checkout "branch-describing-issue"
 git add -A
 git commit -m "reproduction for issue #123"
 
-# create an new repository on github to host the reproduction, then:
-git remote add origin https://github.com/<your-username>/<repo-name>
-git push -u origin master
+# fork the storybook repo to your account, then add the resulting remote
+git remote add <your-username> https://github.com/<your-username>/storybook.git
+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.
@@ -47,10 +76,10 @@ If you follow that process, you can then link to the github repository in the is
 
 We welcome your contributions. There are many ways you can help us. This is few of those ways:
 
-* Fix typos and add more documentation.
+* Fix typos and add more [documentation](https://github.com/storybooks/storybook/labels/needs%20docs).
 * Try to fix some [bugs](https://github.com/storybooks/storybook/labels/bug).
-* Work on [enhancements](https://github.com/storybooks/storybook/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement) and new [features](https://github.com/storybooks/storybook/issues?q=is%3Aissue+is%3Aopen+label%3Afeature).
-* Add more tests (specially for the UI).
+* 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.
 

README.md

@@ -2,6 +2,7 @@
 [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/)
 [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook)
 [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
+[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
 [![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
 [![Storybook Slack](https://storybooks-slackin.herokuapp.com/badge.svg)](https://storybooks-slackin.herokuapp.com/)
 
@@ -33,7 +34,7 @@ For full documentation on using Storybook visit: https://storybooks.js.org
 - [react-native-storybook](packages/react-native-storybook) - Storybook for React components
 - [storyshots](packages/storyshots) - Easy snapshot testing for storybook
 - [getstorybook](packages/getstorybook) - Streamlined installation for a variety of app types
-- [examples](packages/examples) - Code examples to illustrate different Storybook use cases
+- [examples](examples) - Code examples to illustrate different Storybook use cases
 
 ## Addons
 - [addon-actions](packages/addon-actions/) - Log actions as users interact with components in storybook

examples/cra-storybook/src/stories/Welcome.js

@@ -97,7 +97,7 @@ export default class Welcome extends React.Component {
           {' '}
           <a
             style={styles.link}
-            href="https://getstorybook.io/docs/basics/writing-stories"
+            href="https://storybooks.js.org/docs/react-storybook/basics/writing-stories"
             target="_blank"
           >
             Writing Stories

examples/test-cra/src/stories/Welcome.js

@@ -97,7 +97,7 @@ export default class Welcome extends React.Component {
           {' '}
           <a
             style={styles.link}
-            href="https://getstorybook.io/docs/basics/writing-stories"
+            href="https://storybooks.js.org/docs/react-storybook/basics/writing-stories"
             target="_blank"
           >
             Writing Stories

package.json

@@ -15,10 +15,10 @@
     "eslint": "^3.19.0",
     "eslint-config-airbnb-base": "^11.1.3",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jest": "^19.0.1",
+    "eslint-plugin-jest": "^20.0.0",
     "eslint-plugin-prettier": "^2.0.1",
-    "jest": "^19.0.2",
-    "jest-enzyme": "^3.0.1",
+    "jest": "^20.0.0",
+    "jest-enzyme": "^3.1.0",
     "lerna": "2.0.0-rc.4",
     "prettier": "^1.1.0",
     "react": "^15.5.4",
@@ -29,9 +29,8 @@
   "scripts": {
     "bootstrap": "lerna bootstrap",
     "lint": "eslint .",
-    "test": "jest --config ./.jestrc",
+    "test": "jest --config ./.jestrc.json",
     "test:watch": "npm test -- --watch",
-    "test-examples": "CI=true lerna run test",
     "coverage": "codecov"
   }
 }

packages/addon-info/src/components/Node.js

@@ -70,9 +70,9 @@ function getData(element) {
     text: null,
     children: null,
   };
-  
+
   if (typeof element === 'null') {
-    return data
+    return data;
   }
 
   if (typeof element == 'string') {

packages/addon-info/src/components/PropTable.js

@@ -38,7 +38,11 @@ export default class PropTable extends React.Component {
         const typeInfo = type.propTypes[property];
         const propType = PropTypesMap.get(typeInfo) || 'other';
         const required = typeInfo.isRequired === undefined ? 'yes' : 'no';
-        const description = type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property] ? type.__docgenInfo.props[property].description : null;
+        const description = type.__docgenInfo &&
+          type.__docgenInfo.props &&
+          type.__docgenInfo.props[property]
+          ? type.__docgenInfo.props[property].description
+          : null;
         props[property] = { property, propType, required, description };
       }
     }
@@ -73,7 +77,7 @@ export default class PropTable extends React.Component {
             <th>propType</th>
             <th>required</th>
             <th>default</th>
-            <th>description></th>
+            <th>description&gt;</th>
           </tr>
         </thead>
         <tbody>

packages/addon-info/src/components/Story.js

@@ -26,7 +26,7 @@ const stylesheet = {
     },
   },
   info: {
-    position: 'absolute',
+    position: 'fixed',
     background: 'white',
     top: 0,
     bottom: 0,

packages/addon-knobs/example/typescript/index.tsx

@@ -25,7 +25,9 @@ stories.add('with all knobs', () => {
   const dob = date('DOB', new Date('January 20 1887'));
 
   const bold = boolean('Bold', false);
-  const color = color('Color', 'black');
+  const selectedColor = color('Color', 'black');
+  const favoriteNumber = number('Favorite Number', 42);
+  const comfortTemp = number('Comfort Temp', 72, { range: true, min: 60, max: 90, step: 1 });
   const textDecoration = select('Decoration', {
     none: 'None',
     underline: 'Underline',
@@ -39,13 +41,15 @@ stories.add('with all knobs', () => {
 
   const style = Object.assign({}, customStyle, {
     fontWeight: bold ? 800: 400,
-    color,
+    color: selectedColor,
     textDecoration
   });
 
   return (
     <div style={style}>
       I'm {name} and I was born on "{moment(dob).format("DD MMM YYYY")}"
+      <p>My favorite number is {favoriteNumber}.</p>
+      <p>My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.</p>
     </div>
   );
 });

packages/addon-knobs/src/components/PropField.js

@@ -19,7 +19,6 @@ const stylesheet = {
     width: 80,
     fontSize: 10,
     color: 'rgb(68, 68, 68)',
-    textTransform: 'uppercase',
     fontWeight: 600,
   },
 };

packages/addon-knobs/storybook-addon-knobs.d.ts

@@ -10,13 +10,20 @@ interface StoryContext {
 	story: string,
 }
 
+interface NumberOptions {
+	range: boolean,
+	min: number,
+	max: number,
+	step: number,
+}
+
 export function knob<T>(name: string, options: KnobOption<T>): T;
 
 export function text(name: string, value: string | null): string;
 
 export function boolean(name: string, value: boolean): boolean;
 
-export function number(name: string, value: number): number;
+export function number(name: string, value: number, options?: NumberOptions): number;
 
 export function color(name: string, value: string): string;
 

packages/getstorybook/README.md

@@ -25,7 +25,7 @@ That's all you've to do.
 `getstorybook` also supports yarn.
 If you have installed yarn in your system, it'll detect it and use `yarn` instead of `npm`.
 
-If you don't want to use `npm` always you can use the `--use-npm` option like this:
+If you don't want to use `yarn` always you can use the `--use-npm` option like this:
 
 ```
 getstorybook --use-npm

packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js

@@ -97,7 +97,7 @@ export default class Welcome extends React.Component {
           {' '}
           <a
             style={styles.link}
-            href="https://getstorybook.io/docs/basics/writing-stories"
+            href="https://storybooks.js.org/docs/react-storybook/basics/writing-stories"
             target="_blank"
           >
             Writing Stories

packages/getstorybook/generators/WEBPACK_REACT/template/.storybook/webpack.config.js

@@ -1,6 +1,6 @@
 // you can use this file to add your custom webpack plugins, loaders and anything you like.
 // This is just the basic way to add addional webpack configurations.
-// For more information refer the docs: https://getstorybook.io/docs/configurations/custom-webpack-config
+// For more information refer the docs: https://storybooks.js.org/docs/react-storybook/configurations/custom-webpack-config
 
 // IMPORTANT
 // When you add this file, we won't add the default configurations which is similar

packages/react-storybook/demo/src/stories/Welcome.js

@@ -97,7 +97,7 @@ export default class Welcome extends React.Component {
           {' '}
           <a
             style={styles.link}
-            href="https://getstorybook.io/docs/basics/writing-stories"
+            href="https://storybooks.js.org/docs/react-storybook/basics/writing-stories"
             target="_blank"
           >
             Writing Stories

scripts/prepublish.js

@@ -6,7 +6,7 @@ const babel = path.join(__dirname, '..', 'node_modules', '.bin', 'babel');
 require('./ver');
 
 const args = [
-  '--ignore tests,__tests__,test.js,stories/,story.jsx,story.js',
+  '--ignore tests,__tests__,test.js,stories/,story.jsx',
   '--plugins "transform-runtime"',
   './src --out-dir ./dist',
   '--copy-files',