[Don't merge yet] feat: update to gtc v2 and gatsby v3 (#2416)

* chore: update deps * fix: gatsby v3 migration woes * chore: fix shadowing issues * chore: update charts to use gatsby-image Co-authored-by: Josefina Mancilla <[email protected]>
carbon-design-system · Aug 23, 2021 · 441b45b · 441b45b · vercel · Aug 23, 2021
1 parent 3ed64ec
commit 441b45b
Show file tree

Hide file tree

Showing 17 changed files with 6,770 additions and 6,777 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -7,7 +7,7 @@ exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
       rules: [
         {
           test: /\.md$/,
-          loaders: ['html-loader', 'markdown-loader'],
+          use: ['html-loader', 'markdown-loader'],
         },
         {
           test: /\.html$/,

diff --git a/package.json b/package.json
@@ -37,12 +37,11 @@
     "/node_modules/*"
   ],
   "resolutions": {
-    "carbon-components": "^10.42.0",
-    "carbon-components-react": "^7.42.0",
-    "@carbon/elements": "^10.41.0",
-    "@carbon/icons": "^10.38.0",
-    "@carbon/icons-react": "^10.38.0",
-    "gatsby-remark-images": "^3.3.33"
+    "carbon-components": "^10.37.0",
+    "carbon-components-react": "^7.37.1",
+    "@carbon/elements": "^10.36.0",
+    "@carbon/icons": "^10.33.0",
+    "@carbon/icons-react": "^10.33.0"
   },
   "dependencies": {
     "@carbon/charts-react": "0.42.1",
@@ -51,7 +50,7 @@
     "@carbon/icons-react": "^10.38.0",
     "@carbon/pictograms": "^11.16.0",
     "@carbon/pictograms-react": "^11.16.0",
-    "@loadable/component": "^5.12.0",
+    "@loadable/component": "^5.15.0",
     "@slack/web-api": "^5.11.0",
     "carbon-components": "^10.42.0",
     "carbon-components-react": "^7.42.0",
@@ -60,9 +59,10 @@
     "codesandbox": "^2.1.10",
     "copy-to-clipboard": "^3.2.1",
     "fuse.js": "^6.4.1",
-    "gatsby": "^2.19.8",
-    "gatsby-image": "^2.4.15",
-    "gatsby-theme-carbon": "^1.30.1",
+    "gatsby": "^3.7.2",
+    "gatsby-image": "^3.7.1",
+    "gatsby-plugin-image": "^1.12.0",
+    "gatsby-theme-carbon": "^2.0.0-next.3",
     "lodash-es": "^4.17.15",
     "markdown-it": "^9.0.1",
     "nanoid": "^2.1.11",
@@ -75,13 +75,13 @@
     "use-media": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.1",
+    "@babel/core": "^7.14.6",
     "@loadable/babel-plugin": "^5.12.0",
-    "@loadable/webpack-plugin": "^5.12.0",
+    "@loadable/webpack-plugin": "^5.15.0",
     "@now/node": "^1.6.1",
     "@philpl/buble": "^0.19.7",
     "babel-eslint": "^10.1.0",
-    "babel-preset-gatsby": "^0.2.29",
+    "babel-preset-gatsby": "^1.7.1",
     "d3": "7.0.0",
     "dotenv": "^8.2.0",
     "eslint": "^6.8.0",
@@ -95,22 +95,21 @@
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^2.5.1",
     "fs-extra": "^9.0.1",
-    "gatsby-plugin-lodash": "^3.1.3",
-    "gatsby-plugin-manifest": "^2.4.34",
+    "gatsby-plugin-lodash": "^4.7.1",
+    "gatsby-plugin-manifest": "^3.7.1",
     "gatsby-plugin-remove-serviceworker": "^1.0.0",
-    "gatsby-plugin-sharp": "^2.6.27",
-    "gatsby-plugin-sitemap": "^2.2.30",
-    "gatsby-remark-images": "^3.3.33",
-    "gatsby-source-filesystem": "^2.3.24",
-    "gatsby-transformer-sharp": "^2.5.13",
+    "gatsby-plugin-sharp": "^3.7.1",
+    "gatsby-plugin-sitemap": "^4.3.1",
+    "gatsby-remark-images": "^5.4.1",
+    "gatsby-source-filesystem": "^3.7.1",
+    "gatsby-transformer-sharp": "^3.7.1",
     "html-loader": "^0.5.5",
     "husky": "^4.2.3",
     "lint-staged": ">=10.0.9",
     "markdown-loader": "^5.0.0",
-    "node-fetch": "^3.0.0-beta.9",
+    "node-fetch": "^2.6.1",
     "prettier": "^2.0.2",
     "prismjs": "^1.17.1",
-    "react-ga": "^2.6.0",
     "use-resize-observer": "^4.0.0"
   },
   "husky": {

diff --git a/src/components/ChartIndexPage/ChartIndexListItem.js b/src/components/ChartIndexPage/ChartIndexListItem.js
@@ -6,7 +6,7 @@
  */
 
 import { Link, Tag, TooltipIcon } from 'carbon-components-react';
-import Image from 'gatsby-image';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import React from 'react';
 
 // Placeholder image
@@ -16,12 +16,12 @@ const ChartIndexListItem = React.memo(
   ({ codeUrl, description, image, maintainer, name, websiteUrl }) => {
     let img;
 
-    if (image?.fluid) {
+    if (image?.gatsbyImageData) {
       img = (
-        <Image
+        <GatsbyImage
           className="index-image"
           alt={`Image for the ${name} chart`}
-          fluid={image.fluid}
+          image={image.gatsbyImageData}
         />
       );
     } else {

diff --git a/src/components/ChartIndexPage/useChartIndexData.js b/src/components/ChartIndexPage/useChartIndexData.js
@@ -14,9 +14,7 @@ const CHART_INDEX_DATA = graphql`
         name
         relativeDirectory
         childImageSharp {
-          fluid(maxWidth: 640, maxHeight: 480) {
-            ...GatsbyImageSharpFluid
-          }
+          gatsbyImageData(width: 640, height: 480)
         }
       }
     }

diff --git a/src/components/ComponentDemo/KnobContainer.js b/src/components/ComponentDemo/KnobContainer.js
@@ -22,7 +22,6 @@ import {
   formGroup,
   componentKnobWrapper,
   componentKnobTitle,
-  formItem,
   checkboxWrapper,
   iconButton,
   iconButtonRow,
@@ -196,7 +195,6 @@ const Knob = ({
         title={description}
         defaultChecked={defaultChecked}
         labelText={name}
-        className={formItem}
         wrapperClassName={checkboxWrapper}
         id={inputId}
       />

diff --git a/src/components/ComponentIndexPage/ComponentIndexListItem.js b/src/components/ComponentIndexPage/ComponentIndexListItem.js
@@ -8,7 +8,7 @@
 
 import { Link, Tag, TooltipIcon } from 'carbon-components-react';
 
-import Image from 'gatsby-image';
+import { GatsbyImage } from 'gatsby-plugin-image';
 import React from 'react';
 import angularIcon from './images/Angular.svg';
 import axureIcon from './images/Axure.svg';
@@ -48,12 +48,12 @@ const ComponentIndexListItem = React.memo(
   }) => {
     let img;
 
-    if (image?.fluid) {
+    if (image?.gatsbyImageData) {
       img = (
-        <Image
+        <GatsbyImage
           className="index-image"
           alt={`Image for the ${name} component`}
-          fluid={image.fluid}
+          image={image.gatsbyImageData}
         />
       );
     } else {

diff --git a/src/components/SVGLibraries/IconLibrary/IconLibrary.js b/src/components/SVGLibraries/IconLibrary/IconLibrary.js
@@ -4,10 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { groupBy, debounce } from 'lodash-es';
 import loadable from '@loadable/component';
 
-import {
-  icons as iconMetaData,
-  categories as iconCategoryMetadata,
-} from '@carbon/icons/metadata.json';
+import * as metaData from '@carbon/icons/metadata.json';
 import useColumnCount from '../shared/useColumnCount';
 
 import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss';
@@ -16,6 +13,8 @@ import FilterRow from '../shared/FilterRow';
 import IconCategory from './IconCategory';
 import NoResult from '../shared/NoResult';
 
+const { icons: iconMetaData, categories: iconCategoryMetadata } = metaData;
+
 const IconLibrary = () => {
   const [iconComponents, setIconComponents] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState('All icons');

diff --git a/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js b/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js
@@ -4,10 +4,7 @@ import loadable from '@loadable/component';
 
 import { groupBy, debounce } from 'lodash-es';
 
-import {
-  icons as pictogramMetaData,
-  categories as pictogramCatagoryMetadata,
-} from '@carbon/pictograms/metadata.json';
+import * as metaData from '@carbon/pictograms/metadata.json';
 import useColumnCount from '../shared/useColumnCount';
 
 import FilterRow from '../shared/FilterRow';
@@ -16,6 +13,11 @@ import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss';
 import PictogramCategory from './PictogramCategory';
 import NoResult from '../shared/NoResult';
 
+const {
+  icons: pictogramMetaData,
+  categories: pictogramCategoryMetadata,
+} = metaData;
+
 const IconLibrary = () => {
   const [pictogramComponents, setPictogramComponents] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState('All pictograms');
@@ -46,7 +48,7 @@ const IconLibrary = () => {
       []
     );
 
-    setCategoryList(pictogramCatagoryMetadata.map(({ name }) => name).sort());
+    setCategoryList(pictogramCategoryMetadata.map(({ name }) => name).sort());
     setCategoriesLoaded(true);
 
     setPictogramComponents(pictogramArray);

diff --git a/src/components/SVGLibraries/shared/ActionBar.js b/src/components/SVGLibraries/shared/ActionBar.js
@@ -6,7 +6,7 @@ import { Button } from 'carbon-components-react';
 import copy from 'copy-to-clipboard';
 import cx from 'classnames';
 import { LibraryContext } from './LibraryProvider';
-import styles from './ActionBar.module.scss';
+import { container, trigger, hidden, tooltip } from './ActionBar.module.scss';
 
 const ActionBar = ({
   name,
@@ -56,8 +56,8 @@ const ActionBar = ({
       ref={actionBarRef}
       onBlur={handleBlurEvent}
       aria-hidden={!isActionBarVisible}
-      className={cx(styles.container, {
-        [styles.hidden]: !isActionBarVisible,
+      className={cx(container, {
+        [hidden]: !isActionBarVisible,
       })}>
       <Button
         kind="ghost"
@@ -69,8 +69,8 @@ const ActionBar = ({
         renderIcon={Download16}
         onFocus={() => setIsActionBarVisible(true)}
         onClick={handleDownload}
-        className={styles.tooltip}
-        triggerClassName={styles.trigger}
+        className={tooltip}
+        triggerClassName={trigger}
       />
       {shouldShowCopyButton && (
         <Button
@@ -83,8 +83,8 @@ const ActionBar = ({
           renderIcon={Code16}
           onClick={handleCopy}
           onFocus={() => setIsActionBarVisible(true)}
-          className={styles.tooltip}
-          triggerClassName={styles.trigger}
+          className={tooltip}
+          triggerClassName={trigger}
         />
       )}
     </div>

diff --git a/src/data/status-indicators/status-indicators.yaml b/src/data/status-indicators/status-indicators.yaml
@@ -71,8 +71,8 @@ medium:
       - checkmark
     token: $support-02
     description:
-      Carries the same meaning as ‘Normal’ but is more often used in data
-      tables and confined spaces
+      Carries the same meaning as ‘Normal’ but is more often used in data tables
+      and confined spaces
   - name: Success
     fileNames:
       - checkmark-circle-blue-filled
@@ -96,8 +96,8 @@ medium:
       - incomplete
     token: $support-04
     description:
-      Indicates a stepped process has begun but is not yet finished (icon appears in
-      Carbon’s Progress Indicator component)
+      Indicates a stepped process has begun but is not yet finished (icon
+      appears in Carbon’s Progress Indicator component)
     usage: incomplete tasks
   - name: Not started
     fileNames:
@@ -147,38 +147,49 @@ low:
 glyph:
   - name: Failure
     token: $support-01
-    description: Indicates a severe process failure or error that needs immediate attention
-    usage: critical failures, emergencies urgent alerts, deprecation and cancellation
+    description:
+      Indicates a severe process failure or error that needs immediate attention
+    usage:
+      critical failures, emergencies urgent alerts, deprecation and cancellation
     fileNames:
       - failure
   - name: Critical severity
     token: $support-01
-    description: Indicates critical severity threat, critical severity object (like an IP), or critical  risk of a data breach; based on a 1–10 scale
+    description:
+      Indicates critical severity threat, critical severity object (like an IP),
+      or critical  risk of a data breach; based on a 1–10 scale
     usage: critical (10) threat, critical risk, critical severity warnings
     fileNames:
       - critical-severity
   - name: High severity
     token: $support-01
-    description: Indicates high severity threat, high severity object (like an IP), or high risk of a data breach; based on a 1–10 scale
+    description:
+      Indicates high severity threat, high severity object (like an IP), or high
+      risk of a data breach; based on a 1–10 scale
     usage: high threat (7–9), high risk, high severity warnings
     fileNames:
       - high-severity
   - name: Medium severity
     token: Orange 40/Orange 60 stroke, Orange 40
-    description: Indicates medium severity threat, medium severity object (like an IP), or medium risk of a data breach; based on a 1–10 scale
+    description:
+      Indicates medium severity threat, medium severity object (like an IP), or
+      medium risk of a data breach; based on a 1–10 scale
     usage: medium threat (4–6), medium risk, medium severity warnings
     fileNames:
       - medium-severity
   - name: Low severity
     token: $support-03/Yellow 60 stroke, $support-03
-    description: Indicates low severity threat, low severity object (like an IP), or low risk of a data breach; based on a 1–10 scale
+    description:
+      Indicates low severity threat, low severity object (like an IP), or low
+      risk of a data breach; based on a 1–10 scale
     usage: low threat (0–3), low risk, low severity warnings
     fileNames:
       - low-severity
   - name: Caution
     token: $support-03/Yellow 60 stroke, $support-03
     description:
-      When not using the Security risk/severity scale, this can be used to indicate  the existence of a non-service affecting fault condition
+      When not using the Security risk/severity scale, this can be used to
+      indicate  the existence of a non-service affecting fault condition
     usage: minor caution, prevention, instability
     fileNames:
       - caution
@@ -200,15 +211,15 @@ glyph:
       - circle-fill
   - name: New
     token: $support-04
-    description:
-      Indicates a new components, features or pieces of content
+    description: Indicates a new components, features or pieces of content
     usage: new items, additional information
     fileNames:
       - new
   - name: Information
     token: $support-04
     description:
-      Indicates additional information is available (can be used adaptively for statuses not taken into account by this table)
+      Indicates additional information is available (can be used adaptively for
+      statuses not taken into account by this table)
     usage: additional information, wild card
     fileNames:
       - square-fill

diff --git a/src/gatsby-theme-carbon/components/Footer.js → ...y-theme-carbon/components/Footer/index.js b/src/gatsby-theme-carbon/components/Footer.js → ...y-theme-carbon/components/Footer/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Footer from 'gatsby-theme-carbon/src/components/Footer';
-import packageJson from '../../../package.json';
+import packageJson from '../../../../package.json';
 
 const currentYear = new Date().getFullYear();
 const versions = {

diff --git a/src/gatsby-theme-carbon/components/Header.js → ...y-theme-carbon/components/Header/index.js b/src/gatsby-theme-carbon/components/Header.js → ...y-theme-carbon/components/Header/index.js