@jackuait/blok 0.10.3 → 0.10.5

package/src/tools/database/database-list-view.ts

@@ -0,0 +1,333 @@
+import type { I18n } from '../../../types';
+import type { DatabaseRow, PropertyDefinition, PropertyValue, SelectOption } from './types';
+import type { DatabaseViewRenderer } from './database-view-renderer';
+
+interface DatabaseListViewOptions {
+  readOnly: boolean;
+  i18n: I18n;
+  rows: DatabaseRow[];
+  titlePropertyId: string;
+  schema: PropertyDefinition[];
+  visiblePropertyIds: string[];
+  options?: SelectOption[];
+  getRows?: (optionId: string) => DatabaseRow[];
+}
+
+/**
+ * DOM rendering layer for the flat list view.
+ * Renders rows as a flat list with optional property badges.
+ * All interactive elements use data-blok-database-* attributes for test selectors and event delegation.
+ */
+export class DatabaseListView implements DatabaseViewRenderer {
+  private readonly readOnly: boolean;
+  private readonly i18n: I18n;
+  private readonly rows: DatabaseRow[];
+  private readonly titlePropertyId: string;
+  private readonly schema: PropertyDefinition[];
+  private readonly visiblePropertyIds: string[];
+  private readonly groupOptions: SelectOption[] | undefined;
+  private readonly getGroupRows: ((optionId: string) => DatabaseRow[]) | undefined;
+
+  constructor({ readOnly, i18n, rows, titlePropertyId, schema, visiblePropertyIds, options, getRows }: DatabaseListViewOptions) {
+    this.readOnly = readOnly;
+    this.i18n = i18n;
+    this.rows = rows;
+    this.titlePropertyId = titlePropertyId;
+    this.schema = schema;
+    this.visiblePropertyIds = visiblePropertyIds;
+    this.groupOptions = options;
+    this.getGroupRows = getRows;
+  }
+
+  /**
+   * Creates the full list DOM from row data.
+   * When options are provided, renders grouped sections; otherwise renders a flat list.
+   */
+  createView(): HTMLDivElement {
+    const wrapper = document.createElement('div');
+
+    wrapper.setAttribute('data-blok-database-list', '');
+
+    if (this.groupOptions !== undefined && this.groupOptions.length > 0 && this.getGroupRows !== undefined) {
+      for (const option of this.groupOptions) {
+        const rows = this.getGroupRows(option.id);
+        const groupEl = this.createGroupElement(option, rows);
+
+        wrapper.appendChild(groupEl);
+      }
+    } else {
+      wrapper.setAttribute('role', 'list');
+      wrapper.setAttribute('aria-label', 'List view');
+
+      for (const row of this.rows) {
+        const rowEl = this.createRowElement(row);
+
+        wrapper.appendChild(rowEl);
+      }
+
+      if (!this.readOnly) {
+        const addRowBtn = this.createAddRowButton();
+
+        wrapper.appendChild(addRowBtn);
+      }
+    }
+
+    return wrapper;
+  }
+
+  /**
+   * Creates a collapsible group element for a select option.
+   */
+  private createGroupElement(option: SelectOption, rows: DatabaseRow[]): HTMLDivElement {
+    const groupEl = document.createElement('div');
+
+    groupEl.setAttribute('data-blok-database-list-group', '');
+    groupEl.setAttribute('data-option-id', option.id);
+
+    // Header
+    const header = document.createElement('div');
+
+    header.setAttribute('data-blok-database-list-group-header', '');
+
+    const toggle = document.createElement('span');
+
+    toggle.setAttribute('data-blok-database-list-group-toggle', '');
+    toggle.textContent = '▼';
+
+    const dot = document.createElement('span');
+
+    dot.setAttribute('data-blok-database-list-group-dot', '');
+
+    if (option.color !== undefined) {
+      dot.style.backgroundColor = `var(--blok-color-${option.color}-text)`;
+    }
+
+    const title = document.createElement('span');
+
+    title.setAttribute('data-blok-database-list-group-title', '');
+    title.textContent = option.label;
+
+    const count = document.createElement('span');
+
+    count.setAttribute('data-blok-database-list-group-count', '');
+    count.textContent = String(rows.length);
+
+    header.appendChild(toggle);
+    header.appendChild(dot);
+    header.appendChild(title);
+    header.appendChild(count);
+
+    // Rows container
+    const rowsContainer = document.createElement('div');
+
+    rowsContainer.setAttribute('data-blok-database-list-rows', '');
+    rowsContainer.setAttribute('role', 'list');
+
+    for (const row of rows) {
+      const rowEl = this.createRowElement(row);
+
+      rowsContainer.appendChild(rowEl);
+    }
+
+    // Add-row button
+    const addRowBtn = this.readOnly ? null : this.createAddRowButton(option.id);
+
+    // Collapse/expand toggle
+    header.addEventListener('click', () => {
+      const collapsed = rowsContainer.style.display === 'none';
+
+      rowsContainer.style.display = collapsed ? '' : 'none';
+      toggle.textContent = collapsed ? '▼' : '▶';
+
+      if (addRowBtn !== null) {
+        addRowBtn.style.display = collapsed ? '' : 'none';
+      }
+    });
+
+    groupEl.appendChild(header);
+    groupEl.appendChild(rowsContainer);
+
+    if (addRowBtn !== null) {
+      groupEl.appendChild(addRowBtn);
+    }
+
+    return groupEl;
+  }
+
+  /**
+   * Creates a row element and inserts it before the add-row button (if present), else appends.
+   */
+  appendRow(container: HTMLElement, row: DatabaseRow): void {
+    const rowEl = this.createRowElement(row);
+    const addRowBtn = container.querySelector('[data-blok-database-add-row]');
+
+    if (addRowBtn !== null) {
+      container.insertBefore(rowEl, addRowBtn);
+    } else {
+      container.appendChild(rowEl);
+    }
+  }
+
+  /**
+   * Removes a row element from the wrapper by its data-row-id.
+   */
+  removeRow(wrapper: HTMLElement, rowId: string): void {
+    const rowEl = wrapper.querySelector(`[data-row-id="${rowId}"]`);
+
+    rowEl?.remove();
+  }
+
+  /**
+   * Updates the visible title of a row element found by its data-row-id.
+   */
+  updateRowTitle(wrapper: HTMLElement, rowId: string, title: string): void {
+    const rowEl = wrapper.querySelector(`[data-row-id="${rowId}"]`);
+    const titleEl = rowEl?.querySelector('[data-blok-database-list-row-title]');
+
+    if (titleEl === null || titleEl === undefined) {
+      return;
+    }
+
+    if (title) {
+      titleEl.textContent = title;
+      titleEl.removeAttribute('data-placeholder');
+    } else {
+      titleEl.textContent = this.i18n.t('tools.database.rowTitlePlaceholder');
+      titleEl.setAttribute('data-placeholder', '');
+    }
+  }
+
+  /**
+   * Creates a single row element.
+   */
+  private createRowElement(row: DatabaseRow): HTMLDivElement {
+    const rowEl = document.createElement('div');
+    const title = (row.properties[this.titlePropertyId] as string) ?? '';
+
+    rowEl.setAttribute('data-blok-database-list-row', '');
+    rowEl.setAttribute('data-row-id', row.id);
+    rowEl.setAttribute('role', 'listitem');
+
+    const titleEl = document.createElement('div');
+
+    titleEl.setAttribute('data-blok-database-list-row-title', '');
+
+    if (title) {
+      titleEl.textContent = title;
+    } else {
+      titleEl.textContent = this.i18n.t('tools.database.rowTitlePlaceholder');
+      titleEl.setAttribute('data-placeholder', '');
+    }
+
+    rowEl.appendChild(titleEl);
+
+    const propertiesEl = this.createPropertiesElement(row);
+
+    rowEl.appendChild(propertiesEl);
+
+    return rowEl;
+  }
+
+  /**
+   * Creates the properties container with badges, open button, and delete button.
+   */
+  private createPropertiesElement(row: DatabaseRow): HTMLDivElement {
+    const propertiesEl = document.createElement('div');
+
+    propertiesEl.setAttribute('data-blok-database-list-row-properties', '');
+
+    for (const propId of this.visiblePropertyIds) {
+      const propDef = this.schema.find(p => p.id === propId);
+
+      if (propDef === undefined) {
+        continue;
+      }
+
+      const value = row.properties[propId];
+      const badge = this.createPropertyBadge(propDef, value);
+
+      if (badge !== null) {
+        propertiesEl.appendChild(badge);
+      }
+    }
+
+    const openBtn = document.createElement('button');
+
+    openBtn.setAttribute('data-blok-database-list-row-open', '');
+    openBtn.setAttribute('aria-label', this.i18n.t('tools.database.openRow'));
+    propertiesEl.appendChild(openBtn);
+
+    if (!this.readOnly) {
+      const deleteBtn = document.createElement('button');
+
+      deleteBtn.setAttribute('data-blok-database-delete-row', '');
+      deleteBtn.setAttribute('data-row-id', row.id);
+      deleteBtn.setAttribute('aria-label', this.i18n.t('tools.database.deleteRow'));
+      deleteBtn.textContent = '\u00d7';
+      propertiesEl.appendChild(deleteBtn);
+    }
+
+    return propertiesEl;
+  }
+
+  /**
+   * Creates a property badge span for a given property definition and value.
+   * Returns null if the value is undefined/null or if the select option is not found.
+   */
+  private createPropertyBadge(propDef: PropertyDefinition, value: PropertyValue): HTMLSpanElement | null {
+    if (value === undefined || value === null) {
+      return null;
+    }
+
+    const badge = document.createElement('span');
+
+    badge.setAttribute('data-blok-database-list-row-property', '');
+    badge.setAttribute('data-property-id', propDef.id);
+
+    if (propDef.type === 'select') {
+      const options = propDef.config?.options ?? [];
+      const option = options.find(o => o.id === value);
+
+      if (option === undefined) {
+        return null;
+      }
+
+      badge.textContent = option.label;
+
+      if (option.color !== undefined) {
+        badge.style.backgroundColor = `var(--blok-color-${option.color}-bg)`;
+        badge.style.color = `var(--blok-color-${option.color}-text)`;
+      }
+    } else if (propDef.type === 'checkbox') {
+      const checkbox = document.createElement('input');
+
+      checkbox.type = 'checkbox';
+      checkbox.checked = value === true;
+      badge.appendChild(checkbox);
+    } else if (typeof value === 'string' || typeof value === 'number') {
+      badge.textContent = String(value);
+    } else {
+      return null;
+    }
+
+    return badge;
+  }
+
+  /**
+   * Creates the "+ New" add-row button.
+   * When optionId is provided, sets data-option-id on the button.
+   */
+  private createAddRowButton(optionId?: string): HTMLButtonElement {
+    const addRowBtn = document.createElement('button');
+
+    addRowBtn.setAttribute('data-blok-database-add-row', '');
+    addRowBtn.setAttribute('aria-label', this.i18n.t('tools.database.addRow'));
+    addRowBtn.textContent = '+ ' + this.i18n.t('tools.database.newRow');
+
+    if (optionId !== undefined) {
+      addRowBtn.setAttribute('data-option-id', optionId);
+    }
+
+    return addRowBtn;
+  }
+}

