@gxp-dev/mod-ui 2.0.0

package/src/stores/gridBuilderStore.ts

@@ -0,0 +1,237 @@
+import { defineStore } from "pinia"
+import { computed, ref } from "vue"
+
+/**
+ * A single cell in the grid layout. The shape mirrors the
+ * `GridItem` used by `GridViewCard` but is flattened down to the
+ * minimum a designer cares about: a label, a column/row position,
+ * and a column/row span.
+ */
+export interface GridBuilderItem {
+  id: string
+  /** Display label shown in the canvas. */
+  label: string
+  /** 12-column grid x position (0-indexed). */
+  x: number
+  /** Row position (0-indexed). */
+  y: number
+  /** Width in column units (1-12). */
+  w: number
+  /** Height in row units. */
+  h: number
+}
+
+/** Full grid schema produced by the builder. */
+export interface GridBuilderSchema {
+  /** Number of columns in the grid. Default 12. */
+  cols: number
+  /** Pixel height of a single row. Default 60. */
+  rowHeight: number
+  /** Ordered list of grid items. */
+  items: GridBuilderItem[]
+}
+
+/** Identifies which grid item is currently selected. */
+export interface GridBuilderSelection {
+  id: string | null
+}
+
+let idCounter = 0
+function nextId(prefix: string): string {
+  idCounter += 1
+  return `${prefix}-${Date.now()}-${idCounter}`
+}
+
+/** Test helper to make ids deterministic. */
+export function __resetGridBuilderIdCounter(): void {
+  idCounter = 0
+}
+
+function emptySchema(): GridBuilderSchema {
+  return { cols: 12, rowHeight: 60, items: [] }
+}
+
+export const useGridBuilderStore = defineStore(
+  "gxp-adminkit/gridBuilder",
+  () => {
+    /**
+     * Per-builder state, keyed by `builderId`. Lets multiple builders
+     * coexist on the same page without colliding.
+     */
+    const builders = ref<Record<string, GridBuilderSchema>>({})
+    const selections = ref<Record<string, GridBuilderSelection>>({})
+
+    function ensureBuilder(builderId: string): GridBuilderSchema {
+      if (!builders.value[builderId]) {
+        builders.value[builderId] = emptySchema()
+        selections.value[builderId] = { id: null }
+      }
+      return builders.value[builderId]!
+    }
+
+    function loadSchema(builderId: string, schema: GridBuilderSchema): void {
+      builders.value[builderId] = {
+        cols: schema.cols,
+        rowHeight: schema.rowHeight,
+        items: schema.items.map((it) => ({ ...it })),
+      }
+      selections.value[builderId] = { id: null }
+    }
+
+    function resetBuilder(builderId: string): void {
+      delete builders.value[builderId]
+      delete selections.value[builderId]
+    }
+
+    /**
+     * Append a fresh grid item at the next available row, sized to
+     * `template`. Returns the new item's id.
+     */
+    function addItem(
+      builderId: string,
+      template?: Partial<Pick<GridBuilderItem, "w" | "h" | "label">>,
+    ): string {
+      const schema = ensureBuilder(builderId)
+      const w = clampColumns(template?.w ?? 1, schema.cols)
+      const h = Math.max(1, template?.h ?? 1)
+      const y = nextFreeRow(schema)
+      const id = nextId("gi")
+      const item: GridBuilderItem = {
+        id,
+        label: template?.label ?? `Cell ${schema.items.length + 1}`,
+        x: 0,
+        y,
+        w,
+        h,
+      }
+      schema.items = [...schema.items, item]
+      return id
+    }
+
+    /** Remove an item by id. */
+    function removeItem(builderId: string, itemId: string): void {
+      const schema = ensureBuilder(builderId)
+      schema.items = schema.items.filter((it) => it.id !== itemId)
+      const sel = selections.value[builderId]
+      if (sel?.id === itemId) {
+        selections.value[builderId] = { id: null }
+      }
+    }
+
+    /** Patch a grid item's properties. */
+    function updateItem(
+      builderId: string,
+      itemId: string,
+      patch: Partial<Omit<GridBuilderItem, "id">>,
+    ): void {
+      const schema = ensureBuilder(builderId)
+      const idx = schema.items.findIndex((it) => it.id === itemId)
+      if (idx < 0) {
+        return
+      }
+      const current = schema.items[idx]!
+      const merged: GridBuilderItem = {
+        ...current,
+        ...patch,
+      }
+      // Clamp coordinates to keep the item inside the grid.
+      merged.w = clampColumns(merged.w, schema.cols)
+      merged.h = Math.max(1, merged.h)
+      merged.x = Math.max(0, Math.min(merged.x, schema.cols - merged.w))
+      merged.y = Math.max(0, merged.y)
+      const next = [...schema.items]
+      next[idx] = merged
+      schema.items = next
+    }
+
+    /** Update the grid-level `cols` value. */
+    function setCols(builderId: string, cols: number): void {
+      const schema = ensureBuilder(builderId)
+      const safe = Math.max(1, Math.floor(cols))
+      schema.cols = safe
+      // Re-clamp every item so nothing overflows the new column count.
+      schema.items = schema.items.map((it) => {
+        const w = clampColumns(it.w, safe)
+        const x = Math.max(0, Math.min(it.x, safe - w))
+        return { ...it, w, x }
+      })
+    }
+
+    /** Update the grid-level `rowHeight` value. */
+    function setRowHeight(builderId: string, rowHeight: number): void {
+      const schema = ensureBuilder(builderId)
+      schema.rowHeight = Math.max(1, Math.floor(rowHeight))
+    }
+
+    function select(builderId: string, id: string | null): void {
+      selections.value[builderId] = { id }
+    }
+
+    function getSelection(builderId: string): GridBuilderSelection {
+      return selections.value[builderId] ?? { id: null }
+    }
+
+    function getSchema(builderId: string): GridBuilderSchema {
+      return ensureBuilder(builderId)
+    }
+
+    return {
+      builders,
+      selections,
+      ensureBuilder,
+      loadSchema,
+      resetBuilder,
+      addItem,
+      removeItem,
+      updateItem,
+      setCols,
+      setRowHeight,
+      select,
+      getSelection,
+      getSchema,
+    }
+  },
+)
+
+function clampColumns(w: number, cols: number): number {
+  if (!Number.isFinite(w)) {
+    return 1
+  }
+  return Math.max(1, Math.min(Math.floor(w), cols))
+}
+
+/**
+ * Returns the first row index where a new full-width item could be
+ * placed without overlapping. The MVP only cares about appending —
+ * we use the max occupied row + height.
+ */
+function nextFreeRow(schema: GridBuilderSchema): number {
+  if (schema.items.length === 0) {
+    return 0
+  }
+  return schema.items.reduce((max, it) => Math.max(max, it.y + it.h), 0)
+}
+
+/** Composable wrapping store access for a single builder instance. */
+export function useGridBuilder(builderId: string) {
+  const store = useGridBuilderStore()
+  store.ensureBuilder(builderId)
+  return {
+    schema: computed<GridBuilderSchema>(() => store.getSchema(builderId)),
+    selection: computed<GridBuilderSelection>(() =>
+      store.getSelection(builderId),
+    ),
+    addItem: (template?: Partial<Pick<GridBuilderItem, "w" | "h" | "label">>) =>
+      store.addItem(builderId, template),
+    removeItem: (id: string) => store.removeItem(builderId, id),
+    updateItem: (id: string, patch: Partial<Omit<GridBuilderItem, "id">>) =>
+      store.updateItem(builderId, id, patch),
+    setCols: (cols: number) => store.setCols(builderId, cols),
+    setRowHeight: (rowHeight: number) =>
+      store.setRowHeight(builderId, rowHeight),
+    select: (id: string | null) => store.select(builderId, id),
+    loadSchema: (schema: GridBuilderSchema) =>
+      store.loadSchema(builderId, schema),
+    reset: () => store.resetBuilder(builderId),
+  }
+}

