Ark Collection

Bộ sưu tập danh sách và cây phân cấp dữ liệu xây dựng từ @ark-ui/react/collection kết hợp với Tailwind CSS v4. Cung cấp cả List Collection (đồng bộ kích thước với Input & Button, lọc tìm kiếm, đa dạng bố cục) và Tree Collection (createTreeCollection, createFileTreeCollection, điều hướng tổ tiên - hậu duệ, lọc đệ quy và làm phẳng cây).

1. Đồng bộ kích thước với Input & Button (Size Sync)

Chứng minh sự thẳng hàng và khớp chuẩn 100% về chiều cao, padding, và typography của ArkCollection với Input và Button ở cả 4 kích thước.

Kiểm tra độ cao và font chữ trực quan giữa ArkCollection (chips/item), Input và Button để đảm bảo sự đồng bộ 100% trong toàn hệ thống:

Size: xsToken Height: 1.5rem (24px)

ArkCollection Item

Input

Button

Size: smToken Height: 1.75rem (28px)

ArkCollection Item

Input

Button

Size: mdToken Height: 2.125rem (34px)

ArkCollection Item

Input

Button

Size: lgToken Height: 2.5rem (40px)

ArkCollection Item

Input

Button

2. Chọn 1 mục duy nhất (Single Selection)

Chế độ chọn đơn mục với radio indicator tự động, phản hồi giá trị lập tức.

Đang chọn: postgres

3. Chọn nhiều mục & Thanh công cụ (Multiple Selection)

Chế độ chọn nhiều mục kết hợp checkbox indicator, thanh công cụ Chọn tất cả, Bỏ chọn và huy hiệu đếm.

2 / 4 đã chọn

Danh sách quyền đã chọn (2): super_admin, editor

4. Tìm kiếm & Lọc trực tiếp (Searchable)

Tích hợp ô tìm kiếm lọc danh sách tức thì kèm nút xóa nhanh và trạng thái Empty khi không có kết quả.

2 / 6 đã chọn

5. Đa dạng bố cục hiển thị (Layouts)

Chuyển đổi linh hoạt giữa 3 dạng bố cục: Danh sách dòng (List), Lưới thẻ card (Grid), và Thẻ tag pills (Chips).

Chọn Layout:

6. Biến thể phong cách (Variants)

4 biến thể giao diện: Default (viền chuẩn), Card (thẻ nổi bật), Subtle (nền dịu nhẹ), và Bordered (viền đậm 2px).

Chọn Variant:

7. Quản lý danh sách động (useListCollection)

Tận dụng hook useListCollection từ @ark-ui/react/collection để thêm mới và xóa item theo thời gian thực.

0 / 3 đã chọn

8. Compound Component API

Khả năng tùy biến sâu sắc thông qua các sub-components: Root, Toolbar, Search, List, Item, ItemIndicator, ItemText, ItemBadge.

1 / 2 đã chọn

9. Tích hợp chuyên dụng Remix Hook Form (CollectionField)

Sử dụng CollectionField kết hợp RemixValidatedForm, ArkField và Zod schema để kiểm tra tính hợp lệ và thu thập dữ liệu form mượt mà.

1. Chọn gói dịch vụ (Single Selection)Chọn 1 trong các gói dịch vụ có sẵn.

2. Phân quyền tài khoản (Multiple Selection)Chọn các quyền truy cập sẽ gán cho tài khoản này.

1 / 3 đã chọn

3. Thẻ công nghệ quan tâm (Chips Layout)Tùy chọn

Chọn danh sách các công nghệ liên quan.

Dữ liệu trường theo thời gian thực (Form State Realtime):

{
  "plan": "starter",
  "roles": [
    "read"
  ],
  "techs": [
    "react",
    "tailwind"
  ]
}

10. Tree Collection: Cấu trúc Cây & Tra cứu Phân cấp (createTreeCollection)

Sử dụng createTreeCollection quản lý dữ liệu cây phân cấp doanh nghiệp/phòng ban. Tra cứu tức thời chuỗi node tổ tiên (getParentNodes), độ sâu (depth), kiểm tra nhánh (isBranchNode) và lấy toàn bộ con cháu (getDescendantValues).

Sử dụng createTreeCollection để quản lý dữ liệu cây phân cấp doanh nghiệp. Bấm vào bất kỳ node nào trong cây để kiểm tra các phương thức tra cứu thông minh thời gian thực:

Cấu trúc Cây Tổ chức (Tree View)

Tập đoàn Công nghệ ChillCMS GlobalHeadquarters

Khối Kỹ thuật & Công nghệ (Engineering)68 nhân sự

Đội ngũ Frontend (React, Tailwind & Ark UI)

Đội ngũ Backend (Node.js, Remix & Prisma)

Đội ngũ DevOps & Hạ tầng đám mây

Khối Sản phẩm & Thiết kế (Product & UX)32 nhân sự

Đội ngũ UI/UX Design System

Ban Quản trị Sản phẩm (Product Managers)

Khối Tăng trưởng & Marketing42 nhân sự

Tra cứu TreeCollection (Node Inspector)

Node đang chọn

