chore!: Support React 18 [WEB-2055]

Add support for React 18
This is a breaking change for `gamut-styles` because we have removed `react-helmet` from the `AssetProvider` component. You'll need to wrap `AssetProvider` in an instance of `react-helmet` in your app.

package.json

@@ -52,19 +52,19 @@
     ]
   },
   "dependencies": {
-    "@babel/cli": "7.17.10",
-    "@babel/core": "7.13.10",
-    "@babel/preset-typescript": "^7.13.0",
+    "@babel/cli": "7.20.7",
+    "@babel/core": "7.20.12",
+    "@babel/preset-typescript": "^7.18.6",
     "@codecademy/eslint-config": "8.0.0",
     "@codecademy/prettier-config": "^0.2.0",
     "@codecademy/tsconfig": "^0.2.0",
-    "@emotion/babel-plugin": "^11.3.0",
+    "@emotion/babel-plugin": "^11.10.5",
     "@emotion/jest": "^11.3.0",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@nrwl/cli": "^14.5.2",
-    "@nrwl/nx-cloud": "^14.3.0",
     "@nrwl/jest": "^14.5.2",
+    "@nrwl/nx-cloud": "^14.3.0",
     "@nrwl/react": "^14.5.2",
     "@svgr/cli": "5.5.0",
     "@testing-library/dom": "^8.11.1",
@@ -84,7 +84,7 @@
     "@typescript-eslint/parser": "^5.15.0",
     "babel-jest": "28.1",
     "babel-plugin-macros": "3.0.1",
-    "babel-preset-codecademy": "6.0.1-alpha.8dfef4.0",
+    "babel-preset-codecademy": "7.0.0",
     "component-test-setup": "^0.3.1",
     "conventional-changelog-cli": "^2.0.34",
     "conventional-changelog-conventionalcommits": "^4.3.0",

packages/gamut-icons/package.json

@@ -37,6 +37,6 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "^4.17.5",
-    "react": ">=17.0.2"
+    "react": "^17.0.2 || ^18.2.0"
   }
 }

packages/gamut-illustrations/package.json