package/src/stores/objectBuilderStore.ts

@@ -0,0 +1,285 @@
+import { defineStore } from "pinia"
+import { computed, ref } from "vue"
+
+/**
+ * State for a single ObjectBuilder instance. Multiple ObjectBuilders
+ * can coexist on a page; each is keyed by `builderId`.
+ *
+ * The schema is a flat ordered list of typed key/value entries. The
+ * helper `toRecord()` flattens entries into a plain JS object.
+ */
+export type ObjectBuilderEntryType =
+  | "string"
+  | "number"
+  | "boolean"
+  | "array"
+  | "object"
+  | "null"
+
+export interface ObjectBuilderEntry {
+  id: string
+  key: string
+  type: ObjectBuilderEntryType
+  value: unknown
+}
+
+export interface ObjectBuilderSchema {
+  entries: ObjectBuilderEntry[]
+}
+
+/** Identifies which entry is currently selected for editing. */
+export interface ObjectBuilderSelection {
+  id: string | null
+}
+
+let idCounter = 0
+function nextId(prefix: string): string {
+  idCounter += 1
+  return `${prefix}-${Date.now()}-${idCounter}`
+}
+
+/** Test helper to make ids deterministic. */
+export function __resetObjectBuilderIdCounter(): void {
+  idCounter = 0
+}
+
+/** Sensible default values for each entry type. */
+export function defaultValueForType(type: ObjectBuilderEntryType): unknown {
+  switch (type) {
+    case "string":
+      return ""
+    case "number":
+      return 0
+    case "boolean":
+      return false
+    case "array":
+      return []
+    case "object":
+      return {}
+    case "null":
+      return null
+  }
+}
+
+function emptySchema(): ObjectBuilderSchema {
+  return { entries: [] }
+}
+
+/**
+ * Normalise a plain `Record<string, unknown>` into an
+ * `ObjectBuilderSchema`. Used when consumers pass a raw object via
+ * `modelValue`.
+ */
+export function recordToSchema(
+  record: Record<string, unknown>,
+): ObjectBuilderSchema {
+  const entries: ObjectBuilderEntry[] = []
+  for (const [key, value] of Object.entries(record)) {
+    entries.push({
+      id: nextId("obj-entry"),
+      key,
+      type: detectType(value),
+      value,
+    })
+  }
+  return { entries }
+}
+
+/** Flatten an `ObjectBuilderSchema` into a plain JS object. */
+export function toRecord(schema: ObjectBuilderSchema): Record<string, unknown> {
+  const out: Record<string, unknown> = {}
+  for (const entry of schema.entries) {
+    if (!entry.key) {
+      continue
+    }
+    out[entry.key] = entry.value
+  }
+  return out
+}
+
+function detectType(value: unknown): ObjectBuilderEntryType {
+  if (value === null) {
+    return "null"
+  }
+  if (Array.isArray(value)) {
+    return "array"
+  }
+  const t = typeof value
+  if (t === "string") {
+    return "string"
+  }
+  if (t === "number") {
+    return "number"
+  }
+  if (t === "boolean") {
+    return "boolean"
+  }
+  return "object"
+}
+
+export const useObjectBuilderStore = defineStore(
+  "gxp-adminkit/objectBuilder",
+  () => {
+    const builders = ref<Record<string, ObjectBuilderSchema>>({})
+    const selections = ref<Record<string, ObjectBuilderSelection>>({})
+
+    function ensureBuilder(builderId: string): ObjectBuilderSchema {
+      if (!builders.value[builderId]) {
+        builders.value[builderId] = emptySchema()
+        selections.value[builderId] = { id: null }
+      }
+      return builders.value[builderId]!
+    }
+
+    function loadSchema(
+      builderId: string,
+      schema: ObjectBuilderSchema,
+    ): void {
+      builders.value[builderId] = {
+        entries: schema.entries.map((entry) => ({ ...entry })),
+      }
+      selections.value[builderId] = { id: null }
+    }
+
+    function loadRecord(
+      builderId: string,
+      record: Record<string, unknown>,
+    ): void {
+      loadSchema(builderId, recordToSchema(record))
+    }
+
+    function resetBuilder(builderId: string): void {
+      delete builders.value[builderId]
+      delete selections.value[builderId]
+    }
+
+    /** Append a new entry of `type` and return its id. */
+    function addEntry(
+      builderId: string,
+      type: ObjectBuilderEntryType,
+    ): string {
+      const schema = ensureBuilder(builderId)
+      const id = nextId("obj-entry")
+      schema.entries = [
+        ...schema.entries,
+        {
+          id,
+          key: "",
+          type,
+          value: defaultValueForType(type),
+        },
+      ]
+      return id
+    }
+
+    /** Remove an entry by id. */
+    function removeEntry(builderId: string, entryId: string): void {
+      const schema = ensureBuilder(builderId)
+      schema.entries = schema.entries.filter((e) => e.id !== entryId)
+      const sel = selections.value[builderId]
+      if (sel?.id === entryId) {
+        selections.value[builderId] = { id: null }
+      }
+    }
+
+    /** Move an entry from `fromIndex` to `toIndex`. */
+    function reorderEntry(
+      builderId: string,
+      fromIndex: number,
+      toIndex: number,
+    ): void {
+      const schema = ensureBuilder(builderId)
+      const list = schema.entries
+      if (
+        fromIndex < 0 ||
+        fromIndex >= list.length ||
+        toIndex < 0 ||
+        toIndex >= list.length ||
+        fromIndex === toIndex
+      ) {
+        return
+      }
+      const next = [...list]
+      const [moved] = next.splice(fromIndex, 1)
+      if (moved !== undefined) {
+        next.splice(toIndex, 0, moved)
+        schema.entries = next
+      }
+    }
+
+    /** Patch an entry's fields. When `type` changes, the value resets. */
+    function updateEntry(
+      builderId: string,
+      entryId: string,
+      patch: Partial<Omit<ObjectBuilderEntry, "id">>,
+    ): void {
+      const schema = ensureBuilder(builderId)
+      const idx = schema.entries.findIndex((e) => e.id === entryId)
+      if (idx < 0) {
+        return
+      }
+      const current = schema.entries[idx]!
+      const next: ObjectBuilderEntry = { ...current, ...patch }
+      if (patch.type && patch.type !== current.type && patch.value === undefined) {
+        next.value = defaultValueForType(patch.type)
+      }
+      const list = [...schema.entries]
+      list[idx] = next
+      schema.entries = list
+    }
+
+    function select(builderId: string, id: string | null): void {
+      selections.value[builderId] = { id }
+    }
+
+    function getSelection(builderId: string): ObjectBuilderSelection {
+      return selections.value[builderId] ?? { id: null }
+    }
+
+    function getSchema(builderId: string): ObjectBuilderSchema {
+      return ensureBuilder(builderId)
+    }
+
+    return {
+      builders,
+      selections,
+      ensureBuilder,
+      loadSchema,
+      loadRecord,
+      resetBuilder,
+      addEntry,
+      removeEntry,
+      reorderEntry,
+      updateEntry,
+      select,
+      getSelection,
+      getSchema,
+    }
+  },
+)
+
+/** Composable wrapper around `useObjectBuilderStore` for one builder. */
+export function useObjectBuilder(builderId: string) {
+  const store = useObjectBuilderStore()
+  store.ensureBuilder(builderId)
+  return {
+    schema: computed<ObjectBuilderSchema>(() => store.getSchema(builderId)),
+    selection: computed<ObjectBuilderSelection>(() =>
+      store.getSelection(builderId),
+    ),
+    addEntry: (type: ObjectBuilderEntryType) => store.addEntry(builderId, type),
+    removeEntry: (id: string) => store.removeEntry(builderId, id),
+    reorderEntry: (from: number, to: number) =>
+      store.reorderEntry(builderId, from, to),
+    updateEntry: (
+      id: string,
+      patch: Partial<Omit<ObjectBuilderEntry, "id">>,
+    ) => store.updateEntry(builderId, id, patch),
+    select: (id: string | null) => store.select(builderId, id),
+    loadSchema: (schema: ObjectBuilderSchema) =>
+      store.loadSchema(builderId, schema),
+    loadRecord: (record: Record<string, unknown>) =>
+      store.loadRecord(builderId, record),
+    reset: () => store.resetBuilder(builderId),
+  }
+}