package/src/tools/database/database-model.ts

@@ -0,0 +1,214 @@
+import { generateKeyBetween } from 'fractional-indexing';
+import { nanoid } from 'nanoid';
+import type {
+  DatabaseData,
+  DatabaseRow,
+  DatabaseViewConfig,
+  PropertyConfig,
+  PropertyDefinition,
+  PropertyType,
+  PropertyValue,
+  SelectOption,
+  ViewType,
+} from './types';
+
+export class DatabaseModel {
+  private schema: PropertyDefinition[];
+  private rows: DatabaseRow[] = [];
+  private views: DatabaseViewConfig[];
+  private activeViewId: string;
+
+  constructor(data?: Partial<DatabaseData>) {
+    if (data?.schema !== undefined && data.schema.length > 0) {
+      this.schema = data.schema.map((p) => ({ ...p }));
+    } else {
+      this.schema = DatabaseModel.createDefaultSchema();
+    }
+
+    if (data?.views !== undefined && data.views.length > 0) {
+      this.views = data.views.map((v) => ({ ...v, sorts: [...v.sorts], filters: [...v.filters], visibleProperties: [...v.visibleProperties] }));
+    } else {
+      const statusProp = this.schema.find((p) => p.type === 'select');
+      this.views = [DatabaseModel.createDefaultView(statusProp?.id)];
+    }
+
+    this.activeViewId = data?.activeViewId || (this.views.length > 0 ? this.views[0].id : '');
+  }
+
+  // ─── Schema ───
+
+  getSchema(): PropertyDefinition[] {
+    return [...this.schema];
+  }
+
+  getProperty(propertyId: string): PropertyDefinition | undefined {
+    return this.schema.find((p) => p.id === propertyId);
+  }
+
+  addProperty(name: string, type: PropertyType, config?: PropertyConfig): PropertyDefinition {
+    const lastPosition = this.schema.length > 0 ? this.schema[this.schema.length - 1].position : null;
+    const prop: PropertyDefinition = {
+      id: nanoid(),
+      name,
+      type,
+      position: generateKeyBetween(lastPosition, null),
+      ...(config !== undefined ? { config } : {}),
+    };
+    this.schema.push(prop);
+    return prop;
+  }
+
+  updateProperty(propertyId: string, changes: Partial<Pick<PropertyDefinition, 'name' | 'config'>>): void {
+    const prop = this.schema.find((p) => p.id === propertyId);
+    if (prop === undefined) return;
+    if (changes.name !== undefined) prop.name = changes.name;
+    if (changes.config !== undefined) prop.config = changes.config;
+  }
+
+  deleteProperty(propertyId: string): void {
+    this.schema = this.schema.filter((p) => p.id !== propertyId);
+  }
+
+  // ─── Row projection ───
+
+  setRows(rows: DatabaseRow[]): void {
+    this.rows = rows;
+  }
+
+  getOrderedRows(): DatabaseRow[] {
+    return [...this.rows].sort((a, b) => a.position.localeCompare(b.position));
+  }
+
+  getRow(rowId: string): DatabaseRow | undefined {
+    return this.rows.find((r) => r.id === rowId);
+  }
+
+  createRowData(properties?: Record<string, PropertyValue>): DatabaseRow {
+    const ordered = this.getOrderedRows();
+    const lastPosition = ordered.length > 0 ? ordered[ordered.length - 1].position : null;
+    return {
+      id: nanoid(),
+      position: generateKeyBetween(lastPosition, null),
+      properties: properties ?? {},
+    };
+  }
+
+  // ─── View-oriented queries ───
+
+  getRowsGroupedBy(propertyId: string): Map<string, DatabaseRow[]> {
+    const groups = new Map<string, DatabaseRow[]>();
+    const ordered = this.getOrderedRows();
+    for (const row of ordered) {
+      const rawValue = row.properties[propertyId];
+      const key = this.toGroupKey(rawValue);
+      const existing = groups.get(key);
+      if (existing !== undefined) {
+        existing.push(row);
+      } else {
+        groups.set(key, [row]);
+      }
+    }
+    return groups;
+  }
+
+  getSelectOptions(propertyId: string): SelectOption[] {
+    const prop = this.getProperty(propertyId);
+    if (prop === undefined || (prop.type !== 'select' && prop.type !== 'multiSelect')) return [];
+    const options = prop.config?.options ?? [];
+    return [...options].sort((a, b) => (a.position < b.position ? -1 : 1));
+  }
+
+  // ─── Views ───
+
+  getViews(): DatabaseViewConfig[] {
+    return [...this.views];
+  }
+
+  getView(viewId: string): DatabaseViewConfig | undefined {
+    return this.views.find((v) => v.id === viewId);
+  }
+
+  addView(name: string, type: ViewType, config: Partial<Pick<DatabaseViewConfig, 'groupBy' | 'sorts' | 'filters' | 'visibleProperties'>> = {}): DatabaseViewConfig {
+    const sorted = [...this.views].sort((a, b) => (a.position < b.position ? -1 : 1));
+    const lastPosition = sorted.length > 0 ? sorted[sorted.length - 1].position : null;
+    const view: DatabaseViewConfig = {
+      id: nanoid(),
+      name,
+      type,
+      position: generateKeyBetween(lastPosition, null),
+      groupBy: config.groupBy,
+      sorts: config.sorts ?? [],
+      filters: config.filters ?? [],
+      visibleProperties: config.visibleProperties ?? [],
+    };
+    this.views.push(view);
+    return view;
+  }
+
+  updateView(viewId: string, changes: Partial<Pick<DatabaseViewConfig, 'name' | 'type' | 'position' | 'groupBy' | 'sorts' | 'filters' | 'visibleProperties'>>): void {
+    const view = this.views.find((v) => v.id === viewId);
+    if (view === undefined) return;
+    Object.assign(view, changes);
+  }
+
+  deleteView(viewId: string): void {
+    this.views = this.views.filter((v) => v.id !== viewId);
+  }
+
+  // ─── Hydrate ───
+
+  hydrate(data: Partial<DatabaseData>): void {
+    if (data.schema !== undefined) {
+      this.schema = structuredClone(data.schema);
+    }
+    if (data.views !== undefined) {
+      this.views = structuredClone(data.views);
+    }
+  }
+
+  // ─── Snapshot ───
+
+  snapshot(): DatabaseData {
+    return {
+      schema: structuredClone(this.schema),
+      views: structuredClone(this.views),
+      activeViewId: this.activeViewId,
+    };
+  }
+
+  // ─── Static helpers ───
+
+  private toGroupKey(value: PropertyValue | undefined): string {
+    if (value === undefined || value === null) return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'boolean' || typeof value === 'number') return String(value);
+    return '';
+  }
+
+  static positionBetween(after: string | null, before: string | null): string {
+    return generateKeyBetween(after, before);
+  }
+
+  private static createDefaultSchema(): PropertyDefinition[] {
+    return [
+      { id: nanoid(), name: 'Title', type: 'title', position: 'a0' },
+      {
+        id: nanoid(), name: 'Status', type: 'select', position: 'a1',
+        config: {
+          options: [
+            { id: nanoid(), label: 'Not started', color: 'gray', position: 'a0' },
+            { id: nanoid(), label: 'In progress', color: 'blue', position: 'a1' },
+            { id: nanoid(), label: 'Done', color: 'green', position: 'a2' },
+          ],
+        },
+      },
+    ];
+  }
+
+  private static createDefaultView(groupByPropertyId?: string): DatabaseViewConfig {
+    return {
+      id: nanoid(), name: 'Board', type: 'board', position: 'a0',
+      groupBy: groupByPropertyId, sorts: [], filters: [], visibleProperties: [],
+    };
+  }
+}

