From 822c013fca86f3f137704eabdafd2b02bb32cae6 Mon Sep 17 00:00:00 2001 From: jaskang Date: Tue, 31 Oct 2023 16:56:03 +0800 Subject: [PATCH] feat: eslint --- .eslintrc.cjs | 73 ++++++ .vscode/settings.json | 1 - eslint.config.js => eslint.config.old.js | 0 package.json | 3 + packages/docs/core/App.tsx | 231 +++++++++++++----- packages/docs/core/components/DocSidebar.tsx | 41 ---- packages/docs/core/main.tsx | 9 +- packages/docs/pages/Button.mdx | 4 +- packages/docs/vite.config.ts | 11 +- packages/preset/index.d.ts | 6 +- .../react/src/components/Button/index.tsx | 48 ++-- packages/react/src/components/Button/style.ts | 88 +++---- .../src/components/Menu/VerticalMenu.tsx | 8 +- .../react/src/components/Sidebar/index.tsx | 8 +- packages/react/src/index.ts | 5 +- packages/react/src/utils/index.ts | 2 +- packages/react/src/utils/tw.ts | 2 +- packages/react/src/utils/types.ts | 7 + pnpm-lock.yaml | 130 +++++++++- 19 files changed, 460 insertions(+), 217 deletions(-) create mode 100644 .eslintrc.cjs rename eslint.config.js => eslint.config.old.js (100%) delete mode 100644 packages/docs/core/components/DocSidebar.tsx create mode 100644 packages/react/src/utils/types.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 00000000..dbc90118 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,73 @@ +// const files = ['**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}'] +// const tsFiles = ['**/*.{ts,cts,mts,tsx}'] +// const jsxFiles = ['**/*.{jsx,tsx}'] +// const testFiles = ['**/*.test.{js,cjs,mjs,jsx,ts,cts,mts,tsx}'] + +const perfectionistBaseConfig = { type: 'natural' } +module.exports = { + env: { + browser: true, + es2021: true, + jest: true, + node: true, + }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react/recommended', + 'plugin:react/jsx-runtime', + 'plugin:react-hooks/recommended', + ], + overrides: [], + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + ecmaVersion: 'latest', + sourceType: 'module', + }, + plugins: ['@typescript-eslint', 'react', 'react-hooks', 'import', 'perfectionist'], + rules: { + '@typescript-eslint/ban-ts-comment': 'off', + // 'simple-import-sort/imports': 'error', + // 'simple-import-sort/exports': 'error', + 'import/first': 'error', + 'import/newline-after-import': 'error', + 'import/no-duplicates': ['error', { 'prefer-inline': true }], + 'perfectionist/sort-named-exports': ['error', { ...perfectionistBaseConfig }], + 'perfectionist/sort-named-imports': ['error', { ...perfectionistBaseConfig }], + 'perfectionist/sort-exports': ['error', { ...perfectionistBaseConfig }], + 'perfectionist/sort-imports': [ + 'error', + { + groups: [ + 'type', + ['builtin', 'external'], + 'internal-type', + 'internal', + ['parent-type', 'sibling-type', 'index-type'], + ['parent', 'sibling', 'index'], + 'object', + 'unknown', + ], + 'custom-groups': { + value: {}, + type: {}, + }, + 'newlines-between': 'always', + 'internal-pattern': ['~/**'], + ...perfectionistBaseConfig, + }, + ], + }, + settings: { + react: { + version: 'detect', + }, + 'import/resolver': { + node: true, + typescript: true, + }, + }, +} diff --git a/.vscode/settings.json b/.vscode/settings.json index efe0cac2..0b7b5a2c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,6 +2,5 @@ "typescript.tsdk": "node_modules/typescript/lib", "references.preferredLocation": "peek", "tailwindCSS.experimental.configFile": "packages/docs/tailwind.config.cjs", - "eslint.experimental.useFlatConfig": true, "eslint.format.enable": true } diff --git a/eslint.config.js b/eslint.config.old.js similarity index 100% rename from eslint.config.js rename to eslint.config.old.js diff --git a/package.json b/package.json index 4e9d0c3e..dffd6e17 100644 --- a/package.json +++ b/package.json @@ -28,9 +28,12 @@ "autoprefixer": "^10.4.16", "eslint": "^8.51.0", "eslint-config-prettier": "^9.0.0", + "eslint-config-standard-with-typescript": "^39.1.1", + "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-n": "^16.2.0", + "eslint-plugin-perfectionist": "^2.2.0", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", diff --git a/packages/docs/core/App.tsx b/packages/docs/core/App.tsx index beec1718..5193a3f6 100644 --- a/packages/docs/core/App.tsx +++ b/packages/docs/core/App.tsx @@ -1,71 +1,180 @@ +import { AnchorGroup } from '@zonda/react' import { useState } from 'react' + import Button from '../pages/Button.mdx' -import { AnchorGroup } from '@zonda/react' function App() { const [currKey, setCurrKey] = useState('assadfas') - const onChange = (key: string) => setCurrKey(key) + const onChange = (key: string) => { + setCurrKey(key) + } return ( -
-
- +
+
+
+
+
+ + Tailwind CSS home page + + + + +
+ +
+
+
+
+ +
+
-
-
-
-
+
+
+
+
+
+ On this page +
diff --git a/packages/docs/core/components/DocSidebar.tsx b/packages/docs/core/components/DocSidebar.tsx deleted file mode 100644 index 64858071..00000000 --- a/packages/docs/core/components/DocSidebar.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import type { HTMLAttributes, ReactNode } from 'react' - -type SidebarItem = { - group: string - children?: { - key: string - label: ReactNode - }[] -} - -interface SidebarProps extends HTMLAttributes { - items: SidebarItem[] -} - -export const DocSidebar = ({ items }: SidebarProps) => { - return ( - - ) -} diff --git a/packages/docs/core/main.tsx b/packages/docs/core/main.tsx index d4b15d10..4b1402e2 100644 --- a/packages/docs/core/main.tsx +++ b/packages/docs/core/main.tsx @@ -1,10 +1,11 @@ -import './main.css' -import React from 'react' import ReactDOM from 'react-dom/client' +import React from 'react' + +import './main.css' import App from './App' ReactDOM.createRoot(document.getElementById('root')!).render( - , -) + +) diff --git a/packages/docs/pages/Button.mdx b/packages/docs/pages/Button.mdx index 0a156ace..2dee1038 100644 --- a/packages/docs/pages/Button.mdx +++ b/packages/docs/pages/Button.mdx @@ -1,13 +1,11 @@ import { Button } from '@zonda/react' -import { DocSidebar } from '../core/components/DocSidebar' # Button
- diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts index d8eb601f..7092f9a2 100644 --- a/packages/docs/vite.config.ts +++ b/packages/docs/vite.config.ts @@ -2,16 +2,13 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' // you can also use @vitejs/plugin-react-swc import mdx from '@mdx-js/rollup' -import { dirname, resolve } from 'node:path'; -import { fileURLToPath } from 'node:url'; +import { dirname, resolve } from 'node:path' +import { fileURLToPath } from 'node:url' -const __dirname = dirname(fileURLToPath(import.meta.url)); +const __dirname = dirname(fileURLToPath(import.meta.url)) export default defineConfig({ - plugins: [ - {enforce: 'pre',...mdx() }, - react(), - ], + plugins: [{ enforce: 'pre', ...mdx() }, react()], resolve: { alias: { '@zonda/react': resolve(__dirname, '../react/src'), diff --git a/packages/preset/index.d.ts b/packages/preset/index.d.ts index 9e3fd0cb..f56b000e 100644 --- a/packages/preset/index.d.ts +++ b/packages/preset/index.d.ts @@ -1,4 +1,2 @@ - - -export declare const tailwindcss: any; -export declare const unocss: any; \ No newline at end of file +export declare const tailwindcss: any +export declare const unocss: any diff --git a/packages/react/src/components/Button/index.tsx b/packages/react/src/components/Button/index.tsx index 7dd8575b..4ef6358b 100644 --- a/packages/react/src/components/Button/index.tsx +++ b/packages/react/src/components/Button/index.tsx @@ -1,47 +1,47 @@ -import { useMemo, type HTMLAttributes } from 'react' -import type { JSX } from 'react' +import type { DomProps } from '@/utils' +import type { Color } from '@/utils/colors' +import { type ReactNode, useMemo } from 'react' import { LoadingIcon } from '../Icon/LoadingIcon' -import { style } from './style' -import type { Color } from '@/utils/colors' +import { createBtnStyle } from './style' - -export interface ButtonProps extends HTMLAttributes { +export type ButtonProps = DomProps<{ + variant?: 'default' | 'ghost' | 'link' | 'outline' | 'soft' | 'solid' + size?: 'lg' | 'md' | 'sm' color?: Color - variant?: 'default' | 'solid' | 'soft' | 'outline' | 'ghost' | 'link' - size?: 'sm' | 'md' | 'lg' + icon?: ReactNode block?: boolean - pill?: boolean - square?: boolean circle?: boolean - loading?: boolean disabled?: boolean - - icon?: JSX.Element -} + loading?: boolean + pill?: boolean + square?: boolean +}> export function Button(props: ButtonProps) { const { - color = 'primary', - variant = 'default', - size = 'md', block = false, - pill = false, - square = false, circle = false, - loading = false, + color = 'primary', disabled = false, - icon, + loading = false, + pill = false, + size = 'md', + square = false, + variant = 'default', + children, + className, + style, } = props const { css, vars } = useMemo( - () => style({ variant, size, block, pill, square, circle, loading, disabled, color }), + () => createBtnStyle({ block, circle, color, disabled, loading, pill, size, square, variant }), [variant, size, block, pill, square, circle, loading, disabled, color] ) - return ( -