feat(index): add images and update entries (#1570)

* feat(index): add image data * feat(index): add images and update entries * feat(index): update config to include images and update schema * feat(index): add images to component inde xlist Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Aug 13, 2020 · 561d5d2 · 561d5d2 · vercel · Aug 13, 2020
1 parent e36b499
commit 561d5d2
Show file tree

Hide file tree

Showing 60 changed files with 508 additions and 250 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -10,6 +10,26 @@ module.exports = {
       'IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud',
   },
   plugins: [
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'component-index-images',
+        path: path.join(__dirname, 'src/data/index'),
+        ignore: ['**/*.js', '**/*.yml', '**/.*'],
+      },
+    },
+    {
+      resolve: 'gatsby-remark-images',
+      options: {
+        maxWidth: 1152,
+        linkImagesToOriginal: false,
+        quality: 75,
+        withWebp: false,
+        pngCompressionSpeed: 4,
+      },
+    },
+    'gatsby-plugin-sharp',
+    'gatsby-transformer-sharp',
     'gatsby-plugin-lodash',
     {
       resolve: 'gatsby-theme-carbon',

diff --git a/package.json b/package.json
@@ -40,7 +40,8 @@
     "carbon-components": "^10.17.0",
     "carbon-components-react": "^7.17.0"
   },
