@comitor/ui 2.0.0 → 2.1.0

package/LICENSE

@@ -19,3 +19,38 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+THIRD-PARTY NOTICES
+
+Portions of this package are derived from the following MIT-licensed works:
+
+- tablecn (https://github.com/sadmann7/tablecn) — the `data-grid` entry.
+- Dice UI (https://github.com/sadmann7/diceui) — ActionBar, BadgeOverflow, Banner,
+  CircularProgress, Cropper, Kanban, KeyValue, MaskInput, Mention, PhoneInput,
+  Rating, ResponsiveDialog, ScrollSpy, Stepper, TagsInput, TimePicker, Timeline,
+  Tour, and the shared helpers in `lib/` (compose-refs, use-as-ref,
+  use-isomorphic-layout-effect, use-lazy-ref, visually-hidden-input).
+
+MIT License
+
+Copyright (c) 2024 Sadman Sakib
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -8,8 +8,10 @@ component ghép sẵn và khung ứng dụng (shell) kiểu workspace × app.
 - Token brand nằm ở **`styles.css`** — đổi token, bump version, mọi app nhận cùng một thay đổi.
 - Server-component-friendly: `"use client"` chỉ nằm ở file thật sự cần.
 
-> Trạng thái: `1.8.0` — 52 file primitive (Tier 1) · 31 file composite (Tier 2) · 25 file shell
-> (Tier 3) · 4 file chart · 5 file uploader. API chốt từ `1.0.0`.
+> Trạng thái: `2.1.0` — 79 file primitive (Tier 1, gồm 18 component port từ
+> [Dice UI](docs/diceui.md)) · 32 file composite (Tier 2) · 25 file shell (Tier 3) · 4 file chart ·
+> 32 file data-grid · 5 file uploader. API chốt từ `1.0.0`. (Đếm bằng `ls src/<tầng>`; con số trôi
+> theo mỗi bản — đếm lại, đừng chép.)
 >
 > Tài liệu đầy đủ: **https://design-system.comitor.ai** —
 > [Get started](https://design-system.comitor.ai/get-started) ·
@@ -157,21 +159,21 @@ và prop chỉ còn nghĩa "không hoạt hình". https://design-system.comitor.
 Ranh giới server/client là cạm bẫy cùng họ, và hỏng theo **hai kiểu ngược nhau**: 7 helper dựng chuỗi
 class (`buttonVariants`, `toggleVariants`…) gọi từ Server Component thì **ném lỗi to**, còn một hằng
 dữ liệu lọt vào sau file `"use client"` thì ra `undefined` — **không throw, không warning** — trong
-khi TypeScript vẫn khai kiểu literal. Danh sách đầy đủ 97 tên, ai gọi được ai không:
+khi TypeScript vẫn khai kiểu literal. Danh sách đầy đủ, ai gọi được ai không:
 https://design-system.comitor.ai/foundations/server-client
 
 ## 5. Bảng component
 
-Số file nguồn hiện tại: **52 primitive · 31 composite · 25 shell · 4 chart · 33 data-grid · 5 uploader**. Mỗi component có trang
+Số file nguồn hiện tại: **79 primitive · 32 composite · 25 shell · 4 chart · 32 data-grid · 5 uploader**. Mỗi component có trang
 riêng kèm demo, bảng prop và cạm bẫy của nó:
 
 | Tầng | Là gì | Trang |
 |---|---|---|
-| **Tier 1 — primitive** · 52 file · `@comitor/ui` | shadcn/ui style `new-york`, đã tùy biến token theo brand Comitor | https://design-system.comitor.ai/components |
+| **Tier 1 — primitive** · 79 file · `@comitor/ui` | shadcn/ui style `new-york`, đã tùy biến token theo brand Comitor — cộng 18 component port từ Dice UI ở `2.1.0`: `Kanban`, `Stepper`, `Timeline`, `TimePicker`, `TagsInput`, `Mention`, `ActionBar`, `PhoneInput`, `MaskInput`, `Rating`, `CircularProgress`, `Banner`, `ResponsiveDialog`, `Tour`, `KeyValue`, `Cropper`, `ScrollSpy`, `BadgeOverflow` | https://design-system.comitor.ai/components · vì sao chọn chúng, và mọi chỗ đã đổi so với thượng nguồn: [docs/diceui.md](docs/diceui.md) |
 | **Tier 2 — composite** · 31 file · `@comitor/ui` | Giá trị thật của gói: pattern lặp ở mọi app, ghép từ nhiều primitive (`DataTable`, `PageHeader`, `Combobox`, `DatePicker`, `StatCard`…) | https://design-system.comitor.ai/composites |
 | **Tier 3 — shell** · 25 file · `@comitor/ui/shell` | Khung ứng dụng workspace × app: sidebar, header, theme, ba trục hiển thị (tương phản · mật độ · cỡ chữ) | https://design-system.comitor.ai/shell |
 | **chart** · 4 file · `@comitor/ui/chart` | Lớp shadcn bọc recharts, cùng ba bản dựng sẵn theo brand. ⚠ Ba wrapper `Comitor*Chart` **mặc định TẮT** hiệu ứng vẽ dần (`isAnimationActive = false`) — bật lại là biểu đồ kẹt ở khung đầu: có trục, có lưới, KHÔNG có dữ liệu. Mặc định đó KHÔNG áp cho `<ChartContainer>` + recharts do app tự lắp | https://design-system.comitor.ai/components/chart |
-| **data-grid** · 36 file · `@comitor/ui/data-grid` | `DataGrid` — lưới sửa trực tiếp kiểu bảng tính, cho màn nhập liệu hàng loạt. Port từ [tablecn](https://www.tablecn.com/data-grid) (MIT) sang primitive + token của gói. ⚠ Là tầng DUY NHẤT có peer **`@tanstack/react-table`**, tầng duy nhất mặc định **tiếng Anh** (prop `locale`, xem dưới), và mọi thứ trong nó là client component | [docs/data-grid.md](docs/data-grid.md) |
+| **data-grid** · 32 file · `@comitor/ui/data-grid` | `DataGrid` — lưới sửa trực tiếp kiểu bảng tính, cho màn nhập liệu hàng loạt. Port từ [tablecn](https://www.tablecn.com/data-grid) (MIT) sang primitive + token của gói. ⚠ Là tầng DUY NHẤT có peer **`@tanstack/react-table`**, tầng duy nhất mặc định **tiếng Anh** (prop `locale`, xem dưới), và mọi thứ trong nó là client component | [docs/data-grid.md](docs/data-grid.md) |
 | **uploader** · 5 file · `@comitor/ui/uploader` | `FileUpload` (tệp) · `ImageUploadField` (ảnh) · `useFileUpload` — kéo thả, xem trước, tiến độ. Peer optional: `@uppy/core` + `@uppy/xhr-upload` | https://design-system.comitor.ai/components |
 | **form** · `@comitor/ui/form` | Binding shadcn ⇄ react-hook-form | https://design-system.comitor.ai/components/form |
 
@@ -280,3 +282,9 @@ https://design-system.comitor.ai/foundations/colors
 ## 8. Giấy phép
 
 MIT © Comitor
+
+Hai phần được port từ mã nguồn MIT của **Sadman Sakib** (© 2024), giữ nguyên điều kiện của giấy
+phép gốc — toàn văn thông báo bản quyền nằm cuối [LICENSE](LICENSE):
+
+- `@comitor/ui/data-grid` — từ [tablecn](https://tablecn.com) ([docs/data-grid.md](docs/data-grid.md));
+- 18 component Tier 1 của `2.1.0` — từ [Dice UI](https://diceui.com) ([docs/diceui.md](docs/diceui.md)).

package/dist/components/ui/action-bar-constants.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Nhãn mặc định của `ActionBar`.
+ *
+ * Module **CỐ Ý không có `"use client"`** — xem `src/chart/chart-colors.ts` để biết lý do đầy đủ:
+ * mọi export của một file `"use client"` đến tay Server Component dưới dạng client-reference
+ * proxy, đọc ra `undefined` mà KHÔNG throw, KHÔNG warning.
+ *
+ * ⚠ Barrel `src/index.ts` xuất module này TRỰC TIẾP. `action-bar.tsx` chỉ được `import`, KHÔNG
+ * được `export` lại (re-export qua file client là vô hiệu, và đụng tên với `export *`).
+ */
+/**
+ * Toàn bộ chuỗi hiển thị và chuỗi a11y của `ActionBar` — truyền một phần qua prop `labels` của
+ * `ActionBar`, phần còn lại lấy từ `DEFAULT_ACTION_BAR_LABELS`.
+ *
+ * Khoá có số chèn vào là HÀM: nối chuỗi ở phía app là cách chắc chắn sai trật tự từ ở ngôn ngữ khác.
+ */
+interface ActionBarLabels {
+    /** `aria-label` của thanh (`role="toolbar"`) — prop `aria-label` của `ActionBar` vẫn thắng. */
+    toolbar: string;
+    /** Dòng đếm `ActionBarSelection` hiện khi có prop `count`: "Đã chọn 3". */
+    selected: (count: number) => string;
+    /**
+     * Tên cho trình đọc màn hình của `ActionBarClose` — nút chỉ có icon X. Đóng thanh ở khuôn dùng
+     * chuẩn là BỎ CHỌN (app xoá vùng chọn trong `onOpenChange(false)`), nên tên nói đúng việc đó.
+     */
+    close: string;
+}
+/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */
+declare const DEFAULT_ACTION_BAR_LABELS: ActionBarLabels;
+
+export { type ActionBarLabels, DEFAULT_ACTION_BAR_LABELS };

package/dist/components/ui/action-bar-constants.js

@@ -0,0 +1,9 @@
+const DEFAULT_ACTION_BAR_LABELS = {
+  toolbar: "Thao t\xE1c h\xE0ng lo\u1EA1t",
+  selected: (count) => `\u0110\xE3 ch\u1ECDn ${count}`,
+  close: "B\u1ECF ch\u1ECDn"
+};
+export {
+  DEFAULT_ACTION_BAR_LABELS
+};
+//# sourceMappingURL=action-bar-constants.js.map

package/dist/components/ui/action-bar-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/action-bar-constants.ts"],"sourcesContent":["/**\n * Nhãn mặc định của `ActionBar`.\n *\n * Module **CỐ Ý không có `\"use client\"`** — xem `src/chart/chart-colors.ts` để biết lý do đầy đủ:\n * mọi export của một file `\"use client\"` đến tay Server Component dưới dạng client-reference\n * proxy, đọc ra `undefined` mà KHÔNG throw, KHÔNG warning.\n *\n * ⚠ Barrel `src/index.ts` xuất module này TRỰC TIẾP. `action-bar.tsx` chỉ được `import`, KHÔNG\n * được `export` lại (re-export qua file client là vô hiệu, và đụng tên với `export *`).\n */\n\n/**\n * Toàn bộ chuỗi hiển thị và chuỗi a11y của `ActionBar` — truyền một phần qua prop `labels` của\n * `ActionBar`, phần còn lại lấy từ `DEFAULT_ACTION_BAR_LABELS`.\n *\n * Khoá có số chèn vào là HÀM: nối chuỗi ở phía app là cách chắc chắn sai trật tự từ ở ngôn ngữ khác.\n */\nexport interface ActionBarLabels {\n  /** `aria-label` của thanh (`role=\"toolbar\"`) — prop `aria-label` của `ActionBar` vẫn thắng. */\n  toolbar: string;\n  /** Dòng đếm `ActionBarSelection` hiện khi có prop `count`: \"Đã chọn 3\". */\n  selected: (count: number) => string;\n  /**\n   * Tên cho trình đọc màn hình của `ActionBarClose` — nút chỉ có icon X. Đóng thanh ở khuôn dùng\n   * chuẩn là BỎ CHỌN (app xoá vùng chọn trong `onOpenChange(false)`), nên tên nói đúng việc đó.\n   */\n  close: string;\n}\n\n/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */\nexport const DEFAULT_ACTION_BAR_LABELS: ActionBarLabels = {\n  toolbar: \"Thao tác hàng loạt\",\n  selected: (count) => `Đã chọn ${count}`,\n  close: \"Bỏ chọn\"\n};\n"],"mappings":"AA8BO,MAAM,4BAA6C;AAAA,EACxD,SAAS;AAAA,EACT,UAAU,CAAC,UAAU,wBAAW,KAAK;AAAA,EACrC,OAAO;AACT;","names":[]}

package/dist/components/ui/action-bar.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { ActionBarLabels } from './action-bar-constants.js';
+import { Button } from './button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type Direction = "ltr" | "rtl";
+type Orientation = "horizontal" | "vertical";
+interface DivProps extends React.ComponentProps<"div"> {
+    asChild?: boolean;
+}
+interface ActionBarProps extends DivProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    align?: "start" | "center" | "end";
+    alignOffset?: number;
+    side?: "top" | "bottom";
+    sideOffset?: number;
+    portalContainer?: Element | DocumentFragment | null;
+    dir?: Direction;
+    orientation?: Orientation;
+    loop?: boolean;
+    /**
+     * Chuỗi hiển thị và chuỗi a11y (tên thanh, dòng "Đã chọn N", tên nút đóng) — mặc định
+     * `DEFAULT_ACTION_BAR_LABELS` (tiếng Việt); truyền một phần là đủ.
+     *
+     * ⚠ Thêm so với thượng nguồn: bản gốc không có chuỗi nào — thanh `role="toolbar"` không tên và
+     * nút đóng chỉ chứa `<X />` là một nút KHÔNG TÊN với trình đọc màn hình.
+     */
+    labels?: Partial<ActionBarLabels>;
+}
+declare function ActionBar(props: ActionBarProps): React.JSX.Element | null;
+interface ActionBarSelectionProps extends DivProps {
+    /**
+     * Số mục đang chọn. Có giá trị thì phần tử tự in `labels.selected(count)` ("Đã chọn 3") TRƯỚC
+     * `children` — nên `children` chỉ còn là dấu ngăn + nút đóng.
+     *
+     * ⚠ Thêm so với thượng nguồn: bản gốc để app tự viết chữ ("{n} selected"), tức chuỗi hiển thị
+     * không đi qua `labels`. Bỏ qua khi `asChild` (Slot chỉ nhận đúng MỘT phần tử con).
+     */
+    count?: number;
+}
+declare function ActionBarSelection(props: ActionBarSelectionProps): React.JSX.Element;
+declare function ActionBarGroup(props: DivProps): React.JSX.Element;
+interface ActionBarItemProps extends Omit<React.ComponentProps<typeof Button>, "onSelect"> {
+    onSelect?: (event: Event) => void;
+}
+declare function ActionBarItem(props: ActionBarItemProps): React.JSX.Element;
+interface ActionBarCloseProps extends React.ComponentProps<"button"> {
+    asChild?: boolean;
+}
+/**
+ * Nút đóng thanh (thường là "bỏ chọn"). Không truyền `children` thì vẽ icon X.
+ *
+ * ⚠ Khác thượng nguồn: có tên cho trình đọc màn hình — `aria-label` mặc định `labels.close`
+ * ("Bỏ chọn"). Bản gốc chỉ render `children`, và khuôn dùng của chính thượng nguồn là
+ * `<ActionBarClose><X /></ActionBarClose>`: một nút KHÔNG TÊN. Nếu `children` là CHỮ nhìn thấy
+ * được thì truyền `aria-label` trùng với chữ đó (WCAG 2.5.3), hoặc `aria-label={undefined}`.
+ */
+declare function ActionBarClose(props: ActionBarCloseProps): React.JSX.Element;
+interface ActionBarSeparatorProps extends DivProps {
+    orientation?: Orientation;
+}
+declare function ActionBarSeparator(props: ActionBarSeparatorProps): React.JSX.Element;
+
+export { ActionBar, ActionBarClose, type ActionBarCloseProps, ActionBarGroup, ActionBarItem, type ActionBarItemProps, type ActionBarProps, ActionBarSelection, type ActionBarSelectionProps, ActionBarSeparator, type ActionBarSeparatorProps };