From 5b4ce50520c05ee05a761fe2595183a180c3230b Mon Sep 17 00:00:00 2001 From: Matthew Runyon Date: Fri, 23 Aug 2024 11:15:11 -0500 Subject: [PATCH] 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. --- .eslintrc.js | 7 +++++-- .../src/plugins/remote-component.config.ts | 1 + .../src/styleguide/GotoTopButton.tsx | 1 + packages/code-studio/src/styleguide/Grids.tsx | 2 +- packages/code-studio/src/styleguide/Icons.tsx | 3 +-- .../code-studio/src/styleguide/Pickers.tsx | 2 +- .../code-studio/src/styleguide/SamplesMenu.tsx | 1 + .../src/styleguide/SpectrumComparison.tsx | 1 + .../src/styleguide/SpectrumComponents.tsx | 1 + packages/components/src/BulkActionBar.tsx | 2 +- packages/components/src/SearchableCombobox.tsx | 6 +++--- .../components/src/TableViewEmptyState.tsx | 7 +------ .../src/actions/IconActionButton.tsx | 8 ++------ .../src/dialogs/ActionButtonDialogTrigger.tsx | 3 +-- .../src/dialogs/ConfirmationDialog.tsx | 18 +++++++++--------- .../src/spectrum/comboBox/ComboBox.tsx | 2 ++ packages/react-hooks/src/SpectrumUtils.ts | 1 + .../react-hooks/src/useWindowedListData.ts | 3 ++- 18 files changed, 35 insertions(+), 34 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 30c99044eb..a73070c545 100644 --- 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 index 2646d1b14a..9fa7bebb93 100644 --- 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 index 19cda8d234..499a65359d 100644 --- 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 index 4ecb48f438..348197cdd5 100644 --- 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 index 4db54f89cc..27e982845b 100644 --- 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 index d0b67104eb..40838ab50c 100644 --- 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 index d732961a42..3f6bcdd701 100644 --- 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 index 774ce0f637..97778a6fb2 100644 --- 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 index f5c5f3684b..26c8cfc1d7 100644 --- 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 index 7054398770..df6d035516 100644 --- 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 index 33af6ab35c..ddb5f23b19 100644 --- 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 @@ -36,7 +36,7 @@ export function SearchableCombobox({ ); return ( - } @@ -46,7 +46,7 @@ export function SearchableCombobox({ onSelectionChange={props.onSelectionChange as (key: Key | null) => void} > {renderItem} - + ); } diff --git a/packages/components/src/TableViewEmptyState.tsx b/packages/components/src/TableViewEmptyState.tsx index b4c69a2548..449de95861 100644 --- 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 index c96db9de8b..43ae0fbd57 100644 --- 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 { + extends Omit { icon: IconProp; label: string; tooltip?: string; diff --git a/packages/components/src/dialogs/ActionButtonDialogTrigger.tsx b/packages/components/src/dialogs/ActionButtonDialogTrigger.tsx index 694ceaf36a..130d3f0208 100644 --- 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 index d28244dc76..e5e0bcba42 100644 --- 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({ - - + ); diff --git a/packages/components/src/spectrum/comboBox/ComboBox.tsx b/packages/components/src/spectrum/comboBox/ComboBox.tsx index 4a689acd1a..3681174ee9 100644 --- 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>; +export { SpectrumComboBox }; + export const ComboBox = React.forwardRef(function ComboBox( { UNSAFE_className, ...props }: ComboBoxProps, ref: DOMRef diff --git a/packages/react-hooks/src/SpectrumUtils.ts b/packages/react-hooks/src/SpectrumUtils.ts index 41e2ab3656..451b00c2ed 100644 --- 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 index bda7f7202c..e8cc97a0b1 100644 --- 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'; /**