-  "dependencies": {
+  "devDependencies": {
+    "@babel/core": "^7.11.1",
     "@carbon/charts": "^0.32.12",
     "@carbon/charts-react": "^0.32.12",
     "@carbon/elements": "^10.16.0",
@@ -53,27 +54,50 @@
     "@loadable/webpack-plugin": "^5.12.0",
     "@now/node": "^1.6.1",
     "@philpl/buble": "^0.19.7",
+    "babel-eslint": "^10.1.0",
     "babel-preset-gatsby": "^0.2.29",
+    "carbon-components": "^10.16.0",
+    "carbon-components-react": "^7.16.0",
     "change-case": "^4.1.1",
     "classnames": "^2.2.6",
     "codesandbox": "^2.1.10",
     "copy-to-clipboard": "^3.2.1",
     "d3": "^5.12.0",
     "dotenv": "^8.2.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-config-wesbos": "0.0.19",
+    "eslint-plugin-html": "^6.0.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^2.5.1",
     "fs-extra": "^9.0.1",
+    "fuse.js": "^6.4.1",
     "gatsby": "^2.19.8",
+    "gatsby-image": "^2.4.15",
     "gatsby-plugin-fathom": "^1.1.1",
     "gatsby-plugin-lodash": "^3.1.3",
     "gatsby-plugin-netlify-cache": "^1.2.0",
     "gatsby-plugin-remove-serviceworker": "^1.0.0",
+    "gatsby-plugin-sharp": "^2.6.27",
     "gatsby-plugin-sitemap": "^2.2.30",
+    "gatsby-remark-images": "^3.3.25",
+    "gatsby-source-filesystem": "^2.3.24",
     "gatsby-theme-carbon": "^1.26.3",
+    "gatsby-transformer-sharp": "^2.5.13",
     "html-loader": "^0.5.5",
+    "husky": "^4.2.3",
+    "lint-staged": ">=10.0.9",
     "lodash-es": "^4.17.15",
     "markdown-it": "^9.0.1",
     "markdown-loader": "^5.0.0",
     "nanoid": "^2.1.11",
     "node-fetch": "^3.0.0-beta.7",
+    "prettier": "^2.0.2",
+    "prettier-config-carbon": "^0.2.0",
     "prismjs": "^1.17.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
@@ -84,24 +108,6 @@
     "use-media": "^1.4.0",
     "use-resize-observer": "^4.0.0"
   },
-  "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-config-wesbos": "0.0.19",
-    "eslint-plugin-html": "^6.0.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "fuse.js": "^6.4.1",
-    "husky": "^4.2.3",
-    "lint-staged": ">=10.0.9",
-    "prettier": "^2.0.2",
-    "prettier-config-carbon": "^0.2.0"
-  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

diff --git a/plugins/gatsby-plugin-component-index/gatsby-node.js b/plugins/gatsby-plugin-component-index/gatsby-node.js
@@ -7,7 +7,6 @@ const schema = require('./src/schema');
 // the build to fail. In the interim, we're logging the error to the console and
 // manually exiting the process so that we don't have builds that pass but don't
 // have the appropriate source nodes
-
 exports.sourceNodes = async (
   { actions, createNodeId, createContentDigest },
   pluginOptions
@@ -34,14 +33,19 @@ exports.sourceNodes = async (
     const directory = path.join(rootDirectory, maintainer.name);
     const files = await fs.readdir(directory);
 
-    for (const file of files) {
+    for (const file of files.filter(filterFiles)) {
       const filepath = path.join(directory, file);
       const contents = await fs.readFile(filepath, 'utf8');
       const component = yml.safeLoad(contents);
 
       components.push({
         ...component,
-        maintainer: maintainer.friendly_name,
+        name: path.basename(file, '.yml'),
+        friendly_name: component.name,
+        maintainer: {
+          name: maintainer.name,
+          friendly_name: maintainer.friendly_name,
+        },
       });
     }
   }
@@ -67,3 +71,8 @@ exports.sourceNodes = async (
     createNode(node);
   }
 };
+
+const denylist = new Set(['images', '.DS_Store']);
+function filterFiles(filename) {
+  return !denylist.has(filename);
+}
diff --git a/plugins/gatsby-plugin-component-index/src/schema.js b/plugins/gatsby-plugin-component-index/src/schema.js
@@ -8,15 +8,18 @@ const component = Joi.object({
   description: Joi.string(),
   design_asset: Joi.string().valid('Sketch', 'Adobe XD', 'Figma'),
   framework: Joi.string().valid('React', 'Angular', 'Vanilla', 'Vue'),
-  maintainer: Joi.string().valid(
-    'CD&AI',
-    'Cloud PAL',
-    'Watson Health',
-    'Watson IoT'
-  ),
-  name: Joi.string().required(),
   platform: Joi.string().valid('Web', 'iOS', 'Android'),
   website_url: Joi.string().uri(),
+
+  // Mapped from `name`
+  friendly_name: Joi.string().required(),
+
+  // Generated
+  name: Joi.string().required(),
+  maintainer: Joi.object({
+    name: Joi.string().required(),
+    friendly_name: Joi.string().required(),
+  }).required(),
 });
 
 const maintainer = Joi.object({

diff --git a/src/components/ComponentIndexPage/ComponentIndexList.js b/src/components/ComponentIndexPage/ComponentIndexList.js
@@ -1,118 +1,41 @@
-/* eslint-disable global-require */
-/* eslint-disable no-undef */
-import { Link, Row, Column, Tag, TooltipIcon } from 'carbon-components-react';
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import PropTypes from 'prop-types';
 import React from 'react';
-
-const componentImg = require('./images/placeholderCompIndex.svg');
-
-const angularIcon = require('./images/Angular.svg');
-const reactIcon = require('./images/React.svg');
-const vanillaIcon = require('./images/Vanilla.svg');
-const vueIcon = require('./images/Vue.svg');
-
-const axureIcon = require('./images/Axure.svg');
-const figmaIcon = require('./images/Figma.svg');
-const sketchIcon = require('./images/Sketch.svg');
-const xdIcon = require('./images/XD.svg');
-
-const frameworkIcons = {
-  Angular: angularIcon,
-  React: reactIcon,
-  Vanilla: vanillaIcon,
-  Vue: vueIcon,
-};
-
-const designAssetIcons = {
-  Axure: axureIcon,
-  Figma: figmaIcon,
-  Sketch: sketchIcon,
-  XD: xdIcon,
-};
+import ComponentIndexListItem from './ComponentIndexListItem';
 
 function ComponentIndexList({ items }) {
   return (
     <section aria-label="Component index">
       {items.map(
         ({
-          name,
+          codeUrl,
           description,
-          maintainer,
-          framework,
           designAsset,
-          codeUrl,
+          framework,
+          image,
+          maintainer,
+          name,
           websiteUrl,
         }) => {
           const key = `${name}:${maintainer}`;
           return (
-            <Row key={key}>
-              <Column sm={4} md={8} lg={9}>
-                <article className="component-index-item">
-                  <div className="component-index-item__image bx--aspect-ratio bx--aspect-ratio--4x3">
-                    <img
-                      src={componentImg}
-                      alt="component-img"
-                      className="index-image"
-                    />
-                  </div>
-
-                  <div className="component-index-item__content">
-                    <header className="component-index-item__name">
-                      {name}
-                    </header>
-
-                    <p className="component-index-item__description">
-                      {description}
-                    </p>
-
-                    <footer className="component-index-item__info">
-                      <div className="component-index-item__links">
-                        <Link
-                          className="component-index-item__link"
-                          href={websiteUrl}
-                          rel="noopener noreferrer">
-                          Website
-                        </Link>
-                        <div className="component-index-item__divider" />
-                        <Link
-                          className="component-index-item__link"
-                          href={codeUrl}
-                          rel="noopener noreferrer">
-                          Code
-                        </Link>
-                      </div>
-                      <ul className="component-index-item__tags">
-                        <li className="component-index-item__tag component-index-item__tag--framework">
-                          <TooltipIcon direction="top" tooltipText={framework}>
-                            <img
-                              img
-                              src={frameworkIcons[framework] || null}
-                              alt={framework}
-                            />
-                          </TooltipIcon>
-                        </li>
-                        <li className="component-index-item__tag component-index-item__tag--design-asset">
-                          <TooltipIcon
-                            direction="top"
-                            tooltipText={designAsset}>
-                            <img
-                              img
-                              src={designAssetIcons[designAsset] || null}
-                              alt={designAsset}
-                            />
-                          </TooltipIcon>
-                        </li>
-                        <li className="component-index-item__tag component-index-item__tag--maintainer">
-                          <TooltipIcon direction="top" tooltipText="Maintainer">
-                            <Tag>{maintainer}</Tag>
-                          </TooltipIcon>
-                        </li>
-                      </ul>
-                    </footer>
-                  </div>
-                </article>
-              </Column>
-            </Row>
+            <ComponentIndexListItem
+              key={key}
+              codeUrl={codeUrl}
+              description={description}
+              designAsset={designAsset}
+              framework={framework}
+              image={image}
+              maintainer={maintainer}
+              name={name}
+              websiteUrl={websiteUrl}
+            />
           );
         }
       )}