From 1621d53afa92db0d113a4a9bbc2e295d712a2652 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 6 Dec 2022 19:27:26 -0800
Subject: [PATCH] Fix SelectItem bug and lint warnings

---
 components/Button/index.tsx     | 289 ++++++++++++++++----------------
 components/Dialog/index.tsx     |   2 +-
 components/Input/index.tsx      |  43 ++---
 components/SelectItem/index.tsx |  34 ++--
 4 files changed, 186 insertions(+), 182 deletions(-)

diff --git a/components/Button/index.tsx b/components/Button/index.tsx
index 2f48de7f..2e0fcea8 100644
--- a/components/Button/index.tsx
+++ b/components/Button/index.tsx
@@ -37,154 +37,151 @@ const defaultProps = {
   size: 'medium',
 }
 
-const Button = React.forwardRef<HTMLButtonElement, Props>(
-  (
-    { accessoryIcon, active, blended, contained, size, text, ...props },
-    forwardedRef
-  ) => {
-    const classes = classNames(
-      {
-        Button: true,
-        Active: active,
-        Blended: blended,
-        Contained: contained,
-        // 'btn-pressed': pressed,
-        // 'btn-disabled': disabled,
-        // save: props.icon === 'save',
-        // destructive: props.type == ButtonType.Destructive,
-      },
-      size,
-      props.className
-    )
+const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
+  { accessoryIcon, active, blended, contained, size, text, ...props },
+  forwardedRef
+) {
+  const classes = classNames(
+    {
+      Button: true,
+      Active: active,
+      Blended: blended,
+      Contained: contained,
+      // 'btn-pressed': pressed,
+      // 'btn-disabled': disabled,
+      // save: props.icon === 'save',
+      // destructive: props.type == ButtonType.Destructive,
+    },
+    size,
+    props.className
+  )
 
-    const hasAccessory = () => {
-      if (accessoryIcon)
-        return <span className="Accessory">{accessoryIcon}</span>
-    }
-
-    const hasText = () => {
-      if (text) return <span className="Text">{text}</span>
-    }
-
-    return (
-      <button {...props} className={classes} ref={forwardedRef}>
-        {hasAccessory()}
-        {hasText()}
-      </button>
-    )
-
-    // useEffect(() => {
-    // if (props.type) setButtonType(props.type)
-    // }, [props.type])
-
-    // const addIcon = (
-    //   <span className="icon">
-    //     <AddIcon />
-    //   </span>
-    // )
-
-    // const menuIcon = (
-    //   <span className="icon">
-    //     <MenuIcon />
-    //   </span>
-    // )
-
-    // const linkIcon = (
-    //   <span className="icon stroke">
-    //     <LinkIcon />
-    //   </span>
-    // )
-
-    // const checkIcon = (
-    //   <span className="icon check">
-    //     <CheckIcon />
-    //   </span>
-    // )
-
-    // const crossIcon = (
-    //   <span className="icon">
-    //     <CrossIcon />
-    //   </span>
-    // )
-
-    // const editIcon = (
-    //   <span className="icon">
-    //     <EditIcon />
-    //   </span>
-    // )
-
-    // const saveIcon = (
-    //   <span className="icon stroke">
-    //     <SaveIcon />
-    //   </span>
-    // )
-
-    // const settingsIcon = (
-    //   <span className="icon settings">
-    //     <SettingsIcon />
-    //   </span>
-    // )
-
-    // function getIcon() {
-    //   let icon: React.ReactNode
-
-    //   switch (props.icon) {
-    //     case 'new':
-    //       icon = addIcon
-    //       break
-    //     case 'menu':
-    //       icon = menuIcon
-    //       break
-    //     case 'link':
-    //       icon = linkIcon
-    //       break
-    //     case 'check':
-    //       icon = checkIcon
-    //       break
-    //     case 'cross':
-    //       icon = crossIcon
-    //       break
-    //     case 'edit':
-    //       icon = editIcon
-    //       break
-    //     case 'save':
-    //       icon = saveIcon
-    //       break
-    //     case 'settings':
-    //       icon = settingsIcon
-    //       break
-    //   }
-
-    //   return icon
-    // }
-
-    // function handleMouseDown() {
-    //   setPressed(true)
-    // }
-
-    // function handleMouseUp() {
-    //   setPressed(false)
-    // }
-    // return (
-    //   <button
-    //     className={classes}
-    //     disabled={disabled}
-    //     onMouseDown={handleMouseDown}
-    //     onMouseUp={handleMouseUp}
-    //     ref={forwardedRef}
-    //     {...props}
-    //   >
-    //     {getIcon()}
-
-    //     {props.type != ButtonType.IconOnly ? (
-    //       <span className="text">{children}</span>
-    //     ) : (
-    //       ''
-    //     )}
-    //   </button>
-    // )
+  const hasAccessory = () => {
+    if (accessoryIcon) return <span className="Accessory">{accessoryIcon}</span>
   }
-)
+
+  const hasText = () => {
+    if (text) return <span className="Text">{text}</span>
+  }
+
+  return (
+    <button {...props} className={classes} ref={forwardedRef}>
+      {hasAccessory()}
+      {hasText()}
+    </button>
+  )
+
+  // useEffect(() => {
+  // if (props.type) setButtonType(props.type)
+  // }, [props.type])
+
+  // const addIcon = (
+  //   <span className="icon">
+  //     <AddIcon />
+  //   </span>
+  // )
+
+  // const menuIcon = (
+  //   <span className="icon">
+  //     <MenuIcon />
+  //   </span>
+  // )
+
+  // const linkIcon = (
+  //   <span className="icon stroke">
+  //     <LinkIcon />
+  //   </span>
+  // )
+
+  // const checkIcon = (
+  //   <span className="icon check">
+  //     <CheckIcon />
+  //   </span>
+  // )
+
+  // const crossIcon = (
+  //   <span className="icon">
+  //     <CrossIcon />
+  //   </span>
+  // )
+
+  // const editIcon = (
+  //   <span className="icon">
+  //     <EditIcon />
+  //   </span>
+  // )
+
+  // const saveIcon = (
+  //   <span className="icon stroke">
+  //     <SaveIcon />
+  //   </span>
+  // )
+
+  // const settingsIcon = (
+  //   <span className="icon settings">
+  //     <SettingsIcon />
+  //   </span>
+  // )
+
+  // function getIcon() {
+  //   let icon: React.ReactNode
+
+  //   switch (props.icon) {
+  //     case 'new':
+  //       icon = addIcon
+  //       break
+  //     case 'menu':
+  //       icon = menuIcon
+  //       break
+  //     case 'link':
+  //       icon = linkIcon
+  //       break
+  //     case 'check':
+  //       icon = checkIcon
+  //       break
+  //     case 'cross':
+  //       icon = crossIcon
+  //       break
+  //     case 'edit':
+  //       icon = editIcon
+  //       break
+  //     case 'save':
+  //       icon = saveIcon
+  //       break
+  //     case 'settings':
+  //       icon = settingsIcon
+  //       break
+  //   }
+
+  //   return icon
+  // }
+
+  // function handleMouseDown() {
+  //   setPressed(true)
+  // }
+
+  // function handleMouseUp() {
+  //   setPressed(false)
+  // }
+  // return (
+  //   <button
+  //     className={classes}
+  //     disabled={disabled}
+  //     onMouseDown={handleMouseDown}
+  //     onMouseUp={handleMouseUp}
+  //     ref={forwardedRef}
+  //     {...props}
+  //   >
+  //     {getIcon()}
+
+  //     {props.type != ButtonType.IconOnly ? (
+  //       <span className="text">{children}</span>
+  //     ) : (
+  //       ''
+  //     )}
+  //   </button>
+  // )
+})
 
 Button.defaultProps = defaultProps
 
