Merge pull request #750 from WestpacGEL/fixes/eslint-changes

Fixes/eslint changes

.changeset/cuddly-seals-design.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+Updated types on some components to resolve eslint errors/warnings

apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc

@@ -11,19 +11,19 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
           <p className="typography-body-10 text-muted">
             <em>Colours</em>
           </p>
-      <div className="flex gap-2">
+      <div>
         {COLORS.map(color => (
-          <Badge color={color} >
+          <Badge color={color} className="my-1 mr-2" >
             {color}
           </Badge>
         ))}
       </div>
           <p className="typography-body-10 text-muted">
             <em>Soft</em>
           </p>
-      <div className="flex gap-2">
+      <div>
         {COLORS.map(color => (
-          <Badge color={color} soft>
+          <Badge color={color} soft className="my-1 mr-2">
             {color}
           </Badge>
         ))}
@@ -44,19 +44,19 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
           <p className="typography-body-10 text-muted">
             <em>Colours</em>
           </p>
-      <div className="flex gap-2">
+      <div>
         {COLORS.map(color => (
-          <Badge className="my-1" type="pill" color={color} >
+          <Badge className="my-1 mr-2" type="pill" color={color}>
             88
           </Badge>
         ))}
       </div>
           <p className="typography-body-10 text-muted">
             <em>Soft</em>
           </p>
-      <div className="flex gap-2">
+      <div>
         {COLORS.map(color => (
-          <Badge className="my-1" type="pill" color={color} soft>
+          <Badge className="my-1 mr-2" type="pill" color={color} soft>
             88
           </Badge>
         ))}

apps/site/src/content/design-system/development/guides/eslint/design/eslint-configuration/content.mdoc

@@ -0,0 +1,26 @@
+When setting up your project we recommend extending `@westpac/eslint-config/nextjs` as seen below:
+
+```html
+<StaticCode language="tsx" code={`
+    // .eslintrc.js
+    module.exports = {
+        root: true,
+        extends: ['@westpac/eslint-config/nextjs'],
+    };      
+`} />
+```
+
+If you are using this in a non-Next.js project, you may need to turn off certain rules as seen below:
+
+```html
+<StaticCode language="tsx" code={`
+    // .eslintrc.js
+    module.exports = {
+        root: true,
+        extends: ['@westpac/eslint-config/nextjs'],
+        rules: {
+          '@next/next/no-html-link-for-pages': 0,
+        },
+    };      
+`} />
+```

apps/site/src/content/design-system/development/guides/eslint/index.yaml

@@ -0,0 +1,8 @@
+name: ESLint
+description: >-
+  We suggest following the Westpac Group ESLint configuration.
+design:
+  - title:
+      name: ESLint Configuration
+      slug: eslint-configuration
+accessibility: []

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 = {
       },
     },
   },
-};
+};

packages/ui/src/components/accordion/accordion.component.tsx

@@ -1,41 +1,47 @@
 'use client';
 
-import { useAccordion } from '@react-aria/accordion';
+import { AriaAccordionProps, useAccordion } from '@react-aria/accordion';
 import { filterDOMProps } from '@react-aria/utils';
 import { useDOMRef } from '@react-spectrum/utils';
+import { DOMProps, DOMRef } from '@react-types/shared';
 import React, { Children, cloneElement, forwardRef, isValidElement } from 'react';
