From bf18625370c8e570b6a55abc9d27a57965de489b Mon Sep 17 00:00:00 2001 From: Matthew Runyon Date: Tue, 20 Aug 2024 14:16:18 -0500 Subject: [PATCH 1/2] refactor: Remove @adobe/react-spectrum imports where prohibited --- .eslintrc.js | 15 +++++++++------ package-lock.json | 4 ++-- .../src/plugins/remote-component.config.ts | 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 ++ .../components/src/spectrum/listView/index.ts | 1 + packages/react-hooks/package.json | 2 +- packages/react-hooks/src/SpectrumUtils.ts | 4 ++-- .../react-hooks/src/useWindowedListData.ts | 2 +- packages/react-hooks/tsconfig.json | 6 +++++- 15 files changed, 41 insertions(+), 40 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 30c99044e..0c690fc01 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -23,18 +23,21 @@ module.exports = { name: packageName, message: 'Forbid importing from owning @deephaven package.', }, - { - name: '@adobe/react-spectrum', - message: - 'Import from @deephaven/components instead of @adobe/react-spectrum.', - }, - ], + packageName !== '@dseephaven/components' + ? { + name: '@adobe/react-spectrum', + message: + 'Import from @deephaven/components instead of @adobe/react-spectrum.', + } + : null, + ].filter(Boolean), }, overrides: [ { files: [ 'packages/components/src/spectrum/**/*.@(ts|tsx)', 'packages/components/src/theme/**/*.@(ts|tsx)', + 'packages/code-studio/src/styleguide/**/*.@(ts|tsx)', ], rules: { 'no-restricted-imports': [ diff --git a/package-lock.json b/package-lock.json index cd7382edb..26b5ea632 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30166,7 +30166,7 @@ "version": "0.89.0", "license": "Apache-2.0", "dependencies": { - "@adobe/react-spectrum": "3.35.1", + "@deephaven/components": "file:../components", "@deephaven/log": "file:../log", "@deephaven/utils": "file:../utils", "lodash.debounce": "^4.0.8", @@ -32305,7 +32305,7 @@ "@deephaven/react-hooks": { "version": "file:packages/react-hooks", "requires": { - "@adobe/react-spectrum": "3.35.1", + "@deephaven/components": "file:../components", "@deephaven/log": "file:../log", "@deephaven/utils": "file:../utils", "lodash.debounce": "^4.0.8", diff --git a/packages/app-utils/src/plugins/remote-component.config.ts b/packages/app-utils/src/plugins/remote-component.config.ts index 2646d1b14..9fa7bebb9 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/components/src/BulkActionBar.tsx b/packages/components/src/BulkActionBar.tsx index 705439877..df6d03551 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 33af6ab35..ddb5f23b1 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 b4c69a254..449de9586 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 c96db9de8..43ae0fbd5 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 694ceaf36..130d3f020 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 d28244dc7..e5e0bcba4 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 4a689acd1..3681174ee 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/components/src/spectrum/listView/index.ts b/packages/components/src/spectrum/listView/index.ts index dc19f6516..6365d234c 100644 --- a/packages/components/src/spectrum/listView/index.ts +++ b/packages/components/src/spectrum/listView/index.ts @@ -1,3 +1,4 @@ +export type { ListData } from '@adobe/react-spectrum'; export * from './ListView'; export * from './ListViewNormalized'; export * from './ListViewWrapper'; diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json index f6cca8826..be22b30f7 100644 --- a/packages/react-hooks/package.json +++ b/packages/react-hooks/package.json @@ -21,7 +21,7 @@ "build:babel": "babel ./src --out-dir ./dist --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward" }, "dependencies": { - "@adobe/react-spectrum": "3.35.1", + "@deephaven/components": "file:../components", "@deephaven/log": "file:../log", "@deephaven/utils": "file:../utils", "lodash.debounce": "^4.0.8", diff --git a/packages/react-hooks/src/SpectrumUtils.ts b/packages/react-hooks/src/SpectrumUtils.ts index 41e2ab365..e81e6d7c9 100644 --- a/packages/react-hooks/src/SpectrumUtils.ts +++ b/packages/react-hooks/src/SpectrumUtils.ts @@ -1,4 +1,4 @@ -import type { SpectrumTextFieldProps } from '@adobe/react-spectrum'; +import type { TextFieldProps } from '@deephaven/components'; import { KeyedItem } from '@deephaven/utils'; import type { DOMRefValue } from '@react-types/shared'; @@ -11,7 +11,7 @@ import type { DOMRefValue } from '@react-types/shared'; export function createValidationProps( isValid: boolean, errorMessage: string -): Pick { +): Pick { if (isValid) { return {}; } diff --git a/packages/react-hooks/src/useWindowedListData.ts b/packages/react-hooks/src/useWindowedListData.ts index bda7f7202..6bf03b4ce 100644 --- a/packages/react-hooks/src/useWindowedListData.ts +++ b/packages/react-hooks/src/useWindowedListData.ts @@ -1,4 +1,4 @@ -import { ListData } from '@adobe/react-spectrum'; +import type { ListData } from '@deephaven/components'; import { Key, useCallback, useMemo, useState } from 'react'; /** diff --git a/packages/react-hooks/tsconfig.json b/packages/react-hooks/tsconfig.json index 80c334df0..70cbfee8c 100644 --- a/packages/react-hooks/tsconfig.json +++ b/packages/react-hooks/tsconfig.json @@ -6,5 +6,9 @@ }, "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"], "exclude": ["node_modules", "src/**/*.test.*", "src/**/__mocks__/*"], - "references": [{ "path": "../log" }, { "path": "../utils" }] + "references": [ + { "path": "../components" }, + { "path": "../log" }, + { "path": "../utils" } + ] } From 7f388aabe248d54c1b1f399f45e555851cc7c230 Mon Sep 17 00:00:00 2001 From: Matthew Runyon Date: Tue, 20 Aug 2024 14:32:18 -0500 Subject: [PATCH 2/2] Fix circular dependency and styleguide lint errors --- .eslintrc.js | 18 +++++++++--------- package-lock.json | 4 ++-- .../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 + .../components/src/spectrum/listView/index.ts | 1 - packages/react-hooks/package.json | 2 +- packages/react-hooks/src/SpectrumUtils.ts | 5 +++-- .../react-hooks/src/useWindowedListData.ts | 3 ++- packages/react-hooks/tsconfig.json | 6 +----- 14 files changed, 25 insertions(+), 25 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 0c690fc01..a73070c54 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -23,21 +23,21 @@ module.exports = { name: packageName, message: 'Forbid importing from owning @deephaven package.', }, - packageName !== '@dseephaven/components' - ? { - name: '@adobe/react-spectrum', - message: - 'Import from @deephaven/components instead of @adobe/react-spectrum.', - } - : null, - ].filter(Boolean), + { + name: '@adobe/react-spectrum', + message: `Import from ${ + packageName === '@deephaven/components' + ? './spectrum' + : '@deephaven/components' + } instead of @adobe/react-spectrum.`, + }, + ], }, overrides: [ { files: [ 'packages/components/src/spectrum/**/*.@(ts|tsx)', 'packages/components/src/theme/**/*.@(ts|tsx)', - 'packages/code-studio/src/styleguide/**/*.@(ts|tsx)', ], rules: { 'no-restricted-imports': [ diff --git a/package-lock.json b/package-lock.json index 26b5ea632..cd7382edb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30166,7 +30166,7 @@ "version": "0.89.0", "license": "Apache-2.0", "dependencies": { - "@deephaven/components": "file:../components", + "@adobe/react-spectrum": "3.35.1", "@deephaven/log": "file:../log", "@deephaven/utils": "file:../utils", "lodash.debounce": "^4.0.8", @@ -32305,7 +32305,7 @@ "@deephaven/react-hooks": { "version": "file:packages/react-hooks", "requires": { - "@deephaven/components": "file:../components", + "@adobe/react-spectrum": "3.35.1", "@deephaven/log": "file:../log", "@deephaven/utils": "file:../utils", "lodash.debounce": "^4.0.8", diff --git a/packages/code-studio/src/styleguide/GotoTopButton.tsx b/packages/code-studio/src/styleguide/GotoTopButton.tsx index 19cda8d23..499a65359 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 4ecb48f43..348197cdd 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 4db54f89c..27e982845 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 d0b67104e..40838ab50 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 d732961a4..3f6bcdd70 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 774ce0f63..97778a6fb 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 f5c5f3684..26c8cfc1d 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/spectrum/listView/index.ts b/packages/components/src/spectrum/listView/index.ts index 6365d234c..dc19f6516 100644 --- a/packages/components/src/spectrum/listView/index.ts +++ b/packages/components/src/spectrum/listView/index.ts @@ -1,4 +1,3 @@ -export type { ListData } from '@adobe/react-spectrum'; export * from './ListView'; export * from './ListViewNormalized'; export * from './ListViewWrapper'; diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json index be22b30f7..f6cca8826 100644 --- a/packages/react-hooks/package.json +++ b/packages/react-hooks/package.json @@ -21,7 +21,7 @@ "build:babel": "babel ./src --out-dir ./dist --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward" }, "dependencies": { - "@deephaven/components": "file:../components", + "@adobe/react-spectrum": "3.35.1", "@deephaven/log": "file:../log", "@deephaven/utils": "file:../utils", "lodash.debounce": "^4.0.8", diff --git a/packages/react-hooks/src/SpectrumUtils.ts b/packages/react-hooks/src/SpectrumUtils.ts index e81e6d7c9..451b00c2e 100644 --- a/packages/react-hooks/src/SpectrumUtils.ts +++ b/packages/react-hooks/src/SpectrumUtils.ts @@ -1,4 +1,5 @@ -import type { TextFieldProps } from '@deephaven/components'; +// 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'; @@ -11,7 +12,7 @@ import type { DOMRefValue } from '@react-types/shared'; export function createValidationProps( isValid: boolean, errorMessage: string -): Pick { +): Pick { if (isValid) { return {}; } diff --git a/packages/react-hooks/src/useWindowedListData.ts b/packages/react-hooks/src/useWindowedListData.ts index 6bf03b4ce..e8cc97a0b 100644 --- a/packages/react-hooks/src/useWindowedListData.ts +++ b/packages/react-hooks/src/useWindowedListData.ts @@ -1,4 +1,5 @@ -import type { ListData } from '@deephaven/components'; +// eslint-disable-next-line no-restricted-imports +import type { ListData } from '@adobe/react-spectrum'; import { Key, useCallback, useMemo, useState } from 'react'; /** diff --git a/packages/react-hooks/tsconfig.json b/packages/react-hooks/tsconfig.json index 70cbfee8c..80c334df0 100644 --- a/packages/react-hooks/tsconfig.json +++ b/packages/react-hooks/tsconfig.json @@ -6,9 +6,5 @@ }, "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"], "exclude": ["node_modules", "src/**/*.test.*", "src/**/__mocks__/*"], - "references": [ - { "path": "../components" }, - { "path": "../log" }, - { "path": "../utils" } - ] + "references": [{ "path": "../log" }, { "path": "../utils" }] }