diff --git a/components/Dialog/index.tsx b/components/Dialog/index.tsx
index 9683da38..2438a2ed 100644
--- a/components/Dialog/index.tsx
+++ b/components/Dialog/index.tsx
@@ -11,7 +11,7 @@ interface Props
   > {}
 
 export const DialogContent = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, ...props }, forwardedRef) => {
+  function dialog({ children, ...props }, forwardedRef) {
     const classes = classNames(
       {
         Dialog: true,
diff --git a/components/Input/index.tsx b/components/Input/index.tsx
index f96b990b..27d21315 100644
--- a/components/Input/index.tsx
+++ b/components/Input/index.tsx
@@ -11,27 +11,28 @@ interface Props
   label?: string
 }
 
-const Input = React.forwardRef<HTMLInputElement, Props>(
-  (props: Props, forwardedRef) => {
-    const classes = classNames({ Input: true }, props.className)
+const Input = React.forwardRef<HTMLInputElement, Props>(function input(
+  props: Props,
+  forwardedRef
+) {
+  const classes = classNames({ Input: true }, props.className)
 
-    return (
-      <label className="Label" htmlFor={props.name}>
-        <input
-          {...props}
-          autoComplete="off"
-          className={classes}
-          defaultValue={props.value || ''}
-          ref={forwardedRef}
-          formNoValidate
-        />
-        {props.label}
-        {props.error && props.error.length > 0 && (
-          <p className="InputError">{props.error}</p>
-        )}
-      </label>
-    )
-  }
-)
+  return (
+    <label className="Label" htmlFor={props.name}>
+      <input
+        {...props}
+        autoComplete="off"
+        className={classes}
+        defaultValue={props.value || ''}
+        ref={forwardedRef}
+        formNoValidate
+      />
+      {props.label}
+      {props.error && props.error.length > 0 && (
+        <p className="InputError">{props.error}</p>
+      )}
+    </label>
+  )
+})
 
 export default Input
diff --git a/components/SelectItem/index.tsx b/components/SelectItem/index.tsx
index 9bae53fe..5d3eb7c7 100644
--- a/components/SelectItem/index.tsx
+++ b/components/SelectItem/index.tsx
@@ -1,21 +1,27 @@
-import React from 'react'
+import React, { ComponentProps } from 'react'
 import * as Select from '@radix-ui/react-select'
 
 import './index.scss'
 import classNames from 'classnames'
 
-const SelectItem = React.forwardRef<HTMLDivElement>(
-  ({ children, className, ...props }, forwardedRef) => {
-    return (
-      <Select.Item
-        className={classNames('SelectItem', className)}
-        {...props}
-        ref={forwardedRef}
-      >
-        <Select.ItemText>{children}</Select.ItemText>
-      </Select.Item>
-    )
-  }
-)
+interface Props extends ComponentProps<'div'> {
+  value: string | number
+}
+
+const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
+  { children, ...props },
+  forwardedRef
+) {
+  return (
+    <Select.Item
+      className={classNames('SelectItem', props.className)}
+      {...props}
+      ref={forwardedRef}
+      value={`${props.value}`}
+    >
+      <Select.ItemText>{children}</Select.ItemText>
+    </Select.Item>
+  )
+})
 
 export default SelectItem