chore: fix code style issues (#4857)

packages/common/infra/vite.config.ts

@@ -22,7 +22,6 @@ export default defineConfig({
           root,
           'src/__internal__/workspace.ts'
         ),
-        '__internal__/react': resolve(root, 'src/__internal__/react.ts'),
         '__internal__/plugin': resolve(root, 'src/__internal__/plugin.ts'),
       },
       formats: ['es', 'cjs'],

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,13 +38,9 @@ export const LocalSharePage = (props: ShareMenuProps) => {
   const t = useAFFiNEI18N();
 
   return (
-    <>
     <div className={styles.localSharePage}>
       <div className={styles.columnContainerStyle} style={{ gap: '12px' }}>
-          <div
+        <div className={styles.descriptionStyle} style={{ maxWidth: '230px' }}>
-            className={styles.descriptionStyle}
-            style={{ maxWidth: '230px' }}
-          >
           {t['com.affine.share-menu.EnableCloudDescription']()}
         </div>
         <div>
@@ -61,7 +57,6 @@ export const LocalSharePage = (props: ShareMenuProps) => {
         <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 (
+    return <AffineSharePage {...props} />;
-      <>
-        <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>

packages/frontend/component/src/ui/popper/popper.tsx

@@ -171,8 +171,7 @@ export const Popper = ({
                   }}
                 >
                   {showArrow ? (
-                    <>
+                    placement.indexOf('bottom') === 0 ? (
-                      {placement.indexOf('bottom') === 0 ? (
                       <div
                         style={{
                           display: 'flex',
@@ -270,10 +269,9 @@ export const Popper = ({
                           />
                         </svg>
                       </div>
-                      )}
+                    )
-                    </>
                   ) : (
-                    <>{content}</>
+                    content
                   )}
                 </div>
               </Grow>

packages/frontend/component/src/ui/tree-view/tree-node-inner.tsx

@@ -76,9 +76,7 @@ export const TreeNodeItem = <RenderProps,>({
   disableCollapse,
   allowDrop = true,
 }: TreeNodeItemProps<RenderProps>) => {
-  return (
+  return node.render?.(node, {
-    <>
-      {node.render?.(node, {
     isOver: isOver && allowDrop,
     onAdd: () => onAdd?.(node.id),
     onDelete: () => onDelete?.(node.id),
@@ -86,7 +84,5 @@ export const TreeNodeItem = <RenderProps,>({
     setCollapsed,
     isSelected: selectedId === node.id,
     disableCollapse,
-      })}
+  });
-    </>
-  );
 };

packages/frontend/core/src/adapters/cloud/ui.tsx

@@ -48,14 +48,12 @@ export const UI = {
     );
 
     return (
-      <>
       <PageDetailEditor
         pageId={currentPageId}
         onInit={useCallback(async page => initEmptyPage(page), [])}
         onLoad={onLoad}
         workspace={workspace.blockSuiteWorkspace}
       />
-      </>
     );
   },
   NewSettingsDetail: ({

packages/frontend/core/src/adapters/local/index.tsx

@@ -92,14 +92,12 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
         throw new PageNotFoundError(workspace, currentPageId);
       }
       return (
-        <>
         <PageDetailEditor
           pageId={currentPageId}
           onInit={useCallback(async page => initEmptyPage(page), [])}
           onLoad={onLoadEditor}
           workspace={workspace}
         />
-        </>
       );
     },
     NewSettingsDetail: ({

packages/frontend/core/src/adapters/public-cloud/ui.tsx

@@ -16,14 +16,12 @@ export const UI = {
       throw new PageNotFoundError(workspace.blockSuiteWorkspace, currentPageId);
     }
     return (
-      <>
       <PageDetailEditor
         pageId={currentPageId}
         onInit={useCallback(async page => initEmptyPage(page), [])}
         onLoad={onLoadEditor}
         workspace={workspace.blockSuiteWorkspace}
       />
-      </>
     );
   },
   NewSettingsDetail: () => {

packages/frontend/core/src/components/affine/auth/use-captcha.tsx

@@ -43,7 +43,7 @@ export const Captcha = () => {
   const [response] = useAtom(responseAtom);
 
   if (!runtimeConfig.enableCaptcha) {
-    return <></>;
+    return null;
   }
 
   if (environment.isDesktop) {

packages/frontend/core/src/components/affine/auth/user-plan-button.tsx

@@ -2,7 +2,7 @@ import { SubscriptionPlan } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import Tooltip from '@toeverything/components/tooltip';
 import { useSetAtom } from 'jotai';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { withErrorBoundary } from 'react-error-boundary';
 
 import { openSettingModalAtom } from '../../../atoms';
@@ -39,5 +39,5 @@ const UserPlanButtonWithData = () => {
 
 // If fetch user data failed, just render empty.
 export const UserPlanButton = withErrorBoundary(UserPlanButtonWithData, {
-  fallbackRender: () => <React.Fragment />,
+  fallbackRender: () => null,
 });

packages/frontend/core/src/components/affine/new-workspace-setting-detail/export.tsx

@@ -86,7 +86,6 @@ export const ExportPanel = ({ workspace }: ExportPanelProps) => {
   }, [pushNotification, syncing, t, workspace, workspaceId]);
 
   return (
-    <>
     <SettingRow name={t['Export']()} desc={t['Export Description']()}>
       <Button
         data-testid="export-affine-backup"
@@ -96,6 +95,5 @@ export const ExportPanel = ({ workspace }: ExportPanelProps) => {
         {t['Export']()}
       </Button>
     </SettingRow>
-    </>
   );
 };

packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx

@@ -121,7 +121,6 @@ export const AvatarAndName = () => {
   }, [allowUpdate, input, user]);
 
   return (
-    <>
     <SettingRow
       name={t['com.affine.settings.profile']()}
       desc={t['com.affine.settings.profile.message']()}
@@ -162,7 +161,6 @@ export const AvatarAndName = () => {
         </div>
       </FlexWrapper>
     </SettingRow>
-    </>
   );
 };
 

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx

@@ -9,7 +9,7 @@ import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useQuery } from '@affine/workspace/affine/gql';
 import { useSetAtom } from 'jotai';
-import React, { Suspense, useEffect, useRef, useState } from 'react';
+import { Suspense, useEffect, useRef, useState } from 'react';
 import type { FallbackProps } from 'react-error-boundary';
 
 import { SWRErrorBoundary } from '../../../../../components/pure/swr-error-bundary';
@@ -205,9 +205,9 @@ const PlansErrorBoundary = ({ resetErrorBoundary }: FallbackProps) => {
   const t = useAFFiNEI18N();
 
   const title = t['com.affine.payment.title']();
-  const subtitle = <React.Fragment />;
+  const subtitle = '';
-  const tabs = <React.Fragment />;
+  const tabs = '';
-  const footer = <React.Fragment />;
+  const footer = '';
 
   const scroll = (
     <div className={styles.errorTip}>

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx

@@ -406,7 +406,6 @@ const Upgrade = ({
   }, [onClose]);
 
   return (
-    <>
     <Button
       className={styles.planAction}
       type="primary"
@@ -416,7 +415,6 @@ const Upgrade = ({
     >
       {t['com.affine.payment.upgrade']()}
     </Button>
-    </>
   );
 };
 

packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx

@@ -218,7 +218,6 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
     return null;
   }
   return (
-    <>
     <FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
       <Menu
         items={EditMenu}
@@ -229,6 +228,5 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
         <HeaderDropDownButton />
       </Menu>
     </FlexWrapper>
-    </>
   );
 };

packages/frontend/core/src/components/cloud/provider.tsx

@@ -2,7 +2,7 @@ import { pushNotificationAtom } from '@affine/component/notification-center';
 import { assertExists } from '@blocksuite/global/utils';
 import { GraphQLError } from 'graphql';
 import { useSetAtom } from 'jotai';
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import { useCallback } from 'react';
 import type { SWRConfiguration } from 'swr';
 import { SWRConfig } from 'swr';
@@ -49,9 +49,9 @@ const cloudConfig: SWRConfiguration = {
   ],
 };
 
-export const Provider = (props: PropsWithChildren): ReactElement => {
+export const Provider = (props: PropsWithChildren): ReactNode => {
   if (!runtimeConfig.enableCloud) {
-    return <>{props.children}</>;
+    return props.children;
   }
 
   return <SWRConfig value={cloudConfig}>{props.children}</SWRConfig>;

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -328,10 +328,8 @@ export const PageDetailEditor = (props: PageDetailEditorProps) => {
   }
 
   return (
-    <>
     <Suspense>
       <LayoutPanel node={layout} editorProps={props} depth={0} />
     </Suspense>
-    </>
   );
 };

packages/frontend/core/src/components/pure/footer/index.tsx

@@ -49,9 +49,7 @@ export const WorkspaceAvatar = forwardRef<HTMLDivElement, WorkspaceAvatarProps>(
     const size = props.size || 20;
     const sizeStr = size + 'px';
 
-    return (
+    return props.avatar ? (
-      <>
-        {props.avatar ? (
       <div
         style={{
           ...props.style,
@@ -94,8 +92,6 @@ export const WorkspaceAvatar = forwardRef<HTMLDivElement, WorkspaceAvatarProps>(
       >
         {(props.name || 'AFFiNE').substring(0, 1)}
       </div>
-        )}
-      </>
     );
   }
 );

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -170,7 +170,6 @@ export const RootAppSidebar = ({
   useRegisterBlocksuiteEditorCommands(router.back, router.forward);
   const userInfo = useDeleteCollectionInfo();
   return (
-    <>
     <AppSidebar
       router={router}
       hasBackground={
@@ -193,9 +192,7 @@ export const RootAppSidebar = ({
           rootOptions={{
             open: openUserWorkspaceList,
           }}
-            items={
+          items={<UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />}
-              <UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
-            }
           contentOptions={{
             // hide trigger
             sideOffset: -58,
@@ -273,6 +270,5 @@ export const RootAppSidebar = ({
         <AddPageButton onClick={onClickNewPage} />
       </SidebarContainer>
     </AppSidebar>
-    </>
   );
 };

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -34,7 +34,7 @@ import { loadPage } from '@toeverything/hooks/use-block-suite-workspace-page';
 import { currentWorkspaceIdAtom } from '@toeverything/infra/atom';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { nanoid } from 'nanoid';
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import { lazy, Suspense, useCallback, useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { Map as YMap } from 'yjs';
@@ -101,7 +101,7 @@ const showList: IslandItemNames[] = environment.isDesktop
 
 export const CurrentWorkspaceContext = ({
   children,
-}: PropsWithChildren): ReactElement => {
+}: PropsWithChildren): ReactNode => {
   const workspaceId = useAtomValue(currentWorkspaceIdAtom);
   const metadata = useAtomValue(rootWorkspacesMetadataAtom);
   const exist = metadata.find(m => m.id === workspaceId);
@@ -114,7 +114,7 @@ export const CurrentWorkspaceContext = ({
   if (!exist) {
     return <WorkspaceFallback key="workspace-not-found" />;
   }
-  return <>{children}</>;
+  return children;
 };
 
 type WorkspaceLayoutProps = {

packages/frontend/core/src/pages/workspace/all-page.tsx

@@ -108,7 +108,6 @@ const usePageOperationsRenderer = () => {
         });
       };
       return (
-        <>
         <OperationCell
           favorite={!!page.favorite}
           isPublic={!!page.isPublic}
@@ -131,7 +130,6 @@ const usePageOperationsRenderer = () => {
             );
           }}
         />
-        </>
       );
     },
     [currentWorkspace.id, setTrashModal, t, toggleFavorite]

packages/frontend/core/src/pages/workspace/trash-page.tsx

@@ -59,7 +59,6 @@ export const TrashPage = () => {
     [permanentlyDeletePage, restoreFromTrash, t]
   );
   return (
-    <>
     <div className={styles.root}>
       <WorkspaceHeader
         currentWorkspaceId={currentWorkspace.id}
@@ -83,7 +82,6 @@ export const TrashPage = () => {
         />
       )}
     </div>
-    </>
   );
 };
 

tests/storybook/src/stories/app-sidebar.stories.tsx

@@ -53,12 +53,10 @@ const Main = () => {
 
 export const Default: StoryFn = () => {
   return (
-    <>
     <Container>
       <AppSidebar />
       <Main />
     </Container>
-    </>
   );
 };
 

tests/storybook/src/stories/quick-search/quick-search-modal.stories.tsx

@@ -28,10 +28,8 @@ export const CMDKModalStory: StoryFn = () => {
 export const CMDKPanelStory: StoryFn = () => {
   const [query, setQuery] = useState('');
   return (
-    <>
     <CMDKModal open>
       <CMDKContainer open query={query} onQueryChange={setQuery} />
     </CMDKModal>
-    </>
   );
 };