refactor: Updated spectrum imports to use dh components (#424)

Imports for Spectrum components that are available in
`@deephaven/components` have been updated.

Components that are not yet re-exported by @deephaven/components:
- `ButtonGroup`, `Checkbox` - we have our own implementations of these
#433

We also will want to rename some things such that DH components aren't
mapped to `SPECTRUM_ELEMENT_TYPE_PREFIX`
#425

#366

Author: bmingles

package-lock.json

@@ -42,21 +42,21 @@
   },
   "dependencies": {
     "@adobe/react-spectrum": "^3.34.1",
-    "@deephaven/chart": "^0.72.0",
-    "@deephaven/components": "^0.72.0",
-    "@deephaven/dashboard": "^0.72.0",
-    "@deephaven/dashboard-core-plugins": "^0.72.0",
-    "@deephaven/grid": "^0.72.0",
-    "@deephaven/icons": "^0.72.0",
-    "@deephaven/iris-grid": "^0.72.0",
-    "@deephaven/jsapi-bootstrap": "^0.72.0",
-    "@deephaven/jsapi-components": "^0.72.0",
+    "@deephaven/chart": "^0.73.0",
+    "@deephaven/components": "^0.73.0",
+    "@deephaven/dashboard": "^0.73.0",
+    "@deephaven/dashboard-core-plugins": "^0.73.0",
+    "@deephaven/grid": "^0.73.0",
+    "@deephaven/icons": "^0.73.0",
+    "@deephaven/iris-grid": "^0.73.0",
+    "@deephaven/jsapi-bootstrap": "^0.73.0",
+    "@deephaven/jsapi-components": "^0.73.0",
     "@deephaven/jsapi-types": "^1.0.0-dev0.33.3",
-    "@deephaven/log": "^0.72.0",
-    "@deephaven/plugin": "^0.72.0",
-    "@deephaven/react-hooks": "^0.72.0",
-    "@deephaven/redux": "^0.72.0",
-    "@deephaven/utils": "^0.72.0",
+    "@deephaven/log": "^0.73.0",
+    "@deephaven/plugin": "^0.73.0",
+    "@deephaven/react-hooks": "^0.73.0",
+    "@deephaven/redux": "^0.73.0",
+    "@deephaven/utils": "^0.73.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-types/shared": "^3.22.0",
     "json-rpc-2.0": "^1.6.0",

plugins/ui/src/js/package.json

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from '@adobe/react-spectrum';
+import { Text } from '@deephaven/components';
 import type { dh } from '@deephaven/jsapi-types';
 import { TestUtils } from '@deephaven/utils';
 import {

plugins/ui/src/js/src/elements/ElementUtils.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from '@adobe/react-spectrum';
+import { Text } from '@deephaven/components';
 import type { dh } from '@deephaven/jsapi-types';
 import { ITEM_ELEMENT_NAME } from './ElementConstants';
 import ObjectView from './ObjectView';

plugins/ui/src/js/src/elements/ElementUtils.tsx

@@ -1,6 +1,6 @@
+import { ButtonGroup, Checkbox } from '@adobe/react-spectrum';
+import { ValueOf } from '@deephaven/utils';
 import {
-  ButtonGroup,
-  Checkbox,
   Content,
   ContextualHelp,
   Grid,
@@ -14,9 +14,9 @@ import {
   TabList,
   Text,
   ToggleButton,
-} from '@adobe/react-spectrum';
-import { ValueOf } from '@deephaven/utils';
-import { Flex, View } from '@deephaven/components';
+  Flex,
+  View,
+} from '@deephaven/components';
 import {
   ActionButton,
   Button,

plugins/ui/src/js/src/elements/SpectrumElementUtils.ts

@@ -1,17 +1,17 @@
 import React from 'react';
 import {
-  ActionButton as SpectrumActionButton,
-  SpectrumActionButtonProps,
-} from '@adobe/react-spectrum';
+  ActionButton as DHCActionButton,
+  ActionButtonProps as DHCActionButtonProps,
+} from '@deephaven/components';
 import { SerializedButtonEventProps, useButtonProps } from './useButtonProps';
 
 function ActionButton(
-  props: SpectrumActionButtonProps & SerializedButtonEventProps
+  props: DHCActionButtonProps & SerializedButtonEventProps
 ): JSX.Element {
   const buttonProps = useButtonProps(props);
 
   // eslint-disable-next-line react/jsx-props-no-spreading
-  return <SpectrumActionButton {...buttonProps} />;
+  return <DHCActionButton {...buttonProps} />;
 }
 
 export default ActionButton;

plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx

@@ -1,8 +1,11 @@
 import React, { useCallback } from 'react';
-import { Form as SpectrumForm, SpectrumFormProps } from '@adobe/react-spectrum';
+import {
+  Form as DHCForm,
+  FormProps as DHCFormProps,
+} from '@deephaven/components';
 
 function Form(
-  props: SpectrumFormProps & {
+  props: DHCFormProps & {
     onSubmit?: (data: { [key: string]: FormDataEntryValue }) => void;
   }
 ): JSX.Element {
@@ -22,7 +25,7 @@ function Form(
 
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <SpectrumForm onSubmit={onSubmit} {...otherProps} />
+    <DHCForm onSubmit={onSubmit} {...otherProps} />
   );
 }
 

plugins/ui/src/js/src/elements/spectrum/Form.tsx

@@ -1,15 +1,15 @@
 import React, { useCallback, useState } from 'react';
 import {
-  RangeSlider as SpectrumRangeSlider,
-  SpectrumRangeSliderProps,
-} from '@adobe/react-spectrum';
+  RangeSlider as DHCRangeSlider,
+  RangeSliderProps as DHCRangeSliderProps,
+} from '@deephaven/components';
 import { useDebouncedCallback } from '@deephaven/react-hooks';
 
 const VALUE_CHANGE_DEBOUNCE = 250;
 
 const EMPTY_FUNCTION = () => undefined;
 
-function RangeSlider(props: SpectrumRangeSliderProps): JSX.Element {
+function RangeSlider(props: DHCRangeSliderProps): JSX.Element {
   const {
     defaultValue = { start: 0, end: 0 },
     value: propValue,
@@ -34,7 +34,7 @@ function RangeSlider(props: SpectrumRangeSliderProps): JSX.Element {
 
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <SpectrumRangeSlider value={value} onChange={onChange} {...otherProps} />
+    <DHCRangeSlider value={value} onChange={onChange} {...otherProps} />
   );
 }
 

plugins/ui/src/js/src/elements/spectrum/RangeSlider.tsx

@@ -1,15 +1,15 @@
 import React, { useCallback, useState } from 'react';
 import {
-  Slider as SpectrumSlider,
-  SpectrumSliderProps,
-} from '@adobe/react-spectrum';
+  Slider as DHCSlider,
+  SliderProps as DHCSliderProps,
+} from '@deephaven/components';
 import { useDebouncedCallback } from '@deephaven/react-hooks';
 
 const VALUE_CHANGE_DEBOUNCE = 250;
 
 const EMPTY_FUNCTION = () => undefined;
 
-function Slider(props: SpectrumSliderProps): JSX.Element {
+function Slider(props: DHCSliderProps): JSX.Element {
   const {
     defaultValue = 0,
     value: propValue,
@@ -34,7 +34,7 @@ function Slider(props: SpectrumSliderProps): JSX.Element {
 
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <SpectrumSlider value={value} onChange={onChange} {...otherProps} />
+    <DHCSlider value={value} onChange={onChange} {...otherProps} />
   );
 }
 

plugins/ui/src/js/src/elements/spectrum/Slider.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import {
-  TabPanels as SpectrumTabPanels,
-  SpectrumTabPanelsProps,
-} from '@adobe/react-spectrum';
+  TabPanels as DHCTabPanels,
+  TabPanelsProps as DHCTabPanelsProps,
+} from '@deephaven/components';
 
-function TabPanels(
-  props: SpectrumTabPanelsProps<React.ReactNode>
-): JSX.Element {
+function TabPanels(props: DHCTabPanelsProps<React.ReactNode>): JSX.Element {
   const { UNSAFE_style: unsafeStyle, ...otherProps } = props;
 
   return (
-    <SpectrumTabPanels
+    <DHCTabPanels
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...otherProps}
       UNSAFE_style={{ display: 'flex', ...unsafeStyle }}