refactor(console): use function-declaration for named components (#3520)

* refactor(console): use function-declaration for named components

Application Insights can only automatically track component names from function
declaration. update convention to make tracking easier.

* refactor(console): fix lint errors

packages/console/package.json

@@ -115,7 +115,16 @@
     "@mdx/components/*": "./src/mdx-components/$1"
   },
   "eslintConfig": {
-    "extends": "@silverhand/react"
+    "extends": "@silverhand/react",
+    "rules": {
+      "react/function-component-definition": [
+        "error",
+        {
+          "namedComponents": "function-declaration",
+          "unnamedComponents": "arrow-function"
+        }
+      ]
+    }
   },
   "stylelint": {
     "extends": "@silverhand/eslint-config-react/.stylelintrc"

packages/console/src/App.tsx

@@ -28,7 +28,7 @@ import setTitle from './utils/set-title';
 void initI18n();
 setTitle();
 
-const Content = () => {
+function Content() {
   const { tenants, isSettle, currentTenantId } = useContext(TenantsContext);
 
   const resources = deduplicate(
@@ -78,14 +78,14 @@ const Content = () => {
       </AppThemeProvider>
     </LogtoProvider>
   );
-};
+}
 
-const App = () => {
+function App() {
   return (
     <TenantsProvider>
       <Content />
     </TenantsProvider>
   );
-};
+}
 
 export default App;

packages/console/src/cloud/App.tsx

@@ -7,7 +7,7 @@ import Main from './pages/Main';
 import SocialDemoCallback from './pages/SocialDemoCallback';
 import { CloudRoute } from './types';
 
-const App = () => {
+function App() {
   return (
     <BrowserRouter>
       <div className={styles.app}>
@@ -20,6 +20,6 @@ const App = () => {
       </div>
     </BrowserRouter>
   );
-};
+}
 
 export default App;

packages/console/src/cloud/pages/Callback/index.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import AppLoading from '@/components/AppLoading';
 import { getUserTenantId } from '@/consts/tenants';
 
-const Callback = () => {
+function Callback() {
   const navigate = useNavigate();
   const { error } = useHandleSignInCallback(() => {
     navigate('/' + getUserTenantId(), { replace: true });
@@ -21,6 +21,6 @@ const Callback = () => {
   }
 
   return <AppLoading />;
-};
+}
 
 export default Callback;

packages/console/src/cloud/pages/Main/Redirect.tsx

@@ -12,7 +12,7 @@ type Props = {
   toTenantId: string;
 };
 
-const Redirect = ({ tenants, toTenantId }: Props) => {
+function Redirect({ tenants, toTenantId }: Props) {
   const { getAccessToken, signIn } = useLogto();
   const tenant = tenants.find(({ id }) => id === toTenantId);
   const { setIsSettle } = useContext(TenantsContext);
@@ -40,6 +40,6 @@ const Redirect = ({ tenants, toTenantId }: Props) => {
   }
 
   return <AppLoading />;
-};
+}
 
 export default Redirect;

packages/console/src/cloud/pages/Main/Tenants.tsx

@@ -14,7 +14,7 @@ type Props = {
   onAdd: (tenant: TenantInfo) => void;
 };
 
-const Tenants = ({ data, onAdd }: Props) => {
+function Tenants({ data, onAdd }: Props) {
   const api = useCloudApi();
   const { navigate } = useContext(TenantsContext);
 
@@ -57,6 +57,6 @@ const Tenants = ({ data, onAdd }: Props) => {
   }
 
   return <AppLoading />;
-};
+}
 
 export default Tenants;

packages/console/src/cloud/pages/Main/index.tsx

@@ -12,7 +12,7 @@ import { TenantsContext } from '@/contexts/TenantsProvider';
 import Redirect from './Redirect';
 import Tenants from './Tenants';
 
-const Protected = () => {
+function Protected() {
   const api = useCloudApi();
   const { tenants, setTenants, currentTenantId } = useContext(TenantsContext);
 
@@ -43,9 +43,9 @@ const Protected = () => {
   }
 
   return <AppLoading />;
-};
+}
 
-const Main = () => {
+function Main() {
   const [searchParameters] = useSearchParams();
   const { isAuthenticated, isLoading, signIn } = useLogto();
   const { currentTenantId } = useContext(TenantsContext);
@@ -66,6 +66,6 @@ const Main = () => {
   }
 
   return <Protected />;
-};
+}
 
 export default Main;

packages/console/src/cloud/pages/SocialDemoCallback/index.tsx

@@ -8,7 +8,7 @@ import useTheme from '@/hooks/use-theme';
 
 import * as styles from './index.module.scss';
 
-const SocialDemoCallback = () => {
+function SocialDemoCallback() {
   const theme = useTheme();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -21,6 +21,6 @@ const SocialDemoCallback = () => {
       </Card>
     </div>
   );
-};
+}
 
 export default SocialDemoCallback;

packages/console/src/components/ActionMenu/index.tsx

@@ -20,14 +20,14 @@ type Props = {
   isDropdownFullWidth?: boolean;
 };
 
-const ActionMenu = ({
+function ActionMenu({
   children,
   buttonProps,
   title,
   dropdownHorizontalAlign,
   dropdownClassName,
   isDropdownFullWidth = false,
-}: Props) => {
+}: Props) {
   const [isOpen, setIsOpen] = useState(false);
   const anchorReference = useRef<HTMLDivElement>(null);
 
@@ -56,6 +56,6 @@ const ActionMenu = ({
       </Dropdown>
     </div>
   );
-};
+}
 
 export default ActionMenu;

packages/console/src/components/Alert/index.tsx

@@ -19,7 +19,7 @@ type Props = {
   className?: string;
 };
 
-const Alert = ({
+function Alert({
   children,
   action,
   href,
@@ -27,7 +27,7 @@ const Alert = ({
   severity = 'info',
   variant = 'plain',
   className,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -44,6 +44,6 @@ const Alert = ({
       )}
     </div>
   );
-};
+}
 
 export default Alert;

packages/console/src/components/AppError/index.tsx

@@ -19,7 +19,7 @@ type Props = {
   children?: React.ReactNode;
 };
 
-const AppError = ({ title, errorCode, errorMessage, callStack, children }: Props) => {
+function AppError({ title, errorCode, errorMessage, callStack, children }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   const theme = useTheme();
@@ -55,6 +55,6 @@ const AppError = ({ title, errorCode, errorMessage, callStack, children }: Props
       {children}
     </div>
   );
-};
+}
 
 export default AppError;

packages/console/src/components/AppLoading/index.tsx

@@ -7,7 +7,7 @@ import useTheme from '@/hooks/use-theme';
 
 import * as styles from './index.module.scss';
 
-const AppLoading = () => {
+function AppLoading() {
   const theme = useTheme();
 
   return (
@@ -16,6 +16,6 @@ const AppLoading = () => {
       <Spinner />
     </div>
   );
-};
+}
 
 export default AppLoading;

packages/console/src/components/ApplicationIcon/index.tsx

@@ -9,12 +9,12 @@ type Props = {
   className?: string;
 };
 
-const ApplicationIcon = ({ type, className }: Props) => {
+function ApplicationIcon({ type, className }: Props) {
   const theme = useTheme();
   const isLightMode = theme === Theme.Light;
   const Icon = isLightMode ? lightModeApplicationIconMap[type] : darkModeApplicationIconMap[type];
 
   return <Icon className={className} />;
-};
+}
 
 export default ApplicationIcon;

packages/console/src/components/ApplicationName/index.tsx

@@ -11,7 +11,7 @@ type Props = {
   isLink?: boolean;
 };
 
-const ApplicationName = ({ applicationId, isLink = false }: Props) => {
+function ApplicationName({ applicationId, isLink = false }: Props) {
   const isAdminConsole = applicationId === adminConsoleApplicationId;
 
   const { data } = useSWR<Application>(!isAdminConsole && `api/applications/${applicationId}`);
@@ -28,6 +28,6 @@ const ApplicationName = ({ applicationId, isLink = false }: Props) => {
   }
 
   return <span>{name}</span>;
-};
+}
 
 export default ApplicationName;

packages/console/src/components/AuditLogTable/components/ApplicationSelector/index.tsx

@@ -10,7 +10,7 @@ type Props = {
   onChange: (value?: string) => void;
 };
 
-const ApplicationSelector = ({ value, onChange }: Props) => {
+function ApplicationSelector({ value, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { data } = useSWR<Application[]>('api/applications');
   const options =
@@ -28,6 +28,6 @@ const ApplicationSelector = ({ value, onChange }: Props) => {
       onChange={onChange}
     />
   );
-};
+}
 
 export default ApplicationSelector;

packages/console/src/components/AuditLogTable/components/EventName/index.tsx

@@ -13,7 +13,7 @@ type Props = {
   to?: string;
 };
 
-const EventName = ({ eventKey, isSuccess, to }: Props) => {
+function EventName({ eventKey, isSuccess, to }: Props) {
   const title = logEventTitle[eventKey] ?? eventKey;
 
   return (
@@ -35,6 +35,6 @@ const EventName = ({ eventKey, isSuccess, to }: Props) => {
       {!to && <div className={styles.title}>{title}</div>}
     </div>
   );
-};
+}
 
 export default EventName;

packages/console/src/components/AuditLogTable/components/EventSelector/index.tsx

@@ -8,7 +8,7 @@ type Props = {
   onChange: (value?: string) => void;
 };
 
-const EventSelector = ({ value, onChange }: Props) => {
+function EventSelector({ value, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const options = Object.entries(logEventTitle).map(([value, title]) => ({
     value,
@@ -24,6 +24,6 @@ const EventSelector = ({ value, onChange }: Props) => {
       onChange={onChange}
     />
   );
-};
+}
 
 export default EventSelector;

packages/console/src/components/AuditLogTable/index.tsx

@@ -25,7 +25,7 @@ type Props = {
   className?: string;
 };
 
-const AuditLogTable = ({ userId, className }: Props) => {
+function AuditLogTable({ userId, className }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { pathname } = useLocation();
   const pageSize = defaultPageSize;
@@ -132,6 +132,6 @@ const AuditLogTable = ({ userId, className }: Props) => {
       onRetry={async () => mutate(undefined, true)}
     />
   );
-};
+}
 
 export default AuditLogTable;

packages/console/src/components/Button/index.tsx

@@ -39,7 +39,7 @@ type IconButtonProps = BaseProps & {
 
 export type Props = TitleButtonProps | IconButtonProps;
 
-const Button = ({
+function Button({
   htmlType = 'button',
   type = 'default',
   size = 'medium',
@@ -51,7 +51,7 @@ const Button = ({
   onClick,
   trailingIcon,
   ...rest
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [showSpinner, setShowSpinner] = useState(false);
   const timerRef = useRef<number>();
@@ -96,6 +96,6 @@ const Button = ({
       {trailingIcon && <span className={styles.trailingIcon}>{trailingIcon}</span>}
     </button>
   );
-};
+}
 
 export default Button;

packages/console/src/components/Card/index.tsx

@@ -9,7 +9,7 @@ type Props = {
   className?: string;
 };
 
-const Card = (props: Props, reference?: Ref<HTMLDivElement>) => {
+function Card(props: Props, reference?: Ref<HTMLDivElement>) {
   const { children, className } = props;
 
   return (
@@ -17,6 +17,6 @@ const Card = (props: Props, reference?: Ref<HTMLDivElement>) => {
       {children}
     </div>
   );
-};
+}
 
 export default forwardRef<HTMLDivElement, Props>(Card);

packages/console/src/components/CardTitle/index.tsx

@@ -19,14 +19,14 @@ export type Props = {
 /**
  * Always use this component to render CardTitle, with built-in i18n support.
  */
-const CardTitle = ({
+function CardTitle({
   title,
   subtitle,
   size = 'large',
   isWordWrapEnabled = false,
   learnMoreLink,
   className,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -46,6 +46,6 @@ const CardTitle = ({
       )}
     </div>
   );
-};
+}
 
 export default CardTitle;

packages/console/src/components/Checkbox/index.tsx

@@ -19,7 +19,7 @@ type Props = {
   tooltip?: ReactNode;
 };
 
-const Checkbox = ({
+function Checkbox({
   checked,
   disabled = false,
   indeterminate,
@@ -27,7 +27,7 @@ const Checkbox = ({
   label,
   className,
   tooltip,
-}: Props) => {
+}: Props) {
   const [isIndeterminate, setIsIndeterminate] = useState(indeterminate);
 
   useLayoutEffect(() => {
@@ -106,6 +106,6 @@ const Checkbox = ({
       </div>
     </div>
   );
-};
+}
 
 export default Checkbox;

packages/console/src/components/CodeEditor/index.tsx

@@ -21,7 +21,7 @@ type Props = {
   placeholder?: string;
 };
 
-const CodeEditor = ({
+function CodeEditor({
   className,
   language,
   isReadonly = false,
@@ -31,7 +31,7 @@ const CodeEditor = ({
   hasError,
   errorMessage,
   placeholder,
-}: Props) => {
+}: Props) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const editorRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -142,6 +142,6 @@ const CodeEditor = ({
       {hasError && <div className={styles.errorMessage}>{finalErrorMessage}</div>}
     </>
   );
-};
+}
 
 export default CodeEditor;

packages/console/src/components/ColorPicker/index.tsx

@@ -9,7 +9,7 @@ type Props = {
   onChange?: (value: string) => void;
 };
 
-const ColorPicker = ({ onChange, value = '#000000' }: Props) => {
+function ColorPicker({ onChange, value = '#000000' }: Props) {
   const [id, setId] = useState(nanoid());
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -22,5 +22,5 @@ const ColorPicker = ({ onChange, value = '#000000' }: Props) => {
       <label htmlFor={id}>{value.toUpperCase()}</label>
     </div>
   );
-};
+}
 export default ColorPicker;

packages/console/src/components/ConfirmModal/index.tsx

@@ -24,7 +24,7 @@ export type ConfirmModalProps = {
   onConfirm?: () => void;
 };
 
-const ConfirmModal = ({
+function ConfirmModal({
   children,
   className,
   title = 'general.reminder',
@@ -36,7 +36,7 @@ const ConfirmModal = ({
   isLoading = false,
   onCancel,
   onConfirm,
-}: ConfirmModalProps) => {
+}: ConfirmModalProps) {
   return (
     <ReactModal
       shouldCloseOnEsc
@@ -68,6 +68,6 @@ const ConfirmModal = ({
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default ConfirmModal;

packages/console/src/components/ConnectorLogo/index.tsx

@@ -13,7 +13,7 @@ type Props = {
   size?: 'small' | 'medium' | 'large';
 };
 
-const ConnectorLogo = ({ className, data, size = 'medium' }: Props) => {
+function ConnectorLogo({ className, data, size = 'medium' }: Props) {
   const theme = useTheme();
 
   return (
@@ -24,6 +24,6 @@ const ConnectorLogo = ({ className, data, size = 'medium' }: Props) => {
       src={theme === Theme.Dark && data.logoDark ? data.logoDark : data.logo}
     />
   );
-};
+}
 
 export default ConnectorLogo;

packages/console/src/components/CopyToClipboard/index.tsx

@@ -23,13 +23,13 @@ type Props = {
 
 type CopyState = TFuncKey<'translation', 'admin_console.general'>;
 
-const CopyToClipboard = ({
+function CopyToClipboard({
   value,
   className,
   hasVisibilityToggle,
   variant = 'contained',
   size = 'default',
-}: Props) => {
+}: Props) {
   const copyIconReference = useRef<HTMLButtonElement>(null);
   const [copyState, setCopyState] = useState<CopyState>('copy');
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.general' });
@@ -101,6 +101,6 @@ const CopyToClipboard = ({
       </div>
     </div>
   );
-};
+}
 
 export default CopyToClipboard;

packages/console/src/components/DangerousRaw/index.tsx

@@ -4,6 +4,8 @@ type Props = {
   children: ReactNode;
 };
 
-const DangerousRaw = ({ children }: Props) => <span>{children}</span>;
+function DangerousRaw({ children }: Props) {
+  return <span>{children}</span>;
+}
 
 export default DangerousRaw;

packages/console/src/components/DateTime/index.tsx

@@ -5,7 +5,7 @@ type Props = {
   children: Nullable<string | number>;
 };
 
-const DateTime = ({ children }: Props) => {
+function DateTime({ children }: Props) {
   const date = children && new Date(children);
 
   if (!date || !isValid(date)) {
@@ -13,6 +13,6 @@ const DateTime = ({ children }: Props) => {
   }
 
   return <span>{date.toLocaleDateString()}</span>;
-};
+}
 
 export default DateTime;

packages/console/src/components/DeleteConfirmModal/index.tsx

@@ -15,7 +15,7 @@ type Props = {
   onConfirm: () => void;
 };
 
-const DeleteConfirmModal = ({
+function DeleteConfirmModal({
   isOpen,
   isLoading = false,
   expectedInput,
@@ -24,7 +24,7 @@ const DeleteConfirmModal = ({
   className,
   onCancel,
   onConfirm,
-}: Props) => {
+}: Props) {
   const [input, setInput] = useState('');
   const isConfirmBlocked = Boolean(expectedInput) && input !== expectedInput;
 
@@ -52,6 +52,6 @@ const DeleteConfirmModal = ({
       )}
     </ConfirmModal>
   );
-};
+}
 
 export default DeleteConfirmModal;

packages/console/src/components/DetailsForm/index.tsx

@@ -13,14 +13,14 @@ type Props = {
   children: ReactNode;
 };
 
-const DetailsForm = ({
+function DetailsForm({
   autoComplete,
   isDirty,
   isSubmitting,
   onSubmit,
   onDiscard,
   children,
-}: Props) => {
+}: Props) {
   return (
     <form
       className={classNames(styles.container, isDirty && styles.withSubmitActionBar)}
@@ -35,6 +35,6 @@ const DetailsForm = ({
       />
     </form>
   );
-};
+}
 
 export default DetailsForm;

packages/console/src/components/DetailsSkeleton/index.tsx

@@ -6,36 +6,38 @@ import Spacer from '@/components/Spacer';
 
 import * as styles from './index.module.scss';
 
-const DetailsSkeleton = () => (
-  <div className={styles.container}>
-    <div className={styles.header}>
-      <div className={styles.icon} />
-      <div className={styles.wrapper}>
-        <div className={styles.title} />
-        <div className={styles.tags} />
+function DetailsSkeleton() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.icon} />
+        <div className={styles.wrapper}>
+          <div className={styles.title} />
+          <div className={styles.tags} />
+        </div>
+        <Spacer />
+        <div className={styles.button} />
       </div>
-      <Spacer />
-      <div className={styles.button} />
-    </div>
-    <div className={styles.tabBar} />
-    <Card className={classNames(formCardStyles.container, styles.content)}>
-      <div className={classNames(formCardStyles.introduction, styles.introduction)}>
-        <div className={styles.title} />
-        <div className={styles.description}>
-          {Array.from({ length: 2 }).map((_, index) => (
+      <div className={styles.tabBar} />
+      <Card className={classNames(formCardStyles.container, styles.content)}>
+        <div className={classNames(formCardStyles.introduction, styles.introduction)}>
+          <div className={styles.title} />
+          <div className={styles.description}>
+            {Array.from({ length: 2 }).map((_, index) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <div key={index} className={styles.text} />
+            ))}
+          </div>
+        </div>
+        <div className={classNames(formCardStyles.form, styles.form)}>
+          {Array.from({ length: 4 }).map((_, index) => (
             // eslint-disable-next-line react/no-array-index-key
-            <div key={index} className={styles.text} />
+            <div key={index} className={styles.field} />
           ))}
         </div>
-      </div>
-      <div className={classNames(formCardStyles.form, styles.form)}>
-        {Array.from({ length: 4 }).map((_, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <div key={index} className={styles.field} />
-        ))}
-      </div>
-    </Card>
-  </div>
-);
+      </Card>
+    </div>
+  );
+}
 
 export default DetailsSkeleton;

packages/console/src/components/Divider/index.tsx

@@ -6,6 +6,8 @@ type Props = {
   className?: string;
 };
 
-const Divider = ({ className }: Props) => <div className={classNames(styles.divider, className)} />;
+function Divider({ className }: Props) {
+  return <div className={classNames(styles.divider, className)} />;
+}
 
 export default Divider;

packages/console/src/components/DragDrop/DragDropProvider.tsx

@@ -19,7 +19,7 @@ export const DragDropContext = createContext<DragDropContextProps>({
   isDragging: false,
 });
 
-const DragDropProvider = ({ children }: Props) => {
+function DragDropProvider({ children }: Props) {
   const [isDragging, setIsDragging] = useState(false);
 
   const memorizedContext = useMemo(() => ({ isDragging, setIsDragging }), [isDragging]);
@@ -31,6 +31,6 @@ const DragDropProvider = ({ children }: Props) => {
       </DndProvider>
     </DragDropContext.Provider>
   );
-};
+}
 
 export default DragDropProvider;

packages/console/src/components/DragDrop/DraggableItem.tsx

@@ -21,14 +21,14 @@ type DragItemProps = {
   type: string;
 };
 
-const DraggableItem = ({
+function DraggableItem({
   id,
   children,
   sortIndex,
   moveItem,
   dragType = 'DraggableItem',
   className,
-}: Props) => {
+}: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const { setIsDragging } = useContext(DragDropContext);
   const [{ handlerId }, drop] = useDrop<DragItemProps, void, { handlerId: Nullable<Identifier> }>({
@@ -110,6 +110,6 @@ const DraggableItem = ({
       {children}
     </div>
   );
-};
+}
 
 export default DraggableItem;

packages/console/src/components/Drawer/index.tsx

@@ -16,7 +16,7 @@ type Props = {
   onClose?: () => void;
 };
 
-const Drawer = ({ title, subtitle, isOpen, children, onClose }: Props) => {
+function Drawer({ title, subtitle, isOpen, children, onClose }: Props) {
   return (
     <ReactModal
       shouldCloseOnOverlayClick
@@ -43,6 +43,6 @@ const Drawer = ({ title, subtitle, isOpen, children, onClose }: Props) => {
       </div>
     </ReactModal>
   );
-};
+}
 
 export default Drawer;

packages/console/src/components/Dropdown/DropdownItem.tsx

@@ -14,24 +14,26 @@ type Props = {
   type?: 'default' | 'danger';
 };
 
-const DropdownItem = ({
+function DropdownItem({
   onClick,
   className,
   children,
   icon,
   iconClassName,
   type = 'default',
-}: Props) => (
-  <div
-    className={classNames(styles.item, styles[type], className)}
-    role="menuitem"
-    tabIndex={0}
-    onKeyDown={onKeyDownHandler(onClick)}
-    onClick={onClick}
-  >
-    {icon && <span className={classNames(styles.icon, iconClassName)}>{icon}</span>}
-    {children}
-  </div>
-);
+}: Props) {
+  return (
+    <div
+      className={classNames(styles.item, styles[type], className)}
+      role="menuitem"
+      tabIndex={0}
+      onKeyDown={onKeyDownHandler(onClick)}
+      onClick={onClick}
+    >
+      {icon && <span className={classNames(styles.icon, iconClassName)}>{icon}</span>}
+      {children}
+    </div>
+  );
+}
 
 export default DropdownItem;

packages/console/src/components/Dropdown/index.tsx

@@ -31,14 +31,14 @@ type Props = {
   hasOverflowContent?: boolean;
 };
 
-const Div = ({
+function Div({
   children,
   ...rest
-}: PropsWithChildren<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>) => (
-  <div {...rest}>{children}</div>
-);
+}: PropsWithChildren<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>) {
+  return <div {...rest}>{children}</div>;
+}
 
-const Dropdown = ({
+function Dropdown({
   children,
   title,
   isOpen,
@@ -49,7 +49,7 @@ const Dropdown = ({
   titleClassName,
   horizontalAlign = 'end',
   hasOverflowContent,
-}: Props) => {
+}: Props) {
   const overlayRef = useRef<HTMLDivElement>(null);
 
   const { position, positionState, mutate } = usePosition({
@@ -95,6 +95,6 @@ const Dropdown = ({
       </div>
     </ReactModal>
   );
-};
+}
 
 export default Dropdown;

packages/console/src/components/EmptyDataPlaceholder/index.tsx

@@ -13,7 +13,7 @@ export type Props = {
   size?: 'large' | 'medium' | 'small';
 };
 
-const EmptyDataPlaceholder = ({ title, size = 'medium' }: Props) => {
+function EmptyDataPlaceholder({ title, size = 'medium' }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
   const EmptyImage = theme === Theme.Light ? Empty : EmptyDark;
@@ -24,6 +24,6 @@ const EmptyDataPlaceholder = ({ title, size = 'medium' }: Props) => {
       <div className={styles.title}>{title ?? t('errors.empty')}</div>
     </div>
   );
-};
+}
 
 export default EmptyDataPlaceholder;

packages/console/src/components/FormCard/index.tsx

@@ -13,7 +13,7 @@ type Props = {
   children: ReactNode;
 };
 
-const FormCard = ({ title, description, learnMoreLink, children }: Props) => {
+function FormCard({ title, description, learnMoreLink, children }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -37,6 +37,6 @@ const FormCard = ({ title, description, learnMoreLink, children }: Props) => {
       <div className={styles.form}>{children}</div>
     </Card>
   );
-};
+}
 
 export default FormCard;

packages/console/src/components/FormField/index.tsx

@@ -22,7 +22,7 @@ export type Props = {
   tip?: ToggleTipProps['content'];
 };
 
-const FormField = ({
+function FormField({
   title,
   children,
   isRequired,
@@ -30,7 +30,7 @@ const FormField = ({
   className,
   tip,
   headlineClassName,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -55,6 +55,6 @@ const FormField = ({
       {children}
     </div>
   );
-};
+}
 
 export default FormField;

packages/console/src/components/IconButton/index.tsx

@@ -9,10 +9,10 @@ export type Props = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'> & {
   iconClassName?: string;
 };
 
-const IconButton = (
+function IconButton(
   { size = 'medium', children, className, iconClassName, ...rest }: Props,
   reference: ForwardedRef<HTMLButtonElement>
-) => {
+) {
   const tipRef = useRef<HTMLDivElement>(null);
 
   return (
@@ -27,6 +27,6 @@ const IconButton = (
       </div>
     </button>
   );
-};
+}
 
 export default forwardRef(IconButton);

packages/console/src/components/ImageWithErrorFallback/index.tsx

@@ -11,14 +11,14 @@ type Props = {
   fallbackElement?: ReactElement;
 } & ImgHTMLAttributes<HTMLImageElement>;
 
-const ImageWithErrorFallback = ({
+function ImageWithErrorFallback({
   src,
   alt,
   className,
   containerClassName,
   fallbackElement,
   ...props
-}: Props) => {
+}: Props) {
   const [hasError, setHasError] = useState(false);
   const theme = useTheme();
   const DefaultFallback = theme === Theme.Light ? FallbackImageLight : FallbackImageDark;
@@ -40,6 +40,6 @@ const ImageWithErrorFallback = ({
       <img className={className} src={src} alt={alt} onError={errorHandler} {...props} />
     </div>
   );
-};
+}
 
 export default ImageWithErrorFallback;

packages/console/src/components/Index/index.tsx

@@ -11,17 +11,19 @@ type Props = {
   isComplete?: boolean;
 };
 
-const Index = ({ className, index, isActive, isComplete }: Props) => (
-  <div
-    className={classNames(
-      styles.container,
-      className,
-      isActive && styles.active,
-      isComplete && styles.completed
-    )}
-  >
-    {isComplete ? <Tick /> : index}
-  </div>
-);
+function Index({ className, index, isActive, isComplete }: Props) {
+  return (
+    <div
+      className={classNames(
+        styles.container,
+        className,
+        isActive && styles.active,
+        isComplete && styles.completed
+      )}
+    >
+      {isComplete ? <Tick /> : index}
+    </div>
+  );
+}
 
 export default Index;

packages/console/src/components/ItemPreview/index.tsx

@@ -13,7 +13,7 @@ type Props = {
   size?: 'default' | 'compact';
 };
 
-const ItemPreview = ({ title, subtitle, icon, to, size = 'default' }: Props) => {
+function ItemPreview({ title, subtitle, icon, to, size = 'default' }: Props) {
   return (
     <div className={classNames(styles.item, styles[size])}>
       {icon}
@@ -34,6 +34,6 @@ const ItemPreview = ({ title, subtitle, icon, to, size = 'default' }: Props) =>
       </div>
     </div>
   );
-};
+}
 
 export default ItemPreview;

packages/console/src/components/LivePreviewButton/index.tsx

@@ -18,7 +18,7 @@ type Props = {
   isDisabled: boolean;
 };
 
-const LivePreviewButton = ({ size, type, isDisabled }: Props) => {
+function LivePreviewButton({ size, type, isDisabled }: Props) {
   const { configs, updateConfigs } = useConfigs();
   const { userEndpoint } = useContext(AppEndpointsContext);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -48,6 +48,6 @@ const LivePreviewButton = ({ size, type, isDisabled }: Props) => {
       />
     </Tooltip>
   );
-};
+}
 
 export default LivePreviewButton;

packages/console/src/components/Markdown/components/GithubRawImage/index.tsx

@@ -3,7 +3,7 @@ import { useRef, useState } from 'react';
 
 const githubRawUrlPrefix = 'https://raw.githubusercontent.com/logto-io/logto/master';
 
-const GithubRawImage = ({ src, alt }: HTMLProps<HTMLImageElement>) => {
+function GithubRawImage({ src, alt }: HTMLProps<HTMLImageElement>) {
   const imgRef = useRef<HTMLImageElement>(null);
   const [width, setWidth] = useState(0);
 
@@ -30,6 +30,6 @@ const GithubRawImage = ({ src, alt }: HTMLProps<HTMLImageElement>) => {
       onLoad={onLoad}
     />
   );
-};
+}
 
 export default GithubRawImage;

packages/console/src/components/Markdown/index.tsx

@@ -14,7 +14,7 @@ type Props = {
   children: string;
 };
 
-const Markdown = ({ className, children }: Props) => {
+function Markdown({ className, children }: Props) {
   const tocIdSet = useRef<Set<string>>(new Set());
 
   const generateTocId = (text: string): Optional<string> => {
@@ -78,6 +78,6 @@ const Markdown = ({ className, children }: Props) => {
       {children}
     </ReactMarkdown>
   );
-};
+}
 
 export default memo(Markdown);

packages/console/src/components/ModalLayout/index.tsx

@@ -17,14 +17,14 @@ type Props = {
   size?: 'medium' | 'large' | 'xlarge';
 } & Pick<CardTitleProps, 'learnMoreLink' | 'title' | 'subtitle' | 'isWordWrapEnabled'>;
 
-const ModalLayout = ({
+function ModalLayout({
   children,
   footer,
   onClose,
   className,
   size = 'medium',
   ...cardTitleProps
-}: Props) => {
+}: Props) {
   return (
     <Card className={classNames(styles.container, styles[size])}>
       <div className={styles.header}>
@@ -43,6 +43,6 @@ const ModalLayout = ({
       {footer && <div className={styles.footer}>{footer}</div>}
     </Card>
   );
-};
+}
 
 export default ModalLayout;

packages/console/src/components/MultiTextInput/index.tsx

@@ -25,7 +25,7 @@ export type Props = {
   className?: string;
 };
 
-const MultiTextInput = ({
+function MultiTextInput({
   title,
   value,
   onChange,
@@ -33,7 +33,7 @@ const MultiTextInput = ({
   error,
   placeholder,
   className,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const [deleteFieldIndex, setDeleteFieldIndex] = useState<number>();
@@ -127,6 +127,6 @@ const MultiTextInput = ({
       </ConfirmModal>
     </div>
   );
-};
+}
 
 export default MultiTextInput;

packages/console/src/components/MultiTextInputField/index.tsx

@@ -12,23 +12,25 @@ type Props = MultiTextInputProps &
     formFieldClassName?: FormFieldProps['className'];
   };
 
-const MultiTextInputField = ({
+function MultiTextInputField({
   title,
   isRequired,
   tip,
   formFieldClassName,
   value,
   ...rest
-}: Props) => (
-  <FormField
-    title={title}
-    isRequired={isRequired}
-    tip={tip}
-    className={formFieldClassName}
-    headlineClassName={conditional(value && value.length > 1 && styles.headlineWithMultiInputs)}
-  >
-    <MultiTextInput title={title} value={value} {...rest} />
-  </FormField>
-);
+}: Props) {
+  return (
+    <FormField
+      title={title}
+      isRequired={isRequired}
+      tip={tip}
+      className={formFieldClassName}
+      headlineClassName={conditional(value && value.length > 1 && styles.headlineWithMultiInputs)}
+    >
+      <MultiTextInput title={title} value={value} {...rest} />
+    </FormField>
+  );
+}
 
 export default MultiTextInputField;

packages/console/src/components/OverlayScrollbar/index.tsx

@@ -1,11 +1,13 @@
 import type { OverlayScrollbarsComponentProps } from 'overlayscrollbars-react';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 
-const OverlayScrollbar = (props: OverlayScrollbarsComponentProps) => (
-  <OverlayScrollbarsComponent
-    options={{ scrollbars: { autoHide: 'leave', autoHideDelay: 0 } }}
-    {...props}
-  />
-);
+function OverlayScrollbar(props: OverlayScrollbarsComponentProps) {
+  return (
+    <OverlayScrollbarsComponent
+      options={{ scrollbars: { autoHide: 'leave', autoHideDelay: 0 } }}
+      {...props}
+    />
+  );
+}
 
 export default OverlayScrollbar;

packages/console/src/components/Pagination/Next.tsx

@@ -1,4 +1,4 @@
-const Next = () => {
+function Next() {
   return (
     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -7,6 +7,6 @@ const Next = () => {
       />
     </svg>
   );
-};
+}
 
 export default Next;

packages/console/src/components/Pagination/Previous.tsx

@@ -1,4 +1,4 @@
-const Previous = () => {
+function Previous() {
   return (
     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -7,6 +7,6 @@ const Previous = () => {
       />
     </svg>
   );
-};
+}
 
 export default Previous;

packages/console/src/components/Pagination/index.tsx

@@ -19,14 +19,7 @@ export type Props = {
   onChange?: (pageIndex: number) => void;
 };
 
-const Pagination = ({
-  page,
-  totalCount,
-  pageSize,
-  className,
-  mode = 'normal',
-  onChange,
-}: Props) => {
+function Pagination({ page, totalCount, pageSize, className, mode = 'normal', onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   /**
@@ -77,6 +70,6 @@ const Pagination = ({
       />
     </div>
   );
-};
+}
 
 export default Pagination;

packages/console/src/components/PermissionsTable/index.tsx

@@ -44,7 +44,7 @@ type Props = {
   retryHandler: () => void;
 };
 
-const PermissionsTable = ({
+function PermissionsTable({
   scopes,
   isLoading,
   errorMessage,
@@ -58,7 +58,7 @@ const PermissionsTable = ({
   createHandler,
   deleteHandler,
   retryHandler,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { getDocumentationUrl } = useDocumentationUrl();
 
@@ -182,6 +182,6 @@ const PermissionsTable = ({
       onRetry={retryHandler}
     />
   );
-};
+}
 
 export default PermissionsTable;

packages/console/src/components/RadioGroup/Radio.tsx

@@ -7,14 +7,16 @@ import { useTranslation } from 'react-i18next';
 import type DangerousRaw from '../DangerousRaw';
 import * as styles from './Radio.module.scss';
 
-const Check = () => (
-  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M8.66666 1.33334C4.99999 1.33334 1.99999 4.33334 1.99999 8.00001C1.99999 11.6667 4.99999 14.6667 8.66666 14.6667C12.3333 14.6667 15.3333 11.6667 15.3333 8.00001C15.3333 4.33334 12.3333 1.33334 8.66666 1.33334ZM11.4667 6.86668L8.26666 10.0667C7.99999 10.3333 7.59999 10.3333 7.33333 10.0667L5.86666 8.60001C5.59999 8.33334 5.59999 7.93334 5.86666 7.66668C6.13333 7.40001 6.53333 7.40001 6.79999 7.66668L7.79999 8.66668L10.5333 5.93334C10.8 5.66668 11.2 5.66668 11.4667 5.93334C11.7333 6.20001 11.7333 6.60001 11.4667 6.86668Z"
-      fill="#5D34F2"
-    />
-  </svg>
-);
+function Check() {
+  return (
+    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.66666 1.33334C4.99999 1.33334 1.99999 4.33334 1.99999 8.00001C1.99999 11.6667 4.99999 14.6667 8.66666 14.6667C12.3333 14.6667 15.3333 11.6667 15.3333 8.00001C15.3333 4.33334 12.3333 1.33334 8.66666 1.33334ZM11.4667 6.86668L8.26666 10.0667C7.99999 10.3333 7.59999 10.3333 7.33333 10.0667L5.86666 8.60001C5.59999 8.33334 5.59999 7.93334 5.86666 7.66668C6.13333 7.40001 6.53333 7.40001 6.79999 7.66668L7.79999 8.66668L10.5333 5.93334C10.8 5.66668 11.2 5.66668 11.4667 5.93334C11.7333 6.20001 11.7333 6.60001 11.4667 6.86668Z"
+        fill="#5D34F2"
+      />
+    </svg>
+  );
+}
 
 export type Props = {
   className?: string;
@@ -31,7 +33,7 @@ export type Props = {
   icon?: ReactNode;
 };
 
-const Radio = ({
+function Radio({
   className,
   value,
   title,
@@ -44,7 +46,7 @@ const Radio = ({
   isDisabled,
   disabledLabel,
   icon,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const handleKeyPress: KeyboardEventHandler<HTMLDivElement> = useCallback(
@@ -95,6 +97,6 @@ const Radio = ({
       </div>
     </div>
   );
-};
+}
 
 export default Radio;

packages/console/src/components/RadioGroup/index.tsx

@@ -24,10 +24,10 @@ type Props = {
   onChange?: (value: string) => void;
 };
 
-const RadioGroup = (
+function RadioGroup(
   { name, children, value, className, onChange, type = 'plain' }: Props,
   ref?: Ref<HTMLDivElement>
-) => {
+) {
   return (
     <div ref={ref} className={classNames(styles.radioGroup, styles[type], className)}>
       {Children.map(children, (child) => {
@@ -56,7 +56,7 @@ const RadioGroup = (
       })}
     </div>
   );
-};
+}
 
 export default forwardRef<HTMLDivElement, Props>(RadioGroup);
 export { default as Radio } from './Radio';

packages/console/src/components/RequestDataError/index.tsx

@@ -17,7 +17,7 @@ type Props = {
   className?: string;
 };
 
-const RequestDataError = ({ error, onRetry, className }: Props) => {
+function RequestDataError({ error, onRetry, className }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
   const errorMessage = error.body?.message ?? error.message;
@@ -34,6 +34,6 @@ const RequestDataError = ({ error, onRetry, className }: Props) => {
       {onRetry && <Button title="general.retry" onClick={onRetry} />}
     </Card>
   );
-};
+}
 
 export default RequestDataError;

packages/console/src/components/RoleScopesTransfer/components/ResourceItem/index.tsx

@@ -20,7 +20,7 @@ type Props = {
   onSelectScope: (scope: ScopeResponse) => void;
 };
 
-const ResourceItem = ({ resource, selectedScopes, onSelectResource, onSelectScope }: Props) => {
+function ResourceItem({ resource, selectedScopes, onSelectResource, onSelectScope }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { name, scopes } = resource;
   const selectedScopesCount = selectedScopes.length;
@@ -69,6 +69,6 @@ const ResourceItem = ({ resource, selectedScopes, onSelectResource, onSelectScop
       </div>
     </div>
   );
-};
+}
 
 export default ResourceItem;

packages/console/src/components/RoleScopesTransfer/components/SourceScopeItem/index.tsx

@@ -11,28 +11,30 @@ type Props = {
   onSelect: (scope: ScopeResponse) => void;
 };
 
-const SourceScopeItem = ({ scope, scope: { name }, isSelected, onSelect }: Props) => (
-  <div className={styles.sourceScopeItem}>
-    <Checkbox
-      checked={isSelected}
-      onChange={() => {
-        onSelect(scope);
-      }}
-    />
-    <div
-      className={styles.name}
-      role="button"
-      tabIndex={0}
-      onKeyDown={onKeyDownHandler(() => {
-        onSelect(scope);
-      })}
-      onClick={() => {
-        onSelect(scope);
-      }}
-    >
-      {name}
+function SourceScopeItem({ scope, scope: { name }, isSelected, onSelect }: Props) {
+  return (
+    <div className={styles.sourceScopeItem}>
+      <Checkbox
+        checked={isSelected}
+        onChange={() => {
+          onSelect(scope);
+        }}
+      />
+      <div
+        className={styles.name}
+        role="button"
+        tabIndex={0}
+        onKeyDown={onKeyDownHandler(() => {
+          onSelect(scope);
+        })}
+        onClick={() => {
+          onSelect(scope);
+        }}
+      >
+        {name}
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
 export default SourceScopeItem;

packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.tsx

@@ -23,7 +23,7 @@ type Props = {
   onChange: (value: ScopeResponse[]) => void;
 };
 
-const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
+function SourceScopesBox({ roleId, selectedScopes, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const { data: allResources, error: fetchAllResourcesError } = useSWR<
@@ -154,6 +154,6 @@ const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default SourceScopesBox;

packages/console/src/components/RoleScopesTransfer/components/TargetScopeItem/index.tsx

@@ -10,7 +10,7 @@ export type Props = {
   onDelete: (scope: ScopeResponse) => void;
 };
 
-const TargetScopeItem = ({ scope, onDelete }: Props) => {
+function TargetScopeItem({ scope, onDelete }: Props) {
   const {
     name,
     resource: { name: resourceName },
@@ -33,6 +33,6 @@ const TargetScopeItem = ({ scope, onDelete }: Props) => {
       </IconButton>
     </div>
   );
-};
+}
 
 export default TargetScopeItem;

packages/console/src/components/RoleScopesTransfer/components/TargetScopesBox/index.tsx

@@ -11,7 +11,7 @@ type Props = {
   onChange: (value: ScopeResponse[]) => void;
 };
 
-const TargetScopesBox = ({ selectedScopes, onChange }: Props) => {
+function TargetScopesBox({ selectedScopes, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -34,6 +34,6 @@ const TargetScopesBox = ({ selectedScopes, onChange }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default TargetScopesBox;

packages/console/src/components/RoleScopesTransfer/index.tsx

@@ -13,12 +13,14 @@ type Props = {
   onChange: (value: ScopeResponse[]) => void;
 };
 
-const RoleScopesTransfer = ({ roleId, value, onChange }: Props) => (
-  <div className={classNames(transferLayout.container, styles.roleScopesTransfer)}>
-    <SourceScopesBox roleId={roleId} selectedScopes={value} onChange={onChange} />
-    <div className={transferLayout.verticalBar} />
-    <TargetScopesBox selectedScopes={value} onChange={onChange} />
-  </div>
-);
+function RoleScopesTransfer({ roleId, value, onChange }: Props) {
+  return (
+    <div className={classNames(transferLayout.container, styles.roleScopesTransfer)}>
+      <SourceScopesBox roleId={roleId} selectedScopes={value} onChange={onChange} />
+      <div className={transferLayout.verticalBar} />
+      <TargetScopesBox selectedScopes={value} onChange={onChange} />
+    </div>
+  );
+}
 
 export default RoleScopesTransfer;

packages/console/src/components/RoleUsersTransfer/components/SourceUserItem/index.tsx

@@ -13,7 +13,7 @@ type Props = {
   onSelect: () => void;
 };
 
-const SourceUserItem = ({ user, isSelected, onSelect }: Props) => {
+function SourceUserItem({ user, isSelected, onSelect }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -38,6 +38,6 @@ const SourceUserItem = ({ user, isSelected, onSelect }: Props) => {
       <div className={styles.name}>{user.name ?? t('users.unnamed')}</div>
     </div>
   );
-};
+}
 
 export default SourceUserItem;

packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx

@@ -27,7 +27,7 @@ type Props = {
 
 const pageSize = defaultPageSize;
 
-const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
+function SourceUsersBox({ roleId, selectedUsers, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [page, setPage] = useState(1);
   const [keyword, setKeyword] = useState('');
@@ -105,5 +105,5 @@ const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
       />
     </div>
   );
-};
+}
 export default SourceUsersBox;

packages/console/src/components/RoleUsersTransfer/components/TargetUserItem/index.tsx

@@ -12,7 +12,7 @@ type Props = {
   onDelete: () => void;
 };
 
-const TargetUserItem = ({ user, onDelete }: Props) => {
+function TargetUserItem({ user, onDelete }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -30,6 +30,6 @@ const TargetUserItem = ({ user, onDelete }: Props) => {
       </IconButton>
     </div>
   );
-};
+}
 
 export default TargetUserItem;

packages/console/src/components/RoleUsersTransfer/components/TargetUsersBox/index.tsx

@@ -11,7 +11,7 @@ type Props = {
   onChange: (value: User[]) => void;
 };
 
-const TargetUsersBox = ({ selectedUsers, onChange }: Props) => {
+function TargetUsersBox({ selectedUsers, onChange }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
@@ -35,6 +35,6 @@ const TargetUsersBox = ({ selectedUsers, onChange }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default TargetUsersBox;

packages/console/src/components/RoleUsersTransfer/index.tsx

@@ -13,12 +13,14 @@ type Props = {
   onChange: (value: User[]) => void;
 };
 
-const RoleUsersTransfer = ({ roleId, value, onChange }: Props) => (
-  <div className={classNames(transferLayout.container, styles.roleUsersTransfer)}>
-    <SourceUsersBox roleId={roleId} selectedUsers={value} onChange={onChange} />
-    <div className={transferLayout.verticalBar} />
-    <TargetUsersBox selectedUsers={value} onChange={onChange} />
-  </div>
-);
+function RoleUsersTransfer({ roleId, value, onChange }: Props) {
+  return (
+    <div className={classNames(transferLayout.container, styles.roleUsersTransfer)}>
+      <SourceUsersBox roleId={roleId} selectedUsers={value} onChange={onChange} />
+      <div className={transferLayout.verticalBar} />
+      <TargetUsersBox selectedUsers={value} onChange={onChange} />
+    </div>
+  );
+}
 
 export default RoleUsersTransfer;

packages/console/src/components/Search/index.tsx

@@ -17,14 +17,14 @@ type Props = {
   onClearSearch?: () => void;
 };
 
-const Search = ({
+function Search({
   defaultValue = '',
   isClearable = false,
   placeholder,
   inputClassName,
   onSearch,
   onClearSearch,
-}: Props) => {
+}: Props) {
   const [inputValue, setInputValue] = useState<string>(defaultValue);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -58,6 +58,6 @@ const Search = ({
       )}
     </div>
   );
-};
+}
 
 export default Search;

packages/console/src/components/Select/index.tsx

@@ -28,7 +28,7 @@ type Props<T> = {
   size?: 'small' | 'medium' | 'large';
 };
 
-const Select = <T extends string>({
+function Select<T extends string>({
   className,
   value,
   options,
@@ -38,7 +38,7 @@ const Select = <T extends string>({
   placeholder,
   isClearable,
   size = 'large',
-}: Props<T>) => {
+}: Props<T>) {
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef<HTMLInputElement>(null);
   const current = options.find((option) => value && option.value === value);
@@ -116,6 +116,6 @@ const Select = <T extends string>({
       </Dropdown>
     </>
   );
-};
+}
 
 export default Select;

packages/console/src/components/SessionExpired/index.tsx

@@ -10,7 +10,7 @@ type Props = {
   callbackHref?: string;
 };
 
-const SessionExpired = ({ callbackHref = '/callback', error }: Props) => {
+function SessionExpired({ callbackHref = '/callback', error }: Props) {
   const { signIn, signOut } = useLogto();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -31,6 +31,6 @@ const SessionExpired = ({ callbackHref = '/callback', error }: Props) => {
       />
     </AppError>
   );
-};
+}
 
 export default SessionExpired;

packages/console/src/components/SignInExperiencePreview/components/ToggleUiThemeButton/index.tsx

@@ -16,13 +16,13 @@ type Props = {
   size?: ButtonProps['size'];
 };
 
-const ToggleUiThemeButton = ({
+function ToggleUiThemeButton({
   value,
   onToggle,
   className,
   iconClassName,
   size = 'medium',
-}: Props) => {
+}: Props) {
   const ThemeIcon = value === Theme.Light ? Sun : Moon;
 
   return (
@@ -37,6 +37,6 @@ const ToggleUiThemeButton = ({
       />
     </div>
   );
-};
+}
 
 export default ToggleUiThemeButton;

packages/console/src/components/SignInExperiencePreview/index.tsx

@@ -25,7 +25,7 @@ type Props = {
   signInExperience?: SignInExperience;
 };
 
-const SignInExperiencePreview = ({ platform, mode, language = 'en', signInExperience }: Props) => {
+function SignInExperiencePreview({ platform, mode, language = 'en', signInExperience }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const { customPhrases } = useUiLanguages();
@@ -139,6 +139,6 @@ const SignInExperiencePreview = ({ platform, mode, language = 'en', signInExperi
       </div>
     </div>
   );
-};
+}
 
 export default SignInExperiencePreview;

packages/console/src/components/Spacer/index.tsx

@@ -1,7 +1,7 @@
 import * as styles from './index.module.scss';
 
-const Spacer = () => {
+function Spacer() {
   return <div className={styles.spacer} />;
-};
+}
 
 export default Spacer;

packages/console/src/components/Spinner/index.tsx

@@ -6,133 +6,137 @@ type Props = {
   className?: string;
 };
 
-const Ring = ({ className }: Props) => (
-  <svg
-    className={classNames(styles.ring, className)}
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M9.33566 14.8714C9.44104 15.4135 9.08652 15.9451 8.53547 15.9821C7.4048 16.0579 6.2669 15.8929 5.19834 15.4934C3.81639 14.9767 2.60425 14.0879 1.69591 12.9253C0.78758 11.7627 0.218443 10.3715 0.0514252 8.90563C-0.115592 7.43973 0.126015 5.9562 0.749537 4.61905C1.37306 3.28191 2.35421 2.14323 3.5845 1.32891C4.8148 0.514598 6.24632 0.0563637 7.7208 0.00487344C9.19528 -0.0466168 10.6553 0.310643 11.9394 1.03715C12.9323 1.59891 13.7901 2.36452 14.4588 3.27942C14.7847 3.72531 14.6054 4.33858 14.1223 4.60633C13.6393 4.87408 13.0366 4.69278 12.6924 4.26086C12.2154 3.66218 11.6262 3.15785 10.9545 2.77787C9.99146 2.23298 8.89646 1.96504 7.7906 2.00366C6.68474 2.04227 5.6111 2.38595 4.68838 2.99669C3.76565 3.60742 3.02979 4.46143 2.56215 5.46429C2.09451 6.46715 1.91331 7.5798 2.03857 8.67922C2.16383 9.77864 2.59069 10.822 3.27194 11.694C3.95319 12.5659 4.8623 13.2325 5.89876 13.62C6.62154 13.8903 7.38663 14.0175 8.15188 13.9981C8.70399 13.9841 9.23028 14.3293 9.33566 14.8714Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+function Ring({ className }: Props) {
+  return (
+    <svg
+      className={classNames(styles.ring, className)}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.33566 14.8714C9.44104 15.4135 9.08652 15.9451 8.53547 15.9821C7.4048 16.0579 6.2669 15.8929 5.19834 15.4934C3.81639 14.9767 2.60425 14.0879 1.69591 12.9253C0.78758 11.7627 0.218443 10.3715 0.0514252 8.90563C-0.115592 7.43973 0.126015 5.9562 0.749537 4.61905C1.37306 3.28191 2.35421 2.14323 3.5845 1.32891C4.8148 0.514598 6.24632 0.0563637 7.7208 0.00487344C9.19528 -0.0466168 10.6553 0.310643 11.9394 1.03715C12.9323 1.59891 13.7901 2.36452 14.4588 3.27942C14.7847 3.72531 14.6054 4.33858 14.1223 4.60633C13.6393 4.87408 13.0366 4.69278 12.6924 4.26086C12.2154 3.66218 11.6262 3.15785 10.9545 2.77787C9.99146 2.23298 8.89646 1.96504 7.7906 2.00366C6.68474 2.04227 5.6111 2.38595 4.68838 2.99669C3.76565 3.60742 3.02979 4.46143 2.56215 5.46429C2.09451 6.46715 1.91331 7.5798 2.03857 8.67922C2.16383 9.77864 2.59069 10.822 3.27194 11.694C3.95319 12.5659 4.8623 13.2325 5.89876 13.62C6.62154 13.8903 7.38663 14.0175 8.15188 13.9981C8.70399 13.9841 9.23028 14.3293 9.33566 14.8714Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
 
-const Daisy = ({ className }: Props) => (
-  <svg
-    className={classNames(styles.daisy, className)}
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect opacity="0.48" x="15" width="2" height="8" rx="1" fill="currentColor" />
-    <rect opacity="0.96" x="15" y="24" width="2" height="8" rx="1" fill="currentColor" />
-    <rect
-      opacity="0.72"
-      y="17"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-90 0 17)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.24"
-      x="24"
-      y="17"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-90 24 17)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.32"
-      x="29.3564"
-      y="7.13403"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(60 29.3564 7.13403)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.8"
-      x="8.57227"
-      y="19.134"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(60 8.57227 19.134)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.64"
-      x="1.64355"
-      y="8.86597"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-60 1.64355 8.86597)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.16"
-      x="22.4277"
-      y="20.866"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-60 22.4277 20.866)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.4"
-      x="23.1338"
-      y="1.64355"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(30 23.1338 1.64355)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.88"
-      x="11.1338"
-      y="22.4282"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(30 11.1338 22.4282)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.56"
-      x="7.13379"
-      y="2.64355"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-30 7.13379 2.64355)"
-      fill="currentColor"
-    />
-    <rect
-      opacity="0.08"
-      x="19.1338"
-      y="23.4282"
-      width="2"
-      height="8"
-      rx="1"
-      transform="rotate(-30 19.1338 23.4282)"
-      fill="currentColor"
-    />
-  </svg>
-);
+function Daisy({ className }: Props) {
+  return (
+    <svg
+      className={classNames(styles.daisy, className)}
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect opacity="0.48" x="15" width="2" height="8" rx="1" fill="currentColor" />
+      <rect opacity="0.96" x="15" y="24" width="2" height="8" rx="1" fill="currentColor" />
+      <rect
+        opacity="0.72"
+        y="17"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-90 0 17)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.24"
+        x="24"
+        y="17"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-90 24 17)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.32"
+        x="29.3564"
+        y="7.13403"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(60 29.3564 7.13403)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.8"
+        x="8.57227"
+        y="19.134"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(60 8.57227 19.134)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.64"
+        x="1.64355"
+        y="8.86597"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-60 1.64355 8.86597)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.16"
+        x="22.4277"
+        y="20.866"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-60 22.4277 20.866)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.4"
+        x="23.1338"
+        y="1.64355"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(30 23.1338 1.64355)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.88"
+        x="11.1338"
+        y="22.4282"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(30 11.1338 22.4282)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.56"
+        x="7.13379"
+        y="2.64355"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-30 7.13379 2.64355)"
+        fill="currentColor"
+      />
+      <rect
+        opacity="0.08"
+        x="19.1338"
+        y="23.4282"
+        width="2"
+        height="8"
+        rx="1"
+        transform="rotate(-30 19.1338 23.4282)"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
 
 export { Ring, Daisy };

packages/console/src/components/Status/index.tsx

@@ -9,11 +9,13 @@ type Props = {
   variant?: 'plain' | 'outlined';
 };
 
-const Status = ({ status, children, variant = 'plain' }: Props) => (
-  <div className={classNames(styles.status, styles[status], styles[variant])}>
-    <div className={styles.icon} />
-    <div>{children}</div>
-  </div>
-);
+function Status({ status, children, variant = 'plain' }: Props) {
+  return (
+    <div className={classNames(styles.status, styles[status], styles[variant])}>
+      <div className={styles.icon} />
+      <div>{children}</div>
+    </div>
+  );
+}
 
 export default Status;

packages/console/src/components/SubmitFormChangesActionBar/index.tsx

@@ -10,26 +10,28 @@ type Props = {
   onDiscard: () => void;
 };
 
-const SubmitFormChangesActionBar = ({ isOpen, isSubmitting, onSubmit, onDiscard }: Props) => (
-  <div className={classNames(styles.container, isOpen && styles.active)}>
-    <div className={styles.actionBar}>
-      <Button
-        size="medium"
-        title="general.discard"
-        disabled={isSubmitting}
-        onClick={() => {
-          onDiscard();
-        }}
-      />
-      <Button
-        isLoading={isSubmitting}
-        type="primary"
-        size="medium"
-        title="general.save_changes"
-        onClick={async () => onSubmit()}
-      />
+function SubmitFormChangesActionBar({ isOpen, isSubmitting, onSubmit, onDiscard }: Props) {
+  return (
+    <div className={classNames(styles.container, isOpen && styles.active)}>
+      <div className={styles.actionBar}>
+        <Button
+          size="medium"
+          title="general.discard"
+          disabled={isSubmitting}
+          onClick={() => {
+            onDiscard();
+          }}
+        />
+        <Button
+          isLoading={isSubmitting}
+          type="primary"
+          size="medium"
+          title="general.save_changes"
+          onClick={async () => onSubmit()}
+        />
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
 export default SubmitFormChangesActionBar;

packages/console/src/components/Switch/index.tsx

@@ -7,7 +7,7 @@ type Props = HTMLProps<HTMLInputElement> & {
   label?: ReactNode;
 };
 
-const Switch = ({ label, ...rest }: Props, ref?: Ref<HTMLInputElement>) => {
+function Switch({ label, ...rest }: Props, ref?: Ref<HTMLInputElement>) {
   return (
     <div className={styles.wrapper}>
       <div className={styles.label}>{label}</div>
@@ -17,6 +17,6 @@ const Switch = ({ label, ...rest }: Props, ref?: Ref<HTMLInputElement>) => {
       </label>
     </div>
   );
-};
+}
 
 export default forwardRef<HTMLInputElement, Props>(Switch);

packages/console/src/components/TabNav/TabNavItem.tsx

@@ -24,7 +24,7 @@ type Props =
   | (BaseProps & LinkStyleProps & Partial<Record<keyof TabStyleProps, undefined>>)
   | (BaseProps & TabStyleProps & Partial<Record<keyof LinkStyleProps, undefined>>);
 
-const TabNavItem = ({ children, href, isActive, errorCount = 0, onClick }: Props) => {
+function TabNavItem({ children, href, isActive, errorCount = 0, onClick }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const location = useLocation();
   const selected = href ? location.pathname === href : isActive;
@@ -46,6 +46,6 @@ const TabNavItem = ({ children, href, isActive, errorCount = 0, onClick }: Props
       )}
     </div>
   );
-};
+}
 
 export default TabNavItem;

packages/console/src/components/TabNav/index.tsx

@@ -9,8 +9,8 @@ type Props = {
   children: React.ReactNode;
 };
 
-const TabNav = ({ className, children }: Props) => (
-  <nav className={classNames(styles.nav, className)}>{children}</nav>
-);
+function TabNav({ className, children }: Props) {
+  return <nav className={classNames(styles.nav, className)}>{children}</nav>;
+}
 
 export default TabNav;

packages/console/src/components/Table/TableEmptyWrapper.tsx

@@ -7,12 +7,14 @@ type Props = {
   children: ReactNode;
 };
 
-const TableEmptyWrapper = ({ columns, children }: Props) => (
-  <tr>
-    <td colSpan={columns} className={styles.tableEmptyWrapper}>
-      <div className={styles.content}>{children}</div>
-    </td>
-  </tr>
-);
+function TableEmptyWrapper({ columns, children }: Props) {
+  return (
+    <tr>
+      <td colSpan={columns} className={styles.tableEmptyWrapper}>
+        <div className={styles.content}>{children}</div>
+      </td>
+    </tr>
+  );
+}
 
 export default TableEmptyWrapper;

packages/console/src/components/Table/TableError.tsx

@@ -15,7 +15,7 @@ type Props = {
   columns: number;
 };
 
-const TableError = ({ title, content, onRetry, columns }: Props) => {
+function TableError({ title, content, onRetry, columns }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
 
@@ -31,6 +31,6 @@ const TableError = ({ title, content, onRetry, columns }: Props) => {
       </td>
     </tr>
   );
-};
+}
 
 export default TableError;

packages/console/src/components/Table/TableLoading.tsx

@@ -4,7 +4,7 @@ type Props = {
   columnSpans: number[];
 };
 
-const TableLoading = ({ columnSpans }: Props) => {
+function TableLoading({ columnSpans }: Props) {
   return (
     <>
       {Array.from({ length: 8 }).map((_, rowIndex) => (
@@ -29,6 +29,6 @@ const TableLoading = ({ columnSpans }: Props) => {
       ))}
     </>
   );
-};
+}
 
 export default TableLoading;

packages/console/src/components/Table/TablePlaceholder.tsx

@@ -17,14 +17,7 @@ type Props = {
   action: ReactNode;
 };
 
-const TablePlaceholder = ({
-  image,
-  imageDark,
-  title,
-  description,
-  learnMoreLink,
-  action,
-}: Props) => {
+function TablePlaceholder({ image, imageDark, title, description, learnMoreLink, action }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const theme = useTheme();
 
@@ -46,6 +39,6 @@ const TablePlaceholder = ({
       {action && <div className={styles.action}>{action}</div>}
     </div>
   );
-};
+}
 
 export default TablePlaceholder;

packages/console/src/components/Table/index.tsx

@@ -36,7 +36,7 @@ type Props<
   onRetry?: () => void;
 };
 
-const Table = <
+function Table<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
@@ -56,7 +56,7 @@ const Table = <
   errorMessage,
   hasBorder,
   onRetry,
-}: Props<TFieldValues, TName>) => {
+}: Props<TFieldValues, TName>) {
   const totalColspan = columns.reduce((result, { colSpan }) => {
     return result + (colSpan ?? 1);
   }, 0);
@@ -152,6 +152,6 @@ const Table = <
       {pagination && <Pagination className={styles.pagination} {...pagination} />}
     </div>
   );
-};
+}
 
 export default Table;

packages/console/src/components/TextInput/index.tsx

@@ -11,7 +11,7 @@ type Props = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
   suffix?: ReactElement;
 };
 
-const TextInput = (
+function TextInput(
   {
     errorMessage,
     hasError = Boolean(errorMessage),
@@ -23,7 +23,7 @@ const TextInput = (
     ...rest
   }: Props,
   reference: ForwardedRef<HTMLInputElement>
-) => {
+) {
   return (
     <div className={className}>
       <div
@@ -45,6 +45,6 @@ const TextInput = (
       {hasError && errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
     </div>
   );
-};
+}
 
 export default forwardRef(TextInput);

packages/console/src/components/TextLink/index.tsx

@@ -11,7 +11,7 @@ type Props = AnchorHTMLAttributes<HTMLAnchorElement> &
     isTrailingIcon?: boolean;
   };
 
-const TextLink = ({ to, children, icon, isTrailingIcon = false, className, ...rest }: Props) => {
+function TextLink({ to, children, icon, isTrailingIcon = false, className, ...rest }: Props) {
   if (to) {
     return (
       <Link
@@ -36,6 +36,6 @@ const TextLink = ({ to, children, icon, isTrailingIcon = false, className, ...re
       <>{children}</>
     </a>
   );
-};
+}
 
 export default TextLink;

packages/console/src/components/Textarea/index.tsx

@@ -9,15 +9,15 @@ type Props = HTMLProps<HTMLTextAreaElement> & {
   hasError?: boolean;
 };
 
-const Textarea = (
+function Textarea(
   { className, hasError, ...rest }: Props,
   reference: ForwardedRef<HTMLTextAreaElement>
-) => {
+) {
   return (
     <div className={classNames(styles.container, hasError && styles.error, className)}>
       <textarea {...rest} ref={reference} />
     </div>
   );
-};
+}
 
 export default forwardRef(Textarea);

packages/console/src/components/Tip/TipBubble/index.tsx

@@ -21,7 +21,7 @@ type Props = HTMLProps<HTMLDivElement> & {
 
 const supportHorizontalAlignmentPlacements = new Set<TipBubblePlacement>(['top', 'bottom']);
 
-const TipBubble = (
+function TipBubble(
   {
     children,
     position,
@@ -33,7 +33,7 @@ const TipBubble = (
     ...rest
   }: Props,
   reference: ForwardedRef<HTMLDivElement>
-) => {
+) {
   if (!anchorRef.current) {
     return null;
   }
@@ -64,6 +64,6 @@ const TipBubble = (
       <div className={styles.arrow} style={{ ...arrowPosition }} />
     </div>
   );
-};
+}
 
 export default forwardRef(TipBubble);

packages/console/src/components/Tip/ToggleTip/index.tsx

@@ -25,14 +25,14 @@ export type Props = {
   content?: ((closeTip: () => void) => ReactNode) | ReactNode;
 };
 
-const ToggleTip = ({
+function ToggleTip({
   children,
   className,
   anchorClassName,
   placement = 'top',
   horizontalAlign = 'center',
   content,
-}: Props) => {
+}: Props) {
   const tipBubbleRef = useRef<HTMLDivElement>(null);
   const anchorRef = useRef<HTMLDivElement>(null);
 
@@ -95,6 +95,6 @@ const ToggleTip = ({
       </ReactModal>
     </>
   );
-};
+}
 
 export default ToggleTip;

packages/console/src/components/Tip/Tooltip/index.tsx

@@ -27,7 +27,7 @@ type Props = {
   content?: ReactNode;
 };
 
-const Tooltip = ({
+function Tooltip({
   className,
   isKeepOpen = false,
   isSuccessful = false,
@@ -36,7 +36,7 @@ const Tooltip = ({
   anchorClassName,
   children,
   content,
-}: Props) => {
+}: Props) {
   const [tooltipDom, setTooltipDom] = useState<HTMLDivElement>();
   const anchorRef = useRef<HTMLDivElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
@@ -146,6 +146,6 @@ const Tooltip = ({
         )}
     </>
   );
-};
+}
 
 export default Tooltip;

packages/console/src/components/Toast/index.tsx

@@ -6,7 +6,7 @@ import Success from '@/assets/images/toast-success.svg';
 
 import * as styles from './index.module.scss';
 
-const Toast = () => {
+function Toast() {
   return (
     <Toaster
       toastOptions={{
@@ -31,6 +31,6 @@ const Toast = () => {
       )}
     </Toaster>
   );
-};
+}
 
 export default Toast;

packages/console/src/components/UnnamedTrans/index.tsx

@@ -5,7 +5,7 @@ type Props = {
   className?: string;
 };
 
-const UnnamedTrans = ({ resource, className }: Props) => {
+function UnnamedTrans({ resource, className }: Props) {
   const {
     i18n: { languages },
   } = useTranslation();
@@ -16,6 +16,6 @@ const UnnamedTrans = ({ resource, className }: Props) => {
   }
 
   return <span className={className}>{resource[matchedLanguage]}</span>;
-};
+}
 
 export default UnnamedTrans;

packages/console/src/components/UnsavedChangesAlertModal/index.tsx

@@ -23,7 +23,7 @@ type Props = {
   parentPath?: string;
 };
 
-const UnsavedChangesAlertModal = ({ hasUnsavedChanges, parentPath }: Props) => {
+function UnsavedChangesAlertModal({ hasUnsavedChanges, parentPath }: Props) {
   const { navigator } = useContext(UNSAFE_NavigationContext);
 
   /**
@@ -96,6 +96,6 @@ const UnsavedChangesAlertModal = ({ hasUnsavedChanges, parentPath }: Props) => {
       {t('general.unsaved_changes_warning')}
     </ConfirmModal>
   );
-};
+}
 
 export default UnsavedChangesAlertModal;

packages/console/src/components/Uploader/FileUploader/index.tsx

@@ -20,13 +20,13 @@ export type Props = {
   onUploadErrorChange: (errorMessage?: string) => void;
 };
 
-const FileUploader = ({
+function FileUploader({
   maxSize,
   allowedMimeTypes,
   actionDescription,
   onCompleted,
   onUploadErrorChange,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [isUploading, setIsUploading] = useState(false);
   const [uploadError, setUploadError] = useState<string>();
@@ -119,6 +119,6 @@ const FileUploader = ({
       </div>
     </div>
   );
-};
+}
 
 export default FileUploader;

packages/console/src/components/Uploader/ImageUploader/index.tsx

@@ -22,8 +22,8 @@ export type Props = Omit<FileUploaderProps, 'maxSize' | 'allowedMimeTypes'> & {
   onDelete: () => void;
 };
 
-const ImageUploader = ({ name, value, onDelete, ...rest }: Props) =>
-  value ? (
+function ImageUploader({ name, value, onDelete, ...rest }: Props) {
+  return value ? (
     <div className={styles.imageUploader}>
       <img alt={name} src={value} />
       <IconButton
@@ -38,5 +38,6 @@ const ImageUploader = ({ name, value, onDelete, ...rest }: Props) =>
   ) : (
     <FileUploader allowedMimeTypes={allowedImageMimeTypes} maxSize={maxImageSizeLimit} {...rest} />
   );
+}
 
 export default ImageUploader;

packages/console/src/components/Uploader/ImageUploaderField/index.tsx

@@ -12,7 +12,7 @@ type Props = Pick<ImageUploaderProps, 'name' | 'value' | 'actionDescription'> &
   onChange: (value: string) => void;
 };
 
-const ImageUploaderField = ({ onChange, ...rest }: Props) => {
+function ImageUploaderField({ onChange, ...rest }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const limitDescription = t('components.uploader.image_limit', {
@@ -37,6 +37,6 @@ const ImageUploaderField = ({ onChange, ...rest }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default ImageUploaderField;

packages/console/src/components/UserAccountInformation/index.tsx

@@ -22,7 +22,7 @@ type Props = {
   confirmButtonTitle?: AdminConsoleKey;
 };
 
-const UserAccountInformation = ({
+function UserAccountInformation({
   username,
   password,
   title,
@@ -30,7 +30,7 @@ const UserAccountInformation = ({
   onConfirm,
   passwordLabel,
   confirmButtonTitle,
-}: Props) => {
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [passwordVisible, setPasswordVisible] = useState(false);
 
@@ -94,6 +94,6 @@ const UserAccountInformation = ({
       </ModalLayout>
     </ReactModal>
   );
-};
+}
 
 export default UserAccountInformation;