Đội ngũ Frontend (React, Tailwind & Ark UI)id: eng-frontend

Vai trò: Giao diện & Trải nghiệm

Chuỗi phân cấp (getParentNodes)Độ sâu (depth): 2

Khối Kỹ thuật & Công nghệ (Engineering)Đội ngũ Frontend (React, Tailwind & Ark UI)

Loại phần tửNode lá cuối (Leaf)

Node con trực tiếp0 mục

Toàn bộ mã con cháu (getDescendantValues):

(Không có node con cấp dưới)

11. File Tree Collection: Tự động phân giải đường dẫn tệp (createFileTreeCollection)

Tự động chuyển đổi mảng chuỗi đường dẫn tệp tin UNIX thành cây thư mục lồng nhau hoàn chỉnh. Hỗ trợ thêm đường dẫn mới trực tiếp và tính toán quan hệ thư mục cha-con.

Hàm createFileTreeCollection(paths) nhận vào một mảng chuỗi đường dẫn (file paths) và tự động xây dựng cây thư mục chuẩn xác. Nhập đường dẫn tệp mới để kiểm tra:

Gợi ý thêm nhanh:

Cây thư mục (9 đường dẫn tệp)Root: workspace/

app2 mục

routes2 mục

_index.tsx

_public.docs.dev.ark-collection1 mục

components1 mục

ui3 mục

button1 mục

input1 mục

ark-collection2 mục

package.json

vite.config.ts

README.md

Thông tin tệp đang chọn

Đường dẫn đầy đủ:app/components/ui/ark-collection/ArkCollection.tsx

Độ sâu đường dẫn:5 cấp

Phân loại node:Tệp tin (File)

Tổ tiên trực tiếp (getParentNode):app/components/ui/ark-collection

12. Thao tác động trên Cây phân cấp (Tree Mutations & Filtering)

Khả năng lọc cây bảo toàn phân cấp với tree.filter(predicate), thêm node con vào nhánh bất kỳ và xóa bỏ node kèm con cháu với tree.remove().

Trải nghiệm tính năng lọc phân cấp với tree.filter(predicate) (tự động giữ lại các node cha liên đới) và xóa nhánh với tree.remove(indexPaths):

Thêm con vào [eng]:

Số node hiển thị: 11

Tập đoàn Công nghệ ChillCMS Global

org-root

Khối Kỹ thuật & Công nghệ (Engineering)

eng

Đội ngũ Frontend (React, Tailwind & Ark UI)

eng-frontend

Đội ngũ Backend (Node.js, Remix & Prisma)

eng-backend

Đội ngũ DevOps & Hạ tầng đám mây

eng-devops

Khối Sản phẩm & Thiết kế (Product & UX)

product

Đội ngũ UI/UX Design System

prod-uiux

Ban Quản trị Sản phẩm (Product Managers)

prod-pm

Khối Tăng trưởng & Marketing

growth

Đội ngũ Sáng tạo Nội dung & SEO

growth-content

Đội ngũ Tư vấn Doanh nghiệp (Enterprise)

growth-sales

13. Làm phẳng cây phân cấp (tree.flatten)

Chuyển đổi cây phân cấp lồng nhau phức tạp thành mảng tuyến tính kèm các chỉ số quan hệ _index, _parent và _children phục vụ ảo hóa (virtual list) và bảng phân tích.

Phương thức tree.flatten() chuyển đổi cây phân cấp lồng nhau thành một mảng phẳng duy nhất với các chỉ mục quan hệ _index, _parent, và _children.

_index	Tên Node & Cấp bậc phân cấp	Mã ID (value)	_parent	_children
#0	Tập đoàn Công nghệ ChillCMS Global	org-root	(Gốc)	[#1, #2, #3]
#1	Khối Kỹ thuật & Công nghệ (Engineering)	eng	#0	[#4, #5, #6]
#4	Đội ngũ Frontend (React, Tailwind & Ark UI)	eng-frontend	#1	-
#5	Đội ngũ Backend (Node.js, Remix & Prisma)	eng-backend	#1	-
#6	Đội ngũ DevOps & Hạ tầng đám mây	eng-devops	#1	-
#2	Khối Sản phẩm & Thiết kế (Product & UX)	product	#0	[#7, #8]
#7	Đội ngũ UI/UX Design System	prod-uiux	#2	-
#8	Ban Quản trị Sản phẩm (Product Managers)	prod-pm	#2	-
#3	Khối Tăng trưởng & Marketing	growth	#0	[#9, #10]
#9	Đội ngũ Sáng tạo Nội dung & SEO	growth-content	#3	-
#10	Đội ngũ Tư vấn Doanh nghiệp (Enterprise)	growth-sales	#3	-

Ứng dụng thực tế: Cấu trúc mảng phẳng flatten() cho phép tích hợp trực tiếp với các thư viện ảo hóa như @tanstack/react-virtual, tính toán vị trí cuộn mượt mà mà không gặp giới hạn đệ quy DOM của cây lồng nhau hàng nghìn cấp.

14. Bảng thông số thuộc tính ArkCollection (Props Reference)

