From 56c3c4ea88d9e90a1ae63cb0c7743396acb6a45d Mon Sep 17 00:00:00 2001 From: literat Date: Tue, 9 Apr 2024 22:01:07 +0200 Subject: [PATCH] fixup! Refactor(web-react): Move away from the `defaultProps` --- .../src/components/ButtonLink/ButtonLink.tsx | 10 +++++++--- .../web-react/src/components/Collapse/Collapse.tsx | 4 ++-- .../Collapse/__tests__/UncontrolledCollapse.test.tsx | 4 ++-- packages/web-react/src/components/Link/Link.tsx | 12 ++++++++---- packages/web-react/src/components/Pill/Pill.tsx | 12 ++++++++---- packages/web-react/src/components/Tag/Tag.tsx | 10 +++++++--- packages/web-react/src/components/Text/Text.tsx | 10 +++++++--- packages/web-react/src/types/collapse.ts | 5 +++-- 8 files changed, 44 insertions(+), 23 deletions(-) diff --git a/packages/web-react/src/components/ButtonLink/ButtonLink.tsx b/packages/web-react/src/components/ButtonLink/ButtonLink.tsx index b4064633e7..7a812fad49 100644 --- a/packages/web-react/src/components/ButtonLink/ButtonLink.tsx +++ b/packages/web-react/src/components/ButtonLink/ButtonLink.tsx @@ -3,10 +3,10 @@ import React, { ElementType, ForwardedRef, forwardRef } from 'react'; import { useStyleProps } from '../../hooks'; import { SpiritButtonLinkProps } from '../../types'; import { Spinner } from '../Spinner'; -import { useButtonLinkStyleProps } from './useButtonLinkStyleProps'; import { useButtonLinkAriaProps } from './useButtonLinkAriaProps'; +import { useButtonLinkStyleProps } from './useButtonLinkStyleProps'; -const defaultProps = { +const defaultProps: Partial = { color: 'primary', elementType: 'a', isBlock: false, @@ -23,7 +23,11 @@ const _ButtonLink = ( ref: ForwardedRef, ) => { const propsWithDefaults = { ...defaultProps, ...props }; - const { elementType: ElementTag, children, ...restProps } = propsWithDefaults; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { buttonLinkProps } = useButtonLinkAriaProps(restProps); const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps); diff --git a/packages/web-react/src/components/Collapse/Collapse.tsx b/packages/web-react/src/components/Collapse/Collapse.tsx index 323f02ffbc..b9c9505f1c 100644 --- a/packages/web-react/src/components/Collapse/Collapse.tsx +++ b/packages/web-react/src/components/Collapse/Collapse.tsx @@ -16,7 +16,7 @@ const transitioningStyles = { exited: '', }; -const defaultProps = { +const defaultProps: Partial = { elementType: 'div', isOpen: false, collapsibleToBreakpoint: undefined, @@ -26,7 +26,7 @@ const defaultProps = { const Collapse = (props: SpiritCollapseProps) => { const propsWithDefaults = { ...defaultProps, ...props }; const { - elementType: ElementTag, + elementType: ElementTag = defaultProps.elementType as React.ElementType, children, transitionDuration = TRANSITION_DURATION, ...restProps diff --git a/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx b/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx index 3b7f319b46..e4d813dc1e 100644 --- a/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx +++ b/packages/web-react/src/components/Collapse/__tests__/UncontrolledCollapse.test.tsx @@ -1,9 +1,9 @@ import '@testing-library/jest-dom'; +import { fireEvent, render } from '@testing-library/react'; import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest'; -import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; +import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; import UncontrolledCollapse from '../UncontrolledCollapse'; describe('UncontrolledCollapse', () => { diff --git a/packages/web-react/src/components/Link/Link.tsx b/packages/web-react/src/components/Link/Link.tsx index 3727026935..ec41f36e71 100644 --- a/packages/web-react/src/components/Link/Link.tsx +++ b/packages/web-react/src/components/Link/Link.tsx @@ -1,10 +1,10 @@ -import React, { ElementType, forwardRef } from 'react'; import classNames from 'classnames'; +import React, { ElementType, forwardRef } from 'react'; import { useStyleProps } from '../../hooks'; -import { SpiritLinkProps, PolymorphicRef } from '../../types'; +import { PolymorphicRef, SpiritLinkProps } from '../../types'; import { useLinkStyleProps } from './useLinkStyleProps'; -const defaultProps = { +const defaultProps: Partial = { elementType: 'a', color: 'primary', }; @@ -16,7 +16,11 @@ const _Link = ( ref: PolymorphicRef, ): JSX.Element => { const propsWithDefaults = { ...defaultProps, ...props }; - const { elementType: ElementTag, children, ...restProps } = propsWithDefaults; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = useLinkStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); diff --git a/packages/web-react/src/components/Pill/Pill.tsx b/packages/web-react/src/components/Pill/Pill.tsx index 17fbb77b62..04eb8e287b 100644 --- a/packages/web-react/src/components/Pill/Pill.tsx +++ b/packages/web-react/src/components/Pill/Pill.tsx @@ -1,17 +1,21 @@ -import React, { ElementType } from 'react'; import classNames from 'classnames'; +import React, { ElementType } from 'react'; import { useStyleProps } from '../../hooks'; import { SpiritPillProps, StyleProps } from '../../types'; import { usePillStyleProps } from './usePillStyleProps'; -const defaultProps = { +const defaultProps: Partial = { elementType: 'span', color: 'selected', }; export const Pill = (props: SpiritPillProps): JSX.Element => { - const propsWithDefaults = { ...defaultProps, ...props } as SpiritPillProps; - const { elementType: ElementTag, children, ...restProps } = propsWithDefaults; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = usePillStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps as StyleProps); diff --git a/packages/web-react/src/components/Tag/Tag.tsx b/packages/web-react/src/components/Tag/Tag.tsx index 2770afdef7..071a6e69c7 100644 --- a/packages/web-react/src/components/Tag/Tag.tsx +++ b/packages/web-react/src/components/Tag/Tag.tsx @@ -1,10 +1,10 @@ -import React, { ElementType, ForwardedRef, forwardRef } from 'react'; import classNames from 'classnames'; +import React, { ElementType, ForwardedRef, forwardRef } from 'react'; import { useStyleProps } from '../../hooks'; import { SpiritTagProps, StyleProps } from '../../types'; import { useTagStyleProps } from './useTagStyleProps'; -const defaultProps = { +const defaultProps: Partial = { color: 'neutral', elementType: 'span', isSubtle: false, @@ -18,7 +18,11 @@ const _Tag = ( ref: ForwardedRef, ): JSX.Element => { const propsWithDefaults = { ...defaultProps, ...props }; - const { elementType: ElementTag, children, ...restProps } = propsWithDefaults; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = useTagStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps as StyleProps); diff --git a/packages/web-react/src/components/Text/Text.tsx b/packages/web-react/src/components/Text/Text.tsx index 04f506b015..5147752eea 100644 --- a/packages/web-react/src/components/Text/Text.tsx +++ b/packages/web-react/src/components/Text/Text.tsx @@ -4,14 +4,18 @@ import { useStyleProps } from '../../hooks'; import { SpiritTextProps } from '../../types'; import { useTextStyleProps } from './useTextStyleProps'; -const defaultProps = { +const defaultProps: Partial = { elementType: 'p', size: 'medium', }; export const Text = (props: SpiritTextProps): JSX.Element => { - const propsWithDefaults = { ...defaultProps, ...props } as SpiritTextProps; - const { elementType: ElementTag = defaultProps.elementType, children, ...restProps } = propsWithDefaults; + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = useTextStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); diff --git a/packages/web-react/src/types/collapse.ts b/packages/web-react/src/types/collapse.ts index 4a8ccd6448..3f98fc4f2d 100644 --- a/packages/web-react/src/types/collapse.ts +++ b/packages/web-react/src/types/collapse.ts @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import { ChildrenProps, ClickEvent, StyleProps, Booleanish } from './shared'; +import { Booleanish, ChildrenProps, ClickEvent, StyleProps } from './shared'; export type CollapseElementType = 'div' | 'article' | 'section' | 'main' | 'header' | 'footer'; @@ -28,7 +28,8 @@ export interface TransitionCollapseProps { export interface SpiritCollapseProps extends CollapseProps, TransitionCollapseProps {} -export interface SpiritUncontrolledCollapseProps extends SpiritCollapseProps { +export interface SpiritUncontrolledCollapseProps extends Omit { + isOpen?: boolean; hideOnCollapse?: boolean; renderTrigger?: (render: CollapseRenderProps) => ReactNode; }