Switch components package from react-hyperscript-helpers to JSX

.eslintrc.js

@@ -27,6 +27,8 @@ module.exports = {
     // Allow writing components as arrow functions.
     'react/function-component-definition': 'off',
     'react/prop-types': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'react/react-in-jsx-scope': 'off',
     'react/require-default-props': 'off',
     'react/sort-comp': 'off',
     'react/static-property-placement': 'off',
@@ -37,7 +39,7 @@ module.exports = {
     // duplicates and combines them into one import from 'date-fns'.
     'import/no-duplicates': 'off',
     // Allow tests' dependencies to be listed in devDependencies or dependencies.
-    'import/no-extraneous-dependencies': ['error', { devDependencies: ['**/*.test.{js,ts}'] }],
+    'import/no-extraneous-dependencies': ['error', { devDependencies: ['**/*.test.{js,ts,tsx}'] }],
     'import/no-named-as-default': 'off',
     // Named exports are more convenient for mocking.
     'import/prefer-default-export': 'off',

packages/components/package.json

@@ -30,7 +30,6 @@
     "color": "^4.0.1",
     "lodash": "^4.17.21",
     "react-focus-lock": "^2.9.5",
-    "react-hyperscript-helpers": "^2.0.0",
     "react-modal": "^3.16.1",
     "react-onclickoutside": "^6.13.0",
     "react-switch": "^6.1.0"

packages/components/src/Clickable.test.ts → packages/components/src/Clickable.test.tsx

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { h } from 'react-hyperscript-helpers';
 
 import { Clickable, ClickableProps } from './Clickable';
 import { TooltipTrigger, TooltipTriggerProps } from './TooltipTrigger';
@@ -16,7 +15,7 @@ jest.mock('./TooltipTrigger', (): TooltipTriggerExports => {
 
 describe('Clickable', () => {
   const renderClickable = (props: ClickableProps = {}): HTMLElement => {
-    render(h(Clickable, props, ['Click here']));
+    render(<Clickable {...props}>Click here</Clickable>);
     return screen.getByText('Click here');
   };
 

packages/components/src/Clickable.ts → packages/components/src/Clickable.tsx

@@ -1,5 +1,4 @@
 import { ForwardedRef, forwardRef, ReactNode } from 'react';
-import { h } from 'react-hyperscript-helpers';
 
 import { Interactive, InteractiveProps } from './Interactive';
 import { Side } from './internal/popup-utils';
@@ -26,25 +25,27 @@ export const Clickable = forwardRef((props: ClickableProps, ref: ForwardedRef<HT
     ...otherProps
   } = props;
 
-  const interactiveElement = h(
-    Interactive,
-    {
-      ref,
-      'aria-disabled': !!disabled,
-      disabled,
-      href: !disabled ? href : undefined,
-      tabIndex: disabled ? -1 : 0,
-      tagName,
-      onClick: (e) => onClick && !disabled && onClick(e),
-      ...otherProps,
-    },
-    [children]
+  const interactiveElement = (
+    <Interactive
+      ref={ref}
+      aria-disabled={!!disabled}
+      disabled={disabled}
+      href={!disabled ? href : undefined}
+      tabIndex={disabled ? -1 : 0}
+      tagName={tagName}
+      onClick={(e) => onClick && !disabled && onClick(e)}
+      {...otherProps}
+    >
+      {children}
+    </Interactive>
   );
 
   if (tooltip) {
-    return h(TooltipTrigger, { content: tooltip, side: tooltipSide, delay: tooltipDelay, useTooltipAsLabel }, [
-      interactiveElement,
-    ]);
+    return (
+      <TooltipTrigger content={tooltip} side={tooltipSide} delay={tooltipDelay} useTooltipAsLabel={useTooltipAsLabel}>
+        {interactiveElement}
+      </TooltipTrigger>
+    );
   }
   return interactiveElement;
 });

packages/components/src/DelayedRender.test.ts → packages/components/src/DelayedRender.test.tsx

@@ -1,5 +1,4 @@
 import { act, render, screen } from '@testing-library/react';
-import { div, h } from 'react-hyperscript-helpers';
 
 import { DelayedRender } from './DelayedRender';
 
@@ -9,7 +8,7 @@ describe('DelayedRender', () => {
     jest.useFakeTimers();
 
     // Act
-    render(h(DelayedRender, { delay: 3000 }, [div(['Hello world'])]));
+    render(<DelayedRender delay={3000}>Hello world</DelayedRender>);
 
     const isRenderedInitially = screen.queryByText('Hello world') !== null;
 

packages/components/src/ErrorBoundary.test.ts → packages/components/src/ErrorBoundary.test.tsx

@@ -1,12 +1,11 @@
 import { render, screen } from '@testing-library/react';
-import { div, h } from 'react-hyperscript-helpers';
 
 import { ErrorBoundary } from './ErrorBoundary';
 
 describe('ErrorBoundary', () => {
   it('renders children', () => {
     // Act
-    render(h(ErrorBoundary, [div(['Hello world'])]));
+    render(<ErrorBoundary>Hello world</ErrorBoundary>);
 
     // Assert
     screen.getByText('Hello world');
@@ -22,7 +21,11 @@ describe('ErrorBoundary', () => {
     jest.spyOn(console, 'error').mockImplementation(() => {});
 
     // Act
-    const { container } = render(h(ErrorBoundary, [h(TestComponent)]));
+    const { container } = render(
+      <ErrorBoundary>
+        <TestComponent />
+      </ErrorBoundary>
+    );
 
     // Assert
     expect(container).toBeEmptyDOMElement();
@@ -40,7 +43,11 @@ describe('ErrorBoundary', () => {
     jest.spyOn(console, 'error').mockImplementation(() => {});
 
     // Act
-    render(h(ErrorBoundary, { onError }, [h(TestComponent)]));
+    render(
+      <ErrorBoundary onError={onError}>
+        <TestComponent />
+      </ErrorBoundary>
+    );
 
     // Assert
     expect(onError).toHaveBeenCalledWith(new Error('Something went wrong!'));

packages/components/src/FocusTrap.test.ts → packages/components/src/FocusTrap.test.tsx

@@ -1,7 +1,5 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Fragment } from 'react';
-import { button, h } from 'react-hyperscript-helpers';
 
 import { FocusTrap } from './FocusTrap';
 
@@ -11,7 +9,11 @@ describe('FocusTrap', () => {
     const user = userEvent.setup();
 
     const { container } = render(
-      h(Fragment, [h(FocusTrap, [button(['A']), button(['B']), button(['C'])]), button(['D'])])
+      <FocusTrap onEscape={jest.fn()}>
+        <button type="button">A</button>
+        <button type="button">B</button>
+        <button type="button">C</button>
+      </FocusTrap>
     );
 
     const wrapper = container.children.item(1) as HTMLElement;

packages/components/src/FocusTrap.ts → packages/components/src/FocusTrap.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import FocusLock from 'react-focus-lock';
-import { h } from 'react-hyperscript-helpers';
 
 export type FocusTrapProps = JSX.IntrinsicElements['div'] & {
   onEscape: () => void;
@@ -15,10 +14,9 @@ export type FocusTrapProps = JSX.IntrinsicElements['div'] & {
 export const FocusTrap = (props: FocusTrapProps): ReactNode => {
   const { children, style, onEscape, ...otherProps } = props;
 
-  return h(
-    FocusLock,
-    {
-      lockProps: {
+  return (
+    <FocusLock
+      lockProps={{
         tabIndex: 0,
         style: {
           outline: 'none',
@@ -31,9 +29,10 @@ export const FocusTrap = (props: FocusTrapProps): ReactNode => {
             e.stopPropagation();
           }
         },
-      },
-      returnFocus: true,
-    },
-    [children]
+      }}
+      returnFocus
+    >
+      {children}
+    </FocusLock>
   );
 };

packages/components/src/InfoBox.test.ts → packages/components/src/InfoBox.test.tsx

@@ -1,14 +1,13 @@
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { h } from 'react-hyperscript-helpers';
 
 import { InfoBox } from './InfoBox';
 import { renderWithTheme } from './internal/test-utils';
 
 describe('InfoBox', () => {
   it('renders an icon button', async () => {
     // Act
-    renderWithTheme(h(InfoBox, ['More information about the thing.']));
+    renderWithTheme(<InfoBox>More information about the thing.</InfoBox>);
     const trigger = screen.getByRole('button');
 
     // Assert
@@ -20,7 +19,7 @@ describe('InfoBox', () => {
 
   it('allows overriding the default icon', async () => {
     // Act
-    renderWithTheme(h(InfoBox, { icon: 'error-standard' }, ['More information about the thing.']));
+    renderWithTheme(<InfoBox icon="error-standard">More information about the thing.</InfoBox>);
     const trigger = screen.getByRole('button');
 
     // Assert
@@ -32,7 +31,7 @@ describe('InfoBox', () => {
     // Arrange
     const user = userEvent.setup();
 
-    renderWithTheme(h(InfoBox, ['More information about the thing.']));
+    renderWithTheme(<InfoBox>More information about the thing.</InfoBox>);
 
     // Act
     const trigger = screen.getByRole('button');

packages/components/src/InfoBox.ts → packages/components/src/InfoBox.tsx

@@ -1,5 +1,4 @@
 import { CSSProperties, ReactNode } from 'react';
-import { div, h } from 'react-hyperscript-helpers';
 
 import { Clickable } from './Clickable';
 import { icon } from './icon';
@@ -21,22 +20,11 @@ export const InfoBox = (props: InfoBoxProps): ReactNode => {
 
   const { colors } = useThemeFromContext();
 
-  return h(
-    PopupTrigger,
-    {
-      side,
-      content: div({ style: { padding: '0.5rem', width: 300 } }, [children]),
-    },
-    [
-      h(
-        Clickable,
-        {
-          'aria-label': 'More info',
-          tagName: 'span',
-          tooltip,
-        },
-        [icon(iconId, { size, style: { color: colors.accent(), cursor: 'pointer', ...style } })]
-      ),
-    ]
+  return (
+    <PopupTrigger content={<div style={{ padding: '0.5rem', width: 300 }}>{children}</div>} side={side}>
+      <Clickable aria-label="More info" tagName="span" tooltip={tooltip}>
+        {icon(iconId, { size, style: { color: colors.accent(), cursor: 'pointer', ...style } })}
+      </Clickable>
+    </PopupTrigger>
   );
 };