[NO-TICKET] Upgrade React types to fix Storybook 8 branch

.storybook/docs/NoStoryDocTemplate.mdx

@@ -0,0 +1,27 @@
+import { Meta, Title, Subtitle, Description, ArgTypes } from '@storybook/blocks';
+import { HtmlElementArgs } from './HtmlElementArgs';
+
+<Meta isTemplate />
+
+<Title />
+<Subtitle />
+
+<Description />
+
+## Props
+
+{/*
+  * Note that ArgsTable is technically deprecated in v7, but Storybook has yet
+  * to offer a solid alternative for stories with subcomponents. This args
+  * table will render multiple tabs when there is a `subcomponents` property
+  * present in the story meta. See the following discussions:
+  * 
+  *   - https://github.com/storybookjs/storybook/issues/21253
+  *   - https://github.com/storybookjs/storybook/issues/20782
+  * 
+  * If they remove this feature, the path forward may be to create our own
+  * custom "doc block" that uses the
+  * [useOf](https://storybook.js.org/docs/react/api/doc-block-useof) hook.
+  */}
+<ArgTypes />
+<HtmlElementArgs />

.storybook/main.ts

@@ -21,6 +21,9 @@ const config: StorybookConfig = {
     `../packages/docs/content/**/${extensionGlob}`,
   ],
   staticDirs: ['../packages/design-system-tokens/dist/css-vars'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),
     options: {},

packages/design-system/package.json

