diff --git a/.jestrc b/.jestrc.json similarity index 88% rename from .jestrc rename to .jestrc.json index ba3f86e689f8..9d5dd48c424e 100644 --- a/.jestrc +++ b/.jestrc.json @@ -5,7 +5,10 @@ "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", "\\.(css|scss)$": "/__mocks__/styleMock.js" }, - "roots": ["packages"], + "projects": [ + "/packages/*", + "/examples/*" + ], "collectCoverage": false, "collectCoverageFrom": [ "packages/**/*.{js,jsx}", diff --git a/.travis.yml b/.travis.yml index 45039187fb90..7a854e756764 100644 --- a/.travis.yml +++ b/.travis.yml @@ -14,6 +14,5 @@ script: - npm run lint - npm run test -- --coverage - npm run coverage - - npm run test-examples git: depth: 1 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 49f910e8b776..ae12b939906d 100644 --- a/CONTRIBUTING.md +++ b/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 + 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// -git push -u origin master +# fork the storybook repo to your account, then add the resulting remote +git remote add https://github.com//storybook.git +git push -u 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. diff --git a/examples/cra-storybook/src/stories/Welcome.js b/examples/cra-storybook/src/stories/Welcome.js index 5886c30148ad..50979fcd203d 100644 --- a/examples/cra-storybook/src/stories/Welcome.js +++ b/examples/cra-storybook/src/stories/Welcome.js @@ -97,7 +97,7 @@ export default class Welcome extends React.Component { {' '} Writing Stories diff --git a/examples/test-cra/src/stories/Welcome.js b/examples/test-cra/src/stories/Welcome.js index 5886c30148ad..50979fcd203d 100644 --- a/examples/test-cra/src/stories/Welcome.js +++ b/examples/test-cra/src/stories/Welcome.js @@ -97,7 +97,7 @@ export default class Welcome extends React.Component { {' '} Writing Stories diff --git a/package.json b/package.json index 2c23820c465b..553657eb7e37 100644 --- a/package.json +++ b/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" } } diff --git a/packages/addon-info/src/components/Node.js b/packages/addon-info/src/components/Node.js index 77b8e0f62041..a91de1369ed5 100644 --- a/packages/addon-info/src/components/Node.js +++ b/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') { diff --git a/packages/addon-info/src/components/PropTable.js b/packages/addon-info/src/components/PropTable.js index fb1034e9c11c..d1b069c9b849 100644 --- a/packages/addon-info/src/components/PropTable.js +++ b/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 { propType required default - description> + description> diff --git a/packages/addon-knobs/example/typescript/index.tsx b/packages/addon-knobs/example/typescript/index.tsx index d98bb51e924e..5917454c81aa 100644 --- a/packages/addon-knobs/example/typescript/index.tsx +++ b/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 (
I'm {name} and I was born on "{moment(dob).format("DD MMM YYYY")}" +

My favorite number is {favoriteNumber}.

+

My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.

); }); diff --git a/packages/addon-knobs/src/components/PropField.js b/packages/addon-knobs/src/components/PropField.js index 32f5aa01ac43..58bd3f7c2855 100644 --- a/packages/addon-knobs/src/components/PropField.js +++ b/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, }, }; diff --git a/packages/addon-knobs/storybook-addon-knobs.d.ts b/packages/addon-knobs/storybook-addon-knobs.d.ts index cf7828322cbf..526ea574f939 100644 --- a/packages/addon-knobs/storybook-addon-knobs.d.ts +++ b/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(name: string, options: KnobOption): 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; diff --git a/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js b/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js index 2b20b2a1b4a4..9d106d3dd952 100644 --- a/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js +++ b/packages/getstorybook/generators/REACT_SCRIPTS/template/src/stories/Welcome.js @@ -97,7 +97,7 @@ export default class Welcome extends React.Component { {' '} Writing Stories diff --git a/packages/getstorybook/generators/WEBPACK_REACT/template/.storybook/webpack.config.js b/packages/getstorybook/generators/WEBPACK_REACT/template/.storybook/webpack.config.js index 7441c981d232..fae1ef93df48 100644 --- a/packages/getstorybook/generators/WEBPACK_REACT/template/.storybook/webpack.config.js +++ b/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 diff --git a/packages/react-storybook/demo/src/stories/Welcome.js b/packages/react-storybook/demo/src/stories/Welcome.js index 5886c30148ad..50979fcd203d 100644 --- a/packages/react-storybook/demo/src/stories/Welcome.js +++ b/packages/react-storybook/demo/src/stories/Welcome.js @@ -97,7 +97,7 @@ export default class Welcome extends React.Component { {' '} Writing Stories