@particle-network/ui-react 0.0.2 → 0.0.3
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
CHANGED
|
@@ -1,23 +1,218 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @particle-network/ui-react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<div align="center">
|
|
4
|
+
<p align="center">
|
|
5
|
+
<strong>UniversalX Design System - React Web 组件库</strong>
|
|
6
|
+
</p>
|
|
7
|
+
|
|
8
|
+
<p align="center">
|
|
9
|
+
基于 React 的现代化企业级 UI 组件库，提供优雅、高效的 Web 开发体验
|
|
10
|
+
</p>
|
|
4
11
|
|
|
5
|
-
|
|
12
|
+
<p align="center">
|
|
13
|
+
<a href="https://www.npmjs.com/package/@particle-network/ui-react">
|
|
14
|
+
<img src="https://img.shields.io/npm/v/@particle-network/ui-react.svg" alt="npm version" />
|
|
15
|
+
</a>
|
|
16
|
+
<img src="https://img.shields.io/npm/l/@particle-network/ui-react.svg" alt="license" />
|
|
17
|
+
<img src="https://img.shields.io/npm/dm/@particle-network/ui-react.svg" alt="downloads" />
|
|
18
|
+
</p>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
## ✨ 特性
|
|
22
|
+
|
|
23
|
+
- 🎨 **现代设计** - 遵循最新的设计趋势和用户体验原则
|
|
24
|
+
- 📦 **开箱即用** - 提供丰富的高质量 React 组件
|
|
25
|
+
- 🛡 **TypeScript** - 完整的 TypeScript 类型定义
|
|
26
|
+
- 🎯 **按需加载** - 支持 Tree Shaking，优化打包体积
|
|
27
|
+
- 🎨 **主题定制** - 灵活的主题系统，支持深度定制
|
|
28
|
+
- 💪 **稳定可靠** - 经过生产环境验证的组件
|
|
29
|
+
|
|
30
|
+
## 📦 安装
|
|
6
31
|
|
|
7
32
|
```bash
|
|
8
|
-
|
|
33
|
+
# 使用 npm
|
|
34
|
+
npm install @particle-network/ui-react
|
|
35
|
+
|
|
36
|
+
# 使用 yarn
|
|
37
|
+
yarn add @particle-network/ui-react
|
|
38
|
+
|
|
39
|
+
# 使用 pnpm
|
|
40
|
+
pnpm add @particle-network/ui-react
|
|
9
41
|
```
|
|
10
42
|
|
|
11
|
-
##
|
|
43
|
+
## 🚀 快速开始
|
|
12
44
|
|
|
13
|
-
|
|
45
|
+
### 基础使用
|
|
14
46
|
|
|
15
|
-
```
|
|
16
|
-
|
|
47
|
+
```tsx
|
|
48
|
+
import { UXButton, UXInput, VStack } from '@particle-network/ui-react';
|
|
49
|
+
|
|
50
|
+
function App() {
|
|
51
|
+
return (
|
|
52
|
+
<VStack spacing='md'>
|
|
53
|
+
<UXInput placeholder='请输入内容' />
|
|
54
|
+
<UXButton color='primary' size='md'>
|
|
55
|
+
点击按钮
|
|
56
|
+
</UXButton>
|
|
57
|
+
</VStack>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### 配置 Tailwind CSS
|
|
63
|
+
|
|
64
|
+
本组件库提供了预设的 Tailwind 配置，可以快速集成：
|
|
65
|
+
|
|
66
|
+
```js
|
|
67
|
+
// tailwind.config.js
|
|
68
|
+
module.exports = {
|
|
69
|
+
presets: [require('@particle-network/ui-react/tailwind-preset')],
|
|
70
|
+
// 你的其他配置...
|
|
71
|
+
};
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## 📚 组件列表
|
|
75
|
+
|
|
76
|
+
### 布局组件
|
|
77
|
+
|
|
78
|
+
- `Box` - 基础盒子组件
|
|
79
|
+
- `Center` - 居中布局
|
|
80
|
+
- `Circle` - 圆形容器
|
|
81
|
+
- `Square` - 正方形容器
|
|
82
|
+
- `Flex` - 弹性布局
|
|
83
|
+
- `HStack` - 水平堆叠
|
|
84
|
+
- `VStack` - 垂直堆叠
|
|
85
|
+
|
|
86
|
+
### 表单组件
|
|
87
|
+
|
|
88
|
+
- `UXButton` - 按钮
|
|
89
|
+
- `UXInput` - 输入框
|
|
90
|
+
- `UXNumberInput` - 数字输入框
|
|
91
|
+
- `UXCheckbox` - 复选框
|
|
92
|
+
- `UXRadio` - 单选框
|
|
93
|
+
- `UXSwitch` - 开关
|
|
94
|
+
- `UXSelect` - 选择器
|
|
95
|
+
|
|
96
|
+
### 反馈组件
|
|
97
|
+
|
|
98
|
+
- `UXModal` - 模态框
|
|
99
|
+
- `UXTooltip` - 工具提示
|
|
100
|
+
- `UXPopover` - 弹出框
|
|
101
|
+
- `UXDropdown` - 下拉菜单
|
|
102
|
+
- `UXHint` - 提示信息
|
|
103
|
+
|
|
104
|
+
### 数据展示
|
|
105
|
+
|
|
106
|
+
- `UXTabs` - 标签页
|
|
107
|
+
- `UXChip` - 标签
|
|
108
|
+
- `UXDivider` - 分割线
|
|
109
|
+
- `ProgressWrapper` - 进度条
|
|
110
|
+
- `Text` - 文本组件
|
|
111
|
+
|
|
112
|
+
## 🎨 主题定制
|
|
113
|
+
|
|
114
|
+
### 使用预设主题
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
import { UXButton } from '@particle-network/ui-react';
|
|
118
|
+
|
|
119
|
+
// 使用预设的颜色主题
|
|
120
|
+
<UXButton color="primary">Primary</UXButton>
|
|
121
|
+
<UXButton color="secondary">Secondary</UXButton>
|
|
122
|
+
<UXButton color="success">Success</UXButton>
|
|
123
|
+
<UXButton color="warning">Warning</UXButton>
|
|
124
|
+
<UXButton color="danger">Danger</UXButton>
|
|
17
125
|
```
|
|
18
126
|
|
|
19
|
-
|
|
127
|
+
### 自定义主题
|
|
128
|
+
|
|
129
|
+
通过 CSS 变量自定义主题：
|
|
130
|
+
|
|
131
|
+
```css
|
|
132
|
+
:root {
|
|
133
|
+
--ux-primary: #1890ff;
|
|
134
|
+
--ux-secondary: #52c41a;
|
|
135
|
+
--ux-danger: #ff4d4f;
|
|
136
|
+
--ux-warning: #faad14;
|
|
137
|
+
--ux-success: #52c41a;
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## 🔧 高级用法
|
|
142
|
+
|
|
143
|
+
### 组合使用
|
|
144
|
+
|
|
145
|
+
```tsx
|
|
146
|
+
import { VStack, HStack, UXButton, UXInput, UXCheckbox } from '@particle-network/ui-react';
|
|
147
|
+
|
|
148
|
+
function LoginForm() {
|
|
149
|
+
return (
|
|
150
|
+
<VStack spacing='lg' className='p-6'>
|
|
151
|
+
<UXInput placeholder='用户名' leftIcon={<UserIcon />} />
|
|
152
|
+
<UXInput type='password' placeholder='密码' leftIcon={<LockIcon />} />
|
|
153
|
+
<HStack justify='between'>
|
|
154
|
+
<UXCheckbox>记住我</UXCheckbox>
|
|
155
|
+
<a href='#'>忘记密码？</a>
|
|
156
|
+
</HStack>
|
|
157
|
+
<UXButton color='primary' fullWidth>
|
|
158
|
+
登录
|
|
159
|
+
</UXButton>
|
|
160
|
+
</VStack>
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
## 🛠 开发
|
|
166
|
+
|
|
167
|
+
### 本地开发
|
|
20
168
|
|
|
21
169
|
```bash
|
|
170
|
+
# 安装依赖
|
|
171
|
+
pnpm install
|
|
172
|
+
|
|
173
|
+
# 开发模式
|
|
22
174
|
pnpm dev
|
|
175
|
+
|
|
176
|
+
# 构建
|
|
177
|
+
pnpm build
|
|
178
|
+
|
|
179
|
+
# 类型检查
|
|
180
|
+
pnpm type-check
|
|
181
|
+
|
|
182
|
+
# 代码检查
|
|
183
|
+
pnpm lint
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
### 目录结构
|
|
187
|
+
|
|
23
188
|
```
|
|
189
|
+
src/
|
|
190
|
+
├── components/ # 组件源码
|
|
191
|
+
│ ├── layout/ # 布局组件
|
|
192
|
+
│ ├── form/ # 表单组件
|
|
193
|
+
│ ├── feedback/ # 反馈组件
|
|
194
|
+
│ └── display/ # 展示组件
|
|
195
|
+
├── utils/ # 工具函数
|
|
196
|
+
└── index.ts # 入口文件
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
## 🤝 贡献
|
|
200
|
+
|
|
201
|
+
欢迎贡献代码！请查看[贡献指南](../../CONTRIBUTING.md)了解更多信息。
|
|
202
|
+
|
|
203
|
+
## 📄 许可证
|
|
204
|
+
|
|
205
|
+
MIT © [UniversalX Team](https://github.com/particle-network)
|
|
206
|
+
|
|
207
|
+
## 🔗 相关链接
|
|
208
|
+
|
|
209
|
+
- [文档站点](https://ux-design.minijoy.work)
|
|
210
|
+
- [GitHub 仓库](https://gitlab.minijoy.work/frontend/ux-design)
|
|
211
|
+
- [NPM 包](https://www.npmjs.com/package/@particle-network/ui-react)
|
|
212
|
+
- [更新日志](./CHANGELOG.md)
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
|
|
216
|
+
<div align="center">
|
|
217
|
+
Made with ❤️ by UniversalX Team
|
|
218
|
+
</div>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
+
import QuestionIcon from "@particle-network/icons/web/QuestionIcon";
|
|
3
4
|
import { UXButton, UXTooltip } from "../index.js";
|
|
4
|
-
import { QuestionIcon } from "../../icons/index.js";
|
|
5
5
|
const UXHint_UXHint = (props)=>{
|
|
6
6
|
const { content, children, buttonClassName, iconClassName, ...restProps } = props;
|
|
7
7
|
return /*#__PURE__*/ jsx(UXTooltip, {
|
|
@@ -12,6 +12,7 @@ const UXHint_UXHint = (props)=>{
|
|
|
12
12
|
color: "secondary",
|
|
13
13
|
className: buttonClassName,
|
|
14
14
|
children: /*#__PURE__*/ jsx(QuestionIcon, {
|
|
15
|
+
size: 12,
|
|
15
16
|
className: iconClassName
|
|
16
17
|
})
|
|
17
18
|
})
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@heroui/modal";
|
|
4
|
+
import CloseIcon from "@particle-network/icons/web/CloseIcon";
|
|
4
5
|
import { Center, Circle, Flex, Text, UXButton } from "../index.js";
|
|
5
|
-
|
|
6
|
-
const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
6
|
+
const UXModal_UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
7
7
|
const { title, footer, backdrop = 'blur', scrollBehavior = 'inside', children, titleAlign = 'left', classNames, tip, ...restProps } = props;
|
|
8
8
|
return /*#__PURE__*/ jsx(Modal, {
|
|
9
9
|
ref: ref,
|
|
@@ -43,7 +43,9 @@ const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
43
43
|
closeButton: /*#__PURE__*/ jsx(UXButton, {
|
|
44
44
|
isIconOnly: true,
|
|
45
45
|
variant: "light",
|
|
46
|
-
children: /*#__PURE__*/ jsx(CloseIcon, {
|
|
46
|
+
children: /*#__PURE__*/ jsx(CloseIcon, {
|
|
47
|
+
size: 24
|
|
48
|
+
})
|
|
47
49
|
}),
|
|
48
50
|
...restProps,
|
|
49
51
|
children: /*#__PURE__*/ jsxs(ModalContent, {
|
|
@@ -84,6 +86,6 @@ const UXModal = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
84
86
|
})
|
|
85
87
|
});
|
|
86
88
|
});
|
|
87
|
-
|
|
88
|
-
const
|
|
89
|
-
export {
|
|
89
|
+
UXModal_UXModal.displayName = 'UX.Modal';
|
|
90
|
+
const UXModal = UXModal_UXModal;
|
|
91
|
+
export { UXModal as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { Select, SelectItem, SelectSection } from "@heroui/select";
|
|
4
|
-
import
|
|
4
|
+
import ChevronDownIcon from "@particle-network/icons/web/ChevronDownIcon";
|
|
5
5
|
const UXSelect_UXSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
6
6
|
const { fullWidth = false, classNames = {}, radius = 'sm', ...restProps } = props;
|
|
7
7
|
const { popoverContent, selectorIcon, trigger, value, ...restClassNames } = classNames;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@particle-network/ui-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
"react-dom": ">=16.9.0"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
+
"@particle-network/icons": "*",
|
|
39
40
|
"@particle-network/ui-shared": "*",
|
|
40
41
|
"ahooks": "^3.9.4"
|
|
41
42
|
}
|
package/dist/icons/index.d.ts
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { type SVGProps } from 'react';
|
|
2
|
-
type IconProps = SVGProps<SVGSVGElement>;
|
|
3
|
-
export declare const CloseIcon: React.FC<IconProps>;
|
|
4
|
-
export declare const QuestionIcon: React.FC<IconProps>;
|
|
5
|
-
export declare const ChevronDownIcon: React.FC<IconProps>;
|
|
6
|
-
export {};
|
package/dist/icons/index.js
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import "react";
|
|
3
|
-
const CloseIcon = (props)=>/*#__PURE__*/ jsx("svg", {
|
|
4
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
-
width: 24,
|
|
6
|
-
height: 24,
|
|
7
|
-
fill: "none",
|
|
8
|
-
style: {
|
|
9
|
-
color: 'var(--heroui-foreground)'
|
|
10
|
-
},
|
|
11
|
-
...props,
|
|
12
|
-
children: /*#__PURE__*/ jsx("path", {
|
|
13
|
-
fill: "currentColor",
|
|
14
|
-
fillRule: "evenodd",
|
|
15
|
-
d: "m8.002 8.941 3.77 3.772a.667.667 0 0 0 .944-.943L8.944 8l3.771-3.772a.667.667 0 0 0-.942-.942L8.002 7.056 4.23 3.285a.667.667 0 0 0-.942.942L7.058 8l-3.77 3.771a.667.667 0 1 0 .942.943L8.002 8.94Z",
|
|
16
|
-
clipRule: "evenodd"
|
|
17
|
-
})
|
|
18
|
-
});
|
|
19
|
-
const QuestionIcon = (props)=>/*#__PURE__*/ jsxs("svg", {
|
|
20
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
21
|
-
width: 12,
|
|
22
|
-
height: 12,
|
|
23
|
-
fill: "none",
|
|
24
|
-
style: {
|
|
25
|
-
color: 'var(--heroui-foreground-300)'
|
|
26
|
-
},
|
|
27
|
-
...props,
|
|
28
|
-
children: [
|
|
29
|
-
/*#__PURE__*/ jsx("circle", {
|
|
30
|
-
cx: 6,
|
|
31
|
-
cy: 6,
|
|
32
|
-
r: 5.611,
|
|
33
|
-
stroke: "currentColor",
|
|
34
|
-
strokeWidth: 0.778
|
|
35
|
-
}),
|
|
36
|
-
/*#__PURE__*/ jsx("path", {
|
|
37
|
-
fill: "currentColor",
|
|
38
|
-
d: "M7.9 4.766c-.025.468-.176.837-.929 1.554-.382.363-.622.637-.646.876a.375.375 0 0 1-.38.329c-.013 0-.025-.002-.038-.003a.37.37 0 0 1-.343-.397c.052-.504.44-.911.868-1.318.684-.652.695-.859.707-1.078a.906.906 0 0 0-.28-.697 1.22 1.22 0 0 0-.86-.35h-.003c-.626 0-1.138.488-1.138 1.085 0 .202-.17.364-.382.364a.373.373 0 0 1-.382-.365c0-.483.197-.938.556-1.28.358-.344.835-.532 1.344-.533a2.007 2.007 0 0 1 1.419.576c.34.342.513.781.488 1.237ZM6.228 8.195a.457.457 0 1 0-.458.792.457.457 0 0 0 .458-.792Z"
|
|
39
|
-
})
|
|
40
|
-
]
|
|
41
|
-
});
|
|
42
|
-
const ChevronDownIcon = (props)=>/*#__PURE__*/ jsx("svg", {
|
|
43
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
44
|
-
width: 20,
|
|
45
|
-
height: 20,
|
|
46
|
-
fill: "none",
|
|
47
|
-
style: {
|
|
48
|
-
color: 'var(--heroui-foreground-300)'
|
|
49
|
-
},
|
|
50
|
-
...props,
|
|
51
|
-
children: /*#__PURE__*/ jsx("path", {
|
|
52
|
-
fill: "currentColor",
|
|
53
|
-
fillRule: "evenodd",
|
|
54
|
-
d: "M12.706 15.702a1 1 0 0 1-1.414 0l-5.657-5.657A1 1 0 1 1 7.05 8.631l4.95 4.95 4.95-4.95a1 1 0 0 1 1.414 1.414l-5.657 5.657Z",
|
|
55
|
-
clipRule: "evenodd"
|
|
56
|
-
})
|
|
57
|
-
});
|
|
58
|
-
export { ChevronDownIcon, CloseIcon, QuestionIcon };
|