ci: add circular import detect (#2475)

Co-authored-by: himself65 <himself65@outlook.com>

.github/workflows/build.yml

@@ -35,7 +35,9 @@ jobs:
       - uses: actions/checkout@v3
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
-      - run: yarn lint --max-warnings=0
+      - run: |
+          yarn lint --max-warnings=0
+          yarn circular
 
   build-storybook:
     name: Build Storybook

apps/web/package.json

@@ -6,8 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "export": "next export",
-    "start": "next start",
-    "lint": "next lint"
+    "start": "next start"
   },
   "dependencies": {
     "@affine-test/fixtures": "workspace:*",

package.json

@@ -19,6 +19,7 @@
     "build:client": "yarn workspace @affine/client-app build:app",
     "build:storybook": "yarn workspace @affine/component build-storybook",
     "bump:nightly": "./scripts/bump-blocksuite.sh",
+    "circular": "madge --circular --ts-config ./tsconfig.json ./apps/web/src/pages/**/*.tsx",
     "export": "yarn workspace @affine/web export",
     "start": "yarn workspace @affine/web start",
     "start:storybook": "yarn exec serve packages/component/storybook-static -l 6006",
@@ -75,6 +76,7 @@
     "happy-dom": "^9.18.3",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
+    "madge": "^6.0.0",
     "msw": "^1.2.1",
     "nanoid": "^4.0.2",
     "nyc": "^15.1.0",

packages/component/src/components/app-sidebar/fallback.tsx

@@ -1,18 +0,0 @@
-import { Skeleton } from '@mui/material';
-import type { ReactElement } from 'react';
-
-import { fallbackHeaderStyle, fallbackStyle } from './fallback.css';
-import { AppSidebar } from './index';
-
-export const AppSidebarFallback = (): ReactElement | null => {
-  return (
-    <AppSidebar>
-      <div className={fallbackStyle}>
-        <div className={fallbackHeaderStyle}>
-          <Skeleton variant="circular" width={40} height={40} />
-          <Skeleton variant="rectangular" width={150} height={40} />
-        </div>
-      </div>
-    </AppSidebar>
-  );
-};

packages/component/src/components/app-sidebar/index.tsx

@@ -1,9 +1,11 @@
 import { getEnvironment } from '@affine/env';
+import { Skeleton } from '@mui/material';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useAtom, useAtomValue } from 'jotai';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
+import { fallbackHeaderStyle, fallbackStyle } from './fallback.css';
 import {
   floatingMaxWidth,
   navBodyStyle,
@@ -114,10 +116,22 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
   );
 }
 
+export const AppSidebarFallback = (): ReactElement | null => {
+  return (
+    <AppSidebar>
+      <div className={fallbackStyle}>
+        <div className={fallbackHeaderStyle}>
+          <Skeleton variant="circular" width={40} height={40} />
+          <Skeleton variant="rectangular" width={150} height={40} />
+        </div>
+      </div>
+    </AppSidebar>
+  );
+};
+
 export * from './add-page-button';
 export * from './app-updater-button';
 export * from './category-divider';
-export { AppSidebarFallback } from './fallback';
 export * from './menu-item';
 export * from './quick-search-input';
 export * from './sidebar-containers';

packages/component/src/components/page-list/all-page.tsx

@@ -5,7 +5,6 @@ import {
   TableHead,
   TableRow,
 } from '@affine/component';
-import { TrashOperationCell } from '@affine/component/page-list';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowDownBigIcon, ArrowUpBigIcon } from '@blocksuite/icons';
 import { useMediaQuery, useTheme } from '@mui/material';
@@ -15,7 +14,9 @@ import { AllPagesBody } from './all-pages-body';
 import { NewPageButton } from './components/new-page-buttton';
 import { TitleCell } from './components/title-cell';
 import { AllPageListMobileView, TrashListMobileView } from './mobile';
+import { TrashOperationCell } from './operation-cell';
 import { StyledTableContainer, StyledTableRow } from './styles';
+import type { ListData } from './type';
 import { useSorter } from './use-sorter';
 
 export type PageListProps = {
@@ -108,22 +109,6 @@ const AllPagesHead = ({
   );
 };
 
-export type ListData = {
-  pageId: string;
-  icon: JSX.Element;
-  title: string;
-  favorite: boolean;
-  createDate: string;
-  updatedDate?: string;
-  trashDate?: string;
-  isPublicPage: boolean;
-  onClickPage: () => void;
-  onOpenPageInNewTab: () => void;
-  bookmarkPage: () => void;
-  removeToTrash: () => void;
-  onDisablePublicSharing: () => void;
-};
-
 export const PageList = ({
   isPublicWorkspace = false,
   list,
@@ -264,5 +249,3 @@ export const PageListTrashView: React.FC<{
     </StyledTableContainer>
   );
 };
-
-export default PageList;

packages/component/src/components/page-list/all-pages-body.tsx

@@ -1,12 +1,12 @@
 import { TableBody, TableCell } from '@affine/component';
-import { OperationCell } from '@affine/component/page-list';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useMediaQuery, useTheme } from '@mui/material';
 
-import type { ListData } from './all-page';
 import { FavoriteTag } from './components/favorite-tag';
 import { TitleCell } from './components/title-cell';
+import { OperationCell } from './operation-cell';
 import { StyledTableRow } from './styles';
+import type { ListData } from './type';
 
 export const AllPagesBody = ({
   isPublicWorkspace,

packages/component/src/components/page-list/index.tsx

@@ -2,3 +2,4 @@ export * from './all-page';
 export * from './operation-cell';
 export * from './operation-menu-items';
 export * from './styles';
+export * from './type';

packages/component/src/components/page-list/mobile.tsx

@@ -8,7 +8,6 @@ import {
 } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
-import type { ListData } from './all-page';
 import { AllPagesBody } from './all-pages-body';
 import { NewPageButton } from './components/new-page-buttton';
 import {
@@ -16,6 +15,7 @@ import {
   StyledTableRow,
   StyledTitleLink,
 } from './styles';
+import type { ListData } from './type';
 
 const MobileHead = ({
   isPublicWorkspace,

packages/component/src/components/page-list/type.ts

@@ -0,0 +1,15 @@
+export type ListData = {
+  pageId: string;
+  icon: JSX.Element;
+  title: string;
+  favorite: boolean;
+  createDate: string;
+  updatedDate?: string;
+  trashDate?: string;
+  isPublicPage: boolean;
+  onClickPage: () => void;
+  onOpenPageInNewTab: () => void;
+  bookmarkPage: () => void;
+  removeToTrash: () => void;
+  onDisablePublicSharing: () => void;
+};

packages/component/src/stories/page-list.stories.tsx

@@ -9,7 +9,7 @@ import type {
   TrashListData,
 } from '../components/page-list/all-page';
 import { PageListTrashView } from '../components/page-list/all-page';
-import PageList from '../components/page-list/all-page';
+import { PageList } from '../components/page-list/all-page';
 import { NewPageButton } from '../components/page-list/components/new-page-buttton';
 import type { OperationCellProps } from '../components/page-list/operation-cell';
 import { OperationCell } from '../components/page-list/operation-cell';