From 478309289f727c560ae92722c96fed964ba98d9d Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Tue, 19 Mar 2024 13:11:04 -0500 Subject: [PATCH] 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 --- package-lock.json | 2 ++ packages/components/package.json | 1 + packages/components/src/spectrum/Flex.tsx | 5 ---- packages/components/src/spectrum/Item.tsx | 13 ---------- packages/components/src/spectrum/Section.tsx | 13 ---------- packages/components/src/spectrum/buttons.ts | 10 ++++++++ .../components/src/spectrum/collections.ts | 12 ++++++++++ packages/components/src/spectrum/content.ts | 24 +++++++++++++++++++ .../components/src/spectrum/dateAndTime.ts | 14 +++++++++++ packages/components/src/spectrum/forms.ts | 19 +++++++++++++++ packages/components/src/spectrum/index.ts | 21 +++++++++++++--- packages/components/src/spectrum/layout.ts | 6 +++++ .../components/src/spectrum/navigation.ts | 12 ++++++++++ packages/components/src/spectrum/overlays.ts | 12 ++++++++++ .../components/src/spectrum/picker/Picker.tsx | 3 +-- .../src/spectrum/picker/PickerUtils.test.tsx | 5 ++-- .../src/spectrum/picker/PickerUtils.ts | 3 +-- packages/components/src/spectrum/pickers.ts | 4 ++++ packages/components/src/spectrum/shared.ts | 11 +++++++++ packages/components/src/spectrum/status.ts | 16 +++++++++++++ 20 files changed, 165 insertions(+), 41 deletions(-) delete mode 100644 packages/components/src/spectrum/Flex.tsx delete mode 100644 packages/components/src/spectrum/Item.tsx delete mode 100644 packages/components/src/spectrum/Section.tsx create mode 100644 packages/components/src/spectrum/buttons.ts create mode 100644 packages/components/src/spectrum/collections.ts create mode 100644 packages/components/src/spectrum/content.ts create mode 100644 packages/components/src/spectrum/dateAndTime.ts create mode 100644 packages/components/src/spectrum/forms.ts create mode 100644 packages/components/src/spectrum/layout.ts create mode 100644 packages/components/src/spectrum/navigation.ts create mode 100644 packages/components/src/spectrum/overlays.ts create mode 100644 packages/components/src/spectrum/pickers.ts create mode 100644 packages/components/src/spectrum/shared.ts create mode 100644 packages/components/src/spectrum/status.ts diff --git a/package-lock.json b/package-lock.json index e4ce3b8cc7..b351784cb7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28585,6 +28585,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", @@ -31036,6 +31037,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", diff --git a/packages/components/package.json b/packages/components/package.json index b2bb23aba9..6fad6d1ffc 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/src/spectrum/Flex.tsx b/packages/components/src/spectrum/Flex.tsx deleted file mode 100644 index 3bc87add25..0000000000 --- a/packages/components/src/spectrum/Flex.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Flex } from '@adobe/react-spectrum'; - -export type { FlexProps } from '@adobe/react-spectrum'; -export { Flex }; -export default Flex; diff --git a/packages/components/src/spectrum/Item.tsx b/packages/components/src/spectrum/Item.tsx deleted file mode 100644 index a9371db928..0000000000 --- a/packages/components/src/spectrum/Item.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Wrapping Spectrum `Item` 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. - * See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/collections/src/Item.ts#L17 - */ -import { Item } from '@adobe/react-spectrum'; - -export type { ItemProps } from '@react-types/shared'; - -export { Item }; - -export default Item; diff --git a/packages/components/src/spectrum/Section.tsx b/packages/components/src/spectrum/Section.tsx deleted file mode 100644 index d8b89f24af..0000000000 --- a/packages/components/src/spectrum/Section.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Wrapping Spectrum `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. - * See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/collections/src/Section.ts#L18 - */ -import { Section } from '@adobe/react-spectrum'; - -export type { SectionProps } from '@react-types/shared'; - -export { Section }; - -export default Section; diff --git a/packages/components/src/spectrum/buttons.ts b/packages/components/src/spectrum/buttons.ts new file mode 100644 index 0000000000..1603d77e18 --- /dev/null +++ b/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'; diff --git a/packages/components/src/spectrum/collections.ts b/packages/components/src/spectrum/collections.ts new file mode 100644 index 0000000000..619027a946 --- /dev/null +++ b/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'; diff --git a/packages/components/src/spectrum/content.ts b/packages/components/src/spectrum/content.ts new file mode 100644 index 0000000000..6a98ab528e --- /dev/null +++ b/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'; diff --git a/packages/components/src/spectrum/dateAndTime.ts b/packages/components/src/spectrum/dateAndTime.ts new file mode 100644 index 0000000000..c866dc4486 --- /dev/null +++ b/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'; diff --git a/packages/components/src/spectrum/forms.ts b/packages/components/src/spectrum/forms.ts new file mode 100644 index 0000000000..e5cc4d4231 --- /dev/null +++ b/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'; diff --git a/packages/components/src/spectrum/index.ts b/packages/components/src/spectrum/index.ts index d3854fd1a2..2115130227 100644 --- a/packages/components/src/spectrum/index.ts +++ b/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'; diff --git a/packages/components/src/spectrum/layout.ts b/packages/components/src/spectrum/layout.ts new file mode 100644 index 0000000000..cb0135cea7 --- /dev/null +++ b/packages/components/src/spectrum/layout.ts @@ -0,0 +1,6 @@ +export { + Flex, + type FlexProps, + Grid, + type GridProps, +} from '@adobe/react-spectrum'; diff --git a/packages/components/src/spectrum/navigation.ts b/packages/components/src/spectrum/navigation.ts new file mode 100644 index 0000000000..f48d4db4a5 --- /dev/null +++ b/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'; diff --git a/packages/components/src/spectrum/overlays.ts b/packages/components/src/spectrum/overlays.ts new file mode 100644 index 0000000000..a0f84d4227 --- /dev/null +++ b/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'; diff --git a/packages/components/src/spectrum/picker/Picker.tsx b/packages/components/src/spectrum/picker/Picker.tsx index 10f04ef052..09a0064a7d 100644 --- a/packages/components/src/spectrum/picker/Picker.tsx +++ b/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[]; diff --git a/packages/components/src/spectrum/picker/PickerUtils.test.tsx b/packages/components/src/spectrum/picker/PickerUtils.test.tsx index ea9a36c9cc..7434c6e8f8 100644 --- a/packages/components/src/spectrum/picker/PickerUtils.test.tsx +++ b/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(); diff --git a/packages/components/src/spectrum/picker/PickerUtils.ts b/packages/components/src/spectrum/picker/PickerUtils.ts index c792d2c023..f069a2927b 100644 --- a/packages/components/src/spectrum/picker/PickerUtils.ts +++ b/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'); diff --git a/packages/components/src/spectrum/pickers.ts b/packages/components/src/spectrum/pickers.ts new file mode 100644 index 0000000000..bb285fca18 --- /dev/null +++ b/packages/components/src/spectrum/pickers.ts @@ -0,0 +1,4 @@ +export { + ComboBox, + type SpectrumComboBoxProps as ComboBoxProps, +} from '@adobe/react-spectrum'; diff --git a/packages/components/src/spectrum/shared.ts b/packages/components/src/spectrum/shared.ts new file mode 100644 index 0000000000..09d369644c --- /dev/null +++ b/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'; diff --git a/packages/components/src/spectrum/status.ts b/packages/components/src/spectrum/status.ts new file mode 100644 index 0000000000..aca24486e8 --- /dev/null +++ b/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';