style: manually fix easy linting errors

cultureamp · Dec 2, 2024 · df532c3 · df532c3
1 parent 2a8a0b5
commit df532c3
Show file tree

Hide file tree

Showing 114 changed files with 218 additions and 196 deletions.
diff --git a/docs/.storybook/preview.tsx b/docs/.storybook/preview.tsx
@@ -50,7 +50,6 @@ const decorators: Preview['decorators'] = [
   RACDecorator,
   KaizenProviderDecorator,
   // reverseColor parameter wraps story in ReversedColors context and sets default background to Purple 700
-  // @ts-ignore
   (Story, context) => {
     if (
       // set in top toolbar
@@ -142,6 +141,7 @@ const preview = {
 
         const customDocNames = ['Usage Guidelines', 'API Specification']
         // Don't type the param - we can't use TypeScript within storySort
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
         const removeCustomDocNames = (title) => {
           return customDocNames.reduce((acc, docName) => {
             const regex = new RegExp(`/${docName}$`)

diff --git a/docs/components/DocsContainer/BackToTop/BackToTop.tsx b/docs/components/DocsContainer/BackToTop/BackToTop.tsx
@@ -23,7 +23,7 @@ export const BackToTop = ({
       onClick={(): void => window.scroll({ top: 0, left: 0, behavior: 'smooth' })}
       {...buttonAttributes}
     >
-      {children || (
+      {children ?? (
         <>
           <span aria-hidden={true}>↑</span> <span>Back to top</span>
         </>

diff --git a/docs/components/DocsContainer/DefaultDocsContainer.tsx b/docs/components/DocsContainer/DefaultDocsContainer.tsx
@@ -25,8 +25,7 @@ const DefaultLayout = ({ children }: LayoutProps): JSX.Element => (
 const DocsLayout = ({ children }: LayoutProps): JSX.Element => {
   const context = useContext(DocsContext)
 
-  // CSFFile attributes are populated, but unsure where the type definition is
-  // @ts-expect-error
+  // @ts-expect-error CSFFile attributes are populated, but unsure where the type definition is
   const csf = context.storyIdToCSFFile.values().next().value
 
   if (csf?.meta.parameters.docsLayout === 'fullPage') {

diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -5,13 +5,14 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
+    "strictNullChecks": true,
     "paths": {
       "~storybook/*": ["./*"],
       "~components/*": ["../packages/components/src/*"],
       "~tailwind/*": ["../packages/tailwind/src/*"],
       "~design-tokens/*": ["../packages/design-tokens/src/*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", ".storybook/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", ".storybook/*.ts", ".storybook/*.tsx"],
   "files": ["./types.d.ts"]
 }
diff --git a/packages/components/codemods/upgradeIconV1/transformIcon.ts b/packages/components/codemods/upgradeIconV1/transformIcon.ts
@@ -36,19 +36,21 @@ const transformIconProp = (
   propValue: ts.JsxAttributeValue | undefined,
 ): ts.JsxAttribute | null | undefined => {
   switch (propName) {
-    case 'role':
+    case 'role': {
       const oldValue = propValue && getPropValueText(propValue)
       return oldValue ? transformPropRole(oldValue) : undefined
+    }
     case 'aria-label':
       return createProp('alt', propValue)
     case 'classNameOverride':
       return createProp('className', propValue)
     // `aria-hidden` is not necessary as `role` will cater for presentational icons
     case 'aria-hidden':
-    // `fontSize` did nothing for svg icons
+    // (falls through) `aria-hidden` is not necessary as `role` will cater for presentational icons
     case 'fontSize':
-    // `viewBox` no longer relevant
+    // (falls through) `fontSize` did nothing for svg icons
     case 'viewBox':
+      // `viewBox` no longer relevant
       return null
     default:
       return undefined

diff --git a/packages/components/codemods/utils/getKaioTagName.ts b/packages/components/codemods/utils/getKaioTagName.ts
@@ -52,7 +52,7 @@ export const getKaioTagName = (
     const kaioNamedImports = getKaioNamedImports(visitedNode)
 
     if (!kaioNamedImports) {
-      return ts.forEachChild(visitedNode, visitNode) || undefined
+      return ts.forEachChild(visitedNode, visitNode)
     }
 
     kaioNamedImports.namedImports.find((importSpecifier) => {

diff --git a/packages/components/src/Avatar/Avatar.tsx b/packages/components/src/Avatar/Avatar.tsx
@@ -118,7 +118,7 @@ export const Avatar = ({
   disableInitials = false,
   isCompany = false,
   isCurrentUser = true,
-  alt = fullName || '',
+  alt = fullName ?? '',
   classNameOverride,
   ...restProps
 }: AvatarProps): JSX.Element => {

diff --git a/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx b/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx
@@ -28,10 +28,10 @@ export const CalendarRange = ({
   const calendarRef = useRef<CalendarRangeElement>(null)
 
   useEffect(() => {
-    if (calendarRef.current) onMount && onMount(calendarRef.current)
+    if (calendarRef.current) onMount?.(calendarRef.current)
   }, [calendarRef])
 
-  const monthToShow = selected?.from || defaultMonth
+  const monthToShow = selected?.from ?? defaultMonth
   const selectedMonth = monthToShow && isInvalidDate(monthToShow) ? undefined : monthToShow
 
   /* eslint-disable camelcase */

diff --git a/packages/components/src/Calendar/CalendarSingle/CalendarSingle.tsx b/packages/components/src/Calendar/CalendarSingle/CalendarSingle.tsx
@@ -30,7 +30,7 @@ export const CalendarSingle = ({
     if (calendarRef.current) onMount?.(calendarRef.current)
   }, [calendarRef])
 
-  const monthToShow = selected || defaultMonth
+  const monthToShow = selected ?? defaultMonth
   const selectedMonth = monthToShow && isInvalidDate(monthToShow) ? undefined : monthToShow
 
   /* eslint-disable camelcase */

diff --git a/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx b/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx
@@ -34,7 +34,7 @@ export const LegacyCalendarRange = ({
   locale,
   onDayChange,
 }: LegacyCalendarRangeProps): JSX.Element => {
-  const monthToShow = selectedRange?.from || defaultMonth
+  const monthToShow = selectedRange?.from ?? defaultMonth
   const selectedMonth = monthToShow && isInvalidDate(monthToShow) ? undefined : monthToShow
 
   /* eslint-disable camelcase */

diff --git a/packages/components/src/Checkbox/Checkbox/Checkbox.tsx b/packages/components/src/Checkbox/Checkbox/Checkbox.tsx
@@ -48,7 +48,7 @@ export const Checkbox = ({
       className={classnames(styles.checkbox, classNameOverride, reversed && styles.reversed)}
       checked={getCheckedFromStatus(checkedStatus)}
       onChange={onCheck}
-      value={value || checkedStatus}
+      value={value ?? checkedStatus}
       readOnly={onCheck === undefined}
       {...restProps}
     />

diff --git a/packages/components/src/Checkbox/CheckboxField/CheckboxField.tsx b/packages/components/src/Checkbox/CheckboxField/CheckboxField.tsx
@@ -29,7 +29,8 @@ export const CheckboxField = ({
   classNameOverride,
   ...restProps
 }: CheckboxFieldProps): JSX.Element => {
-  const id = propsId ?? useId()
+  const fallbackId = useId()
+  const id = propsId ?? fallbackId
 
   return (
     <div

diff --git a/packages/components/src/Checkbox/CheckboxGroup/CheckboxGroup.tsx b/packages/components/src/Checkbox/CheckboxGroup/CheckboxGroup.tsx
@@ -25,7 +25,8 @@ export const CheckboxGroup = ({
   classNameOverride,
   ...restProps
 }: CheckboxGroupProps): JSX.Element => {
-  const labelId = propsLabelId ?? useId()
+  const fallbackId = useId()
+  const labelId = propsLabelId ?? fallbackId
 
   return (
     <div

diff --git a/packages/components/src/Collapsible/Collapsible/Collapsible.tsx b/packages/components/src/Collapsible/Collapsible/Collapsible.tsx
@@ -56,7 +56,8 @@ export const Collapsible = ({
   const [stateIsOpen, setIsOpen] = useState<boolean>(open ?? false)
   const getOpen = (): boolean | undefined => (controlled ? open : stateIsOpen)
 
-  const id = propsId ?? useId()
+  const fallbackId = useId()
+  const id = propsId ?? fallbackId
 
   const handleSectionToggle = (): void => {
     const newIsOpen = !getOpen()

diff --git a/packages/components/src/DatePicker/DatePicker.tsx b/packages/components/src/DatePicker/DatePicker.tsx
@@ -81,7 +81,7 @@ export type DatePickerProps = {
  */
 export const DatePicker = ({
   id: propsId,
-  buttonRef: propsButtonRef = useRef<HTMLButtonElement>(null),
+  buttonRef: propsButtonRef,
   locale: propsLocale = 'en-AU',
   disabledDates,
   disabledDaysOfWeek,
@@ -116,7 +116,8 @@ export const DatePicker = ({
 
   const containerRef = useRef<HTMLInputElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
-  const buttonRef = useRef<HTMLButtonElement>(propsButtonRef?.current || null)
+  const fallbackButtonRef = useRef<HTMLButtonElement>(null)
+  const buttonRef = propsButtonRef ?? fallbackButtonRef
   const dateInputRefs = useRef({
     inputRef,
     buttonRef,

diff --git a/packages/components/src/DateRangePicker/DateRangePicker.spec.tsx b/packages/components/src/DateRangePicker/DateRangePicker.spec.tsx
@@ -13,7 +13,7 @@ const DateRangePickerWrapper = (props: Partial<DateRangePickerProps>): JSX.Eleme
     to: props.selectedDateRange?.to,
   })
   const { value: propValue, ...restProps } = props
-  const [value, setValue] = useState(propValue || '')
+  const [value, setValue] = useState(propValue ?? '')
 
   const onDateRangeChange = (dateRange: DateRange): void => {
     setSelectedDateRange(dateRange)

diff --git a/packages/components/src/DateRangePicker/DateRangePicker.tsx b/packages/components/src/DateRangePicker/DateRangePicker.tsx
@@ -53,7 +53,7 @@ export type DateRangePickerProps = {
  */
 export const DateRangePicker = ({
   id: propsId,
-  buttonRef = useRef<HTMLButtonElement>(null),
+  buttonRef,
   description: _description, // not used
   labelText,
   isDisabled = false,
@@ -71,6 +71,8 @@ export const DateRangePicker = ({
   onChange,
   ...inputProps
 }: DateRangePickerProps): JSX.Element => {
+  const fallbackRef = useRef<HTMLButtonElement>(null)
+  const ref = buttonRef ?? fallbackRef
   const reactId = useId()
   const id = propsId ?? reactId
 
@@ -91,8 +93,8 @@ export const DateRangePicker = ({
   }
 
   const handleReturnFocus = (): void => {
-    if (buttonRef.current) {
-      buttonRef.current.focus()
+    if (ref.current) {
+      ref.current.focus()
     }
   }
 
@@ -151,7 +153,7 @@ export const DateRangePicker = ({
             [styles.disabled]: isDisabled,
           })}
           disabled={isDisabled}
-          ref={buttonRef}
+          ref={ref}
           onClick={handleOpenClose}
           aria-label={selectedDateRange?.from ? `Change date: ${value}` : 'Choose date'}
           {...inputProps}

diff --git a/packages/components/src/DateRangePicker/utils/formatDateRangeValue.spec.ts b/packages/components/src/DateRangePicker/utils/formatDateRangeValue.spec.ts
@@ -11,7 +11,7 @@ describe('formatDateRangeValue', () => {
     expect(formatDateRangeValue(dateRangeFromOnly)).toEqual('Feb 1, 2022')
   })
 
-  it('displays a from date by itself', () => {
+  it('displays the year once when both dates share the same year', () => {
     const dateRangeBothValues: DateRange = {
       from: new Date(2022, 1, 1),
       to: new Date(2022, 2, 2),
@@ -20,7 +20,7 @@ describe('formatDateRangeValue', () => {
     expect(formatDateRangeValue(dateRangeBothValues)).toEqual('Feb 1 – Mar 2, 2022')
   })
 
-  it('displays a from date by itself', () => {
+  it('displays the year for both dates when they are not the same', () => {
     const dateRangeOvertoNewYear: DateRange = {
       from: new Date(2022, 1, 1),
       to: new Date(2023, 1, 1),

diff --git a/packages/components/src/ErrorPage/ErrorPage.tsx b/packages/components/src/ErrorPage/ErrorPage.tsx
@@ -39,7 +39,7 @@ export const ErrorPage = ({
   const content = useErrorMessages(code)
 
   const actions = {
-    primary: { href: callToAction?.homeHref || HOME_HREF },
+    primary: { href: callToAction?.homeHref ?? HOME_HREF },
     secondary: callToAction?.onContactSupport
       ? { onClick: callToAction.onContactSupport }
       : { href: getMailToHref(code) },
@@ -52,7 +52,7 @@ export const ErrorPage = ({
         body={
           <>
             <div className={styles.paragraphPadding}>
-              <Text variant="intro-lede">{message || content.message}</Text>
+              <Text variant="intro-lede">{message ?? content.message}</Text>
             </div>
             <Text color="dark-reduced-opacity" variant="small">
               <FormattedMessage
@@ -85,7 +85,7 @@ export const ErrorPage = ({
           }),
         }}
         text={{
-          title: title || content.title,
+          title: title ?? content.title,
         }}
       />
     </div>

diff --git a/packages/components/src/Filter/Filter/Filter.tsx b/packages/components/src/Filter/Filter/Filter.tsx
@@ -61,7 +61,7 @@ export const Filter = ({
           onEscapeKey={(): void => setIsOpen(false)}
         >
           <FilterPopover
-            referenceElement={filterButtonRef.current?.triggerRef?.current || null}
+            referenceElement={filterButtonRef.current?.triggerRef?.current ?? null}
             aria-labelledby={trigger.props.id}
           >
             {children}

diff --git a/...components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx b/...components/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx
@@ -38,7 +38,7 @@ export const FilterBarDatePicker = ({
       {...props}
       id={id}
       locale={locale}
-      selectedDate={filterState.value || undefined}
+      selectedDate={filterState.value}
       label={filterState.name}
       renderTrigger={(triggerProps): JSX.Element => (
         <FilterBarButton {...triggerProps} filterId={id} isRemovable={filterState.isRemovable} />

diff --git a/...mponents/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.tsx b/...mponents/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.tsx
@@ -75,7 +75,7 @@ export const FilterBarMultiSelect = ({
     <FilterMultiSelect
       label={filterState.name}
       // Convert the incoming FilterBar state to a Set (internal FilterMultiSelect state)
-      selectedKeys={new Set(filterState.value || null)}
+      selectedKeys={new Set(filterState.value ?? null)}
       onSelectionChange={(keys): void => {
         // Convert the internal FilterMultiSelect state (Set) to an Array for FilterBar state
         updateValue(id, convertSelectionToAConsumableFormat(keys))

diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx
@@ -50,7 +50,7 @@ export const FilterBarSelect = <Option extends SelectOption = SelectOption>({
     <FilterSelect<Option>
       {...props}
       items={items}
-      selectedKey={filterState.value || null}
+      selectedKey={filterState.value ?? null}
       label={filterState.name}
       renderTrigger={(triggerProps): JSX.Element => (
         <FilterBarButton {...triggerProps} filterId={id} isRemovable={filterState.isRemovable} />

diff --git a/...es/components/src/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx b/...es/components/src/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx
@@ -60,7 +60,7 @@ export const DateInputField = React.forwardRef<HTMLInputElement, DateInputFieldP
         <DateInput
           ref={ref}
           id={id}
-          labelText={labelText || dateInputLabelFallback}
+          labelText={labelText ?? dateInputLabelFallback}
           aria-describedby={inputDescribedBy}
           aria-errormessage={errorMessageId}
           aria-invalid={dateIsInvalid}

diff --git a/...src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.tsx b/...src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.tsx
@@ -101,7 +101,7 @@ export const FilterDatePickerField = ({
     selectedDate,
     inputValue: transformDateToInputValue(selectedDate, disabledDays, locale) || '',
     startMonth:
-      selectedDate && !isInvalidDate(selectedDate) ? selectedDate : defaultMonth || new Date(),
+      selectedDate && !isInvalidDate(selectedDate) ? selectedDate : (defaultMonth ?? new Date()),
   })
 
   const handleDateChange = (date: Date | undefined): void => {

diff --git a/...ter/FilterDatePicker/subcomponents/FilterDatePickerField/filterDatePickerFieldReducer.tsx b/...ter/FilterDatePicker/subcomponents/FilterDatePickerField/filterDatePickerFieldReducer.tsx
@@ -30,7 +30,7 @@ export const filterDatePickerFieldReducer = (
       return {
         ...state,
         selectedDate: action.date,
-        inputValue: action.inputValue === undefined ? state.inputValue : action.inputValue,
+        inputValue: action.inputValue ?? state.inputValue,
         startMonth: action.date && !isInvalidDate(action.date) ? action.date : new Date(),
       }
 

diff --git a/...erDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx b/...erDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx
@@ -94,8 +94,8 @@ export const FilterDateRangePickerField = ({
     defaultMessage: 'Date to',
     description: "Label for the 'date to' field",
   })
-  const inputStartDateLabel = inputStartDateProps?.labelText || translatedDateFrom
-  const inputEndDateLabel = inputEndDateProps?.labelText || translatedDateTo
+  const inputStartDateLabel = inputStartDateProps?.labelText ?? translatedDateFrom
+  const inputEndDateLabel = inputEndDateProps?.labelText ?? translatedDateTo
 
   const transformDateToInputValue = (date: Date | undefined): string =>
     date ? formatDateAsText(date, disabledDays, locale) : ''
@@ -140,7 +140,7 @@ export const FilterDateRangePickerField = ({
     startMonth:
       selectedRange?.from && !isInvalidDate(selectedRange.from)
         ? selectedRange.from
-        : defaultMonth || new Date(),
+        : (defaultMonth ?? new Date()),
   })
 
   const inputStartDateHandlers = useDateInputHandlers({

diff --git a/...angePicker/subcomponents/FilterDateRangePickerField/filterDateRangePickerFieldReducer.tsx b/...angePicker/subcomponents/FilterDateRangePickerField/filterDateRangePickerFieldReducer.tsx
@@ -41,15 +41,14 @@ export const filterDatePickerFieldReducer = (
       return {
         ...state,
         selectedStartDate: action.date,
-        inputStartValue:
-          action.inputValue === undefined ? state.inputStartValue : action.inputValue,
+        inputStartValue: action.inputValue ?? state.inputStartValue,
         startMonth: action.date && !isInvalidDate(action.date) ? action.date : new Date(),
       }
     case 'update_selected_end_date':
       return {
         ...state,
         selectedEndDate: action.date,
-        inputEndValue: action.inputValue === undefined ? state.inputEndValue : action.inputValue,
+        inputEndValue: action.inputValue ?? state.inputEndValue,
       }
     case 'navigate_months':
       return {

diff --git a/packages/components/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx b/packages/components/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx
@@ -198,7 +198,7 @@ export const Async: Story = {
       () =>
         data?.pages
           .flatMap((res) => res.results)
-          .flatMap((person) => ({ label: person.name, value: person.url })) || [],
+          .flatMap((person) => ({ label: person.name, value: person.url })) ?? [],
       [data],
     )
 

diff --git a/...mponents/src/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.tsx b/...mponents/src/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.tsx
@@ -35,7 +35,7 @@ export function MenuTriggerProvider({
 
   // Get A11y attributes and events for the menu trigger and menu elements
   const fallbackRef = useRef<HTMLButtonElement>(null)
-  const ref = triggerRef || fallbackRef
+  const ref = triggerRef ?? fallbackRef
   const { menuTriggerProps, menuProps } = useMenuTrigger<ItemType>({}, state, ref)
 
   // Get A11y attributes and events for the button based on the trigger props from useMenuTrigger