chore: lint (ant-design#39102)

* chore: enable tsc for demos * chore: site lint * chore: fix lint
wqs576222103 · Nov 30, 2022 · ffbb19e · ffbb19e
1 parent 02e2104
commit ffbb19e
Show file tree

Hide file tree

Showing 53 changed files with 274 additions and 279 deletions.
diff --git a/.dumi/hooks/useLocale.tsx b/.dumi/hooks/useLocale.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useLocale as useDumiLocale } from 'dumi';
 
 export interface LocaleMap<Key extends string> {

diff --git a/.dumi/hooks/useMenu.tsx b/.dumi/hooks/useMenu.tsx
@@ -1,5 +1,6 @@
-import React, { ReactNode, useMemo } from 'react';
-import { MenuProps } from 'antd';
+import type { ReactNode } from 'react';
+import React, { useMemo } from 'react';
+import type { MenuProps } from 'antd';
 import { Link, useFullSidebarData, useSidebarData } from 'dumi';
 import useLocation from './useLocation';
 
@@ -115,7 +116,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
           }
         } else {
           result.push(
-            ...group.children?.map((item) => ({
+            ...(group.children?.map((item) => ({
               label: (
                 <Link to={`${item.link}${search}`}>
                   {before}
@@ -124,7 +125,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
                 </Link>
               ),
               key: item.link.replace(/(-cn$)/g, ''),
-            })),
+            })) ?? []),
           );
         }
         return result;

diff --git a/.dumi/pages/index-cn/index.tsx b/.dumi/pages/index-cn/index.tsx
@@ -1 +1,3 @@
-export { default } from '../index/index';
+import Homepage from '../index/index';
+
+export default Homepage;
diff --git a/.dumi/pages/index/components/Banner.tsx b/.dumi/pages/index/components/Banner.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Button, Space, Typography } from 'antd';
+import { Link, useLocation } from 'dumi';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
 import { GroupMask } from './Group';
