@underverse-ui/underverse 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 +56 -0
- package/dist/index.cjs +6097 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +885 -0
- package/dist/index.d.ts +885 -0
- package/dist/index.js +5994 -0
- package/dist/index.js.map +1 -0
- package/package.json +54 -0
package/README.md
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
Underverse UI
|
|
2
|
+
|
|
3
|
+
Thư viện UI component cho React/Next.js, tách từ dự án. Sử dụng Tailwind CSS, `clsx` và `tailwind-merge`. Một số component hỗ trợ `next-intl` (tùy chọn).
|
|
4
|
+
|
|
5
|
+
Yêu cầu
|
|
6
|
+
- Node >= 18
|
|
7
|
+
- Peer deps: `react`, `react-dom`, `next`, `next-intl`
|
|
8
|
+
|
|
9
|
+
Cài đặt
|
|
10
|
+
- npm: `npm i @underverse-ui/underverse`
|
|
11
|
+
- Peer deps (nếu app chưa có): `npm i react react-dom next next-intl`
|
|
12
|
+
|
|
13
|
+
Thiết lập Tailwind (gợi ý)
|
|
14
|
+
- Các component dùng biến màu kiểu `primary`, `secondary`, `destructive`, v.v. Đảm bảo theme/tokens trong Tailwind của bạn có các biến này.
|
|
15
|
+
|
|
16
|
+
Sử dụng nhanh
|
|
17
|
+
|
|
18
|
+
import { Button, ToastProvider, useToast } from "@underverse-ui/underverse";
|
|
19
|
+
|
|
20
|
+
function App() {
|
|
21
|
+
const { addToast } = useToast();
|
|
22
|
+
return (
|
|
23
|
+
<ToastProvider>
|
|
24
|
+
<Button onClick={() => addToast({ type: 'success', message: 'Hello' })}>
|
|
25
|
+
Click me
|
|
26
|
+
</Button>
|
|
27
|
+
</ToastProvider>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
Các component đã export (tiêu biểu)
|
|
32
|
+
- Buttons: `Button`
|
|
33
|
+
- Thông báo/feedback: `ToastProvider`, `useToast`, `Modal`, `Tooltip`, `Popover`, `Sheet`, `Alert`, `GlobalLoading`
|
|
34
|
+
- Form/nhập liệu: `Input`, `Textarea`, `Checkbox`, `RadioGroup`, `Slider`, `DatePicker`, `Combobox`, `MultiCombobox`, `CategoryTreeSelect`
|
|
35
|
+
- Trình bày: `Badge`, `Card`, `Table`, `DataTable`, `Tab/Tabs`, `Section`, `ScrollArea`, `Skeleton`, `Progress`
|
|
36
|
+
- Media: `SmartImage`, `ImageUpload`, `ProductImageUpload`, `Carousel`
|
|
37
|
+
- Khác: `Avatar`, `ClientOnly`, `Loading`, `ThemeToggle`, `NotificationModal`, `FloatingContacts`, `Breadcrumb`, `DropdownMenu`, `Pagination`
|
|
38
|
+
|
|
39
|
+
Lưu ý
|
|
40
|
+
- Một số component (như `DatePicker`, `Form`) dùng `next-intl`. Nếu app không dùng `next-intl`, chỉ import các component không phụ thuộc hoặc cài `next-intl` như peer.
|
|
41
|
+
- `NotificationBell` (phụ thuộc API/socket cụ thể dự án) không được export để giữ package trung tính.
|
|
42
|
+
|
|
43
|
+
Phát triển & build (local)
|
|
44
|
+
- Trong thư mục package: `cd packages/underverse`
|
|
45
|
+
- Cài deps: `npm i`
|
|
46
|
+
- Build: `npm run build` (xuất ESM + CJS + d.ts vào `dist/`)
|
|
47
|
+
- Kiểm tra gói: `npm pack` (tạo file `.tgz` để test cài đặt cục bộ)
|
|
48
|
+
|
|
49
|
+
Publish lên npm (tóm tắt)
|
|
50
|
+
1) `cd packages/underverse`
|
|
51
|
+
2) Đăng nhập: `npm login`
|
|
52
|
+
3) Tăng version: `npm version patch` (hoặc `minor|major`)
|
|
53
|
+
4) Publish: `npm publish --access public`
|
|
54
|
+
- Dùng beta tag: `npm publish --access public --tag beta`
|
|
55
|
+
|
|
56
|
+
Chi tiết từng bước xem thêm trong PUBLISHING.md cùng thư mục.
|