From 7ec16b1e90112d4a0dddfc927a2bb4003c172227 Mon Sep 17 00:00:00 2001
From: "gjaskiewicz@objectivity.co.uk" <gjaskiewicz@objectivity.co.uk>
Date: Fri, 8 Nov 2024 13:08:55 +0100
Subject: [PATCH] fix(ui): typing improvements

---
 .../ComboBox/ComboBox.component.tsx           |  4 ++--
 .../components/ComboBox/ComboBox.stories.tsx  | 19 ++++---------------
 .../ComboBoxOption.component.tsx              |  4 ++--
 .../src/components/ComboBoxOption/index.ts    |  2 +-
 4 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/packages/ui-components/src/components/ComboBox/ComboBox.component.tsx b/packages/ui-components/src/components/ComboBox/ComboBox.component.tsx
index f9a447eb7..d73190d3d 100644
--- a/packages/ui-components/src/components/ComboBox/ComboBox.component.tsx
+++ b/packages/ui-components/src/components/ComboBox/ComboBox.component.tsx
@@ -13,7 +13,7 @@ import { Spinner } from "../Spinner/index"
 import { flip, offset, shift, size } from "@floating-ui/react-dom"
 import { usePortalRef } from "../PortalProvider/index"
 import { createPortal } from "react-dom"
-import { ComboBoxOptionProps } from "../ComboBoxOption/index"
+import { ComboBoxOptionProps } from "../ComboBoxOption/ComboBoxOption.component"
 
 // STYLES
 
@@ -455,7 +455,7 @@ export type ComboBoxWidth = "full" | "auto"
 //eslint-disable-next-line no-unused-vars
 type OnChangeHandler = (value: string) => void
 
-export type ComboBoxProps = {
+export interface ComboBoxProps {
   /** The aria-label of the ComboBox. Defaults to the label if label was passed. */
   ariaLabel?: string
   /** The children to Render. Use `ComboBox.Option` elements. */
diff --git a/packages/ui-components/src/components/ComboBox/ComboBox.stories.tsx b/packages/ui-components/src/components/ComboBox/ComboBox.stories.tsx
index f996a7d13..8efbdae90 100644
--- a/packages/ui-components/src/components/ComboBox/ComboBox.stories.tsx
+++ b/packages/ui-components/src/components/ComboBox/ComboBox.stories.tsx
@@ -37,16 +37,11 @@ export default {
   ],
 }
 
-const Template = ({ children, ...args }: TemplateProps) => {
+const Template = ({ children, ...args }: ComboBoxProps) => {
   return <ComboBox {...args}>{children}</ComboBox>
 }
 
-// define prop types fro Template
-type TemplateProps = {
-  children: React.ReactNode
-} & ComboBoxProps
-
-const ConstrainedWidthTemplate = ({ children, ...args }: ConstrainedWidthTemplateProps) => {
+const ConstrainedWidthTemplate = ({ children, ...args }: ComboBoxProps) => {
   return (
     <div style={{ width: "300px" }}>
       <ComboBox {...args}>{children}</ComboBox>
@@ -54,11 +49,6 @@ const ConstrainedWidthTemplate = ({ children, ...args }: ConstrainedWidthTemplat
   )
 }
 
-// define prop types for ConstrainedWidthTemplate
-type ConstrainedWidthTemplateProps = {
-  children: React.ReactNode
-} & ComboBoxProps
-
 const ControlledTemplate = ({ value, children }: ControlledTemplateProps) => {
   const [v, setV] = useState(value)
 
@@ -70,10 +60,9 @@ const ControlledTemplate = ({ value, children }: ControlledTemplateProps) => {
 }
 
 // define prop types for ControlledTemplate
-type ControlledTemplateProps = {
+interface ControlledTemplateProps extends ComboBoxProps {
   value: string
-  children: React.ReactNode
-} & ComboBoxProps
+}
 
 export const Default = {
   render: Template,
diff --git a/packages/ui-components/src/components/ComboBoxOption/ComboBoxOption.component.tsx b/packages/ui-components/src/components/ComboBoxOption/ComboBoxOption.component.tsx
index 1c6fe0b7e..a8830d987 100644
--- a/packages/ui-components/src/components/ComboBoxOption/ComboBoxOption.component.tsx
+++ b/packages/ui-components/src/components/ComboBoxOption/ComboBoxOption.component.tsx
@@ -99,10 +99,10 @@ export const ComboBoxOption = ({
   )
 }
 
-export type ComboBoxOptionProps = {
+export interface ComboBoxOptionProps extends React.HTMLProps<HTMLLIElement> {
   children?: string
   disabled?: boolean
   value?: string
   label?: string
   className?: string
-} & React.HTMLProps<HTMLLIElement>
+} 
diff --git a/packages/ui-components/src/components/ComboBoxOption/index.ts b/packages/ui-components/src/components/ComboBoxOption/index.ts
index 2cb8f6189..51c0a061c 100644
--- a/packages/ui-components/src/components/ComboBoxOption/index.ts
+++ b/packages/ui-components/src/components/ComboBoxOption/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { ComboBoxOption, type ComboBoxOptionProps } from "./ComboBoxOption.component"
+export { ComboBoxOption } from "./ComboBoxOption.component"