chore: fix code style issues (#4857)

2023-11-08 13:51:08 +08:00
parent 83472cc682
commit b7edaab387
30 changed files with 423 additions and 471 deletions
--- a/packages/common/infra/src/internal/react.ts
+++ b/packages/common/infra/src/internal/react.ts
--- a/packages/common/infra/vite.config.ts
+++ b/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'],
--- a/packages/frontend/component/src/components/notification-center/index.jotai.ts
+++ b/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>;
 };
--- a/packages/frontend/component/src/components/notification-center/index.tsx
+++ b/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) =>
--- a/packages/frontend/component/src/components/page-list/operation-menu-items/export.tsx
+++ b/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) => {
--- a/packages/frontend/component/src/components/provider-composer/tests/provider-composer.spec.tsx
+++ b/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 (
--- a/packages/frontend/component/src/components/share-menu/share-page.tsx
+++ b/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
-            className={styles.descriptionStyle}
-            style={{ maxWidth: '230px' }}
-          >
+        <div 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 (
-      <>
-        <AffineSharePage {...props} />
-      </>
-    );
+    return <AffineSharePage {...props} />;
  }
  throw new Error('Unreachable');
 };
--- a/packages/frontend/component/src/components/workspace-list/index.tsx
+++ b/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>
--- a/packages/frontend/component/src/ui/popper/popper.tsx
+++ b/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>
--- a/packages/frontend/component/src/ui/tree-view/tree-node-inner.tsx
+++ b/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 (
-    <>
-      {node.render?.(node, {
+  return 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,
-      })}
-    </>
-  );
+  });
 };
--- a/packages/frontend/core/src/adapters/cloud/ui.tsx
+++ b/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: ({
--- a/packages/frontend/core/src/adapters/local/index.tsx
+++ b/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: ({
--- a/packages/frontend/core/src/adapters/public-cloud/ui.tsx
+++ b/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: () => {
--- a/packages/frontend/core/src/components/affine/auth/use-captcha.tsx
+++ b/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) {
--- a/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx
+++ b/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,
 });
--- a/packages/frontend/core/src/components/affine/new-workspace-setting-detail/export.tsx
+++ b/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>
-    </>
  );
 };
--- a/packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx
+++ b/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>
-    </>
  );
 };

--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/index.tsx
+++ b/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 tabs = <React.Fragment />;
-  const footer = <React.Fragment />;
+  const subtitle = '';
+  const tabs = '';
+  const footer = '';

  const scroll = (
    <div className={styles.errorTip}>
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
+++ b/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>
-    </>
  );
 };

--- a/packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
+++ b/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>
-    </>
  );
 };
--- a/packages/frontend/core/src/components/cloud/provider.tsx
+++ b/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>;
--- a/packages/frontend/core/src/components/page-detail-editor.tsx
+++ b/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>
-    </>
  );
 };
--- a/packages/frontend/core/src/components/pure/footer/index.tsx
+++ b/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 (
-      <>
-        {props.avatar ? (
+    return props.avatar ? (
      <div
        style={{
          ...props.style,
@@ -94,8 +92,6 @@ export const WorkspaceAvatar = forwardRef<HTMLDivElement, WorkspaceAvatarProps>(
      >
        {(props.name || 'AFFiNE').substring(0, 1)}
      </div>
-        )}
-      </>
    );
  }
 );
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/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={
-              <UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
-            }
+          items={<UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />}
          contentOptions={{
            // hide trigger
            sideOffset: -58,
@@ -273,6 +270,5 @@ export const RootAppSidebar = ({
        <AddPageButton onClick={onClickNewPage} />
      </SidebarContainer>
    </AppSidebar>
-    </>
  );
 };
--- a/packages/frontend/core/src/layouts/workspace-layout.tsx
+++ b/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 = {
--- a/packages/frontend/core/src/pages/workspace/all-page.tsx
+++ b/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]
--- a/packages/frontend/core/src/pages/workspace/trash-page.tsx
+++ b/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>
-    </>
  );
 };

--- a/packages/frontend/workspace/src/affine/worker.ts
+++ b/packages/frontend/workspace/src/affine/worker.ts
--- a/tests/storybook/src/stories/app-sidebar.stories.tsx
+++ b/tests/storybook/src/stories/app-sidebar.stories.tsx
@@ -53,12 +53,10 @@ const Main = () => {

 export const Default: StoryFn = () => {
  return (
-    <>
    <Container>
      <AppSidebar />
      <Main />
    </Container>
-    </>
  );
 };

--- a/tests/storybook/src/stories/quick-search/quick-search-modal.stories.tsx
+++ b/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>
-    </>
  );
 };