feat(website): update gatsby

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ['14', '16']
+        node-version: ['16']
     steps:
       - uses: actions/checkout@v2
       - name: Setup Node ${{ matrix.node-version }}

package.json

@@ -47,15 +47,15 @@
     "chalk": "^2.4.2",
     "core-js": "^3.0.1",
     "enzyme": "^3.11.0",
-    "eslint": "^7.13.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-config-react-app": "^6.0.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "gh-pages": "^1.0.0",
     "jest": "^26.0.1",
     "jsdom": "^16.2.2",

packages/recompose/src/withState.ts

@@ -5,8 +5,7 @@ import { wrapDisplayName } from './wrapDisplayName'
 
 type StateProps<TState, TStateName extends string, TStateUpdaterName extends string> = {
     [stateName in TStateName]: TState
-} &
-    { [stateUpdateName in TStateUpdaterName]: (state: TState) => TState }
+} & { [stateUpdateName in TStateUpdaterName]: (state: TState) => TState }
 
 export const withState =
     <TOuter, TState, TStateName extends string, TStateUpdaterName extends string>(

website/.babelrc

@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }]
+  ],
+  "presets": [
+    [
+      "babel-preset-gatsby",
+      {
+        "targets": {
+          "browsers": [">0.25%", "not dead"]
+        }
+      }
+    ]
+  ]
+}

website/package.json

@@ -33,28 +33,28 @@
     "@nivo/treemap": "0.74.1",
     "@nivo/voronoi": "0.74.1",
     "@nivo/waffle": "0.74.1",
-    "@types/react-helmet": "^6.1.2",
-    "@types/styled-components": "^5.1.13",
+    "@types/react-helmet": "^6.1.4",
+    "@types/styled-components": "^5.1.18",
     "babel-plugin-styled-components": "^1.13.2",
+    "babel-preset-gatsby": "^2.4.0",
     "dedent-js": "^1.0.1",
-    "gatsby": "^3.12.1",
+    "gatsby": "^4.4.0",
     "gatsby-image": "^3.11.0",
-    "gatsby-plugin-manifest": "^3.12.0",
-    "gatsby-plugin-offline": "^4.12.0",
-    "gatsby-plugin-react-helmet": "^4.12.0",
-    "gatsby-plugin-sharp": "^3.12.0",
-    "gatsby-plugin-styled-components": "^4.12.0",
-    "gatsby-source-filesystem": "^3.12.0",
-    "gatsby-transformer-sharp": "^3.12.0",
+    "gatsby-plugin-manifest": "^4.4.0",
+    "gatsby-plugin-offline": "^5.4.0",
+    "gatsby-plugin-react-helmet": "^5.4.0",
+    "gatsby-plugin-sharp": "^4.4.0",
+    "gatsby-plugin-styled-components": "^5.4.0",
+    "gatsby-source-filesystem": "^4.4.0",
+    "gatsby-transformer-sharp": "^4.4.0",
     "prism-react-renderer": "^1.2.1",
-    "prop-types": "^15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet": "^6.1.0",
-    "react-icons": "^4.2.0",
-    "react-markdown": "^7.0.1",
+    "react-icons": "^4.3.1",
+    "react-markdown": "^7.1.1",
     "react-select": "^4.3.1",
