refactor: remove React.FC for component package (#3575)

packages/component/src/components/setting-components/modal.tsx

@@ -1,17 +1,17 @@
 import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
-import type { FC, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { useCallback } from 'react';
 
-export type SettingModalProps = {
+export interface SettingModalProps {
   open: boolean;
   setOpen: (value: boolean) => void;
-};
+}
 
-export const SettingModal: FC<PropsWithChildren<SettingModalProps>> = ({
+export const SettingModal = ({
   children,
   open,
   setOpen,
-}) => {
+}: PropsWithChildren<SettingModalProps>) => {
   const handleClose = useCallback(() => {
     setOpen(false);
   }, [setOpen]);

packages/component/src/components/setting-components/setting-header.tsx

@@ -1,13 +1,18 @@
-import type { FC, HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 
 import { settingHeader } from './share.css';
 
-export const SettingHeader: FC<
-  { title: ReactNode; subtitle?: ReactNode } & Omit<
-    HTMLAttributes<HTMLDivElement>,
-    'title'
-  >
-> = ({ title, subtitle, ...otherProps }) => {
+interface SettingHeaderProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  title: ReactNode;
+  subtitle?: ReactNode;
+}
+
+export const SettingHeader = ({
+  title,
+  subtitle,
+  ...otherProps
+}: SettingHeaderProps) => {
   return (
     <div className={settingHeader} {...otherProps}>
       <div className="title">{title}</div>

packages/component/src/components/setting-components/setting-row.tsx

@@ -1,18 +1,18 @@
 import clsx from 'clsx';
-import type { CSSProperties, FC, PropsWithChildren, ReactNode } from 'react';
+import type { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 
 import { settingRow } from './share.css';
 
-export const SettingRow: FC<
-  PropsWithChildren<{
-    name: ReactNode;
-    desc: ReactNode;
-    style?: CSSProperties;
-    onClick?: () => void;
-    spreadCol?: boolean;
-    testId?: string;
-  }>
-> = ({
+interface SettingRowProps {
+  name: ReactNode;
+  desc: ReactNode;
+  style?: CSSProperties;
+  onClick?: () => void;
+  spreadCol?: boolean;
+  testId?: string;
+}
+
+export const SettingRow = ({
   name,
   desc,
   children,
@@ -20,7 +20,7 @@ export const SettingRow: FC<
   style,
   spreadCol = true,
   testId = '',
-}) => {
+}: PropsWithChildren<SettingRowProps>) => {
   return (
     <div
       className={clsx(settingRow, {

packages/component/src/components/setting-components/wrapper.tsx

@@ -1,11 +1,15 @@
-import type { FC, PropsWithChildren, ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 
 import { wrapper } from './share.css';
-export const SettingWrapper: FC<
-  PropsWithChildren<{
-    title?: ReactNode;
-  }>
-> = ({ title, children }) => {
+
+interface SettingWrapperProps {
+  title?: ReactNode;
+}
+
+export const SettingWrapper = ({
+  title,
+  children,
+}: PropsWithChildren<SettingWrapperProps>) => {
   return (
     <div className={wrapper}>
       {title ? <div className="title">{title}</div> : null}