refactor: Remove @adobe/react-spectrum imports where prohibited (#2198)

mattrunyon · web-flow · commit 5b4ce50520c0 · 2024-08-23T11:15:11.000-05:00
Fixes #2195 Had to just ignore some of the errors because we compare spectrum components in the styleguide and I didn't want to mess with that for now. I still think it's a bit confusing that there are things in `components/src/spectrum` that aren't pure re-exports (e.g. ComboBox). Makes it confusing to know which to use.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -25,8 +25,11 @@ module.exports = {
           },
           {
             name: '@adobe/react-spectrum',
-            message:
-              'Import from @deephaven/components instead of @adobe/react-spectrum.',
+            message: `Import from ${
+              packageName === '@deephaven/components'
+                ? './spectrum'
+                : '@deephaven/components'
+            } instead of @adobe/react-spectrum.`,
           },
         ],
       },
diff --git a/packages/app-utils/src/plugins/remote-component.config.ts b/packages/app-utils/src/plugins/remote-component.config.ts
@@ -7,6 +7,7 @@ import react from 'react';
 import * as redux from 'redux';
 import * as reactRedux from 'react-redux';
 import ReactDOM from 'react-dom';
+// eslint-disable-next-line no-restricted-imports
 import * as AdobeReactSpectrum from '@adobe/react-spectrum';
 import * as DeephavenAuthPlugins from '@deephaven/auth-plugins';
 import * as DeephavenChart from '@deephaven/chart';
diff --git a/packages/code-studio/src/styleguide/GotoTopButton.tsx b/packages/code-studio/src/styleguide/GotoTopButton.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import { Button, Icon } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { vsChevronUp } from '@deephaven/icons';
diff --git a/packages/code-studio/src/styleguide/Grids.tsx b/packages/code-studio/src/styleguide/Grids.tsx
@@ -8,7 +8,7 @@ import {
 } from '@deephaven/grid';
 import { IrisGrid } from '@deephaven/iris-grid';
 import { useApi } from '@deephaven/jsapi-bootstrap';
-import { Flex } from '@adobe/react-spectrum';
+import { Flex } from '@deephaven/components';
 import MockIrisGridTreeModel from './MockIrisGridTreeModel';
 import StaticExample from './grid-examples/StaticExample';
 import QuadrillionExample from './grid-examples/QuadrillionExample';
diff --git a/packages/code-studio/src/styleguide/Icons.tsx b/packages/code-studio/src/styleguide/Icons.tsx
@@ -6,9 +6,8 @@ import {
   dhSquareFilled,
   dhAddSmall,
 } from '@deephaven/icons';
-import { Icon } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button } from '@deephaven/components';
+import { Button, Icon } from '@deephaven/components';
 import PropTypes from 'prop-types';
 import SampleSection from './SampleSection';
 
