chore: fix code style issues (#4857)

packages/frontend/component/src/components/notification-center/index.jotai.ts

@@ -9,7 +9,7 @@ export type Notification = {
   theme?: 'light' | 'dark' | 'default';
   timeout?: number;
   progressingBar?: boolean;
-  multimedia?: React.ReactNode | JSX.Element | HTMLElement;
+  multimedia?: React.ReactNode | JSX.Element;
   // actions
   undo?: () => Promise<void>;
 };

packages/frontend/component/src/components/notification-center/index.tsx

@@ -7,7 +7,7 @@ import * as Toast from '@radix-ui/react-toast';
 import { IconButton } from '@toeverything/components/button';
 import clsx from 'clsx';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import type { ReactElement } from 'react';
+import type { ReactNode } from 'react';
 import {
   useCallback,
   useEffect,
@@ -70,7 +70,7 @@ const typeColorMap = {
   },
 };
 
-function NotificationCard(props: NotificationCardProps): ReactElement {
+function NotificationCard(props: NotificationCardProps): ReactNode {
   const removeNotification = useSetAtom(removeNotificationAtom);
   const { notification, notifications, setHeights, heights, index } = props;
 
@@ -270,7 +270,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
       >
         {notification.multimedia ? (
           <div className={styles.notificationMultimediaStyle}>
-            <>{notification.multimedia}</>
+            {notification.multimedia}
             <IconButton className={styles.closeButtonWithMediaStyle}>
               <CloseIcon onClick={onClickRemove} />
             </IconButton>
@@ -373,7 +373,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
   );
 }
 
-export function NotificationCenter(): ReactElement {
+export function NotificationCenter(): ReactNode {
   const notifications = useAtomValue(notificationsAtom);
   const [expand, setExpand] = useAtom(expandNotificationCenterAtom);
 
@@ -390,7 +390,7 @@ export function NotificationCenter(): ReactElement {
     }
   }, [notifications, setExpand]);
 
-  if (!notifications.length) return <></>;
+  if (!notifications.length) return null;
   return (
     <Toast.Provider swipeDirection="right">
       {notifications.map((notification, index) =>

packages/frontend/component/src/components/page-list/operation-menu-items/export.tsx

@@ -97,7 +97,7 @@ export const ExportMenuItems = ({
   const items = itemMap.map(({ component: Component, props }) => (
     <Component key={props.label} {...props} />
   ));
-  return <>{items}</>;
+  return items;
 };
 
 export const Export = ({ exportHandler, className }: ExportProps) => {

packages/frontend/component/src/components/provider-composer/__tests__/provider-composer.spec.tsx

@@ -15,7 +15,7 @@ test('ProviderComposer', async () => {
   };
   const ConsumerComponent = () => {
     const value = useContext(Context);
-    return <>{value}</>;
+    return value;
   };
   const Component = () => {
     return (

packages/frontend/component/src/components/share-menu/share-page.tsx

@@ -38,30 +38,25 @@ export const LocalSharePage = (props: ShareMenuProps) => {
   const t = useAFFiNEI18N();
 
   return (
-    <>
-      <div className={styles.localSharePage}>
-        <div className={styles.columnContainerStyle} style={{ gap: '12px' }}>
-          <div
-            className={styles.descriptionStyle}
-            style={{ maxWidth: '230px' }}
-          >
-            {t['com.affine.share-menu.EnableCloudDescription']()}
-          </div>
-          <div>
-            <Button
-              onClick={props.onEnableAffineCloud}
-              type="primary"
-              data-testid="share-menu-enable-affine-cloud-button"
-            >
-              {t['Enable AFFiNE Cloud']()}
-            </Button>
-          </div>
+    <div className={styles.localSharePage}>
+      <div className={styles.columnContainerStyle} style={{ gap: '12px' }}>
+        <div className={styles.descriptionStyle} style={{ maxWidth: '230px' }}>
+          {t['com.affine.share-menu.EnableCloudDescription']()}
         </div>
-        <div className={styles.cloudSvgContainer}>
-          <CloudSvg />
+        <div>
+          <Button
+            onClick={props.onEnableAffineCloud}
+            type="primary"
+            data-testid="share-menu-enable-affine-cloud-button"
+          >
+            {t['Enable AFFiNE Cloud']()}
+          </Button>
         </div>
       </div>
-    </>
+      <div className={styles.cloudSvgContainer}>
+        <CloudSvg />
+      </div>
+    </div>
   );
 };
 
@@ -218,11 +213,7 @@ export const SharePage = (props: ShareMenuProps) => {
   if (props.workspace.flavour === WorkspaceFlavour.LOCAL) {
     return <LocalSharePage {...props} />;
   } else if (props.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD) {
-    return (
-      <>
-        <AffineSharePage {...props} />
-      </>
-    );
+    return <AffineSharePage {...props} />;
   }
   throw new Error('Unreachable');
 };

packages/frontend/component/src/components/workspace-list/index.tsx

@@ -121,7 +121,7 @@ export const WorkspaceList = (props: WorkspaceListProps) => {
       <SortableContext items={optimisticList}>
         {optimisticList.map(item => (
           <Suspense fallback={<WorkspaceCardSkeleton />} key={item.id}>
-            <SortableWorkspaceItem {...props} item={item} key={item.id} />
+            <SortableWorkspaceItem key={item.id} {...props} item={item} />
           </Suspense>
         ))}
       </SortableContext>