@customafk/lunas-ui 0.0.9 → 0.0.10
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 +165 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,29 +1,183 @@
|
|
|
1
|
-
#
|
|
1
|
+
# UI LUNAS - Thư viện Component React
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## ✨ Tính năng
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
- 🎨 **Thiết kế đẹp mắt**: Component được thiết kế theo các nguyên tắc UI/UX hiện đại
|
|
6
|
+
- 🔧 **Dễ tùy chỉnh**: Hỗ trợ CSS-in-JS, CSS modules, và Tailwind CSS
|
|
7
|
+
- 📱 **Responsive**: Tất cả component đều responsive và mobile-friendly
|
|
8
|
+
- ♿ **Accessible**: Tuân thủ các chuẩn WCAG 2.1 cho accessibility
|
|
9
|
+
<!--- 🌙 **Dark mode**: Hỗ trợ dark mode built-in-->
|
|
10
|
+
- 📦 **Tree-shaking**: Chỉ import những gì bạn cần
|
|
11
|
+
- 🔷 **TypeScript**: Được viết hoàn toàn bằng TypeScript với type definitions đầy đủ
|
|
6
12
|
|
|
7
|
-
|
|
13
|
+
## 📦 Cài đặt
|
|
8
14
|
|
|
9
15
|
```bash
|
|
10
|
-
npm
|
|
16
|
+
# npm
|
|
17
|
+
npm i @customafk/lunas-ui
|
|
18
|
+
|
|
19
|
+
# yarn
|
|
20
|
+
yarn add @customafk/lunas-ui
|
|
21
|
+
|
|
22
|
+
# pnpm
|
|
23
|
+
pnpm add @customafk/lunas-ui
|
|
11
24
|
```
|
|
12
25
|
|
|
13
|
-
|
|
26
|
+
### Peer Dependencies
|
|
14
27
|
|
|
15
28
|
```bash
|
|
16
|
-
npm
|
|
29
|
+
npm install react react-dom
|
|
17
30
|
```
|
|
18
31
|
|
|
19
|
-
|
|
32
|
+
## 🚀 Sử dụng nhanh
|
|
20
33
|
|
|
21
|
-
```
|
|
22
|
-
|
|
34
|
+
```jsx
|
|
35
|
+
import React from 'react';
|
|
36
|
+
import { Button, Card, Input } from 'your-ui-library';
|
|
37
|
+
import 'your-ui-library/dist/styles.css';
|
|
38
|
+
|
|
39
|
+
function App() {
|
|
40
|
+
return (
|
|
41
|
+
<Card>
|
|
42
|
+
<Input placeholder="Enter your name" />
|
|
43
|
+
<Button variant="primary">Click me!</Button>
|
|
44
|
+
</Card>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export default App;
|
|
23
49
|
```
|
|
24
50
|
|
|
25
|
-
|
|
51
|
+
## 📋 Danh sách Component
|
|
52
|
+
|
|
53
|
+
### Form Components
|
|
54
|
+
- `Button` - Các loại button với nhiều variant
|
|
55
|
+
- `Input` - Text input với validation
|
|
56
|
+
- `Select` - Dropdown select
|
|
57
|
+
- `Checkbox` - Checkbox và radio button
|
|
58
|
+
- `Switch` - Toggle switch
|
|
59
|
+
|
|
60
|
+
### Layout Components
|
|
61
|
+
- `Container` - Wrapper container
|
|
62
|
+
- `Grid` - Flexible grid system
|
|
63
|
+
- `Card` - Card component
|
|
64
|
+
- `Modal` - Modal dialog
|
|
65
|
+
- `Drawer` - Side drawer
|
|
66
|
+
|
|
67
|
+
### Feedback Components
|
|
68
|
+
- `Alert` - Alert messages
|
|
69
|
+
- `Toast` - Toast notifications
|
|
70
|
+
- `Loading` - Loading indicators
|
|
71
|
+
- `Progress` - Progress bars
|
|
72
|
+
|
|
73
|
+
### Navigation Components
|
|
74
|
+
- `Navbar` - Navigation bar
|
|
75
|
+
- `Breadcrumb` - Breadcrumb navigation
|
|
76
|
+
- `Pagination` - Pagination component
|
|
77
|
+
- `Tabs` - Tab component
|
|
78
|
+
|
|
79
|
+
## 📖 Documentation
|
|
80
|
+
|
|
81
|
+
Xem [documentation đầy đủ](https://ui.lunas.vn) để biết thêm chi tiết về:
|
|
82
|
+
|
|
83
|
+
- **Getting Started**: Hướng dẫn setup và configuration
|
|
84
|
+
- **Component API**: Props, methods và examples cho từng component
|
|
85
|
+
- **Theming**: Cách customize theme và colors
|
|
86
|
+
- **Examples**: Các ví dụ thực tế và use cases
|
|
87
|
+
|
|
88
|
+
## 🎨 Theming
|
|
89
|
+
|
|
90
|
+
## 🔧 Configuration
|
|
91
|
+
|
|
92
|
+
### CSS Import
|
|
93
|
+
|
|
94
|
+
```jsx
|
|
95
|
+
// Import tất cả styles
|
|
96
|
+
import 'your-ui-library/dist/styles.css';
|
|
97
|
+
|
|
98
|
+
// Hoặc import riêng từng component
|
|
99
|
+
import 'your-ui-library/dist/components/Button.css';
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Bundle Size Optimization
|
|
103
|
+
|
|
104
|
+
```jsx
|
|
105
|
+
// Tree-shaking - chỉ import những gì cần
|
|
106
|
+
import { Button } from 'your-ui-library';
|
|
107
|
+
|
|
108
|
+
// Thay vì import toàn bộ
|
|
109
|
+
import * as UI from 'your-ui-library'; // ❌ Không nên
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## 🌟 Examples
|
|
113
|
+
|
|
114
|
+
### Basic Form
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
### Dark Mode
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
## 🛠️ Development
|
|
26
121
|
|
|
27
122
|
```bash
|
|
123
|
+
# Clone repository
|
|
124
|
+
git clone https://github.com/QuangPhamvt/lunas-enterprise-ui-package.git
|
|
125
|
+
cd lunas-enterprise-ui-package
|
|
126
|
+
|
|
127
|
+
# Install dependencies
|
|
128
|
+
npm install
|
|
129
|
+
|
|
130
|
+
# Build library
|
|
28
131
|
npm run build
|
|
132
|
+
|
|
133
|
+
# Run storybook
|
|
134
|
+
npm run storybook
|
|
29
135
|
```
|
|
136
|
+
|
|
137
|
+
### Scripts
|
|
138
|
+
|
|
139
|
+
## 🤝 Contributing
|
|
140
|
+
|
|
141
|
+
Chúng tôi hoan nghênh mọi đóng góp! Vui lòng xem [CONTRIBUTING.md](CONTRIBUTING.md) để biết thêm chi tiết.
|
|
142
|
+
|
|
143
|
+
### Development Process
|
|
144
|
+
|
|
145
|
+
1. Fork repository
|
|
146
|
+
2. Tạo feature branch (`git checkout -b feature/amazing-feature`)
|
|
147
|
+
3. Commit changes (`git commit -m 'Add amazing feature'`)
|
|
148
|
+
4. Push to branch (`git push origin feature/amazing-feature`)
|
|
149
|
+
5. Tạo Pull Request
|
|
150
|
+
|
|
151
|
+
### Coding Standards
|
|
152
|
+
|
|
153
|
+
- Code theo ESLint config
|
|
154
|
+
- Viết tests cho features mới
|
|
155
|
+
- Update documentation khi cần
|
|
156
|
+
- Follow conventional commits
|
|
157
|
+
|
|
158
|
+
## 📝 Changelog
|
|
159
|
+
|
|
160
|
+
Xem [CHANGELOG.md](CHANGELOG.md) để biết lịch sử thay đổi của từng version.
|
|
161
|
+
|
|
162
|
+
## 📄 License
|
|
163
|
+
|
|
164
|
+
MIT © [Your Name](https://github.com/yourusername)
|
|
165
|
+
|
|
166
|
+
## 🙋♀️ Support
|
|
167
|
+
|
|
168
|
+
- **Documentation**: [https://your-ui-library-docs.com](https://your-ui-library-docs.com)
|
|
169
|
+
- **GitHub Issues**: [Report bugs hoặc feature requests](https://github.com/yourusername/your-ui-library/issues)
|
|
170
|
+
- **Discord**: [Join community](https://discord.gg/your-discord)
|
|
171
|
+
- **Email**: support@your-ui-library.com
|
|
172
|
+
|
|
173
|
+
## 🏆 Credits
|
|
174
|
+
|
|
175
|
+
- Cảm ơn [React](https://reactjs.org/) team
|
|
176
|
+
- Icons từ [Heroicons](https://heroicons.com/)
|
|
177
|
+
- Inspiration từ [Chakra UI](https://chakra-ui.com/) và [Material-UI](https://mui.com/)
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
<div align="center">
|
|
182
|
+
Được tạo với ❤️ bởi <a href="https://github.com/QuangPhamvt">CustomAFK</a>
|
|
183
|
+
</div>
|