@medeo-plugin/sdk 0.7.0 → 0.9.0

package/src/ui.ts

@@ -0,0 +1,102 @@
+export { installStyles, uiStyles } from './ui/styles.js';
+
+export interface Identified { testid: string }
+export interface CardOptions extends Identified { title: string; description?: string }
+export interface PillOptions extends Identified { label: string; tone?: 'neutral' | 'info' | 'error' }
+export interface ToggleOptions extends Identified { label: string; checked: boolean; disabled?: boolean; onChange: (checked: boolean) => void }
+export interface Segment<T extends string = string> { value: T; label: string; disabled?: boolean }
+export interface SegmentedOptions<T extends string = string> extends Identified { label: string; options: readonly Segment<T>[]; value: T; disabled?: boolean; onChange: (value: T) => void }
+export interface ListOptions extends Identified { label: string }
+export type Child = Node | string | number | null | undefined | false;
+
+function node<K extends keyof HTMLElementTagNameMap>(tag: K, className: string, testid?: string, text?: string): HTMLElementTagNameMap[K] {
+  const el = document.createElement(tag);
+  el.className = className;
+  if (testid !== undefined) el.dataset.testid = testid;
+  if (text !== undefined) el.textContent = text;
+  return el;
+}
+function append(el: HTMLElement, children: readonly Child[]): void {
+  for (const child of children) if (child !== null && child !== undefined && child !== false) el.append(typeof child === 'number' ? String(child) : child);
+}
+export function card(options: CardOptions, ...children: Child[]): HTMLElement {
+  const root = node('section', 'medeo-ui medeo-card', options.testid);
+  root.setAttribute('aria-label', options.title);
+  root.append(node('h2', '', `${options.testid}.title`, options.title));
+  if (options.description !== undefined) root.append(node('p', 'medeo-description', undefined, options.description));
+  append(root, children);
+  return root;
+}
+export function pill(options: PillOptions): HTMLSpanElement {
+  const root = node('span', 'medeo-ui medeo-pill', options.testid, options.label);
+  root.dataset.tone = options.tone ?? 'info';
+  return root;
+}
+/** Native checkbox keyboard behavior (Space), with switch semantics. */
+export function toggle(options: ToggleOptions): HTMLLabelElement & { input: HTMLInputElement } {
+  const root = node('label', 'medeo-ui medeo-toggle', `${options.testid}.root`);
+  const input = node('input', '', options.testid);
+  input.type = 'checkbox'; input.setAttribute('role', 'switch');
+  input.checked = options.checked; input.disabled = options.disabled ?? false;
+  input.addEventListener('change', () => options.onChange(input.checked));
+  root.append(input, node('span', '', undefined, options.label));
+  return Object.assign(root, { input });
+}
+/** Shared radio keyboard navigation; disabled choices are skipped, edges wrap. */
+export function segmentTarget<T extends string>(options: readonly Segment<T>[], index: number, key: string, rtl = false): number | undefined {
+  const enabled = options.map((o, i) => o.disabled ? -1 : i).filter(i => i >= 0);
+  if (!enabled.length) return undefined;
+  if (key === 'Home') return enabled[0];
+  if (key === 'End') return enabled[enabled.length - 1];
+  let direction = key === 'ArrowDown' ? 1 : key === 'ArrowUp' ? -1 : key === 'ArrowRight' ? (rtl ? -1 : 1) : key === 'ArrowLeft' ? (rtl ? 1 : -1) : 0;
+  if (!direction) return undefined;
+  return enabled[(enabled.indexOf(index) + direction + enabled.length) % enabled.length];
+}
+export function segmentTabIndex<T extends string>(options: readonly Segment<T>[], value: T, index: number): number {
+  let active = options.findIndex(o => o.value === value && !o.disabled);
+  if (active < 0) active = options.findIndex(o => !o.disabled);
+  return index === active ? 0 : -1;
+}
+export function segmented<T extends string>(options: SegmentedOptions<T>): HTMLDivElement & { setValue(value: T): void; setDisabled(disabled: boolean): void } {
+  const root = node('div', 'medeo-ui medeo-segmented', options.testid);
+  root.setAttribute('role', 'radiogroup'); root.setAttribute('aria-label', options.label);
+  let value = options.value, disabled = options.disabled ?? false;
+  const buttons = options.options.map((option, index) => {
+    const button = node('button', '', `${options.testid}.${index}`, option.label);
+    button.type = 'button'; button.setAttribute('role', 'radio');
+    button.addEventListener('click', () => {
+      if (disabled || option.disabled) return;
+      value = option.value; render(); options.onChange(value);
+    });
+    button.addEventListener('keydown', event => {
+      if (disabled) return;
+      const target = segmentTarget(options.options, index, event.key, getComputedStyle(root).direction === 'rtl');
+      if (target === undefined) return;
+      event.preventDefault(); buttons[target].focus(); buttons[target].click();
+    });
+    return button;
+  });
+  function render() {
+    buttons.forEach((button, index) => {
+      button.disabled = disabled || !!options.options[index].disabled;
+      button.tabIndex = disabled ? -1 : segmentTabIndex(options.options, value, index);
+      button.setAttribute('aria-checked', String(options.options[index].value === value));
+    });
+  }
+  root.append(...buttons); render();
+  return Object.assign(root, { setValue(next: T) { value = next; render(); }, setDisabled(next: boolean) { disabled = next; render(); } });
+}
+/** Each child becomes one semantic list item; caller owns empty-state wording. */
+export function list(options: ListOptions, ...items: Child[]): HTMLUListElement {
+  const root = node('ul', 'medeo-ui medeo-list', options.testid);
+  root.setAttribute('aria-label', options.label);
+  items.forEach((item, index) => { const li = node('li', '', `${options.testid}.${index}`); append(li, [item]); root.append(li); });
+  return root;
+}
+export function emptyState(options: CardOptions): HTMLElement {
+  const root = node('section', 'medeo-ui medeo-empty', options.testid);
+  root.setAttribute('aria-label', options.title);
+  root.append(node('h2', '', undefined, options.title));
+  if (options.description !== undefined) root.append(node('p', 'medeo-description', undefined, options.description));
+  return root;
+}