Merge branch 'develop'

README.md

@@ -22,7 +22,7 @@ See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066
 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-[![affine.pro](https://img.shields.io/static/v1?label=affine.pro&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAhpJREFUWEdjZEACtnl3MxgY/0YzMjAaMzAwcCLLUYH9/T/D/7MM/5mXHp6kPANmHiOI4Zx9Xfg3C+tKBob/zlSwiAgjGPey/vkdvneq5luwA+zy7+yhn+Vwv+89NFHFhREU7IyM/6YT4WyqK/n/nymT0Tb/1mFGBkYbqptOhIH/Gf4fYbTLv/2NBgmOCOvBSr6DHPCfWNW0UEe2A2x1uRlakiXBbtpx6jND+7KXZLmPbAdURokzeJjxwi31rrzH8OX7P5IdQbYDtnUoMXBzMMEt7Fj2imH7qU/0cQBy8MNsPHL5K0P13Of0cQB68MNsJScaSI4CHk4mhq3tSnCf3n36k0FZmh3Mn7L+DcPqgx9ICgWSHeBpxsdQESUGtgRk+eqDH+H8O09/MiR3P6atA1qTJRlsdLnhPgYlPOQQCW96wPDi3R+iHUFSCKAHP8wydEeREg0kOQA9+JOgwR1qL8CQEygC9jWp0UCSA+aVysIT3JqDHxgmr38DtlRCiIVhZZ0CPNhB6QDkEGIA0Q4gZAkuxxFyBNEOQA7ml+/+MIQ1PUAxG1kelAhB6YMYQLQDCPmQUAjhcgxRDiDWcEKOxOYIohyQGyjCEGIvANaPLfhhBiNHA6hmBBXNhABRDgCV/aBQAAFQpYMrn4PUgNTCACiXEMoNRDmAkC8okR8UDhjYRumAN8sHvGMCSkAD2jUDOWDAO6ewbDQQ3XMAy/oxKownQR0AAAAASUVORK5CYII=&color=orange&message=→)](https://affine.pro)
+[![affine.pro](https://img.shields.io/static/v1?label=live%20demo&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAhpJREFUWEdjZEACtnl3MxgY/0YzMjAaMzAwcCLLUYH9/T/D/7MM/5mXHp6kPANmHiOI4Zx9Xfg3C+tKBob/zlSwiAgjGPey/vkdvneq5luwA+zy7+yhn+Vwv+89NFHFhREU7IyM/6YT4WyqK/n/nymT0Tb/1mFGBkYbqptOhIH/Gf4fYbTLv/2NBgmOCOvBSr6DHPCfWNW0UEe2A2x1uRlakiXBbtpx6jND+7KXZLmPbAdURokzeJjxwi31rrzH8OX7P5IdQbYDtnUoMXBzMMEt7Fj2imH7qU/0cQBy8MNsPHL5K0P13Of0cQB68MNsJScaSI4CHk4mhq3tSnCf3n36k0FZmh3Mn7L+DcPqgx9ICgWSHeBpxsdQESUGtgRk+eqDH+H8O09/MiR3P6atA1qTJRlsdLnhPgYlPOQQCW96wPDi3R+iHUFSCKAHP8wydEeREg0kOQA9+JOgwR1qL8CQEygC9jWp0UCSA+aVysIT3JqDHxgmr38DtlRCiIVhZZ0CPNhB6QDkEGIA0Q4gZAkuxxFyBNEOQA7ml+/+MIQ1PUAxG1kelAhB6YMYQLQDCPmQUAjhcgxRDiDWcEKOxOYIohyQGyjCEGIvANaPLfhhBiNHA6hmBBXNhABRDgCV/aBQAAFQpYMrn4PUgNTCACiXEMoNRDmAkC8okR8UDhjYRumAN8sHvGMCSkAD2jUDOWDAO6ewbDQQ3XMAy/oxKownQR0AAAAASUVORK5CYII=&color=orange&message=→)](https://affine.pro)
 [![stars](https://img.shields.io/github/stars/toeverything/AFFiNE.svg?style=flat&logo=github&colorB=red&label=stars)](https://github.com/toeverything/AFFiNE)
 [![All Contributors][all-contributors-badge]](#contributors)
 [![Node](https://img.shields.io/badge/node->=16.0-success)](https://www.typescriptlang.org/)

apps/ligo-virgo/src/pages/tools/icons/Icons.tsx

@@ -1,9 +1,15 @@
-import { type FC, useRef } from 'react';
+import { type ComponentType, useRef } from 'react';
 import * as uiIcons from '@toeverything/components/icons';
 import { message, styled } from '@toeverything/components/ui';
 import { copy } from './copy';
 
-const IconBooth = ({ name, Icon }: { name: string; Icon: FC<any> }) => {
+const IconBooth = ({
+    name,
+    Icon,
+}: {
+    name: string;
+    Icon: ComponentType<any>;
+}) => {
     const on_click = () => {
         copy(`<${name} />`);
         message.success('Copied ~');
@@ -36,7 +42,13 @@ export const Icons = () => {
             <hr />
             <IconsContainer>
                 {_icons.map(([key, icon]) => {
-                    return <IconBooth key={key} name={key} Icon={icon as FC} />;
+                    return (
+                        <IconBooth
+                            key={key}
+                            name={key}
+                            Icon={icon as ComponentType<any>}
+                        />
+                    );
                 })}
             </IconsContainer>
         </Container>

libs/components/board-draw/src/components/command-panel/BorderColorConfig.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import { Popover, Tooltip, IconButton } from '@toeverything/components/ui';

libs/components/board-draw/src/components/command-panel/CommandPanel.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { Fragment } from 'react';
 import { Vec } from '@tldraw/vec';
 import { TldrawApp, TLDR } from '@toeverything/components/board-state';

libs/components/board-draw/src/components/command-panel/DeleteOperation.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import { IconButton, Tooltip } from '@toeverything/components/ui';

libs/components/board-draw/src/components/command-panel/FillColorConfig.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import {

libs/components/board-draw/src/components/command-panel/FontSizeConfig.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import { FontSizeStyle } from '@toeverything/components/board-types';

libs/components/board-draw/src/components/command-panel/FrameFillColorConfig.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import {

libs/components/board-draw/src/components/command-panel/GroupOperation.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import { IconButton, Tooltip } from '@toeverything/components/ui';

libs/components/board-draw/src/components/command-panel/LockOperation.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import { IconButton, Tooltip } from '@toeverything/components/ui';

libs/components/board-draw/src/components/command-panel/stroke-line-style-config/LineStyle.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { DashStyle, StrokeWidth } from '@toeverything/components/board-types';
 import {
     LineNoneIcon,

libs/components/board-draw/src/components/command-panel/stroke-line-style-config/StrokeLineStyleConfig.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { TldrawApp } from '@toeverything/components/board-state';
 import { DashStyle, StrokeWidth } from '@toeverything/components/board-types';
 import type { TDShape } from '@toeverything/components/board-types';

libs/components/board-draw/src/components/context-menu/context-menu.tsx

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 export const ContextMenu = ({ children }: { children: ReactNode }) => {
     return <div>{children}</div>;

libs/components/board-draw/src/components/palette/Palette.tsx

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { useMemo } from 'react';
 import { styled, Tooltip } from '@toeverything/components/ui';
 import { ShapeColorNoneIcon } from '@toeverything/components/icons';

libs/components/board-draw/src/components/tools-panel/LineTools.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
     ConnectorIcon,
     ConectorLineIcon,

libs/components/board-draw/src/components/tools-panel/ShapeTools.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
     ShapeIcon,
     RectangleIcon,

libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import style9 from 'style9';
 import {
     // MuiIconButton as IconButton,
@@ -14,6 +13,10 @@ import {
     SelectIcon,
     TextIcon,
     EraserIcon,
+    SelectIconProps,
+    EraserIconProps,
+    HandToolIconProps,
+    TextIconProps,
 } from '@toeverything/components/icons';
 
 import {
@@ -26,6 +29,7 @@ import { TldrawApp } from '@toeverything/components/board-state';
 import { ShapeTools } from './ShapeTools';
 import { PenTools } from './pen-tools';
 import { LineTools } from './LineTools';
+import { ComponentType, Component } from 'react';
 
 const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
 const toolLockedSelector = (s: TDSnapshot) => s.appState.isToolLocked;
@@ -34,8 +38,10 @@ const tools: Array<{
     type: string;
     label?: string;
     tooltip?: string;
-    icon?: FC;
+    icon?: ComponentType<
-    component?: FC<{ app: TldrawApp }>;
+        SelectIconProps | EraserIconProps | HandToolIconProps | TextIconProps
+    >;
+    component?: ComponentType<{ app: TldrawApp }>;
 }> = [
     {
         type: 'select',

libs/components/board-draw/src/components/tools-panel/pen-tools/Pen.tsx

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Tooltip, styled, IconButton } from '@toeverything/components/ui';
 
 interface PenProps {

libs/components/board-draw/src/components/tools-panel/pen-tools/PenTools.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, type CSSProperties } from 'react';
+import { ReactElement, type CSSProperties } from 'react';
 import style9 from 'style9';
 import {
     MuiDivider as Divider,

libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import {
     MuiIconButton as IconButton,
     MuiButton as Button,

libs/components/board-draw/src/components/zoom-bar/mini-map/MiniMap.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { Utils } from '@tldraw/core';
 import Vec from '@tldraw/vec';
 import { TLDR } from '@toeverything/components/board-state';

libs/components/board-draw/src/components/zoom-bar/mini-map/SimplifiedShape.tsx

@@ -1,4 +1,4 @@
-import type { FC, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import type { TLBounds } from '@tldraw/core';
 import { styled } from '@toeverything/components/ui';
 

libs/components/board-draw/src/components/zoom-bar/mini-map/Viewport.tsx

@@ -1,4 +1,4 @@
-import type { FC, CSSProperties, PointerEventHandler } from 'react';
+import type { CSSProperties, PointerEventHandler } from 'react';
 import { useState, useRef } from 'react';
 import type { TLBounds } from '@tldraw/core';
 import Vec from '@tldraw/vec';

libs/components/common/src/lib/list/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import clsx from 'clsx';
 import style9 from 'style9';
@@ -21,7 +21,7 @@ export const commonListContainer = 'commonListContainer';
 type Content = {
     id: string;
     content: string;
-    icon: FC<SvgIconProps>;
+    icon: (prop: SvgIconProps) => JSX.Element;
 };
 
 export type CommonListItem = {

libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx

@@ -5,7 +5,7 @@ import {
     Protocol,
 } from '@toeverything/datasource/db-service';
 import { type CreateView } from '@toeverything/framework/virgo';
-import { useEffect, useRef, useState, type FC } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import {
     TextManage,

libs/components/editor-blocks/src/blocks/code/CodeView.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { StyleWithAtRules } from 'style9';
 
 import { CreateView } from '@toeverything/framework/virgo';

libs/components/editor-blocks/src/blocks/divider/divider-view.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import { styled } from '@toeverything/components/ui';
 import { useOnSelect } from '@toeverything/components/editor-core';

libs/components/editor-blocks/src/blocks/embed-link/EmbedLinkView.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import {
     BlockPendantProvider,

libs/components/editor-blocks/src/blocks/figma/FigmaView.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import {
     useOnSelect,

libs/components/editor-blocks/src/blocks/file/FileView.tsx

@@ -1,4 +1,4 @@
-import { FC, useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import { Upload } from '../../components/upload/upload';
 import { services, FileColumnValue } from '@toeverything/datasource/db-service';

libs/components/editor-blocks/src/blocks/grid-item/GridItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useLayoutEffect, useRef } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
 import { ChildrenView } from '@toeverything/framework/virgo';
 import { styled } from '@toeverything/components/ui';
 import { sleep } from '@toeverything/utils';

libs/components/editor-blocks/src/blocks/grid-item/GridItemRender.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react';
 import { RenderBlock } from '@toeverything/components/editor-core';
 import { ChildrenView, CreateView } from '@toeverything/framework/virgo';
 
-export const GridItemRender = function (creator: FC<ChildrenView>) {
+export const GridItemRender = function (
+    creator: (prop: ChildrenView) => JSX.Element
+) {
     const GridItem = function (props: CreateView) {
         const { block } = props;
         const children = (

libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { useState } from 'react';
 import { styled } from '@toeverything/components/ui';
 import { BlockEditor } from '@toeverything/framework/virgo';

libs/components/editor-blocks/src/blocks/grid/Grid.tsx

@@ -1,6 +1,6 @@
 import { RenderBlock } from '@toeverything/components/editor-core';
 import { CreateView } from '@toeverything/framework/virgo';
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { GridHandle } from './GirdHandle';
 import { styled } from '@toeverything/components/ui';
 import ReactDOM from 'react-dom';

libs/components/editor-blocks/src/blocks/grid/GridRender.tsx

@@ -1,8 +1,7 @@
-import { FC } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import { BlockContainer } from '../../components/BlockContainer';
 
-export function GridRender(creator: FC<CreateView>) {
+export function GridRender(creator: (prop: CreateView) => JSX.Element) {
     return function GridWithItem(props: CreateView) {
         const { editor, block } = props;
         return (

libs/components/editor-blocks/src/blocks/group/GroupView.tsx

@@ -8,7 +8,7 @@ import {
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import type { CreateView } from '@toeverything/framework/virgo';
-import type { ComponentType, FC } from 'react';
+import type { ComponentType } from 'react';
 import { useState } from 'react';
 import { GroupMenuWrapper } from './group-menu';
 import { SceneKanban } from './scene-kanban';

libs/components/editor-blocks/src/blocks/group/ScenePage.tsx

@@ -1,6 +1,5 @@
 import { RenderBlockChildren } from '@toeverything/components/editor-core';
 import type { CreateView } from '@toeverything/framework/virgo';
-import { FC } from 'react';
 
 export const ScenePage = ({ block }: CreateView) => {
     return <RenderBlockChildren block={block} />;

libs/components/editor-blocks/src/blocks/group/SceneTable.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { useState, useMemo, useEffect } from 'react';
 import type { DefaultColumnsValue } from '@toeverything/datasource/db-service';
 import type { CreateView } from '@toeverything/framework/virgo';

libs/components/editor-blocks/src/blocks/group/components/filter/IconBtn.tsx

@@ -1,9 +1,9 @@
 import { styled } from '@toeverything/components/ui';
-import type { FC } from 'react';
+
 import type { SvgIconProps } from '@toeverything/components/ui';
 
 interface Props {
-    Icon: FC<SvgIconProps>;
+    Icon: (prop: SvgIconProps) => JSX.Element;
     text?: string;
     onClick: () => void;
 }

libs/components/editor-blocks/src/blocks/groupDvider/groupDividerView.tsx

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 
 export const GroupDividerView = ({ block, editor }: CreateView) => {

libs/components/editor-blocks/src/blocks/image/ImageView.tsx

@@ -6,7 +6,7 @@ import {
 import { styled } from '@toeverything/components/ui';
 import { services } from '@toeverything/datasource/db-service';
 import { CreateView } from '@toeverything/framework/virgo';
-import { FC, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Image as SourceView } from '../../components/ImageView';
 import { Upload } from '../../components/upload/upload';
 import { SCENE_CONFIG } from '../group/config';

libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx

@@ -5,7 +5,7 @@ import {
     Protocol,
 } from '@toeverything/datasource/db-service';
 import { type CreateView } from '@toeverything/framework/virgo';
-import { useEffect, useRef, useState, type FC } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
     TextManage,
     type ExtendedTextUtils,

libs/components/editor-blocks/src/blocks/page/PageView.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef, useEffect, useMemo, useState } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router';
 
 import { BackLink, TextProps } from '@toeverything/components/common';

libs/components/editor-blocks/src/blocks/page/index.ts

@@ -13,9 +13,9 @@ import {
 } from '@toeverything/framework/virgo';
 
 import { PageView } from './PageView';
-import { ComponentType, FC } from 'react';
 
-export const PageChildrenView: FC<ChildrenView> = props => props.children;
+export const PageChildrenView: (prop: ChildrenView) => JSX.Element = props =>
+    props.children;
 
 export class PageBlock extends BaseView {
     type = Protocol.Block.Type.page;

libs/components/editor-blocks/src/blocks/ref-link/ref-link-view.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { InlineRefLink } from '@toeverything/components/common';
 import { CreateView } from '@toeverything/framework/virgo';

libs/components/editor-blocks/src/blocks/text/QuoteBlock.tsx

@@ -10,13 +10,13 @@ import {
     getTextProperties,
     SelectBlock,
 } from '@toeverything/framework/virgo';
-import { FC } from 'react';
+
 import { TextView } from './TextView';
 
 export class QuoteBlock extends BaseView {
     type = Protocol.Block.Type.quote;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     // override ChildrenView = IndentWrapper;
 
@@ -83,7 +83,7 @@ export class QuoteBlock extends BaseView {
 export class CalloutBlock extends BaseView {
     type = Protocol.Block.Type.callout;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     // override ChildrenView = IndentWrapper;
 

libs/components/editor-blocks/src/blocks/text/TextBlock.tsx

@@ -11,13 +11,13 @@ import {
     Protocol,
 } from '@toeverything/datasource/db-service';
 import { TextView } from './TextView';
-import { FC } from 'react';
+
 import { getRandomString } from '@toeverything/components/common';
 
 export class TextBlock extends BaseView {
     type = Protocol.Block.Type.text;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
         if (!block.getProperty('text')) {
@@ -134,7 +134,7 @@ export class TextBlock extends BaseView {
 export class Heading1Block extends BaseView {
     type = Protocol.Block.Type.heading1;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
         if (!block.getProperty('text')) {
@@ -199,7 +199,7 @@ export class Heading1Block extends BaseView {
 export class Heading2Block extends BaseView {
     type = Protocol.Block.Type.heading2;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
         if (!block.getProperty('text')) {
@@ -264,7 +264,7 @@ export class Heading2Block extends BaseView {
 export class Heading3Block extends BaseView {
     type = Protocol.Block.Type.heading3;
 
-    View: FC<CreateView> = TextView;
+    View: (prop: CreateView) => JSX.Element = TextView;
 
     override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {
         if (!block.getProperty('text')) {

libs/components/editor-blocks/src/blocks/text/TextView.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 
 import { CustomText, TextProps } from '@toeverything/components/common';
 import {

libs/components/editor-blocks/src/blocks/toc/toc-view.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import {
     is_heading_child_type,

libs/components/editor-blocks/src/blocks/todo/CheckBox.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@toeverything/components/ui';
-import { FC, useMemo } from 'react';
+import { useMemo } from 'react';
 
 interface CheckBoxProps {
     size?: number;

libs/components/editor-blocks/src/blocks/todo/TodoView.tsx

@@ -5,7 +5,7 @@ import {
     Protocol,
 } from '@toeverything/datasource/db-service';
 import { AsyncBlock, type CreateView } from '@toeverything/framework/virgo';
-import { useRef, type FC } from 'react';
+import { useRef } from 'react';
 import {
     TextManage,
     type ExtendedTextUtils,

libs/components/editor-blocks/src/blocks/youtube/YoutubeView.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { CreateView } from '@toeverything/framework/virgo';
 import { Upload } from '../../components/upload/upload';
 import { SourceView } from '../../components/source-view';

libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { styled } from '@toeverything/components/ui';
 import { AsyncBlock, BlockEditor } from '@toeverything/framework/virgo';
 

libs/components/editor-blocks/src/components/ImageView/ImageView.tsx

@@ -1,5 +1,5 @@
 import { AsyncBlock } from '@toeverything/framework/virgo';
-import { FC } from 'react';
+
 import { ResizableBox } from 'react-resizable';
 import { styled } from '@toeverything/components/ui';
 

libs/components/editor-blocks/src/components/IndentWrapper/IndentWrapper.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { ChildrenView } from '@toeverything/framework/virgo';
 import { styled } from '@toeverything/components/ui';
 

libs/components/editor-blocks/src/components/editable/editable.tsx

@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import { useMemo } from 'react';
 import { createEditor } from 'slate';
 import { Slate, Editable as SlateEditable, withReact } from 'slate-react';
 import { ErrorBoundary } from '@toeverything/utils';

libs/components/editor-blocks/src/components/source-view/SourceView.tsx

@@ -4,14 +4,7 @@ import {
     useLazyIframe,
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
-import {
+import { ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
-    FC,
-    ReactElement,
-    ReactNode,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
 import { SCENE_CONFIG } from '../../blocks/group/config';
 import { BlockPreview } from './BlockView';
 import { formatUrl } from './format-url';

libs/components/editor-blocks/src/components/table/basic-table.tsx

@@ -6,7 +6,7 @@ import {
     useLayoutEffect,
     useCallback,
 } from 'react';
-import type { FC } from 'react';
+
 import { VariableSizeGrid, areEqual } from 'react-window';
 import type {
     GridChildComponentProps,
@@ -34,7 +34,7 @@ export interface CustomCellProps<T = unknown> {
     value: T;
     valueKey: string;
 }
-export type CustomCell<T = unknown> = FC<CustomCellProps<T>>;
+export type CustomCell<T = unknown> = (prop: CustomCellProps<T>) => JSX.Element;
 
 interface TableData {
     columns: readonly TableColumn[];

libs/components/editor-blocks/src/components/table/custom-cell/check-box/index.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { Checkbox } from '@toeverything/components/ui';
 import type { BooleanColumnValue } from '@toeverything/datasource/db-service';
 import type { CellProps } from '../types';

libs/components/editor-blocks/src/components/table/custom-cell/index.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { ColumnType } from '@toeverything/datasource/db-service';
 import type { CustomCellProps as TableCustomCellProps } from '../basic-table';
 import { DEFAULT_RENDER_CELL } from '../basic-table';
@@ -16,7 +15,7 @@ const DefaultCell = ({ onChange, ...props }: CellProps) => {
 /**
  * @deprecated
  */
-const cellMap: Record<ColumnType, FC<CellProps<any>>> = {
+const cellMap: Record<ColumnType, (prop: CellProps<any>) => JSX.Element> = {
     [ColumnType.content]: DefaultCell,
     [ColumnType.number]: DefaultCell,
     [ColumnType.enum]: SelectCell,

libs/components/editor-blocks/src/components/table/custom-cell/select/index.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { useMemo } from 'react';
 import { OldSelect } from '@toeverything/components/ui';
 import type { EnumColumnValue } from '@toeverything/datasource/db-service';

libs/components/editor-blocks/src/components/table/table.tsx

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { BasicTable } from './basic-table';
 import type { BasicTableProps } from './basic-table';
 

libs/components/editor-blocks/src/components/upload/upload.tsx

@@ -1,5 +1,4 @@
 import {
-    FC,
     useRef,
     ChangeEvent,
     ReactElement,

libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { styled } from '@toeverything/components/ui';
 import type { AsyncBlock } from '../editor';
 import { PendantPopover } from './pendant-popover';

libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef } from 'react';
+import { useRef } from 'react';
 import { AsyncBlock } from '../../editor';
 import { PendantHistoryPanel } from '../pendant-history-panel';
 import {

libs/components/editor-core/src/block-pendant/types.ts

@@ -4,7 +4,6 @@ import {
     SelectOption,
     SelectOptionId,
 } from '../recast-block';
-import { FunctionComponent } from 'react';
 import { TextFontIcon } from '@toeverything/components/icons';
 
 export { PropertyType as PendantTypes } from '../recast-block';

libs/components/editor-core/src/render-block/RenderBlockChildren.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { AsyncBlock } from '../editor';
 import { RenderBlock } from './RenderBlock';
 

libs/components/editor-plugins/src/comment/AddCommentActions.tsx

@@ -1,4 +1,4 @@
-import { useCallback, type FC, type MouseEvent } from 'react';
+import { useCallback, type MouseEvent } from 'react';
 import {
     styled,
     Tooltip,
@@ -83,7 +83,7 @@ export const AddCommentActions = ({
 };
 
 type IconButtonWithTooltipProps = {
-    icon: FC<SvgIconProps>;
+    icon: (prop: SvgIconProps) => JSX.Element;
     tooltip?: string;
 };
 

libs/components/editor-plugins/src/menu/command-menu/config.ts

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import {
     HeadingOneIcon,
     HeadingTwoIcon,
@@ -40,7 +39,7 @@ type ClickItemHandler = (
 export type CommandMenuDataType = {
     type: BlockFlavorKeys;
     text: string;
-    icon: FC<SvgIconProps>;
+    icon: (prop: SvgIconProps) => JSX.Element;
 };
 
 export const commonCommandMenuHandler: ClickItemHandler = async (

libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx

@@ -135,7 +135,9 @@ export const MenuDropdownItem = ({
     );
 };
 
-const withStylesForIcon = (FontIconComponent: React.FC<SvgIconProps>) =>
+const withStylesForIcon = (
+    FontIconComponent: (prop: SvgIconProps) => JSX.Element
+) =>
     styled(FontIconComponent, {
         shouldForwardProp: (prop: string) =>
             !['fontColor', 'fontBgColor'].includes(prop),

libs/components/editor-plugins/src/menu/inline-menu/types.ts

@@ -1,4 +1,3 @@
-import React, { type FC } from 'react';
 import type { SvgIconProps } from '@toeverything/components/ui';
 import type { Virgo, SelectionInfo } from '@toeverything/framework/virgo';
 import { inlineMenuNames, INLINE_MENU_UI_TYPES } from './config';
@@ -23,7 +22,7 @@ export type ClickItemHandler = ({
 
 export type IconItemType = {
     type: typeof INLINE_MENU_UI_TYPES['icon'];
-    icon: FC<SvgIconProps>;
+    icon: (prop: SvgIconProps) => JSX.Element;
     nameKey: InlineMenuNamesType;
     name: typeof inlineMenuNames[InlineMenuNamesType];
     onClick?: ClickItemHandler;
@@ -32,7 +31,7 @@ export type IconItemType = {
 
 export type DropdownItemType = {
     type: typeof INLINE_MENU_UI_TYPES['dropdown'];
-    icon: FC<SvgIconProps>;
+    icon: (prop: SvgIconProps) => JSX.Element;
     nameKey: InlineMenuNamesType;
     name: typeof inlineMenuNames[InlineMenuNamesType];
     children: IconItemType[];

libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx

@@ -1,7 +1,6 @@
 import {
     useState,
     useEffect,
-    FC,
     type MouseEvent,
     type DragEvent,
     type ReactNode,

libs/components/icons/src/auto-icons/index.ts

@@ -1,4 +1,4 @@
-export const timestamp = 1660239514133;
+export const timestamp = 1660270988401;
 export * from './image/image';
 export * from './format-clear/format-clear';
 export * from './backward-undo/backward-undo';

libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import type { DocMode } from './type';
 import { styled } from '@toeverything/components/ui';
 import { StatusIcon } from './StatusIcon';

libs/components/layout/src/settings-sidebar/Settings/footer/Footer.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { styled } from '@toeverything/components/ui';
 import { LastModified } from './LastModified';
 import { Logout } from './Logout';

libs/components/layout/src/settings-sidebar/Settings/footer/LastModified.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import format from 'date-fns/format';
 import { Typography, styled } from '@toeverything/components/ui';
 import { useUserAndSpaces } from '@toeverything/datasource/state';

libs/components/layout/src/settings-sidebar/Settings/footer/Logout.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { MoveToIcon } from '@toeverything/components/icons';
 import {
     ListItem,

libs/components/ui/src/button/IconButton.tsx

@@ -1,5 +1,4 @@
 import type {
-    FC,
     MouseEventHandler,
     CSSProperties,
     PropsWithChildren,

libs/components/ui/src/button/ListButton.tsx

@@ -41,7 +41,7 @@ type ListButtonProps = {
     content?: string;
     children?: () => JSX.Element;
     hover?: boolean;
-    icon?: React.FC<SvgIconProps>;
+    icon?: (prop: SvgIconProps) => JSX.Element;
 };
 
 export const ListButton = (props: ListButtonProps) => {

libs/components/ui/src/divider/Divider.tsx

@@ -1,4 +1,4 @@
-import type { FC, ReactNode, CSSProperties } from 'react';
+import type { ReactNode, CSSProperties } from 'react';
 import { styled } from '../styled';
 import { MuiDivider } from '../mui';
 import type { MuiDividerProps } from '../mui';

libs/components/ui/src/list/ListItem.tsx

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren, CSSProperties } from 'react';
+import type { PropsWithChildren, CSSProperties } from 'react';
 import { Clickable } from '../clickable';
 import { styled } from '../styled';
 

libs/components/ui/src/select/OldSelect.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { styled } from '../styled';
-import type { FC, CSSProperties, ChangeEvent } from 'react';
+import type { CSSProperties, ChangeEvent } from 'react';
 
 /**
  * WARNING: This component is about to be deprecated, use Select replace

libs/components/ui/src/slider/Slider.tsx

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import { SliderUnstyled, sliderUnstyledClasses } from '@mui/base';
 import type { SliderUnstyledProps } from '@mui/base';
 import { alpha } from '@mui/system';

libs/components/ui/src/tag/Tag.tsx

@@ -1,5 +1,4 @@
 import type {
-    FC,
     ChangeEventHandler,
     PropsWithChildren,
     CSSProperties,

libs/components/ui/src/theme/utils.tsx

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren, ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {
     createTheme,
@@ -30,8 +30,8 @@ export const ThemeProvider = ({ children }: { children?: ReactNode }) => {
 export const useTheme = () => muiUseTheme();
 
 export const withTheme = <T,>(
-    Component: FC<T & { theme: MuiTheme }>
+    Component: (prop: T & { theme: MuiTheme }) => JSX.Element
-): FC<T> => {
+): ((prop: T) => JSX.Element) => {
     return props => {
         const theme = useTheme();
         return <Component {...props} theme={theme} />;

libs/datasource/db-service/src/services/editor-block/templates/get-started-group1.json

@@ -11,8 +11,8 @@
                     {
                         "id": "wusZ8Qht8rsmFD1s",
                         "name": "No Started",
-                        "color": "#05683D",
+                        "color": "#AF1212",
-                        "background": "#C5FBE0",
+                        "background": "#FFCECE",
                         "iconName": "status"
                     },
                     {
@@ -25,8 +25,8 @@
                     {
                         "id": "u0ZgY0sRCnqMkxzn",
                         "name": "Complete",
-                        "color": "#AF1212",
+                        "color": "#05683D",
-                        "background": "#FFCECE",
+                        "background": "#C5FBE0",
                         "iconName": "status"
                     }
                 ]

libs/utils/src/error-boundary.tsx

@@ -24,10 +24,7 @@ interface ErrorBoundaryPropsWithComponent {
 
 declare function FallbackRender(
     props: FallbackProps
-): React.ReactElement<
+): React.ReactElement<unknown, string | typeof React.Component> | null;
-    unknown,
-    string | React.FunctionComponent | typeof React.Component
-> | null;
 
 interface ErrorBoundaryPropsWithRender {
     onResetKeysChange?: (
@@ -52,7 +49,7 @@ interface ErrorBoundaryPropsWithFallback {
     resetKeys?: Array<unknown>;
     fallback: React.ReactElement<
         unknown,
-        string | React.FunctionComponent | typeof React.Component
+        string | typeof React.Component
     > | null;
     FallbackComponent?: never;
     fallbackRender?: never;

tools/executors/svgOptimize/svgo.js

@@ -84,9 +84,8 @@ async function getJSXContent(name, svgCode) {
     }
     let matcher = svgrContent.match(/<svg ([^\>]+)>([\s\S]*?)<\/svg>/);
     return `
-import { FC } from 'react';
 import { SvgIcon, SvgIconProps } from '@mui/material';
-export const ${name}Icon: FC<SvgIconProps> = (props) => (
+export const ${name}Icon = (props: SvgIconProps) => (
     <SvgIcon  ${matcher[1]}>
     ${matcher[2]}
     </SvgIcon>