Tài liệu chi tiết về các props cấu hình cho ArkCollection và CollectionField.

Thuộc tính (Prop)	Kiểu dữ liệu (Type)	Mặc định	Mô tả
items	(ArkCollectionItem \| string)[]	[]	Danh sách các mục hiển thị trong bộ sưu tập.
selectionMode	'single' \| 'multiple'	'multiple'	Chế độ chọn 1 mục duy nhất hoặc chọn nhiều mục.
size	'xs' \| 'sm' \| 'md' \| 'lg'	'md'	Kích thước chuẩn hóa đồng bộ với Input và Button qua control-size.
layout	'list' \| 'grid' \| 'chips'	'list'	Dạng hiển thị: Danh sách dòng, Lưới thẻ card, hoặc Thẻ tag pills.
variant	'default' \| 'card' \| 'subtle' \| 'bordered'	'default'	Biến thể đường viền và phong cách giao diện.
searchable	boolean	false	Hiển thị ô tìm kiếm lọc nội dung trực tiếp trong bộ sưu tập.
showToolbar	boolean	false	Hiển thị thanh công cụ với nút Chọn tất cả, Bỏ chọn và đếm số lượng.
clearable	boolean	false	Hiển thị nút xóa toàn bộ lựa chọn nhanh.
value / onValueChange	string[] \| string / (values: string[]) => void	undefined	Quản lý trạng thái lựa chọn từ bên ngoài (Controlled state).

15. Bảng phương thức Tra cứu & Thao tác TreeCollection (API Reference)

Danh sách các phương thức và hàm tiện ích tích hợp sẵn trong đối tượng TreeCollection của Ark UI / Zag.

Phương thức (Method)	Cú pháp & Tham số	Kiểu trả về (Return)	Mô tả chức năng
flatten()	(rootNode?: T) => FlatTreeNode<T>[]	FlatTreeNode<T>[]	Chuyển đổi toàn bộ cấu trúc cây thành mảng phẳng tuyến tính kèm metadata quan hệ (_parent, _children, _index) phục vụ ảo hóa (virtualization).
findNode(value)	(value: string) => T \| undefined	T \| undefined	Tìm kiếm nhanh node trong cây theo mã định danh duy nhất (value/id).
getDepth(value)	(value: string) => number	number	Trả về độ sâu phân cấp của node (Node gốc = 0, node con trực tiếp = 1, ...).
getParentNode(value)	(value: string \| IndexPath) => T \| undefined	T \| undefined	Truy xuất trực tiếp node cha quản lý của node hiện tại.
getParentNodes(value)	(value: string \| IndexPath) => T[]	T[]	Trả về chuỗi danh sách tất cả các node tổ tiên từ gốc đến cha trực tiếp, lý tưởng cho Breadcrumbs.
getDescendantValues(value)	(value: string \| IndexPath) => string[]	string[]	Lấy mảng chứa toàn bộ mã định danh (values) của con cháu nhiều cấp bên dưới node chỉ định.
isBranchNode(node)	(node: T) => boolean	boolean	Kiểm tra xem một node có phải là nhánh (có chứa node con) hay là node lá cuối cùng.
filter(predicate)	(predicate: (node: T) => boolean) => TreeCollection<T>	TreeCollection<T>	Lọc cây phân cấp và tạo bản sao TreeCollection mới, tự động bảo tồn chuỗi node cha dẫn đến node con khớp điều kiện.
remove(indexPaths)	(indexPaths: IndexPath[]) => TreeCollection<T>	TreeCollection<T>	Loại bỏ một hoặc nhiều node (kèm toàn bộ nhánh con) và trả về TreeCollection mới đã cập nhật.
insertBefore / insertAfter	(indexPath: IndexPath, nodes: T[]) => TreeCollection<T>	TreeCollection<T>	Chèn thêm các node mới vào trước hoặc sau vị trí indexPath chỉ định trong cây.

Notifications

Ark Collection

1. Đồng bộ kích thước với Input & Button (Size Sync)

2. Chọn 1 mục duy nhất (Single Selection)

3. Chọn nhiều mục & Thanh công cụ (Multiple Selection)

4. Tìm kiếm & Lọc trực tiếp (Searchable)

5. Đa dạng bố cục hiển thị (Layouts)

6. Biến thể phong cách (Variants)

7. Quản lý danh sách động (useListCollection)

8. Compound Component API

9. Tích hợp chuyên dụng Remix Hook Form (CollectionField)

10. Tree Collection: Cấu trúc Cây & Tra cứu Phân cấp (createTreeCollection)

Tra cứu TreeCollection (Node Inspector)

11. File Tree Collection: Tự động phân giải đường dẫn tệp (createFileTreeCollection)

Thông tin tệp đang chọn

12. Thao tác động trên Cây phân cấp (Tree Mutations & Filtering)

13. Làm phẳng cây phân cấp (tree.flatten)

14. Bảng thông số thuộc tính ArkCollection (Props Reference)

15. Bảng phương thức Tra cứu & Thao tác TreeCollection (API Reference)

Giỏ hàng

Giỏ hàng của bạn đang trống