@overkube/uikit

overkube's UI kit: the components and styles its page and its addons are drawn with, so that they look one. Preact components by what they are for — actions (Button, Segmented), status, data (Table, Fields — fields laid out by what they hold, each value on one line, Show all where it is cut —, KeyValue, Chips, Code, YamlView, ConfigViewer, File, LogView, Gauge, Meter, Ratio, Split), display (Icon, Kbd, Logo, PageHeader, Ref, Skeleton, EmptyState, Highlight), layout (Panel, Card, Section, Rows, Board, Accordion, SideRail), forms (Select, MultiSelect, Switch, Slider, Checklist, GroupPicker, QueryField, SettingsForm, ThemePicker), navigation (Tab, NavList, the Catalog* pieces), a code editor (CodeEditor: YAML and JSON highlighted, checked against a JSON Schema — an OpenAPI one, a kind's — its fields offered, what it is told is wrong underlined; CodeMirror, loaded when first drawn), a map (MapView: cards in columns, their links, frames round groups, a long column wrapped — laid by ELK, loaded when first drawn), overlays (Layer, Above, placeAt) — and what they are made with (adoptStyles, useSortable, usePresence, copyText, toYaml).

Its styles are adopted by a document or a shadow root (adoptStyles); colours are dark, or light with data-theme='light' on .uk-root, as tokens (var(--uk-accent), var(--uk-panel), …) an addon's own components use too. A component's words are its labels prop (English by default: CONFIG_LABELS, FILE_LABELS, …), so a page in another language gives its own. The uk- prefix is the kit's own.

Icons are Tabler's (NOTICE), picked into src/display/icons.generated.ts by npm run icons -w @overkube/uikit. Stories (*.stories.tsx) run in make storybook beside the core's. Built with npm run build -w @overkube/uikit (dist/); in the workspace read from src/.