netless-io · BlackHole1 · Aug 11, 2021 · Aug 11, 2021
diff --git a/packages/flat-components/.eslintignore b/packages/flat-components/.eslintignore
@@ -1,3 +1,5 @@
 node_modules/
 dist/
 public/
+storybook-static/
+.eslintrc.js
diff --git a/packages/flat-components/.eslintrc.js b/packages/flat-components/.eslintrc.js
@@ -1,15 +1,20 @@
 module.exports = {
+    parser: "@typescript-eslint/parser",
     extends: [
         "eslint:recommended",
         "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
         "react-app",
         "plugin:jsx-a11y/recommended",
         "plugin:@netless/recommended",
+        "plugin:prettier/recommended",
     ],
-    plugins: ["jsx-a11y", "react", "prettier"],
+    plugins: ["jsx-a11y", "react", "@netless", "prettier", "@typescript-eslint"],
     parserOptions: {
         ecmaVersion: 2018,
-        sourceType: "module",
+        project: "tsconfig.json",
+        tsconfigRootDir: __dirname,
         ecmaFeatures: {
             jsx: true,
         },
@@ -205,6 +210,56 @@ module.exports = {
         "@typescript-eslint/no-redeclare": "off",
         "no-use-before-define": "off",
         "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/array-type": [
+            "error",
+            {
+                default: "array-simple",
+                readonly: "array-simple",
+            },
+        ],
+        "@typescript-eslint/consistent-type-assertions": "error",
+        "@typescript-eslint/explicit-member-accessibility": [
+            "error",
+            {
+                accessibility: "explicit",
+                overrides: {
+                    accessors: "explicit",
+                    constructors: "explicit",
+                },
+            },
+        ],
+        "@typescript-eslint/member-delimiter-style": [
+            "error",
+            {
+                multiline: {
+                    delimiter: "semi",
+                    requireLast: true,
+                },
+                singleline: {
+                    delimiter: "semi",
+                    requireLast: false,
+                },
+            },
+        ],
+        "@typescript-eslint/no-unused-expressions": "error",
+        "@typescript-eslint/prefer-namespace-keyword": "error",
+        "@typescript-eslint/quotes": ["error", "double"],
+        "@typescript-eslint/semi": ["error", "always"],
+        "@typescript-eslint/type-annotation-spacing": "error",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unsafe-return": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/unbound-method": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "prettier/prettier": "error",
+        "@typescript-eslint/restrict-template-expressions": "off",
+        "@typescript-eslint/no-misused-promises": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-var-requires": "off",
     },
 
     overrides: [

diff --git a/packages/flat-components/.storybook/main.js b/packages/flat-components/.storybook/main.js
@@ -1,3 +1,7 @@
+const path = require("path");
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+const ESLintPlugin = require("eslint-webpack-plugin");
+
 module.exports = {
     stories: [
         "../src/**/*.stories.mdx",
@@ -17,6 +21,23 @@ module.exports = {
     webpackFinal: async config => {
         setupUrlLoader(config);
 
+        config.plugins.push(
+            new ESLintPlugin({
+                fix: true,
+                extensions: ["ts", "tsx"],
+            }),
+            new ForkTsCheckerWebpackPlugin({
+                typescript: {
+                    configFile: path.resolve(__dirname, "..", "tsconfig.json"),
+                    diagnosticOptions: {
+                        semantic: true,
+                        syntactic: true,
+                        declaration: true,
+                    },
+                },
+            }),
+        );
+
         config.module.rules.unshift({
             test: /\.(sass|scss)(\?.*)?$/i,
             sideEffects: true,

diff --git a/packages/flat-components/package.json b/packages/flat-components/package.json
@@ -71,9 +71,10 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-app": "^6.2.2",
+    "eslint-webpack-plugin": "^3.0.1",
     "faker": "^5.4.0",
     "flat-types": "^0.1.0",
-    "fork-ts-checker-webpack-plugin": "^6.0.4",
+    "fork-ts-checker-webpack-plugin": "^6.3.2",
     "i18next": "^20.3.1",
     "i18next-browser-languagedetector": "^6.0.1",
     "less": "^3.12.2",

diff --git a/...-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/TopBarRightBtn.stories.tsx b/...-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/TopBarRightBtn.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, Story } from "@storybook/react";
 import React from "react";
 import { TopBarRightBtn, TopBarRightBtnProps } from ".";
-import faker from "faker"
+import faker from "faker";
 import { UserAddOutlined } from "@ant-design/icons";
 
 const storyMeta: Meta = {
@@ -15,5 +15,5 @@ export const Overview: Story<TopBarRightBtnProps> = args => <TopBarRightBtn {...
 Overview.args = {
     title: "Hello, world",
     disabled: faker.random.boolean(),
-    icon: <UserAddOutlined />
+    icon: <UserAddOutlined />,
 };
diff --git a/...-components/src/components/ClassroomPage/TopBar/TopBarRoundBtn/TopBarRoundBtn.stories.tsx b/...-components/src/components/ClassroomPage/TopBar/TopBarRoundBtn/TopBarRoundBtn.stories.tsx
@@ -16,5 +16,5 @@ Overview.args = {
     dark: faker.random.boolean(),
     icon: <UserAddOutlined />,
     className: "pa2",
-    children: "Hello, world!"
+    children: "Hello, world!",
 };
diff --git a/packages/flat-components/src/components/CloudStorage/CloudStorageFileTitle/index.tsx b/packages/flat-components/src/components/CloudStorage/CloudStorageFileTitle/index.tsx
@@ -53,8 +53,13 @@ export const CloudStorageFileTitle = React.memo<CloudStorageFileTitleProps>(
 
         return (
             <span
-                title={`${isConvertError ? t('transcoding-failure') : isConverting ? t('transcoding-in-progress') : ""
-                    }${fileName}`}
+                title={`${
+                    isConvertError
+                        ? t("transcoding-failure")
+                        : isConverting
+                        ? t("transcoding-in-progress")
+                        : ""
+                }${fileName}`}
                 {...restProps}
                 className={classNames(restProps.className, "cloud-storage-file-title", {
                     "is-convert-ready": !isConverting && !isConvertError,

diff --git a/packages/flat-components/src/components/CloudStorage/CloudStorageUploadItem/index.tsx b/packages/flat-components/src/components/CloudStorage/CloudStorageUploadItem/index.tsx
@@ -64,7 +64,9 @@ export const CloudStorageUploadItem: React.FC<CloudStorageUploadItemProps> = ({
             case "error": {
                 return (
                     <>
-                        <span className="cloud-storage-upload-status is-error">{t('upload-fail')}</span>
+                        <span className="cloud-storage-upload-status is-error">
+                            {t("upload-fail")}
+                        </span>
                         <Button
                             className="cloud-storage-upload-status-btn"
                             shape="circle"
@@ -79,7 +81,9 @@ export const CloudStorageUploadItem: React.FC<CloudStorageUploadItemProps> = ({
             case "success": {
                 return (
                     <>
-                        <span className="cloud-storage-upload-status is-success">{t('upload-success')}</span>
+                        <span className="cloud-storage-upload-status is-success">
+                            {t("upload-success")}
+                        </span>
                         <div className="cloud-storage-upload-status-btn">
                             <img width={22} height={22} src={checkSVG} aria-hidden />
                         </div>
@@ -89,7 +93,7 @@ export const CloudStorageUploadItem: React.FC<CloudStorageUploadItemProps> = ({
             default: {
                 return (
                     <>
-                        <span className="cloud-storage-upload-status">{t('pending-upload')}</span>
+                        <span className="cloud-storage-upload-status">{t("pending-upload")}</span>
                         <Button
                             className="cloud-storage-upload-status-btn"
                             shape="circle"

diff --git a/packages/flat-components/src/components/CloudStorage/CloudStorageUploadTitle/index.tsx b/packages/flat-components/src/components/CloudStorage/CloudStorageUploadTitle/index.tsx
@@ -31,7 +31,11 @@ export const CloudStorageUploadTitle = React.memo<CloudStorageUploadTitleProps>(
                     />
                 )}
                 <h1 className="cloud-storage-upload-title-content">
-                    {finishWithError ? t('upload-exception') : isFinish ? t('upload-completed') : t('transfer-list')}
+                    {finishWithError
+                        ? t("upload-exception")
+                        : isFinish
+                        ? t("upload-completed")
+                        : t("transfer-list")}
                 </h1>
                 {!isFinish && !finishWithError && total && !Number.isNaN(finished) && (
                     <span className="cloud-storage-upload-title-count">

diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderBeginTimePicker.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderBeginTimePicker.tsx
@@ -34,7 +34,7 @@ export function renderBeginTimePicker(
 
     function validateTime(): RuleObject {
         return {
-            validator: async (_, value: Date) => {
+            validator: (_, value: Date): void => {
                 if (isBefore(value, getRoughNow())) {
                     throw new Error(t("begin-time-cannot-be-in-the-past"));
                 }

diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderEndTimePicker.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderEndTimePicker.tsx
@@ -25,7 +25,7 @@ export function renderEndTimePicker(
 
     function validateTime(): RuleObject {
         return {
-            validator: async (_, value: Date) => {
+            validator: (_, value: Date): void => {
                 const beginTime: EditRoomFormValues["beginTime"] = form.getFieldValue("beginTime");
                 const compareTime = addMinutes(beginTime, MIN_CLASS_DURATION);
                 if (isBefore(value, compareTime)) {

diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx
@@ -179,7 +179,7 @@ export const renderPeriodicForm = (t: TFunction<string>, lang: string) =>
 
         function validatePeriodicEndTime(): RuleObject {
             return {
-                validator: async (_, value: Date) => {
+                validator: (_, value: Date): void => {
                     const {
                         periodic,
                         beginTime,

diff --git a/packages/flat-components/src/components/HomePage/RoomList/index.tsx b/packages/flat-components/src/components/HomePage/RoomList/index.tsx
@@ -40,10 +40,9 @@ export interface RoomListItemButton<T extends string> {
     text: string;
     disabled?: boolean;
 }
-export type RoomListItemButtons<T extends string> = (
-    | RoomListItemButton<T>
-    | RoomListItemButton<T>[]
-)[];
+export type RoomListItemButtons<T extends string> = Array<
+    RoomListItemButton<T> | Array<RoomListItemButton<T>>
+>;
 
 export interface RoomListItemProps<T extends string> {
     title: string;
@@ -121,7 +120,7 @@ function renderButtons<T extends string>(
 }
 
 function renderSubMenu<T extends string>(
-    buttons: RoomListItemButton<T>[],
+    buttons: Array<RoomListItemButton<T>>,
     overlayClassName?: string,
     onClickMenu?: (key: T) => void,
 ): React.ReactNode {
@@ -186,10 +185,10 @@ export interface RoomListProps<T extends string> {
     /** will be hidden on mobile */
     title?: string;
     /** will be title on mobile */
-    filters?: {
+    filters?: Array<{
         title: string;
         key: T;
-    }[];
+    }>;
     activeTab?: T;
     onTabActive?: (key: T) => void;
     style?: React.CSSProperties;

diff --git a/packages/flat-components/src/components/InviteModal/InviteModal.stories.tsx b/packages/flat-components/src/components/InviteModal/InviteModal.stories.tsx
@@ -30,7 +30,8 @@ Overview.args = {
     baseUrl: "https://flat-web.whiteboard.agora.io/join/34513345f235",
     userName: "Flat",
     onCopy: () => {
-        message.success("复制成功");
+        void message.success("复制成功");
     },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onCancel: () => {},
 };
diff --git a/packages/flat-components/src/components/InviteModal/index.tsx b/packages/flat-components/src/components/InviteModal/index.tsx
@@ -39,11 +39,11 @@ export const InviteModal: React.FC<InviteModalProps> = ({
             return "";
         }
 
-        const formatBeginTime = completeTimeFormat(beginTime!);
+        const formatBeginTime = completeTimeFormat(beginTime);
         const formatEndTime =
-            differenceInCalendarDays(beginTime!, endTime!) !== 0
-                ? completeTimeFormat(endTime!)
-                : onlySuffixTimeFormat(endTime!);
+            differenceInCalendarDays(beginTime, endTime) !== 0
+                ? completeTimeFormat(endTime)
+                : onlySuffixTimeFormat(endTime);
 
         return `${formatBeginTime}~${formatEndTime}`;
     }, [beginTime, endTime]);

diff --git a/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx b/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx
@@ -41,7 +41,7 @@ export const LoginContent: React.FC<LoginContentProps> = ({ onLogin, privacyURL,
                             <LoginChannel
                                 onLogin={loginChannel => {
                                     if (!isChecked) {
-                                        message.info(t("agree-terms"));
+                                        void message.info(t("agree-terms"));
                                     } else {
                                         setInPageLogin(onLogin(loginChannel));
                                     }

diff --git a/packages/flat-components/src/components/LoginPage/index.tsx b/packages/flat-components/src/components/LoginPage/index.tsx
@@ -15,7 +15,7 @@ export interface LoginPanelProps {
     serviceURL?: string;
 }
 
-export const LoginPanel: React.FC<LoginPanelProps> = (props) => {
+export const LoginPanel: React.FC<LoginPanelProps> = props => {
     return (
         <div className="login-panel-container">
             <div className="login-panel-cover">

diff --git a/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx b/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx
@@ -64,7 +64,7 @@ export const MoreMenu: React.FC<MoreMenuProps> = ({
                             userName={userName}
                             onCopy={text => {
                                 onCopyInvitation(text);
-                                message.success(t("copy-success"));
+                                void message.success(t("copy-success"));
                                 setInviteRoomVisible(false);
                             }}
                             onCancel={() => setInviteRoomVisible(false)}

diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx
@@ -13,7 +13,7 @@ import { CancelPeriodicRoomModal } from "./CancelPeriodicRoomModal";
 import { useTranslation } from "react-i18next";
 
 export interface PeriodicRoomPanelProps {
-    rooms: (RoomInfo | undefined)[];
+    rooms: Array<RoomInfo | undefined>;
     userName: string;
     isCreator: boolean;
     inviteBaseUrl: string;

diff --git a/packages/flat-components/src/components/RemoveRoomModal/RemoveRoomModal.stories.tsx b/packages/flat-components/src/components/RemoveRoomModal/RemoveRoomModal.stories.tsx
@@ -19,6 +19,8 @@ Overview.args = {
     isCreator: true,
     periodicUUID: "periodicUUID",
     isPeriodicDetailsPage: true,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onCancel: () => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onCancelRoom: () => {},
 };
diff --git a/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx b/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx
@@ -91,7 +91,7 @@ export const RoomDetailFooter = observer<RoomDetailFooterProps>(function RoomDet
                 userName={userName}
                 onCopy={text => {
                     onCopyInvitation(text);
-                    message.success(t("copy-success"));
+                    void message.success(t("copy-success"));
                     hideInviteModal();
                 }}
                 onCancel={hideInviteModal}