Giới thiệu

Gói có gì

Ba tầng, mỗi tầng chỉ dựng từ các tầng dưới nó, cộng với các quy tắc mà cả ba đứng trên, và những màn hình hoàn chỉnh cho thấy chúng chạy cùng nhau. Các mục của site này chia đúng theo cách đó.

Một gói, chín cửa

Gói được chia theo thứ mỗi phần cần cài, không theo chủ đề. Mọi thứ một app React thuần cần đều nằm sau entry chính, vốn không có peer tuỳ chọn nào; mỗi phần dựa vào thứ nặng hơn — Next, recharts, một engine bảng, một thư viện form, một client upload, một engine soạn thảo — có entry riêng, nên chỉ cài thứ mình import. Hướng dẫn cài đặt có bảng đầy đủ, cùng hai cái tên thật sự mang nghĩa khác nhau ở hai cửa khác nhau.

// Tier 1 + Tier 2, the language provider, cn and the tokens — no optional peer
import { Button, DataTable, Kanban, ComitorLocaleProvider } from '@comitor/ui'

// Tier 3, the app frame — needs next, next-themes
import { AppShell, ThemeProvider } from '@comitor/ui/shell'

// Behind their own doors, one optional peer each
import { ComitorBarChart } from '@comitor/ui/chart'          // recharts
import { DataGrid } from '@comitor/ui/data-grid'             // @tanstack/react-table
import { Form, FormField } from '@comitor/ui/form'           // react-hook-form
import { ImageUploadField } from '@comitor/ui/uploader'      // @uppy/core, @uppy/xhr-upload
import { MarkdownEditor } from '@comitor/ui/editor'          // @tiptap/*, lowlight
import { ChatThread } from '@comitor/ui/chat'                // the editor's peers, nothing more

// Plain values for places with no Tailwind: canvas, PDF, email
import { semantic } from '@comitor/ui/tokens'

Nguyên tắc

Sáu quyết định mà mọi component tuân theo. Mỗi quyết định có mặt vì đã có lúc thiếu nó sinh ra một lỗi không gây tiếng động — các trang link bên dưới kể lại những chuyện đó.

Cách đọc site này

Các trang component cùng một khuôn: component dùng để làm gì, demo chạy thật, props, những gì nó chưa làm được, và những gì nó làm cho người dùng bàn phím và trình đọc màn hình — theo đúng thứ tự đó.

Xem trước, rồi tới Mã

Mỗi demo là component thật với state thật — gõ, kéo, chọn, và nó phản hồi. Tab Mã bên cạnh là chính demo đó dưới dạng mã nguồn, dán vào là dùng được.

Props, lấy từ kiểu

Bảng props viết theo khai báo kiểu đã phát hành của gói, và giá trị mặc định được đối chiếu với mã nguồn. Cố ý để chữ trơn: đọc thấy gì thì gõ đúng thế.

Vì sao, không chỉ là gì

Mã nguồn của gói ghi lại vì sao từng quyết định được đưa ra và đã đo những gì. Các trang chuyển tiếp điều đó — một tỉ lệ tương phản, lỗi mà một giá trị mặc định có mặt để ngăn — vì chính nó cho phép bất đồng với một mặc định mà vẫn an toàn.

Mỗi lần một phiên bản

Site mô tả đúng phiên bản ghi ở chân thanh bên, đọc từ gói đã cài lúc build. Hành vi cũ và mọi bước chuyển đổi nằm trong nhật ký thay đổi.

Bắt đầu từ đâu