chore: strengthen ts lint

Author: xiejay97

.eslintrc.json

@@ -1,8 +1,8 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx", "import", "markdown"],
-  "extends": ["plugin:prettier/recommended"],
+  "plugins": ["@nrwl/nx", "import", "markdown", "jsdoc"],
+  "extends": ["plugin:prettier/recommended", "plugin:jsdoc/recommended"],
   "overrides": [
     {
       "files": ["**/*.md"],
@@ -43,20 +43,16 @@
             },
             "warnOnUnassignedImports": true
           }
-        ]
+        ],
+        "jsdoc/require-jsdoc": "off"
       }
     },
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nrwl/nx/typescript"],
       "rules": {
         "no-unreachable": "error",
-        "@typescript-eslint/array-type": [
-          "error",
-          {
-            "default": "array-simple"
-          }
-        ],
+        "@typescript-eslint/array-type": "error",
         "@typescript-eslint/ban-types": [
           "error",
           {

package.json

@@ -75,6 +75,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsdoc": "^37.6.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-prettier": "^4.0.0",

packages/site/src/app/components/route/RouteArticle.tsx

@@ -9,14 +9,14 @@ import marked, { toString } from './utils';
 
 export interface AppRouteArticleProps {
   html?: number[];
-  links?: Array<{ href: string; title: string }>;
+  links?: { href: string; title: string }[];
   children?: React.ReactNode;
 }
 
 export function AppRouteArticle(props: AppRouteArticleProps) {
   const html = props.html ? marked(toString(props.html)) : undefined;
 
-  const [links, setLinks] = useImmer<Array<{ href: string; title: string }>>(props.links ?? []);
+  const [links, setLinks] = useImmer<{ href: string; title: string }[]>(props.links ?? []);
   const [menuOpen, setMenuOpen] = useState(false);
   const [el, ref] = useRefCallback();
 
@@ -54,7 +54,7 @@ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
 
   useLayoutEffect(() => {
     if (isUndefined(props.links)) {
-      const arr: Array<{ href: string; title: string }> = [];
+      const arr: { href: string; title: string }[] = [];
       document.querySelectorAll('.app-route-article h2').forEach((el) => {
         arr.push({ href: '#' + el.id, title: el.id });
       });

packages/site/src/app/components/route/component/ComponentRouteArticle.tsx

@@ -13,7 +13,7 @@ export interface AppComponentRouteArticleProps {
   description: number[];
   api: number[];
   demos: React.ReactNode;
-  links: Array<{ href: string; title: string }>;
+  links: { href: string; title: string }[];
 }
 
 export function AppComponentRouteArticle(props: AppComponentRouteArticleProps) {

packages/site/src/app/components/sidebar/Sidebar.tsx

@@ -18,17 +18,18 @@ export function AppSidebar() {
 
   useEffect(() => {
     if (pageMounted && window.location.href.includes(String.raw`/components/`)) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const to = window.location.href.match(/\/components\/[a-zA-Z]+/)![0];
-      menu.forEach((group) => {
-        const child = group.children.find((child) => child.to === to);
-        if (child) {
-          setActiveId(child.title);
-        }
-      });
+      const to = window.location.href.match(/\/components\/[a-zA-Z]+/)?.[0];
+      if (to) {
+        menu.forEach((group) => {
+          const child = group.children.find((child) => child.to === to);
+          if (child) {
+            setActiveId(child.title);
+          }
+        });
 
-      if (to === '/components/Interface') {
-        setActiveId('Interface');
+        if (to === '/components/Interface') {
+          setActiveId('Interface');
+        }
       }
     }
   }, [pageMounted, setActiveId]);

packages/ui/src/components/_alert-dialog/AlertDialog.tsx

@@ -51,21 +51,16 @@ export function DAlertDialog(props: DAlertDialogProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    <>
-      {!dHidden && (
-        <div
-          {...restProps}
-          ref={dDialogRef}
-          role="alertdialog"
-          aria-modal="true"
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          {children}
-        </div>
-      )}
-    </>
+  return dHidden ? null : (
+    <div
+      {...restProps}
+      ref={dDialogRef}
+      role="alertdialog"
+      aria-modal="true"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+    </div>
   );
 }

packages/ui/src/components/_dialog/Dialog.tsx

@@ -53,22 +53,17 @@ export function DDialog(props: DDialogProps) {
     };
   }, [asyncCapture, dEscClosable, dVisible, onClose]);
 
-  return (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    <>
-      {!(dDestroy && dHidden) && (
-        <div
-          {...restProps}
-          ref={dDialogRef}
-          className={getClassName(className, `${dPrefix}dialog`)}
-          style={mergeStyle({ display: dHidden ? 'none' : undefined }, style)}
-          role="dialog"
-          aria-modal="true"
-        >
-          {dMask && <DMask dVisible={dVisible} onClose={handleMaskClose} />}
-          {children}
-        </div>
-      )}
-    </>
+  return dDestroy && dHidden ? null : (
+    <div
+      {...restProps}
+      ref={dDialogRef}
+      className={getClassName(className, `${dPrefix}dialog`)}
+      style={mergeStyle({ display: dHidden ? 'none' : undefined }, style)}
+      role="dialog"
+      aria-modal="true"
+    >
+      {dMask && <DMask dVisible={dVisible} onClose={handleMaskClose} />}
+      {children}
+    </div>
   );
 }

packages/ui/src/components/_dialog/Mask.tsx

@@ -54,8 +54,5 @@ export function DMask(props: DMaskProps) {
     ...dTransitionProps,
   });
 
-  return (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    <>{!hidden && <div {...restProps} ref={ref} className={getClassName(className, `${dPrefix}mask`)} onClick={handleClick}></div>}</>
-  );
+  return hidden ? null : <div {...restProps} ref={ref} className={getClassName(className, `${dPrefix}mask`)} onClick={handleClick}></div>;
 }

packages/ui/src/components/_select-box/SelectBox.tsx

@@ -8,6 +8,20 @@ import { getClassName, getVerticalSideStyle } from '../../utils';
 import { DPopup } from '../_popup';
 import { DIcon } from '../icon';
 
+export type DExtendsSelectBoxProps = Pick<
+  DSelectBoxProps,
+  | 'dSearchable'
+  | 'dClearIcon'
+  | 'dSize'
+  | 'dPlaceholder'
+  | 'dDisabled'
+  | 'dLoading'
+  | 'dPopupClassName'
+  | 'onClear'
+  | 'onSearch'
+  | 'onVisibleChange'
+>;
+
 export interface DSelectBoxProps extends React.HTMLAttributes<HTMLDivElement> {
   dPopupContent: React.ReactNode;
   dSuffix?: React.ReactNode;
@@ -25,7 +39,7 @@ export interface DSelectBoxProps extends React.HTMLAttributes<HTMLDivElement> {
   dAutoMaxWidth?: boolean;
   onClear?: () => void;
   onSearch?: (value: string) => void;
-  onVisibleChange?: (expanded: boolean) => void;
+  onVisibleChange?: (visible: boolean) => void;
   onRendered?: () => void;
 }
 

packages/ui/src/components/_trigger/Trigger.tsx

@@ -125,6 +125,5 @@ export function DTrigger(props: DTriggerProps) {
     return renderProps;
   }, [asyncCapture, dMouseEnterDelay, dMouseLeaveDelay, dTrigger, onTrigger]);
 
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return <>{dRender?.(renderProps)}</>;
+  return (dRender?.(renderProps) as React.ReactElement) ?? null;
 }