@@ -56,8 +56,8 @@
   ],
   "dependencies": {
     "@popperjs/core": "^2.4.4",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^17.0.10",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "^4.4.5",
     "case-it": "^1.0.1",
     "chalk": "^5.0.1",

packages/design-system/src/components/Accordion/Accordion.tsx

@@ -1,5 +1,4 @@
 import type * as React from 'react';
-import { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
 export interface AccordionProps {
@@ -21,11 +20,7 @@ export interface AccordionProps {
  * For information about how and when to use this component,
  * [refer to its full documentation page](https://design.cms.gov/components/accordion/).
  */
-export const Accordion: FunctionComponent<AccordionProps> = ({
-  bordered,
-  children,
-  className,
-}: AccordionProps) => {
+export const Accordion = ({ bordered, children, className }: AccordionProps) => {
   const classes = classNames('ds-c-accordion', bordered && 'ds-c-accordion--bordered', className);
   return <div className={classes}>{children}</div>;
 };

packages/design-system/src/components/Accordion/AccordionItem.tsx

@@ -54,7 +54,7 @@ export interface AccordionItemState {
   isOpen?: boolean;
 }
 
-export const AccordionItem: React.FC<AccordionItemProps> = ({
+export const AccordionItem = ({
   buttonClassName,
   children,
   contentClassName,
@@ -67,7 +67,7 @@ export const AccordionItem: React.FC<AccordionItemProps> = ({
   onChange,
   closeIconComponent,
   openIconComponent,
-}) => {
+}: AccordionItemProps) => {
   const contentClasses = classNames('ds-c-accordion__content', contentClassName);
   const buttonClasses = classNames('ds-c-accordion__button', buttonClassName);
   const HeadingTag = `h${headingLevel}` as const;

packages/design-system/src/components/Alert/Alert.tsx

@@ -68,7 +68,7 @@ export type AlertProps = BaseAlertProps &
  * For information about how and when to use this component,
  * [refer to its full documentation page](https://design.cms.gov/components/alert/).
  */
-export const Alert: React.FC<AlertProps> = (props: AlertProps) => {
+export const Alert = (props: AlertProps) => {
   const { headingRef, bodyRef } = useAlertAnalytics(props);
   const focusRef = useAutofocus(props.autoFocus);
   const rootId = useId('alert--', props.id);

packages/design-system/src/components/ChoiceList/ChoiceList.tsx

@@ -77,7 +77,7 @@ export type ChoiceListProps = BaseChoiceListProps &
  * props table below, including all valid attributes of the
  * [HTML input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
  */
-export const ChoiceList: React.FC<ChoiceListProps> = (props: ChoiceListProps) => {
+export const ChoiceList = (props: ChoiceListProps) => {
   const { onBlur, onComponentBlur, choices } = props;
   const id = useId('choice-list--', props.id);
 

packages/design-system/src/components/Dialog/Dialog.stories.tsx

@@ -7,7 +7,7 @@ import { useDialog } from './useDialog';
 
 const meta: Meta<typeof Dialog> = {
   title: 'Components/Dialog',
-  component: Dialog as any,
+  component: Dialog,
   args: {
     alert: false,
     children: (
@@ -31,7 +31,7 @@ export default meta;
 
 type Story = StoryObj<typeof Dialog>;
 
-export const DialogExample: Story = {
+export const Default: Story = {
   render: function Component(args) {
     const [dialogOpen, updateOpen] = useState(false);
 

packages/design-system/src/components/Dialog/Dialog.test.interaction.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+import themes from '../../../../../themes.json';
+
+const sbID = 'components-dialog--default';
+const storyUrl = `http://localhost:6006/iframe.html?viewMode=story&id=${sbID}`;
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+Object.keys(themes).forEach((theme) => {
+  if (themes[theme].incomplete) return;
+
+  test(`Dialog open: ${theme}`, async ({ page }) => {
+    await page.goto(`${storyUrl}&globals=theme:${theme}`);
+    const elem = page.getByRole('button');
+    await elem.click();
+    await sleep(100);
+    await expect(page).toHaveScreenshot(`dialog--open--${theme}.png`, { fullPage: true });
+  });
+});

packages/design-system/src/components/Drawer/Drawer.stories.tsx

@@ -1,4 +1,3 @@
-import { ArgTypes, Description, Subtitle, Title } from '@storybook/blocks';
 import { action } from '@storybook/addon-actions';
 import Drawer from './Drawer';
 import { Button } from '../Button';
@@ -7,7 +6,7 @@ import { useArgs } from '@storybook/preview-api';
 
 const meta: Meta<typeof Drawer> = {
   title: 'Components/Drawer',
-  component: Drawer as any,
+  component: Drawer,
   argTypes: {
     backdropClickExits: {
       // Until this pattern has solidified, we're not going to advertize this feature.
@@ -21,19 +20,6 @@ const meta: Meta<typeof Drawer> = {
     footerBody: <p className="ds-text-body--md ds-u-margin--0">Footer content</p>,
     heading: 'Drawer Heading',
   },
-  // The Drawer was overlapping the docs page, so customizing the docs page to remove the examples
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Subtitle />
-          <Description />
-          <ArgTypes exclude={['backdropClickExits']} />
-        </>
-      ),
-    },
-  },
 };
 export default meta;
 
@@ -67,20 +53,7 @@ const drawerContent = (
   </>
 );
 
-export const DrawerDefault: Story = {
-  render: function Component(args) {
-    return <Drawer {...args}>{drawerContent}</Drawer>;
-  },
-};
-export const DrawerWithStickyPositioning: Story = {
-  ...DrawerDefault,
-  args: {
-    isFooterSticky: true,
-    isHeaderSticky: true,
-  },
-};
-
-export const DrawerToggleWithDrawer: Story = {
+export const Default: Story = {
   render: function Component() {
     const [{ isDrawerVisible, ...args }, updateArgs] = useArgs();
     const showDrawer = () => updateArgs({ isDrawerVisible: true });
@@ -102,7 +75,7 @@ export const DrawerToggleWithDrawer: Story = {
           {drawerContent}
         </Drawer>
         <Button className="ds-c-drawer__toggle" variation="ghost" onClick={showDrawer}>
-          Drawer Toggle
+          Click to toggle drawer
         </Button>
       </>
     );

packages/design-system/src/components/Drawer/Drawer.test.interaction.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+import themes from '../../../../../themes.json';
+
+const sbID = 'components-drawer--default';
+const storyUrl = `http://localhost:6006/iframe.html?viewMode=story&id=${sbID}`;
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+Object.keys(themes).forEach((theme) => {
+  if (themes[theme].incomplete) return;
+
+  test(`Drawer open: ${theme}`, async ({ page }) => {
+    await page.goto(`${storyUrl}&globals=theme:${theme}`);
+    const elem = page.getByRole('button');
+    await elem.click();
+    await sleep(100);
+    await expect(page).toHaveScreenshot(`drawer--open--${theme}.png`, { fullPage: true });
+  });
+});

packages/design-system/src/components/Drawer/Drawer.tsx

@@ -149,7 +149,7 @@ export const Drawer = (props: DrawerProps) => {
 
 Drawer.defaultProps = {
   hasFocusTrap: false,
-  headingLevel: '3',
+  headingLevel: '3' as const,
 };
 
 export default Drawer;

packages/design-system/src/components/HelpDrawer/HelpDrawer.stories.tsx

@@ -1,4 +1,3 @@
-import { ArgTypes, Description, Primary, Subtitle, Title } from '@storybook/blocks';
 import { useState } from 'react';
 import { HelpDrawer } from './HelpDrawer';
 import { Button } from '../Button';
@@ -21,20 +20,6 @@ const meta: Meta<typeof HelpDrawer> = {
     footerBody: 'Footer content',
     heading: 'HelpDrawer Heading',
   },
-  parameters: {
-    docs: {
-      // Customize so we can exclude the backdropClickExits
-      page: () => (
-        <>
-          <Title />
-          <Subtitle />
-          <Description />
-          <Primary />
-          <ArgTypes exclude={['backdropClickExits']} />
-        </>
-      ),
-    },
-  },
 };
 export default meta;
 

packages/design-system/src/components/IdleTimeout/IdleTimeout.stories.tsx

@@ -1,26 +1,16 @@
 import IdleTimeout from './IdleTimeout';
 import IdleTimeoutDialog from './IdleTimeoutDialog';
-import { Title, Subtitle, Description, ArgTypes } from '@storybook/blocks';
+import NoStoryDocTemplate from '../../../../../.storybook/docs/NoStoryDocTemplate.mdx';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
 
-const DocsPage = () => (
-  <>
-    <Title />
-    <Subtitle />
-    <Description />
-    <ArgTypes of={IdleTimeout} />
-  </>
-);
-
 const meta: Meta<typeof IdleTimeout> = {
   title: 'Components/IdleTimeout',
   component: IdleTimeout,
   parameters: {
     docs: {
-      inlineStories: false,
-      page: DocsPage,
+      page: NoStoryDocTemplate,
     },
   },
   args: {

packages/design-system/src/components/PrivacySettingsDialog/PrivacySettingsDialog.stories.tsx

@@ -1,5 +1,5 @@
 import PrivacySettingsDialog from './PrivacySettingsDialog';
-import { Title, Subtitle, Description, ArgTypes } from '@storybook/blocks';
+import NoStoryDocTemplate from '../../../../../.storybook/docs/NoStoryDocTemplate.mdx';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof PrivacySettingsDialog> = {
@@ -12,14 +12,7 @@ const meta: Meta<typeof PrivacySettingsDialog> = {
   parameters: {
     docs: {
       // The dialog was overlapping the docs page, so customizing the docs page to remove the examples
-      page: () => (
-        <>
-          <Title />
-          <Subtitle />
-          <Description />
-          <ArgTypes of={PrivacySettingsDialog} />
-        </>
-      ),
+      page: NoStoryDocTemplate,
     },
   },
 };

packages/design-system/src/components/Spinner/Spinner.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react';
 import classNames from 'classnames';
 import { t } from '../i18n';
 
@@ -36,7 +35,7 @@ export interface SpinnerProps {
  * For information about how and when to use this component,
  * [refer to its full documentation page](https://design.cms.gov/components/spinner/).
  */
-export const Spinner: React.FunctionComponent<SpinnerProps> = (props: SpinnerProps) => {
+export const Spinner = (props: SpinnerProps) => {
   const className = classNames(
     'ds-c-spinner',
     props.size && `ds-c-spinner--${props.size}`,

packages/design-system/src/components/TextField/TextField.tsx

@@ -106,7 +106,7 @@ export type TextFieldProps = BaseTextFieldProps &
  * For information about how and when to use this component,
  * [refer to its full documentation page](https://design.cms.gov/components/text-field/).
  */
-export const TextField: React.FC<TextFieldProps> = (props: TextFieldProps) => {
+export const TextField = (props: TextFieldProps) => {
   const { id: originalId, mask, labelMask, className, ...remainingProps } = props;
   const id = useId('text-field--', originalId);
 

packages/design-system/src/components/TextField/TextInput.tsx

@@ -1,5 +1,4 @@
 import type * as React from 'react';
-import { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
 export type TextInputDefaultValue = string | number;
@@ -79,7 +78,7 @@ export type SingleLineTextInputProps = TextInputProps;
  * `<TextInput>` is also exported for advanced design system use cases, where the internal component can be leveraged to build custom form components
  * As an internal component, it's subject to more breaking changes. Exercise caution using `<TextInput>` outside of those special cases
  */
-const TextInput: FunctionComponent<TextInputProps> = (props: TextInputProps) => {
+const TextInput = (props: TextInputProps) => {
   const {
     ariaLabel,
     fieldClassName,

packages/design-system/src/components/UsaBanner/UsaBanner.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react';
 import { useState } from 'react';
 import classNames from 'classnames';
 import useCssDebugger from '../utilities/useCssDebugger';
@@ -28,7 +27,7 @@ export interface UsaBannerProps {
  * For information about how and when to use this component,
  * [refer to its full documentation page](https://design.cms.gov/components/usa-banner/).
  */
-export const UsaBanner: React.FunctionComponent<UsaBannerProps> = (props: UsaBannerProps) => {
+export const UsaBanner = (props: UsaBannerProps) => {
   useCssDebugger();
 
   const [isBannerOpen, setBannerOpen] = useState<boolean>(false);

packages/design-system/src/components/web-components/preactement/define.test.tsx

@@ -1,4 +1,4 @@
-import { h, Fragment, ComponentFactory } from 'preact';
+import { h, ComponentFactory } from 'preact';
 import { render } from '@testing-library/preact';
 import { define } from './define';
 
@@ -32,11 +32,11 @@ interface IProps {
 
 function Message({ customTitle, value, children }: IProps) {
   return (
-    <Fragment>
+    <>
       {customTitle && <h2>{customTitle}</h2>}
       <em>{value}</em>
       {children}
-    </Fragment>
+    </>
   );
 }