@@ -22,8 +22,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "react": ">=17.0.2",
-    "react-dom": ">=17.0.2"
+    "react": "^17.0.2 || ^18.2.0",
+    "react-dom": "^17.0.2 || ^18.2.0"
   },
   "publishConfig": {
     "access": "public"

packages/gamut-illustrations/src/__tests__/gamut-illustrations.test.tsx

@@ -3,10 +3,10 @@ import { render } from '@testing-library/react';
 import * as illustrations from '..';
 
 describe('illustrations', () => {
-  for (const [name, Illustration] of Object.entries(illustrations)) {
-    if (name.startsWith('_')) continue;
-    it(`${name} renders`, () => {
+  it.each(Object.entries(illustrations))(
+    '%s renders',
+    (_name, Illustration) => {
       render(<Illustration />);
-    });
-  }
+    }
+  );
 });

packages/gamut-labs/package.json

@@ -21,8 +21,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "react": ">=17.0.2",
-    "react-dom": ">=17.0.2"
+    "react": "^17.0.2 || ^18.2.0",
+    "react-dom": "^17.0.2 || ^18.2.0"
   },
   "dependencies": {
     "@codecademy/gamut": "51.7.3",
@@ -32,9 +32,8 @@
     "@codecademy/gamut-styles": "14.2.5",
     "@codecademy/tracking": "1.0.4",
     "@codecademy/variance": "0.20.5",
-    "@loadable/component": "^5.15.2",
     "classnames": "^2.2.5",
-    "framer-motion": "^4.1.17",
+    "framer-motion": "^6.5.1",
     "freezeframe": "^5.0.2",
     "intersection-observer": "^0.12.0",
     "lodash": "^4.17.5",
@@ -53,7 +52,6 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
-    "@types/loadable__component": "^5.13.4",
     "@types/pluralize": "0.0.29"
   },
   "scripts": {

packages/gamut-labs/src/AppBar/AppBarSection.tsx

@@ -1,16 +1,17 @@
+import { WithChildrenProp } from '@codecademy/gamut';
 import cx from 'classnames';
 import * as React from 'react';
 
 // eslint-disable-next-line gamut/no-css-standalone
 import styles from './styles/index.module.scss';
 
-export type AppBarSectionProps = {
+export interface AppBarSectionProps extends WithChildrenProp {
   /**
    * Position of the the section within the AppBar.
    */
   position?: 'left' | 'center' | 'right';
   className?: string;
-};
+}
 
 export const AppBarSection: React.FC<AppBarSectionProps> = ({
   position,

packages/gamut-labs/src/AppBar/index.tsx

@@ -1,17 +1,17 @@
-import { ContentContainer } from '@codecademy/gamut';
+import { ContentContainer, WithChildrenProp } from '@codecademy/gamut';
 import cx from 'classnames';
 import * as React from 'react';
 
 // eslint-disable-next-line gamut/no-css-standalone
 import styles from './styles/index.module.scss';
 
-export type AppBarProps = {
+export interface AppBarProps extends WithChildrenProp {
   className?: string;
   /**
    * Whether the container should be larger than the default content size.
    */
   wide?: boolean;
-};
+}
 
 export const AppBar: React.FC<AppBarProps> = ({
   wide,

packages/gamut-labs/src/AppHeader/shared.tsx

@@ -1,4 +1,10 @@
-import { Anchor, FlexBox, LayoutGrid, Text } from '@codecademy/gamut';
+import {
+  Anchor,
+  FlexBox,
+  LayoutGrid,
+  Text,
+  WithChildrenProp,
+} from '@codecademy/gamut';
 import { ArrowChevronDownFilledIcon } from '@codecademy/gamut-icons';
 import { css, pxRem, states } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
@@ -7,9 +13,9 @@ import * as React from 'react';
 
 export const appHeaderMobileBreakpoint = 'lg' as const;
 
-export type AnimatedHeaderZoneProps = {
+export interface AnimatedHeaderZoneProps extends WithChildrenProp {
   visible?: boolean;
-};
+}
 
 const animatedPopoverVariants: Variants = {
   enter: { opacity: 1, transition: { duration: 0.2 } },

packages/gamut-labs/src/DropdownButton/index.tsx

@@ -4,6 +4,7 @@ import {
   IconButton,
   Popover,
   StrokeButton,
+  WithChildrenProp,
 } from '@codecademy/gamut';
 import {
   ArrowChevronDownFilledIcon,
@@ -30,14 +31,14 @@ const HorizontalKebabIcon = styled(MiniKebabMenuIcon)(
   })
 );
 
-export type DropdownButtonProps = {
+export interface DropdownButtonProps extends WithChildrenProp {
   buttonType?: 'fill' | 'stroke' | 'kebab' | 'horizontalKebab';
   dropdownItems: DropdownItem[];
   align?: 'left' | 'right';
   onClick?: (event: React.MouseEvent) => void;
   verticalOffset?: number;
   horizontalOffset?: number;
-};
+}
 
 export const DropdownButton: React.FC<DropdownButtonProps> = ({
   buttonType = 'fill',

packages/gamut-labs/src/GlobalFooter/FooterLinks.tsx

@@ -37,7 +37,7 @@ export const FooterLinkItemWithAnchor: React.FC<
   }
 > = ({ trackingTarget, footerOnClick, ...anchorProps }) => {
   const anchorOnClick = useCallback(
-    (event) => {
+    (event: React.MouseEvent<Element, MouseEvent>) => {
       footerOnClick({ event, target: trackingTarget });
     },
     [footerOnClick, trackingTarget]

packages/gamut-labs/src/GlobalHeader/types.tsx

@@ -1,3 +1,4 @@
+import { WithChildrenProp } from '@codecademy/gamut';
 import { ReactNode } from 'react';
 
 import {
@@ -9,15 +10,15 @@ import { AppHeaderNotificationSettings } from '../Notifications/types';
 
 type RenderProfile = { desktop: () => ReactNode; mobile: () => ReactNode };
 
-type BaseHeader = {
+interface BaseHeader extends WithChildrenProp {
   /** A method to be called on click/activating a header item */
   action: AppHeaderClickHandler;
   /** A method to be called only on click/activating a *link* header item */
   onLinkAction?: AppHeaderClickHandler<AppHeaderItemWithHref>;
   className?: string;
   hidePricing?: boolean;
   search: AppHeaderSearch;
-};
+}
 
 export type User = {
   avatar: string;

packages/gamut-labs/src/GlobalPage/index.tsx

@@ -2,6 +2,7 @@ import {
   AppWrapper,
   SkipToContent,
   SkipToContentTarget,
+  WithChildrenProp,
 } from '@codecademy/gamut';
 import { Background } from '@codecademy/gamut-styles';
 import { ComponentProps, forwardRef } from 'react';
@@ -21,7 +22,7 @@ export type GlobalPageBackgroundColor =
   | 'paleYellow'
   | 'white';
 
-export type GlobalPageProps = {
+export interface GlobalPageProps extends WithChildrenProp {
   backgroundColor?: GlobalPageBackgroundColor;
 
   /**
@@ -48,7 +49,7 @@ export type GlobalPageProps = {
    * Custom element ID to link to by the SkipToContent control, if not a default one at the beginning of the page.
    */
   skipToContentId?: string;
-};
+}
 
 const defaultSkipToContentId = 'page-skip-to-content-target';
 

packages/gamut-labs/src/HeaderHeightArea/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@codecademy/gamut';
+import { Box, WithChildrenProp } from '@codecademy/gamut';
 import { system, transitionConcat } from '@codecademy/gamut-styles';
 import { ResponsiveProp } from '@codecademy/variance';
 import { useTheme } from '@emotion/react';
@@ -28,11 +28,11 @@ const HeaderHeightAreaBase = styled(Box)(
   })
 );
 
-export type HeaderHeightAreaProps = {
+export interface HeaderHeightAreaProps extends WithChildrenProp {
   as?: React.ElementType<any>;
   display: ResponsiveProp<'none' | 'block'>;
   title?: string;
-};
+}
 
 export const HeaderHeightArea: React.FC<HeaderHeightAreaProps> = ({
   as,

packages/gamut-labs/src/HorizontalScrollMenu/index.tsx

@@ -1,6 +1,6 @@
 import 'intersection-observer';
 
-import { Box, FlexBox } from '@codecademy/gamut';
+import { Box, FlexBox, WithChildrenProp } from '@codecademy/gamut';
 import styled from '@emotion/styled';
 import { Children, useEffect, useMemo, useRef } from 'react';
 import * as React from 'react';
@@ -19,7 +19,7 @@ const ScrollItemWrapper = styled(Box)`
   }
 `;
 
-export interface HorizontalScrollMenuProps {
+export interface HorizontalScrollMenuProps extends WithChildrenProp {
   className?: string;
 }
 

packages/gamut-labs/src/Interstitial/index.tsx

@@ -1,9 +1,10 @@
+import { WithChildrenProp } from '@codecademy/gamut';
 import { colors } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import { useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 
-export type InterstitialProps = {
+export interface InterstitialProps extends WithChildrenProp {
   /** If provided, these buttons will render below the title and children in a column. */
   buttons?: React.ReactNode[];
   className?: string;
@@ -13,7 +14,7 @@ export type InterstitialProps = {
   focus?: boolean;
   /** h1 title for the interstitial */
   title: string;
-};
+}
 
 const InterstitialWrapper = styled.div`
   align-items: center;

packages/gamut-labs/src/LandingPage/CTA.tsx

@@ -1,11 +1,11 @@
-import { CTAButton, FillButton } from '@codecademy/gamut';
+import { ButtonProps, CTAButton, FillButton } from '@codecademy/gamut';
 import * as React from 'react';
 
-export type CTAProps = {
+export interface CTAProps extends Pick<ButtonProps, 'children'> {
   href: string;
   onClick?: React.MouseEventHandler;
   buttonType?: 'cta' | 'fill';
-};
+}
 
 export const CTA: React.FC<CTAProps> = ({
   buttonType = 'cta',

packages/gamut-labs/src/LandingPage/Feature.tsx

@@ -1,4 +1,4 @@
-import { Box, Markdown, Text } from '@codecademy/gamut';
+import { Box, Markdown, Text, WithChildrenProp } from '@codecademy/gamut';
 import { mediaQueries } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 import * as React from 'react';
@@ -26,7 +26,7 @@ export const FeaturedIcon: React.FC<FeaturedIconProps> = ({ src, alt }) => (
   <Image alt={alt} src={src} mb={32} width="64px" data-testid="feature-icon" />
 );
 
-export const FeaturedStat: React.FC = ({ children }) => (
+export const FeaturedStat: React.FC<WithChildrenProp> = ({ children }) => (
   <Text
     as="div"
     variant="title-xxl"
@@ -37,9 +37,9 @@ export const FeaturedStat: React.FC = ({ children }) => (
   </Text>
 );
 
-export type FeaturedTitleProps = {
+export interface FeaturedTitleProps extends WithChildrenProp {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-};
+}
 export const FeaturedTitle: React.FC<FeaturedTitleProps> = ({
   as,
   children,
@@ -80,9 +80,11 @@ const FeatureBlock = styled.div`
     }
   }
 `;
-export type FeatureProps = {
+
+export interface FeatureProps extends WithChildrenProp {
   testId?: string;
-};
+}
+
 export const Feature: React.FC<FeatureProps> = ({ testId, children }) => (
   <FeatureBlock data-testid={testId}>{children}</FeatureBlock>
 );

packages/gamut-labs/src/LandingPage/PageFeatures.tsx

@@ -4,6 +4,7 @@ import {
   ColumnProps,
   FlexBox,
   LayoutGrid,
+  WithChildrenProp,
 } from '@codecademy/gamut';
 import { ReactNode } from 'react';
 import * as React from 'react';
@@ -21,7 +22,7 @@ import {
 import { Title } from './Title';
 import { BaseProps } from './types';
 
-export type PageFeaturesProps = BaseProps & {
+export interface PageFeaturesProps extends BaseProps, WithChildrenProp {
   maxCols?: 1 | 2 | 3 | 4;
   featuresMedia?: 'image' | 'icon' | 'stat';
   features: {
@@ -32,7 +33,7 @@ export type PageFeaturesProps = BaseProps & {
     statText?: string;
     testId?: string;
   }[];
-};
+}
 
 const rowRenderEach = (
   items: PageFeaturesProps['features'],

packages/gamut-labs/src/LandingPage/Title.tsx

@@ -1,9 +1,9 @@
-import { Text } from '@codecademy/gamut';
+import { Text, WithChildrenProp } from '@codecademy/gamut';
 import * as React from 'react';
 
-export type TitleProps = {
+export interface TitleProps extends WithChildrenProp {
   isPageHeading?: boolean;
-};
+}
 
 const titleProps = {
   heading: {