package/src/stores/presetBuilderStore.ts

@@ -0,0 +1,124 @@
+import { defineStore } from "pinia"
+import { computed, ref } from "vue"
+import type { BuilderSchema } from "./formBuilderStore"
+
+/**
+ * State for a single PresetBuilder instance. Multiple PresetBuilders
+ * can coexist on a page; each is keyed by `builderId`.
+ *
+ * A preset bundles a name + optional description with an inner
+ * FormBuilder-style `BuilderSchema`. The inner schema is owned by
+ * `formBuilderStore`; this store only tracks the metadata + a reference
+ * to the inner builder id, so the inspector / canvas can read & write
+ * the preset name / description without round-tripping through the
+ * inner FormBuilder.
+ */
+export interface PresetBuilderSchema {
+  presetName: string
+  presetDescription?: string
+  schema: BuilderSchema
+}
+
+export interface PresetBuilderState {
+  presetName: string
+  presetDescription: string
+  /** Id of the inner FormBuilder schema stored in `formBuilderStore`. */
+  innerBuilderId: string
+}
+
+let idCounter = 0
+function nextId(prefix: string): string {
+  idCounter += 1
+  return `${prefix}-${Date.now()}-${idCounter}`
+}
+
+/** Test helper to make ids deterministic. */
+export function __resetPresetBuilderIdCounter(): void {
+  idCounter = 0
+}
+
+function emptyState(builderId: string): PresetBuilderState {
+  return {
+    presetName: "",
+    presetDescription: "",
+    innerBuilderId: `${builderId}::inner`,
+  }
+}
+
+export const usePresetBuilderStore = defineStore(
+  "gxp-adminkit/presetBuilder",
+  () => {
+    const builders = ref<Record<string, PresetBuilderState>>({})
+
+    function ensureBuilder(builderId: string): PresetBuilderState {
+      if (!builders.value[builderId]) {
+        builders.value[builderId] = emptyState(builderId)
+      }
+      return builders.value[builderId]!
+    }
+
+    function getState(builderId: string): PresetBuilderState {
+      return ensureBuilder(builderId)
+    }
+
+    function setName(builderId: string, name: string): void {
+      const state = ensureBuilder(builderId)
+      state.presetName = name
+    }
+
+    function setDescription(builderId: string, description: string): void {
+      const state = ensureBuilder(builderId)
+      state.presetDescription = description
+    }
+
+    function resetBuilder(builderId: string): void {
+      delete builders.value[builderId]
+    }
+
+    /**
+     * Used internally by the composable to seed name + description from
+     * a `PresetBuilderSchema`. Inner schema seeding is handled by the
+     * composition directly because the inner FormBuilder store has its
+     * own `loadSchema` entrypoint.
+     */
+    function loadMeta(
+      builderId: string,
+      meta: Pick<PresetBuilderSchema, "presetName" | "presetDescription">,
+    ): void {
+      const state = ensureBuilder(builderId)
+      state.presetName = meta.presetName ?? ""
+      state.presetDescription = meta.presetDescription ?? ""
+    }
+
+    return {
+      builders,
+      ensureBuilder,
+      getState,
+      setName,
+      setDescription,
+      resetBuilder,
+      loadMeta,
+    }
+  },
+)
+
+/** Composable wrapper around `usePresetBuilderStore` for one builder. */
+export function usePresetBuilder(builderId: string) {
+  const store = usePresetBuilderStore()
+  store.ensureBuilder(builderId)
+  // Touch the id counter so test helpers can produce deterministic ids
+  // when the composable is invoked outside of `ensureBuilder`.
+  if (!builderId) {
+    nextId("preset")
+  }
+  return {
+    state: computed<PresetBuilderState>(() => store.getState(builderId)),
+    setName: (name: string) => store.setName(builderId, name),
+    setDescription: (description: string) =>
+      store.setDescription(builderId, description),
+    loadMeta: (
+      meta: Pick<PresetBuilderSchema, "presetName" | "presetDescription">,
+    ) => store.loadMeta(builderId, meta),
+    reset: () => store.resetBuilder(builderId),
+  }
+}