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

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.
deephaven · Aug 23, 2024 · 5b4ce50 · 5b4ce50
1 parent 34befe2
commit 5b4ce50
Show file tree

Hide file tree

Showing 18 changed files with 35 additions and 34 deletions.
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';
 
 /**