refactor: Cleanup js mappings for ui components + utils (#530)

* Removed "spectrum" verbiage from utils, keys, etc.
* Explicitly mapped all components in WidgetUtils
* Added some barrel files
* Fixed child wrapping (I think this is what fixed the ui.column layout
in the e2e tests)

resolves #425

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

@@ -3,10 +3,10 @@ import {
   ActionButton as DHCActionButton,
   ActionButtonProps as DHCActionButtonProps,
 } from '@deephaven/components';
-import { useButtonProps } from './useButtonProps';
-import { SerializedButtonEventProps } from '../SerializedPropTypes';
+import { useButtonProps } from './hooks/useButtonProps';
+import { SerializedButtonEventProps } from './model/SerializedPropTypes';
 
-function ActionButton(
+export function ActionButton(
   props: SerializedButtonEventProps<DHCActionButtonProps>
 ): JSX.Element {
   const buttonProps = useButtonProps(props);

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

@@ -5,15 +5,15 @@ import {
 import {
   SerializedSelectionProps,
   useSelectionProps,
-} from './spectrum/useSelectionProps';
+} from './hooks/useSelectionProps';
 
 export type SerializedActionGroupProps<T> = Omit<
   DHActionGroupProps<T>,
   'selectionMode' | 'onChange' | 'onSelectionChange'
 > &
   SerializedSelectionProps;
 
-function ActionGroup<T>({
+export function ActionGroup<T>({
   selectionMode: selectionModeMaybeUppercase,
   onChange: serializedOnChange,
   onSelectionChange: serializedOnSelectionChange,

plugins/ui/src/js/src/elements/spectrum/Button.tsx → plugins/ui/src/js/src/elements/Button.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { SpectrumButton, SpectrumButtonProps } from '@deephaven/components';
-import { useButtonProps } from './useButtonProps';
-import { SerializedButtonEventProps } from '../SerializedPropTypes';
+import { useButtonProps } from './hooks/useButtonProps';
+import { SerializedButtonEventProps } from './model/SerializedPropTypes';
 
-function Button(
+export function Button(
   props: SerializedButtonEventProps<SpectrumButtonProps>
 ): JSX.Element {
   const buttonProps = useButtonProps(props);

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

@@ -4,7 +4,7 @@ import {
   FormProps as DHCFormProps,
 } from '@deephaven/components';
 
-function Form(
+export function Form(
   props: DHCFormProps & {
     onSubmit?: (data: { [key: string]: FormDataEntryValue }) => void;
   }

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { HTMLElementNode, getHTMLTag } from './HTMLElementUtils';
-import { ELEMENT_KEY } from './ElementUtils';
+import { HTMLElementNode, getHTMLTag } from './utils/HTMLElementUtils';
+import { ELEMENT_KEY } from './utils/ElementUtils';
 
 export type HTMLElementViewProps = {
   element: HTMLElementNode;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Icon } from '@deephaven/components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { getIcon, IconElementNode } from './IconElementUtils';
-import { ELEMENT_KEY } from './ElementUtils';
+import { getIcon, IconElementNode } from './utils/IconElementUtils';
+import { ELEMENT_KEY } from './utils/ElementUtils';
 
 export type IconElementViewProps = {
   element: IconElementNode;

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

@@ -3,11 +3,14 @@ import { isElementOfType } from '@deephaven/react-hooks';
 import { getSettings, RootState } from '@deephaven/redux';
 import { ListView as DHListView } from '@deephaven/components';
 import { ListView as DHListViewJSApi } from '@deephaven/jsapi-components';
-import { SerializedListViewProps, useListViewProps } from './useListViewProps';
+import {
+  SerializedListViewProps,
+  useListViewProps,
+} from './hooks/useListViewProps';
 import ObjectView from './ObjectView';
-import useReExportedTable from './useReExportedTable';
+import useReExportedTable from './hooks/useReExportedTable';
 
-function ListView(props: SerializedListViewProps): JSX.Element | null {
+export function ListView(props: SerializedListViewProps): JSX.Element | null {
   const settings = useSelector(getSettings<RootState>);
   const { children, ...listViewProps } = useListViewProps(props);
 

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

@@ -3,11 +3,11 @@ import { Picker as DHPicker } from '@deephaven/components';
 import { Picker as DHPickerJSApi } from '@deephaven/jsapi-components';
 import { isElementOfType } from '@deephaven/react-hooks';
 import { getSettings, RootState } from '@deephaven/redux';
-import { SerializedPickerProps, usePickerProps } from './usePickerProps';
+import { SerializedPickerProps, usePickerProps } from './hooks/usePickerProps';
 import ObjectView from './ObjectView';
-import useReExportedTable from './useReExportedTable';
+import useReExportedTable from './hooks/useReExportedTable';
 
-function Picker(props: SerializedPickerProps): JSX.Element | null {
+export function Picker(props: SerializedPickerProps): JSX.Element | null {
   const settings = useSelector(getSettings<RootState>);
   const { children, ...pickerProps } = usePickerProps(props);
 

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

@@ -5,15 +5,15 @@ import {
 import {
   SerializedFocusEventProps,
   SerializedKeyboardEventProps,
-} from './SerializedPropTypes';
-import { useFocusEventCallback } from './spectrum/useFocusEventCallback';
-import { useKeyboardEventCallback } from './spectrum/useKeyboardEventCallback';
+} from './model/SerializedPropTypes';
+import { useFocusEventCallback } from './hooks/useFocusEventCallback';
+import { useKeyboardEventCallback } from './hooks/useKeyboardEventCallback';
 
 export type SerializedRadioProps = SerializedFocusEventProps<
   SerializedKeyboardEventProps<DHRadioProps>
 >;
 
-function Radio({
+export function Radio({
   onFocus: serializedOnFocus,
   onBlur: serializedOnBlur,
   onKeyDown: serializedOnKeyDown,

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

@@ -3,8 +3,8 @@ import {
   RadioGroupProps as DHRadioGroupProps,
 } from '@deephaven/components';
 import { Orientation } from '@react-types/shared';
-import { SerializedFocusEventProps } from './SerializedPropTypes';
-import { useFocusEventCallback } from './spectrum/useFocusEventCallback';
+import { SerializedFocusEventProps } from './model/SerializedPropTypes';
+import { useFocusEventCallback } from './hooks/useFocusEventCallback';
 
 export type SerializedRadioGroupProps = Omit<
   SerializedFocusEventProps<DHRadioGroupProps>,
@@ -13,7 +13,7 @@ export type SerializedRadioGroupProps = Omit<
   orientation?: Orientation | Uppercase<Orientation>;
 };
 
-function RadioGroup({
+export function RadioGroup({
   onFocus: serializedOnFocus,
   onBlur: serializedOnBlur,
   orientation: orientationMaybeUppercase,

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

@@ -9,7 +9,7 @@ const VALUE_CHANGE_DEBOUNCE = 250;
 
 const EMPTY_FUNCTION = () => undefined;
 
-function RangeSlider(props: DHCRangeSliderProps): JSX.Element {
+export function RangeSlider(props: DHCRangeSliderProps): JSX.Element {
   const {
     defaultValue = { start: 0, end: 0 },
     value: propValue,

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

@@ -9,7 +9,7 @@ const VALUE_CHANGE_DEBOUNCE = 250;
 
 const EMPTY_FUNCTION = () => undefined;
 
-function Slider(props: DHCSliderProps): JSX.Element {
+export function Slider(props: DHCSliderProps): JSX.Element {
   const {
     defaultValue = 0,
     value: propValue,

plugins/ui/src/js/src/elements/spectrum/TabPanels.tsx → plugins/ui/src/js/src/elements/TabPanels.tsx

@@ -4,7 +4,9 @@ import {
   TabPanelsProps as DHCTabPanelsProps,
 } from '@deephaven/components';
 
-function TabPanels(props: DHCTabPanelsProps<React.ReactNode>): JSX.Element {
+export function TabPanels(
+  props: DHCTabPanelsProps<React.ReactNode>
+): JSX.Element {
   const { UNSAFE_style: unsafeStyle, ...otherProps } = props;
 
   return (

plugins/ui/src/js/src/elements/spectrum/TextField.tsx → plugins/ui/src/js/src/elements/TextField.tsx

@@ -16,7 +16,7 @@ interface TextFieldProps extends DHCTextFieldProps {
   onChange?: (value: string) => Promise<void>;
 }
 
-function TextField(props: TextFieldProps): JSX.Element {
+export function TextField(props: TextFieldProps): JSX.Element {
   const {
     defaultValue = '',
     value: propValue,

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

@@ -13,12 +13,12 @@ import type { dh } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
 import { getSettings, RootState } from '@deephaven/redux';
 import { EMPTY_ARRAY } from '@deephaven/utils';
-import { UITableProps } from './UITableUtils';
-import UITableMouseHandler from './UITableMouseHandler';
+import { UITableProps } from './utils/UITableUtils';
+import UITableMouseHandler from './utils/UITableMouseHandler';
 
 const log = Log.module('@deephaven/js-plugin-ui/UITable');
 
-function UITable({
+export function UITable({
   onCellPress,
   onCellDoublePress,
   onColumnPress,

plugins/ui/src/js/src/elements/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './useButtonProps';
+export * from './useFocusEventCallback';
+export * from './useKeyboardEventCallback';
+export * from './useListViewProps';
+export * from './usePickerProps';
+export * from './usePressEventCallback';
+export * from './useReExportedTable';
+export * from './useSelectionProps';

plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts → plugins/ui/src/js/src/elements/hooks/useButtonProps.ts

@@ -1,8 +1,8 @@
 import { usePressEventCallback } from './usePressEventCallback';
 import { useFocusEventCallback } from './useFocusEventCallback';
 import { useKeyboardEventCallback } from './useKeyboardEventCallback';
-import { mapSpectrumProps } from './mapSpectrumProps';
-import { SerializedButtonEventProps } from '../SerializedPropTypes';
+import { SerializedButtonEventProps } from '../model/SerializedPropTypes';
+import { wrapTextChildren } from '../utils';
 
 // returns SpectrumButtonProps
 export function useButtonProps<T>(props: SerializedButtonEventProps<T>): T {
@@ -15,6 +15,7 @@ export function useButtonProps<T>(props: SerializedButtonEventProps<T>): T {
     onBlur: propOnBlur,
     onKeyDown: propOnKeyDown,
     onKeyUp: propOnKeyUp,
+    children,
     ...otherProps
   } = props;
 
@@ -36,7 +37,8 @@ export function useButtonProps<T>(props: SerializedButtonEventProps<T>): T {
     onBlur,
     onKeyDown,
     onKeyUp,
-    ...mapSpectrumProps(otherProps),
+    children: wrapTextChildren(children),
+    ...otherProps,
   } as T;
 }
 

plugins/ui/src/js/src/elements/spectrum/useFocusEventCallback.ts → plugins/ui/src/js/src/elements/hooks/useFocusEventCallback.ts

@@ -1,5 +1,5 @@
 import { FocusEvent, useCallback } from 'react';
-import getTargetName from './EventUtils';
+import { getTargetName } from '../utils';
 
 export function serializeFocusEvent(event: FocusEvent): SerializedFocusEvent {
   const { relatedTarget, target, type } = event;