fix: update svg packages, migrate metadata, lazy load svg components

.babelrc

@@ -0,0 +1,18 @@
+{
+  "plugins": ["@loadable/babel-plugin"],
+  "presets": [
+    [
+      "babel-preset-gatsby",
+      {
+        "targets": {
+          "browsers": [
+            "last 1 edge version",
+            "last 1 firefox version",
+            "last 1 safari version",
+            "last 1 chrome version"
+          ]
+        }
+      }
+    ]
+  ]
+}

.eslintrc

@@ -1,9 +1,12 @@
 {
   "extends": ["eslint-config-carbon"],
+  "plugins": ["react-hooks"],
   "rules": {
     "react/prop-types": 0,
     "react/forbid-prop-types": 0,
-    "arrow-body-style": 0
+    "arrow-body-style": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
   },
   "globals": {
     "fathom": "readonly"

gatsby-config.js

@@ -25,6 +25,7 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
       options: {
+        analyzerMode: 'static',
         disable: !process.env.ANALYZE,
       },
     },

gatsby-node.js

@@ -1,6 +1,6 @@
 const path = require('path');
 
-exports.onCreateWebpackConfig = ({ actions, stage, getConfig }) => {
+exports.onCreateWebpackConfig = ({ actions }) => {
   // Allows importing html files for component code examples
   actions.setWebpackConfig({
     module: {
@@ -26,14 +26,4 @@ exports.onCreateWebpackConfig = ({ actions, stage, getConfig }) => {
       },
     },
   });
-  if (stage === `build-javascript`) {
-    const config = getConfig();
-    config.optimization.splitChunks.cacheGroups.carbon = {
-      name: `carbon`,
-      chunks: `all`,
-      test: /[\\/]node_modules[\\/]@?carbon/,
-    };
-    // This will completely replace the webpack config with the modified object.
-    actions.replaceWebpackConfig(config);
-  }
 };

package.json

@@ -9,7 +9,7 @@
     "clean": "gatsby clean",
     "build": "gatsby build",
     "build:clean": "gatsby clean && yarn build",
-    "build:analyze": "ANALYZE=true yarn build",
+    "build:analyze": "yarn install --force && yarn clean && ANALYZE=true yarn build",
     "serve": "gatsby serve",
     "lint:js": "eslint src --fix",
     "format": "prettier --write 'src/**/*.{js,json,css,scss,md,mdx,yaml}'",
@@ -19,19 +19,26 @@
     "node": "10.x || 12.x"
   },
   "browserslist": [
-    "> 0.5% in my stats"
+    "last 1 edge version",
+    "last 1 firefox version",
+    "last 1 safari version",
+    "last 1 chrome version"
   ],
   "dependencies": {
     "@carbon/charts": "^0.28.1",
     "@carbon/charts-react": "^0.28.1",
     "@carbon/elements": "^10.9.2",
-    "@carbon/icons": "^10.8.1",
-    "@carbon/icons-react": "^10.8.1",
-    "@carbon/pictograms": "^10.8.1",
-    "@carbon/pictograms-react": "^10.8.1",
+    "@carbon/icons": "^10.9.1",
+    "@carbon/icons-react": "^10.9.1",
+    "@carbon/pictograms": "^10.9.0",
+    "@carbon/pictograms-react": "^10.9.0",
+    "@loadable/babel-plugin": "^5.12.0",
+    "@loadable/component": "^5.12.0",
+    "@loadable/webpack-plugin": "^5.12.0",
     "@philpl/buble": "^0.19.7",
-    "carbon-components": "^10.9.2",
-    "carbon-components-react": "^7.9.2",
+    "babel-preset-gatsby": "^0.2.29",
+    "carbon-components": "^10.10.1",
+    "carbon-components-react": "^7.10.1",
     "change-case": "^4.1.1",
     "classnames": "^2.2.6",
     "codesandbox": "^2.1.10",
@@ -69,6 +76,7 @@
     "eslint-plugin-jsx-a11y": "^5.1.1",
     "eslint-plugin-prettier": "^2.1.2",
     "eslint-plugin-react": "^7.1.0",
+    "eslint-plugin-react-hooks": "^2.5.0",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.8",
     "husky": ">=1",
     "lint-staged": ">=8",

plugins/gatsby-theme-carbon-svgs/components/IconLibrary/IconCategory.js

@@ -7,6 +7,8 @@ import {
 import cx from 'classnames';
 
 import SvgCard from '../shared/SvgCard';
+import useIntersectionObserver from '../shared/useIntersectionObserver';
+
 import {
   svgGrid,
   categoryTitle,
@@ -15,15 +17,15 @@ import {
 } from '../shared/SvgLibrary.module.scss';
 
 const IconCategory = ({ category, icons }) => {
-  const subcategories = Object.entries(
-    groupBy(icons, 'categories[0].subcategory')
-  );
+  const subcategories = Object.entries(groupBy(icons, 'subcategory'));
+
   return (
     <section className={svgCategory}>
       <h2 className={cx(h2, categoryTitle)}>{category}</h2>
       <ul>
-        {subcategories.map(([subcategory, subcategoryIcons]) => (
+        {subcategories.map(([subcategory, subcategoryIcons], index) => (
           <IconSubcategory
+            first={index === 0}
             key={subcategory}
             subcategory={subcategory}
             icons={subcategoryIcons}
@@ -34,15 +36,22 @@ const IconCategory = ({ category, icons }) => {
   );
 };
 
-const IconSubcategory = ({ subcategory, icons }) => (
-  <li>
-    <h3 className={cx(h3, subcategoryTitle)}>{subcategory}</h3>
-    <ul className={svgGrid}>
-      {icons.map(icon => (
-        <SvgCard key={icon.name} icon={icon} />
-      ))}
-    </ul>
-  </li>
-);
+const IconSubcategory = ({ subcategory, icons, first }) => {
+  const [subCategoryRef, containerIsVisible] = useIntersectionObserver();
+  return (
+    <li ref={subCategoryRef}>
+      <h3 className={cx(h3, subcategoryTitle)}>{subcategory}</h3>
+      <ul className={svgGrid}>
+        {icons.map(icon => (
+          <SvgCard
+            containerIsVisible={first || containerIsVisible}
+            key={icon.name}
+            icon={icon}
+          />
+        ))}
+      </ul>
+    </li>
+  );
+};
 
 export default IconCategory;

plugins/gatsby-theme-carbon-svgs/components/IconLibrary/IconLibrary.js

@@ -1,10 +1,13 @@
 /* eslint-disable no-restricted-globals */
 /* eslint-disable no-debugger */
 import React, { useEffect, useState } from 'react';
-import { pickBy, groupBy, debounce } from 'lodash-es';
-import * as iconsReact from '@carbon/icons-react';
+import { groupBy, debounce } from 'lodash-es';
+import loadable from '@loadable/component';
 
-import iconMetaData from './iconMetaData';
+import {
+  icons as iconMetaData,
+  categories as iconCategoryMetadata,
+} from '@carbon/icons/metadata.json';
 import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss';
 
 import FilterRow from '../shared/FilterRow';
@@ -21,28 +24,28 @@ const IconLibrary = () => {
   const debouncedSetSearchInputValue = debounce(setSearchInputValue, 200);
 
   useEffect(() => {
-    const iconComponentList = pickBy(
-      iconsReact,
-      (val, key) => key.slice(-2) === '32'
-    );
+    const iconArray = iconMetaData.reduce((accumulator, icon) => {
+      if (icon.deprecated) return accumulator;
 
-    const iconArray = Object.keys(iconMetaData).map(icon => ({
-      ...iconMetaData[icon],
-      // If the icon is unprefixed and starts with a number, add an underscore
-      Component:
-        iconComponentList[isNaN(icon[0]) ? `${icon}32` : `_${icon}32`] ||
-        iconComponentList[`WatsonHealth${icon}32`] ||
-        iconComponentList[`Q${icon}32`],
-    }));
+      const path = icon.namespace
+        ? `${icon.namespace}/${icon.name}`
+        : icon.name;
 
-    const filteredIcons = iconArray.filter(({ deprecated }) => !deprecated);
+      return [
+        ...accumulator,
+        {
+          ...icon,
+          Component: loadable(() =>
+            import(`@carbon/icons-react/lib/${path}/32`)
+          ),
+        },
+      ];
+    }, []);
 
-    setCategoryList(
-      Object.keys(groupBy(filteredIcons, 'categories[0].name')).sort()
-    );
+    setCategoryList(iconCategoryMetadata.map(({ name }) => name));
     setCategoriesLoaded(true);
 
-    setIconComponents(filteredIcons);
+    setIconComponents(iconArray);
   }, []);
 
   const getFilteredIcons = () => {
@@ -51,22 +54,18 @@ const IconLibrary = () => {
     }
     return iconComponents.filter(
       // eslint-disable-next-line camelcase
-      ({ friendly_name, categories, aliases = [], name }) => {
+      ({ friendlyName, category, subcategory, aliases = [], name }) => {
         const searchValue = searchInputValue.toLowerCase();
         return (
-          friendly_name.toLowerCase().includes(searchValue) ||
+          friendlyName.toLowerCase().includes(searchValue) ||
           aliases.some(alias =>
             alias
               .toString()
               .toLowerCase()
               .includes(searchValue)
           ) ||
-          (categories &&
-            categories[0] &&
-            categories[0].name.toLowerCase().includes(searchValue)) ||
-          (categories &&
-            categories[0] &&
-            categories[0].subcategory.toLowerCase().includes(searchValue)) ||
+          category.toLowerCase().includes(searchValue) ||
+          subcategory.toLowerCase().includes(searchValue) ||
           name.toLowerCase().includes(searchValue)
         );
       }
@@ -75,9 +74,7 @@ const IconLibrary = () => {
 
   const filteredIcons = getFilteredIcons();
 
-  const allCategories = Object.entries(
-    groupBy(filteredIcons, 'categories[0].name')
-  );
+  const allCategories = Object.entries(groupBy(filteredIcons, 'category'));
 
   const filteredCategories =
     selectedCategory === 'All icons'

plugins/gatsby-theme-carbon-svgs/components/PictogramLibrary/PictogramCategory.js

@@ -3,6 +3,8 @@ import React from 'react';
 import { h2 } from 'gatsby-theme-carbon/src/components/markdown/Markdown.module.scss';
 import cx from 'classnames';
 
+import useIntersectionObserver from '../shared/useIntersectionObserver';
+
 import SvgCard from '../shared/SvgCard';
 
 import {
@@ -12,20 +14,24 @@ import {
   pictograms as pictogramList,
 } from '../shared/SvgLibrary.module.scss';
 
-const IconCategory = ({ category, pictograms }) => (
-  <section className={svgCategory}>
-    <h2 className={cx(h2, categoryTitle)}>{category}</h2>
-    <ul className={cx(svgGrid, pictogramList)}>
-      {pictograms.map(pictogram => (
-        <SvgCard
-          key={pictogram.name}
-          icon={pictogram}
-          height="35%"
-          width="35%"
-        />
-      ))}
-    </ul>
-  </section>
-);
+const IconCategory = ({ category, pictograms }) => {
+  const [sectionRef, containerIsVisible] = useIntersectionObserver();
+  return (
+    <section ref={sectionRef} className={svgCategory}>
+      <h2 className={cx(h2, categoryTitle)}>{category}</h2>
+      <ul className={cx(svgGrid, pictogramList)}>
+        {pictograms.map(pictogram => (
+          <SvgCard
+            containerIsVisible={containerIsVisible}
+            key={pictogram.name}
+            icon={pictogram}
+            height="35%"
+            width="35%"
+          />
+        ))}
+      </ul>
+    </section>
+  );
+};
 
 export default IconCategory;