Merge pull request #2585 from storybooks/docs-babelrc

Docs: fix logos display & add babelrc

.circleci/config.yml

@@ -137,29 +137,19 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          name: "Restore core dependencies cache"
-          keys:
-            - core-dependencies-{{ checksum "yarn.lock" }}
-      - restore_cache:
-          name: "Restore docs dependencies cache"
+          name: "Restore dependencies cache"
           keys:
             - docs-dependencies-{{ checksum "docs/yarn.lock" }}
-      - run:
-          name: "Install core dependencies"
-          command: |
-            yarn install
       - run:
           name: "Install dependencies"
           command: |
-            yarn bootstrap --docs
-      - run:
-          name: "Dirty check"
-          command: |
-            yarn repo-dirty-check
+            cd docs
+            yarn install --frozen-lockfile
       - run:
-          name: "Run docs"
+          name: "Build docs"
           command: |
-            yarn docs:build
+            cd docs
+            yarn build
       - save_cache:
           name: "Cache dependencies"
           key: docs-dependencies-{{ checksum "docs/yarn.lock" }}

docs/.babelrc

@@ -0,0 +1 @@
+{}

docs/src/components/Homepage/UsedBy/index.jsx

@@ -37,18 +37,18 @@ UsedByBg.defaultProps = {
   style: {},
 };
 
-const User = ({ logo, demo, site, title }) => (
+const User = ({ logoSrc, demo, site, title }) => (
   <a
     className="used-by-user"
     href={demo || site}
     target="_blank"
     rel="noopener nofollow noreferrer"
   >
-    <img className="used-by-user-image" src={logo} alt={title} />
+    <img className="used-by-user-image" src={logoSrc} alt={title} />
   </a>
 );
 User.propTypes = {
-  logo: PropTypes.string.isRequired,
+  logoSrc: PropTypes.string.isRequired,
   demo: PropTypes.string,
   site: PropTypes.string.isRequired,
   title: PropTypes.string,

docs/src/pages/_users.yml

@@ -1,84 +1,84 @@
 airbnb:
-  logo: ./logos/airbnb.svg
+  logo: airbnb.svg
   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
 slack:
-  logo: ./logos/slack.svg
+  logo: slack.svg
   title: Slack Emoji Picker
   description: Slack improves performance and maintainability with Storybook!
   demo: https://slack.engineering/rebuilding-slacks-emoji-picker-in-react-bfbd8ce6fbfe
   site: http://slack.com
 lonelyplanet:
-  logo: ./logos/lonelyplanet.svg
+  logo: lonelyplanet.svg
   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/
 squarespace:
-  logo: ./logos/squarespace.png
+  logo: squarespace.png
   title: Squarespace
   description: Component design and development at Squarespace
   site: http://squarespace.com
 dbsbank:
-  logo: ./logos/dbsbank.svg
+  logo: dbsbank.svg
   title: DBS Bank
   description: DBS Bank consumer products improves performance and maintainability with Storybook!
   site: https://www.dbs.com
 coursera:
-  logo: ./logos/coursera.svg
+  logo: coursera.svg
   title: Coursera
   description: Coursera UI component library
   site: https://building.coursera.org/ui/
 # buffer:
-#   logo: ./logos/buffer.svg
+#   logo: buffer.svg
 #   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
 # wix:
-#   logo: ./logos/wix.svg
+#   logo: wix.svg
 #   title: Wix
 #   description: React component library for all Wix verticals
 #   demo: https://wix.github.io/wix-style-react/
 #   source: https://github.com/wix/wix-style-react
 #   source2: https://github.com/wix/react-native-storybook-example/
 # algolia:
-#   logo: ./logos/algolia.svg
+#   logo: algolia.svg
 #   title: Algolia Instantsearch
 #   description: Lightning-fast, hyper-configurable search.
 #   source: https://github.com/algolia/react-instantsearch/
 #   demo: https://community.algolia.com/react-instantsearch/storybook/
 # mozilla:
-#   logo: ./logos/mozilla.svg
+#   logo: mozilla.svg
 #   title: Mozilla Foundation
 #   site: https://mozilla.org
 # remitly:
-#   logo: ./logos/remitly.svg
+#   logo: remitly.svg
 #   title: Remitly
 #   site: https://remitly.com
 # nulogy:
-#   logo: ./logos/nulogy.png
+#   logo: nulogy.png
 #   title: Nulogy
 #   description: SaaS for Supply Chain
 #   site: https://nulogy.com
 # postmates:
-#   logo: ./logos/postmates.png
+#   logo: postmates.png
 #   title: Quran.com
 #   site: https://postmates.com
 # appbase:
-#   logo: ./logos/appbase.svg
+#   logo: appbase.svg
 #   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:
-#   logo: ./logos/quran.svg
+#   logo: quran.svg
 #   title: Quran.com
 #   description: Component library for Quran.com, Quranicaudio.com and Salah.com.
 #   source: https://github.com/quran/common-components

docs/src/pages/index.jsx

@@ -3,4 +3,10 @@ import { values } from 'lodash';
 import Homepage from '../components/Homepage';
 import users from './_users.yml';
 
-export default () => <Homepage users={values(users)} />;
+const usersArray = values(users).map(user => ({
+  ...user,
+  // eslint-disable-next-line import/no-dynamic-require, global-require
+  logoSrc: require(`./logos/${user.logo}`),
+}));
+
+export default () => <Homepage users={usersArray} />;

scripts/repo-dirty-check.js

@@ -4,7 +4,7 @@ const shell = require('shelljs');
 // exit with code 1 if there are some changed files
 if (shell.exec('git status --porcelain').stdout.trim() !== '') {
   console.error(
-    'Git repo is dirty, please consider updating lockfiles by running `yarn bootstrap --reset --core --docs`'
+    'Git repo is dirty, please consider updating lockfiles by running `yarn bootstrap --reset --core`'
   );
   process.exit(1);
 }