@yqg/slimfit 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -0
- package/dist/esm/button/button.d.ts +4 -0
- package/dist/esm/button/button.js +6 -0
- package/dist/esm/button/index.d.ts +2 -0
- package/dist/esm/button/index.js +1 -0
- package/dist/esm/icon/icon.d.ts +1 -0
- package/dist/esm/icon/icon.js +1 -0
- package/dist/esm/icon/index.d.ts +1 -0
- package/dist/esm/icon/index.js +1 -0
- package/dist/esm/index.d.ts +3 -0
- package/dist/esm/index.js +3 -0
- package/dist/esm/typography/index.d.ts +2 -0
- package/dist/esm/typography/index.js +1 -0
- package/dist/esm/typography/typography.d.ts +3 -0
- package/dist/esm/typography/typography.js +2 -0
- package/package.json +52 -0
package/README.md
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# SlimFit 组件库
|
|
2
|
+
|
|
3
|
+
SlimFit 是一个现代化的 React 组件库,专为企业级应用设计,提供可复用、文档完善且可测试的 UI 组件。
|
|
4
|
+
|
|
5
|
+
## 特点
|
|
6
|
+
|
|
7
|
+
- 基于 React 18+ 和 TypeScript 开发
|
|
8
|
+
- 扩展 Ant Design 5.x,提供更多定制化组件
|
|
9
|
+
- 统一的设计语言和交互体验
|
|
10
|
+
- 完善的类型定义和开发体验
|
|
11
|
+
- 详细的文档和示例
|
|
12
|
+
|
|
13
|
+
## 安装
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
# 使用 npm
|
|
17
|
+
npm install @yqg/slimfit
|
|
18
|
+
|
|
19
|
+
# 使用 yarn
|
|
20
|
+
yarn add @yqg/slimfit
|
|
21
|
+
|
|
22
|
+
# 使用 pnpm
|
|
23
|
+
pnpm add @yqg/slimfit
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## 快速上手
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import React from 'react';
|
|
30
|
+
import { Button } from '@yqg/slimfit';
|
|
31
|
+
|
|
32
|
+
const App = () => (
|
|
33
|
+
<Button type="primary">SlimFit Button</Button>
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
export default App;
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## 组件目录结构
|
|
40
|
+
|
|
41
|
+
每个组件遵循以下结构(以 Button 为例):
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
components/button/
|
|
45
|
+
├── button.tsx # 主要组件实现
|
|
46
|
+
├── button.test.tsx # 组件单元测试(计划中)
|
|
47
|
+
├── index.ts # 导出文件
|
|
48
|
+
├── index.md # 组件文档
|
|
49
|
+
└── demo/ # 组件演示
|
|
50
|
+
└── index.tsx # 基础用法示例
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## 开发指南
|
|
54
|
+
|
|
55
|
+
### 技术栈
|
|
56
|
+
|
|
57
|
+
- **核心框架**: React 18+
|
|
58
|
+
- **开发语言**: TypeScript
|
|
59
|
+
- **基础组件**: Ant Design 5.x
|
|
60
|
+
- **构建工具**: @yqg/max
|
|
61
|
+
- **代码格式化**: Prettier
|
|
62
|
+
- **Git Hooks**: Husky
|
|
63
|
+
- **单元测试**: Vitest
|
|
64
|
+
- **提交前检查**: lint-staged
|
|
65
|
+
|
|
66
|
+
### 开发规范
|
|
67
|
+
|
|
68
|
+
- 文件命名使用小写字母和连字符(例如:`card-list.tsx`)
|
|
69
|
+
- 使用 Prettier 保持一致的代码风格(2空格缩进)
|
|
70
|
+
- 为 props 和 state 定义完整的 TypeScript 接口
|
|
71
|
+
- 每个组件必须包含文档和演示示例
|
|
72
|
+
- 遵循 Ant Design 组件模式和 API 设计
|
|
73
|
+
|
|
74
|
+
## 许可证
|
|
75
|
+
|
|
76
|
+
MIT
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import { Button as AntdButton } from 'antd';
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
export var Button = function Button(props) {
|
|
5
|
+
return /*#__PURE__*/_jsx(AntdButton, _objectSpread({}, props));
|
|
6
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Button } from "./button";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@arco-design/web-react/icon';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@arco-design/web-react/icon';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './icon';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./icon";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Typography } from "./typography";
|
package/package.json
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@yqg/slimfit",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"main": "dist/esm/index.js",
|
|
6
|
+
"module": "dist/esm/index.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist",
|
|
10
|
+
"README.md",
|
|
11
|
+
"LICENSE"
|
|
12
|
+
],
|
|
13
|
+
"lint-staged": {
|
|
14
|
+
"*.{jsx,less,md,json}": [
|
|
15
|
+
"prettier --no-error-on-unmatched-pattern --cache --write \"src\""
|
|
16
|
+
],
|
|
17
|
+
"*.ts?(x)": [
|
|
18
|
+
"prettier --no-error-on-unmatched-pattern --cache --parser=typescript --write \"src\""
|
|
19
|
+
]
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@arco-design/web-react": "^2.65.0",
|
|
23
|
+
"@yqg/max": "1.2.8",
|
|
24
|
+
"@yqg/max-bundle-mode-plugin": "2.1.3",
|
|
25
|
+
"@yqg/max-docs-plugin": "^1.0.16",
|
|
26
|
+
"antd": "5.24.3",
|
|
27
|
+
"husky": "7.0.4",
|
|
28
|
+
"lint-staged": "12.0.2",
|
|
29
|
+
"prettier": "^2.8.4",
|
|
30
|
+
"prettier-plugin-organize-imports": "^3.2.2",
|
|
31
|
+
"prettier-plugin-packagejson": "^2.4.3"
|
|
32
|
+
},
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"@arco-design/web-react": ">=2.65.0",
|
|
35
|
+
"antd": "5.24.3",
|
|
36
|
+
"react": ">=18.0.0",
|
|
37
|
+
"react-dom": ">=18.0.0"
|
|
38
|
+
},
|
|
39
|
+
"publishConfig": {
|
|
40
|
+
"access": "public",
|
|
41
|
+
"registry": "https://registry.npmjs.org/"
|
|
42
|
+
},
|
|
43
|
+
"scripts": {
|
|
44
|
+
"build": "max build --target=bundle",
|
|
45
|
+
"build:docs": "STAGE=prod max build --target=docs",
|
|
46
|
+
"dev": "max dev --target=docs",
|
|
47
|
+
"format": "lint-staged",
|
|
48
|
+
"lint": "pnpm prettier",
|
|
49
|
+
"prettier": "prettier --write ./",
|
|
50
|
+
"release": "pnpm build && pnpm publish"
|
|
51
|
+
}
|
|
52
|
+
}
|