refactor: Cleanup component mappings and utils (python side) (#523)

This is the first of 2 PRs to simplify our DH UI component mappings
since we no longer have the Spectrum dependency. This one addresses the
python modules + minimal re-mapping in the JS to make it still work. The
next one will cleanup the .js side more holistically.

* Removed components/spectrum subfolder and moved component modules to
parent
* Moved types into a components/types folder
* Minimal changes to SpectrumUtils to make mapping still work
* Added a broadstrokes e2e test to prove all components render

resolves #425

plugins/ui/src/deephaven/ui/components/__init__.py

@@ -1,26 +1,52 @@
+from .action_button import action_button
 from .action_group import action_group
 from .action_menu import action_menu
-from .icon import icon
-from .make_component import make_component as component
-from .fragment import fragment
-from .panel import panel
-from .spectrum import *
-from .table import table
-from .dashboard import dashboard
-from .row import row
+from .basic import (
+    component_element,
+    grid,
+    heading,
+    icon_wrapper,
+    illustrated_message,
+    form,
+    switch,
+    tabs,
+    tab_list,
+    tab_panels,
+    text,
+    view,
+)
+from .button import button
+from .button_group import button_group
+from .checkbox import checkbox
 from .column import column
-from .stack import stack
-from .picker import picker
-from .action_group import action_group
-from .section import section
-from .action_menu import action_menu
+from .combo_box import combo_box
+from .content import content
+from .contextual_help import contextual_help
+from .dashboard import dashboard
+from .date_picker import date_picker
+from .flex import flex
+from .fragment import fragment
+from .icon import icon
 from .item import item
-from .list_view import list_view
+from .item_table_source import item_table_source
 from .list_action_group import list_action_group
 from .list_action_menu import list_action_menu
-from .item_table_source import item_table_source
+from .list_view import list_view
+from .make_component import make_component as component
+from .number_field import number_field
+from .panel import panel
+from .picker import picker
 from .radio import radio
 from .radio_group import radio_group
+from .range_slider import range_slider
+from .row import row
+from .section import section
+from .slider import slider
+from .stack import stack
+from .table import table
+from .text_field import text_field
+from .toggle_button import toggle_button
+from .types import *
 
 from . import html
 
@@ -29,14 +55,17 @@
     "action_button",
     "action_group",
     "action_menu",
+    "component_element",
     "button",
     "button_group",
     "checkbox",
     "column",
+    "combo_box",
     "component",
     "content",
     "contextual_help",
     "dashboard",
+    "date_picker",
     "flex",
     "form",
     "fragment",
@@ -60,7 +89,6 @@
     "row",
     "section",
     "slider",
-    "spectrum_element",
     "stack",
     "switch",
     "table",

plugins/ui/src/deephaven/ui/components/spectrum/action_button.py → plugins/ui/src/deephaven/ui/components/action_button.py

@@ -1,14 +1,17 @@
 from __future__ import annotations
 from typing import Any, Callable
-from .accessibility import AriaExpanded, AriaHasPopup, AriaPressed
-from .events import (
+from .types import (
+    # Accessibility
+    AriaExpanded,
+    AriaHasPopup,
+    AriaPressed,
+    # Events
     ButtonType,
     FocusEventCallable,
     KeyboardEventCallable,
     PressEventCallable,
     StaticColor,
-)
-from .layout import (
+    # Layout
     AlignSelf,
     CSSProperties,
     DimensionValue,
@@ -17,8 +20,9 @@
     Number,
     Position,
 )
-from .basic import spectrum_element
-from ...elements import Element
+
+from .basic import component_element
+from ..elements import Element
 
 ActionButtonElement = Element
 
@@ -159,7 +163,7 @@ def action_button(
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
     """
-    return spectrum_element(
+    return component_element(
         "ActionButton",
         *children,
         type=type,

plugins/ui/src/deephaven/ui/components/action_group.py

@@ -3,14 +3,12 @@
 from typing import Any, Callable, Iterable
 
 
-from ..components.spectrum.events import (
+from .types import (
+    # Events
     ButtonLabelBehavior,
     Orientation,
     StaticColor,
-)
-from ..elements import Element, BaseElement
-from ..types import ActionGroupDensity, SelectedKeys, SelectionMode, Key, Selection
-from .spectrum.layout import (
+    # Layout
     AlignSelf,
     CSSProperties,
     DimensionValue,
@@ -19,6 +17,9 @@
     OverflowMode,
     Position,
 )
+from .basic import component_element
+from ..elements import Element
+from ..types import ActionGroupDensity, SelectedKeys, SelectionMode, Key, Selection
 
 
 def action_group(
@@ -153,8 +154,8 @@ def action_group(
         UNSAFE_class_name: Set the CSS className for the element. Only use as a last resort. Use style props instead.
         UNSAFE_style: Set the inline style for the element. Only use as a last resort. Use style props instead.
     """
-    return BaseElement(
-        "deephaven.ui.components.ActionGroup",
+    return component_element(
+        "ActionGroup",
         *children,
         is_emphasized=is_emphasized,
         density=density,

plugins/ui/src/deephaven/ui/components/action_menu.py

@@ -5,11 +5,20 @@
 from .item import Item
 from .section import SectionElement
 
-from .spectrum.events import TriggerType
 from ..types import Key, ActionKey, ActionMenuDirection
-from ..elements import BaseElement, Element
+from .basic import component_element
+from ..elements import Element
 
-from .spectrum import (
+from ..types import (
+    Key,
+    ActionKey,
+    ActionMenuDirection,
+)
+
+from .types import (
+    # Events
+    TriggerType,
+    # Layout
     Alignment,
     AlignSelf,
     CSSProperties,
@@ -141,8 +150,8 @@ def action_menu(
         UNSAFE_class_name: Set the CSS className for the element. Only use as a last resort. Use style props instead.
         UNSAFE_style: Set the inline style for the element. Only use as a last resort. Use style props instead.
     """
-    return BaseElement(
-        f"deephaven.ui.components.ActionMenu",
+    return component_element(
+        f"ActionMenu",
         *children,
         is_disabled=is_disabled,
         is_quiet=is_quiet,

plugins/ui/src/deephaven/ui/components/spectrum/basic.py → plugins/ui/src/deephaven/ui/components/basic.py

@@ -1,30 +1,31 @@
 from __future__ import annotations
 from typing import Any
-from ...elements import BaseElement
+from ..elements import BaseElement
 
 
-def spectrum_element(name: str, /, *children: Any, **props: Any) -> BaseElement:
+def component_element(name: str, /, *children: Any, **props: Any) -> BaseElement:
     """
-    Base class for UI elements that are part of the Spectrum design system.
-    All names are automatically prefixed with "deephaven.ui.spectrum.", and all props are automatically camelCased.
+    Base class for UI elements.
+    All names are automatically prefixed with "deephaven.ui.components.", and
+    all props are automatically camelCased.
     """
-    return BaseElement(f"deephaven.ui.spectrum.{name}", *children, **props)
+    return BaseElement(f"deephaven.ui.components.{name}", *children, **props)
 
 
 def grid(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Grid component.
     https://react-spectrum.adobe.com/react-spectrum/Grid.html
     """
-    return spectrum_element("Grid", *children, **props)
+    return component_element("Grid", *children, **props)
 
 
 def heading(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Heading component.
     https://react-spectrum.adobe.com/react-spectrum/Heading.html
     """
-    return spectrum_element("Heading", *children, **props)
+    return component_element("Heading", *children, **props)
 
 
 def icon_wrapper(*children, **props):
@@ -33,69 +34,70 @@ def icon_wrapper(*children, **props):
     Named icon_wrapper so as not to conflict with the Deephaven icon component.
     TODO: This doesn't seem to work correctly. It throws an error saying `Cannot read properties of undefined (reading 'className')`.
     https://react-spectrum.adobe.com/react-spectrum/Icon.html
+    https://github.com/deephaven/deephaven-plugins/issues/526
     """
-    return spectrum_element("Icon", *children, **props)
+    return component_element("Icon", *children, **props)
 
 
 def illustrated_message(*children, **props):
     """
     Python implementation for the Adobe React Spectrum IllustratedMessage component.
     https://react-spectrum.adobe.com/react-spectrum/IllustratedMessage.html
     """
-    return spectrum_element("IllustratedMessage", *children, **props)
+    return component_element("IllustratedMessage", *children, **props)
 
 
 def form(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Form component.
     https://react-spectrum.adobe.com/react-spectrum/Form.html
     """
-    return spectrum_element("Form", *children, **props)
+    return component_element("Form", *children, **props)
 
 
 def switch(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Switch component.
     https://react-spectrum.adobe.com/react-spectrum/Switch.html
     """
-    return spectrum_element("Switch", *children, **props)
+    return component_element("Switch", *children, **props)
 
 
 def tabs(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Tabs component.
     https://react-spectrum.adobe.com/react-spectrum/Tabs.html
     """
-    return spectrum_element("Tabs", *children, **props)
+    return component_element("Tabs", *children, **props)
 
 
 def tab_list(*children, **props):
     """
     Python implementation for the Adobe React Spectrum TabList component.
     https://react-spectrum.adobe.com/react-spectrum/Tabs.html
     """
-    return spectrum_element("TabList", *children, **props)
+    return component_element("TabList", *children, **props)
 
 
 def tab_panels(*children, **props):
     """
     Python implementation for the Adobe React Spectrum TabPanels component.
     https://react-spectrum.adobe.com/react-spectrum/Tabs.html
     """
-    return spectrum_element("TabPanels", *children, **props)
+    return component_element("TabPanels", *children, **props)
 
 
 def text(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Text component.
     https://react-spectrum.adobe.com/react-spectrum/Text.html
     """
-    return spectrum_element("Text", *children, **props)
+    return component_element("Text", *children, **props)
 
 
 def view(*children, **props):
     """
     Python implementation for the Adobe React Spectrum View component.
     https://react-spectrum.adobe.com/react-spectrum/View.html
     """
-    return spectrum_element("View", *children, **props)
+    return component_element("View", *children, **props)

plugins/ui/src/deephaven/ui/components/spectrum/button.py → plugins/ui/src/deephaven/ui/components/button.py

@@ -1,7 +1,11 @@
 from __future__ import annotations
 from typing import Any, Callable
-from .accessibility import AriaExpanded, AriaHasPopup, AriaPressed
-from .events import (
+from .types import (
+    # Accessibility
+    AriaExpanded,
+    AriaHasPopup,
+    AriaPressed,
+    # Events
     ButtonType,
     ButtonVariant,
     ButtonStyle,
@@ -10,8 +14,7 @@
     PressEventCallable,
     StaticColor,
     ElementTypes,
-)
-from .layout import (
+    # Layout
     AlignSelf,
     CSSProperties,
     DimensionValue,
@@ -20,8 +23,8 @@
     Number,
     Position,
 )
-from .basic import spectrum_element
-from ...elements import Element
+from .basic import component_element
+from ..elements import Element
 
 
 def button(
@@ -172,7 +175,7 @@ def button(
         UNSAFE_style: A CSS style to apply to the element.
 
     """
-    return spectrum_element(
+    return component_element(
         "Button",
         *children,
         variant=variant,