fix: update pnpm to 10.9 (embedded pnpm version of node 18) (#119)

* fix: update pnpm to default one

feat: autofix unused import

fix: use pnpm in corepack

* fix: update coverage workflow

.github/workflows/web_ci.yaml

@@ -7,7 +7,7 @@ on:
       - "release/*"
 env:
   NODE_VERSION: "18.16.0"
-  PNPM_VERSION: "8.5.0"
+  PNPM_VERSION: "10.9.0"
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
@@ -35,11 +35,11 @@ jobs:
           sudo rm -rf ${GITHUB_WORKSPACE}/.git
           sudo rm -rf $ANDROID_HOME/ndk
       - name: setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
       - name: setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: ${{ env.PNPM_VERSION }}
      

.github/workflows/web_coverage.yaml

@@ -8,8 +8,10 @@ on:
       - "release/*"
 env:
   NODE_VERSION: "18.16.0"
-  PNPM_VERSION: "8.5.0"
+  PNPM_VERSION: "10.9.0"
   COVERAGE: "true"
+  CYPRESS_CACHE_FOLDER: ${{ github.workspace }}/.cypress_cache
+
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
@@ -19,25 +21,34 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
-      - name: Maximize build space (ubuntu only)
-        run: |
-          sudo rm -rf /usr/share/dotnet
-          sudo rm -rf /opt/ghc
-          sudo rm -rf "/usr/local/share/boost"
-          sudo rm -rf "$AGENT_TOOLSDIRECTORY"
-          sudo docker image prune --all --force
-          sudo rm -rf /opt/hostedtoolcache/codeQL
-          sudo rm -rf ${GITHUB_WORKSPACE}/.git
-          sudo rm -rf $ANDROID_HOME/ndk
+      # - name: Maximize build space (ubuntu only)
+      #   run: |
+      #     sudo rm -rf /usr/share/dotnet
+      #     sudo rm -rf /opt/ghc
+      #     sudo rm -rf "/usr/local/share/boost"
+      #     sudo rm -rf "$AGENT_TOOLSDIRECTORY"
+      #     sudo docker image prune --all --force
+      #     sudo rm -rf /opt/hostedtoolcache/codeQL
+      #     sudo rm -rf ${GITHUB_WORKSPACE}/.git
+      #     sudo rm -rf $ANDROID_HOME/ndk
+
       - name: setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
+
       - name: setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: ${{ env.PNPM_VERSION }}
+
       # Install pnpm dependencies, cache them correctly
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install Cypress
+        run: npx cypress install
+
       # and run all Cypress tests
       - name: Cypress run
         uses: cypress-io/github-action@v6
@@ -45,6 +56,8 @@ jobs:
           component: true
           build: pnpm run build
           browser: chrome
+          # cache-key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          # install-command: pnpm add --save-dev cypress
         env:
           COVERAGE: "true"
 
@@ -55,7 +68,7 @@ jobs:
           COVERAGE: "true"
 
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v4
         with:
           token: cf9245e0-e136-4e21-b0ee-35755fa0c493
           files: coverage/jest/lcov.info, coverage/cypress/lcov.info

README.md

@@ -76,7 +76,7 @@ For local development, please follow the steps below:
 1. Copy .development.env to .env. The default value assumes that AppFlowy Cloud is deployed on localhost. If not, please update the value of the API endpoints.
 2. Make sure `npm` has been installed on your dev environment, then run the following:
 ```
-# npm install pnpm@8.5.0
+corepack enable
 pnpm install
 
 pnpm run dev

package.json

@@ -34,7 +34,7 @@
     "@floating-ui/react": "^0.26.27",
     "@jest/globals": "^29.7.0",
     "@mui/icons-material": "^5.11.11",
-    "@mui/material": "6.0.0-alpha.2",
+    "@mui/material": "^6.0.0",
     "@mui/x-date-pickers-pro": "^6.18.2",
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.6",
@@ -215,6 +215,9 @@
     "vite-plugin-total-bundle-size": "^1.0.7"
   },
   "engines": {
-    "pnpm": "^8.0.0"
-  }
-}
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0",
+    "pnpm": "^10.9.0"
+  },
+  "packageManager": "pnpm@10.9.0+sha512.0486e394640d3c1fb3c9d43d49cf92879ff74f8516959c235308f5a8f62e2e19528a65cdc2a3058f587cde71eba3d5b56327c8c33a97e4c4051ca48a10ca2d5f"
+}

src/application/slate-yjs/command/index.ts

@@ -156,9 +156,9 @@ export const CustomEditor = {
 
       const blockEntry = getBlockEntry(editor, point);
 
-      const [node, path] = blockEntry as NodeEntry<Element>;
+      const [node, path] = blockEntry;
       const block = getBlock(node.blockId as string, sharedRoot);
-      const blockType = block.get(YjsEditorKey.block_type) as BlockType;
+      const blockType = block.get(YjsEditorKey.block_type);
       const parent = getParent(node.blockId as string, sharedRoot);
 
       if(blockType !== BlockType.Paragraph && parent?.get(YjsEditorKey.block_type) === BlockType.QuoteBlock && LIST_BLOCK_TYPES.includes(blockType)) {
@@ -194,7 +194,7 @@ export const CustomEditor = {
 
       const blockEntry = getBlockEntry(editor, point);
 
-      const [node] = blockEntry as NodeEntry<Element>;
+      const [node] = blockEntry;
 
       handleMergeBlockForwardWithTxn(editor, node, point);
     } else {
@@ -389,7 +389,7 @@ export const CustomEditor = {
     const operations: (() => void)[] = [];
     const sharedRoot = getSharedRoot(editor);
     const sourceBlock = getBlock(blockId, sharedRoot);
-    const sourceType = sourceBlock.get(YjsEditorKey.block_type) as BlockType;
+    const sourceType = sourceBlock.get(YjsEditorKey.block_type);
     const oldData = dataStringTOJson(sourceBlock.get(YjsEditorKey.block_data));
 
     if(sourceType === type && isEqual(oldData, data)) {

src/application/slate-yjs/utils/applyToSlate.ts

@@ -1,13 +1,12 @@
 import { YjsEditor } from '@/application/slate-yjs';
 import { BlockJson } from '@/application/slate-yjs/types';
 import { blockToSlateNode, deltaInsertToSlateNode } from '@/application/slate-yjs/utils/convert';
+import { findSlateEntryByBlockId } from '@/application/slate-yjs/utils/editor';
+import { dataStringTOJson, getBlock, getChildrenArray, getPageId, getText } from '@/application/slate-yjs/utils/yjs';
 import { YBlock, YjsEditorKey } from '@/application/types';
 import isEqual from 'lodash-es/isEqual';
-import { Editor, Element, NodeEntry } from 'slate';
-import { YEvent, YMapEvent, YTextEvent } from 'yjs';
-import * as Y from 'yjs';
-import { dataStringTOJson, getBlock, getChildrenArray, getPageId, getText } from '@/application/slate-yjs/utils/yjs';
-import { findSlateEntryByBlockId } from '@/application/slate-yjs/utils/editor';
+import { Editor, Element } from 'slate';
+import { YEvent, YMapEvent, Text as YText, YTextEvent } from 'yjs';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type BlockMapEvent = YMapEvent<any>
@@ -47,7 +46,7 @@ function applyUpdateBlockYEvent(editor: YjsEditor, blockId: string, event: YMapE
     return [];
   }
 
-  const [node, path] = entry as NodeEntry<Element>;
+  const [node, path] = entry;
   const oldData = node.data as Record<string, unknown>;
 
   editor.apply({
@@ -65,7 +64,7 @@ function applyUpdateBlockYEvent(editor: YjsEditor, blockId: string, event: YMapE
 function applyTextYEvent(editor: YjsEditor, textId: string, event: YTextEvent) {
   const { target } = event;
 
-  const yText = target as Y.Text;
+  const yText = target as YText;
   const delta = yText.toDelta();
   const slateDelta = delta.flatMap(deltaInsertToSlateNode);
   const [entry] = editor.nodes({

src/application/slate-yjs/utils/positions.ts

@@ -141,7 +141,7 @@ export function relativePositionToSlatePoint(
     return null;
   }
 
-  const [node, path] = entry as NodeEntry<Element>;
+  const [node, path] = entry;
 
   if (!node) {
     return null;

src/components/_shared/modal/IndexedDBCleaner.tsx

@@ -1,19 +1,18 @@
 import { notify } from '@/components/_shared/notify';
 
-import TaskAltRounded from '@mui/icons-material/TaskAltRounded';
 import DeleteIcon from '@mui/icons-material/Delete';
+import TaskAltRounded from '@mui/icons-material/TaskAltRounded';
 
-import React, { useState, useEffect } from 'react';
 import {
   Box,
   Button,
   Checkbox,
-  List,
-  ListItem,
+  List, ListItemButton,
   ListItemIcon,
   ListItemText,
-  Typography,
+  Typography
 } from '@mui/material';
+import { useEffect, useState } from 'react';
 
 const MAX_DELETE = 50;
 const IndexedDBCleaner = () => {
@@ -88,10 +87,9 @@ const IndexedDBCleaner = () => {
           const labelId = `checkbox-list-label-${dbName}`;
 
           return (
-            <ListItem
+            <ListItemButton
               key={dbName}
               dense
-              button
               onClick={() => handleToggle(dbName)}
             >
               <ListItemIcon>
@@ -104,7 +102,7 @@ const IndexedDBCleaner = () => {
                 />
               </ListItemIcon>
               <ListItemText id={labelId} primary={dbName} />
-            </ListItem>
+            </ListItemButton>
           );
         })}
       </List>

src/components/database/calendar/Calendar.tsx

@@ -3,11 +3,11 @@ import { useCalendarSetup } from '@/components/database/calendar/Calendar.hooks'
 import { Toolbar, Event } from '@/components/database/components/calendar';
 import { useConditionsContext } from '@/components/database/components/conditions/context';
 import { debounce } from 'lodash-es';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Calendar as BigCalendar } from 'react-big-calendar';
 import './calendar.scss';
 
-export function Calendar () {
+export function Calendar() {
   const { dayPropGetter, localizer, formats, events, emptyEvents } = useCalendarSetup();
   const scrollLeft = useDatabaseContext().scrollLeft;
   const isDocumentBlock = useDatabaseContext().isDocumentBlock;

src/components/database/components/calendar/toolbar/Toolbar.tsx

@@ -1,23 +1,25 @@
 import { CalendarEvent } from '@/application/database-yjs';
+import { ReactComponent as DownArrow } from '@/assets/icons/alt_arrow_down.svg';
+import { ReactComponent as LeftArrow } from '@/assets/icons/alt_arrow_left.svg';
+import { ReactComponent as RightArrow } from '@/assets/icons/alt_arrow_right.svg';
 import NoDate from '@/components/database/components/calendar/toolbar/NoDate';
 import { IconButton } from '@mui/material';
 import Button from '@mui/material/Button';
 import dayjs from 'dayjs';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { ToolbarProps } from 'react-big-calendar';
-import { ReactComponent as LeftArrow } from '@/assets/icons/alt_arrow_left.svg';
-import { ReactComponent as RightArrow } from '@/assets/icons/alt_arrow_right.svg';
-import { ReactComponent as DownArrow } from '@/assets/icons/alt_arrow_down.svg';
 
 import { useTranslation } from 'react-i18next';
 
+interface ExtendedToolbarProps extends ToolbarProps<CalendarEvent, object> {
+  emptyEvents: CalendarEvent[];
+}
+
 export function Toolbar({
   onNavigate,
   date,
   emptyEvents,
-}: ToolbarProps & {
-  emptyEvents: CalendarEvent[];
-}) {
+}: ExtendedToolbarProps) {
   const dateStr = useMemo(() => dayjs(date).format('MMM YYYY'), [date]);
   const { t } = useTranslation();
 

src/components/database/components/tabs/DatabaseTabs.tsx

@@ -87,7 +87,7 @@ export const DatabaseTabs = forwardRef<HTMLDivElement, DatabaseTabBarProps>(
           className={`flex items-center  database-tabs w-full gap-1.5 ${expanded || [
             DatabaseViewLayout.Board,
             DatabaseViewLayout.Calendar,
-          ].includes(layout as DatabaseViewLayout) ? 'border-b' : ''} border-line-divider `}
+          ].includes(layout) ? 'border-b' : ''} border-line-divider `}
         >
           <div
             style={{

src/components/editor/EditorOverlay.tsx

@@ -9,13 +9,12 @@ import { notify } from '@/components/_shared/notify';
 import { insertDataAfterBlock } from '@/components/ai-chat/utils';
 import { useEditorContext } from '@/components/editor/EditorContext';
 import { getScrollParent } from '@/components/global-comment/utils';
-
 import { AIAssistantProvider, ContextPlaceholder, WriterRequest } from '@appflowyinc/ai-chat';
 import { EditorData } from '@appflowyinc/editor';
 import { Portal } from '@mui/material';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { Element, NodeEntry, Range, Text, Transforms } from 'slate';
+import { Range, Text, Transforms } from 'slate';
 import { ReactEditor, useSlate } from 'slate-react';
 
 import BlockPopover from './components/block-popover';
@@ -61,7 +60,7 @@ function EditorOverlay({
   const handleInsertBelow = useCallback((data: EditorData) => {
     if (!endBlock) return;
     try {
-      const [node] = endBlock as NodeEntry<Element>;
+      const [node] = endBlock;
 
       if (!node) return;
 
@@ -110,7 +109,7 @@ function EditorOverlay({
 
         if (!startBlock) return;
 
-        const [node] = startBlock as NodeEntry<Element>;
+        const [node] = startBlock;
 
         if (!node) return;
 
@@ -208,4 +207,4 @@ function EditorOverlay({
   );
 }
 
-export default EditorOverlay;
+export default EditorOverlay;

src/components/editor/plugins/withInsertText.ts

@@ -1,10 +1,10 @@
-import { BaseRange, NodeEntry, Element, Point, Range, Text, Transforms } from 'slate';
-import { ReactEditor } from 'slate-react';
-import { TextInsertTextOptions } from 'slate/dist/interfaces/transforms/text';
-import { getBlockEntry } from '@/application/slate-yjs/utils/editor';
 import { YjsEditor } from '@/application/slate-yjs';
 import { isEmbedBlockTypes } from '@/application/slate-yjs/command/const';
+import { getBlockEntry } from '@/application/slate-yjs/utils/editor';
 import { BlockType } from '@/application/types';
+import { BaseRange, NodeEntry, Point, Range, Text, Transforms } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { TextInsertTextOptions } from 'slate/dist/interfaces/transforms/text';
 
 export const withInsertText = (editor: ReactEditor) => {
   const { insertText } = editor;
@@ -18,7 +18,7 @@ export const withInsertText = (editor: ReactEditor) => {
     }
 
     const point = newAt.anchor;
-    const [blockNode] = getBlockEntry(editor as YjsEditor, point) as NodeEntry<Element>;
+    const [blockNode] = getBlockEntry(editor as YjsEditor, point);
 
     if (blockNode && isEmbedBlockTypes(blockNode.type as BlockType)) {
       return;
@@ -47,7 +47,7 @@ export const withInsertText = (editor: ReactEditor) => {
     const [start, end] = editor.edges(textPath);
 
     const inMiddle = Point.isAfter(point, start) && Point.isBefore(point, end);
-    
+
     if (!inMiddle && (textNode.code || textNode.href)) {
       Transforms.insertNodes(editor, { text }, { at: point, select: true, voids: false });
       return;