From 2fce82d68d2ae56a951f5fb69e6141319572ae55 Mon Sep 17 00:00:00 2001 From: Tom King Date: Wed, 6 Mar 2024 08:28:37 +1000 Subject: [PATCH 01/10] - udated eslint for ui package --- packages/ui/.eslintrc.cjs | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/ui/.eslintrc.cjs b/packages/ui/.eslintrc.cjs index 60876ad77..c0715e5e4 100644 --- a/packages/ui/.eslintrc.cjs +++ b/packages/ui/.eslintrc.cjs @@ -1,6 +1,11 @@ +const OFF = 0; + module.exports = { root: true, - extends: ['@westpac/eslint-config'], + extends: ['@westpac/eslint-config/nextjs'], + rules: { + '@next/next/no-html-link-for-pages': OFF, + }, overrides: [ { files: ['**/*.stories.tsx', '**/*.stories.ts'], @@ -18,4 +23,4 @@ module.exports = { }, }, }, -}; +}; \ No newline at end of file From 01ca3f20662582a3097ff616b2ea5c1c5553f6aa Mon Sep 17 00:00:00 2001 From: Tom King Date: Wed, 6 Mar 2024 15:31:40 +1000 Subject: [PATCH 02/10] - fixed eslint warnings except any typings - fixed elsint errors --- .../accordion/accordion.stories.tsx | 53 ++-- .../autocomplete/autocomplete.component.tsx | 11 +- .../autocomplete/autocomplete.stories.tsx | 33 ++- .../autocomplete-item.component.tsx | 1 - .../ui/src/components/badge/badge.stories.tsx | 20 +- .../bottom-sheet/bottom-sheet.spec.tsx | 2 +- .../bottom-sheet/bottom-sheet.stories.tsx | 37 +-- .../bottom-sheet-dialog.component.tsx | 1 - .../bottom-sheet-modal.component.tsx | 5 +- .../bottom-sheet-modal.spec.tsx | 2 +- .../breadcrumb/breadcrumb.component.tsx | 5 +- .../breadcrumb/breadcrumb.stories.tsx | 6 +- .../button-dropdown.component.tsx | 2 +- .../button-dropdown.stories.tsx | 4 +- .../button-dropdown-panel.component.tsx | 6 +- .../button-group/button-group.stories.tsx | 3 + .../src/components/button/button.stories.tsx | 36 +-- .../ui/src/components/button/button.styles.ts | 2 +- .../collapsible/collapsible.component.tsx | 2 +- .../date-picker/date-picker.component.tsx | 2 +- .../date-picker/date-picker.stories.tsx | 110 ++++---- .../date-picker/date-picker.utils.ts | 2 +- .../error-message/error-message.component.tsx | 4 +- .../error-message/error-message.types.ts | 2 +- .../src/components/field/field.component.tsx | 2 +- .../flexi-cell/flexi-cell.stories.tsx | 3 + .../src/components/footer/footer.stories.tsx | 2 + .../ui/src/components/form/form.stories.tsx | 2 +- .../components/header/header.component.tsx | 2 +- .../src/components/header/header.stories.tsx | 20 ++ .../src/components/heading/heading.spec.tsx | 7 +- .../components/heading/heading.stories.tsx | 25 +- .../ui/src/components/icon/icon.stories.tsx | 19 +- ...-group-add-on-default-add-on.component.tsx | 7 +- .../input-group-add-ons.styles.ts | 4 +- .../input-group/input-group.component.tsx | 4 +- .../input-group.scenarios.stories.tsx | 243 ++++++++---------- .../ui/src/components/input/input.stories.tsx | 2 +- .../ui/src/components/link/link.stories.tsx | 20 +- .../ui/src/components/list/list.stories.tsx | 6 +- .../ui/src/components/modal/modal.stories.tsx | 233 +++++++---------- .../pagination/pagination.component.tsx | 4 +- .../components/pagination/pagination.hooks.ts | 4 +- .../pagination/pagination.stories.tsx | 63 ++--- .../ui/src/components/panel/panel.stories.tsx | 16 +- .../pass-code-view/pass-code-view.types.ts | 4 +- .../pass-code/pass-code.component.tsx | 6 +- .../components/pass-code/pass-code.spec.tsx | 2 +- .../components/panel/panel.component.tsx | 6 +- .../components/popover/popover.component.tsx | 8 +- .../{popover.hooks.tsx => popover.utils.tsx} | 4 +- .../progress-indicator.stories.tsx | 4 +- .../progress-rope-step.component.tsx | 5 +- .../progress-rope-step.types.ts | 2 +- .../progress-rope/progress-rope.component.tsx | 3 +- .../progress-rope/progress-rope.stories.tsx | 225 ++++++++-------- .../ui/src/components/select/select.spec.tsx | 2 +- .../ui/src/components/select/select.styles.ts | 2 +- ...selector-button-group-option.component.tsx | 2 +- .../selector-button-group.component.tsx | 4 +- .../skip-link/skip-link.stories.tsx | 2 +- .../ui/src/components/well/well.stories.tsx | 8 +- .../stories/foundation/colours.stories.tsx | 19 +- .../stories/foundation/spacing.stories.tsx | 4 +- packages/ui/src/tailwind/tailwind-plugin.ts | 2 +- 65 files changed, 644 insertions(+), 709 deletions(-) rename packages/ui/src/components/popover/{popover.hooks.tsx => popover.utils.tsx} (95%) diff --git a/packages/ui/src/components/accordion/accordion.stories.tsx b/packages/ui/src/components/accordion/accordion.stories.tsx index 96c0abccd..c80833fd9 100644 --- a/packages/ui/src/components/accordion/accordion.stories.tsx +++ b/packages/ui/src/components/accordion/accordion.stories.tsx @@ -27,7 +27,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; /** * > Default usage example @@ -79,34 +79,29 @@ export const LegoLook: Story = { /** * > Controlled example */ -export const Controlled: Story = { - args: { - look: 'lego', - rounded: false, - }, - render: ({ ...props }) => { - const [expandedKeys, setExpandedKeys] = useState>(); - return ( - { - setExpandedKeys(keys); - }} - > - {[ - { key: 'files', title: 'Your files' }, - { key: 'shared', title: 'Shared with you' }, - { key: 'last', title: 'Last item' }, - ].map(({ key, title }) => ( - -

{title}

- - - ))} - - ); - }, +export const Controlled = () => { + const [expandedKeys, setExpandedKeys] = useState>(); + return ( + { + setExpandedKeys(keys); + }} + > + {[ + { key: 'files', title: 'Your files' }, + { key: 'shared', title: 'Shared with you' }, + { key: 'last', title: 'Last item' }, + ].map(({ key, title }) => ( + +

{title}

+ + + ))} + + ); }; /** diff --git a/packages/ui/src/components/autocomplete/autocomplete.component.tsx b/packages/ui/src/components/autocomplete/autocomplete.component.tsx index b4da00ed7..02b7d906c 100644 --- a/packages/ui/src/components/autocomplete/autocomplete.component.tsx +++ b/packages/ui/src/components/autocomplete/autocomplete.component.tsx @@ -92,7 +92,14 @@ export function Autocomplete({ ((!state.isOpen && state.isFocused && searchProps.value.length > 0 && !state.selectedItem) || (state.collection.size === 0 && searchProps.value.length > 0)) ); - }, [state, searchProps, noOptionsMessage]); + }, [ + noOptionsMessage, + state.isOpen, + state.isFocused, + state.selectedItem, + state.collection.size, + searchProps.value.length, + ]); const iconSize = useMemo(() => { switch (size) { @@ -161,7 +168,7 @@ export function Autocomplete({ > diff --git a/packages/ui/src/components/autocomplete/autocomplete.stories.tsx b/packages/ui/src/components/autocomplete/autocomplete.stories.tsx index db5d52816..06b81e5fe 100644 --- a/packages/ui/src/components/autocomplete/autocomplete.stories.tsx +++ b/packages/ui/src/components/autocomplete/autocomplete.stories.tsx @@ -54,24 +54,21 @@ export const Default: Story = { /** * > Controlled usage example */ -export const Controlled: Story = { - args: {}, - render: () => { - const [selectedKey, setSelectedKey] = useState(); - const handleSelectionChange = (key: string | number) => { - setSelectedKey(key); - }; - return ( - - Red Panda - Cat - Dog - Aardvark - Kangaroo - Snake - - ); - }, +export const Controlled = () => { + const [selectedKey, setSelectedKey] = useState(); + const handleSelectionChange = (key: string | number) => { + setSelectedKey(key); + }; + return ( + + Red Panda + Cat + Dog + Aardvark + Kangaroo + Snake + + ); }; /** diff --git a/packages/ui/src/components/autocomplete/components/autocomplete-item/autocomplete-item.component.tsx b/packages/ui/src/components/autocomplete/components/autocomplete-item/autocomplete-item.component.tsx index 954759bac..ee85d60c6 100644 --- a/packages/ui/src/components/autocomplete/components/autocomplete-item/autocomplete-item.component.tsx +++ b/packages/ui/src/components/autocomplete/components/autocomplete-item/autocomplete-item.component.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { Item } from 'react-stately'; import { AutocompleteItemProps } from './autocomplete-item.types.js'; diff --git a/packages/ui/src/components/badge/badge.stories.tsx b/packages/ui/src/components/badge/badge.stories.tsx index fceff6ace..a44677e7a 100644 --- a/packages/ui/src/components/badge/badge.stories.tsx +++ b/packages/ui/src/components/badge/badge.stories.tsx @@ -73,12 +73,14 @@ export const Colors = () => (
{COLORS.map(color => ( - {color} + + {color} + ))}
{COLORS.map(color => ( - + {color} ))} @@ -87,12 +89,14 @@ export const Colors = () => (
{INVERTED_COLORS.map(color => ( - {color} + + {color} + ))}
{INVERTED_COLORS.map(color => ( - + {color} ))} @@ -105,14 +109,14 @@ export const Soft = () => (
{COLORS.map(color => ( - + {color} ))}
{COLORS.map(color => ( - + {color} ))} @@ -126,7 +130,7 @@ export const Soft = () => ( export const Links = () => (
{COLORS.map(color => ( - + {color} 12 @@ -142,7 +146,7 @@ export const Links = () => ( export const Buttons = () => (
{INVERTED_COLORS.map(color => ( - @@ -65,21 +60,6 @@ type Story = StoryObj; */ export const DefaultState: Story = { args: { - state: { - close: () => { - return; - }, - setOpen: () => { - return; - }, - open: () => { - return; - }, - toggle: () => { - return; - }, - isOpen: false, - }, title: 'Heading', primaryLabel: 'Label', secondaryLabel: 'Label', @@ -99,21 +79,6 @@ export const DefaultState: Story = { */ export const NoFooter: Story = { args: { - state: { - close: () => { - return; - }, - setOpen: () => { - return; - }, - open: () => { - return; - }, - toggle: () => { - return; - }, - isOpen: false, - }, title: 'Heading', children: (

diff --git a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.component.tsx b/packages/ui/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.component.tsx index 7f426ce5d..9a05fab86 100644 --- a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.component.tsx +++ b/packages/ui/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.component.tsx @@ -1,4 +1,3 @@ -import { clsx } from 'clsx'; import React, { useRef } from 'react'; import { useDialog } from 'react-aria'; diff --git a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx b/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx index 03d48a025..c9951643e 100644 --- a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx +++ b/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx @@ -1,4 +1,3 @@ -import { clsx } from 'clsx'; import { PanInfo, motion, useAnimation } from 'framer-motion'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Overlay, useModalOverlay } from 'react-aria'; @@ -52,7 +51,7 @@ export function BottomSheetModal({ state, height, width, children, portalContain return; } controls.start('hidden'); - }, [state.isOpen]); + }, [controls, state.isOpen]); const onDragEnd = useCallback( (_: unknown, info: PanInfo) => { @@ -66,7 +65,7 @@ export function BottomSheetModal({ state, height, width, children, portalContain controls.start('visible'); state.open(); }, - [controls], + [controls, state], ); if (!isBrowser || !state.isOpen) { diff --git a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.spec.tsx b/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.spec.tsx index 91428fedc..3c6073fda 100644 --- a/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.spec.tsx +++ b/packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.spec.tsx @@ -7,7 +7,7 @@ import { BottomSheetModal } from './bottom-sheet-modal.component.js'; describe('BottomSheetModal', () => { it('renders the Modal', () => { const { result } = renderHook(() => useOverlayTriggerState({})); - render(); + render({undefined}); }); it('shows the content when the state isOpen is true', async () => { diff --git a/packages/ui/src/components/breadcrumb/breadcrumb.component.tsx b/packages/ui/src/components/breadcrumb/breadcrumb.component.tsx index ef639c379..57e0c2c6b 100644 --- a/packages/ui/src/components/breadcrumb/breadcrumb.component.tsx +++ b/packages/ui/src/components/breadcrumb/breadcrumb.component.tsx @@ -4,6 +4,7 @@ import React, { Children, FunctionComponentElement, cloneElement } from 'react'; import { useBreadcrumbs } from 'react-aria'; import { type BreadcrumbProps } from './breadcrumb.types.js'; +import { BreadcrumbItemProps } from './components/breadcrumb-item/breadcrumb-item.types.js'; export function Breadcrumb({ className, children, 'aria-label': ariaLabel = 'Breadcrumb', ...props }: BreadcrumbProps) { const { navProps } = useBreadcrumbs(props); @@ -15,7 +16,9 @@ export function Breadcrumb({ className, children, 'aria-label': ariaLabel = 'Bre {Children.map( children, (child, i) => - cloneElement(child as FunctionComponentElement, { isCurrent: i === childCount - 1 }) ?? <>, + cloneElement(child as FunctionComponentElement, { + isCurrent: i === childCount - 1, + }) ?? <>, )} diff --git a/packages/ui/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/ui/src/components/breadcrumb/breadcrumb.stories.tsx index 3bbb0e3c5..b22b0cec9 100644 --- a/packages/ui/src/components/breadcrumb/breadcrumb.stories.tsx +++ b/packages/ui/src/components/breadcrumb/breadcrumb.stories.tsx @@ -19,13 +19,13 @@ type Story = StoryObj; export const Default: Story = { args: { children: [ - alert('Folder 1')}> + alert('Folder 1')}> About us , - + Innovation , - + Principal investments , ], diff --git a/packages/ui/src/components/button-dropdown/button-dropdown.component.tsx b/packages/ui/src/components/button-dropdown/button-dropdown.component.tsx index bae8be6b1..0576f75f9 100644 --- a/packages/ui/src/components/button-dropdown/button-dropdown.component.tsx +++ b/packages/ui/src/components/button-dropdown/button-dropdown.component.tsx @@ -35,7 +35,7 @@ export function ButtonDropdown({ (event: globalThis.KeyboardEvent) => { if (state.isOpen && event.key === 'Escape') state.close(); }, - [state.isOpen], + [state], ); useEffect(() => { diff --git a/packages/ui/src/components/button-dropdown/button-dropdown.stories.tsx b/packages/ui/src/components/button-dropdown/button-dropdown.stories.tsx index 28893f05c..94e663e2d 100644 --- a/packages/ui/src/components/button-dropdown/button-dropdown.stories.tsx +++ b/packages/ui/src/components/button-dropdown/button-dropdown.stories.tsx @@ -43,7 +43,7 @@ export const Default: Story = { export const StandardLooks = () => (

{LOOKS.map(look => ( - +

Example dropdown @@ -62,7 +62,7 @@ export const StandardLooks = () => ( export const SoftLooks = () => (

{LOOKS.map(look => ( - +

Example dropdown diff --git a/packages/ui/src/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.tsx b/packages/ui/src/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.tsx index 98d4d1856..c8faf099b 100644 --- a/packages/ui/src/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.tsx +++ b/packages/ui/src/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.tsx @@ -26,7 +26,7 @@ export function ButtonDropdownPanel({ className, children, state, block, id, ... ) state.close(); }, - [state.isOpen], + [props.triggerRef, state], ); // React Aria does not handle click as we need when isNonModal is true so this is needed @@ -42,7 +42,7 @@ export function ButtonDropdownPanel({ className, children, state, block, id, ... ) state.close(); }, - [state.isOpen], + [props.triggerRef, state], ); useEffect(() => { @@ -52,7 +52,7 @@ export function ButtonDropdownPanel({ className, children, state, block, id, ... window.document.removeEventListener('focusin', focusHandler); window.document.removeEventListener('click', clickHandler); }; - }, []); + }, [clickHandler, focusHandler]); return (

(
{LOOKS.map(look => ( {look}} look={look} buttons={[ @@ -90,6 +91,7 @@ export const Sizes = () => (
{SIZES.map(size => ( {size}} size={size} buttons={[ @@ -145,6 +147,7 @@ export const Block = () => (
{SIZES.map(size => ( {size}} size={size} diff --git a/packages/ui/src/components/button/button.stories.tsx b/packages/ui/src/components/button/button.stories.tsx index e59e2e30d..7b4457acf 100644 --- a/packages/ui/src/components/button/button.stories.tsx +++ b/packages/ui/src/components/button/button.stories.tsx @@ -35,13 +35,15 @@ export const Colors = () => (

Default

{LOOKS.map(look => ( - + ))}

Soft

{SOFT_LOOKS.map(look => ( - ))} @@ -59,14 +61,14 @@ export const Sizes = () => (

{size}

{LOOKS.map(look => ( - ))}
{SOFT_LOOKS.map(look => ( - ))} @@ -86,7 +88,7 @@ export const Block = () => (

{size}

{SOFT_LOOKS.map(look => ( - ))} @@ -106,14 +108,14 @@ export const Icons = () => (

Colors

{LOOKS.map(look => ( - ))}
{SOFT_LOOKS.map(look => ( - ))} @@ -121,14 +123,14 @@ export const Icons = () => (

Sizes

{SIZES.map(size => ( - ))}
{SIZES.map(size => ( - ))} @@ -149,14 +151,14 @@ export const Icons = () => (

Colors

{LOOKS.map(look => ( - ))}
{SOFT_LOOKS.map(look => ( - ))} @@ -164,14 +166,14 @@ export const Icons = () => (

Sizes

{SIZES.map(size => ( - ))}
{SIZES.map(size => ( - ))} @@ -191,23 +193,23 @@ export const Icons = () => (

Colors

{LOOKS.map(look => ( -
{SOFT_LOOKS.map(look => ( -

Sizes

{SIZES.map(size => ( -
{SIZES.map(size => ( -

Block

diff --git a/packages/ui/src/components/button/button.styles.ts b/packages/ui/src/components/button/button.styles.ts index 155f5ad85..089bcb543 100644 --- a/packages/ui/src/components/button/button.styles.ts +++ b/packages/ui/src/components/button/button.styles.ts @@ -6,7 +6,7 @@ import { tv } from 'tailwind-variants'; export const styles = tv( { slots: { - base: 'items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none', + base: 'items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none', iconBefore: '', iconAfter: '', dropdown: 'ml-[0.4em]', diff --git a/packages/ui/src/components/collapsible/collapsible.component.tsx b/packages/ui/src/components/collapsible/collapsible.component.tsx index 4f52c3d90..a0dc01718 100644 --- a/packages/ui/src/components/collapsible/collapsible.component.tsx +++ b/packages/ui/src/components/collapsible/collapsible.component.tsx @@ -30,7 +30,7 @@ export function Collapsible({ const handleClick = useCallback(() => { onClick(); setContentOpen(contentOpen => !contentOpen); - }, [contentOpen]); + }, [onClick]); const styles = collapsibleStyles({ open: contentOpen }); diff --git a/packages/ui/src/components/date-picker/date-picker.component.tsx b/packages/ui/src/components/date-picker/date-picker.component.tsx index 07cdad5cf..90e4f30b8 100644 --- a/packages/ui/src/components/date-picker/date-picker.component.tsx +++ b/packages/ui/src/components/date-picker/date-picker.component.tsx @@ -103,7 +103,7 @@ export function DatePicker({ ref.current.isDateDisabled = (date: Date) => { return isDateDisabled(date, disableWeekends, disableDaysOfWeek, disableDates); }; - }, [ref, initialized]); + }, [ref, initialized, dateAdapter, localization, value, id, name, disableWeekends, disableDaysOfWeek, disableDates]); useLayoutEffect(() => { if (!ref.current) { diff --git a/packages/ui/src/components/date-picker/date-picker.stories.tsx b/packages/ui/src/components/date-picker/date-picker.stories.tsx index e766ab805..9cec17f18 100644 --- a/packages/ui/src/components/date-picker/date-picker.stories.tsx +++ b/packages/ui/src/components/date-picker/date-picker.stories.tsx @@ -52,32 +52,29 @@ export const Sizes: Story = { /** * > Controlled value */ -export const Controlled: Story = { - args: {}, - render: () => { - const [value, setValue] = useState('2023-08-01'); - return ( - { - console.log(value.target.value); - setValue(value.target.value); - }} - onOpen={() => { - console.log('onOpen'); - }} - onClose={() => { - console.log('onClose'); - }} - onBlur={() => { - console.log('onBlur'); - }} - onFocus={() => { - console.log('onFocus'); - }} - value={value} - /> - ); - }, +export const Controlled = () => { + const [value, setValue] = useState('2023-08-01'); + return ( + { + console.log(value.target.value); + setValue(value.target.value); + }} + onOpen={() => { + console.log('onOpen'); + }} + onClose={() => { + console.log('onClose'); + }} + onBlur={() => { + console.log('onBlur'); + }} + onFocus={() => { + console.log('onFocus'); + }} + value={value} + /> + ); }; /** @@ -104,37 +101,34 @@ export const DisableSpecificDates: Story = { /** * > Form field example */ -export const FormField: Story = { - args: {}, - render: () => { - const [value, setValue] = useState('2023-08-01'); +export const FormField = () => { + const [value, setValue] = useState('2023-08-01'); - return ( - - { - console.log(value.target.value); - setValue(value.target.value); - }} - onOpen={() => { - console.log('onOpen'); - }} - onClose={() => { - console.log('onClose'); - }} - onBlur={() => { - console.log('onBlur'); - }} - onFocus={() => { - console.log('onFocus'); - }} - value={value} - /> - - ); - }, + return ( + + { + console.log(value.target.value); + setValue(value.target.value); + }} + onOpen={() => { + console.log('onOpen'); + }} + onClose={() => { + console.log('onClose'); + }} + onBlur={() => { + console.log('onBlur'); + }} + onFocus={() => { + console.log('onFocus'); + }} + value={value} + /> + + ); }; diff --git a/packages/ui/src/components/date-picker/date-picker.utils.ts b/packages/ui/src/components/date-picker/date-picker.utils.ts index 362604f0e..688e68650 100644 --- a/packages/ui/src/components/date-picker/date-picker.utils.ts +++ b/packages/ui/src/components/date-picker/date-picker.utils.ts @@ -42,7 +42,7 @@ export function useListener( element.addEventListener(eventName, handler); return () => element.removeEventListener(eventName, handler); } - }, [eventName, handler]); + }, [eventName, handler, ref]); } export function createDate(year: string, month: string, day: string) { diff --git a/packages/ui/src/components/error-message/error-message.component.tsx b/packages/ui/src/components/error-message/error-message.component.tsx index 6b9102c5f..2710789f4 100644 --- a/packages/ui/src/components/error-message/error-message.component.tsx +++ b/packages/ui/src/components/error-message/error-message.component.tsx @@ -11,8 +11,8 @@ export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message, return Array.isArray(message) ? (
    - {message.map(msg => ( -
  • + {message.map((msg, index) => ( +
  • {msg}
    • diff --git a/packages/ui/src/components/error-message/error-message.types.ts b/packages/ui/src/components/error-message/error-message.types.ts index d41accadf..a6368a8bc 100644 --- a/packages/ui/src/components/error-message/error-message.types.ts +++ b/packages/ui/src/components/error-message/error-message.types.ts @@ -1,4 +1,4 @@ -import { HTMLAttributes, ReactNode } from 'react'; +import { HTMLAttributes } from 'react'; import { AriaFieldProps } from 'react-aria'; export type ErrorMessageProps = { diff --git a/packages/ui/src/components/field/field.component.tsx b/packages/ui/src/components/field/field.component.tsx index 55b748f6b..438503a3d 100644 --- a/packages/ui/src/components/field/field.component.tsx +++ b/packages/ui/src/components/field/field.component.tsx @@ -33,7 +33,7 @@ export function Field({ return cloneElement(child, fieldProps); } }); - }, [children]); + }, [children, fieldProps]); return ( diff --git a/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx b/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx index c6ecc0a10..48977efbd 100644 --- a/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx +++ b/packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx @@ -860,6 +860,7 @@ export const PromotilesVerticalList: Story = {
    {MOCK_VERTICAL_PROMOS.map(({ title, subtitle }) => ( Corner flag} > + {/* Disabled as we can't import Image */} + {/* eslint-disable-next-line @next/next/no-img-element */} ; * > Default usage example */ export const DefaultStory: Story = { + // for underscored property + // eslint-disable-next-line @typescript-eslint/no-unused-vars render: ({ brand: _, ...rest }, { globals: { theme } }) => { const brand = theme ? theme.toLowerCase() : 'wbc'; return ( diff --git a/packages/ui/src/components/form/form.stories.tsx b/packages/ui/src/components/form/form.stories.tsx index fa5a8dfda..fe0c2210e 100644 --- a/packages/ui/src/components/form/form.stories.tsx +++ b/packages/ui/src/components/form/form.stories.tsx @@ -170,7 +170,7 @@ export const AllSpacings: Story = { return (
    {(['medium', 'large'] as const).map(size => ( -
    +

    Form with Spacing:{size}. Sets spacing between label, hint and form groups.

    This is a hint diff --git a/packages/ui/src/components/header/header.component.tsx b/packages/ui/src/components/header/header.component.tsx index fb4fb6c54..bd8c43fb4 100644 --- a/packages/ui/src/components/header/header.component.tsx +++ b/packages/ui/src/components/header/header.component.tsx @@ -83,7 +83,7 @@ export function Header({ return () => { window.removeEventListener('scroll', handleScroll); }; - }, []); + }, [fixed, handleScroll]); const logoAlignment = logoCenter ? 'center' : 'left'; diff --git a/packages/ui/src/components/header/header.stories.tsx b/packages/ui/src/components/header/header.stories.tsx index 237c36db7..b4a99dce7 100644 --- a/packages/ui/src/components/header/header.stories.tsx +++ b/packages/ui/src/components/header/header.stories.tsx @@ -26,6 +26,8 @@ type Story = StoryObj; * > Default usage example */ export const DefaultStory: Story = { + // for underscored property + // eslint-disable-next-line @typescript-eslint/no-unused-vars render: ({ brand: _, ...rest }, { globals: { theme } }) => { const brand = theme ? theme.toLowerCase() : 'wbc'; return ( @@ -40,6 +42,8 @@ export const DefaultStory: Story = { * > Example with a button on the right */ export const RightButton: Story = { + // for underscored property + // eslint-disable-next-line @typescript-eslint/no-unused-vars render: ({ brand: _, ...rest }, { globals: { theme } }) => { const brand = theme ? theme.toLowerCase() : 'wbc'; return ( @@ -58,6 +62,8 @@ export const RightButton: Story = { * > Example of logo centering when XSL */ export const CenterAtXS: Story = { + // for underscored property + // eslint-disable-next-line @typescript-eslint/no-unused-vars render: ({ brand: _, ...rest }, { globals: { theme } }) => { const brand = theme ? theme.toLowerCase() : 'wbc'; return ( @@ -72,6 +78,8 @@ export const CenterAtXS: Story = { * > Example of logo with onClick */ export const LogoOnClick: Story = { + // for underscored property + // eslint-disable-next-line @typescript-eslint/no-unused-vars render: ({ brand: _, ...rest }, { globals: { theme } }) => { const brand = theme ? theme.toLowerCase() : 'wbc'; return ( @@ -87,6 +95,8 @@ export const LogoOnClick: Story = { * > Example of header with skiplink */ export const LogoWithSkipLink: Story = { + // for underscored property + // eslint-disable-next-line @typescript-eslint/no-unused-vars render: ({ brand: _, ...rest }, { globals: { theme } }) => { const brand = theme ? theme.toLowerCase() : 'wbc'; return ( @@ -101,6 +111,8 @@ export const LogoWithSkipLink: Story = { * > Example fixed header. Does not show correctly in Docs view as it will show how it looks when scrolled, check specifc story for non-scrolled view */ export const Fixed: Story = { + // for underscored property + // eslint-disable-next-line @typescript-eslint/no-unused-vars render: ({ brand: _, ...rest }, { globals: { theme } }) => { const brand = theme ? theme.toLowerCase() : 'wbc'; return ( @@ -115,6 +127,8 @@ export const Fixed: Story = { * > Example of header with arrow button */ export const WithArrow: Story = { + // for underscored property + // eslint-disable-next-line @typescript-eslint/no-unused-vars render: ({ brand: _, ...rest }, { globals: { theme } }) => { const brand = theme ? theme.toLowerCase() : 'wbc'; return ( @@ -129,6 +143,8 @@ export const WithArrow: Story = { * > Example of header with arrow button with onClick */ export const WithArrowOnClick: Story = { + // for underscored property + // eslint-disable-next-line @typescript-eslint/no-unused-vars render: ({ brand: _, ...rest }, { globals: { theme } }) => { const brand = theme ? theme.toLowerCase() : 'wbc'; return ( @@ -149,6 +165,8 @@ export const WithArrowOnClick: Story = { * > Example of header with hamburger (only visible below xsl) */ export const WithHamburger: Story = { + // for underscored property + // eslint-disable-next-line @typescript-eslint/no-unused-vars render: ({ brand: _, ...rest }, { globals: { theme } }) => { const brand = theme ? theme.toLowerCase() : 'wbc'; return ( @@ -163,6 +181,8 @@ export const WithHamburger: Story = { * > Example of header with hamburger (only visible below xsl) with onClick */ export const WithHamburgerOnClick: Story = { + // for underscored property + // eslint-disable-next-line @typescript-eslint/no-unused-vars render: ({ brand: _, ...rest }, { globals: { theme } }) => { const brand = theme ? theme.toLowerCase() : 'wbc'; return ( diff --git a/packages/ui/src/components/heading/heading.spec.tsx b/packages/ui/src/components/heading/heading.spec.tsx index 3ebe6a6ad..98496bc9e 100644 --- a/packages/ui/src/components/heading/heading.spec.tsx +++ b/packages/ui/src/components/heading/heading.spec.tsx @@ -1,7 +1,6 @@ import { render } from '@testing-library/react'; import { Heading } from './heading.component.js'; -import { styles } from './heading.styles.js'; import { HeadingProps } from './heading.types.js'; describe('Heading', () => { @@ -12,9 +11,9 @@ describe('Heading', () => { it('should have the correct size', () => { const sizes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; - sizes.forEach((size: any) => { + sizes.forEach(size => { const { getByTestId } = render( - + Heading , ); @@ -24,7 +23,7 @@ describe('Heading', () => { it('should have the heading tag', () => { const headingLevels = [1, 2, 3, 4, 5, 6]; - headingLevels.forEach((level: any) => { + headingLevels.forEach(level => { const { getByRole } = render( Heading diff --git a/packages/ui/src/components/heading/heading.stories.tsx b/packages/ui/src/components/heading/heading.stories.tsx index 5e74b2a53..062d8eb70 100644 --- a/packages/ui/src/components/heading/heading.stories.tsx +++ b/packages/ui/src/components/heading/heading.stories.tsx @@ -1,4 +1,4 @@ -import { type Meta, StoryFn, type StoryObj } from '@storybook/react'; +import { type Meta, StoryFn } from '@storybook/react'; import { Heading } from './heading.component.js'; import { HeadingProps } from './heading.types.js'; @@ -14,7 +14,6 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; const sizes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; @@ -22,15 +21,19 @@ const sizes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; * > Default usage example */ export const Default = () => { - return sizes.map((size: any) => Heading size: {size}); + return sizes.map(size => ( + + Heading size: {size} + + )); }; /** * > With tag prop */ export const WithTag = () => { - return sizes.map((size: any) => ( - 1 ? 'h1' : 'h2'} size={size}> + return sizes.map(size => ( + 1 ? 'h1' : 'h2'} size={size as HeadingProps['size']}> Heading tag:{size > 1 ? ' h1' : ' h2'} size: {size} )); @@ -40,8 +43,8 @@ export const WithTag = () => { * > Brand usage example */ export const Brand = () => { - return sizes.map((size: any) => ( - + return sizes.map(size => ( + Heading size: {size} )); @@ -51,8 +54,8 @@ export const Brand = () => { * > With tag and brand prop */ export const WithTagAndBrand = () => { - return sizes.map((size: any) => ( - 1 ? 'h1' : 'h2'} size={size} brandHeading> + return sizes.map(size => ( + 1 ? 'h1' : 'h2'} size={size as HeadingProps['size']} brandHeading> Heading tag:{size > 1 ? ' h1' : ' h2'} size: {size} )); @@ -62,8 +65,8 @@ export const WithTagAndBrand = () => { * > Uppercase usage example */ export const Uppercase = () => { - return sizes.map((size: any) => ( - + return sizes.map(size => ( + Heading size: {size} )); diff --git a/packages/ui/src/components/icon/icon.stories.tsx b/packages/ui/src/components/icon/icon.stories.tsx index faef6fa26..62716f242 100644 --- a/packages/ui/src/components/icon/icon.stories.tsx +++ b/packages/ui/src/components/icon/icon.stories.tsx @@ -21,17 +21,14 @@ const AllIconsExample = (props: AllIcons.IconProps) => { setSearch(value); }, []); - const handleOnClick = useCallback( - async (key: string) => { - try { - await navigator.clipboard.writeText(`<${key} />`); - console.log('Content copied to clipboard'); - } catch (err) { - console.error('Failed to copy: ', err); - } - }, - [props.className], - ); + const handleOnClick = useCallback(async (key: string) => { + try { + await navigator.clipboard.writeText(`<${key} />`); + console.log('Content copied to clipboard'); + } catch (err) { + console.error('Failed to copy: ', err); + } + }, []); return (
    diff --git a/packages/ui/src/components/input-group/components/input-group-add-ons/components/input-group-add-on-default-add-on/input-group-add-on-default-add-on.component.tsx b/packages/ui/src/components/input-group/components/input-group-add-ons/components/input-group-add-on-default-add-on/input-group-add-on-default-add-on.component.tsx index e85f4a40a..b9dba30b9 100644 --- a/packages/ui/src/components/input-group/components/input-group-add-ons/components/input-group-add-on-default-add-on/input-group-add-on-default-add-on.component.tsx +++ b/packages/ui/src/components/input-group/components/input-group-add-ons/components/input-group-add-on-default-add-on/input-group-add-on-default-add-on.component.tsx @@ -6,12 +6,7 @@ import { type InputGroupAddOnDefaultAddOnProps } from './input-group-add-on-defa /** * @private */ -export const InputGroupAddOnDefaultAddOn = ({ - position, - className, - children, - ...props -}: InputGroupAddOnDefaultAddOnProps) => { +export const InputGroupAddOnDefaultAddOn = ({ className, children, ...props }: InputGroupAddOnDefaultAddOnProps) => { return (
    {children} diff --git a/packages/ui/src/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.ts b/packages/ui/src/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.ts index 679433516..761285c16 100644 --- a/packages/ui/src/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.ts +++ b/packages/ui/src/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.ts @@ -9,8 +9,8 @@ export const styles = tv( false: '', }, position: { - before: 'add-on-before group', - after: 'add-on-after group', + before: 'group/add-on-before', + after: ' group/add-on-after', }, }, compoundVariants: [ diff --git a/packages/ui/src/components/input-group/input-group.component.tsx b/packages/ui/src/components/input-group/input-group.component.tsx index f216ddb68..056cc3365 100644 --- a/packages/ui/src/components/input-group/input-group.component.tsx +++ b/packages/ui/src/components/input-group/input-group.component.tsx @@ -37,7 +37,7 @@ export function InputGroup({ ...(supportingText ? [`${id}-supporting-text`] : []), ]; return arr.join(' '); - }, [id, hint, errorMessage, supportingText]); + }, [errorMessage, id, hint, before, after, supportingText]); const { element: beforeElement, @@ -84,7 +84,7 @@ export function InputGroup({ } as any); } }); - }, [children, ariaDescribedByValue]); + }, [children, size, id, ariaDescribedByValue, width]); const isFieldset = useMemo(() => Tag === 'fieldset', [Tag]); diff --git a/packages/ui/src/components/input-group/input-group.scenarios.stories.tsx b/packages/ui/src/components/input-group/input-group.scenarios.stories.tsx index 23489ee7b..f7d20c2d4 100644 --- a/packages/ui/src/components/input-group/input-group.scenarios.stories.tsx +++ b/packages/ui/src/components/input-group/input-group.scenarios.stories.tsx @@ -1,4 +1,4 @@ -import { type Meta, StoryFn, type StoryObj } from '@storybook/react'; +import { type Meta, StoryFn } from '@storybook/react'; import { useCallback, useMemo, useState } from 'react'; import { ClearIcon, RefreshIcon, SearchIcon, VisibilityIcon, VisibilityOffIcon } from '../icon/index.js'; @@ -14,161 +14,144 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; /** * > Number of dependents */ -export const NumberStepper: Story = { - args: {}, - render: () => { - const [numberOfDependents, setNumberOfDependents] = useState(0); - const minusButton = useCallback(() => setNumberOfDependents(state => --state), []); - const plusButton = useCallback(() => setNumberOfDependents(state => ++state), []); - - return ( - -} - after={} - > - - - ); - }, +export const NumberStepper = () => { + const [numberOfDependents, setNumberOfDependents] = useState(0); + const minusButton = useCallback(() => setNumberOfDependents(state => --state), []); + const plusButton = useCallback(() => setNumberOfDependents(state => ++state), []); + + return ( + -} + after={} + > + + + ); }; /** * > Masked characters in field */ -export const MaskedCharacters: Story = { - args: {}, - render: () => { - const [typeInput, setTypeInput] = useState<'password' | 'text'>('password'); - const toggleType = useCallback(() => setTypeInput(state => (state === 'password' ? 'text' : 'password')), []); - - return ( - - ), - }} - > - - - ); - }, +export const MaskedCharacters = () => { + const [typeInput, setTypeInput] = useState<'password' | 'text'>('password'); + const toggleType = useCallback(() => setTypeInput(state => (state === 'password' ? 'text' : 'password')), []); + + return ( + + ), + }} + > + + + ); }; /** * > Search with left icon and clear button */ -export const SearchWithLeftIconAndClearButton: Story = { - args: {}, - render: () => { - const [inputValue, setInputValue] = useState(''); - const clearInput = useCallback(() => setInputValue(''), []); - - return ( - , - }} - > - setInputValue(value)} value={inputValue} /> - - ); - }, +export const SearchWithLeftIconAndClearButton = () => { + const [inputValue, setInputValue] = useState(''); + const clearInput = useCallback(() => setInputValue(''), []); + + return ( + , + }} + > + setInputValue(value)} value={inputValue} /> + + ); }; /** * > Inline field validation flow */ -export const InlineFieldValidationFlow: Story = { - args: {}, - render: () => { - const [inputValue, setInputValue] = useState(''); - const [validating, setValidating] = useState(false); - const [error, setError] = useState(); - const validate = useCallback(() => { - setValidating(true); - setError(undefined); - setTimeout(() => { - if (inputValue !== '647453') { - setError('Routing number not found'); - } - setValidating(false); - }, 1500); - }, [inputValue]); - - return ( - Check} - errorMessage={error} - > - setInputValue(value)} value={inputValue} /> - - ); - }, +export const InlineFieldValidationFlow = () => { + const [inputValue, setInputValue] = useState(''); + const [validating, setValidating] = useState(false); + const [error, setError] = useState(); + const validate = useCallback(() => { + setValidating(true); + setError(undefined); + setTimeout(() => { + if (inputValue !== '647453') { + setError('Routing number not found'); + } + setValidating(false); + }, 1500); + }, [inputValue]); + + return ( + Check} + errorMessage={error} + > + setInputValue(value)} value={inputValue} /> + + ); }; + /** * > Search Currency and frequency */ -export const CurrencyAndFrequency: Story = { - args: {}, - render: () => { - const [inputValue, setInputValue] = useState(''); - - return ( - - - - - - - } - > - setInputValue(value)} value={inputValue} /> - - ); - }, +export const CurrencyAndFrequency = () => { + const [inputValue, setInputValue] = useState(''); + + return ( + + + + + + + } + > + setInputValue(value)} value={inputValue} /> + + ); }; + /** * > Search Textarea with character count */ const MAX_LENGTH = 250; -export const TextareaWithCharacterCount: Story = { - args: {}, - render: () => { - const [inputValue, setInputValue] = useState(''); - const counterText = useMemo(() => { - const lengthLeft = MAX_LENGTH - inputValue.length; - return `${lengthLeft} remaining`; - }, [inputValue]); - - return ( - -