-import { Item, type ItemProps, useTreeState } from 'react-stately';
+import { Item, type ItemProps, TreeProps, useTreeState } from 'react-stately';
 
 import { styles } from './accordion.styles.js';
 import { type AccordionProps } from './accordion.types.js';
 import { AccordionItem as AccordionItemContent } from './components/index.js';
 
 function Accordion<T extends object>(
   { className, rounded = true, look = 'soft', ...props }: AccordionProps<T>,
-  ref: any,
+  ref: DOMRef<HTMLDivElement>,
 ) {
   // react-aria doesn't allow for now to use component children when there is multiple levels
   // in our case we don't need that functionality and we have to render html tags or components
   // therefore as a workaround we are setting hasChildItems false for all of them
   // https://github.com/adobe/react-spectrum/issues/3882
-  const finalProps: any = {
+  const finalProps = {
     ...props,
     children: Children.map(props.children, child => {
       // equal to (if (child == null || typeof child == 'string'))
       if (!isValidElement(child)) return child;
       return cloneElement(child, {
-        ...(child.props as any),
+        ...child.props,
         // Adding hasChildItems false by default
         hasChildItems: false,
       });
     }),
   };
-  const state = useTreeState<T>(finalProps);
+  const state = useTreeState<T>(finalProps as TreeProps<T>);
   const domRef = useDOMRef<HTMLDivElement>(ref);
-  const { accordionProps } = useAccordion(finalProps, state, domRef);
+  const { accordionProps } = useAccordion(finalProps as AriaAccordionProps<T>, state, domRef);
 
   return (
-    <div {...filterDOMProps(finalProps)} {...accordionProps} ref={domRef} className={styles({ className, rounded })}>
+    <div
+      {...filterDOMProps(finalProps as DOMProps)}
+      {...accordionProps}
+      ref={domRef}
+      className={styles({ className, rounded })}
+    >
       <div className="ml-[-1px] mt-[-1px]">
         {[...state.collection].map(item => (
           <AccordionItemContent<T> key={item.key} item={item} state={state} look={look} />
@@ -46,7 +52,7 @@ function Accordion<T extends object>(
 }
 
 const _Accordion = forwardRef(Accordion) as unknown as { displayName: string } & (<T>(
-  props: AccordionProps<T> & { ref?: any },
+  props: AccordionProps<T> & { ref?: HTMLElement },
 ) => ReturnType<typeof Accordion>);
 
 _Accordion.displayName = 'Accordion';

packages/ui/src/components/accordion/accordion.stories.tsx

@@ -27,7 +27,7 @@ const meta: Meta<typeof Accordion> = {
 };
 
 export default meta;
-type Story = StoryObj<any>;
+type Story = StoryObj<typeof Accordion>;
 
 /**
  * > 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<Set<Key>>();
-    return (
-      <Accordion
-        {...props}
-        expandedKeys={expandedKeys}
-        onExpandedChange={keys => {
-          setExpandedKeys(keys);
-        }}
-      >
-        {[
-          { key: 'files', title: 'Your files' },
-          { key: 'shared', title: 'Shared with you' },
-          { key: 'last', title: 'Last item' },
-        ].map(({ key, title }) => (
-          <AccordionItem key={key} title={title}>
-            <p>{title}</p>
-            <Button>Test</Button>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    );
-  },
+export const Controlled = () => {
+  const [expandedKeys, setExpandedKeys] = useState<Set<Key>>();
+  return (
+    <Accordion
+      look="lego"
+      rounded={false}
+      expandedKeys={expandedKeys}
+      onExpandedChange={keys => {
+        setExpandedKeys(keys);
+      }}
+    >
+      {[
+        { key: 'files', title: 'Your files' },
+        { key: 'shared', title: 'Shared with you' },
+        { key: 'last', title: 'Last item' },
+      ].map(({ key, title }) => (
+        <AccordionItem key={key} title={title}>
+          <p>{title}</p>
+          <Button>Test</Button>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
 };
 
 /**

packages/ui/src/components/accordion/accordion.types.ts

@@ -6,7 +6,7 @@ import { styles } from './accordion.styles.js';
 import { AccordionItemProps } from './components/index.js';
 
 type Variants = VariantProps<typeof styles>;
-export type AccordionProps<T = any> = SpectrumAccordionProps<T> & {
+export type AccordionProps<T = HTMLElement> = SpectrumAccordionProps<T> & {
   /**
    * <AccordionItem /> as a collection
    */

packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx

@@ -1,7 +1,7 @@
 import { useAccordionItem } from '@react-aria/accordion';
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useRef } from 'react';
-import { mergeProps, useFocusRing, useHover, useLocale } from 'react-aria';
+import { Key, mergeProps, useFocusRing, useHover, useLocale } from 'react-aria';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 
@@ -10,7 +10,7 @@ import { type AccordionItemProps } from './accordion-item.types.js';
 
 const loadAnimations = () => import('./accordion-item.utils.js').then(res => res.default);
 
-export function AccordionItem<T = any>({
+export function AccordionItem<T = HTMLElement>({
   className,
   tag: Tag = 'div',
   look = 'soft',
@@ -20,8 +20,8 @@ export function AccordionItem<T = any>({
   const { state, item } = props;
   const { buttonProps, regionProps } = useAccordionItem<T>(props, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
-  const isOpen = state.expandedKeys.has(item.key as any);
-  const isDisabled = state.disabledKeys.has(item.key as any);
+  const isOpen = state.expandedKeys.has(item.key as Key);
+  const isDisabled = state.disabledKeys.has(item.key as Key);
   const { hoverProps } = useHover({ isDisabled });
   const { direction } = useLocale();
   const styles = accordionItemStyles({ isOpen, isDisabled, look, isFocusVisible });

packages/ui/src/components/accordion/components/accordion-item/accordion-item.types.ts

@@ -6,7 +6,7 @@ import { styles } from './accordion-item.styles.js';
 
 type Variants = VariantProps<typeof styles>;
 
-export type AccordionItemProps<T = any> = {
+export type AccordionItemProps<T = HTMLElement> = {
   /**
    * AccordionItem body content
    */

packages/ui/src/components/autocomplete/autocomplete.component.tsx

@@ -92,7 +92,14 @@ export function Autocomplete<T extends object>({
       ((!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<T extends object>({
         >
           <AutocompleteListBox
             {...listBoxProps}
-            autoFocus={listBoxProps.autoFocus as any}
+            autoFocus={listBoxProps.autoFocus as boolean | undefined}
             listBoxRef={listBoxRef}
             state={state}
           />

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<string | number>();
-    const handleSelectionChange = (key: string | number) => {
-      setSelectedKey(key);
-    };
-    return (
-      <Autocomplete onSelectionChange={handleSelectionChange} selectedKey={selectedKey} aria-label="Animals">
-        <AutocompleteItem key="red panda">Red Panda</AutocompleteItem>
-        <AutocompleteItem key="cat">Cat</AutocompleteItem>
-        <AutocompleteItem key="dog">Dog</AutocompleteItem>
-        <AutocompleteItem key="aardvark">Aardvark</AutocompleteItem>
-        <AutocompleteItem key="kangaroo">Kangaroo</AutocompleteItem>
-        <AutocompleteItem key="snake">Snake</AutocompleteItem>
-      </Autocomplete>
-    );
-  },
+export const Controlled = () => {
+  const [selectedKey, setSelectedKey] = useState<string | number>();
+  const handleSelectionChange = (key: string | number) => {
+    setSelectedKey(key);
+  };
+  return (
+    <Autocomplete onSelectionChange={handleSelectionChange} selectedKey={selectedKey} aria-label="Animals">
+      <AutocompleteItem key="red panda">Red Panda</AutocompleteItem>
+      <AutocompleteItem key="cat">Cat</AutocompleteItem>
+      <AutocompleteItem key="dog">Dog</AutocompleteItem>
+      <AutocompleteItem key="aardvark">Aardvark</AutocompleteItem>
+      <AutocompleteItem key="kangaroo">Kangaroo</AutocompleteItem>
+      <AutocompleteItem key="snake">Snake</AutocompleteItem>
+    </Autocomplete>
+  );
 };
 
 /**

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';

packages/ui/src/components/autocomplete/components/autocomplete-item/autocomplete-item.types.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { type ItemProps } from 'react-stately';
 
-export type AutocompleteItemProps<T = any> = ItemProps<T> & {
+export type AutocompleteItemProps<T = HTMLElement> = ItemProps<T> & {
   /**
    * AutocompleteItem body content
    */

packages/ui/src/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.types.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react';
 import { AriaListBoxOptions } from 'react-aria';
 import { ListState } from 'react-stately';
 
-export type AutocompleteListBoxProps<T = any> = AriaListBoxOptions<T> & {
+export type AutocompleteListBoxProps = AriaListBoxOptions<unknown> & {
   listBoxRef?: React.RefObject<HTMLUListElement>;
-  state: ListState<T>;
+  state: ListState<unknown>;
 } & HTMLAttributes<Element>;