diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 28e6f0ea..00000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,31 +0,0 @@ -module.exports = { - env: { - browser: true, - es2021: true, - node: true, - }, - extends: [ - 'eslint:recommended', - 'plugin:react/recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:storybook/recommended', - 'plugin:prettier/recommended', - 'plugin:storybook/recommended', - ], - overrides: [], - parser: '@typescript-eslint/parser', - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - }, - plugins: ['react', '@typescript-eslint', 'prettier'], - rules: { - 'react/react-in-jsx-scope': 0, - '@typescript-eslint/no-explicit-any': 'off', - }, - settings: { - react: { - version: 'detect', - }, - }, -} diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index afc7e127..a01ea49e 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -6,9 +6,9 @@ name: val-design build and deploy on: # Triggers the workflow on push or pull request events but only for the "main" branch push: - branches: ['main'] + branches: [main] pull_request: - branches: ['main'] + branches: [main] # Allows you to run this workflow manually from the Actions tab # workflow_dispatch: diff --git a/.storybook/main.ts b/.storybook/main.ts index 74b97748..fe66dd3a 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,4 +1,5 @@ import type { StorybookConfig } from '@storybook/react-vite' + const config: StorybookConfig = { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 36dacb96..89dd1e22 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,4 +1,3 @@ -import React from 'react' import type { Preview } from '@storybook/react' import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' @@ -7,7 +6,6 @@ import '../src/styles/index.scss' import '../src/styles/storyfixed.scss' - library.add(fas) const preview: Preview = { @@ -35,5 +33,4 @@ const preview: Preview = { // ), // ] - export default preview diff --git a/README.md b/README.md index 8c0ef3ec..59ad17b3 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@
-
- + +

Welcome to val-design

val-design is a simple, lightweight React UI component library.

