From 852ff412b0c1332b78b25ff79d801a8ea3eb6020 Mon Sep 17 00:00:00 2001
From: v1rtl <hi@v1rtl.site>
Date: Wed, 28 Aug 2024 14:05:30 +0300
Subject: [PATCH] refactor to use fc

---
 components/src/components/atoms/Field/Field.tsx        |  4 ++--
 .../src/components/atoms/FileInput/FileInput.tsx       |  6 +++---
 components/src/components/atoms/Heading/Heading.tsx    |  6 +++---
 components/src/components/atoms/Skeleton/Skeleton.tsx  |  2 +-
 components/src/components/atoms/Spinner/Spinner.tsx    |  6 +++---
 .../components/atoms/ThemeProvider/ThemeProvider.tsx   |  4 ++--
 .../src/components/molecules/Backdrop/Backdrop.tsx     |  4 ++--
 .../src/components/molecules/Checkbox/Checkbox.tsx     |  6 +++---
 .../molecules/CountdownCircle/CountdownCircle.tsx      |  6 +++---
 .../src/components/molecules/Dropdown/Dropdown.tsx     |  4 ++--
 .../src/components/molecules/FieldSet/FieldSet.tsx     |  4 ++--
 components/src/components/molecules/Helper/Helper.tsx  |  4 ++--
 components/src/components/molecules/Input/Input.tsx    |  6 +++---
 components/src/components/molecules/Modal/Modal.tsx    |  4 ++--
 .../components/molecules/PageButtons/PageButtons.tsx   |  4 ++--
 .../src/components/molecules/Profile/Profile.tsx       |  4 ++--
 .../components/molecules/RadioButton/RadioButton.tsx   |  6 +++---
 .../molecules/RadioButtonGroup/RadioButtonGroup.tsx    |  6 +++---
 components/src/components/molecules/Select/Select.tsx  |  6 +++---
 .../molecules/SkeletonGroup/SkeletonGroup.tsx          |  2 +-
 components/src/components/molecules/Slider/Slider.tsx  |  6 +++---
 .../src/components/molecules/Textarea/Textarea.tsx     |  6 +++---
 .../src/components/molecules/Tooltip/Tooltip.tsx       |  4 ++--
 components/src/components/organisms/Dialog/Dialog.tsx  | 10 +++++-----
 components/src/components/organisms/Toast/Toast.tsx    |  4 ++--
 25 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/components/src/components/atoms/Field/Field.tsx b/components/src/components/atoms/Field/Field.tsx
index 81f7fe03..64ce67d1 100644
--- a/components/src/components/atoms/Field/Field.tsx
+++ b/components/src/components/atoms/Field/Field.tsx
@@ -267,7 +267,7 @@ const ContainerInnerBox = (props: BoxProps) => (
   />
 )
 
