Merge pull request #57 from js-tool-pack/format

style: 格式化
js-tool-pack · Sep 15, 2023 · d793fc1 · d793fc1
2 parents db198b6 + c009154
commit d793fc1
Show file tree

Hide file tree

Showing 351 changed files with 2,844 additions and 2,533 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,14 +9,24 @@ module.exports = {
     'plugin:jsx-a11y/recommended',
     'prettier',
     'plugin:prettier/recommended',
+    'plugin:perfectionist/recommended-line-length',
   ],
-  plugins: ['jsx-a11y'],
+  plugins: ['jsx-a11y', 'perfectionist'],
   rules: {
     // 'no-unused-vars': [ // 需要使用typescript的unused，否则会对enum误报
     '@typescript-eslint/no-unused-vars': [
       'error',
       { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
     ],
+    'perfectionist/sort-imports': [
+      'error',
+      {
+        type: 'line-length',
+        order: 'desc',
+        groups: [],
+        'newlines-between': 'never',
+      },
+    ],
   },
   overrides: [
     {

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -31,7 +31,7 @@ module.exports = {
   // 大括号内的首尾需要空格
   bracketSpacing: true,
   // 标签的反尖括号需要换行
-  bracketSameLine: true,
+  bracketSameLine: false,
   // 箭头函数，只有一个参数的时候，也需要括号
   arrowParens: 'always',
   // 每个文件格式化的范围是文件的全部内容

diff --git a/internal/playground/src/app/App.tsx b/internal/playground/src/app/App.tsx
@@ -5,15 +5,16 @@ function App() {
   return (
     <div className="app">
       <header className="app-header">
-        <img src={logo} className="app-logo" alt="logo" />
+        <img className="app-logo" src={logo} alt="logo" />
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
         <a
-          className="app-link"
           href="https://reactjs.org"
+          rel="noopener noreferrer"
+          className="app-link"
           target="_blank"
-          rel="noopener noreferrer">
+        >
           Learn React
         </a>
       </header>

diff --git a/internal/playground/src/index.tsx b/internal/playground/src/index.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
-import './index.css';
+import ReactDOM from 'react-dom/client';
 import '@pkg/components/index.scss';
 import { router } from './router';
+import React from 'react';
+import './index.css';
 // import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(

diff --git a/internal/playground/src/layouts/App.layout.tsx b/internal/playground/src/layouts/App.layout.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { Link, Outlet, useLocation } from 'react-router-dom';
-import styles from './App.layout.module.scss';
+import { Header, Layout, Aside, Main } from '@pkg/components';
+import { useLocation, Outlet, Link } from 'react-router-dom';
 import { getClassNames } from '@tool-pack/basic';
+import styles from './App.layout.module.scss';
 import { baseRouter } from '../router';
-import { Aside, Header, Layout, Main } from '@pkg/components';
+import React from 'react';
 
 export function AppLayout(): JSX.Element {
   const location = useLocation();
@@ -15,7 +15,7 @@ export function AppLayout(): JSX.Element {
     <Layout className={styles['app']} vertical>
       <Header className={styles['header']}>
         playground({location.pathname.replace(/^\//, '')})
-        <select name="mode" id="mode-selector" onChange={onSelectChange}>
+        <select onChange={onSelectChange} id="mode-selector" name="mode">
           <option value="light">light</option>
           <option value="dark">dark</option>
         </select>
@@ -26,10 +26,11 @@ export function AppLayout(): JSX.Element {
           <ul>
             {baseRouter.map((item, index) => (
               <li
-                key={item.name}
                 className={getClassNames({
                   active: item.path === location.pathname,
-                })}>
+                })}
+                key={item.name}
+              >
                 <Link to={item.path}>
                   {index + 1}. {item.name}
                 </Link>

diff --git a/internal/playground/src/layouts/Error.layout.tsx b/internal/playground/src/layouts/Error.layout.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import { useRouteError } from 'react-router-dom';
+import React from 'react';
 
 export function ErrorLayout(): JSX.Element {
   const err = useRouteError() as Error & {
-    status?: number;
     statusText?: string;
+    status?: number;
   };
   return (
     <React.Fragment>

diff --git a/internal/playground/src/reportWebVitals.ts b/internal/playground/src/reportWebVitals.ts
@@ -2,7 +2,7 @@ import type { ReportHandler } from 'web-vitals';
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import('web-vitals').then(({ getTTFB, getCLS, getFID, getFCP, getLCP }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);

diff --git a/internal/playground/src/router.tsx b/internal/playground/src/router.tsx
@@ -1,154 +1,154 @@
+import { NotFountLayout } from './layouts/NotFound.layout';
 import { createBrowserRouter } from 'react-router-dom';
-import { AppLayout } from './layouts/App.layout';
 import { ErrorLayout } from './layouts/Error.layout';
-import App from './app/App';
-import { NotFountLayout } from './layouts/NotFound.layout';
+import { AppLayout } from './layouts/App.layout';
 import { getDemos } from './utils/getDemos';
+import App from './app/App';
 
 export const baseRouter = [
   {
+    element: getDemos(import.meta.glob('~/transition/demo/*.tsx')),
     name: 'transition 动画',
     path: '/transition',
-    element: getDemos(import.meta.glob('~/transition/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/transition-group/demo/*.tsx')),
     name: 'transition-group 动画组',
     path: '/transition-group',
-    element: getDemos(import.meta.glob('~/transition-group/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/loading/demo/*.tsx')),
     name: 'loading 加载中',
     path: '/loading',
-    element: getDemos(import.meta.glob('~/loading/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/button/demo/*.tsx')),
     name: 'button 按钮',
     path: '/button',
-    element: getDemos(import.meta.glob('~/button/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/layouts/demo/*.tsx')),
     name: 'layout 布局',
     path: '/layout',
-    element: getDemos(import.meta.glob('~/layouts/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/divider/demo/*.tsx')),
     name: 'divider 分割线',
     path: '/divider',
-    element: getDemos(import.meta.glob('~/divider/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/dialog/demo/*.tsx')),
     name: 'dialog 弹窗',
     path: '/dialog',
-    element: getDemos(import.meta.glob('~/dialog/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/icon/demo/*.tsx')),
     name: 'icon 图标',
     path: '/icon',
-    element: getDemos(import.meta.glob('~/icon/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/space/demo/*.tsx')),
     name: 'space 间距',
     path: '/space',
-    element: getDemos(import.meta.glob('~/space/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/resizer/demo/*.tsx')),
     name: 'resizer 修改宽高',
     path: '/resizer',
-    element: getDemos(import.meta.glob('~/resizer/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/drawer/demo/*.tsx')),
     name: 'drawer 抽屉',
     path: '/drawer',
-    element: getDemos(import.meta.glob('~/drawer/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/message/demo/*.tsx')),
     name: 'message 信息',
     path: '/message',
-    element: getDemos(import.meta.glob('~/message/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/word-balloon/demo/*.tsx')),
     name: 'word-balloon 文字气泡',
     path: '/word-balloon',
-    element: getDemos(import.meta.glob('~/word-balloon/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/popover/demo/*.tsx')),
     name: 'popover 弹出层',
     path: '/popover',
-    element: getDemos(import.meta.glob('~/popover/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/tooltip/demo/*.tsx')),
     name: 'tooltip 文字提示',
     path: '/tooltip',
-    element: getDemos(import.meta.glob('~/tooltip/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/pop-confirm/demo/*.tsx')),
     name: 'pop-confirm 弹出确认框',
     path: '/pop-confirm',
-    element: getDemos(import.meta.glob('~/pop-confirm/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/collapse-transition/demo/*.tsx')),
     name: 'collapse-transition 折叠动画',
     path: '/collapse-transition',
-    element: getDemos(import.meta.glob('~/collapse-transition/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/collapse/demo/*.tsx')),
     name: 'collapse 折叠面板',
     path: '/collapse',
-    element: getDemos(import.meta.glob('~/collapse/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/option/demo/*.tsx')),
     name: 'option 选项',
     path: '/option',
-    element: getDemos(import.meta.glob('~/option/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/dropdown/demo/*.tsx')),
     name: 'dropdown 下拉菜单',
     path: '/dropdown',
-    element: getDemos(import.meta.glob('~/dropdown/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/number-transition/demo/*.tsx')),
     name: 'number-transition 数值动画',
     path: '/number-transition',
-    element: getDemos(import.meta.glob('~/number-transition/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/alert/demo/*.tsx')),
     name: 'alert 提示',
     path: '/alert',
-    element: getDemos(import.meta.glob('~/alert/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/switch/demo/*.tsx')),
     name: 'switch 开关',
     path: '/switch',
-    element: getDemos(import.meta.glob('~/switch/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/tag/demo/*.tsx')),
     name: 'tag 标签',
     path: '/tag',
-    element: getDemos(import.meta.glob('~/tag/demo/*.tsx')),
   },
   {
+    element: getDemos(import.meta.glob('~/select/demo/*.tsx')),
     name: 'select 选择器',
     path: '/select',
-    element: getDemos(import.meta.glob('~/select/demo/*.tsx')),
   },
   /*insert target*/
 ];
 
 export const router = createBrowserRouter([
   {
-    path: '',
-    element: <AppLayout />,
-    errorElement: <ErrorLayout />,
     children: [
       {
-        path: '/',
         element: <App />,
+        path: '/',
       },
       ...baseRouter,
     ],
+    errorElement: <ErrorLayout />,
+    element: <AppLayout />,
+    path: '',
   },
   {
-    path: '*',
     element: <NotFountLayout />,
+    path: '*',
   },
 ]);
diff --git a/internal/playground/src/utils/getDemos.tsx b/internal/playground/src/utils/getDemos.tsx
@@ -1,5 +1,5 @@
 import { Divider, Space } from '@tool-pack/react-ui';
-import React, { Suspense, useEffect } from 'react';
+import React, { useEffect, Suspense } from 'react';
 import { debounce } from '@tool-pack/basic';
 
 const scrollToHash = debounce(() => {
@@ -37,7 +37,7 @@ export function getDemos(demos: Record<string, unknown>) {
           })}
         </ol>
       </section>
-      <Divider lineStyle="double" lineColor="rgb(22, 119, 255)" />
+      <Divider lineColor="rgb(22, 119, 255)" lineStyle="double" />
       <section>
         <h2>Demo</h2>
         <Space style={{ paddingBottom: '200px' }} vertical fill>

diff --git a/internal/playground/vite.config.ts b/internal/playground/vite.config.ts
@@ -14,7 +14,6 @@ const components = Fs.readdirSync(
  */
 export default defineConfig(() => {
   return {
-    cacheDir: `./.cache`,
     resolve: {
       alias: {
         ...pkgs.reduce(
@@ -48,11 +47,12 @@ export default defineConfig(() => {
       // https://github.com/vitejs/vite/tree/main/packages/plugin-react
       react(),
     ],
-    build: {
-      sourcemap: true,
-    },
     css: {
       devSourcemap: true,
     },
+    build: {
+      sourcemap: true,
+    },
+    cacheDir: `./.cache`,
   };
 });
diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "enquirer": "^2.4.1",
     "eslint": "^8.47.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-perfectionist": "^2.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "esno": "^0.17.0",
     "execa": "^8.0.1",