-    "styled-components": "^5.3.1",
+    "styled-components": "^5.3.3",
     "url-search-params": "^1.1.0"
   },
   "scripts": {

website/src/components/Layout.js

@@ -1,10 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Header from './Header'
 import media from '../theming/mediaQueries'
 import MiniNav from './nav/MiniNav'
 
+/*
+Layout.propTypes = {
+    children: PropTypes.node.isRequired,
+}
+*/
+
 const Layout = ({ children }) => {
     return (
         <>
@@ -17,10 +22,6 @@ const Layout = ({ children }) => {
     )
 }
 
-Layout.propTypes = {
-    children: PropTypes.node.isRequired,
-}
-
 export default Layout
 
 const Content = styled.div`

website/src/components/components/ComponentFlavorSelector.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Link } from 'gatsby'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import media from '../../theming/mediaQueries'
 
@@ -87,6 +86,18 @@ const labelByFlavor = {
     api: 'http api',
 }
 
+/*
+ComponentFlavorSelector.propTypes = {
+    flavors: PropTypes.arrayOf(
+        PropTypes.shape({
+            flavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']),
+            path: PropTypes.string.isRequired,
+        })
+    ).isRequired,
+    current: PropTypes.string.isRequired,
+}
+*/
+
 const ComponentFlavorSelector = ({ flavors, current }) => {
     return (
         <Container>
@@ -105,14 +116,4 @@ const ComponentFlavorSelector = ({ flavors, current }) => {
     )
 }
 
-ComponentFlavorSelector.propTypes = {
-    flavors: PropTypes.arrayOf(
-        PropTypes.shape({
-            flavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']),
-            path: PropTypes.string.isRequired,
-        })
-    ).isRequired,
-    current: PropTypes.string.isRequired,
-}
-
 export default ComponentFlavorSelector

website/src/components/components/ComponentSettings.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import ControlsGroup from '../controls/ControlsGroup'
 import media from '../../theming/mediaQueries'
@@ -45,6 +44,17 @@ const Title = styled.div`
     `}
 `
 
+/*
+ComponentSettings.propTypes = {
+    component: PropTypes.string.isRequired,
+    flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
+    currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
+    settings: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    groups: PropTypes.array.isRequired,
+}
+*/
+
 const ComponentSettings = ({ component, flavors, currentFlavor, settings, onChange, groups }) => {
     return (
         <Container>
@@ -68,13 +78,4 @@ const ComponentSettings = ({ component, flavors, currentFlavor, settings, onChan
     )
 }
 
-ComponentSettings.propTypes = {
-    component: PropTypes.string.isRequired,
-    flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
-    currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
-    settings: PropTypes.object.isRequired,
-    onChange: PropTypes.func.isRequired,
-    groups: PropTypes.array.isRequired,
-}
-
 export default ComponentSettings

website/src/components/controls/ArrayControl.js → website/src/components/controls/ArrayControl.tsx

@@ -1,11 +1,29 @@
 import React, { memo, Fragment, useMemo, useState, useCallback } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { PropertyHeader } from './PropertyHeader'
 import ControlsGroup from './ControlsGroup'
 import { Cell, Toggle } from './styled'
 import { Help } from './Help'
 
+interface ArrayControlProps {
+    /*
+    property: PropTypes.object.isRequired,
+    value: PropTypes.array.isRequired,
+    flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
+    currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
+    options: PropTypes.shape({
+        props: PropTypes.array.isRequired,
+        shouldCreate: PropTypes.bool,
+        addLabel: PropTypes.string,
+        shouldRemove: PropTypes.bool,
+        removeLabel: PropTypes.string,
+        defaults: PropTypes.object,
+        getItemTitle: PropTypes.func,
+    }).isRequired,
+    onChange: PropTypes.func.isRequired,
+    */
+}
+
 const ArrayControl = memo(
     ({
         property,
@@ -110,24 +128,6 @@ const ArrayControl = memo(
     }
 )
 
-ArrayControl.displayName = 'ArrayControl'
-ArrayControl.propTypes = {
-    property: PropTypes.object.isRequired,
-    value: PropTypes.array.isRequired,
-    flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
-    currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
-    options: PropTypes.shape({
-        props: PropTypes.array.isRequired,
-        shouldCreate: PropTypes.bool,
-        addLabel: PropTypes.string,
-        shouldRemove: PropTypes.bool,
-        removeLabel: PropTypes.string,
-        defaults: PropTypes.object,
-        getItemTitle: PropTypes.func,
-    }).isRequired,
-    onChange: PropTypes.func.isRequired,
-}
-
 export default ArrayControl
 
 const Header = styled(Cell)`

website/src/components/controls/InheritedColorControl.js → website/src/components/controls/InheritedColorControl.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useCallback } from 'react'
 import isString from 'lodash/isString'
 import isPlainObject from 'lodash/isPlainObject'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { inheritedColorPropType } from '@nivo/colors'
 import { Control } from './Control'
@@ -17,15 +16,31 @@ const themeProperties = ['background', 'grid.line.stroke', 'labels.text.fill'].m
 
 const defaultInheritableProperties = ['color']
 
+interface InheritedColorControlProps {
+    /*
+    property: PropTypes.object.isRequired,
+    flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
+    currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
+    onChange: PropTypes.func.isRequired,
+    defaultCustomColor: PropTypes.string.isRequired,
+    defaultThemeProperty: PropTypes.string.isRequired,
+    defaultFrom: PropTypes.string.isRequired,
+    value: inheritedColorPropType.isRequired,
+    options: PropTypes.shape({
+        inheritableProperties: PropTypes.arrayOf(PropTypes.string),
+    }),
+    */
+}
+
 const InheritedColorControl = ({
     id,
     property,
     flavors,
     currentFlavor,
     value,
-    defaultCustomColor,
-    defaultThemeProperty,
-    defaultFrom,
+    defaultCustomColor = 'black',
+    defaultThemeProperty = 'background',
+    defaultFrom = 'color',
     onChange,
     options: { inheritableProperties = defaultInheritableProperties } = {},
 }) => {
@@ -172,25 +187,6 @@ const InheritedColorControl = ({
     )
 }
 
-InheritedColorControl.propTypes = {
-    property: PropTypes.object.isRequired,
-    flavors: PropTypes.arrayOf(PropTypes.oneOf(['svg', 'html', 'canvas', 'api'])).isRequired,
-    currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
-    onChange: PropTypes.func.isRequired,
-    defaultCustomColor: PropTypes.string.isRequired,
-    defaultThemeProperty: PropTypes.string.isRequired,
-    defaultFrom: PropTypes.string.isRequired,
-    value: inheritedColorPropType.isRequired,
-    options: PropTypes.shape({
-        inheritableProperties: PropTypes.arrayOf(PropTypes.string),
-    }),
-}
-InheritedColorControl.defaultProps = {
-    defaultCustomColor: 'black',
-    defaultThemeProperty: 'background',
-    defaultFrom: 'color',
-}
-
 export default InheritedColorControl
 
 const TypeSelector = styled.div`

website/src/components/controls/InheritedColorModifierControl.js → website/src/components/controls/InheritedColorModifierControl.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Select from './Select'
 import { TextInput } from './TextInput'
@@ -9,6 +8,13 @@ const modifierTypes = ['brighter', 'darker', 'opacity'].map(prop => ({
     value: prop,
 }))
 
+interface InheritedColorModifierControlProps {
+    /*
+    modifier: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+    */
+}
+
 const InheritedColorModifierControl = ({ modifier, onChange }) => {
     return (
         <Container>
@@ -34,11 +40,6 @@ const InheritedColorModifierControl = ({ modifier, onChange }) => {
     )
 }
 
-InheritedColorModifierControl.propTypes = {
-    modifier: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-}
-
 export default InheritedColorModifierControl
 
 const Container = styled.div`