feat: Re-export Spectrum components + prop types (#1880)

Re-export most of the React Spectrum components listed in the docs. This
excludes
* TableView - likely want our grid to replace this at some point
* Components we have already wrapped or have components with the same
names
* Beta components

resolves #1852

packages/components/package.json

@@ -33,6 +33,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-spectrum/theme-default": "^3.5.1",
     "@react-types/shared": "^3.22.1",
+    "@react-types/textfield": "^3.9.1",
     "bootstrap": "4.6.2",
     "classnames": "^2.3.1",
     "event-target-shim": "^6.0.2",

packages/components/src/spectrum/buttons.ts

@@ -0,0 +1,10 @@
+export {
+  ActionButton,
+  type SpectrumActionButtonProps as ActionButtonProps,
+  ActionGroup,
+  type SpectrumActionGroupProps as ActionGroupProps,
+  LogicButton,
+  type SpectrumLogicButtonProps as LogicButtonProps,
+  ToggleButton,
+  type SpectrumToggleButtonProps as ToggleButtonProps,
+} from '@adobe/react-spectrum';

packages/components/src/spectrum/collections.ts

@@ -0,0 +1,12 @@
+export {
+  ActionBar,
+  type SpectrumActionBarProps as ActionBarProps,
+  ActionMenu,
+  type SpectrumActionMenuProps as ActionMenuProps,
+  ListView,
+  type SpectrumListViewProps as ListViewProps,
+  MenuTrigger,
+  type SpectrumMenuTriggerProps as MenuTriggerProps,
+  TagGroup,
+  type SpectrumTagGroupProps as TagGroupProps,
+} from '@adobe/react-spectrum';

packages/components/src/spectrum/content.ts

@@ -0,0 +1,24 @@
+export {
+  Avatar,
+  type SpectrumAvatarProps as AvatarProps,
+  Content,
+  type ContentProps,
+  Divider,
+  type SpectrumDividerProps as DividerProps,
+  Footer,
+  type FooterProps,
+  Heading,
+  type HeadingProps,
+  IllustratedMessage,
+  type SpectrumIllustratedMessageProps as IllustratedMessageProps,
+  Image,
+  type SpectrumImageProps as ImageProps,
+  Keyboard,
+  type KeyboardProps,
+  Text,
+  type TextProps,
+  View,
+  type ViewProps,
+  Well,
+  type SpectrumWellProps as WellProps,
+} from '@adobe/react-spectrum';

packages/components/src/spectrum/dateAndTime.ts

@@ -0,0 +1,14 @@
+export {
+  Calendar,
+  type SpectrumCalendarProps as CalendarProps,
+  DateField,
+  type SpectrumDateFieldProps as DateFieldProps,
+  DatePicker,
+  type SpectrumDatePickerProps as DatePickerProps,
+  DateRangePicker,
+  type SpectrumDateRangePickerProps as DateRangePickerProps,
+  RangeCalendar,
+  type SpectrumRangeCalendarProps as RangeCalendarProps,
+  TimeField,
+  type SpectrumTimeFieldProps as TimeFieldProps,
+} from '@adobe/react-spectrum';

packages/components/src/spectrum/forms.ts

@@ -0,0 +1,19 @@
+export {
+  CheckboxGroup,
+  type SpectrumCheckboxGroupProps as CheckboxGroupProps,
+  Form,
+  type SpectrumFormProps as FormProps,
+  NumberField,
+  type SpectrumNumberFieldProps as NumberFieldProps,
+  RangeSlider,
+  type SpectrumRangeSliderProps as RangeSliderProps,
+  Slider,
+  type SpectrumSliderProps as SliderProps,
+  Switch,
+  type SpectrumSwitchProps as SwitchProps,
+  TextArea,
+  TextField,
+  type SpectrumTextFieldProps as TextFieldProps,
+} from '@adobe/react-spectrum';
+
+export { type SpectrumTextAreaProps as TextAreaProps } from '@react-types/textfield';

packages/components/src/spectrum/index.ts

@@ -1,4 +1,19 @@
-export * from './Flex';
-export * from './Item';
+/**
+ * Re-exporting React Spectrum components + props.
+ */
+export * from './buttons';
+export * from './collections';
+export * from './content';
+export * from './dateAndTime';
+export * from './forms';
+export * from './layout';
+export * from './navigation';
+export * from './overlays';
+export * from './pickers';
+export * from './shared';
+export * from './status';
+
+/**
+ * Custom DH components wrapping React Spectrum components.
+ */
 export * from './picker';
-export * from './Section';

packages/components/src/spectrum/layout.ts

@@ -0,0 +1,6 @@
+export {
+  Flex,
+  type FlexProps,
+  Grid,
+  type GridProps,
+} from '@adobe/react-spectrum';

packages/components/src/spectrum/navigation.ts

@@ -0,0 +1,12 @@
+export {
+  Breadcrumbs,
+  type SpectrumBreadcrumbsProps as BreadcrumbsProps,
+  Link,
+  type SpectrumLinkProps as LinkProps,
+  TabList,
+  type SpectrumTabListProps as TabListProps,
+  TabPanels,
+  type SpectrumTabPanelsProps as TabPanelsProps,
+  Tabs,
+  type SpectrumTabsProps as TabsProps,
+} from '@adobe/react-spectrum';

packages/components/src/spectrum/overlays.ts

@@ -0,0 +1,12 @@
+export {
+  AlertDialog,
+  type SpectrumAlertDialogProps as AlertDialogProps,
+  ContextualHelp,
+  type SpectrumContextualHelpProps as ContextualHelpProps,
+  Dialog,
+  type SpectrumDialogProps as DialogProps,
+  DialogContainer,
+  type SpectrumDialogContainerProps as DialogContainerProps,
+  DialogTrigger,
+  type SpectrumDialogTriggerProps as DialogTriggerProps,
+} from '@adobe/react-spectrum';

packages/components/src/spectrum/picker/Picker.tsx

@@ -14,8 +14,7 @@ import {
   isNormalizedPickerSection,
 } from './PickerUtils';
 import { PickerItemContent } from './PickerItemContent';
-import { Item } from '../Item';
-import { Section } from '../Section';
+import { Item, Section } from '../shared';
 
 export type PickerProps = {
   children: PickerItemOrSection | PickerItemOrSection[];

packages/components/src/spectrum/picker/PickerUtils.test.tsx

@@ -1,5 +1,4 @@
 import React, { createElement } from 'react';
-import { Text } from '@adobe/react-spectrum';
 import {
   NormalizedPickerItem,
   normalizeTooltipOptions,
@@ -13,8 +12,8 @@ import {
   isNormalizedPickerSection,
 } from './PickerUtils';
 import type { PickerProps } from './Picker';
-import { Item } from '../Item';
-import { Section } from '../Section';
+import { Item, Section } from '../shared';
+import { Text } from '../content';
 
 beforeEach(() => {
   expect.hasAssertions();

packages/components/src/spectrum/picker/PickerUtils.ts

@@ -2,8 +2,7 @@ import { isValidElement, Key, ReactElement, ReactNode } from 'react';
 import { SpectrumPickerProps } from '@adobe/react-spectrum';
 import type { ItemRenderer } from '@react-types/shared';
 import Log from '@deephaven/log';
-import { Item, ItemProps } from '../Item';
-import { Section, SectionProps } from '../Section';
+import { Item, ItemProps, Section, SectionProps } from '../shared';
 import { PopperOptions } from '../../popper';
 
 const log = Log.module('PickerUtils');

packages/components/src/spectrum/pickers.ts

@@ -0,0 +1,4 @@
+export {
+  ComboBox,
+  type SpectrumComboBoxProps as ComboBoxProps,
+} from '@adobe/react-spectrum';

packages/components/src/spectrum/shared.ts

@@ -0,0 +1,11 @@
+/**
+ * Wrapping Spectrum `Item` and `Section` components will break functionality
+ * due to the way they are consumed by collection components. They are only used
+ * to pass data and don't render anything on their own, so they don't need to be
+ * wrapped. If we do ever need to wrap them for whatever reason, the static
+ * `getCollectionNode` method will need to be implemented.
+ * See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/collections/src/Item.ts#L17
+ *     https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/collections/src/Section.ts#L18
+ */
+export { Item, Section } from '@adobe/react-spectrum';
+export type { ItemProps, SectionProps } from '@react-types/shared';

packages/components/src/spectrum/status.ts

@@ -0,0 +1,16 @@
+export {
+  Badge,
+  type SpectrumBadgeProps as BadgeProps,
+  InlineAlert,
+  type SpectrumInlineAlertProps as InlineAlertProps,
+  LabeledValue,
+  type SpectrumLabeledValueProps as LabeledValueProps,
+  Meter,
+  type SpectrumMeterProps as MeterProps,
+  ProgressBar,
+  type SpectrumProgressBarProps as ProgressBarProps,
+  ProgressCircle,
+  type SpectrumProgressCircleProps as ProgressCircleProps,
+  StatusLight,
+  type SpectrumStatusLightProps as StatusLightProps,
+} from '@adobe/react-spectrum';