diff --git a/.circleci/config.yml b/.circleci/config.yml index 55069b505837..829bfa4fd66b 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -81,6 +81,11 @@ jobs: command: | cd examples/angular-cli yarn build-storybook + - run: + name: "Build polymer-cli" + command: | + cd examples/polymer-cli + yarn build-storybook - run: name: "Run react kitchen-sink (smoke test)" command: | @@ -96,6 +101,10 @@ jobs: command: | cd examples/angular-cli yarn storybook --smoke-test + - run: + name: "Visually test storybook" + command: | + yarn chromatic - run: name: "Run image snapshots" command: yarn test --image @@ -207,26 +216,6 @@ jobs: command: | yarn test --coverage --runInBand --core yarn coverage - storybook: - <<: *defaults - steps: - - checkout - - restore_cache: - name: "Restore core dependencies cache" - keys: - - core-dependencies-{{ checksum "yarn.lock" }} - - restore_cache: - name: "Restore core dist cache" - keys: - - core-dist-{{ .Revision }} - - run: - name: "Link packages" - command: | - yarn install - - run: - name: "Visually test storybook" - command: | - yarn chromatic cli: working_directory: /tmp/storybook docker: @@ -292,9 +281,6 @@ workflows: - unit-test: requires: - build - - storybook: - requires: - - build - cli: requires: - build diff --git a/addons/actions/package.json b/addons/actions/package.json index 91d6d3fc68d7..6bfd462717fe 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -22,7 +22,7 @@ "dependencies": { "deep-equal": "^1.0.1", "global": "^4.3.2", - "make-error": "^1.3.3", + "make-error": "^1.3.4", "prop-types": "^15.6.0", "react-inspector": "^2.2.2", "uuid": "^3.2.1" diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json index ff836edf2151..9d212b1c3899 100644 --- a/addons/storyshots/package.json +++ b/addons/storyshots/package.json @@ -36,8 +36,8 @@ "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "enzyme-to-json": "^3.3.1", - "jest": "^22.1.4", - "jest-cli": "^22.1.4", + "jest": "^22.3.0", + "jest-cli": "^22.3.0", "react": "^16.1.0", "react-dom": "^16.1.0" }, diff --git a/app/react-native/package.json b/app/react-native/package.json index b611c0d84f15..980763667b10 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -60,7 +60,7 @@ "postcss-loader": "^2.1.0", "prop-types": "^15.6.0", "react-native-compat": "^1.0.0", - "react-native-iphone-x-helper": "^1.0.1", + "react-native-iphone-x-helper": "^1.0.2", "shelljs": "^0.8.1", "style-loader": "^0.20.1", "uglifyjs-webpack-plugin": "^1.1.7", diff --git a/docs/package.json b/docs/package.json index 85d11a740e52..69b2aaa15b09 100644 --- a/docs/package.json +++ b/docs/package.json @@ -31,7 +31,7 @@ "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "bootstrap": "^3.3.7", - "gatsby": "^1.9.194", + "gatsby": "^1.9.199", "gatsby-link": "^1.6.37", "gatsby-plugin-sharp": "^1.6.28", "gatsby-remark-autolink-headers": "^1.4.12", diff --git a/docs/src/components/Grid/GridItem/index.js b/docs/src/components/Grid/GridItem/index.js index 71f14c0aa233..c7d9092591ea 100644 --- a/docs/src/components/Grid/GridItem/index.js +++ b/docs/src/components/Grid/GridItem/index.js @@ -8,9 +8,9 @@ const linkProps = { className: 'link', }; -const GridItem = ({ title, description, source, demo, thumbnail }) => ( +const GridItem = ({ title, description, source, demo, thumbnailSrc }) => (
-
+
@@ -34,7 +34,7 @@ const GridItem = ({ title, description, source, demo, thumbnail }) => ( GridItem.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, - thumbnail: PropTypes.string.isRequired, + thumbnailSrc: PropTypes.string.isRequired, source: PropTypes.string, demo: PropTypes.string, }; diff --git a/docs/src/pages/examples/_examples.yml b/docs/src/pages/examples/_examples.yml index be65a08cf009..b7adb153de4e 100644 --- a/docs/src/pages/examples/_examples.yml +++ b/docs/src/pages/examples/_examples.yml @@ -1,146 +1,146 @@ carbon: - thumbnail: ./thumbnails/carbon.png + thumbnail: carbon.png title: Carbon Components description: IBM's Carbon Design System implemented in React. source: https://github.com/carbon-design-system/carbon-components-react demo: http://react.carbondesignsystem.com site: http://carbondesignsystem.com airbnb: - thumbnail: ./thumbnails/airbnb.jpg + thumbnail: airbnb.jpg title: Airbnb Dates description: An internationalizable, mobile-friendly datepicker library for the web. source: https://github.com/airbnb/react-dates demo: http://airbnb.io/react-dates/ site: http://airbnb.com lonelyplanet: - thumbnail: ./thumbnails/lonelyplanet.jpg + thumbnail: lonelyplanet.jpg title: Lonely Planet description: All the tools you need to build the Lonely Planet UI experience. source: https://github.com/lonelyplanet/backpack-ui demo: https://lonelyplanet.github.io/backpack-ui/ site: https://www.lonelyplanet.com/ atlassian: - thumbnail: ./thumbnails/atlassian.png + thumbnail: atlassian.png title: Atlassian AtlasKit description: Atlassian's official UI library. demo: https://atlaskit.atlassian.com/components site: https://atlaskit.atlassian.com/ wix: - thumbnail: ./thumbnails/wix.png + thumbnail: wix.png title: Wix Style React description: Components that conform to Wix Style source: https://github.com/wix/wix-style-react demo: https://wix.github.io/wix-style-react/ site: https://wix.com buffer: - thumbnail: ./thumbnails/buffer.jpg + thumbnail: buffer.jpg title: Buffer Components description: A collection of Buffer UI React components. source: https://github.com/bufferapp/buffer-components demo: https://bufferapp.github.io/buffer-components/ site: https://buffer.com algolia: - thumbnail: ./thumbnails/algolia.jpg + thumbnail: algolia.jpg title: Algolia InstantSearch description: Lightning-fast, hyper-configurable search. source: https://github.com/algolia/react-instantsearch/ demo: https://community.algolia.com/react-instantsearch/storybook/ rebass: - thumbnail: ./thumbnails/rebass.png + thumbnail: rebass.png title: Rebass description: Functional React UI component library demo: http://jxnblk.com/rebass/stories/ source: https://github.com/jxnblk/rebass site: http://jxnblk.com/rebass coursera: - thumbnail: ./thumbnails/coursera-ui.png + thumbnail: coursera-ui.png title: Coursera description: Coursera UI component library demo: https://building.coursera.org/coursera-ui artsy: - thumbnail: ./thumbnails/artsy.png + thumbnail: artsy.png title: Artsy Force description: Artsy's "Force" component library demo: https://artsy.github.io/reaction/ source: https://github.com/artsy/reaction-force site: https://artsy.net necolas: - thumbnail: ./thumbnails/reactnativeweb.jpg + thumbnail: reactnativeweb.jpg title: React Native Web description: Storybook demo for React Native Web. source: https://github.com/necolas/react-native-web demo: https://necolas.github.io/react-native-web/storybook/ griddle: - thumbnail: ./thumbnails/griddle.jpg + thumbnail: griddle.jpg title: Griddle description: An ultra customizable datagrid component for React. source: https://github.com/GriddleGriddle/Griddle demo: https://griddlegriddle.github.io/Griddle/examples/controlling-griddle/ site: https://griddlegriddle.github.io/Griddle/ tachyons: - thumbnail: ./thumbnails/tachyons.png + thumbnail: tachyons.png title: Tachyons Components description: A searchable directory of Tachyons Components source: https://github.com/blairanderson/tachyonstemplates demo: https://www.tachyonstemplates.com/components/ appbase: - thumbnail: ./thumbnails/appbase.jpg + thumbnail: appbase.jpg title: Appbase Maps description: A storybook playground for ReactiveMaps and ReactiveSearch. source: https://github.com/appbaseio/playground demo: https://opensource.appbase.io/playground/ site: https://appbase.io quran: - thumbnail: ./thumbnails/quran.jpg + thumbnail: quran.jpg title: Quran.com description: Component library for Quran.com, Quranicaudio.com and Salah.com. source: https://github.com/quran/common-components demo: https://quran.github.io/common-components/ site: https://quran.com/ terraeclipse: - thumbnail: ./thumbnails/terraeclipse.jpg + thumbnail: terraeclipse.jpg title: TerraEclipse description: React components for TerraEclipse, a political technology and strategy firm. source: https://github.com/TerraEclipse/react-stack demo: https://terraeclipse.github.io/react-stack/ timeline: - thumbnail: ./thumbnails/timeline.jpg + thumbnail: timeline.jpg title: React Event Timeline description: Event timeline component. source: https://github.com/rcdexta/react-event-timeline demo: https://rcdexta.github.io/react-event-timeline/ semanticui: - thumbnail: ./thumbnails/semanticui.png + thumbnail: semanticui.png title: Semantic-UI description: Storybook for Semantic-UI React components source: https://github.com/white-rabbit-japan/Semantic-UI-React-Storybook demo: https://white-rabbit-japan.github.io/Semantic-UI-React-Storybook/ hackoregon: - thumbnail: ./thumbnails/hackoregon.png + thumbnail: hackoregon.png title: Hack Oregon description: Official component library and storybook for Hack Oregon. source: https://github.com/hackoregon/component-library demo: https://hackoregon.github.io/component-library/ todomvc: - thumbnail: ./thumbnails/todomvc.png + thumbnail: todomvc.png title: TodoMVC with Specs description: Todo app Storybook with built-in unit tests. source: https://github.com/thorjarhun/react-storybook-todolist demo: https://thorjarhun.github.io/react-storybook-todolist/ react-svg-pan-zoom: - thumbnail: ./thumbnails/react-svg-pan-zoom.png + thumbnail: react-svg-pan-zoom.png title: React SVG Pan Zoom description: A React component that adds pan and zoom features to SVG source: https://github.com/chrvadala/react-svg-pan-zoom demo: https://chrvadala.github.io/react-svg-pan-zoom/ fyndiq-ui: - thumbnail: ./thumbnails/fyndiq.jpg + thumbnail: fyndiq.jpg title: Fyndiq description: Fyndiq UI Component library source: https://github.com/fyndiq/fyndiq-ui demo: https://fyndiq.github.io/fyndiq-ui/ gumgum: - thumbnail: ./thumbnails/gumgum.png + thumbnail: gumgum.png title: GumGum description: GumGum (Computer Vision Company) Component library demo: https://storybook.gumgum.com diff --git a/docs/src/pages/examples/index.jsx b/docs/src/pages/examples/index.jsx index 9d5c84ba8ace..16e028151648 100644 --- a/docs/src/pages/examples/index.jsx +++ b/docs/src/pages/examples/index.jsx @@ -2,6 +2,12 @@ import React from 'react'; import { values } from 'lodash'; import Examples from '../../components/Grid/Examples'; -import data from './_examples.yml'; +import examples from './_examples.yml'; -export default () => ; +const examplesArray = values(examples).map(example => ({ + ...example, + // eslint-disable-next-line import/no-dynamic-require, global-require + thumbnailSrc: require(`./thumbnails/${example.thumbnail}`), +})); + +export default () => ; diff --git a/docs/yarn.lock b/docs/yarn.lock index db6da8a6c9d9..75941d59c9ef 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -3955,6 +3955,10 @@ fast-glob@^1.0.1: micromatch "^3.0.3" readdir-enhanced "^1.5.2" +fast-levenshtein@~2.0.4: + version "2.0.6" + resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" + fast-memoize@^2.2.7: version "2.2.8" resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.2.8.tgz#d7f899f31d037b12d9db4281912f9018575720b1" @@ -4500,9 +4504,9 @@ gatsby-transformer-remark@^1.7.32: unist-util-select "^1.5.0" unist-util-visit "^1.1.1" -gatsby@^1.9.194: - version "1.9.194" - resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.194.tgz#6cc32ed3ab408ba25e6150c0571c3153924e8055" +gatsby@^1.9.199: + version "1.9.199" + resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.199.tgz#8d23dcd1d3b33d012074cc8a439174dfc5a700f6" dependencies: async "^2.1.2" babel-code-frame "^6.22.0" @@ -4536,6 +4540,7 @@ gatsby@^1.9.194: express "^4.14.0" express-graphql "^0.6.6" extract-text-webpack-plugin "^1.0.1" + fast-levenshtein "~2.0.4" file-loader "^0.9.0" flat "^2.0.1" friendly-errors-webpack-plugin "^1.6.1" diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index b835f5f5f24d..03fa83d5a7f4 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -13,23 +13,23 @@ "test": "ng test" }, "dependencies": { - "@angular/animations": "^5.2.4", - "@angular/common": "^5.2.4", - "@angular/compiler": "^5.2.4", - "@angular/core": "^5.2.4", - "@angular/forms": "^5.2.4", - "@angular/http": "^5.2.4", - "@angular/platform-browser": "^5.2.4", - "@angular/platform-browser-dynamic": "^5.2.4", - "@angular/router": "^5.2.4", + "@angular/animations": "^5.2.5", + "@angular/common": "^5.2.5", + "@angular/compiler": "^5.2.5", + "@angular/core": "^5.2.5", + "@angular/forms": "^5.2.5", + "@angular/http": "^5.2.5", + "@angular/platform-browser": "^5.2.5", + "@angular/platform-browser-dynamic": "^5.2.5", + "@angular/router": "^5.2.5", "core-js": "^2.4.1", "rxjs": "^5.4.2", "zone.js": "^0.8.20" }, "devDependencies": { "@angular/cli": "1.6.8", - "@angular/compiler-cli": "^5.2.4", - "@angular/language-service": "^5.2.4", + "@angular/compiler-cli": "^5.2.5", + "@angular/language-service": "^5.2.5", "@storybook/addon-actions": "^3.4.0-alpha.8", "@storybook/addon-links": "^3.4.0-alpha.8", "@storybook/addon-notes": "^3.4.0-alpha.8", @@ -37,7 +37,7 @@ "@storybook/addons": "^3.4.0-alpha.8", "@storybook/angular": "^3.4.0-alpha.8", "@types/jasmine": "~2.8.6", - "@types/node": "~9.4.0", + "@types/node": "~9.4.6", "global": "^4.3.2", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json index 06f961e789e6..c5c9e0e05b86 100644 --- a/examples/cra-kitchen-sink/package.json +++ b/examples/cra-kitchen-sink/package.json @@ -40,7 +40,7 @@ "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.0", "enzyme-to-json": "^3.3.1", - "jest": "^22.2.2", + "jest": "^22.3.0", "react-scripts": "^1.1.1" } } diff --git a/examples/official-storybook/built-storybooks/angular-cli b/examples/official-storybook/built-storybooks/angular-cli new file mode 120000 index 000000000000..fb7a49bbf43c --- /dev/null +++ b/examples/official-storybook/built-storybooks/angular-cli @@ -0,0 +1 @@ +../../angular-cli/storybook-static \ No newline at end of file diff --git a/examples/official-storybook/built-storybooks/cra-kitchen-sink b/examples/official-storybook/built-storybooks/cra-kitchen-sink new file mode 120000 index 000000000000..bc94cdebbafc --- /dev/null +++ b/examples/official-storybook/built-storybooks/cra-kitchen-sink @@ -0,0 +1 @@ +../../cra-kitchen-sink/storybook-static \ No newline at end of file diff --git a/examples/official-storybook/built-storybooks/polymer-cli b/examples/official-storybook/built-storybooks/polymer-cli new file mode 120000 index 000000000000..0ea6cbfd0ec9 --- /dev/null +++ b/examples/official-storybook/built-storybooks/polymer-cli @@ -0,0 +1 @@ +../../polymer-cli/storybook-static \ No newline at end of file diff --git a/examples/official-storybook/built-storybooks/vue-kitchen-sink b/examples/official-storybook/built-storybooks/vue-kitchen-sink new file mode 120000 index 000000000000..48946b56a2af --- /dev/null +++ b/examples/official-storybook/built-storybooks/vue-kitchen-sink @@ -0,0 +1 @@ +../../vue-kitchen-sink/storybook-static \ No newline at end of file diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index bec4f5d9f9c0..223cde370d88 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -7,7 +7,7 @@ "chromatic": "chromatic test --storybook-addon --exit-zero-on-changes --app-code ab7m45tp9p", "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json", "image-snapshots": "yarn run build-storybook && jest --projects=./image-snapshots", - "storybook": "start-storybook -p 9010 -c ./" + "storybook": "start-storybook -p 9010 -c ./ -s built-storybooks" }, "devDependencies": { "@storybook/addon-a11y": "^3.4.0-alpha.8", @@ -33,7 +33,7 @@ "eventemitter3": "^3.0.1", "format-json": "^1.0.3", "global": "^4.3.2", - "jest": "^22.1.4", + "jest": "^22.3.0", "paths.macro": "^2.0.2", "prop-types": "^15.6.0", "react": "^16.2.0", diff --git a/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot b/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot new file mode 100644 index 000000000000..6ebeacf6f19b --- /dev/null +++ b/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot @@ -0,0 +1,33 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots App|acceptance angular-cli 1`] = ` +