style: eslint autofix

docs/components/DocsContainer/DefaultDocsContainer.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-// eslint-disable-next-line import/no-extraneous-dependencies
+
 import { DocsContainer, DocsContainerProps, DocsContext } from '@storybook/blocks'
 import { BackToTop } from './BackToTop'
 import { Content, Main, DocsWrapper } from './Layout'

docs/components/DosAndDonts/DosAndDonts.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-// eslint-disable-next-line import/no-extraneous-dependencies
+
 import { Canvas, Unstyled } from '@storybook/blocks'
 import classnames from 'classnames'
 import { Text } from '~components/Text'

docs/components/Installation/Installation.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-// eslint-disable-next-line import/no-extraneous-dependencies
+
 import { Source } from '@storybook/blocks'
 
 export type InstallationProps = {

docs/components/LinkTo/LinkTo.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-// eslint-disable-next-line import/no-extraneous-dependencies
+
 import { linkTo } from '@storybook/addon-links'
 import classnames from 'classnames'
 

docs/components/NoClipCanvas/NoClipCanvas.tsx

@@ -1,5 +1,5 @@
 import React, { useId, useState } from 'react'
-// eslint-disable-next-line import/no-extraneous-dependencies
+
 import { Source, SourceProps, Story, Unstyled } from '@storybook/blocks'
 import classnames from 'classnames'
 import styles from './NoClipCanvas.module.scss'

docs/components/ResourceLinks/ResourceLinks.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-// eslint-disable-next-line import/no-extraneous-dependencies
+
 import { Unstyled } from '@storybook/blocks'
 import classNames from 'classnames'
 import { Text } from '~components/Text'

docs/components/SbContent/SbContent.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-// eslint-disable-next-line import/no-extraneous-dependencies
+
 import { Unstyled } from '@storybook/blocks'
 import classNames from 'classnames'
 import styles from './SbContent.module.scss'

docs/components/StickerSheet/StickerSheet.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-// eslint-disable-next-line import/no-extraneous-dependencies
+
 import isChromatic from 'chromatic'
 import classnames from 'classnames'
 import { Heading } from '~components/Heading'

docs/components/StickerSheet/types.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { StoryObj } from '@storybook/react'
 
 export type StickerSheetArgs<T extends Record<string, any>> = {

packages/components/codemods/upgradeIconV1/transformIcon.ts

@@ -60,7 +60,7 @@ export const transformIcon = (
   name: string,
   isFilled?: boolean,
 ): ts.Node => {
-  const styles: Map<string, ts.JsxAttributeValue> = new Map()
+  const styles = new Map<string, ts.JsxAttributeValue>()
 
   const newAttributes = node.attributes.properties.reduce<ts.JsxAttributeLike[]>((acc, attr) => {
     if (ts.isJsxAttribute(attr)) {
@@ -79,7 +79,7 @@ export const transformIcon = (
 
       if (propsToStyleMap.has(propName)) {
         if (attr.initializer) {
-          styles.set(propsToStyleMap.get(propName) as string, attr.initializer)
+          styles.set(propsToStyleMap.get(propName)!, attr.initializer)
         }
         return acc
       }

packages/components/codemods/upgradeIconV1/upgradeIconV1.ts

@@ -39,7 +39,7 @@ export const upgradeIconV1 =
 
         if (kaioComponentName === 'CaMonogramIcon') {
           setImportToRemove(importsToRemove, oldImportSource, kaioComponentName)
-          const alias = componentToAliasMap.get('Brand') as string
+          const alias = componentToAliasMap.get('Brand')!
 
           if (!kaioTagNames.has(alias)) {
             setImportToAdd(importsToAdd, '@kaizen/components', {
@@ -52,7 +52,7 @@ export const upgradeIconV1 =
 
         if (kaioComponentName === 'SpinnerIcon') {
           setImportToRemove(importsToRemove, oldImportSource, kaioComponentName)
-          const alias = componentToAliasMap.get('LoadingSpinner') as string
+          const alias = componentToAliasMap.get('LoadingSpinner')!
 
           if (!kaioTagNames.has(alias)) {
             setImportToAdd(importsToAdd, '@kaizen/components', {

packages/components/codemods/utils/getPropValueText.spec.ts

@@ -17,42 +17,42 @@ export const getJsxAttributeValue = (node: ts.Node): ts.JsxAttributeValue | unde
 describe('getPropValueText', () => {
   it('will return the text value of a string literal', () => {
     const pancakeAst = parseJsx('<Pancake topping="jam" />')
-    const mockAttribute = getJsxAttributeValue(pancakeAst) as ts.JsxAttributeValue
+    const mockAttribute = getJsxAttributeValue(pancakeAst)!
 
     expect(getPropValueText(mockAttribute)).toEqual('jam')
   })
 
   it('will return the text value of a expression with double quotes', () => {
     const pancakeAst = parseJsx('<Pancake topping={"jam"} />')
-    const mockAttribute = getJsxAttributeValue(pancakeAst) as ts.JsxAttributeValue
+    const mockAttribute = getJsxAttributeValue(pancakeAst)!
 
     expect(getPropValueText(mockAttribute)).toEqual('jam')
   })
 
   it('will return the text value of a expression with single quotes', () => {
     const pancakeAst = parseJsx("<Pancake topping={'jam'} />")
-    const mockAttribute = getJsxAttributeValue(pancakeAst) as ts.JsxAttributeValue
+    const mockAttribute = getJsxAttributeValue(pancakeAst)!
 
     expect(getPropValueText(mockAttribute)).toEqual('jam')
   })
 
   it('will return the text value of a expression with backticks', () => {
     const pancakeAst = parseJsx('<Pancake topping={`jam`} />')
-    const mockAttribute = getJsxAttributeValue(pancakeAst) as ts.JsxAttributeValue
+    const mockAttribute = getJsxAttributeValue(pancakeAst)!
 
     expect(getPropValueText(mockAttribute)).toEqual('jam')
   })
 
   it('will return undefined if a JSX element is used as a value', () => {
     const pancakeAst = parseJsx('<Pancake topping={<Cheese />} />')
-    const mockAttribute = getJsxAttributeValue(pancakeAst) as ts.JsxAttributeValue
+    const mockAttribute = getJsxAttributeValue(pancakeAst)!
 
     expect(getPropValueText(mockAttribute)).toBeUndefined()
   })
 
   it('will return undefined if a boolean value', () => {
     const pancakeAst = parseJsx('<Pancake topping={false} />')
-    const mockAttribute = getJsxAttributeValue(pancakeAst) as ts.JsxAttributeValue
+    const mockAttribute = getJsxAttributeValue(pancakeAst)!
 
     expect(getPropValueText(mockAttribute)).toBeUndefined()
   })

packages/components/codemods/utils/getPropValueText.ts

@@ -11,7 +11,7 @@ export const getPropValueText = (propValue: ts.JsxAttributeValue): string | unde
   if (expression) {
     const expressionText = expression.getText()
 
-    if (expressionText.match(/^['"`]/)) {
+    if (/^['"`]/.exec(expressionText)) {
       return expressionText.replace(/^['"`]|['"`]$/g, '')
     }
   }

packages/components/codemods/utils/transformSource.ts

@@ -4,7 +4,7 @@ import { printAst } from './printAst'
 
 export type TransformSourceArgs = {
   sourceFile: ts.SourceFile
-  transformers: Array<ts.TransformerFactory<ts.SourceFile>>
+  transformers: ts.TransformerFactory<ts.SourceFile>[]
 }
 
 export const transformSource = ({ sourceFile, transformers }: TransformSourceArgs): string => {

packages/components/src/Avatar/_docs/Avatar.stickersheet.stories.tsx

@@ -50,7 +50,7 @@ const PROPS_COMPANY: CompanyAvatarProps = {
   isCompany: true,
 }
 
-const ROWS: Array<{ title: string; size: AvatarSizes }> = [
+const ROWS: { title: string; size: AvatarSizes }[] = [
   { title: 'XX-Large', size: 'xxlarge' },
   { title: 'X-Large', size: 'xlarge' },
   { title: 'Large', size: 'large' },

packages/components/src/AvatarGroup/_docs/AvatarGroup.stickersheet.stories.tsx

@@ -12,7 +12,7 @@ export default {
   },
 } satisfies Meta
 
-const ROWS: Array<{ title: string; size: AvatarGroupSize }> = [
+const ROWS: { title: string; size: AvatarGroupSize }[] = [
   { title: 'Large', size: 'large' },
   { title: 'Medium', size: 'medium' },
   { title: 'Small', size: 'small' },

packages/components/src/Badge/_docs/Badge.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
-import { BadgeAnimated } from '~components/Badge'
-import { Badge } from '../index'
+import { BadgeAnimated, Badge } from '~components/Badge'
 
 const meta = {
   title: 'Components/Badge',

packages/components/src/ButtonGroup/ButtonGroup.tsx

@@ -14,7 +14,7 @@ const isFilterButton = (node: React.ReactNode): node is React.ReactElement<Filte
 export type ButtonGroupProps = {
   children:
     | React.ReactElement<FilterButtonBaseProps | TooltipProps>
-    | Array<React.ReactElement<FilterButtonBaseProps | TooltipProps>>
+    | React.ReactElement<FilterButtonBaseProps | TooltipProps>[]
 } & Omit<OverrideClassName<HTMLAttributes<HTMLDivElement>>, 'children'>
 
 export const ButtonGroup = ({

packages/components/src/Calendar/enums.ts

@@ -9,7 +9,7 @@ export const DayOfWeek = {
 } as const
 
 // Intentionally naming the type the same as the const for tree-shaking
-// eslint-disable-next-line @typescript-eslint/no-redeclare
+
 export type DayOfWeek = (typeof DayOfWeek)[keyof typeof DayOfWeek]
 
 export const DateFormat = {
@@ -18,5 +18,5 @@ export const DateFormat = {
 } as const
 
 // Intentionally naming the type the same as the const for tree-shaking
-// eslint-disable-next-line @typescript-eslint/no-redeclare
+
 export type DateFormat = (typeof DateFormat)[keyof typeof DateFormat]

packages/components/src/Card/_docs/Card.stickersheet.stories.tsx

@@ -23,7 +23,7 @@ const colors = [
   'red',
   'white',
   'yellow',
-] satisfies Array<CardProps['color']>
+] satisfies CardProps['color'][]
 
 const variants = [
   'default',
@@ -33,7 +33,7 @@ const variants = [
   'destructive',
   'assertive',
   'highlight',
-] satisfies Array<CardProps['variant']>
+] satisfies CardProps['variant'][]
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed, ...args }) => (

packages/components/src/Card/_docs/Card.stories.tsx

@@ -38,7 +38,7 @@ const colors = [
   'red',
   'white',
   'yellow',
-] satisfies Array<CardProps['color']>
+] satisfies CardProps['color'][]
 
 export const Colors: Story = {
   render: () => (

packages/components/src/Checkbox/Checkbox/_docs/Checkbox.stickersheet.stories.tsx

@@ -33,10 +33,10 @@ const StickerSheetTemplate: StickerSheetStory = {
       { title: 'Off', checkedStatus: 'off' },
       { title: 'On', checkedStatus: 'on' },
       { title: 'Mixed', checkedStatus: 'mixed' },
-    ] satisfies Array<{
+    ] satisfies {
       title: string
       checkedStatus: CheckboxProps['checkedStatus']
-    }>
+    }[]
 
     return (
       <StickerSheet isReversed={isReversed} headers={['Default', 'Hover', 'Focus', 'Disabled']}>

packages/components/src/Checkbox/CheckboxField/_docs/CheckboxField.stickersheet.stories.tsx

@@ -22,10 +22,10 @@ const StickerSheetTemplate: StickerSheetStory = {
       { title: 'Off', checkedStatus: 'off' },
       { title: 'On', checkedStatus: 'on' },
       { title: 'Mixed', checkedStatus: 'mixed' },
-    ] satisfies Array<{
+    ] satisfies {
       title: string
       checkedStatus: CheckboxFieldProps['checkedStatus']
-    }>
+    }[]
 
     return (
       <StickerSheet isReversed={isReversed} headers={['Default', 'Hover', 'Focus', 'Disabled']}>

packages/components/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.stories.tsx

@@ -57,17 +57,17 @@ export const Playground: Story = {
       <CheckboxGroup {...args}>
         <CheckboxField
           labelText="Checkbox one"
-          checkedStatus={checkedStatus['one']}
+          checkedStatus={checkedStatus.one}
           onCheck={onCheckHandler('one')}
         />
         <CheckboxField
           labelText="Checkbox two"
-          checkedStatus={checkedStatus['two']}
+          checkedStatus={checkedStatus.two}
           onCheck={onCheckHandler('two')}
         />
         <CheckboxField
           labelText="Checkbox three"
-          checkedStatus={checkedStatus['three']}
+          checkedStatus={checkedStatus.three}
           onCheck={onCheckHandler('three')}
         />
       </CheckboxGroup>

packages/components/src/Collapsible/CollapsibleGroup/CollapsibleGroup.tsx

@@ -6,7 +6,7 @@ import { OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './CollapsibleGroup.module.scss'
 
 export type CollapsibleGroupProps = {
-  children: Array<React.ReactElement<CollapsibleProps>>
+  children: React.ReactElement<CollapsibleProps>[]
   separated?: boolean
   sticky?: Sticky
   noSectionPadding?: boolean

packages/components/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx

@@ -33,17 +33,20 @@ const StickerSheetTemplate: StickerSheetStory = {
         'If providing further actions, include a link to an action or use a Default or Primary action.',
     } satisfies EmptyStateProps
 
-    const variants = ['success', 'warning', 'informative', 'expert-advice'] satisfies Array<
-      EmptyStateProps['variant']
-    >
+    const variants = [
+      'success',
+      'warning',
+      'informative',
+      'expert-advice',
+    ] satisfies EmptyStateProps['variant'][]
 
     const illustrationTypes = [
       'positive',
       'neutral',
       'negative',
       'informative',
       'action',
-    ] satisfies Array<EmptyStateProps['illustrationType']>
+    ] satisfies EmptyStateProps['illustrationType'][]
 
     return (
       <>

packages/components/src/Filter/FilterBar/FilterBar.spec.tsx

@@ -770,7 +770,7 @@ describe('<FilterBar />', () => {
 
   describe('Context use cases', () => {
     describe('getActiveFilterValues()', () => {
-      type Items = Array<{ value: string; label: string }>
+      type Items = { value: string; label: string }[]
 
       type AsyncValues = {
         city: string[]

packages/components/src/Filter/FilterBar/_docs/FilterBar.stories.tsx

@@ -15,8 +15,7 @@ import {
   QueryParamConfig,
   decodeQueryParams,
 } from 'serialize-query-params'
-import { DateRange, ItemType, SelectOption } from '~components/index'
-import { FilterMultiSelect } from '../../../index'
+import { DateRange, ItemType, SelectOption, FilterMultiSelect } from '~components/index'
 import { FilterBar, Filters, useFilterBarContext } from '../index'
 import { FilterBarMultiSelectProps } from '../subcomponents'
 

packages/components/src/Filter/FilterBar/context/FilterBarContext.tsx

@@ -27,7 +27,7 @@ export type FilterBarContextValue<
   updateValue: <Id extends keyof ValuesMap>(id: Id, value: ValuesMap[Id]) => void
   showFilter: <Id extends keyof ValuesMap>(id: Id) => void
   hideFilter: <Id extends keyof ValuesMap>(id: Id) => void
-  getInactiveFilters: () => Array<FilterAttributes<ValuesMap>>
+  getInactiveFilters: () => FilterAttributes<ValuesMap>[]
   clearAllFilters: () => void
   setFocus: <Id extends keyof ValuesMap>(id: Id | undefined) => void
   focusId?: keyof ValuesMap

packages/components/src/Filter/FilterBar/context/types.ts

@@ -33,4 +33,4 @@ export type FilterBarState<ValuesMap extends FiltersValues> = {
   focusId?: keyof ValuesMap
 }
 
-export type ActiveFiltersArray<ValuesMap extends FiltersValues> = Array<FilterAttributes<ValuesMap>>
+export type ActiveFiltersArray<ValuesMap extends FiltersValues> = FilterAttributes<ValuesMap>[]

packages/components/src/Filter/FilterBar/context/utils/getInactiveFilters.spec.ts

@@ -48,7 +48,7 @@ describe('getInactiveFilters()', () => {
   it('fetches only usable inactive filters', () => {
     const state = {
       filters: {
-        flavour: stateFilters['flavour'],
+        flavour: stateFilters.flavour,
         sugarLevel: {
           id: 'sugarLevel',
           name: 'Sugar Level',

packages/components/src/Filter/FilterBar/context/utils/getInactiveFilters.ts

@@ -4,5 +4,5 @@ import { FilterBarState } from '../types'
 export const getInactiveFilters = <ValuesMap extends FiltersValues>({
   filters,
   activeFilterIds,
-}: FilterBarState<ValuesMap>): Array<FilterAttributes<ValuesMap>> =>
+}: FilterBarState<ValuesMap>): FilterAttributes<ValuesMap>[] =>
   Object.values(filters).filter(({ id, isUsable }) => isUsable && !activeFilterIds.has(id))

packages/components/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx

@@ -25,7 +25,7 @@ export const FilterBarSelect = <Option extends SelectOption = SelectOption>({
   const { getFilterState, setFilterOpenState, updateValue } = useFilterBarContext<
     Option['value'] | undefined
   >()
-  const [items, setItems] = useState<Array<SelectItem<Option>>>(propsItems)
+  const [items, setItems] = useState<SelectItem<Option>[]>(propsItems)
 
   if (!id) throw Error('Missing `id` prop in FilterBarSelect')
 

packages/components/src/Filter/FilterBar/types.ts

@@ -23,7 +23,7 @@ export type FilterAttributes<ValuesMap extends FiltersValues, Id = keyof ValuesM
   isUsableWhen?: FilterIsUsableWhen<ValuesMap>
 }
 
-export type Filters<ValuesMap extends FiltersValues> = Array<FilterAttributes<ValuesMap>>
+export type Filters<ValuesMap extends FiltersValues> = FilterAttributes<ValuesMap>[]
 
 export type FilterState<Id, Value> = {
   id: Id