Kind config editor
The admin's editors of a kind's vocabulary (@krizaka/organize KindConfig, krizaka-ts#89): TagSetEditor — the tags offered, who manages them, whether people add their own, the most — and StatusSetEditor — the states in their order, the initial state, the moves from × to with their roles, confirmation and reasons. Value in, onChange out; the product posts the save.
import { TagSetEditor, StatusSetEditor } from "@krizaka/ui/kind-config-editor";Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
Why it is here. Used by Yomizaka, Akinaza.
When to use
- A product's settings where the admin sets the tags and the statuses of a kind (clients, invoices, applicant files): « the admin configures everything ».
- To show the problems the server's own rules found (
kindConfigProblems) in the place where they are fixed.
When not to use
- For a person's own tags on a file.Use instead: Tag selector
- To change the state of one entity.Use instead: Status chip
- For any other setting.Use instead: Settings layout
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { TagSetEditor, StatusSetEditor } from "@krizaka/ui/kind-config-editor";Examples
Tag set
The presets of a hair studio's clients (name, colour, order), who manages tags, « people can add their own », the most; the server's problems in place.
Status set
Applicant files: states in order with both labels, tone and final, the initial state, and the moves from × to with roles, confirmation and reasons.
Derived set
An invoice's statuses come from the ledger: shown, with nothing to move.
Props
StatusSetEditor
The admin's status set: the states in their order (FR and EN, tone, final), the initial state, and the moves from × to.
| Prop | Type | Default | Description |
|---|---|---|---|
onChangerequired | (value: StatusSet) => void | — | Called with the whole set after every change. |
rolesrequired | readonly EditorRole[] | — | The roles of the product that can make a move. |
valuerequired | StatusSet | — | The kind's status set (KindConfig.status). |
className | string | — | Classes merged on the root. |
disabled | boolean | — | Not available. |
labels | Partial<StatusSetEditorLabels> | — | The words, passed translated (English by default). |
locale | keyof Label | en | The language the states are named in elsewhere in the editor (the moves' names). |
problems | readonly string[] | — | What kindConfigProblems found (the server's own rules), shown above the list. |
TagSetEditor
The admin's tag set: the presets of a variant (name, colour, order), who writes, whether people add their own, the most.
| Prop | Type | Default | Description |
|---|---|---|---|
onChangerequired | (value: TagSetValue) => void | — | Called with the whole set after every change. |
rolesrequired | readonly EditorRole[] | — | The roles of the product that can write tags. |
valuerequired | TagSetValue | — | The tags of the kind's configuration (KindConfig.tags). |
variantrequired | string | — | The variant whose presets are edited (a trade, or default). |
className | string | — | Classes merged on the root. |
disabled | boolean | — | Not available. |
labels | Partial<TagSetEditorLabels> | — | The words, passed translated (English by default). |
problems | readonly string[] | — | What kindConfigProblems found (the server's own rules), shown above the list. |
Accessibility
- Every control has its own accessible name: a field says its position and its language (« Label in French of state 2 »), a move says its two states and its roles.
- Dragging is an extra: the move-up and move-down buttons do the same, and the handle is not drawn on a phone.
- A final state's row of moves says « Final: no way out » instead of offering buttons; the initial state's « final » switch is off and says why.
- Problems are an alert above the list; a field with an empty label or a duplicate name is
aria-invalidand says so.
Keyboard
| Keys | Action |
|---|---|
| Tab | Reaches each field, switch and button in reading order. |
| Alt + ↑ / Alt + ↓ | In a name or a label, moves the row up or down; the focus follows the field. |
| Arrow keys | In a colour group, move between the six swatches. |
| Enter | In the field that adds a tag, adds it. |
Best practices
- Keep the descriptor in state, pass it as
valueand post it yourself with theversionyou read: aCONFLICT(409) says someone else changed it, aSTATE_IN_USE(409) names the states entities still hold. - Pass
problems={kindConfigProblems(config)}: the same rules as the server, shown above the list. - A colour is a name of the closed palette (
blue · green · amber · red · violet · gray), never a colour picker; a status never takes a tag's colour. - A reason is a list the admin writes in both languages, off by default; there is never a free-text reason.
- The order of the states is the order of the status column: reorder with the handle, the buttons, or Alt + ↑ ↓ in a field.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub