diff --git a/.eslintrc.js b/.eslintrc.js index e64f6c4cf2..0750ea6f4d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,3 +1,5 @@ +process.env.ENABLE_NEW_JSX_TRANSFORM = 'true'; + const path = require('path'); module.exports = { diff --git a/packages/gatsby-theme-api-docs/src/components/description.js b/packages/gatsby-theme-api-docs/src/components/description.js index d78af13bbc..5f4960bfa4 100644 --- a/packages/gatsby-theme-api-docs/src/components/description.js +++ b/packages/gatsby-theme-api-docs/src/components/description.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { diff --git a/packages/gatsby-theme-api-docs/src/components/resource-method.js b/packages/gatsby-theme-api-docs/src/components/resource-method.js index 61c6d01e17..31bb2875bd 100644 --- a/packages/gatsby-theme-api-docs/src/components/resource-method.js +++ b/packages/gatsby-theme-api-docs/src/components/resource-method.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { useReadResourceByResourcePath } from '../hooks/use-read-resource-by-resource-path'; import reportError from '../utils/report-error'; diff --git a/packages/gatsby-theme-api-docs/src/components/resource/method/request-representation.js b/packages/gatsby-theme-api-docs/src/components/resource/method/request-representation.js index b83522ae17..fe4bbfcfec 100644 --- a/packages/gatsby-theme-api-docs/src/components/resource/method/request-representation.js +++ b/packages/gatsby-theme-api-docs/src/components/resource/method/request-representation.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; import { diff --git a/packages/gatsby-theme-api-docs/src/components/resource/method/request-response-examples.js b/packages/gatsby-theme-api-docs/src/components/resource/method/request-response-examples.js index 8a4b53cb99..1e6062c176 100644 --- a/packages/gatsby-theme-api-docs/src/components/resource/method/request-response-examples.js +++ b/packages/gatsby-theme-api-docs/src/components/resource/method/request-response-examples.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; import { MultiCodeBlock, CodeBlock } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-api-docs/src/components/resource/method/responses.js b/packages/gatsby-theme-api-docs/src/components/resource/method/responses.js index 59a42b0e18..98c67fc4b3 100644 --- a/packages/gatsby-theme-api-docs/src/components/resource/method/responses.js +++ b/packages/gatsby-theme-api-docs/src/components/resource/method/responses.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; diff --git a/packages/gatsby-theme-api-docs/src/components/resource/method/scopes.js b/packages/gatsby-theme-api-docs/src/components/resource/method/scopes.js index 40307f2b8b..8966ea65ea 100644 --- a/packages/gatsby-theme-api-docs/src/components/resource/method/scopes.js +++ b/packages/gatsby-theme-api-docs/src/components/resource/method/scopes.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { designSystem } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-api-docs/src/components/resource/method/url.js b/packages/gatsby-theme-api-docs/src/components/resource/method/url.js index 3e9c0ab882..788953897a 100644 --- a/packages/gatsby-theme-api-docs/src/components/resource/method/url.js +++ b/packages/gatsby-theme-api-docs/src/components/resource/method/url.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; diff --git a/packages/gatsby-theme-api-docs/src/components/resource/resource-by-api-key.js b/packages/gatsby-theme-api-docs/src/components/resource/resource-by-api-key.js index 0808821165..01bde21fb7 100644 --- a/packages/gatsby-theme-api-docs/src/components/resource/resource-by-api-key.js +++ b/packages/gatsby-theme-api-docs/src/components/resource/resource-by-api-key.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { useReadResourceByResourcePath } from '../../hooks/use-read-resource-by-resource-path'; import Resource from './resource'; diff --git a/packages/gatsby-theme-api-docs/src/components/resource/resource.js b/packages/gatsby-theme-api-docs/src/components/resource/resource.js index a1b763c9b1..1f99925ff9 100644 --- a/packages/gatsby-theme-api-docs/src/components/resource/resource.js +++ b/packages/gatsby-theme-api-docs/src/components/resource/resource.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; import { FullWidthContainer } from '@commercetools-docs/gatsby-theme-docs'; diff --git a/packages/gatsby-theme-api-docs/src/components/type/enum.js b/packages/gatsby-theme-api-docs/src/components/type/enum.js index 434e0b8e6c..acb080bc9d 100644 --- a/packages/gatsby-theme-api-docs/src/components/type/enum.js +++ b/packages/gatsby-theme-api-docs/src/components/type/enum.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Markdown } from '@commercetools-docs/ui-kit'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; @@ -31,7 +31,7 @@ const Enum = ({ enumDescriptions.find((enumDesc) => enumDesc.name === value); return ( - + {value} @@ -42,7 +42,7 @@ const Enum = ({ /> )} - + ); })} {' '} diff --git a/packages/gatsby-theme-api-docs/src/components/type/examples.js b/packages/gatsby-theme-api-docs/src/components/type/examples.js index f1eea5f47f..5a52819d45 100644 --- a/packages/gatsby-theme-api-docs/src/components/type/examples.js +++ b/packages/gatsby-theme-api-docs/src/components/type/examples.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; import { MultiCodeBlock, CodeBlock } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-api-docs/src/components/type/properties/properties.js b/packages/gatsby-theme-api-docs/src/components/type/properties/properties.js index d53bb67c64..ecde849402 100644 --- a/packages/gatsby-theme-api-docs/src/components/type/properties/properties.js +++ b/packages/gatsby-theme-api-docs/src/components/type/properties/properties.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import Table from '../../table'; import Rows from './rows/rows'; diff --git a/packages/gatsby-theme-api-docs/src/components/type/properties/regex-properties.js b/packages/gatsby-theme-api-docs/src/components/type/properties/regex-properties.js index acb7f8f723..a5ebd76e45 100644 --- a/packages/gatsby-theme-api-docs/src/components/type/properties/regex-properties.js +++ b/packages/gatsby-theme-api-docs/src/components/type/properties/regex-properties.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import { Markdown, designSystem } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-api-docs/src/components/type/properties/rows/description.js b/packages/gatsby-theme-api-docs/src/components/type/properties/rows/description.js index ed3120cde1..dab98abcb4 100644 --- a/packages/gatsby-theme-api-docs/src/components/type/properties/rows/description.js +++ b/packages/gatsby-theme-api-docs/src/components/type/properties/rows/description.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { Fragment } from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import { Markdown, useISO310NumberFormatter } from '@commercetools-docs/ui-kit'; @@ -142,7 +142,7 @@ const Description = (props) => { Can be{' '} {props.property.enumeration.map((currentEnum, index) => { return index === props.property.enumeration.length - 1 ? ( - + or{' '} {generateAppropriatePrimitiveText( @@ -150,9 +150,9 @@ const Description = (props) => { currentEnum )} - + ) : ( - + {generateAppropriatePrimitiveText( props.property.type, @@ -160,7 +160,7 @@ const Description = (props) => { )} ,{' '} - + ); })} {'\u200B' /* zero-width space for the search crawler */} diff --git a/packages/gatsby-theme-api-docs/src/components/type/properties/rows/rows.js b/packages/gatsby-theme-api-docs/src/components/type/properties/rows/rows.js index 573c9e4243..6d7521c971 100644 --- a/packages/gatsby-theme-api-docs/src/components/type/properties/rows/rows.js +++ b/packages/gatsby-theme-api-docs/src/components/type/properties/rows/rows.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import NameType from './name-type'; import Description from './description'; diff --git a/packages/gatsby-theme-api-docs/src/components/type/type-by-api-key.js b/packages/gatsby-theme-api-docs/src/components/type/type-by-api-key.js index 6577ff15b6..13d97f501f 100644 --- a/packages/gatsby-theme-api-docs/src/components/type/type-by-api-key.js +++ b/packages/gatsby-theme-api-docs/src/components/type/type-by-api-key.js @@ -1,4 +1,3 @@ -import React from 'react'; import ApiType from './type'; import { useApiTypes } from '../../hooks/use-api-types'; diff --git a/packages/gatsby-theme-api-docs/src/components/type/type.js b/packages/gatsby-theme-api-docs/src/components/type/type.js index ecd1fc1730..367410582f 100644 --- a/packages/gatsby-theme-api-docs/src/components/type/type.js +++ b/packages/gatsby-theme-api-docs/src/components/type/type.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { FullWidthContainer, diff --git a/packages/gatsby-theme-api-docs/src/utils/render-type-as-link.js b/packages/gatsby-theme-api-docs/src/utils/render-type-as-link.js index 112ceecd78..da6a7a5fe7 100644 --- a/packages/gatsby-theme-api-docs/src/utils/render-type-as-link.js +++ b/packages/gatsby-theme-api-docs/src/utils/render-type-as-link.js @@ -1,4 +1,3 @@ -import React from 'react'; import { Link } from '@commercetools-docs/gatsby-theme-docs'; import { locationForType } from '../hooks/use-type-locations'; diff --git a/packages/gatsby-theme-api-docs/src/utils/report-error.js b/packages/gatsby-theme-api-docs/src/utils/report-error.js index 4965538410..f3d5b173d4 100644 --- a/packages/gatsby-theme-api-docs/src/utils/report-error.js +++ b/packages/gatsby-theme-api-docs/src/utils/report-error.js @@ -1,4 +1,3 @@ -import React from 'react'; import { ContentNotifications } from '@commercetools-docs/ui-kit'; function reportError(errorMsg) { diff --git a/packages/gatsby-theme-code-examples/src/code-example.js b/packages/gatsby-theme-code-examples/src/code-example.js index 0f30b66fa4..daaaabc31f 100644 --- a/packages/gatsby-theme-code-examples/src/code-example.js +++ b/packages/gatsby-theme-code-examples/src/code-example.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { MultiCodeBlock, diff --git a/packages/gatsby-theme-code-examples/src/multi-code-example.js b/packages/gatsby-theme-code-examples/src/multi-code-example.js index 9f61ecb18d..e722c7ef71 100644 --- a/packages/gatsby-theme-code-examples/src/multi-code-example.js +++ b/packages/gatsby-theme-code-examples/src/multi-code-example.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { Children } from 'react'; import PropTypes from 'prop-types'; import { ContentNotifications, @@ -13,7 +13,7 @@ function MultiCodeExample(props) { try { return ( - {React.Children.map(props.children, (child, index) => { + {Children.map(props.children, (child, index) => { if (!child.props || child.props.mdxType !== 'CodeExample') { throw new Error( `Children of must be a component and not "${ diff --git a/packages/gatsby-theme-constants/src/constant.js b/packages/gatsby-theme-constants/src/constant.js index 851cb5a520..b439fcafc1 100644 --- a/packages/gatsby-theme-constants/src/constant.js +++ b/packages/gatsby-theme-constants/src/constant.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { ContentNotifications, diff --git a/packages/gatsby-theme-docs/gatsby-browser.js b/packages/gatsby-theme-docs/gatsby-browser.js index b470f36106..d508719ee5 100644 --- a/packages/gatsby-theme-docs/gatsby-browser.js +++ b/packages/gatsby-theme-docs/gatsby-browser.js @@ -11,7 +11,7 @@ import '@fontsource/roboto/latin-700.css'; import '@fontsource/roboto-mono/latin-400.css'; import '@fontsource/roboto-mono/latin-500.css'; import '@fontsource/roboto-mono/latin-700.css'; -import React from 'react'; + import Prism from 'prism-react-renderer/prism'; import { CacheProvider } from '@emotion/react'; import { docsCache } from './utils/create-emotion-cache'; diff --git a/packages/gatsby-theme-docs/gatsby-ssr.js b/packages/gatsby-theme-docs/gatsby-ssr.js index bcf5257833..4ee6be9ee5 100644 --- a/packages/gatsby-theme-docs/gatsby-ssr.js +++ b/packages/gatsby-theme-docs/gatsby-ssr.js @@ -3,7 +3,7 @@ * * See: https://www.gatsbyjs.org/docs/ssr-apis/ */ -import React from 'react'; + import { renderToString } from 'react-dom/server'; import { withPrefix } from 'gatsby'; import { createContentDigest } from 'gatsby-core-utils'; diff --git a/packages/gatsby-theme-docs/src/components/algolia-search.js b/packages/gatsby-theme-docs/src/components/algolia-search.js index ee14437b27..046e0a3f66 100644 --- a/packages/gatsby-theme-docs/src/components/algolia-search.js +++ b/packages/gatsby-theme-docs/src/components/algolia-search.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { forwardRef, useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { css, Global } from '@emotion/react'; import { designSystem } from '@commercetools-docs/ui-kit'; @@ -223,12 +223,11 @@ const algoliaStyles = css` } `; -const AlgoliaSearch = React.forwardRef((props, ref) => { - const [isSearchEnabled, setIsSearchEnabled] = React.useState(true); - const [hasErrorLoadingAlgolia, setHasErrorLoadingAlgolia] = - React.useState(false); +const AlgoliaSearch = forwardRef((props, ref) => { + const [isSearchEnabled, setIsSearchEnabled] = useState(true); + const [hasErrorLoadingAlgolia, setHasErrorLoadingAlgolia] = useState(false); - React.useEffect(() => { + useEffect(() => { // https://github.com/algolia/docsearch/issues/352 const isClient = typeof window !== 'undefined'; if (isClient) { diff --git a/packages/gatsby-theme-docs/src/components/anchor.js b/packages/gatsby-theme-docs/src/components/anchor.js index d21afdbe5f..1c91b29825 100644 --- a/packages/gatsby-theme-docs/src/components/anchor.js +++ b/packages/gatsby-theme-docs/src/components/anchor.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; /** diff --git a/packages/gatsby-theme-docs/src/components/beta-flag.js b/packages/gatsby-theme-docs/src/components/beta-flag.js index e704172b73..290823bda9 100644 --- a/packages/gatsby-theme-docs/src/components/beta-flag.js +++ b/packages/gatsby-theme-docs/src/components/beta-flag.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import { designSystem } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-docs/src/components/burger-icon.js b/packages/gatsby-theme-docs/src/components/burger-icon.js index 129f3ceea0..fa94637716 100644 --- a/packages/gatsby-theme-docs/src/components/burger-icon.js +++ b/packages/gatsby-theme-docs/src/components/burger-icon.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; const svgPaths = { diff --git a/packages/gatsby-theme-docs/src/components/card.js b/packages/gatsby-theme-docs/src/components/card.js index d740010188..6b92e50f8f 100644 --- a/packages/gatsby-theme-docs/src/components/card.js +++ b/packages/gatsby-theme-docs/src/components/card.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { diff --git a/packages/gatsby-theme-docs/src/components/cards.js b/packages/gatsby-theme-docs/src/components/cards.js index bab9ef2a58..db65d9ee50 100644 --- a/packages/gatsby-theme-docs/src/components/cards.js +++ b/packages/gatsby-theme-docs/src/components/cards.js @@ -1,14 +1,13 @@ -import React from 'react'; +import { Children, cloneElement, isValidElement } from 'react'; import PropTypes from 'prop-types'; -import styled from '@emotion/styled'; import { ContentNotifications, cardElements } from '@commercetools-docs/ui-kit'; const Cards = (props) => { try { return ( - {React.Children.map(props.children, (child) => { - if (!React.isValidElement(child)) { + {Children.map(props.children, (child) => { + if (!isValidElement(child)) { throwErrorMessage(child); } else if ( child.type.displayName === 'MDXCreateElement' && @@ -18,7 +17,7 @@ const Cards = (props) => { throwErrorMessage(child.props.mdxType); } - return React.cloneElement( + return cloneElement( child, { clickable: props.clickable, diff --git a/packages/gatsby-theme-docs/src/components/child-sections-nav.js b/packages/gatsby-theme-docs/src/components/child-sections-nav.js index d9c2b2b6ec..c4058b926f 100644 --- a/packages/gatsby-theme-docs/src/components/child-sections-nav.js +++ b/packages/gatsby-theme-docs/src/components/child-sections-nav.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { diff --git a/packages/gatsby-theme-docs/src/components/content-pagination.js b/packages/gatsby-theme-docs/src/components/content-pagination.js index 2f458ce13a..30e4908402 100644 --- a/packages/gatsby-theme-docs/src/components/content-pagination.js +++ b/packages/gatsby-theme-docs/src/components/content-pagination.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { useStaticQuery, graphql, Link } from 'gatsby'; import styled from '@emotion/styled'; diff --git a/packages/gatsby-theme-docs/src/components/content-pagination.spec.js b/packages/gatsby-theme-docs/src/components/content-pagination.spec.js index 36a6db1fa9..460d035ebd 100644 --- a/packages/gatsby-theme-docs/src/components/content-pagination.spec.js +++ b/packages/gatsby-theme-docs/src/components/content-pagination.spec.js @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import { PurePagination } from './content-pagination'; diff --git a/packages/gatsby-theme-docs/src/components/error-boundary.js b/packages/gatsby-theme-docs/src/components/error-boundary.js index ec18495a43..0394e10620 100644 --- a/packages/gatsby-theme-docs/src/components/error-boundary.js +++ b/packages/gatsby-theme-docs/src/components/error-boundary.js @@ -1,8 +1,9 @@ /* eslint-disable react/prop-types,class-methods-use-this */ -import React from 'react'; + +import { Component } from 'react'; import reportErrorToSentry from '../utils/report-error-to-sentry'; -class ErrorBoundary extends React.Component { +class ErrorBoundary extends Component { static getDerivedStateFromError(/* error */) { // Update state so the next render will show the fallback UI. return { hasError: true }; diff --git a/packages/gatsby-theme-docs/src/components/global-navigation-link.js b/packages/gatsby-theme-docs/src/components/global-navigation-link.js index c769b25273..427fd8cca8 100644 --- a/packages/gatsby-theme-docs/src/components/global-navigation-link.js +++ b/packages/gatsby-theme-docs/src/components/global-navigation-link.js @@ -1,4 +1,3 @@ -import React from 'react'; import { css } from '@emotion/react'; import { designSystem } from '@commercetools-docs/ui-kit'; import Link from './link'; diff --git a/packages/gatsby-theme-docs/src/components/global-notification.js b/packages/gatsby-theme-docs/src/components/global-notification.js index 1626fc4b57..93f1c44ac2 100644 --- a/packages/gatsby-theme-docs/src/components/global-notification.js +++ b/packages/gatsby-theme-docs/src/components/global-notification.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import SpacingsInline from '@commercetools-uikit/spacings-inline'; diff --git a/packages/gatsby-theme-docs/src/components/link.js b/packages/gatsby-theme-docs/src/components/link.js index 69004ae8aa..eaaa3f02dd 100644 --- a/packages/gatsby-theme-docs/src/components/link.js +++ b/packages/gatsby-theme-docs/src/components/link.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { cloneElement, isValidElement } from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import { Location } from '@reach/router'; @@ -136,11 +136,11 @@ const PureLink = (extendedProps) => { hrefObject.host ) ) { - const linkWithIcon = React.isValidElement(props.children) ? ( + const linkWithIcon = isValidElement(props.children) ? ( // In case the children are a React element (e.g. ) we need to inject // the external link icon next to the actual text. // For this we assume that the React element's own child is plain text. - React.cloneElement(props.children, { + cloneElement(props.children, { children: ( diff --git a/packages/gatsby-theme-docs/src/components/link.spec.js b/packages/gatsby-theme-docs/src/components/link.spec.js index 1e5c44041e..0bf2345425 100644 --- a/packages/gatsby-theme-docs/src/components/link.spec.js +++ b/packages/gatsby-theme-docs/src/components/link.spec.js @@ -1,4 +1,3 @@ -import React from 'react'; import { render } from '@testing-library/react'; import { createMemorySource, diff --git a/packages/gatsby-theme-docs/src/components/release-note-heading.js b/packages/gatsby-theme-docs/src/components/release-note-heading.js index de5bfc563b..087d709e6c 100644 --- a/packages/gatsby-theme-docs/src/components/release-note-heading.js +++ b/packages/gatsby-theme-docs/src/components/release-note-heading.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { designSystem } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-docs/src/components/release-notes-filter-dates.js b/packages/gatsby-theme-docs/src/components/release-notes-filter-dates.js index 8674fa0c94..599bbc360f 100644 --- a/packages/gatsby-theme-docs/src/components/release-notes-filter-dates.js +++ b/packages/gatsby-theme-docs/src/components/release-notes-filter-dates.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { designSystem, IsoDateFormat } from '@commercetools-docs/ui-kit'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; diff --git a/packages/gatsby-theme-docs/src/components/release-notes-filter-topics.js b/packages/gatsby-theme-docs/src/components/release-notes-filter-topics.js index 68b3bff1cf..785d3392ee 100644 --- a/packages/gatsby-theme-docs/src/components/release-notes-filter-topics.js +++ b/packages/gatsby-theme-docs/src/components/release-notes-filter-topics.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; import SpacingsInline from '@commercetools-uikit/spacings-inline'; diff --git a/packages/gatsby-theme-docs/src/components/release-notes-subscribe-links.js b/packages/gatsby-theme-docs/src/components/release-notes-subscribe-links.js index 3ba7ab272f..e4777cbfd4 100644 --- a/packages/gatsby-theme-docs/src/components/release-notes-subscribe-links.js +++ b/packages/gatsby-theme-docs/src/components/release-notes-subscribe-links.js @@ -1,4 +1,3 @@ -import React from 'react'; import { withPrefix } from 'gatsby'; import { css } from '@emotion/react'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; diff --git a/packages/gatsby-theme-docs/src/components/search-dialog.js b/packages/gatsby-theme-docs/src/components/search-dialog.js index 787d5da680..a9735dcb48 100644 --- a/packages/gatsby-theme-docs/src/components/search-dialog.js +++ b/packages/gatsby-theme-docs/src/components/search-dialog.js @@ -1,11 +1,11 @@ -import React from 'react'; +import { lazy, Suspense, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css, keyframes } from '@emotion/react'; import { designSystem } from '@commercetools-docs/ui-kit'; import SearchInput from './search-input'; -const AlgoliaSearch = React.lazy(() => import('./algolia-search')); +const AlgoliaSearch = lazy(() => import('./algolia-search')); const searchInputId = 'search-bar'; @@ -122,9 +122,9 @@ const InputPlaceholder = () => ( ); const SearchDialog = (props) => { - const ref = React.useRef(); + const ref = useRef(); const { onClose } = props; - React.useEffect(() => { + useEffect(() => { const onKeyPress = (event) => { // Listen to "escape" key events to close the dialog if (event.key.toLowerCase() === 'escape') { @@ -148,7 +148,7 @@ const SearchDialog = (props) => { event.stopPropagation(); }} > - }> + }> { onClose={props.onClose} /> - + diff --git a/packages/gatsby-theme-docs/src/components/search-dialog.spec.js b/packages/gatsby-theme-docs/src/components/search-dialog.spec.js index bf9c1e4286..c2810bf459 100644 --- a/packages/gatsby-theme-docs/src/components/search-dialog.spec.js +++ b/packages/gatsby-theme-docs/src/components/search-dialog.spec.js @@ -1,4 +1,3 @@ -import React from 'react'; import { render, waitFor, fireEvent } from '@testing-library/react'; import SearchDialog from './search-dialog'; diff --git a/packages/gatsby-theme-docs/src/components/search-input.js b/packages/gatsby-theme-docs/src/components/search-input.js index 273244444d..4f183cea17 100644 --- a/packages/gatsby-theme-docs/src/components/search-input.js +++ b/packages/gatsby-theme-docs/src/components/search-input.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { forwardRef, useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button'; @@ -67,10 +67,10 @@ const SearchInputIcon = styled.span` ${(props) => `${props.position}: ${designSystem.dimensions.spacings.xs};`} `; -const SearchInput = React.forwardRef((props, ref) => { +const SearchInput = forwardRef((props, ref) => { const { onFocus } = props; - const [isActive, setIsActive] = React.useState(false); - const [isLoading, setIsLoading] = React.useState(true); + const [isActive, setIsActive] = useState(false); + const [isLoading, setIsLoading] = useState(true); const handleFocus = (event) => { if (props.isDisabled) return; @@ -82,7 +82,7 @@ const SearchInput = React.forwardRef((props, ref) => { setIsActive(false); props.onClose(); }; - React.useEffect(() => { + useEffect(() => { if (isLoading) { setIsLoading(false); } diff --git a/packages/gatsby-theme-docs/src/components/seo.js b/packages/gatsby-theme-docs/src/components/seo.js index fefc554377..9bcf379f7b 100644 --- a/packages/gatsby-theme-docs/src/components/seo.js +++ b/packages/gatsby-theme-docs/src/components/seo.js @@ -5,7 +5,6 @@ * See: https://www.gatsbyjs.org/docs/use-static-query/ */ -import React from 'react'; import PropTypes from 'prop-types'; import { Helmet } from 'react-helmet'; import { useSiteData } from '../hooks/use-site-data'; diff --git a/packages/gatsby-theme-docs/src/components/side-by-side.js b/packages/gatsby-theme-docs/src/components/side-by-side.js index 03639f974a..9e7d3d6f8a 100644 --- a/packages/gatsby-theme-docs/src/components/side-by-side.js +++ b/packages/gatsby-theme-docs/src/components/side-by-side.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; diff --git a/packages/gatsby-theme-docs/src/components/theme-provider.js b/packages/gatsby-theme-docs/src/components/theme-provider.js index aeacf90af6..b404bf97f3 100644 --- a/packages/gatsby-theme-docs/src/components/theme-provider.js +++ b/packages/gatsby-theme-docs/src/components/theme-provider.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { useStaticQuery, graphql } from 'gatsby'; import { Reset, Globals } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-docs/src/components/top-menu.js b/packages/gatsby-theme-docs/src/components/top-menu.js index e42f34dc79..fc86362267 100644 --- a/packages/gatsby-theme-docs/src/components/top-menu.js +++ b/packages/gatsby-theme-docs/src/components/top-menu.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { Children } from 'react'; import PropTypes from 'prop-types'; import { useStaticQuery, graphql } from 'gatsby'; import styled from '@emotion/styled'; @@ -118,7 +118,7 @@ const Columns = styled.div` grid-gap: ${designSystem.dimensions.spacings.xl}; grid-auto-columns: 1fr; grid-template-columns: repeat( - ${(props) => React.Children.count(props.children)}, + ${(props) => Children.count(props.children)}, 1fr ); diff --git a/packages/gatsby-theme-docs/src/components/user-research-banner.js b/packages/gatsby-theme-docs/src/components/user-research-banner.js index e42d3a00d5..bd5b60ee9b 100644 --- a/packages/gatsby-theme-docs/src/components/user-research-banner.js +++ b/packages/gatsby-theme-docs/src/components/user-research-banner.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; import { designSystem, Icons } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-docs/src/hooks/use-active-section.js b/packages/gatsby-theme-docs/src/hooks/use-active-section.js index f19322be41..96affc86de 100644 --- a/packages/gatsby-theme-docs/src/hooks/use-active-section.js +++ b/packages/gatsby-theme-docs/src/hooks/use-active-section.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { useCallback, useState } from 'react'; import { designSystem } from '@commercetools-docs/ui-kit'; import useScrollSpy from './use-scroll-spy'; @@ -16,8 +16,8 @@ const getSectionElements = () => const offset = calculateOffset(); const useActiveSelection = () => { - const [activeSection, setActiveSection] = React.useState(); - const onScroll = React.useCallback(() => { + const [activeSection, setActiveSection] = useState(); + const onScroll = useCallback(() => { const sectionElements = getSectionElements(); let nextActiveSection; sectionElements.forEach((section) => { diff --git a/packages/gatsby-theme-docs/src/hooks/use-layout-state.js b/packages/gatsby-theme-docs/src/hooks/use-layout-state.js index 37c36ac237..bef982449c 100644 --- a/packages/gatsby-theme-docs/src/hooks/use-layout-state.js +++ b/packages/gatsby-theme-docs/src/hooks/use-layout-state.js @@ -1,32 +1,32 @@ -import React from 'react'; +import { useCallback, useState } from 'react'; const useLayoutState = () => { // State for the sidebar menu - const [isSidebarMenuOpen, setSidebarMenuOpen] = React.useState(false); - const toggleSidebarMenu = React.useCallback(() => { + const [isSidebarMenuOpen, setSidebarMenuOpen] = useState(false); + const toggleSidebarMenu = useCallback(() => { setSidebarMenuOpen((prev) => !prev); }, [setSidebarMenuOpen]); - const closeSidebarMenu = React.useCallback(() => { + const closeSidebarMenu = useCallback(() => { setSidebarMenuOpen(false); }, [setSidebarMenuOpen]); // State for the top menu - const [isTopMenuOpen, setIsTopMenuOpen] = React.useState(false); - const toggleTopMenu = React.useCallback(() => { + const [isTopMenuOpen, setIsTopMenuOpen] = useState(false); + const toggleTopMenu = useCallback(() => { setIsTopMenuOpen((prev) => !prev); }, [setIsTopMenuOpen]); - const closeTopMenu = React.useCallback(() => { + const closeTopMenu = useCallback(() => { setIsTopMenuOpen(false); }, [setIsTopMenuOpen]); // State for the search dialog - const [isSearchDialogOpen, setIsSearchDialogOpen] = React.useState(false); - const openSearchDialog = React.useCallback(() => { + const [isSearchDialogOpen, setIsSearchDialogOpen] = useState(false); + const openSearchDialog = useCallback(() => { setIsSearchDialogOpen(true); // Additionally make sure to close the top menu closeTopMenu(); }, [setIsSearchDialogOpen, closeTopMenu]); - const closeSearchDialog = React.useCallback(() => { + const closeSearchDialog = useCallback(() => { setIsSearchDialogOpen(false); }, [setIsSearchDialogOpen]); diff --git a/packages/gatsby-theme-docs/src/hooks/use-page-data.js b/packages/gatsby-theme-docs/src/hooks/use-page-data.js index 3a26bcd11b..5ff6cf45b8 100644 --- a/packages/gatsby-theme-docs/src/hooks/use-page-data.js +++ b/packages/gatsby-theme-docs/src/hooks/use-page-data.js @@ -1,6 +1,5 @@ -/* eslint-disable react/prop-types */ -import React from 'react'; +import { createContext, useContext } from 'react'; -export const PageDataContext = React.createContext({}); +export const PageDataContext = createContext({}); -export const usePageData = () => React.useContext(PageDataContext); +export const usePageData = () => useContext(PageDataContext); diff --git a/packages/gatsby-theme-docs/src/hooks/use-page-toc.js b/packages/gatsby-theme-docs/src/hooks/use-page-toc.js index 3878eace36..e90f345073 100644 --- a/packages/gatsby-theme-docs/src/hooks/use-page-toc.js +++ b/packages/gatsby-theme-docs/src/hooks/use-page-toc.js @@ -1,6 +1,5 @@ -/* eslint-disable react/prop-types */ -import React from 'react'; +import { createContext, useContext } from 'react'; -export const PageTocContext = React.createContext({}); +export const PageTocContext = createContext({}); -export const usePageToc = () => React.useContext(PageTocContext); +export const usePageToc = () => useContext(PageTocContext); diff --git a/packages/gatsby-theme-docs/src/hooks/use-release-notes-filter-params.js b/packages/gatsby-theme-docs/src/hooks/use-release-notes-filter-params.js index 837a01e1c7..abae1f06c7 100644 --- a/packages/gatsby-theme-docs/src/hooks/use-release-notes-filter-params.js +++ b/packages/gatsby-theme-docs/src/hooks/use-release-notes-filter-params.js @@ -1,11 +1,11 @@ -import React from 'react'; +import { useCallback } from 'react'; import { useLocation, navigate } from '@reach/router'; import { encode, decode } from 'qss'; const useReleaseNotesFilterParams = () => { const location = useLocation(); - const setFilterParams = React.useCallback( + const setFilterParams = useCallback( (params) => { const currentQueryParams = decode(location.search.substring(1)); const newQueryString = encode({ diff --git a/packages/gatsby-theme-docs/src/hooks/use-scroll-position.js b/packages/gatsby-theme-docs/src/hooks/use-scroll-position.js index 8b3e7166a4..9305c5f325 100644 --- a/packages/gatsby-theme-docs/src/hooks/use-scroll-position.js +++ b/packages/gatsby-theme-docs/src/hooks/use-scroll-position.js @@ -1,9 +1,9 @@ -import React from 'react'; +import { useCallback, useState } from 'react'; import useScrollSpy from './use-scroll-spy'; const useScrollPosition = (containerId) => { - const [position, setPosition] = React.useState(0); - const onScroll = React.useCallback((element) => { + const [position, setPosition] = useState(0); + const onScroll = useCallback((element) => { setPosition(element.scrollTop); }, []); useScrollSpy(`#${containerId}`, onScroll); diff --git a/packages/gatsby-theme-docs/src/hooks/use-scroll-spy.js b/packages/gatsby-theme-docs/src/hooks/use-scroll-spy.js index 978642bccd..4381aa00ae 100644 --- a/packages/gatsby-theme-docs/src/hooks/use-scroll-spy.js +++ b/packages/gatsby-theme-docs/src/hooks/use-scroll-spy.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { useCallback, useEffect } from 'react'; import throttle from 'lodash.throttle'; const getElement = (selector) => document.querySelector(selector); @@ -6,7 +6,7 @@ const getElement = (selector) => document.querySelector(selector); const throttleMs = 100; const useScrollSpy = (selector, callback) => { - const onScroll = React.useCallback( + const onScroll = useCallback( throttle(() => { const element = getElement(selector); callback(element); @@ -14,7 +14,7 @@ const useScrollSpy = (selector, callback) => { [callback] ); - React.useEffect(() => { + useEffect(() => { const element = getElement(selector); element.addEventListener('scroll', onScroll); return () => { diff --git a/packages/gatsby-theme-docs/src/hooks/use-site-data.js b/packages/gatsby-theme-docs/src/hooks/use-site-data.js index 434633b2c0..6a3c213072 100644 --- a/packages/gatsby-theme-docs/src/hooks/use-site-data.js +++ b/packages/gatsby-theme-docs/src/hooks/use-site-data.js @@ -1,6 +1,5 @@ -/* eslint-disable react/prop-types */ -import React from 'react'; +import { createContext, useContext } from 'react'; -export const SiteDataContext = React.createContext({}); +export const SiteDataContext = createContext({}); -export const useSiteData = () => React.useContext(SiteDataContext); +export const useSiteData = () => useContext(SiteDataContext); diff --git a/packages/gatsby-theme-docs/src/layouts/content-homepage.js b/packages/gatsby-theme-docs/src/layouts/content-homepage.js index 710b0b0113..f6611d80a3 100644 --- a/packages/gatsby-theme-docs/src/layouts/content-homepage.js +++ b/packages/gatsby-theme-docs/src/layouts/content-homepage.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { useInView } from 'react-intersection-observer'; import useLayoutState from '../hooks/use-layout-state'; diff --git a/packages/gatsby-theme-docs/src/layouts/content.js b/packages/gatsby-theme-docs/src/layouts/content.js index 8a4f8c78d9..16536a7413 100644 --- a/packages/gatsby-theme-docs/src/layouts/content.js +++ b/packages/gatsby-theme-docs/src/layouts/content.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { Markdown } from '@commercetools-docs/ui-kit'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/footer.js b/packages/gatsby-theme-docs/src/layouts/internals/footer.js index 879a260eb1..19f74a4bad 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/footer.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/footer.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { Children } from 'react'; import { useStaticQuery, graphql } from 'gatsby'; import styled from '@emotion/styled'; import SpacingsInline from '@commercetools-uikit/spacings-inline'; @@ -43,7 +43,7 @@ const Columns = styled.div` grid-gap: ${designSystem.dimensions.spacings.xl}; grid-auto-columns: 1fr; grid-template-columns: repeat( - ${(props) => React.Children.count(props.children)}, + ${(props) => Children.count(props.children)}, 1fr ); diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-application.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-application.js index 2b66039dc5..4d9cd7088c 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/layout-application.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/layout-application.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { ThemeProvider as UiKitThemeProvider } from '@emotion/react'; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-footer.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-footer.js index 4b0d2beaa9..adfe795c85 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/layout-footer.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/layout-footer.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; import { designSystem } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-header-logo.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-header-logo.js index 339dda93c8..1307ee7837 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/layout-header-logo.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/layout-header-logo.js @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { designSystem, LogoButton } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-header.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-header.js index 21bbb8b3f9..444fc71976 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/layout-header.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/layout-header.js @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-main.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-main.js index f3ffc82503..8f2052fd1b 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/layout-main.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/layout-main.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-page-navigation.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-page-navigation.js index a5c5db1e3b..c3764175d2 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/layout-page-navigation.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/layout-page-navigation.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { keyframes, css } from '@emotion/react'; @@ -145,9 +145,9 @@ const Blank = styled.div` `; const LayoutPageNavigation = (props) => { - const [isMenuOpen, setMenuOpen] = React.useState(false); - const [modalPortalNode, setModalPortalNode] = React.useState(); - React.useEffect(() => { + const [isMenuOpen, setMenuOpen] = useState(false); + const [modalPortalNode, setModalPortalNode] = useState(); + useEffect(() => { setModalPortalNode(document.getElementById('modal-portal')); }, []); diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-page-release-notes-filters.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-page-release-notes-filters.js index ea6d1ef5d8..1c1028d34d 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/layout-page-release-notes-filters.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/layout-page-release-notes-filters.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { keyframes, css } from '@emotion/react'; @@ -141,9 +141,9 @@ const Blank = styled.div` `; const LayoutPageReleaseNotesFilters = (props) => { - const [isMenuOpen, setMenuOpen] = React.useState(false); - const [modalPortalNode, setModalPortalNode] = React.useState(); - React.useEffect(() => { + const [isMenuOpen, setMenuOpen] = useState(false); + const [modalPortalNode, setModalPortalNode] = useState(); + useEffect(() => { setModalPortalNode(document.getElementById('modal-portal')); }, []); diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-page-with-hero.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-page-with-hero.js index b08e71ffa3..446ba5c9af 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/layout-page-with-hero.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/layout-page-with-hero.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { designSystem, Markdown } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-release-note-body.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-release-note-body.js index 6d333d5033..c67ec53e77 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/layout-release-note-body.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/layout-release-note-body.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { ThemeProvider as UiKitThemeProvider } from '@emotion/react'; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-release-note.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-release-note.js index f71707f55a..de2fdb0682 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/layout-release-note.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/layout-release-note.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-sidebar.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-sidebar.js index a6980d2d62..4ecd6624f9 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/layout-sidebar.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/layout-sidebar.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { css, keyframes } from '@emotion/react'; @@ -66,9 +66,9 @@ const MenuButton = styled.button` `; const LayoutSidebar = (props) => { - const [menuButtonNode, setMenuButtonNode] = React.useState(); - const [modalPortalNode, setModalPortalNode] = React.useState(); - React.useEffect(() => { + const [menuButtonNode, setMenuButtonNode] = useState(); + const [modalPortalNode, setModalPortalNode] = useState(); + useEffect(() => { setMenuButtonNode(document.getElementById('sidebar-menu-toggle')); setModalPortalNode(document.getElementById('modal-portal')); }, []); diff --git a/packages/gatsby-theme-docs/src/layouts/internals/page-navigation.js b/packages/gatsby-theme-docs/src/layouts/internals/page-navigation.js index 1c6ee8896b..ea17de0c4c 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/page-navigation.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/page-navigation.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { cloneElement } from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; @@ -146,7 +146,7 @@ const LevelGroup = (props) => { {item.title} {props.children && - React.cloneElement(props.children, { + cloneElement(props.children, { items: item.items, level: props.level + 1, activeSection: props.activeSection, @@ -166,7 +166,7 @@ const LevelGroup = (props) => { )} {props.children && - React.cloneElement(props.children, { + cloneElement(props.children, { items: item.items, level: props.level + 1, activeSection: props.activeSection, @@ -224,7 +224,7 @@ const Container = (props) => ( {item.title} {props.children && - React.cloneElement(props.children, { + cloneElement(props.children, { items: item.items, activeSection: props.activeSection, level: 2, diff --git a/packages/gatsby-theme-docs/src/layouts/internals/page-navigation.spec.js b/packages/gatsby-theme-docs/src/layouts/internals/page-navigation.spec.js index 9fad954321..1354ff180f 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/page-navigation.spec.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/page-navigation.spec.js @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import styled from '@emotion/styled'; import PageNavigation from './page-navigation'; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/page-read-time-estimation.js b/packages/gatsby-theme-docs/src/layouts/internals/page-read-time-estimation.js index 3f03aaa918..c46e952bf7 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/page-read-time-estimation.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/page-read-time-estimation.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { designSystem } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js index 031c4922ee..6954baf232 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { useCallback, useEffect, useLayoutEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import { Location } from '@reach/router'; import { useStaticQuery, graphql, Link, withPrefix } from 'gatsby'; @@ -7,11 +7,14 @@ import styled from '@emotion/styled'; import { BackIcon } from '@commercetools-uikit/icons'; import SpacingsInline from '@commercetools-uikit/spacings-inline'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; -import { designSystem, createStyledIcon } from '@commercetools-docs/ui-kit'; +import { + designSystem, + createStyledIcon, + Icons, +} from '@commercetools-docs/ui-kit'; import SiteIcon from '../../overrides/site-icon'; import useScrollPosition from '../../hooks/use-scroll-position'; import { BetaFlag } from '../../components'; -import { Icons } from '@commercetools-docs/ui-kit'; import LayoutHeaderLogo from './layout-header-logo'; const ReleaseNotesIcon = createStyledIcon(Icons.ReleaseNotesSvgIcon); @@ -22,7 +25,7 @@ const ReleaseNotesIcon = createStyledIcon(Icons.ReleaseNotesSvgIcon); // `connect` to perform sync updates to a ref to save the latest props after // a render is actually committed to the DOM. const useIsomorphicLayoutEffect = - typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; + typeof window !== 'undefined' ? useLayoutEffect : useEffect; const trimTrailingSlash = (url) => url.replace(/(\/?)$/, ''); @@ -172,9 +175,9 @@ const SidebarLinkWrapper = (props) => { const cachedScrollPosition = (location.state || {}).sidebarScrollPosition; const locationPath = trimTrailingSlash(location.pathname); - const linkRef = React.useRef(); + const linkRef = useRef(); - const restoreScrollPosition = React.useCallback(() => { + const restoreScrollPosition = useCallback(() => { document .getElementById(scrollContainerId) .scrollBy(0, cachedScrollPosition); @@ -230,7 +233,7 @@ SidebarLinkWrapper.propTypes = { const SidebarChapter = (props) => { const elemId = `sidebar-chapter-${props.index}`; - const getChapterDOMElement = React.useCallback( + const getChapterDOMElement = useCallback( () => document.getElementById(elemId), [elemId] ); diff --git a/packages/gatsby-theme-docs/src/layouts/release-notes-detail.js b/packages/gatsby-theme-docs/src/layouts/release-notes-detail.js index de8734eff2..a77d8c39c9 100644 --- a/packages/gatsby-theme-docs/src/layouts/release-notes-detail.js +++ b/packages/gatsby-theme-docs/src/layouts/release-notes-detail.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import { designSystem } from '@commercetools-docs/ui-kit'; diff --git a/packages/gatsby-theme-docs/src/layouts/release-notes-list.js b/packages/gatsby-theme-docs/src/layouts/release-notes-list.js index 7a68e168b3..7163c48340 100644 --- a/packages/gatsby-theme-docs/src/layouts/release-notes-list.js +++ b/packages/gatsby-theme-docs/src/layouts/release-notes-list.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { Markdown } from '@commercetools-docs/ui-kit'; import { useInView } from 'react-intersection-observer'; diff --git a/packages/gatsby-theme-docs/src/overrides/page-header-banner-area.js b/packages/gatsby-theme-docs/src/overrides/page-header-banner-area.js index 63b85c229c..ffb08a27eb 100644 --- a/packages/gatsby-theme-docs/src/overrides/page-header-banner-area.js +++ b/packages/gatsby-theme-docs/src/overrides/page-header-banner-area.js @@ -1,4 +1,3 @@ -import React from 'react'; import UserResearchBanner from '../components/user-research-banner'; // A banner to be rendered in the top-right corner of a content page diff --git a/packages/gatsby-theme-docs/src/overrides/site-icon.js b/packages/gatsby-theme-docs/src/overrides/site-icon.js index 55e8ff35df..34c8bc606c 100644 --- a/packages/gatsby-theme-docs/src/overrides/site-icon.js +++ b/packages/gatsby-theme-docs/src/overrides/site-icon.js @@ -1,4 +1,3 @@ -import React from 'react'; import { Icons } from '@commercetools-docs/ui-kit'; // A React component to be rendered next to the microsite title diff --git a/packages/gatsby-theme-docs/src/overrides/top-menu-banner-area.js b/packages/gatsby-theme-docs/src/overrides/top-menu-banner-area.js index d7db0e018c..39f924ed93 100644 --- a/packages/gatsby-theme-docs/src/overrides/top-menu-banner-area.js +++ b/packages/gatsby-theme-docs/src/overrides/top-menu-banner-area.js @@ -1,4 +1,3 @@ -import React from 'react'; import UserResearchBanner from '../components/user-research-banner'; // A React component to be rendered on the right side of the top-menu diff --git a/packages/gatsby-theme-docs/src/templates/homepage.js b/packages/gatsby-theme-docs/src/templates/homepage.js index 860ae773e8..7250347dc8 100644 --- a/packages/gatsby-theme-docs/src/templates/homepage.js +++ b/packages/gatsby-theme-docs/src/templates/homepage.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { IntlProvider } from 'react-intl'; import { graphql } from 'gatsby'; diff --git a/packages/gatsby-theme-docs/src/templates/page-content.js b/packages/gatsby-theme-docs/src/templates/page-content.js index da2c770634..41cbf55966 100644 --- a/packages/gatsby-theme-docs/src/templates/page-content.js +++ b/packages/gatsby-theme-docs/src/templates/page-content.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { IntlProvider } from 'react-intl'; import { graphql } from 'gatsby'; diff --git a/packages/gatsby-theme-docs/src/templates/release-notes-detail.js b/packages/gatsby-theme-docs/src/templates/release-notes-detail.js index 006848e870..03c6686281 100644 --- a/packages/gatsby-theme-docs/src/templates/release-notes-detail.js +++ b/packages/gatsby-theme-docs/src/templates/release-notes-detail.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { IntlProvider } from 'react-intl'; import { graphql } from 'gatsby'; diff --git a/packages/gatsby-theme-docs/src/templates/release-notes-list.js b/packages/gatsby-theme-docs/src/templates/release-notes-list.js index 63bf375658..42b7ee3f2b 100644 --- a/packages/gatsby-theme-docs/src/templates/release-notes-list.js +++ b/packages/gatsby-theme-docs/src/templates/release-notes-list.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { IntlProvider } from 'react-intl'; import { graphql } from 'gatsby'; diff --git a/packages/ui-kit/src/components/card-elements.tsx b/packages/ui-kit/src/components/card-elements.tsx index 4b83bffc0d..174fc2c5ab 100644 --- a/packages/ui-kit/src/components/card-elements.tsx +++ b/packages/ui-kit/src/components/card-elements.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import * as designSystem from '../design-system'; import { css } from '@emotion/react'; diff --git a/packages/ui-kit/src/components/code-block.tsx b/packages/ui-kit/src/components/code-block.tsx index 2f6510beaa..0a78f52fe7 100644 --- a/packages/ui-kit/src/components/code-block.tsx +++ b/packages/ui-kit/src/components/code-block.tsx @@ -1,9 +1,7 @@ -import type { Theme } from '@emotion/react'; - -import React from 'react'; +import { useState } from 'react'; import ReactDOM from 'react-dom'; import styled from '@emotion/styled'; -import { css, ThemeProvider, useTheme } from '@emotion/react'; +import { css, ThemeProvider, useTheme, type Theme } from '@emotion/react'; import Tooltip from '@commercetools-uikit/tooltip'; import SpacingsInline from '@commercetools-uikit/spacings-inline'; import { ClipboardIcon } from '@commercetools-uikit/icons'; @@ -205,7 +203,7 @@ const CodeBlock = (props: CodeBlockProps) => { const isCommandLine = ['terminal', 'console'].includes(languageCode); // Copy to clipboard logic - const [isCopiedToClipboard, setIsCopiedToClipboard] = React.useState(false); + const [isCopiedToClipboard, setIsCopiedToClipboard] = useState(false); const handleCopyToClipboardClick = () => { copyToClipboard(props.content); diff --git a/packages/ui-kit/src/components/content-notifications.tsx b/packages/ui-kit/src/components/content-notifications.tsx index 3c9b3a48b9..fc133cf7aa 100644 --- a/packages/ui-kit/src/components/content-notifications.tsx +++ b/packages/ui-kit/src/components/content-notifications.tsx @@ -1,4 +1,4 @@ -import React, { type ReactNode } from 'react'; +import { type ReactNode } from 'react'; import styled from '@emotion/styled'; import SpacingsInline from '@commercetools-uikit/spacings-inline'; import { diff --git a/packages/ui-kit/src/components/globals.tsx b/packages/ui-kit/src/components/globals.tsx index 180b5f5d95..4474091e43 100644 --- a/packages/ui-kit/src/components/globals.tsx +++ b/packages/ui-kit/src/components/globals.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { css, Global } from '@emotion/react'; import { colors, dimensions, typography, tokens } from '../design-system'; diff --git a/packages/ui-kit/src/components/logo-button.tsx b/packages/ui-kit/src/components/logo-button.tsx index e031178503..4be6cb940e 100644 --- a/packages/ui-kit/src/components/logo-button.tsx +++ b/packages/ui-kit/src/components/logo-button.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import SpacingsInline from '@commercetools-uikit/spacings-inline'; import { dimensions, colors, typography } from '../design-system'; diff --git a/packages/ui-kit/src/components/markdown.tsx b/packages/ui-kit/src/components/markdown.tsx index 7a651868ff..a30fc6d393 100644 --- a/packages/ui-kit/src/components/markdown.tsx +++ b/packages/ui-kit/src/components/markdown.tsx @@ -1,4 +1,9 @@ -import React from 'react'; +import { + Children, + useState, + type ComponentType, + type SyntheticEvent, +} from 'react'; import reactIs from 'react-is'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; @@ -157,7 +162,7 @@ const Table = styled.table` left: -9999px; } ${(props) => { - const tableHeaders = React.Children.toArray(props.children).find( + const tableHeaders = Children.toArray(props.children).find( (elem) => reactIs.isElement(elem) && (elem.type === 'thead' || elem.props.mdxType === 'thead') @@ -168,7 +173,7 @@ const Table = styled.table` const rowHeadersChildren = Array.isArray(rowHeaders) ? rowHeaders : rowHeaders.props.children; - return React.Children.toArray(rowHeadersChildren).reduce( + return Children.toArray(rowHeadersChildren).reduce( (styles, elem, index) => ` ${styles} td:nth-of-type(${index + 1})::before { content: "${ @@ -316,9 +321,9 @@ const TooltipBodyComponent = styled.div` /* eslint-disable react/display-name */ const withCopyToClipboard = // eslint-disable-next-line @typescript-eslint/no-explicit-any - (Component: React.ComponentType) => (props: any) => { - const [isCopiedToClipboard, setIsCopiedToClipboard] = React.useState(false); - const handleCopyToClipboardClick = (event: React.SyntheticEvent) => { + (Component: ComponentType) => (props: any) => { + const [isCopiedToClipboard, setIsCopiedToClipboard] = useState(false); + const handleCopyToClipboardClick = (event: SyntheticEvent) => { event.preventDefault(); const sectionUrl = `${window.location.href.split('#')[0]}#${props.id}`; copyToClipboard(sectionUrl); diff --git a/packages/ui-kit/src/components/mermaid-client-side.tsx b/packages/ui-kit/src/components/mermaid-client-side.tsx index b35375dc71..80d68b39c9 100644 --- a/packages/ui-kit/src/components/mermaid-client-side.tsx +++ b/packages/ui-kit/src/components/mermaid-client-side.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import mermaid from 'mermaid'; import { colors, typography, tokens, dimensions } from '../design-system'; diff --git a/packages/ui-kit/src/components/mermaid.tsx b/packages/ui-kit/src/components/mermaid.tsx index c0af1d29e1..5eaeff7e60 100644 --- a/packages/ui-kit/src/components/mermaid.tsx +++ b/packages/ui-kit/src/components/mermaid.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { lazy, Suspense } from 'react'; import LoadingSpinner from '@commercetools-uikit/loading-spinner'; // This is a client-side only implementation of mermaid, which is its primary development target. @@ -10,7 +10,7 @@ import LoadingSpinner from '@commercetools-uikit/loading-spinner'; // server side rendering also has the disadvantage that clickable elements cannot // work because this requires attaching event handlers. -const MermaidLazy = React.lazy(() => import('./mermaid-client-side')); +const MermaidLazy = lazy(() => import('./mermaid-client-side')); type MermaidProps = { graph: string; @@ -21,11 +21,11 @@ const Mermaid = (props: MermaidProps) => { return ( <> {isClientSide && ( - } > - + )} ); diff --git a/packages/ui-kit/src/components/multi-code-block.tsx b/packages/ui-kit/src/components/multi-code-block.tsx index 2985dec37a..d6f5660715 100644 --- a/packages/ui-kit/src/components/multi-code-block.tsx +++ b/packages/ui-kit/src/components/multi-code-block.tsx @@ -1,4 +1,10 @@ -import React from 'react'; +import { + cloneElement, + useCallback, + useState, + type ReactElement, + type ReactNode, +} from 'react'; import reactIs from 'react-is'; import styled from '@emotion/styled'; import { ThemeProvider } from '@emotion/react'; @@ -104,8 +110,8 @@ function extractLanguages(children: OneOrManyChildren): string[] { function MultiCodeBlock(props: MultiCodeBlockProps) { const langs = extractLanguages(props.children); - const [selected, setSelected] = React.useState(langs[0]); - const handleOnLanguageChange = React.useCallback((event) => { + const [selected, setSelected] = useState(langs[0]); + const handleOnLanguageChange = useCallback((event) => { setSelected(event.target.value); }, []); @@ -114,7 +120,7 @@ function MultiCodeBlock(props: MultiCodeBlockProps) { colors.light.codeBlocks[props.secondaryTheme ? 'secondary' : 'primary'], }; - let selectedElement: React.ReactElement | undefined; + let selectedElement: ReactElement | undefined; if (Array.isArray(props.children)) { selectedElement = props.children.find((child) => child.props.language === selected) || @@ -164,7 +170,7 @@ function MultiCodeBlock(props: MultiCodeBlockProps) { ) : null} {selectedElement && - React.cloneElement(selectedElement, { + cloneElement(selectedElement, { secondaryTheme: props.secondaryTheme, })} @@ -172,7 +178,7 @@ function MultiCodeBlock(props: MultiCodeBlockProps) { ); } -type OneOrManyChildren = React.ReactElement | React.ReactElement[]; +type OneOrManyChildren = ReactElement | ReactElement[]; type MultiCodeBlockProps = { secondaryTheme?: boolean; title?: string; @@ -183,9 +189,7 @@ export default MultiCodeBlock; /* eslint-disable react/display-name */ // Maps the props coming from MDX to the underlying component. -export const CodeBlockMarkdownWrapper = (props: { - children?: React.ReactNode; -}) => { +export const CodeBlockMarkdownWrapper = (props: { children?: ReactNode }) => { const childElement = reactIs.isElement(props.children) ? props.children : null; diff --git a/packages/ui-kit/src/components/reset.tsx b/packages/ui-kit/src/components/reset.tsx index 2f7cf7b8f3..4afa79d88d 100644 --- a/packages/ui-kit/src/components/reset.tsx +++ b/packages/ui-kit/src/components/reset.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Global, css } from '@emotion/react'; /** diff --git a/packages/ui-kit/src/components/rss/rss-feed-table.tsx b/packages/ui-kit/src/components/rss/rss-feed-table.tsx index 87e2ba7423..068bbd2259 100644 --- a/packages/ui-kit/src/components/rss/rss-feed-table.tsx +++ b/packages/ui-kit/src/components/rss/rss-feed-table.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; import { DocsDateFormat } from '../../utils/dates'; diff --git a/packages/ui-kit/src/components/rss/rss-feeds.tsx b/packages/ui-kit/src/components/rss/rss-feeds.tsx index ec6938d7f1..58cca521ae 100644 --- a/packages/ui-kit/src/components/rss/rss-feeds.tsx +++ b/packages/ui-kit/src/components/rss/rss-feeds.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import useSWR from 'swr'; import LoadingSpinner from '@commercetools-uikit/loading-spinner'; import ContentNotifications from './../content-notifications'; diff --git a/packages/ui-kit/src/hooks/use-iso310-number-formatter.spec.tsx b/packages/ui-kit/src/hooks/use-iso310-number-formatter.spec.tsx index 30b4308ab7..cb49818637 100644 --- a/packages/ui-kit/src/hooks/use-iso310-number-formatter.spec.tsx +++ b/packages/ui-kit/src/hooks/use-iso310-number-formatter.spec.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { IntlProvider } from 'react-intl'; import { render, screen } from '@testing-library/react'; import useISO310NumberFormatter from './use-iso310-number-formatter'; diff --git a/packages/ui-kit/src/utils/create-styled-icon.ts b/packages/ui-kit/src/utils/create-styled-icon.ts index e2f80cfe19..a350e78627 100644 --- a/packages/ui-kit/src/utils/create-styled-icon.ts +++ b/packages/ui-kit/src/utils/create-styled-icon.ts @@ -2,7 +2,6 @@ import invariant from 'tiny-invariant'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { colors } from '../design-system'; -import React from 'react'; export type IconSize = 'small' | 'medium' | 'big' | 'scale'; export type StyledComponentProps = { diff --git a/packages/ui-kit/src/utils/markdown-fragment-to-react.js b/packages/ui-kit/src/utils/markdown-fragment-to-react.js index da52b24545..c52177fe6c 100644 --- a/packages/ui-kit/src/utils/markdown-fragment-to-react.js +++ b/packages/ui-kit/src/utils/markdown-fragment-to-react.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { createElement, Fragment } from 'react'; import styled from '@emotion/styled'; import unified from 'unified'; import filter from 'unist-util-filter'; @@ -61,8 +61,8 @@ const markdownFragmentToReact = ( .use(safeCustomPlugin) .use(remarkRehype) .use(rehypeReact, { - createElement: React.createElement, - Fragment: React.Fragment, + createElement, + Fragment, components: { p: Markdown.Paragraph, a: Link, diff --git a/websites/api-docs-smoke-test/src/@commercetools-docs/gatsby-theme-docs/overrides/page-header-side.js b/websites/api-docs-smoke-test/src/@commercetools-docs/gatsby-theme-docs/overrides/page-header-side.js index b0cb8042af..ad56c6122e 100644 --- a/websites/api-docs-smoke-test/src/@commercetools-docs/gatsby-theme-docs/overrides/page-header-side.js +++ b/websites/api-docs-smoke-test/src/@commercetools-docs/gatsby-theme-docs/overrides/page-header-side.js @@ -1,4 +1,3 @@ -import React from 'react'; import GithubSvgIcon from '../../../icons/github.svg'; // A React component to be rendered in the top-right corner of a content page diff --git a/websites/api-docs-smoke-test/src/@commercetools-docs/gatsby-theme-docs/overrides/site-icon.js b/websites/api-docs-smoke-test/src/@commercetools-docs/gatsby-theme-docs/overrides/site-icon.js index 7470cc7bcd..1d2632e14e 100644 --- a/websites/api-docs-smoke-test/src/@commercetools-docs/gatsby-theme-docs/overrides/site-icon.js +++ b/websites/api-docs-smoke-test/src/@commercetools-docs/gatsby-theme-docs/overrides/site-icon.js @@ -1,4 +1,3 @@ -import React from 'react'; import { Icons } from '@commercetools-docs/ui-kit'; // A React component to be rendered next to the microsite title