From 441b45bac26834dc5366c28247ffcf305feda5b9 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Mon, 23 Aug 2021 14:09:31 -0500 Subject: [PATCH] [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 <32556167+jnm2377@users.noreply.github.com> --- gatsby-node.js | 2 +- package.json | 43 +- .../ChartIndexPage/ChartIndexListItem.js | 8 +- .../ChartIndexPage/useChartIndexData.js | 4 +- src/components/ComponentDemo/KnobContainer.js | 2 - .../ComponentIndexListItem.js | 8 +- .../SVGLibraries/IconLibrary/IconLibrary.js | 7 +- .../PictogramLibrary/PictogramLibrary.js | 12 +- .../SVGLibraries/shared/ActionBar.js | 14 +- .../status-indicators/status-indicators.yaml | 39 +- .../components/{Footer.js => Footer/index.js} | 2 +- .../components/{Header.js => Header/index.js} | 0 src/gatsby-theme-carbon/templates/Homepage.js | 6 +- .../designing/design-resources/index.mdx | 12 +- .../developing/frameworks/web-components.mdx | 43 +- .../status-indicator-pattern/index.mdx | 10 +- yarn.lock | 13335 ++++++++-------- 17 files changed, 6770 insertions(+), 6777 deletions(-) rename src/gatsby-theme-carbon/components/{Footer.js => Footer/index.js} (96%) rename src/gatsby-theme-carbon/components/{Header.js => Header/index.js} (100%) diff --git a/gatsby-node.js b/gatsby-node.js index 5f3aaca591d..d3a044d179d 100644 --- 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 index 7476bae8764..3625dfa3f7a 100644 --- 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 index e924d76bbef..4fff67fc9e6 100644 --- 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 ); } else { diff --git a/src/components/ChartIndexPage/useChartIndexData.js b/src/components/ChartIndexPage/useChartIndexData.js index c29cd2207b4..784bcc72cd9 100644 --- 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 index 08e1d9eb875..1a766a816c7 100644 --- 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 index 302355f9644..c0a2d3fcc17 100644 --- 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 ); } else { diff --git a/src/components/SVGLibraries/IconLibrary/IconLibrary.js b/src/components/SVGLibraries/IconLibrary/IconLibrary.js index 27f054ca7c4..54f41ac0e60 100644 --- 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 index 93bc7b1c95b..53a9beaa326 100644 --- 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 index a54adf6a2e9..8a27dcec1b1 100644 --- 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, })}>