-import { Link, useLocation } from 'dumi';
 import * as utils from '../../../theme/utils';
 
 const locales = {
@@ -25,7 +25,7 @@ export interface BannerProps {
 }
 
 export default function Banner({ children }: BannerProps) {
-  const [locale, lang] = useLocale(locales);
+  const [locale] = useLocale(locales);
   const { pathname, search } = useLocation();
   const { token } = useSiteToken();
 
@@ -82,6 +82,7 @@ export default function Banner({ children }: BannerProps) {
         <img
           style={{ position: 'absolute', right: 0, top: 240, width: 240 }}
           src="https://gw.alipayobjects.com/zos/bmw-prod/b3b8dc41-dce8-471f-9d81-9a0204f27d03.svg"
+          alt="Ant Design"
         />
 
         <GroupMask
@@ -95,11 +96,13 @@ export default function Banner({ children }: BannerProps) {
           <img
             style={{ position: 'absolute', left: 0, top: 0, width: 240 }}
             src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
+            alt="bg"
           />
           {/* Image Left Top */}
           <img
             style={{ position: 'absolute', right: 120, top: 0, width: 240 }}
             src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
+            alt="bg"
           />
 
           <Typography.Title

diff --git a/.dumi/pages/index/components/BannerRecommends.tsx b/.dumi/pages/index/components/BannerRecommends.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { Skeleton, Typography } from 'antd';
+import { css } from '@emotion/react';
 import type { Extra, Icon } from './util';
 import useSiteToken from '../../../hooks/useSiteToken';
-import { Col, Row, Card, Typography, Skeleton } from 'antd';
-import { css } from '@emotion/react';
 
 const useStyle = () => {
   const { token } = useSiteToken();
@@ -52,20 +52,20 @@ export default function BannerRecommends({ extras = [], icons = [] }: BannerReco
         textAlign: 'start',
       }}
     >
-      {first3.map((extra, index) => {
+      {first3.map((extra) => {
         if (!extra) {
-          return <Skeleton key={index} />;
+          return <Skeleton key={extra.title} />;
         }
-        const icon = icons.find((icon) => icon.name === extra.source);
+        const icon = icons.find((i) => i.name === extra.source);
         return (
-          <a key={index} href={extra.href} target="_blank" css={style.card}>
+          <a key={extra.title} href={extra.href} target="_blank" css={style.card} rel="noreferrer">
             <Typography.Title level={5}>{extra.title}</Typography.Title>
             <Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
               {extra.description}
             </Typography.Paragraph>
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
               <Typography.Text>{extra.date}</Typography.Text>
-              {icon && <img src={icon.href} style={{ height: token.fontSize }} />}
+              {icon && <img src={icon.href} style={{ height: token.fontSize }} alt="banner" />}
             </div>
           </a>
         );

diff --git a/.dumi/pages/index/components/ComponentsList.tsx b/.dumi/pages/index/components/ComponentsList.tsx
@@ -1,4 +1,4 @@
-import useSiteToken from '../../../hooks/useSiteToken';
+/* eslint-disable react/jsx-pascal-case */
 import React from 'react';
 import {
   Space,
@@ -14,6 +14,7 @@ import {
 import dayjs from 'dayjs';
 import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
 import { css } from '@emotion/react';
+import useSiteToken from '../../../hooks/useSiteToken';
 import useLocale from '../../../hooks/useLocale';
 
 const SAMPLE_CONTENT_EN =

diff --git a/.dumi/pages/index/components/DesignFramework.tsx b/.dumi/pages/index/components/DesignFramework.tsx
@@ -1,9 +1,9 @@
-import useSiteToken from '../../../hooks/useSiteToken';
 import { Col, Row, Typography } from 'antd';
 import React from 'react';
 import { css } from '@emotion/react';
-import useLocale from '../../../hooks/useLocale';
 import { Link, useLocation } from 'dumi';
+import useLocale from '../../../hooks/useLocale';
+import useSiteToken from '../../../hooks/useSiteToken';
 import * as utils from '../../../theme/utils';
 
 const SECONDARY_LIST = [
@@ -150,7 +150,7 @@ export default function DesignFramework() {
 
         return (
           <Col key={index} span={8}>
-            <a css={style.cardMini} target="_blank" href={url}>
+            <a css={style.cardMini} target="_blank" href={url} rel="noreferrer">
               <img alt={title} src={img} style={{ transform: `scale(${imgScale})` }} />
 
               <Typography.Title

diff --git a/.dumi/pages/index/components/Group.tsx b/.dumi/pages/index/components/Group.tsx
@@ -58,7 +58,7 @@ export default function Group(props: GroupProps) {
         boxSizing: 'border-box',
         paddingInline: token.marginXXL,
       };
-  let childNode = (
+  const childNode = (
     <>
       <div style={{ textAlign: 'center' }}>
         <Typography.Title

diff --git a/.dumi/pages/index/components/RecommendsOld.tsx b/.dumi/pages/index/components/RecommendsOld.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Row, Col, Typography } from 'antd';
-import type { Recommendation } from './util';
 import { css } from '@emotion/react';
+import type { Recommendation } from './util';
 import useSiteToken from '../../../hooks/useSiteToken';
 
 const useStyle = () => {

diff --git a/.dumi/pages/index/components/Theme/BackgroundImage.tsx b/.dumi/pages/index/components/Theme/BackgroundImage.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import useSiteToken from '../../../../hooks/useSiteToken';
-import { COLOR_IMAGES, DEFAULT_COLOR, getClosetColor } from './colorUtil';
+import { COLOR_IMAGES, getClosetColor } from './colorUtil';
 
 export interface BackgroundImageProps {
   colorPrimary?: string;
@@ -38,6 +38,7 @@ export default function BackgroundImage({ colorPrimary, isLight }: BackgroundIma
               objectPosition: 'right top',
             }}
             src={url}
+            alt=""
           />
         );
       })}

diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx
@@ -1,10 +1,12 @@
-import useSiteToken from '../../../../hooks/useSiteToken';
 import { Input, Space, Popover } from 'antd';
-import React, { FC, useEffect, useState } from 'react';
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
 import { css } from '@emotion/react';
 import { TinyColor } from '@ctrl/tinycolor';
+import type { ColorPanelProps } from 'antd-token-previewer/es/ColorPanel';
+import ColorPanel from 'antd-token-previewer/es/ColorPanel';
 import { PRESET_COLORS } from './colorUtil';
-import ColorPanel, { ColorPanelProps } from 'antd-token-previewer/es/ColorPanel';
+import useSiteToken from '../../../../hooks/useSiteToken';
 
 const useStyle = () => {
   const { token } = useSiteToken();
@@ -109,10 +111,7 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
                 key={color}
                 overlayInnerStyle={{ padding: 0 }}
                 content={
-                  <DebouncedColorPanel
-                    color={value || ''}
-                    onChange={(color) => onChange?.(color)}
-                  />
+                  <DebouncedColorPanel color={value || ''} onChange={(c) => onChange?.(c)} />
                 }
                 trigger="click"
                 showArrow={false}

diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -85,6 +85,7 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {
                 onClick={() => {
                   onChange?.(theme);
                 }}
+                alt=""
               />
             </div>
             <span>{locale[theme as keyof typeof locale]}</span>

diff --git a/.dumi/pages/index/components/Theme/colorUtil.ts b/.dumi/pages/index/components/Theme/colorUtil.ts
@@ -52,9 +52,9 @@ export function getClosetColor(colorPrimary?: string | null) {
   const distance = COLOR_IMAGES.map(({ color }) => {
     const colorObj = new TinyColor(color).toRgb();
     const dist = Math.sqrt(
-      Math.pow(colorObj.r - colorPrimaryRGB.r, 2) +
-        Math.pow(colorObj.g - colorPrimaryRGB.g, 2) +
-        Math.pow(colorObj.b - colorPrimaryRGB.b, 2),
+      (colorObj.r - colorPrimaryRGB.r) ** 2 +
+        (colorObj.g - colorPrimaryRGB.g) ** 2 +
+        (colorObj.b - colorPrimaryRGB.b) ** 2,
     );
 
     return { color, dist };

diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx
@@ -2,33 +2,34 @@ import * as React from 'react';
 import { css } from '@emotion/react';
 import { TinyColor } from '@ctrl/tinycolor';
 import {
-  HomeOutlined,
-  FolderOutlined,
   BellOutlined,
+  FolderOutlined,
+  HomeOutlined,
   QuestionCircleOutlined,
 } from '@ant-design/icons';
-import useLocale from '../../../../hooks/useLocale';
-import useSiteToken from '../../../../hooks/useSiteToken';
+import type { MenuProps } from 'antd';
 import {
-  Typography,
-  Layout,
-  Menu,
   Breadcrumb,
-  MenuProps,
-  Space,
-  ConfigProvider,
+  Button,
   Card,
+  ConfigProvider,
   Form,
+  Layout,
+  Menu,
   Radio,
+  Space,
   theme,
-  Button,
+  Typography,
 } from 'antd';
-import ThemePicker, { THEME } from './ThemePicker';
+import useLocale from '../../../../hooks/useLocale';
+import useSiteToken from '../../../../hooks/useSiteToken';
+import type { THEME } from './ThemePicker';
+import ThemePicker from './ThemePicker';
 import ColorPicker from './ColorPicker';
 import RadiusPicker from './RadiusPicker';
 import Group from '../Group';
 import BackgroundImage from './BackgroundImage';
-import { getClosetColor, DEFAULT_COLOR, getAvatarURL, PINK_COLOR } from './colorUtil';
+import { DEFAULT_COLOR, getAvatarURL, getClosetColor, PINK_COLOR } from './colorUtil';
 
 const { Header, Content, Sider } = Layout;
 
@@ -179,10 +180,6 @@ const useStyle = () => {
   };
 };
 
-interface PickerProps {
-  title: React.ReactNode;
-}
-
 // ========================== Menu Config ==========================
 const subMenuItems: MenuProps['items'] = [
   {
@@ -403,6 +400,7 @@ export default function Theme() {
                         ? undefined
                         : `drop-shadow(30px 0 0 ${logoColor})`,
                   }}
+                  alt=""
                 />
               </div>
               <h1>Ant Design 5.0</h1>
@@ -517,6 +515,7 @@ export default function Theme() {
                 height: 500,
               }}
               src="https://gw.alipayobjects.com/zos/bmw-prod/bd71b0c6-f93a-4e52-9c8a-f01a9b8fe22b.svg"
+              alt=""
             />
             {/* Image Right Bottom */}
             <img
@@ -528,6 +527,7 @@ export default function Theme() {
                 height: 287,
               }}
               src="https://gw.alipayobjects.com/zos/bmw-prod/84ad805a-74cb-4916-b7ba-9cdc2bdec23a.svg"
+              alt=""
             />
           </div>
 
@@ -542,11 +542,13 @@ export default function Theme() {
             <img
               style={{ ...posStyle, left: 0, top: -100, height: 500 }}
               src="https://gw.alipayobjects.com/zos/bmw-prod/a213184a-f212-4afb-beec-1e8b36bb4b8a.svg"
+              alt=""
             />
             {/* Image Right Bottom */}
             <img
               style={{ ...posStyle, right: 0, bottom: -100, height: 287 }}
               src="https://gw.alipayobjects.com/zos/bmw-prod/bb74a2fb-bff1-4d0d-8c2d-2ade0cd9bb0d.svg"
+              alt=""
             />
           </div>
 

diff --git a/.dumi/pages/index/index.tsx b/.dumi/pages/index/index.tsx
@@ -1,29 +1,14 @@
 import React from 'react';
 import { useLocale as useDumiLocale } from 'dumi';
-import { css } from '@emotion/react';
+import { ConfigProvider } from 'antd';
 import useLocale from '../../hooks/useLocale';
 import Banner from './components/Banner';
 import Group from './components/Group';
 import { useSiteData } from './components/util';
-import useSiteToken from '../../hooks/useSiteToken';
 import Theme from './components/Theme';
 import BannerRecommends from './components/BannerRecommends';
 import ComponentsList from './components/ComponentsList';
 import DesignFramework from './components/DesignFramework';
-import { ConfigProvider } from 'antd';
-
-const useStyle = () => {
-  const { token } = useSiteToken();
-
-  return {
-    container: css`
-      // padding: 0 116px;
-
-      // background: url(https://gw.alipayobjects.com/zos/bmw-prod/5741382d-cc22-4ede-b962-aea287a1d1a1/l4nq43o8_w2646_h1580.png);
-      // background-size: 20% 10%;
-    `,
-  };
-};
 
 const locales = {
   cn: {
@@ -47,9 +32,7 @@ const Homepage: React.FC = () => {
   const { id: localeId } = useDumiLocale();
   const localeStr = localeId === 'zh-CN' ? 'cn' : 'en';
 
-  const [siteData, loading] = useSiteData();
-
-  const style = useStyle();
+  const [siteData] = useSiteData();
 
   return (
     <ConfigProvider theme={{ algorithm: undefined }}>
@@ -58,7 +41,7 @@ const Homepage: React.FC = () => {
           <BannerRecommends extras={siteData?.extras?.[localeStr]} icons={siteData?.icons} />
         </Banner>
 
-        <div css={style.container}>
+        <div>
           <Theme />
           <Group
             background="#fff"
@@ -79,6 +62,7 @@ const Homepage: React.FC = () => {
                 <img
                   style={{ position: 'absolute', left: 0, top: -50, height: 160 }}
                   src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
+                  alt=""
                 />
               </>
             }

diff --git a/.dumi/pages/theme-editor-cn/index.tsx b/.dumi/pages/theme-editor-cn/index.tsx
@@ -1 +1,3 @@
-export { default } from '../theme-editor/index';
+import ThemeEditor from '../theme-editor';
+
+export default ThemeEditor;
-Original file line number
+Diff line change
@@ Expand Up @@
                     onClick={() => {
                       onChange?.(theme);
                     }}
+                    alt=""
                   />
                 </div>
                 <span>{locale[theme as keyof typeof locale]}</span>
@@ Expand Down @@