style: normalize tsx syntax style and lint

.eslintignore

@@ -14,3 +14,6 @@ cache
 *.pcss
 *.scss
 *.svg
+
+common/icons/vue
+common/icons/types

.eslintrc.cjs

@@ -1,4 +1,6 @@
-module.exports = {
+const { defineConfig } = require('eslint-define-config')
+
+module.exports = defineConfig({
   extends: ['@vexip-ui/eslint-config'],
   root: true,
   rules: {
@@ -34,9 +36,9 @@ module.exports = {
       }
     },
     {
-      files: ['components/**/*.tsx'],
+      files: ['**/*.spec.tsx'],
       rules: {
-        'no-sequences': 'off'
+        'react/jsx-key': 'off'
       }
     },
     {
@@ -74,4 +76,4 @@ module.exports = {
   globals: {
     __VERSION__: 'readonly'
   }
-}
+})

.github/workflows/ci.yml

@@ -36,9 +36,6 @@ jobs:
       - name: Lint
         run: pnpm run lint
 
-      - name: Lint scripts
-        run: pnpm run lint:scripts
-
       - name: Lint style
         run: pnpm run lint:style
 

.husky/.lintstagedrc

@@ -1,15 +1,15 @@
 {
-  "*.{js,jsx,ts,tsx}": [
+  "*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}": [
     "prettier --write",
     "eslint --fix"
   ],
   "{!(package)*.json,*.code-snippets,.!(browserslist|npm)*rc}": [
-    "prettier --write--parser json"
+    "prettier --write --parser json"
   ],
   "package.json": [
     "prettier --write"
   ],
-  "*.{css,scss,pcss,html}": [
+  "*.{css,scss,html}": [
     "prettier --write",
     "stylelint --fix"
   ],

.prettierignore

@@ -10,3 +10,6 @@ cache
 *.sh
 
 CHANGELOG.md
+
+common/icons/vue
+common/icons/types

.stylelintignore

@@ -15,3 +15,5 @@ node_modules
 *.svg
 *.gif
 *.md
+
+common/icons/vue

common/icons/scripts/build.ts

@@ -1,9 +1,10 @@
-import { resolve, basename } from 'node:path'
+import { basename, resolve } from 'node:path'
 import { readFile, writeFile } from 'node:fs/promises'
 import { fileURLToPath } from 'node:url'
+
 import fs from 'fs-extra'
 import { execa } from 'execa'
-import { red, cyan, green } from 'kolorist'
+import { cyan, green, red } from 'kolorist'
 import glob from 'fast-glob'
 import { format } from 'prettier'
 
@@ -95,33 +96,35 @@ async function generateVueIcons(dir: string, out: string, suffix: string) {
   let exports = ''
   let types = ''
 
-  await Promise.all(svgFiles.map(async svgFile => {
-    const fileName = basename(svgFile, '.svg')
-    const svg = (await readFile(svgFile, 'utf-8'))
-      .replace(/<!--[\s\S]*-->/, '')
-      .replace(/xmlns=".*?"/, 'style="transform: scale(0.85)"')
+  await Promise.all(
+    svgFiles.map(async svgFile => {
+      const fileName = basename(svgFile, '.svg')
+      const svg = (await readFile(svgFile, 'utf-8'))
+        .replace(/<!--[\s\S]*-->/, '')
+        .replace(/xmlns=".*?"/, 'style="transform: scale(0.85)"')
 
-    let name = toCapitalCase(fileName)
-    name = name.replace(/^(\d)/, 'I$1').replace(/-(\d)/g, '$1')
-    name += suffix
+      let name = toCapitalCase(fileName)
+      name = name.replace(/^(\d)/, 'I$1').replace(/-(\d)/g, '$1')
+      name += suffix
 
-    const vue = `
+      const vue = `
       <template>${svg}</template>
       <script lang="ts">
         import { defineComponent, markRaw } from 'vue'
         export default defineComponent(markRaw({ name: '${name}' }))
       </script>
     `
 
-    await writeFile(
-      resolve(outDir, `${fileName}.vue`),
-      format(vue, { parser: 'vue', semi: false, singleQuote: true }),
-      'utf-8'
-    )
+      await writeFile(
+        resolve(outDir, `${fileName}.vue`),
+        format(vue, { parser: 'vue', semi: false, singleQuote: true }),
+        'utf-8'
+      )
 
-    exports += `export { default as ${name} } from '.${out ? `/${out}` : ''}/${fileName}.vue'\n`
-    types += `export const ${name}: SvgIcon\n`
-  }))
+      exports += `export { default as ${name} } from '.${out ? `/${out}` : ''}/${fileName}.vue'\n`
+      types += `export const ${name}: SvgIcon\n`
+    })
+  )
 
   console.log(cyan(`generated icon vue components for: ${dir}`))
 

common/icons/vite.config.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'node:path'
 import { readFileSync } from 'node:fs'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 

common/icons/vite.full.config.ts

@@ -1,4 +1,5 @@
 import { resolve } from 'node:path'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 

common/plugins/scripts/build.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
+
 import { execa } from 'execa'
 import { red } from 'kolorist'
 
@@ -8,16 +9,9 @@ const rootDir = resolve(fileURLToPath(import.meta.url), '../..')
 const bin = (name: string) => resolve(rootDir, 'node_modules/.bin/' + name)
 
 async function main() {
-  await execa(
-    bin('tsup-node'),
-    [
-      'src/index.ts',
-      '--dts',
-      '--format',
-      'cjs,esm'
-    ],
-    { stdio: 'inherit' }
-  )
+  await execa(bin('tsup-node'), ['src/index.ts', '--dts', '--format', 'cjs,esm'], {
+    stdio: 'inherit'
+  })
 }
 
 main().catch(error => {

components/breadcrumb/tests/breadcrumb.spec.tsx

@@ -16,8 +16,8 @@ describe('Breadcrumb', () => {
   it('items', () => {
     const wrapper = mount(() => (
       <Breadcrumb>
-        <BreadcrumbItem>item1</BreadcrumbItem>
-        <BreadcrumbItem>item2</BreadcrumbItem>
+        <BreadcrumbItem>{'item1'}</BreadcrumbItem>
+        <BreadcrumbItem>{'item2'}</BreadcrumbItem>
       </Breadcrumb>
     ))
 
@@ -27,8 +27,8 @@ describe('Breadcrumb', () => {
   it('separator', () => {
     const wrapper = mount(() => (
       <Breadcrumb separator={'-'}>
-        <BreadcrumbItem>item1</BreadcrumbItem>
-        <BreadcrumbItem>item2</BreadcrumbItem>
+        <BreadcrumbItem>{'item1'}</BreadcrumbItem>
+        <BreadcrumbItem>{'item2'}</BreadcrumbItem>
       </Breadcrumb>
     ))
 
@@ -39,8 +39,8 @@ describe('Breadcrumb', () => {
     const wrapper = mount(() => (
       <Breadcrumb>
         {{
-          default: () => <BreadcrumbItem>item</BreadcrumbItem>,
-          separator: () => <span class={'sep'}>666</span>
+          default: () => <BreadcrumbItem>{'item'}</BreadcrumbItem>,
+          separator: () => <span class={'sep'}>{'666'}</span>
         }}
       </Breadcrumb>
     ))
@@ -57,7 +57,7 @@ describe('Breadcrumb', () => {
         onSelect
       },
       slots: {
-        default: () => <BreadcrumbItem label={'item'}>item</BreadcrumbItem>
+        default: () => <BreadcrumbItem label={'item'}>{'item'}</BreadcrumbItem>
       }
     })
 
@@ -73,7 +73,7 @@ describe('Breadcrumb', () => {
         onSelect
       },
       slots: {
-        default: () => <BreadcrumbItem label={'item'}>item</BreadcrumbItem>
+        default: () => <BreadcrumbItem label={'item'}>{'item'}</BreadcrumbItem>
       }
     })
 
@@ -89,7 +89,7 @@ describe('Breadcrumb', () => {
         onSeparatorClick
       },
       slots: {
-        default: () => <BreadcrumbItem label={'item'}>item</BreadcrumbItem>
+        default: () => <BreadcrumbItem label={'item'}>{'item'}</BreadcrumbItem>
       }
     })
 

components/breadcrumb/tests/ssr.spec.tsx

@@ -16,8 +16,8 @@ describe('SSR for Breadcrumb', () => {
       await renderToString(
         createSSRApp(() => (
           <Breadcrumb>
-            <BreadcrumbItem>item1</BreadcrumbItem>
-            <BreadcrumbItem>item2</BreadcrumbItem>
+            <BreadcrumbItem>{'item1'}</BreadcrumbItem>
+            <BreadcrumbItem>{'item2'}</BreadcrumbItem>
           </Breadcrumb>
         ))
       )

components/button/button.tsx

@@ -239,11 +239,11 @@ export default defineComponent({
                 slots.loading()
               )
             : (
-            <Icon
-              {...icons.value.loading}
-              effect={props.loadingEffect || icons.value.loading.effect}
-              icon={props.loadingIcon || icons.value.loading.icon}
-            ></Icon>
+              <Icon
+                {...icons.value.loading}
+                effect={props.loadingEffect || icons.value.loading.effect}
+                icon={props.loadingIcon || icons.value.loading.icon}
+              ></Icon>
               )}
         </div>
       )
@@ -255,9 +255,9 @@ export default defineComponent({
             renderLoadingIcon()
           )
         : (
-        <div class={nh.be('icon')}>
-          {slots.icon ? slots.icon() : props.icon ? <Icon icon={props.icon}></Icon> : null}
-        </div>
+          <div class={nh.be('icon')}>
+            {slots.icon ? slots.icon() : props.icon ? <Icon icon={props.icon}></Icon> : null}
+          </div>
           )
     }
 
@@ -268,9 +268,9 @@ export default defineComponent({
               renderLoadingIcon()
             )
           : (
-          <div class={nh.be('icon')}>
-            {slots.icon ? slots.icon() : <Icon icon={props.icon}></Icon>}
-          </div>
+            <div class={nh.be('icon')}>
+              {slots.icon ? slots.icon() : <Icon icon={props.icon}></Icon>}
+            </div>
             )
       }
 

components/checkbox/tests/checkbox.spec.tsx

@@ -191,7 +191,11 @@ describe('Checkbox', () => {
     const onChange = vi.fn()
     const wrapper = mount(() => (
       <CheckboxGroup disabled onChange={onChange}>
-        <Checkbox></Checkbox>,<Checkbox disabled></Checkbox>,<Checkbox disabled={false}></Checkbox>
+        <Checkbox></Checkbox>
+        {','}
+        <Checkbox disabled></Checkbox>
+        {','}
+        <Checkbox disabled={false}></Checkbox>
       </CheckboxGroup>
     ))
 

components/contextmenu/render.tsx

@@ -61,9 +61,9 @@ function renderGroupItem(item: ContextmenuConfig, nh: NameHelper) {
                   item.renderer()
                 )
               : (
-              <span class={nh.be('label')} style={{ color: item.color }}>
-                {item.label || item.key}
-              </span>
+                <span class={nh.be('label')} style={{ color: item.color }}>
+                  {item.label || item.key}
+                </span>
                 )}
             {renderItemShortcut(item, nh)}
             <div class={[nh.be('icon'), nh.be('arrow')]}>
@@ -111,9 +111,9 @@ export function renderItem({ config, nh }: { config: ContextmenuConfig, nh: Name
               config.renderer()
             )
           : (
-          <span class={nh.be('label')} style={{ color: config.color }}>
-            {config.label || config.key}
-          </span>
+            <span class={nh.be('label')} style={{ color: config.color }}>
+              {config.label || config.key}
+            </span>
             )}
         {renderItemShortcut(config, nh)}
       </DropdownItem>

components/grid/symbol.ts

@@ -2,7 +2,13 @@ import type { InjectionKey } from 'vue'
 
 export type LayoutProp = number | string | (number | string)[]
 
-export type GridJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'
+export type GridJustify =
+  | 'start'
+  | 'end'
+  | 'center'
+  | 'space-around'
+  | 'space-between'
+  | 'space-evenly'
 export type GridAlign = 'top' | 'middle' | 'bottom' | 'stretch'
 
 export interface CellFlex {

components/input/input.tsx

@@ -468,7 +468,7 @@ export default defineComponent({
                   renderSlot(slots, 'password', { plain: showPassword.value })
                 )
               : (
-              <Icon {...passwordIcon.value}></Icon>
+                <Icon {...passwordIcon.value}></Icon>
                 )}
           </div>
         )