@@ -19,7 +19,7 @@ - + ## Description @@ -79,13 +79,15 @@ And import button： ```jsx import { Button } from 'val-design' -const App = () => ( - <> - - -) +function App() { + return ( + <> + + + ) +} ``` ## Project Activity diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 00000000..e36acc4d --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,35 @@ +// module.exports = { +// env: { +// browser: true, +// es2021: true, +// node: true, +// }, +// extends: [ +// 'eslint:recommended', +// 'plugin:react/recommended', +// 'plugin:@typescript-eslint/recommended', +// 'plugin:storybook/recommended', +// 'plugin:prettier/recommended', +// 'plugin:storybook/recommended', +// ], +// overrides: [], +// parser: '@typescript-eslint/parser', +// parserOptions: { +// ecmaVersion: 'latest', +// sourceType: 'module', +// }, +// plugins: ['react', '@typescript-eslint', 'prettier'], +// rules: { +// 'react/react-in-jsx-scope': 0, +// '@typescript-eslint/no-explicit-any': 'off', +// }, +// settings: { +// react: { +// version: 'detect', +// }, +// }, +// } + +import antfu from '@antfu/eslint-config' + +export default antfu() diff --git a/package.json b/package.json index 0baae7c2..134c7d35 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,16 @@ { "name": "val-design", + "type": "module", "version": "0.0.46", "private": false, - "license": "MIT", "description": "React UI component library", "author": "Cupid Valentine", - "type": "module", + "license": "MIT", + "homepage": "https://valcosmos.github.io/val-design", + "repository": { + "type": "git", + "url": "https://github.com/valcosmos/val-design.git" + }, "keywords": [ "val-design", "front-end", @@ -17,23 +22,18 @@ "TypeScript", "React Hooks" ], - "homepage": "https://valcosmos.github.io/val-design", - "repository": { - "type": "git", - "url": "https://github.com/valcosmos/val-design.git" - }, - "files": [ - "dist" - ], "main": "dist/index.es.js", "module": "dist/index.es.js", - "types": "dist/index.d.ts", "unpkg": "dist/index.umd.js", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], "scripts": { "dev": "vite", "preview": "vite preview", - "lint": "eslint --ext js,ts,tsx src", - "lint:fix": "eslint --fix --ext js,ts,tsx src --max-warnings 5", + "lint": "eslint .", + "lint:fix": "eslint . --fix", "format": "prettier --check .", "format:fix": "prettier --write .", "build-ts": "tsc -p tsconfig.build.json", @@ -51,12 +51,12 @@ "build-storybook": "storybook build" }, "dependencies": { - "@fortawesome/fontawesome-svg-core": "^6.5.1", - "@fortawesome/free-solid-svg-icons": "^6.5.1", + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", "@fortawesome/react-fontawesome": "^0.2.0", "@react-spring/web": "^9.7.3", "async-validator": "^4.2.5", - "axios": "^1.6.7", + "axios": "^1.6.8", "classnames": "^2.5.1", "dayjs": "^1.11.10", "lodash-es": "^4.17.21", @@ -66,62 +66,63 @@ "uuid": "^9.0.1" }, "devDependencies": { - "@commitlint/cli": "^18.6.0", - "@commitlint/config-conventional": "^18.6.0", + "@antfu/eslint-config": "^2.13.3", + "@commitlint/cli": "^19.2.2", + "@commitlint/config-conventional": "^19.2.2", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-replace": "^5.0.5", "@rollup/plugin-terser": "^0.4.4", - "@storybook/addon-essentials": "^7.6.13", - "@storybook/addon-interactions": "^7.6.13", - "@storybook/addon-links": "^7.6.13", - "@storybook/blocks": "^7.6.13", - "@storybook/react": "^7.6.13", - "@storybook/react-vite": "^7.6.13", + "@storybook/addon-essentials": "^8.0.8", + "@storybook/addon-interactions": "^8.0.8", + "@storybook/addon-links": "^8.0.8", + "@storybook/blocks": "^8.0.8", + "@storybook/react": "^8.0.8", + "@storybook/react-vite": "^8.0.8", "@storybook/testing-library": "^0.2.2", "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^14.2.1", + "@testing-library/react": "^15.0.2", "@types/fs-extra": "^11.0.4", "@types/lodash-es": "^4.17.12", - "@types/react-dom": "^18.2.18", + "@types/react-dom": "^18.2.25", "@types/react-transition-group": "^4.4.10", "@types/uuid": "^9.0.8", - "@typescript-eslint/eslint-plugin": "^6.21.0", - "@typescript-eslint/parser": "^6.21.0", + "@typescript-eslint/eslint-plugin": "^7.6.0", + "@typescript-eslint/parser": "^7.6.0", "@vitejs/plugin-react": "^4.2.1", "@vitejs/plugin-react-swc": "^3.6.0", "@vitest/coverage-c8": "^0.33.0", "babel-loader": "^9.1.3", "child_process": "^1.0.2", "dirname-filename-esm": "^1.1.1", - "eslint": "^8.56.0", + "eslint": "^9.0.0", "eslint-config-prettier": "^9.1.0", "eslint-config-standard": "^17.1.0", "eslint-plugin-import": "^2.29.1", - "eslint-plugin-n": "^16.6.2", + "eslint-plugin-n": "^17.2.1", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-promise": "^6.1.1", - "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-storybook": "^0.6.15", + "eslint-plugin-storybook": "^0.8.0", "fs-extra": "^11.2.0", "handlebars": "^4.7.8", - "husky": "^9.0.10", + "husky": "^9.0.11", "jsdom": "^24.0.0", "path-exists": "^5.0.0", "prettier": "^3.2.5", "prop-types": "^15.8.1", "rimraf": "^5.0.5", - "rollup": "^4.9.6", + "rollup": "^4.14.3", "rollup-plugin-exclude-dependencies-from-bundle": "^1.1.23", "rollup-plugin-sass": "^1.12.21", "rollup-plugin-typescript2": "^0.36.0", - "sass": "^1.70.0", - "storybook": "^7.6.13", + "sass": "^1.75.0", + "storybook": "^8.0.8", "ts-node": "^10.9.2", - "typescript": "^5.3.3", - "vite": "^5.0.12", - "vitest": "^1.2.2" + "typescript": "^5.4.5", + "vite": "^5.2.8", + "vitest": "^1.5.0" } } diff --git a/rollup.esm.config.js b/rollup.esm.config.js index b0eb28f2..a8a74e3c 100644 --- a/rollup.esm.config.js +++ b/rollup.esm.config.js @@ -1,5 +1,5 @@ -import baseConfig from './rollup.config' import excludeDependenciesFromBundle from 'rollup-plugin-exclude-dependencies-from-bundle' +import baseConfig from './rollup.config' const config = { ...baseConfig, diff --git a/rollup.umd.config.js b/rollup.umd.config.js index b2b009eb..70d9c20e 100644 --- a/rollup.umd.config.js +++ b/rollup.umd.config.js @@ -4,9 +4,9 @@ // import json from '@rollup/plugin-json' // import sass from 'rollup-plugin-sass' // // import excludeDependenciesFromBundle from 'rollup-plugin-exclude-dependencies-from-bundle' -import baseConfig from './rollup.config' import replace from '@rollup/plugin-replace' -import terser from '@rollup/plugin-terser' +import terser from '@rollup/plugin-terser' +import baseConfig from './rollup.config' // const overrides = { // compilerOptions: { @@ -27,16 +27,16 @@ const config = { exports: 'named', // 设置排除的包在cdn引入时的全局变量名 globals: { - react: 'React', + 'react': 'React', 'react-dom': 'ReactDOM', - axios: 'Axios', + 'axios': 'Axios', }, plugins: [terser()], }, ], plugins: [ replace({ - preventAssignment: true, + 'preventAssignment': true, 'process.env.NODE_ENV': JSON.stringify('production'), }), ...baseConfig.plugins, diff --git a/scripts/create.ts b/scripts/create.ts index ef16e4e9..bd48b0e9 100644 --- a/scripts/create.ts +++ b/scripts/create.ts @@ -7,10 +7,11 @@ // const fetch = require('node-fetch') import path from 'node:path' +import { spawn } from 'node:child_process' +import process from 'node:process' import glob from 'glob' import fs from 'fs-extra' import chalk from 'chalk' -import { spawn } from 'child_process' import handlebars from 'handlebars' import { pathExistsSync } from 'path-exists' @@ -21,8 +22,9 @@ const __dirname = dirname(import.meta) * abc-xyz => AbcXyz * @param {*} str */ -const varCase = (str: string) => - str.replace(/-[a-z]/g, m => m[1].toUpperCase()).replace(/^.{1}/, m => m.toUpperCase()) +function varCase(str: string) { + return str.replace(/-[a-z]/g, m => m[1].toUpperCase()).replace(/^.{1}/, m => m.toUpperCase()) +} const lowCase = (str: string) => str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^-/, '') async function create() { @@ -41,7 +43,7 @@ async function create() { const tplFiles = glob.sync(path.join(__dirname, 'template/*.hbs')) - tplFiles.forEach(async filePath => { + tplFiles.forEach(async (filePath) => { const content = await fs.readFile(filePath, 'utf-8') const template = handlebars.compile(content) const result = template({ diff --git a/src/App.tsx b/src/App.tsx index 98eb9301..4880bdf2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,11 +12,17 @@ function App() {

