@cratis/scene.blueprint.default 4.38.0 → 4.40.0

package/foundation/SubNavigation.tsx

@@ -0,0 +1,49 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useMemo } from 'react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
+import { readOptionalString } from '../shell/elementProperties';
+import { activeTab, readTabs } from './tabModel';
+import { ComponentState, readComponentState } from './ComponentState';
+import { readFoundationStrings } from './foundationStrings';
+import { FoundationFrame } from './StateFrame';
+import { useUrlState } from './urlState';
+
+/**
+ * The `subNavigation` component: a module's own sections as a tab bar or a left rail.
+ *
+ * `items` name the sections (id, label, optional count badge), `orientation` is `horizontal` (tabs, default) or `vertical` (a left rail), and
+ * `urlKey` keeps the active section in the address so a deep link restores it. It is a navigation landmark, the current section carries
+ * `aria-current="page"`, and choosing a section only changes the section: the shell around it keeps its state, which is what makes it a
+ * sub-navigation rather than a page change. The id of the active section is the `value` output, which the module's content binds to.
+ */
+export function SubNavigation({ element, interactions, bindingOutputs }: RegisteredComponentProps) {
+    const items = useMemo(() => readTabs(element.properties.items), [element.properties.items]);
+    const [requested, setRequested] = useUrlState(readOptionalString(element, 'urlKey'), readOptionalString(element, 'activeItem'));
+    const active = activeTab(items, requested);
+    const strings = readFoundationStrings(element);
+    const state = readComponentState(element, items.length > 0);
+
+    useValueOutput(bindingOutputs, active);
+
+    return (
+        <FoundationFrame element={element} interactions={interactions} name='sub-navigation' state={state} skeleton={[50]}>
+            {state !== ComponentState.Loading && (
+                <nav aria-label={readOptionalString(element, 'label') ?? strings.subNavLabel} className='foundation-subnav' data-orientation={element.properties.orientation === 'vertical' ? 'vertical' : 'horizontal'}>
+                    <ul>
+                        {items.map(item => (
+                            <li key={item.id}>
+                                <a href={`?${new URLSearchParams({ [readOptionalString(element, 'urlKey') ?? 'section']: item.id }).toString()}`} aria-current={item.id === active ? 'page' : undefined}
+                                    aria-disabled={item.disabled || undefined} className='foundation-subnav-link'
+                                    onClick={event => { event.preventDefault(); if (!item.disabled) { setRequested(item.id); interactions?.onSelect?.(); } }}>
+                                    {item.label}{item.badge !== undefined && <span className='foundation-tab-badge'>{item.badge}</span>}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </nav>
+            )}
+        </FoundationFrame>
+    );
+}

package/foundation/TabSet.tsx

@@ -0,0 +1,65 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { KeyboardEvent, useMemo, useRef } from 'react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
+import { readOptionalString } from '../shell/elementProperties';
+import { activeTab, readTabs, stepTab } from './tabModel';
+import { ComponentState, readComponentState } from './ComponentState';
+import { readFoundationStrings } from './foundationStrings';
+import { FoundationFrame } from './StateFrame';
+import { useUrlState } from './urlState';
+
+/**
+ * The `tabSet` component: a set of tabs, each showing the content filed under its id in the element's slots.
+ *
+ * `tabs` name the tabs (id, label, optional count badge, disabled); the content of tab `overview` is the slot `overview`. It follows the
+ * ARIA tabs pattern - arrows, Home and End move and select, the active tab is the one tab stop, each panel is labelled by its tab - and the
+ * active tab is kept in the address under `urlKey` when one is given, so a deep link and a refresh restore it. The id of the active tab is the
+ * `value` output. The tabs a record page offers (Overview, Related, Files, History) are configurable by changing this property.
+ */
+export function TabSet({ element, interactions, slots, bindingOutputs }: RegisteredComponentProps) {
+    const tabs = useMemo(() => readTabs(element.properties.tabs), [element.properties.tabs]);
+    const [requested, setRequested] = useUrlState(readOptionalString(element, 'urlKey'), readOptionalString(element, 'activeTab'));
+    const active = activeTab(tabs, requested);
+    const strings = readFoundationStrings(element);
+    const state = readComponentState(element, tabs.length > 0);
+    const list = useRef<HTMLDivElement>(null);
+
+    useValueOutput(bindingOutputs, active);
+
+    const choose = (id: string | undefined, focus = false) => {
+        if (id === undefined) return;
+        setRequested(id);
+        interactions?.onSelect?.();
+        if (focus) requestAnimationFrame(() => list.current?.querySelector<HTMLElement>(`[data-tab="${CSS.escape(id)}"]`)?.focus());
+    };
+    const move = (event: KeyboardEvent) => {
+        const direction = { ArrowRight: 'next', ArrowDown: 'next', ArrowLeft: 'previous', ArrowUp: 'previous', Home: 'first', End: 'last' }[event.key] as 'next' | 'previous' | 'first' | 'last' | undefined;
+        if (direction === undefined) return;
+        event.preventDefault();
+        choose(stepTab(tabs, active, direction), true);
+    };
+
+    return (
+        <FoundationFrame element={element} interactions={interactions} name='tab-set' state={state} skeleton={[60, 100]}>
+            {state !== ComponentState.Loading && (
+                <>
+                    <div ref={list} role='tablist' aria-label={readOptionalString(element, 'label') ?? strings.tabsLabel} className='foundation-tabs' onKeyDown={move}>
+                        {tabs.map(tab => (
+                            <button key={tab.id} id={`${element.id}-tab-${tab.id}`} data-tab={tab.id} type='button' role='tab' className='foundation-tab' aria-selected={tab.id === active}
+                                aria-controls={`${element.id}-panel-${tab.id}`} tabIndex={tab.id === active ? 0 : -1} disabled={tab.disabled} onClick={() => choose(tab.id)}>
+                                {tab.label}{tab.badge !== undefined && <span className='foundation-tab-badge'>{tab.badge}</span>}
+                            </button>
+                        ))}
+                    </div>
+                    {tabs.map(tab => (
+                        <div key={tab.id} id={`${element.id}-panel-${tab.id}`} role='tabpanel' aria-labelledby={`${element.id}-tab-${tab.id}`} hidden={tab.id !== active} tabIndex={0} className='foundation-tab-panel'>
+                            {tab.id === active ? slots?.[tab.id] : undefined}
+                        </div>
+                    ))}
+                </>
+            )}
+        </FoundationFrame>
+    );
+}

package/foundation/WizardProgress.tsx

@@ -0,0 +1,109 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useEffect, useMemo, useState } from 'react';
+import { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';
+import { readOptionalString } from '../shell/elementProperties';
+import { ComponentState, readComponentState } from './ComponentState';
+import { FoundationIcon } from './FoundationIcon';
+import { formatText, readFoundationStrings } from './foundationStrings';
+import { FoundationFrame } from './StateFrame';
+import { StepStatus, canOpen, neighbour, readWizardSteps, reachableStep, statusOf } from './wizardModel';
+import { ActionButton } from './ActionButton';
+import { useUrlState } from './urlState';
+
+const storageKey = (element: { id: string }, key: string | undefined) => `scene.wizard.${key ?? element.id}`;
+
+/**
+ * The completed steps saved in the session, or none. Storage can be absent or refuse access - server rendering, a sandboxed frame, a browser in a
+ * private mode - and a wizard that cannot remember its progress is still a wizard, so every storage access is guarded and a failure only loses the memory.
+ */
+function readSaved(key: string): Set<string> {
+    try {
+        const saved = JSON.parse(window.sessionStorage.getItem(key) ?? '[]') as unknown;
+        return new Set(Array.isArray(saved) ? saved.filter((id): id is string => typeof id === 'string') : []);
+    } catch {
+        return new Set();
+    }
+}
+
+/** Saves the completed steps for the session; a refusal by the browser is ignored (see {@link readSaved}). */
+function writeSaved(key: string, completed: Set<string>): void {
+    try {
+        window.sessionStorage.setItem(key, JSON.stringify([...completed]));
+    } catch {
+        // The progress is simply not remembered across a refresh.
+    }
+}
+
+/**
+ * The `wizardProgress` component: the steps of a linear wizard, the back/next/finish controls and the draft save, with the step's own content in
+ * the slot named by its id.
+ *
+ * `steps` (`id`, `label`, `valid`) are linear. Next is blocked while the current step is not `valid`, and says so. The final step is the review step: Finish
+ * replaces Next. Completed steps stay in a progress list and can be revisited; a step cannot be opened before the ones ahead of it are done. The current step
+ * (in the address under `urlKey`) and the completed steps (in the session) are restored on refresh, and a refresh can never land past a step that was not
+ * done. The id of the current step is the `value` output; "Save draft" runs the behaviors attached to the element and says so.
+ */
+export function WizardProgress({ element, interactions, slots, bindingOutputs }: RegisteredComponentProps) {
+    const steps = useMemo(() => readWizardSteps(element.properties.steps), [element.properties.steps]);
+    const urlKey = readOptionalString(element, 'urlKey');
+    const [requested, setRequested] = useUrlState(urlKey, readOptionalString(element, 'currentStep'));
+    const key = storageKey(element, urlKey);
+    const [completed, setCompleted] = useState<Set<string>>(() => readSaved(key));
+    const [draftSaved, setDraftSaved] = useState(false);
+    const strings = readFoundationStrings(element);
+    const state = readComponentState(element, steps.length > 0);
+    const current = reachableStep(steps, completed, requested);
+    const index = steps.findIndex(step => step.id === current);
+    const step = steps[index];
+    const last = index === steps.length - 1;
+
+    useEffect(() => writeSaved(key, completed), [key, completed]);
+    useValueOutput(bindingOutputs, current);
+
+    const go = (id: string | undefined) => { if (id === undefined) return; setRequested(id); setDraftSaved(false); interactions?.onSelect?.(); };
+    const next = () => {
+        if (!step?.valid) return;
+        setCompleted(current_ => new Set(current_).add(step.id));
+        go(neighbour(steps, current, 1)?.id);
+    };
+    const finish = () => { if (!step?.valid) return; setCompleted(current_ => new Set(current_).add(step.id)); interactions?.onClick?.({ stopPropagation: () => undefined }); };
+
+    return (
+        <FoundationFrame element={element} interactions={interactions} name='wizard' state={state} skeleton={[100, 60, 100]}>
+            {state !== ComponentState.Loading && step && (
+                <>
+                    <nav aria-label={strings.wizardProgress}>
+                        <ol className='foundation-wizard-steps'>
+                            {steps.map((candidate, position) => {
+                                const status = statusOf(completed, current, candidate.id);
+                                const open = canOpen(steps, completed, candidate.id);
+                                const text = status === StepStatus.Completed ? strings.wizardComplete : status === StepStatus.Current ? strings.wizardCurrent : strings.wizardUpcoming;
+                                return (
+                                    <li key={candidate.id} className='foundation-wizard-step' data-status={status}>
+                                        <button type='button' aria-current={status === StepStatus.Current ? 'step' : undefined} disabled={!open} onClick={() => go(candidate.id)}>
+                                            <span className='foundation-wizard-marker'>{status === StepStatus.Completed ? <FoundationIcon name='check' /> : position + 1}</span>
+                                            <span>{candidate.label}</span>
+                                            <span className='foundation-visually-hidden'>{`, ${formatText(strings.wizardStep, { n: position + 1, total: steps.length })}, ${text}`}</span>
+                                        </button>
+                                    </li>
+                                );
+                            })}
+                        </ol>
+                    </nav>
+                    <div className='foundation-wizard-body' role='group' aria-label={`${formatText(strings.wizardStep, { n: index + 1, total: steps.length })}: ${step.label}`}>
+                        {slots?.[step.id]}
+                    </div>
+                    <div className='foundation-wizard-actions'>
+                        <ActionButton emphasis='quiet' disabledReason={strings.disabledNoPermission} onClick={() => { setDraftSaved(true); interactions?.onClick?.({ stopPropagation: () => undefined }); }}>{strings.wizardSaveDraft}</ActionButton>
+                        <span role='status' className='foundation-count'>{draftSaved ? strings.wizardDraftSaved : ''}</span>
+                        <span className='foundation-wizard-spacer' />
+                        {index > 0 && <ActionButton emphasis='secondary' disabledReason={strings.disabledNoPermission} onClick={() => go(neighbour(steps, current, -1)?.id)}>{strings.wizardBack}</ActionButton>}
+                        <button type='button' className='foundation-button' aria-disabled={!step.valid || undefined} onClick={last ? finish : next}>{last ? strings.wizardFinish : strings.wizardNext}</button>
+                    </div>
+                </>
+            )}
+        </FoundationFrame>
+    );
+}

package/foundation/boardModel.ts

@@ -0,0 +1,64 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** One column of a board, mapped to a status or stage value. */
+export interface BoardColumn {
+    id: string;
+    label: string;
+    /** The most cards the stage should hold; 0 means no limit. */
+    limit: number;
+}
+
+/** One card: the title, an assignee, a few key fields and badges. */
+export interface BoardCard {
+    id: string;
+    title: string;
+    column: string;
+    assignee?: string;
+    fields: { label: string; value: string }[];
+    badges: string[];
+}
+
+const records = (value: unknown): Record<string, unknown>[] =>
+    Array.isArray(value) ? value.filter((entry): entry is Record<string, unknown> => typeof entry === 'object' && entry !== null && !Array.isArray(entry)) : [];
+
+/** Reads columns, dropping those without an id and repeated ids. */
+export function readColumnsOfBoard(value: unknown): BoardColumn[] {
+    const seen = new Set<string>();
+    return records(value).flatMap(entry => {
+        if (typeof entry.id !== 'string' || entry.id.length === 0 || seen.has(entry.id)) return [];
+        seen.add(entry.id);
+        return [{ id: entry.id, label: typeof entry.label === 'string' && entry.label.length > 0 ? entry.label : entry.id, limit: typeof entry.limit === 'number' && entry.limit > 0 ? Math.floor(entry.limit) : 0 }];
+    });
+}
+
+/** Reads cards, dropping those without an id or a title, keeping at most three key fields. */
+export function readCards(value: unknown): BoardCard[] {
+    const seen = new Set<string>();
+    return records(value).flatMap(entry => {
+        if (typeof entry.id !== 'string' || entry.id.length === 0 || seen.has(entry.id) || typeof entry.title !== 'string') return [];
+        seen.add(entry.id);
+        const fields = records(entry.fields).flatMap(field => (typeof field.label === 'string' && typeof field.value === 'string' ? [{ label: field.label, value: field.value }] : [])).slice(0, 3);
+        return [{
+            id: entry.id, title: entry.title, column: typeof entry.column === 'string' ? entry.column : '', fields,
+            badges: Array.isArray(entry.badges) ? entry.badges.filter((badge): badge is string => typeof badge === 'string') : [],
+            ...(typeof entry.assignee === 'string' ? { assignee: entry.assignee } : {}),
+        }];
+    });
+}
+
+/** The cards of one column, in the order given. A card whose column does not exist is shown in the first column rather than lost. */
+export function cardsOf(columns: BoardColumn[], cards: BoardCard[], column: string): BoardCard[] {
+    const known = new Set(columns.map(candidate => candidate.id));
+    return cards.filter(card => card.column === column || (column === columns[0]?.id && !known.has(card.column)));
+}
+
+/** Moves a card to a column, at the end; moving to the column it is in, or to one that does not exist, changes nothing. */
+export function moveCard(columns: BoardColumn[], cards: BoardCard[], id: string, to: string): BoardCard[] {
+    const card = cards.find(candidate => candidate.id === id);
+    if (!card || !columns.some(column => column.id === to) || cardsOf(columns, cards, to).includes(card)) return cards;
+    return [...cards.filter(candidate => candidate.id !== id), { ...card, column: to }];
+}
+
+/** Whether a column holds more cards than its limit. */
+export const overLimit = (column: BoardColumn, count: number): boolean => column.limit > 0 && count > column.limit;

package/foundation/formModel.ts

@@ -0,0 +1,146 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** The field types a form offers (Part B 2.8). */
+export enum FormFieldType {
+    Text = 'text',
+    Number = 'number',
+    Currency = 'currency',
+    Date = 'date',
+    Select = 'select',
+    MultiSelect = 'multiSelect',
+    Lookup = 'lookup',
+    Toggle = 'toggle',
+    File = 'file',
+    RichText = 'richText',
+    Address = 'address',
+}
+
+/** One field of a form section. */
+export interface FormField {
+    name: string;
+    label: string;
+    type: FormFieldType;
+    required: boolean;
+    options: string[];
+    /** The columns of the section grid the field spans (1 to 3). */
+    span: number;
+    placeholder?: string;
+    help?: string;
+}
+
+/** A titled group of fields in a grid of one to three columns. */
+export interface FormSection {
+    id: string;
+    title: string;
+    columns: number;
+    fields: FormField[];
+}
+
+/** The values of a form by field name; a multi-select is an array, a toggle a boolean, an address an object of lines. */
+export type FormValues = Record<string, unknown>;
+
+/** The ways the one form can be used (Part B 2.8). */
+export enum FormMode {
+    Create = 'create',
+    Edit = 'edit',
+    ReadOnly = 'readOnly',
+    Settings = 'settings',
+}
+
+/** The lines of an address, in the order they are asked. */
+export const addressLines = ['street', 'postalCode', 'city', 'country'] as const;
+
+const records = (value: unknown): Record<string, unknown>[] =>
+    Array.isArray(value) ? value.filter((entry): entry is Record<string, unknown> => typeof entry === 'object' && entry !== null && !Array.isArray(entry)) : [];
+
+/** Reads the mode, defaulting to create. */
+export const readFormMode = (value: unknown): FormMode => ((Object.values(FormMode) as string[]).includes(value as string) ? (value as FormMode) : FormMode.Create);
+
+/** Reads sections, with their fields, dropping fields without a name and repeated names; a section grid is clamped to one to three columns. */
+export function readFormSections(value: unknown): FormSection[] {
+    const names = new Set<string>();
+    return records(value).flatMap((section, index) => {
+        const columns = typeof section.columns === 'number' ? Math.min(3, Math.max(1, Math.floor(section.columns))) : 1;
+        const fields = records(section.fields).flatMap((entry): FormField[] => {
+            if (typeof entry.name !== 'string' || entry.name.length === 0 || names.has(entry.name)) return [];
+            names.add(entry.name);
+            return [{
+                name: entry.name,
+                label: typeof entry.label === 'string' && entry.label.length > 0 ? entry.label : entry.name,
+                type: (Object.values(FormFieldType) as string[]).includes(entry.type as string) ? (entry.type as FormFieldType) : FormFieldType.Text,
+                required: entry.required === true,
+                options: Array.isArray(entry.options) ? entry.options.filter((option): option is string => typeof option === 'string') : [],
+                span: typeof entry.span === 'number' ? Math.min(columns, Math.max(1, Math.floor(entry.span))) : 1,
+                ...(typeof entry.placeholder === 'string' ? { placeholder: entry.placeholder } : {}),
+                ...(typeof entry.help === 'string' ? { help: entry.help } : {}),
+            }];
+        });
+        return [{ id: typeof section.id === 'string' && section.id.length > 0 ? section.id : `section-${index}`, title: typeof section.title === 'string' ? section.title : '', columns, fields }];
+    });
+}
+
+/** Whether a field holds a value: an empty or blank text, an empty list, a toggle left false (a required toggle must be on) or an address with no street and city are empty. */
+export function isFilled(field: FormField, value: unknown): boolean {
+    switch (field.type) {
+        case FormFieldType.Toggle: return value === true;
+        case FormFieldType.MultiSelect: return Array.isArray(value) && value.length > 0;
+        case FormFieldType.File: return Array.isArray(value) ? value.length > 0 : typeof value === 'string' && value.trim().length > 0;
+        case FormFieldType.Address: return typeof value === 'object' && value !== null && ['street', 'city'].every(line => typeof (value as Record<string, unknown>)[line] === 'string' && ((value as Record<string, unknown>)[line] as string).trim().length > 0);
+        case FormFieldType.Number: case FormFieldType.Currency: return typeof value === 'number' ? Number.isFinite(value) : typeof value === 'string' && value.trim().length > 0 && Number.isFinite(Number(value));
+        default: return typeof value === 'string' ? value.trim().length > 0 : value !== undefined && value !== null && value !== '';
+    }
+}
+
+/** Why a field is invalid, as a kind the component words in the locale: `required`, `invalid`, or undefined when it is fine. An empty optional field is fine. */
+export function problemOf(field: FormField, value: unknown): 'required' | 'invalid' | undefined {
+    if (!isFilled(field, value)) {
+        const empty = value === undefined || value === null || value === '' || (typeof value === 'string' && value.trim() === '') || (Array.isArray(value) && value.length === 0) || value === false;
+        return field.required ? 'required' : empty ? undefined : 'invalid';
+    }
+
+    if (field.type === FormFieldType.Date && typeof value === 'string' && Number.isNaN(new Date(value).getTime())) return 'invalid';
+    if ((field.type === FormFieldType.Select || field.type === FormFieldType.Lookup) && field.options.length > 0 && typeof value === 'string' && !field.options.includes(value)) return 'invalid';
+    return undefined;
+}
+
+/** The problems of every field, by field name, for the fields in the given sections. */
+export function validate(sections: FormSection[], values: FormValues): Record<string, 'required' | 'invalid'> {
+    const problems: Record<string, 'required' | 'invalid'> = {};
+    for (const field of sections.flatMap(section => section.fields)) {
+        const problem = problemOf(field, values[field.name]);
+        if (problem) problems[field.name] = problem;
+    }
+
+    return problems;
+}
+
+/** Whether two sets of values are the same, field by field and in depth, so the unsaved-changes guard compares what the person sees. */
+export function sameValues(left: FormValues, right: FormValues): boolean {
+    const keys = new Set([...Object.keys(left), ...Object.keys(right)]);
+    return [...keys].every(key => JSON.stringify(normalizeValue(left[key])) === JSON.stringify(normalizeValue(right[key])));
+}
+
+function normalizeValue(value: unknown): unknown {
+    if (value === undefined || value === null || value === '' || value === false) return null;
+    if (Array.isArray(value)) return value.length === 0 ? null : value;
+    if (typeof value === 'object') { const entries = Object.entries(value as Record<string, unknown>).filter(([, line]) => line !== '' && line !== undefined).sort(([a], [b]) => a.localeCompare(b)); return entries.length === 0 ? null : entries; }
+    return value;
+}
+
+/** Maps a server's field errors (`{ field: message }` or `[{ field, message }]`) onto the fields of the form; an error for a field the form does not have is returned as a general one so it is never lost. */
+export function mapServerErrors(sections: FormSection[], errors: unknown): { byField: Record<string, string>; general: string[] } {
+    const known = new Set(sections.flatMap(section => section.fields.map(field => field.name)));
+    const pairs: [string, string][] = Array.isArray(errors)
+        ? records(errors).flatMap(entry => (typeof entry.message === 'string' ? [[typeof entry.field === 'string' ? entry.field : '', entry.message] as [string, string]] : []))
+        : typeof errors === 'object' && errors !== null ? Object.entries(errors as Record<string, unknown>).flatMap(([field, message]) => (typeof message === 'string' ? [[field, message] as [string, string]] : [])) : [];
+
+    const byField: Record<string, string> = {};
+    const general: string[] = [];
+    for (const [field, message] of pairs) {
+        if (known.has(field) && byField[field] === undefined) byField[field] = message;
+        else general.push(field && !known.has(field) ? `${field}: ${message}` : message);
+    }
+
+    return { byField, general };
+}

package/foundation/foundationComponentMetadata.ts

@@ -25,4 +25,13 @@ export const foundationComponentMetadata: Record<string, ComponentMetadata> = {
     [ComponentName.ApprovalChainStepper]: m('Approval chain', ComponentCategory.Navigation, 'workflow', ['approvals', 'steps', 'workflow', 'sign off', 'stepper']),
     [ComponentName.OrgTree]: m('Org tree', ComponentCategory.DataDisplay, 'network', ['organization', 'hierarchy', 'org chart', 'reports to', 'tree']),
     [ComponentName.PermissionMatrix]: m('Permission matrix', ComponentCategory.Input, 'shield-check', ['roles', 'permissions', 'access', 'grants', 'rbac']),
+    [ComponentName.DataList]: m('Data list', ComponentCategory.DataDisplay, 'table', ['table', 'grid', 'records', 'cards', 'collection', 'list']),
+    [ComponentName.TabSet]: m('Tab set', ComponentCategory.Navigation, 'panel-top', ['tabs', 'sections', 'panels']),
+    [ComponentName.SubNavigation]: m('Sub-navigation', ComponentCategory.Navigation, 'panel-left', ['module', 'sections', 'rail', 'tabs']),
+    [ComponentName.BulkBar]: m('Bulk bar', ComponentCategory.Actions, 'check-check', ['selection', 'bulk', 'batch', 'actions']),
+    [ComponentName.GlobalSearch]: m('Search', ComponentCategory.Input, 'search', ['search', 'find', 'query']),
+    [ComponentName.NotificationsButton]: m('Notifications button', ComponentCategory.Actions, 'bell', ['bell', 'alerts', 'unread']),
+    [ComponentName.KanbanBoard]: m('Kanban board', ComponentCategory.DataDisplay, 'kanban', ['board', 'kanban', 'columns', 'pipeline', 'cards']),
+    [ComponentName.WizardProgress]: m('Wizard', ComponentCategory.Navigation, 'footprints', ['wizard', 'steps', 'stepper', 'multi-step']),
+    [ComponentName.FormScreenBody]: m('Form', ComponentCategory.Forms, 'text-cursor-input', ['form', 'fields', 'sections', 'validation']),
 };