package/src/tools/database/database-property-type-popover.ts

@@ -0,0 +1,108 @@
+import {
+  IconText,
+  IconHash,
+  IconList,
+  IconListBulleted,
+  IconCalendar,
+  IconListChecklist,
+  IconGlobe,
+} from '../../components/icons';
+import type { PropertyType } from './types';
+
+interface PropertyTypeOption {
+  type: PropertyType;
+  icon: string;
+  label: string;
+}
+
+const PROPERTY_TYPES: PropertyTypeOption[] = [
+  { type: 'text', icon: IconText, label: 'Text' },
+  { type: 'number', icon: IconHash, label: 'Number' },
+  { type: 'select', icon: IconList, label: 'Select' },
+  { type: 'multiSelect', icon: IconListBulleted, label: 'Multi-select' },
+  { type: 'date', icon: IconCalendar, label: 'Date' },
+  { type: 'checkbox', icon: IconListChecklist, label: 'Checkbox' },
+  { type: 'url', icon: IconGlobe, label: 'URL' },
+];
+
+export interface PropertyTypePopoverOptions {
+  onSelect: (type: PropertyType) => void;
+}
+
+export class DatabasePropertyTypePopover {
+  private readonly onSelect: (type: PropertyType) => void;
+  private popoverEl: HTMLElement | null = null;
+  private boundOutsideClick: ((e: MouseEvent) => void) | null = null;
+
+  constructor(options: PropertyTypePopoverOptions) {
+    this.onSelect = options.onSelect;
+  }
+
+  open(anchor: HTMLElement): void {
+    this.close();
+
+    const popover = document.createElement('div');
+    popover.setAttribute('data-blok-popover', '');
+    popover.setAttribute('data-blok-popover-opened', '');
+    popover.setAttribute('data-blok-database-property-type-popover', '');
+    popover.style.position = 'fixed';
+    popover.style.zIndex = '1000';
+
+    const rect = anchor.getBoundingClientRect();
+    popover.style.top = `${rect.bottom + 4}px`;
+    popover.style.left = `${rect.left}px`;
+
+    const heading = document.createElement('div');
+    heading.setAttribute('data-blok-database-property-type-heading', '');
+    heading.textContent = 'Property type';
+    popover.appendChild(heading);
+
+    for (const option of PROPERTY_TYPES) {
+      const item = document.createElement('div');
+      item.setAttribute('data-blok-database-property-type-option', option.type);
+
+      const iconEl = document.createElement('div');
+      iconEl.setAttribute('data-blok-database-property-type-option-icon', '');
+      iconEl.innerHTML = option.icon;
+      item.appendChild(iconEl);
+
+      const label = document.createElement('span');
+      label.textContent = option.label;
+      item.appendChild(label);
+
+      item.addEventListener('click', () => {
+        this.onSelect(option.type);
+        this.close();
+      });
+
+      popover.appendChild(item);
+    }
+
+    document.body.appendChild(popover);
+    this.popoverEl = popover;
+
+    this.boundOutsideClick = (e: MouseEvent): void => {
+      const target = e.target as HTMLElement;
+      if (!popover.contains(target) && !anchor.contains(target)) {
+        this.close();
+      }
+    };
+
+    document.addEventListener('mousedown', this.boundOutsideClick);
+  }
+
+  close(): void {
+    if (this.popoverEl !== null) {
+      this.popoverEl.remove();
+      this.popoverEl = null;
+    }
+    if (this.boundOutsideClick !== null) {
+      document.removeEventListener('mousedown', this.boundOutsideClick);
+      this.boundOutsideClick = null;
+    }
+  }
+
+  destroy(): void {
+    this.close();
+  }
+}