diff --git a/packages/code-studio/src/styleguide/Pickers.tsx b/packages/code-studio/src/styleguide/Pickers.tsx
@@ -4,6 +4,7 @@ import {
   ComboBox,
   ComboBoxNormalized,
   Flex,
+  Icon,
   Item,
   ItemKey,
   PICKER_ITEM_HEIGHTS,
@@ -14,7 +15,6 @@ import {
   Text,
 } from '@deephaven/components';
 import { vsPerson } from '@deephaven/icons';
-import { Icon } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { getPositionOfSelectedItem } from '@deephaven/react-hooks';
 import { generateItemElements, generateNormalizedItems } from './utils';
diff --git a/packages/code-studio/src/styleguide/SamplesMenu.tsx b/packages/code-studio/src/styleguide/SamplesMenu.tsx
@@ -1,4 +1,5 @@
 import React, { Key, useCallback, useEffect, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import {
   ActionButton,
   Icon,
diff --git a/packages/code-studio/src/styleguide/SpectrumComparison.tsx b/packages/code-studio/src/styleguide/SpectrumComparison.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/style-prop-object */
 import React, { Fragment, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
 import {
   ActionButton,
   Button,
diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/style-prop-object */
 import React from 'react';
+// eslint-disable-next-line no-restricted-imports
 import {
   ActionButton,
   Button,
diff --git a/packages/components/src/BulkActionBar.tsx b/packages/components/src/BulkActionBar.tsx
@@ -1,5 +1,5 @@
-import { ActionBar } from '@adobe/react-spectrum';
 import type { StyleProps } from '@react-types/shared';
+import { ActionBar } from './spectrum';
 import commonStyles from './SpectrumComponent.module.scss';
 
 export interface BulkActionBarProps {
diff --git a/packages/components/src/SearchableCombobox.tsx b/packages/components/src/SearchableCombobox.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { Key, useCallback } from 'react';
-import { ComboBox, Item, SpectrumComboBoxProps } from '@adobe/react-spectrum';
 import type { DOMRefValue, FocusableRef } from '@react-types/shared';
+import { SpectrumComboBox, Item, SpectrumComboBoxProps } from './spectrum';
 import TextWithTooltip from './TextWithTooltip';
 
 export interface SearchableComboboxProps<TItem, TKey extends Key>
@@ -36,7 +36,7 @@ export function SearchableCombobox<TItem, TKey extends Key>({
   );
 
   return (
-    <ComboBox
+    <SpectrumComboBox
       {...props}
       // The `ref`prop type defined by React Spectrum is incorrect here
       ref={scrollRef as unknown as FocusableRef<HTMLElement>}
@@ -46,7 +46,7 @@ export function SearchableCombobox<TItem, TKey extends Key>({
       onSelectionChange={props.onSelectionChange as (key: Key | null) => void}
     >
       {renderItem}
-    </ComboBox>
+    </SpectrumComboBox>
   );
 }
 
diff --git a/packages/components/src/TableViewEmptyState.tsx b/packages/components/src/TableViewEmptyState.tsx
@@ -1,12 +1,7 @@
 import { useEffect, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  Content,
-  Heading,
-  Icon,
-  IllustratedMessage,
-} from '@adobe/react-spectrum';
 import { vsEmptyWindow } from '@deephaven/icons';
+import { Content, Heading, Icon, IllustratedMessage } from './spectrum';
 
 const DEFAULT_DELAY_MS = 500;
 
diff --git a/packages/components/src/actions/IconActionButton.tsx b/packages/components/src/actions/IconActionButton.tsx
@@ -1,16 +1,12 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import {
-  ActionButton,
-  Icon,
-  SpectrumActionButtonProps,
-} from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ActionButton, Icon, ActionButtonProps } from '../spectrum';
 import { Tooltip } from '../popper';
 import { ACTION_ICON_HEIGHT } from '../UIConstants';
 
 export interface IconActionButtonProps
-  extends Omit<SpectrumActionButtonProps, 'aria-label' | 'isQuiet' | 'height'> {
+  extends Omit<ActionButtonProps, 'aria-label' | 'isQuiet' | 'height'> {
   icon: IconProp;
   label: string;
   tooltip?: string;
diff --git a/packages/components/src/dialogs/ActionButtonDialogTrigger.tsx b/packages/components/src/dialogs/ActionButtonDialogTrigger.tsx
@@ -1,10 +1,9 @@
 import { ReactElement } from 'react';
-import { ActionButton, DialogTrigger, Icon } from '@adobe/react-spectrum';
 import type { SpectrumDialogClose } from '@react-types/dialog';
 import type { StyleProps } from '@react-types/shared';
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Text } from '../spectrum';
+import { ActionButton, DialogTrigger, Icon, Text } from '../spectrum';
 import { Tooltip } from '../popper';
 
 export interface ActionButtonDialogTriggerProps extends StyleProps {
diff --git a/packages/components/src/dialogs/ConfirmationDialog.tsx b/packages/components/src/dialogs/ConfirmationDialog.tsx
@@ -1,16 +1,16 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { ReactElement, ReactNode } from 'react';
+import type { SpectrumLabelableProps } from '@react-types/shared';
+import { useFormWithDetachedSubmitButton } from '@deephaven/react-hooks';
 import {
-  Button,
+  SpectrumButton,
   ButtonGroup,
   Content,
   Dialog,
   Divider,
   Form,
-} from '@adobe/react-spectrum';
-import type { SpectrumLabelableProps } from '@react-types/shared';
-import { useFormWithDetachedSubmitButton } from '@deephaven/react-hooks';
-import { Heading } from '../spectrum';
+  Heading,
+} from '../spectrum';
 import styles from '../SpectrumComponent.module.scss';
 
 export interface ConfirmationDialogProps {
@@ -50,10 +50,10 @@ export function ConfirmationDialog({
         </Form>
       </Content>
       <ButtonGroup>
-        <Button variant="secondary" onPress={onCancel}>
+        <SpectrumButton variant="secondary" onPress={onCancel}>
           Cancel
-        </Button>
-        <Button
+        </SpectrumButton>
+        <SpectrumButton
           {...submitButtonProps}
           // eslint-disable-next-line react/style-prop-object
           style="fill"
@@ -62,7 +62,7 @@ export function ConfirmationDialog({
           type="submit"
         >
           {confirmationButtonLabel}
-        </Button>
+        </SpectrumButton>
       </ButtonGroup>
     </Dialog>
   );
diff --git a/packages/components/src/spectrum/comboBox/ComboBox.tsx b/packages/components/src/spectrum/comboBox/ComboBox.tsx
@@ -11,6 +11,8 @@ import { PickerPropsT, usePickerProps } from '../picker';
 
 export type ComboBoxProps = PickerPropsT<SpectrumComboBoxProps<NormalizedItem>>;
 
+export { SpectrumComboBox };
+
 export const ComboBox = React.forwardRef(function ComboBox(
   { UNSAFE_className, ...props }: ComboBoxProps,
   ref: DOMRef<HTMLDivElement>
diff --git a/packages/react-hooks/src/SpectrumUtils.ts b/packages/react-hooks/src/SpectrumUtils.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import type { SpectrumTextFieldProps } from '@adobe/react-spectrum';
 import { KeyedItem } from '@deephaven/utils';
 import type { DOMRefValue } from '@react-types/shared';
diff --git a/packages/react-hooks/src/useWindowedListData.ts b/packages/react-hooks/src/useWindowedListData.ts
@@ -1,4 +1,5 @@
-import { ListData } from '@adobe/react-spectrum';
+// eslint-disable-next-line no-restricted-imports
+import type { ListData } from '@adobe/react-spectrum';
 import { Key, useCallback, useMemo, useState } from 'react';
 
 /**

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import React, { useCallback, useEffect } from 'react';`
	`2`	`+// eslint-disable-next-line no-restricted-imports`
`2`	`3`	`import { Button, Icon } from '@adobe/react-spectrum';`
`3`	`4`	`import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';`
`4`	`5`	`import { vsChevronUp } from '@deephaven/icons';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import React, { Key, useCallback, useEffect, useState } from 'react';`
	`2`	`+// eslint-disable-next-line no-restricted-imports`
`2`	`3`	`import {`
`3`	`4`	`ActionButton,`
`4`	`5`	`Icon,`