-export const Field = ({
+export const Field: React.FC<Props> = ({
   children,
   description,
   error,
@@ -282,7 +282,7 @@ export const Field = ({
   reverse = false,
   disabled,
   ...props
-}: Props) => {
+}) => {
   const ids = useFieldIds({
     id,
     description: description !== undefined,
diff --git a/components/src/components/atoms/FileInput/FileInput.tsx b/components/src/components/atoms/FileInput/FileInput.tsx
index 69ba7e68..9fc68d9a 100644
--- a/components/src/components/atoms/FileInput/FileInput.tsx
+++ b/components/src/components/atoms/FileInput/FileInput.tsx
@@ -57,7 +57,7 @@ export type Props = {
   'onReset' | 'onChange' | 'onError' | 'defaultValue' | 'children' | 'type'
 >
 
-export const FileInput = React.forwardRef(
+export const FileInput = React.forwardRef<HTMLDivElement, Props>(
   (
     {
       accept,
@@ -77,8 +77,8 @@ export const FileInput = React.forwardRef(
       onFocus,
       onReset,
       ...props
-    }: Props,
-    ref: React.Ref<HTMLDivElement>,
+    },
+    ref,
   ) => {
     const defaultRef = React.useRef<HTMLInputElement>(null)
     const inputRef = (ref as React.RefObject<HTMLInputElement>) || defaultRef
diff --git a/components/src/components/atoms/Heading/Heading.tsx b/components/src/components/atoms/Heading/Heading.tsx
index e81cc9f6..9ba00a10 100644
--- a/components/src/components/atoms/Heading/Heading.tsx
+++ b/components/src/components/atoms/Heading/Heading.tsx
@@ -53,7 +53,7 @@ type Props = {
 } & WithColor &
 Omit<NativeDivAttributes, 'color'>
 
-export const Heading = React.forwardRef(
+export const Heading = React.forwardRef<HTMLDivElement, Props>(
   (
     {
       align,
@@ -65,8 +65,8 @@ export const Heading = React.forwardRef(
       transform,
       color = 'text',
       ...props
-    }: Props,
-    ref: React.ForwardedRef<HTMLDivElement>,
+    },
+    ref,
   ) => (
     <ContainerBox
       {...props}
diff --git a/components/src/components/atoms/Skeleton/Skeleton.tsx b/components/src/components/atoms/Skeleton/Skeleton.tsx
index c5744487..b9f3f8eb 100644
--- a/components/src/components/atoms/Skeleton/Skeleton.tsx
+++ b/components/src/components/atoms/Skeleton/Skeleton.tsx
@@ -16,7 +16,7 @@ type Props = {
   loading?: boolean
 } & NativeDivProps
 
-export const Skeleton = ({ as, children, loading, ...props }: Props) => {
+export const Skeleton: React.FC<Props> = ({ as, children, loading, ...props }) => {
   const groupLoading = React.useContext(Context)
   const active = loading ?? groupLoading
 
diff --git a/components/src/components/atoms/Spinner/Spinner.tsx b/components/src/components/atoms/Spinner/Spinner.tsx
index cf2e6824..eff57c35 100644
--- a/components/src/components/atoms/Spinner/Spinner.tsx
+++ b/components/src/components/atoms/Spinner/Spinner.tsx
@@ -50,10 +50,10 @@ const svg = (
   </svg>
 )
 
-export const Spinner = React.forwardRef(
+export const Spinner = React.forwardRef<HTMLElement, Props>(
   (
-    { accessibilityLabel, size = 'small', color, ...props }: Props,
-    ref: React.Ref<HTMLElement>,
+    { accessibilityLabel, size = 'small', color, ...props },
+    ref,
   ) => {
     return (
       <ContainerBox
diff --git a/components/src/components/atoms/ThemeProvider/ThemeProvider.tsx b/components/src/components/atoms/ThemeProvider/ThemeProvider.tsx
index 138997ff..fddd2cc0 100644
--- a/components/src/components/atoms/ThemeProvider/ThemeProvider.tsx
+++ b/components/src/components/atoms/ThemeProvider/ThemeProvider.tsx
@@ -12,10 +12,10 @@ const ThemeContext = React.createContext<ThemeContextValue | null>(null)
 type Props = {
   defaultMode?: Mode
 }
-export const ThemeProvider = ({
+export const ThemeProvider: React.FC<React.PropsWithChildren<Props>> = ({
   defaultMode = 'light',
   children,
-}: React.PropsWithChildren<Props>) => {
+}) => {
   const [mode, setMode] = React.useState<Mode>(defaultMode)
 
   const value = React.useMemo(() => ({ mode, setMode }), [mode])
diff --git a/components/src/components/molecules/Backdrop/Backdrop.tsx b/components/src/components/molecules/Backdrop/Backdrop.tsx
index 80477e7e..280c8d22 100644
--- a/components/src/components/molecules/Backdrop/Backdrop.tsx
+++ b/components/src/components/molecules/Backdrop/Backdrop.tsx
@@ -21,7 +21,7 @@ type Props = {
   renderCallback?: () => void
 }
 
-export const Backdrop = ({
+export const Backdrop: React.FC<Props> = ({
   children,
   surface,
   onDismiss,
@@ -29,7 +29,7 @@ export const Backdrop = ({
   className = 'modal',
   open,
   renderCallback,
-}: Props) => {
+}) => {
   const [state, toggle] = useTransition({
     timeout: {
       enter: 50,
diff --git a/components/src/components/molecules/Checkbox/Checkbox.tsx b/components/src/components/molecules/Checkbox/Checkbox.tsx
index 6e7adbc3..0b8d433e 100644
--- a/components/src/components/molecules/Checkbox/Checkbox.tsx
+++ b/components/src/components/molecules/Checkbox/Checkbox.tsx
@@ -106,7 +106,7 @@ const InputBox = React.forwardRef<HTMLElement, BoxProps & { $colorStyle: any }>(
   ),
 )
 
-export const Checkbox = React.forwardRef(
+export const Checkbox = React.forwardRef<HTMLInputElement, Props>(
   (
     {
       description,
@@ -128,8 +128,8 @@ export const Checkbox = React.forwardRef(
       onFocus,
       colorStyle = 'accentPrimary',
       ...props
-    }: Props,
-    ref: React.Ref<HTMLInputElement>,
+    },
+    ref,
   ) => {
     const defaultRef = React.useRef<HTMLInputElement>(null)
     const inputRef = (ref as React.RefObject<HTMLInputElement>) || defaultRef
diff --git a/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx b/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx
index d22bf023..9f02f710 100644
--- a/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx
+++ b/components/src/components/molecules/CountdownCircle/CountdownCircle.tsx
@@ -98,7 +98,7 @@ type Props = {
   size?: 'small' | 'large'
 } & Omit<NativeDivProps, 'children' | 'color'>
 
-export const CountdownCircle = React.forwardRef(
+export const CountdownCircle = React.forwardRef<HTMLDivElement, Props>(
   (
     {
       accessibilityLabel,
@@ -109,8 +109,8 @@ export const CountdownCircle = React.forwardRef(
       disabled,
       callback,
       ...props
-    }: Props,
-    ref: React.Ref<HTMLDivElement>,
+    },
+    ref,
   ) => {
     const _startTimestamp = React.useMemo(
       () => Math.ceil((startTimestamp || Date.now()) / 1000),
diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
index 66408a17..7a260e96 100644
--- a/components/src/components/molecules/Dropdown/Dropdown.tsx
+++ b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -476,7 +476,7 @@ const useClickOutside = (
   }, [dropdownRef, isOpen, setIsOpen, buttonRef, actionSheetRef])
 }
 
-export const Dropdown = ({
+export const Dropdown: React.FC<Props & (PropsWithIsOpen | PropsWithoutIsOpen)> = ({
   children,
   buttonProps,
   // eslint-disable-next-line @eslint-react/no-unstable-default-props
@@ -496,7 +496,7 @@ export const Dropdown = ({
   responsive = true,
   cancelLabel = 'Cancel',
   ...props
-}: Props & (PropsWithIsOpen | PropsWithoutIsOpen)) => {
+}) => {
   const dropdownRef = React.useRef<HTMLDivElement | null>(null)
   const buttonRef = React.useRef<HTMLButtonElement | null>(null)
   const actionSheetRef = React.useRef<HTMLDivElement | null>(null)
diff --git a/components/src/components/molecules/FieldSet/FieldSet.tsx b/components/src/components/molecules/FieldSet/FieldSet.tsx
index d0b2a4fd..c9f150d2 100644
--- a/components/src/components/molecules/FieldSet/FieldSet.tsx
+++ b/components/src/components/molecules/FieldSet/FieldSet.tsx
@@ -63,7 +63,7 @@ export type Props = {
     }
 } & Omit<NativeFieldSetProps, 'children'>
 
-export const FieldSet = ({
+export const FieldSet: React.FC<Props> = ({
   children,
   description,
   disabled,
@@ -72,7 +72,7 @@ export const FieldSet = ({
   name,
   status,
   ...props
-}: Props) => {
+}) => {
   let statusText: string | undefined
   let statusTone: TagProps['colorStyle']
   switch (status) {
diff --git a/components/src/components/molecules/Helper/Helper.tsx b/components/src/components/molecules/Helper/Helper.tsx
index 6ca99529..cf456301 100644
--- a/components/src/components/molecules/Helper/Helper.tsx
+++ b/components/src/components/molecules/Helper/Helper.tsx
@@ -47,12 +47,12 @@ const IconElement = ({ $alert, ...props }: BoxProps & { $alert: Alert }) => (
   <Box {...props} color={getValueForAlert($alert, 'svg')} wh="$6" />
 )
 
-export const Helper = ({
+export const Helper: React.FC<Props> = ({
   alert = 'info',
   alignment = 'vertical',
   children,
   ...props
-}: Props) => {
+}) => {
   const Icon = alert === 'info' ? InfoCircleSVG : AlertSVG
 
   return (
diff --git a/components/src/components/molecules/Input/Input.tsx b/components/src/components/molecules/Input/Input.tsx
index 3357db0e..765901ec 100644
--- a/components/src/components/molecules/Input/Input.tsx
+++ b/components/src/components/molecules/Input/Input.tsx
@@ -311,7 +311,7 @@ const InnerContainer = ({
 
 type Props = BaseProps & (WithTypeEmail | WithTypeText | WithTypeDateTimeLocal)
 
-export const Input = React.forwardRef(
+export const Input = React.forwardRef<HTMLInputElement, Props>(
   (
     {
       autoFocus,
@@ -353,8 +353,8 @@ export const Input = React.forwardRef(
       onClickAction,
       size = 'medium',
       ...props
-    }: Props,
-    ref: React.Ref<HTMLInputElement>,
+    },
+    ref,
   ) => {
     const defaultRef = React.useRef<HTMLInputElement>(null)
     const inputRef = (ref as React.RefObject<HTMLInputElement>) || defaultRef
diff --git a/components/src/components/molecules/Modal/Modal.tsx b/components/src/components/molecules/Modal/Modal.tsx
index f941f807..04e310f8 100644
--- a/components/src/components/molecules/Modal/Modal.tsx
+++ b/components/src/components/molecules/Modal/Modal.tsx
@@ -12,12 +12,12 @@ type ContainerProps = {
   $mobileOnly: boolean
 }
 
-const Container = ({
+const Container: React.FC<BoxProps & ContainerProps> = ({
   $state,
   $alignTop,
   $mobileOnly,
   ...props
-}: BoxProps & ContainerProps) => {
+}) => {
   const mobileMode = $alignTop ? 'mobileTop' : 'mobileBottom'
   const desktopMode = $mobileOnly ? mobileMode : 'desktop'
   const entered = $state === 'entered'
diff --git a/components/src/components/molecules/PageButtons/PageButtons.tsx b/components/src/components/molecules/PageButtons/PageButtons.tsx
index 04a2cb45..c2c5c9f1 100644
--- a/components/src/components/molecules/PageButtons/PageButtons.tsx
+++ b/components/src/components/molecules/PageButtons/PageButtons.tsx
@@ -76,7 +76,7 @@ const Dots = (props: BoxProps) => (
   />
 )
 
-export const PageButtons = ({
+export const PageButtons: React.FC<Props> = ({
   total,
   current,
   max = 5,
@@ -86,7 +86,7 @@ export const PageButtons = ({
   showEllipsis = true,
   onChange,
   ...props
-}: Props) => {
+}) => {
   const maxPerSide = Math.floor(max / 2)
   const start = Math.max(
     Math.min(Math.max(current - maxPerSide, 1), total - max + 1),
diff --git a/components/src/components/molecules/Profile/Profile.tsx b/components/src/components/molecules/Profile/Profile.tsx
index 71969e2d..a31455e0 100644
--- a/components/src/components/molecules/Profile/Profile.tsx
+++ b/components/src/components/molecules/Profile/Profile.tsx
@@ -138,7 +138,7 @@ const ProfileInner = ({ size = 'medium', avatar, address, ensName }: Props) => (
 
 type Props = BaseProps
 
-export const Profile = ({
+export const Profile: React.FC<Props> = ({
   size = 'medium',
   avatar,
   dropdownItems,
@@ -147,7 +147,7 @@ export const Profile = ({
   alignDropdown = 'left',
   indicatorColor,
   ...props
-}: Props) => {
+}) => {
   const [isOpen, setIsOpen] = React.useState(false)
 
   if (dropdownItems) {
diff --git a/components/src/components/molecules/RadioButton/RadioButton.tsx b/components/src/components/molecules/RadioButton/RadioButton.tsx
index 30e2adc0..31f5315a 100644
--- a/components/src/components/molecules/RadioButton/RadioButton.tsx
+++ b/components/src/components/molecules/RadioButton/RadioButton.tsx
@@ -97,7 +97,7 @@ const Input = React.forwardRef<HTMLElement, BoxProps & { $color: Color }>(
   ),
 )
 
-export const RadioButton = React.forwardRef(
+export const RadioButton = React.forwardRef<HTMLInputElement, Props>(
   (
     {
       description,
@@ -119,8 +119,8 @@ export const RadioButton = React.forwardRef(
       onChange,
       onFocus,
       ...props
-    }: Props,
-    ref: React.Ref<HTMLInputElement>,
+    },
+    ref,
   ) => {
     const defaultRef = React.useRef<HTMLInputElement>(null)
     const inputRef = (ref as React.RefObject<HTMLInputElement>) || defaultRef
diff --git a/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx b/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx
index 4de797bf..9b3a3dff 100644
--- a/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx
@@ -38,7 +38,7 @@ export type Props = {
   onBlur?: NativeInputProps['onBlur']
 } & Omit<NativeDivProps, 'onFocus' | 'onChange' | 'onBlur'>
 
-export const RadioButtonGroup = React.forwardRef(
+export const RadioButtonGroup = React.forwardRef<HTMLDivElement, Props>(
   (
     {
       value: _value,
@@ -47,8 +47,8 @@ export const RadioButtonGroup = React.forwardRef(
       onChange,
       onBlur,
       ...props
-    }: Props,
-    ref: React.Ref<HTMLDivElement>,
+    },
+    ref,
   ) => {
     const defaultRef = React.useRef<HTMLDivElement>(null)
     const rootRef = (ref as React.RefObject<HTMLDivElement>) || defaultRef
diff --git a/components/src/components/molecules/Select/Select.tsx b/components/src/components/molecules/Select/Select.tsx
index fbaa3b62..72d4bec0 100644
--- a/components/src/components/molecules/Select/Select.tsx
+++ b/components/src/components/molecules/Select/Select.tsx
@@ -508,7 +508,7 @@ const getSize = (
   return size?.[key] || fallback
 }
 
-export const Select = React.forwardRef(
+export const Select = React.forwardRef<HTMLInputElement, SelectProps>(
   (
     {
       description,
@@ -544,8 +544,8 @@ export const Select = React.forwardRef(
       validated,
       showDot = false,
       ...props
-    }: SelectProps,
-    ref: React.Ref<HTMLInputElement>,
+    },
+    ref,
   ) => {
     const defaultRef = React.useRef<HTMLInputElement>(null)
     const inputRef = (ref as React.RefObject<HTMLInputElement>) || defaultRef
diff --git a/components/src/components/molecules/SkeletonGroup/SkeletonGroup.tsx b/components/src/components/molecules/SkeletonGroup/SkeletonGroup.tsx
index 6c86f964..c30f5475 100644
--- a/components/src/components/molecules/SkeletonGroup/SkeletonGroup.tsx
+++ b/components/src/components/molecules/SkeletonGroup/SkeletonGroup.tsx
@@ -9,7 +9,7 @@ type Props = {
 
 export const Context = React.createContext<boolean | undefined>(undefined)
 
-export const SkeletonGroup = ({ children, loading }: Props) => {
+export const SkeletonGroup: React.FC<Props> = ({ children, loading }) => {
   return <Context.Provider value={loading}>{children}</Context.Provider>
 }
 
diff --git a/components/src/components/molecules/Slider/Slider.tsx b/components/src/components/molecules/Slider/Slider.tsx
index 37428b1b..fdf87921 100644
--- a/components/src/components/molecules/Slider/Slider.tsx
+++ b/components/src/components/molecules/Slider/Slider.tsx
@@ -56,7 +56,7 @@ const SliderComponent = React.forwardRef<HTMLElement, BoxProps>(
   ),
 )
 
-export const Slider = React.forwardRef(
+export const Slider = React.forwardRef<HTMLInputElement, Props>(
   (
     {
       label,
@@ -81,8 +81,8 @@ export const Slider = React.forwardRef(
       onFocus,
       step = 'any',
       ...nativeProps
-    }: Props,
-    ref: React.Ref<HTMLInputElement>,
+    },
+    ref,
   ) => {
     const defaultRef = React.useRef<HTMLInputElement>(null)
     const inputRef = (ref as React.RefObject<HTMLInputElement>) || defaultRef
diff --git a/components/src/components/molecules/Textarea/Textarea.tsx b/components/src/components/molecules/Textarea/Textarea.tsx
index fc6039a6..24a5689f 100644
--- a/components/src/components/molecules/Textarea/Textarea.tsx
+++ b/components/src/components/molecules/Textarea/Textarea.tsx
@@ -197,7 +197,7 @@ type Props = Omit<FieldBaseProps, 'inline'> & {
     'children' | 'value' | 'defaultValue' | 'aria-invalid'
 >
 
-export const Textarea = React.forwardRef(
+export const Textarea = React.forwardRef<HTMLTextAreaElement, Props>(
   (
     {
       autoCorrect,
@@ -231,8 +231,8 @@ export const Textarea = React.forwardRef(
       onBlur,
       onFocus,
       ...props
-    }: Props,
-    ref: React.Ref<HTMLTextAreaElement>,
+    },
+    ref,
   ) => {
     const defaultRef = React.useRef<HTMLInputElement>(null)
     const inputRef = (ref as React.RefObject<HTMLTextAreaElement>) || defaultRef
diff --git a/components/src/components/molecules/Tooltip/Tooltip.tsx b/components/src/components/molecules/Tooltip/Tooltip.tsx
index 48a46f07..daf46e66 100644
--- a/components/src/components/molecules/Tooltip/Tooltip.tsx
+++ b/components/src/components/molecules/Tooltip/Tooltip.tsx
@@ -136,14 +136,14 @@ export interface TooltipProps
   children: React.ReactElement
 }
 
-export const Tooltip = ({
+export const Tooltip: React.FC<TooltipProps> = ({
   content,
   background = 'background',
   placement = 'top',
   mobilePlacement = 'top',
   children,
   ...props
-}: TooltipProps) => {
+}) => {
   // Setup anchor element
   const anchorRef = React.useRef<HTMLDivElement>(null)
   const child = React.Children.only(children)
diff --git a/components/src/components/organisms/Dialog/Dialog.tsx b/components/src/components/organisms/Dialog/Dialog.tsx
index e7b74299..7d57b100 100644
--- a/components/src/components/organisms/Dialog/Dialog.tsx
+++ b/components/src/components/organisms/Dialog/Dialog.tsx
@@ -231,16 +231,16 @@ const Heading = ({
 //   )
 // }
 
-const Footer = ({
+const Footer: React.FC<{
+  leading?: React.ReactNode
+  trailing: React.ReactNode
+} & StepProps> = ({
   leading,
   trailing,
   currentStep,
   stepCount,
   stepStatus,
-}: {
-  leading?: React.ReactNode
-  trailing: React.ReactNode
-} & StepProps) => {
+}) => {
   const calcStepType = React.useCallback(
     (step: number) => {
       if (step === currentStep) {
diff --git a/components/src/components/organisms/Toast/Toast.tsx b/components/src/components/organisms/Toast/Toast.tsx
index 0b702b6b..50116bdb 100644
--- a/components/src/components/organisms/Toast/Toast.tsx
+++ b/components/src/components/organisms/Toast/Toast.tsx
@@ -308,13 +308,13 @@ InternalProps & {
   )
 }
 
-export const Toast = ({
+export const Toast: React.FC<Props> = ({
   onClose,
   open,
   msToShow = 8000,
   variant = 'desktop',
   ...props
-}: Props) => {
+}) => {
   const [popped, setPopped] = React.useState(false)
   const currentTimeout = React.useRef<number | undefined>()