@capy-vn/ui 0.1.0 → 0.1.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 +51 -61
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @capy/ui
|
|
1
|
+
# @capy-vn/ui
|
|
2
2
|
|
|
3
3
|
Thư viện component dùng chung cho các project frontend, xây dựng trên shadcn/ui + Radix UI + Tailwind CSS.
|
|
4
4
|
|
|
@@ -6,23 +6,15 @@ Thư viện component dùng chung cho các project frontend, xây dựng trên s
|
|
|
6
6
|
|
|
7
7
|
## Cài đặt
|
|
8
8
|
|
|
9
|
-
Thêm package vào project qua git dependency:
|
|
10
|
-
|
|
11
9
|
```bash
|
|
12
10
|
# npm
|
|
13
|
-
npm install
|
|
11
|
+
npm install @capy-vn/ui
|
|
14
12
|
|
|
15
13
|
# yarn
|
|
16
|
-
yarn add
|
|
14
|
+
yarn add @capy-vn/ui
|
|
17
15
|
|
|
18
16
|
# pnpm
|
|
19
|
-
pnpm add
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
Để pin vào một commit cụ thể (khuyến nghị cho production):
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
npm install "git+https://gitlab.com/capy-agents/capy-frontend-components.git#<commit-hash>"
|
|
17
|
+
pnpm add @capy-vn/ui
|
|
26
18
|
```
|
|
27
19
|
|
|
28
20
|
---
|
|
@@ -35,7 +27,7 @@ Trong `app/globals.css` hoặc `app/layout.tsx`:
|
|
|
35
27
|
|
|
36
28
|
```css
|
|
37
29
|
/* globals.css */
|
|
38
|
-
@import "@capy/ui/styles";
|
|
30
|
+
@import "@capy-vn/ui/styles";
|
|
39
31
|
@tailwind base;
|
|
40
32
|
@tailwind components;
|
|
41
33
|
@tailwind utilities;
|
|
@@ -44,7 +36,7 @@ Trong `app/globals.css` hoặc `app/layout.tsx`:
|
|
|
44
36
|
Hoặc trong `layout.tsx`:
|
|
45
37
|
|
|
46
38
|
```tsx
|
|
47
|
-
import "@capy/ui/styles";
|
|
39
|
+
import "@capy-vn/ui/styles";
|
|
48
40
|
```
|
|
49
41
|
|
|
50
42
|
### 2. Cấu hình Tailwind
|
|
@@ -57,7 +49,7 @@ module.exports = {
|
|
|
57
49
|
content: [
|
|
58
50
|
"./app/**/*.{ts,tsx}",
|
|
59
51
|
"./components/**/*.{ts,tsx}",
|
|
60
|
-
"./node_modules/@capy/ui/dist/**/*.{js,mjs}", // <-- thêm dòng này
|
|
52
|
+
"./node_modules/@capy-vn/ui/dist/**/*.{js,mjs}", // <-- thêm dòng này
|
|
61
53
|
],
|
|
62
54
|
theme: {
|
|
63
55
|
extend: {},
|
|
@@ -71,7 +63,7 @@ module.exports = {
|
|
|
71
63
|
Trong root layout:
|
|
72
64
|
|
|
73
65
|
```tsx
|
|
74
|
-
import { Toaster } from "@capy/ui";
|
|
66
|
+
import { Toaster } from "@capy-vn/ui";
|
|
75
67
|
|
|
76
68
|
export default function RootLayout({ children }) {
|
|
77
69
|
return (
|
|
@@ -90,7 +82,7 @@ export default function RootLayout({ children }) {
|
|
|
90
82
|
## Sử dụng
|
|
91
83
|
|
|
92
84
|
```tsx
|
|
93
|
-
import { Button, Input, Card, CardContent } from "@capy/ui";
|
|
85
|
+
import { Button, Input, Card, CardContent } from "@capy-vn/ui";
|
|
94
86
|
|
|
95
87
|
export function LoginCard() {
|
|
96
88
|
return (
|
|
@@ -110,7 +102,7 @@ Các component `Form*` đã tích hợp sẵn `react-hook-form`:
|
|
|
110
102
|
|
|
111
103
|
```tsx
|
|
112
104
|
import { useForm } from "react-hook-form";
|
|
113
|
-
import { Form, FormInput, FormSelect, Button } from "@capy/ui";
|
|
105
|
+
import { Form, FormInput, FormSelect, Button } from "@capy-vn/ui";
|
|
114
106
|
|
|
115
107
|
export function CreateUserForm() {
|
|
116
108
|
const form = useForm({ defaultValues: { name: "", role: "" } });
|
|
@@ -142,44 +134,44 @@ export function CreateUserForm() {
|
|
|
142
134
|
|
|
143
135
|
| Component | Import |
|
|
144
136
|
|-----------|--------|
|
|
145
|
-
| `Button` | `@capy/ui` |
|
|
146
|
-
| `Input` | `@capy/ui` |
|
|
147
|
-
| `Textarea` | `@capy/ui` |
|
|
148
|
-
| `Label` | `@capy/ui` |
|
|
149
|
-
| `Checkbox` | `@capy/ui` |
|
|
150
|
-
| `Switch` | `@capy/ui` |
|
|
151
|
-
| `RadioGroup`, `RadioGroupItem` | `@capy/ui` |
|
|
152
|
-
| `Select`, `SelectTrigger`, `SelectContent`, `SelectItem` | `@capy/ui` |
|
|
153
|
-
| `SearchSelect` | `@capy/ui` |
|
|
154
|
-
| `MultiSelect` | `@capy/ui` |
|
|
155
|
-
| `NumberInput` | `@capy/ui` |
|
|
156
|
-
| `Slider` | `@capy/ui` |
|
|
157
|
-
| `OtpInput` | `@capy/ui` |
|
|
158
|
-
| `FileUpload` | `@capy/ui` |
|
|
159
|
-
| `Badge` | `@capy/ui` |
|
|
160
|
-
| `Avatar`, `AvatarImage`, `AvatarFallback` | `@capy/ui` |
|
|
161
|
-
| `Card`, `CardHeader`, `CardContent`, `CardFooter`, `CardTitle`, `CardDescription` | `@capy/ui` |
|
|
162
|
-
| `Alert`, `AlertTitle`, `AlertDescription` | `@capy/ui` |
|
|
163
|
-
| `Separator` | `@capy/ui` |
|
|
164
|
-
| `Progress` | `@capy/ui` |
|
|
165
|
-
| `Skeleton` | `@capy/ui` |
|
|
166
|
-
| `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` | `@capy/ui` |
|
|
167
|
-
| `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter` | `@capy/ui` |
|
|
168
|
-
| `AlertDialog`, `AlertDialogTrigger`, `AlertDialogContent`, ... | `@capy/ui` |
|
|
169
|
-
| `Sheet`, `SheetTrigger`, `SheetContent` | `@capy/ui` |
|
|
170
|
-
| `Popover`, `PopoverTrigger`, `PopoverContent` | `@capy/ui` |
|
|
171
|
-
| `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem` | `@capy/ui` |
|
|
172
|
-
| `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | `@capy/ui` |
|
|
173
|
-
| `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider` | `@capy/ui` |
|
|
174
|
-
| `ScrollArea` | `@capy/ui` |
|
|
175
|
-
| `Breadcrumb`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbSeparator` | `@capy/ui` |
|
|
176
|
-
| `Calendar` | `@capy/ui` |
|
|
177
|
-
| `DatePicker` | `@capy/ui` |
|
|
178
|
-
| `DateRangePicker` | `@capy/ui` |
|
|
179
|
-
| `TimePicker` | `@capy/ui` |
|
|
180
|
-
| `DatetimePicker` | `@capy/ui` |
|
|
181
|
-
| `DatetimeRangePicker` | `@capy/ui` |
|
|
182
|
-
| `Toaster` | `@capy/ui` |
|
|
137
|
+
| `Button` | `@capy-vn/ui` |
|
|
138
|
+
| `Input` | `@capy-vn/ui` |
|
|
139
|
+
| `Textarea` | `@capy-vn/ui` |
|
|
140
|
+
| `Label` | `@capy-vn/ui` |
|
|
141
|
+
| `Checkbox` | `@capy-vn/ui` |
|
|
142
|
+
| `Switch` | `@capy-vn/ui` |
|
|
143
|
+
| `RadioGroup`, `RadioGroupItem` | `@capy-vn/ui` |
|
|
144
|
+
| `Select`, `SelectTrigger`, `SelectContent`, `SelectItem` | `@capy-vn/ui` |
|
|
145
|
+
| `SearchSelect` | `@capy-vn/ui` |
|
|
146
|
+
| `MultiSelect` | `@capy-vn/ui` |
|
|
147
|
+
| `NumberInput` | `@capy-vn/ui` |
|
|
148
|
+
| `Slider` | `@capy-vn/ui` |
|
|
149
|
+
| `OtpInput` | `@capy-vn/ui` |
|
|
150
|
+
| `FileUpload` | `@capy-vn/ui` |
|
|
151
|
+
| `Badge` | `@capy-vn/ui` |
|
|
152
|
+
| `Avatar`, `AvatarImage`, `AvatarFallback` | `@capy-vn/ui` |
|
|
153
|
+
| `Card`, `CardHeader`, `CardContent`, `CardFooter`, `CardTitle`, `CardDescription` | `@capy-vn/ui` |
|
|
154
|
+
| `Alert`, `AlertTitle`, `AlertDescription` | `@capy-vn/ui` |
|
|
155
|
+
| `Separator` | `@capy-vn/ui` |
|
|
156
|
+
| `Progress` | `@capy-vn/ui` |
|
|
157
|
+
| `Skeleton` | `@capy-vn/ui` |
|
|
158
|
+
| `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` | `@capy-vn/ui` |
|
|
159
|
+
| `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter` | `@capy-vn/ui` |
|
|
160
|
+
| `AlertDialog`, `AlertDialogTrigger`, `AlertDialogContent`, ... | `@capy-vn/ui` |
|
|
161
|
+
| `Sheet`, `SheetTrigger`, `SheetContent` | `@capy-vn/ui` |
|
|
162
|
+
| `Popover`, `PopoverTrigger`, `PopoverContent` | `@capy-vn/ui` |
|
|
163
|
+
| `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem` | `@capy-vn/ui` |
|
|
164
|
+
| `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | `@capy-vn/ui` |
|
|
165
|
+
| `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider` | `@capy-vn/ui` |
|
|
166
|
+
| `ScrollArea` | `@capy-vn/ui` |
|
|
167
|
+
| `Breadcrumb`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbSeparator` | `@capy-vn/ui` |
|
|
168
|
+
| `Calendar` | `@capy-vn/ui` |
|
|
169
|
+
| `DatePicker` | `@capy-vn/ui` |
|
|
170
|
+
| `DateRangePicker` | `@capy-vn/ui` |
|
|
171
|
+
| `TimePicker` | `@capy-vn/ui` |
|
|
172
|
+
| `DatetimePicker` | `@capy-vn/ui` |
|
|
173
|
+
| `DatetimeRangePicker` | `@capy-vn/ui` |
|
|
174
|
+
| `Toaster` | `@capy-vn/ui` |
|
|
183
175
|
|
|
184
176
|
### Forms (tích hợp react-hook-form)
|
|
185
177
|
|
|
@@ -245,7 +237,7 @@ Tất cả Form components nhận prop `name`, `label`, và `description` (optio
|
|
|
245
237
|
## Hooks
|
|
246
238
|
|
|
247
239
|
```tsx
|
|
248
|
-
import { useDisclosure, useDebounce, usePagination, useLocalStorage } from "@capy/ui";
|
|
240
|
+
import { useDisclosure, useDebounce, usePagination, useLocalStorage } from "@capy-vn/ui";
|
|
249
241
|
```
|
|
250
242
|
|
|
251
243
|
| Hook | Mô tả |
|
|
@@ -260,7 +252,7 @@ import { useDisclosure, useDebounce, usePagination, useLocalStorage } from "@cap
|
|
|
260
252
|
## Utilities
|
|
261
253
|
|
|
262
254
|
```tsx
|
|
263
|
-
import { cn } from "@capy/ui";
|
|
255
|
+
import { cn } from "@capy-vn/ui";
|
|
264
256
|
|
|
265
257
|
// Kết hợp Tailwind class
|
|
266
258
|
<div className={cn("base-class", condition && "conditional-class")} />
|
|
@@ -286,10 +278,8 @@ Next.js là optional — library hoạt động với bất kỳ React 18+ proje
|
|
|
286
278
|
|
|
287
279
|
## Cập nhật
|
|
288
280
|
|
|
289
|
-
Để lấy version mới nhất từ `main`:
|
|
290
|
-
|
|
291
281
|
```bash
|
|
292
|
-
npm
|
|
282
|
+
npm update @capy-vn/ui
|
|
293
283
|
```
|
|
294
284
|
|
|
295
285
|
---
|