@jackuait/blok 0.10.0-beta.5 → 0.10.0-beta.7

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

@@ -1,333 +0,0 @@
-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

@@ -1,246 +0,0 @@
-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: Record<string, DatabaseRow>;
-  private views: DatabaseViewConfig[];
-
-  constructor(data?: Partial<DatabaseData>) {
-    if (data?.schema !== undefined && data.schema.length > 0) {
-      this.schema = data.schema.map((p) => ({ ...p }));
-    } else {
-      this.schema = DatabaseModel.createDefaultSchema();
-    }
-
-    this.rows = {};
-    if (data?.rows !== undefined) {
-      for (const [id, row] of Object.entries(data.rows)) {
-        this.rows[id] = { ...row, properties: { ...row.properties } };
-      }
-    }
-
-    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)];
-    }
-  }
-
-  // ─── 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);
-    for (const row of Object.values(this.rows)) {
-      const { [propertyId]: _, ...rest } = row.properties;
-      row.properties = rest;
-    }
-  }
-
-  // ─── Rows ───
-
-  getOrderedRows(): DatabaseRow[] {
-    return Object.values(this.rows).sort((a, b) => (a.position < b.position ? -1 : 1));
-  }
-
-  getRow(rowId: string): DatabaseRow | undefined {
-    return this.rows[rowId];
-  }
-
-  addRow(properties: Record<string, PropertyValue> = {}): DatabaseRow {
-    const orderedRows = this.getOrderedRows();
-    const lastPosition = orderedRows.length > 0 ? orderedRows[orderedRows.length - 1].position : null;
-    const row: DatabaseRow = {
-      id: nanoid(),
-      position: generateKeyBetween(lastPosition, null),
-      properties: { ...properties },
-    };
-    this.rows[row.id] = row;
-    return row;
-  }
-
-  updateRow(rowId: string, properties: Record<string, PropertyValue>): void {
-    const row = this.rows[rowId];
-    if (row === undefined) return;
-    Object.assign(row.properties, properties);
-  }
-
-  moveRow(rowId: string, position: string): void {
-    const row = this.rows[rowId];
-    if (row === undefined) return;
-    row.position = position;
-  }
-
-  deleteRow(rowId: string): void {
-    const { [rowId]: _, ...rest } = this.rows;
-    this.rows = rest;
-  }
-
-  // ─── 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: { schema: PropertyDefinition[]; rows: Record<string, DatabaseRow>; views: DatabaseViewConfig[] }): void {
-    this.schema = data.schema.map((p) => ({ ...p }));
-    this.rows = {};
-    for (const [id, row] of Object.entries(data.rows)) {
-      this.rows[id] = { ...row, properties: { ...row.properties } };
-    }
-    this.views = data.views.map((v) => ({ ...v, sorts: [...v.sorts], filters: [...v.filters], visibleProperties: [...v.visibleProperties] }));
-  }
-
-  // ─── Snapshot ───
-
-  snapshot(): DatabaseData {
-    const rowsCopy: Record<string, DatabaseRow> = {};
-    for (const [id, row] of Object.entries(this.rows)) {
-      rowsCopy[id] = {
-        id: row.id,
-        position: row.position,
-        properties: JSON.parse(JSON.stringify(row.properties)) as Record<string, PropertyValue>,
-      };
-    }
-    return {
-      schema: JSON.parse(JSON.stringify(this.schema)) as PropertyDefinition[],
-      rows: rowsCopy,
-      views: JSON.parse(JSON.stringify(this.views)) as DatabaseViewConfig[],
-      activeViewId: this.views.length > 0 ? this.views[0].id : '',
-    };
-  }
-
-  // ─── 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

@@ -1,108 +0,0 @@
-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();
-  }
-}