From bdbcdf243e778fa47060b5d6c93251c86dcd8eb7 Mon Sep 17 00:00:00 2001 From: m7kvqbe1 <48086589+m7kvqbe1@users.noreply.github.com> Date: Fri, 9 Feb 2024 11:31:02 +0000 Subject: [PATCH 01/13] refactor(ReactComponentLibrary): Remove all React.FC usage --- .../src/components/Alert/Alert.tsx | 4 +- .../components/Autocomplete/Autocomplete.tsx | 4 +- .../src/components/Autocomplete/NoResults.tsx | 2 +- .../src/components/Avatar/Avatar.tsx | 2 +- .../src/components/Badge/Badge.tsx | 4 +- .../components/Breadcrumbs/Breadcrumbs.tsx | 4 +- .../Breadcrumbs/BreadcrumbsItem.tsx | 4 +- .../src/components/Button/Button.tsx | 4 +- .../components/ButtonGroup/ButtonGroup.tsx | 4 +- .../ButtonGroup/ButtonGroupItem.tsx | 4 +- .../src/components/CardFrame/CardFrame.tsx | 2 +- .../components/ContextMenu/ContextMenu.tsx | 4 +- .../ContextMenu/ContextMenuDivider.tsx | 2 +- .../ContextMenu/ContextMenuItem.tsx | 5 +- .../src/components/DatePicker/DatePicker.tsx | 6 +- .../DescriptionList/DescriptionList.tsx | 4 +- .../DescriptionList/DescriptionListItem.tsx | 4 +- .../src/components/Dialog/Dialog.tsx | 4 +- .../DismissibleBanner/DismissibleBanner.tsx | 4 +- .../src/components/Drawer/Drawer.test.tsx | 2 +- .../src/components/Dropdown/Dropdown.tsx | 4 +- .../Dropdown/DropdownIndicatorIcon.tsx | 6 +- .../src/components/Dropdown/DropdownLabel.tsx | 4 +- .../Dropdown/DropdownPlaceholder.tsx | 6 +- .../src/components/Field/Field.tsx | 4 +- .../src/components/Fieldset/Fieldset.tsx | 4 +- .../src/components/Link/Link.tsx | 4 +- .../src/components/List/List.tsx | 2 +- .../src/components/List/ListItem.tsx | 4 +- .../src/components/Modal/Footer.tsx | 4 +- .../src/components/Modal/Header.tsx | 2 +- .../src/components/Modal/Modal.tsx | 4 +- .../src/components/NumberInput/Buttons.tsx | 4 +- .../src/components/NumberInput/Input.tsx | 4 +- .../components/NumberInput/NumberInput.tsx | 4 +- .../src/components/Pagination/Pagination.tsx | 4 +- .../Pagination/PaginationButton.tsx | 2 +- .../Pagination/PaginationErrorMessage.tsx | 2 +- .../src/components/Panel/Panel.tsx | 2 +- .../components/PhaseBanner/PhaseBanner.tsx | 4 +- .../src/components/Popover/Popover.tsx | 4 +- .../ProgressIndicator/ProgressIndicator.tsx | 2 +- .../src/components/RangeSlider/Slider.tsx | 4 +- .../components/RangeSlider/ThresholdRail.tsx | 6 +- .../components/RangeSlider/ThresholdTrack.tsx | 8 +- .../src/components/RangeSlider/Tick.tsx | 4 +- .../src/components/RangeSlider/Track.tsx | 6 +- .../SectionDivider/SectionDivider.tsx | 5 +- .../src/components/Select/ClearButton.tsx | 5 +- .../src/components/Select/Select.tsx | 4 +- .../components/SelectBase/SelectLayout.tsx | 4 +- .../src/components/Switch/Switch.tsx | 4 +- .../src/components/Switch/SwitchOption.tsx | 4 +- .../src/components/TabNav/TabNav.tsx | 2 +- .../src/components/TabNav/TabNavItem.tsx | 2 +- .../src/components/TabSet/TabContent.tsx | 4 +- .../src/components/TabSet/TabSet.stories.tsx | 2 +- .../src/components/TabSet/TabSetItem.tsx | 4 +- .../src/components/Table/Table.tsx | 4 +- .../src/components/Table/TableColumn.tsx | 4 +- .../ThemedExample/ThemedExample.tsx | 4 +- .../src/components/Timeline/Timeline.tsx | 4 +- .../Timeline/TimelineColumnHeader.tsx | 5 +- .../src/components/Timeline/TimelineDay.tsx | 4 +- .../src/components/Timeline/TimelineDays.tsx | 76 +++++++++---------- .../src/components/Timeline/TimelineEvent.tsx | 4 +- .../components/Timeline/TimelineEvents.tsx | 2 +- .../src/components/Timeline/TimelineGrid.tsx | 4 +- .../components/Timeline/TimelineHeaderRow.tsx | 2 +- .../src/components/Timeline/TimelineHour.tsx | 4 +- .../src/components/Timeline/TimelineHours.tsx | 2 +- .../src/components/Timeline/TimelineMonth.tsx | 4 +- .../components/Timeline/TimelineNoData.tsx | 2 +- .../src/components/Timeline/TimelineRow.tsx | 4 +- .../src/components/Timeline/TimelineRows.tsx | 4 +- .../Timeline/TimelineTodayMarker.tsx | 4 +- .../components/Timeline/TimelineToolbar.tsx | 4 +- .../src/components/Timeline/TimelineWeek.tsx | 4 +- .../Timeline/TimelineWeekColumns.tsx | 4 +- .../src/components/Timeline/TimelineWeeks.tsx | 76 +++++++++---------- .../Timeline/__tests__/Timeline.test.tsx | 14 ++-- .../src/components/Timeline/context/index.tsx | 4 +- .../src/components/Toast/Toast.stories.tsx | 4 +- .../src/components/Toast/Toast.tsx | 4 +- .../src/components/Toast/ToastProvider.tsx | 5 +- .../src/components/Tooltip/Tooltip.tsx | 4 +- .../TopLevelNavigation/Masthead/Logo.tsx | 2 +- .../TopLevelNavigation/Masthead/Masthead.tsx | 4 +- .../Masthead/MastheadNav.tsx | 2 +- .../Masthead/MastheadNavItem.tsx | 4 +- .../Masthead/MastheadUser.tsx | 12 +-- .../Masthead/MastheadUserItem.tsx | 4 +- .../NotificationPanel/Notification.tsx | 4 +- .../NotificationPanel/Notifications.tsx | 4 +- .../SearchBar/SearchBar.tsx | 4 +- .../TopLevelNavigation/Sheet/Sheet.tsx | 4 +- .../TopLevelNavigation/Sheet/SheetButton.tsx | 4 +- .../Sidebar/Sidebar.stories.tsx | 2 +- .../TopLevelNavigation/Sidebar/Sidebar.tsx | 4 +- .../TopLevelNavigation/Sidebar/SidebarNav.tsx | 4 +- .../Sidebar/SidebarNavItem.tsx | 4 +- .../Sidebar/SidebarNotifications.tsx | 4 +- .../Sidebar/SidebarSubNav.tsx | 4 +- .../Sidebar/SidebarUser.tsx | 8 +- .../Sidebar/SidebarUserItem.tsx | 5 +- .../Sidebar/SidebarWrapper.tsx | 2 +- .../TopLevelNavigation/Sidebar/context.tsx | 4 +- .../src/forms/formik/formik.stories.tsx | 5 +- .../src/forms/native/native.stories.tsx | 14 +++- .../react-hook-form.stories.tsx | 4 +- .../src/primitives/Container/Container.tsx | 4 +- .../primitives/FloatingBox/FloatingBox.tsx | 4 +- .../FloatingBox/FloatingBoxContent.tsx | 4 +- .../src/styled-components/GlobalStyle.tsx | 4 +- 114 files changed, 291 insertions(+), 318 deletions(-) diff --git a/packages/react-component-library/src/components/Alert/Alert.tsx b/packages/react-component-library/src/components/Alert/Alert.tsx index f77d506e41..7c381de928 100644 --- a/packages/react-component-library/src/components/Alert/Alert.tsx +++ b/packages/react-component-library/src/components/Alert/Alert.tsx @@ -52,13 +52,13 @@ export interface AlertProps { variant?: AlertVariantType } -export const Alert: React.FC = ({ +export const Alert = ({ children, onClose, title, variant = ALERT_VARIANT.INFO, ...rest -}) => { +}: AlertProps) => { const { open, handleOnClose } = useOpenClose(true, onClose) const titleId = useExternalId('alert-title') const descriptionId = useExternalId('alert-description') diff --git a/packages/react-component-library/src/components/Autocomplete/Autocomplete.tsx b/packages/react-component-library/src/components/Autocomplete/Autocomplete.tsx index b8201dec7c..cb75ad45c4 100644 --- a/packages/react-component-library/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/react-component-library/src/components/Autocomplete/Autocomplete.tsx @@ -27,7 +27,7 @@ export interface AutocompleteProps extends SelectBaseProps { onBlur?: (event: React.FocusEvent) => void } -export const Autocomplete: React.FC = ({ +export const Autocomplete = ({ children, id: externalId, initialIsOpen, @@ -37,7 +37,7 @@ export const Autocomplete: React.FC = ({ onChange, value, ...rest -}) => { +}: AutocompleteProps) => { const { filteredItems, hasError, diff --git a/packages/react-component-library/src/components/Autocomplete/NoResults.tsx b/packages/react-component-library/src/components/Autocomplete/NoResults.tsx index a01b87e701..5c6618868c 100644 --- a/packages/react-component-library/src/components/Autocomplete/NoResults.tsx +++ b/packages/react-component-library/src/components/Autocomplete/NoResults.tsx @@ -2,7 +2,7 @@ import React from 'react' import { StyledNoResults } from './partials/StyledNoResults' -export const NoResults: React.FC = ({ children }) => ( +export const NoResults = ({ children }) => ( No results for{`\u00A0${children}`} diff --git a/packages/react-component-library/src/components/Avatar/Avatar.tsx b/packages/react-component-library/src/components/Avatar/Avatar.tsx index e6de47546f..7a01b29d9f 100644 --- a/packages/react-component-library/src/components/Avatar/Avatar.tsx +++ b/packages/react-component-library/src/components/Avatar/Avatar.tsx @@ -16,7 +16,7 @@ export interface AvatarProps extends ComponentWithClass { variant?: ValueOf } -export const Avatar: React.FC = ({ variant, ...rest }) => ( +export const Avatar = ({ variant, ...rest }: AvatarProps) => ( = ({ +export const Badge = ({ children, color: badgeColor = BADGE_COLOR.NEUTRAL, colorVariant = BADGE_COLOR_VARIANT.SOLID, size = BADGE_SIZE.REGULAR, variant = BADGE_VARIANT.REGULAR, ...rest -}) => ( +}: BadgeProps) => ( > = ({ +export const Breadcrumbs = ({ children, ...rest -}) => { +}: Nav) => { const mapped = React.Children.map( children ?? [], (child: React.ReactElement, index: number) => { diff --git a/packages/react-component-library/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/react-component-library/src/components/Breadcrumbs/BreadcrumbsItem.tsx index 78bd97f658..4745432b52 100644 --- a/packages/react-component-library/src/components/Breadcrumbs/BreadcrumbsItem.tsx +++ b/packages/react-component-library/src/components/Breadcrumbs/BreadcrumbsItem.tsx @@ -55,14 +55,14 @@ function getText( return link || {children} } -export const BreadcrumbsItem: React.FC = ({ +export const BreadcrumbsItem = ({ isFirst, isLast = false, link, href, children, ...rest -}) => { +}: BreadcrumbsItemProps) => { return ( {!isFirst && ( diff --git a/packages/react-component-library/src/components/Button/Button.tsx b/packages/react-component-library/src/components/Button/Button.tsx index bdd04279d0..612d6f2974 100644 --- a/packages/react-component-library/src/components/Button/Button.tsx +++ b/packages/react-component-library/src/components/Button/Button.tsx @@ -72,7 +72,7 @@ export interface ButtonWithIconOnlyProps extends ButtonBaseProps { export type ButtonProps = ButtonWithTextProps | ButtonWithIconOnlyProps -export const Button: React.FC = ({ +export const Button = ({ children, className, isDisabled, @@ -85,7 +85,7 @@ export const Button: React.FC = ({ type = 'button', variant = BUTTON_VARIANT.PRIMARY, ...rest -}) => { +}: ButtonProps) => { return ( = ({ +export const ButtonGroup = ({ children, size = COMPONENT_SIZE.FORMS, ...rest -}) => { +}: ButtonGroupProps) => { const mappedChildren = React.Children.map( children, (child: React.ReactElement) => { diff --git a/packages/react-component-library/src/components/ButtonGroup/ButtonGroupItem.tsx b/packages/react-component-library/src/components/ButtonGroup/ButtonGroupItem.tsx index 4e3cccf082..c426af915e 100644 --- a/packages/react-component-library/src/components/ButtonGroup/ButtonGroupItem.tsx +++ b/packages/react-component-library/src/components/ButtonGroup/ButtonGroupItem.tsx @@ -26,14 +26,14 @@ export interface ButtonGroupItemProps { size?: ComponentSizeType } -export const ButtonGroupItem: React.FC = ({ +export const ButtonGroupItem = ({ children, isDisabled, icon, onClick, size, ...rest -}) => ( +}: ButtonGroupItemProps) => (