refactor to use fc

ensdomains · Aug 28, 2024 · 852ff41 · 852ff41
1 parent 09393c8
commit 852ff41
Show file tree

Hide file tree

Showing 25 changed files with 62 additions and 62 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -21,15 +21,15 @@ type Props = {
   renderCallback?: () => void
 }
 
-export const Backdrop = ({
+export const Backdrop: React.FC<Props> = ({
   children,
   surface,
   onDismiss,
   noBackground = false,
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)