Hello Vite + React!

- Edit App.tsx and save to test HMR updates. + Edit + {' '} + App.tsx + {' '} + and save to test HMR updates.

{ } }) -test('Alert component should work', () => { +it('alert component should work', () => { const { getByText } = render() const element = getByText('alert') expect(element).toBeInTheDocument() expect(element.className.includes('v-alert')).toBe(true) }) -test('Alert can be closed', () => { +it('alert can be closed', () => { const onAlertClose = vi.fn() const { getByText } = render() const alert = getByText('alert') @@ -25,8 +25,8 @@ test('Alert can be closed', () => { expect(onAlertClose).toHaveBeenCalled() }) -test('Alert type should work', () => { - const { getByText } = render() +it('alert type should work', () => { + const { getByText } = render() const alert = getByText('alert') expect(alert).toBeInTheDocument() expect(alert.parentElement).toHaveClass('v-alert-success') diff --git a/src/components/Alert/alert.tsx b/src/components/Alert/alert.tsx index 2f8b6a0a..c9d290f0 100644 --- a/src/components/Alert/alert.tsx +++ b/src/components/Alert/alert.tsx @@ -1,4 +1,5 @@ -import React, { FC, useState } from 'react' +import type { FC } from 'react' +import React, { useState } from 'react' import classNames from 'classnames' import Icon from '../Icon' import Transition from '../Transition' @@ -38,7 +39,7 @@ export interface AlertProps { * * ``` */ -export const Alert: FC = props => { +export const Alert: FC = (props) => { const [hide, setHide] = useState(false) const { title, description, type, onClose, closable } = props const classes = classNames('v-alert', { @@ -47,12 +48,10 @@ export const Alert: FC = props => { const titleClass = classNames('v-alert-title', { 'bold-title': description, }) - const handleClose = (e: React.MouseEvent) => { - console.log(e) - - if (onClose) { + const handleClose = () => { + if (onClose) onClose() - } + setHide(true) } return ( diff --git a/src/components/AutoComplete/autoComplete.stories.tsx b/src/components/AutoComplete/autoComplete.stories.tsx index f01b36d7..17d99497 100644 --- a/src/components/AutoComplete/autoComplete.stories.tsx +++ b/src/components/AutoComplete/autoComplete.stories.tsx @@ -1,10 +1,10 @@ import React from 'react' -import { ComponentStory, ComponentMeta } from '@storybook/react' +import type { ComponentMeta, ComponentStory } from '@storybook/react' import { action } from '@storybook/addon-actions' -import { AutoComplete } from './autoComplete' import axios from 'axios' +import { AutoComplete } from './autoComplete' -const handleFetch = (query: string) => { +function handleFetch(query: string) { // return arr.filter((item) => parseInt(item) > parseInt(query)) return axios .get(`https://api.github.com/search/users?q=${query}`) diff --git a/src/components/AutoComplete/autoComplete.tsx b/src/components/AutoComplete/autoComplete.tsx index 2b43c249..2a32fbc2 100644 --- a/src/components/AutoComplete/autoComplete.tsx +++ b/src/components/AutoComplete/autoComplete.tsx @@ -1,25 +1,23 @@ -import React, { +import type { ChangeEvent, FC, - ReactElement, - useEffect, - useState, KeyboardEvent, - useRef, + ReactElement, } from 'react' +import React, { useEffect, useRef, useState } from 'react' +import classNames from 'classnames' import Icon from '../Icon' import Transition from '../Transition' -import Input, { InputProps } from '../Input' +import type { InputProps } from '../Input' +import Input from '../Input' import { useDebounce } from '../../hooks/useDebounce' import { useClickOutside } from '../../hooks/useClickOutside' -import classNames from 'classnames' - /** * 用于处理复杂数据结构 eg:{value:'11', key:'22'} * 用户可自定义 @@ -59,7 +57,7 @@ export interface AutoCompleteProps extends Omit { * * ``` */ -export const AutoComplete: FC = props => { +export const AutoComplete: FC = (props) => { const { fetchSuggestions, onSelect, value, renderOptions, ...restProps } = props // 输入的搜索关键字 const [inputValue, setInputValue] = useState((value as string) || '') @@ -88,18 +86,19 @@ export const AutoComplete: FC = props => { const results = fetchSuggestions(debouncedValue) if (results instanceof Promise) { setLoading(true) - results.then(data => { + results.then((data) => { setSuggestions(data) setLoading(false) - if (data.length > 0) { + if (data.length > 0) setShowDropdown(true) - } }) - } else { + } + else { setSuggestions(results) setShowDropdown(true) } - } else { + } + else { setSuggestions([]) setShowDropdown(false) } @@ -117,16 +116,17 @@ export const AutoComplete: FC = props => { const handleSelect = (item: DataSourceType) => { setInputValue(item.value) setSuggestions([]) - if (onSelect) { + if (onSelect) onSelect(item) - } + triggerSearch.current = false } const highlight = (index: number) => { - if (index < 0) index = 0 - if (index >= suggestions.length) { + if (index < 0) + index = 0 + if (index >= suggestions.length) index = suggestions.length - 1 - } + setHighlightIndex(index) } const handleKeyDown = (e: KeyboardEvent) => { @@ -196,7 +196,8 @@ export const AutoComplete: FC = props => { value={inputValue} onKeyDown={handleKeyDown} onChange={handleChange} - > + > + {/* {loading && (