@gxp-dev/mod-ui 2.0.0 → 2.0.1

package/src/components/compositions/elements/code/GitCodeEditor.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import GitCodeEditor from "./GitCodeEditor.vue"
 import type { GitCodeEditorLoadedFile } from "./GitCodeEditor.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const BRANCHES = ["main", "develop", "feat/new-card", "hotfix/login"]
 
@@ -41,7 +42,7 @@ function mockSaveFile(
 }
 
 const meta = {
-  title: "Compositions/Elements/Code/GitCodeEditor",
+  title: "Elements/Code/GitCodeEditor",
   component: GitCodeEditor,
   tags: ["autodocs"],
   args: {
@@ -52,6 +53,7 @@ const meta = {
     onLoadBranches: mockLoadBranches(),
     onLoadFile: mockLoadFile(),
   },
+  parameters: componentDoc("GitCodeEditor", { barrel: "code" }),
   decorators: [
     () => ({
       template: '<div class="w-[640px] p-4"><story /></div>',

package/src/components/compositions/elements/code/PullRequestsList.stories.ts

@@ -4,6 +4,7 @@ import type {
   PullRequest,
   PullRequestsListFilter,
 } from "./PullRequestsList.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const SAMPLE: PullRequest[] = [
   {
@@ -70,13 +71,14 @@ function mockLoad(
 }
 
 const meta = {
-  title: "Compositions/Elements/Code/PullRequestsList",
+  title: "Elements/Code/PullRequestsList",
   component: PullRequestsList,
   tags: ["autodocs"],
   args: {
     label: "Pull Requests",
     onLoadPullRequests: mockLoad(),
   },
+  parameters: componentDoc("PullRequestsList", { barrel: "code" }),
   decorators: [
     () => ({
       template: '<div class="w-[640px] p-4"><story /></div>',

package/src/components/compositions/elements/configuration-block/DialogBlock.stories.ts

@@ -13,7 +13,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Renderer for `configuration-block/dialog`. Wraps nested children in a modal dialog.",
+          "```ts\nimport { DialogBlock } from \"@gxp-dev/mod-ui/configuration-block\"\n```\n\nRenderer for `configuration-block/dialog`. Wraps nested children in a modal dialog.",
       },
     },
   },

package/src/components/compositions/elements/configuration-block/ElementsBlock.stories.ts

@@ -13,7 +13,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Renderer for `configuration-block/elements-block`. Renders nested children via the engine.",
+          "```ts\nimport { ElementsBlock } from \"@gxp-dev/mod-ui/configuration-block\"\n```\n\nRenderer for `configuration-block/elements-block`. Renders nested children via the engine.",
       },
     },
   },

package/src/components/compositions/elements/configuration-block/ModalBlock.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import type { CardElement } from "@/definitions/elements"
 import ModalBlock from "./ModalBlock.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "Elements/ConfigurationBlock/ModalBlock",
   component: ModalBlock,
   tags: ["autodocs"],
+  parameters: componentDoc("ModalBlock", { barrel: "configuration-block" }),
   args: {
     label: "Modal",
   },

package/src/components/compositions/elements/configuration-block/RepeatableBlock.stories.ts

@@ -13,7 +13,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Renderer for `configuration-block/repeatable`. Local add/remove shell — full persistence lands in task #7.",
+          "```ts\nimport { RepeatableBlock } from \"@gxp-dev/mod-ui/configuration-block\"\n```\n\nRenderer for `configuration-block/repeatable`. Each row gets its own isolated formDataStore slot via `provideFormId`. Rows are collapsible; `optionLabelFields` controls the row header label.",
       },
     },
   },
@@ -29,6 +29,27 @@ const tierTemplate: CardElement[] = [
     name: "tier_name",
     label: "Tier name",
   } as CardElement,
+  {
+    id: "tier-limit",
+    type: "input.number",
+    name: "tier_limit",
+    label: "Limit",
+  } as CardElement,
+]
+
+const speakerTemplate: CardElement[] = [
+  {
+    id: "spk-first",
+    type: "input.text",
+    name: "first_name",
+    label: "First name",
+  } as CardElement,
+  {
+    id: "spk-last",
+    type: "input.text",
+    name: "last_name",
+    label: "Last name",
+  } as CardElement,
 ]
 
 export const Default: Story = {
@@ -46,7 +67,29 @@ export const WithSeededRows: Story = {
   args: {
     label: "Sponsor tiers",
     addButtonLabel: "Add tier",
+    modelValue: [{ tier_name: "Gold", tier_limit: 5 }, { tier_name: "Silver", tier_limit: 10 }],
+    nestedElements: tierTemplate as unknown as Array<Record<string, unknown>>,
+    optionLabelFields: ["tier_name"],
+  },
+}
+
+export const CollapsedByDefault: Story = {
+  args: {
+    label: "Speaker",
+    addButtonLabel: "Add speaker",
+    collapsedByDefault: true,
     modelValue: [{}, {}],
-    itemTemplate: tierTemplate,
+    nestedElements: speakerTemplate as unknown as Array<Record<string, unknown>>,
+    optionLabelFields: ["first_name", "last_name"],
+  },
+}
+
+export const WithLabelFields: Story = {
+  args: {
+    label: "Speaker",
+    addButtonLabel: "Add speaker",
+    modelValue: [{ first_name: "Jane", last_name: "Doe" }],
+    nestedElements: speakerTemplate as unknown as Array<Record<string, unknown>>,
+    optionLabelFields: ["first_name", "last_name"],
   },
 }

package/src/components/compositions/elements/configuration-block/RepeatableBlock.test.ts

@@ -10,24 +10,21 @@ describe("RepeatableBlock", () => {
     __clearElementCache()
   })
 
-  it("renders the placeholder card", () => {
+  it("renders with no rows by default", () => {
     const wrapper = mount(RepeatableBlock)
-    expect(wrapper.text()).toContain(
-      "Repeatable block — FormBuilder integration coming in task #7.",
-    )
-    expect(wrapper.attributes("data-stub")).toBe(
-      "configuration-block/repeatable",
-    )
+    expect(wrapper.findAll("[data-testid='repeatable-row']").length).toBe(0)
   })
 
-  it("renders the default label", () => {
+  it("renders the default add button label", () => {
     const wrapper = mount(RepeatableBlock)
-    expect(wrapper.text()).toContain("Repeatable")
+    expect(wrapper.find("[data-testid='repeatable-add']").text()).toContain("Add row")
   })
 
-  it("renders the label prop when provided", () => {
-    const wrapper = mount(RepeatableBlock, { props: { label: "Speakers" } })
-    expect(wrapper.text()).toContain("Speakers")
+  it("renders a custom add button label", () => {
+    const wrapper = mount(RepeatableBlock, {
+      props: { addButtonLabel: "Add speaker" },
+    })
+    expect(wrapper.find("[data-testid='repeatable-add']").text()).toContain("Add speaker")
   })
 
   it("seeds rows from the modelValue array length", () => {
@@ -38,9 +35,7 @@ describe("RepeatableBlock", () => {
   })
 
   it("adds a row when the add button is clicked", async () => {
-    const wrapper = mount(RepeatableBlock, {
-      props: { addButtonLabel: "Add speaker" },
-    })
+    const wrapper = mount(RepeatableBlock)
     expect(wrapper.findAll("[data-testid='repeatable-row']").length).toBe(0)
     await wrapper.find("[data-testid='repeatable-add']").trigger("click")
     expect(wrapper.findAll("[data-testid='repeatable-row']").length).toBe(1)
@@ -49,7 +44,7 @@ describe("RepeatableBlock", () => {
 
   it("emits update:modelValue when a row is removed", async () => {
     const wrapper = mount(RepeatableBlock, {
-      props: { modelValue: [{ a: 1 }, { a: 2 }] },
+      props: { modelValue: [{}, {}] },
     })
     expect(wrapper.findAll("[data-testid='repeatable-row']").length).toBe(2)
     await wrapper.find("button[aria-label='Remove row']").trigger("click")
@@ -58,4 +53,40 @@ describe("RepeatableBlock", () => {
     expect(emitted).toBeTruthy()
     expect((emitted![0] as unknown[])[0]).toHaveLength(1)
   })
+
+  it("collapses a row when the header is clicked", async () => {
+    const wrapper = mount(RepeatableBlock, {
+      props: { modelValue: [{}], nestedElements: [] },
+    })
+    const header = wrapper.find("[data-testid='repeatable-row'] div.cursor-pointer")
+    await header.trigger("click")
+    // After collapse, ChevronRight should be present (collapsed state)
+    expect(wrapper.html()).toContain("chevron-right")
+  })
+
+  it("starts rows collapsed when collapsedByDefault is true", () => {
+    const wrapper = mount(RepeatableBlock, {
+      props: { modelValue: [{}], collapsedByDefault: true },
+    })
+    // ChevronRight indicates collapsed state
+    expect(wrapper.html()).toContain("chevron-right")
+  })
+
+  it("uses optionLabelFields for row header labels", () => {
+    const wrapper = mount(RepeatableBlock, {
+      props: {
+        label: "Tier",
+        modelValue: [{ tier_name: "Gold" }],
+        optionLabelFields: ["tier_name"],
+      },
+    })
+    expect(wrapper.text()).toContain("Gold")
+  })
+
+  it("falls back to label + index when optionLabelFields is empty", () => {
+    const wrapper = mount(RepeatableBlock, {
+      props: { label: "Speaker", modelValue: [{}] },
+    })
+    expect(wrapper.text()).toContain("Speaker 1")
+  })
 })

package/src/components/compositions/elements/configuration-block/RepeatableBlock.vue

@@ -1,27 +1,24 @@
 <script setup lang="ts">
-/**
- * Props-driven renderer for `configuration-block/repeatable`.
- *
- * Renders an Add/Remove UI shell for repeatable rows. Each row mirrors
- * `itemTemplate`. The current row count is reflected via `modelValue`
- * (defaulting to an empty array). Full FormBuilder integration arrives
- * in task #7.
- */
-import { computed, ref, watch } from "vue"
-import { Construction, Plus, X } from "lucide-vue-next"
+import { computed, inject, nextTick, ref, watch } from "vue"
+import { ChevronDown, ChevronRight, Plus, Trash2 } from "lucide-vue-next"
 import type { CardElement } from "@/definitions/elements"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import ElementRenderer from "@/engine/ElementRenderer.vue"
+import { useFormDataStore } from "@/stores/formDataStore"
+import { FORM_ID_KEY } from "@/engine/useFormData"
 import { cn } from "@/lib/utils"
+import RepeatableRow from "./RepeatableRow.vue"
 
 export interface RepeatableBlockProps {
   label?: string
   name?: string | null
   modelValue?: unknown[]
-  itemTemplate?: CardElement[]
+  /** Child element schema for each row. Engine remaps selectOptions → nestedElements. */
+  nestedElements?: Array<Record<string, unknown>>
   addButtonLabel?: string
+  /** Field names whose values in a row are joined to form the row's header label. */
+  optionLabelFields?: ReadonlyArray<string>
+  /** Collapse all rows on initial render. */
+  collapsedByDefault?: boolean
   item?: Record<string, unknown>
   classList?: string[] | string
 }
@@ -30,7 +27,9 @@ const props = withDefaults(defineProps<RepeatableBlockProps>(), {
   label: "Repeatable",
   addButtonLabel: "Add row",
   modelValue: () => [],
-  itemTemplate: () => [],
+  nestedElements: () => [],
+  optionLabelFields: () => [],
+  collapsedByDefault: false,
   item: () => ({}),
 })
 
@@ -38,117 +37,187 @@ const emit = defineEmits<{
   (e: "update:modelValue", value: unknown[]): void
 }>()
 
-const styleKey = "repeatable"
+const parentFormId = inject(FORM_ID_KEY, "default")
+const store = useFormDataStore()
 
 const rowSchema = computed<CardElement[]>(() =>
-  (props.itemTemplate ?? []).filter(
-    (entry): entry is CardElement =>
+  (props.nestedElements ?? []).filter(
+    (entry): boolean =>
       typeof entry === "object" &&
       entry !== null &&
       typeof (entry as { type?: unknown }).type === "string",
-  ),
+  ) as unknown as CardElement[],
 )
 
-const initialRowCount = Array.isArray(props.modelValue)
-  ? props.modelValue.length
-  : 0
+interface RowEntry {
+  id: number
+  formId: string
+  collapsed: boolean
+}
+
+let nextRowId = 0
+
+function makeRowFormId(rowId: number): string {
+  return `${parentFormId}__${props.name ?? "repeatable"}__${rowId}`
+}
+
+function makeRow(initialData?: Record<string, unknown>): RowEntry {
+  const id = nextRowId++
+  const formId = makeRowFormId(id)
+  store.ensureForm(formId)
+  if (initialData && Object.keys(initialData).length > 0) {
+    store.setInitialValues(formId, initialData)
+  }
+  return { id, formId, collapsed: props.collapsedByDefault }
+}
+
+function buildRows(data: unknown[]): RowEntry[] {
+  return data.map((d) => makeRow(typeof d === "object" && d !== null ? (d as Record<string, unknown>) : {}))
+}
 
-const rows = ref<number[]>(
-  Array.from({ length: initialRowCount }, (_unused, index) => index),
+const rows = ref<RowEntry[]>(
+  Array.isArray(props.modelValue) && props.modelValue.length > 0
+    ? buildRows(props.modelValue)
+    : [],
 )
 
-let nextRowId = initialRowCount
+function collectRowData(): unknown[] {
+  return rows.value.map((row) => ({ ...(store.forms[row.formId]?.values ?? {}) }))
+}
+
+function rowLabel(row: RowEntry, index: number): string {
+  const labelFields = props.optionLabelFields ?? []
+  if (labelFields.length > 0) {
+    const values = store.forms[row.formId]?.values ?? {}
+    const parts = labelFields
+      .map((f) => values[f])
+      .filter((v) => typeof v === "string" && v.trim() !== "")
+      .join(" ")
+    if (parts) {
+      return parts
+    }
+  }
+  return `${props.label} ${index + 1}`
+}
+
+let suppressSync = false
+
+watch(
+  () => rows.value.map((r) => ({ ...store.forms[r.formId]?.values })),
+  () => {
+    if (suppressSync) {
+      return
+    }
+    suppressSync = true
+    emit("update:modelValue", collectRowData())
+    void nextTick(() => {
+      suppressSync = false
+    })
+  },
+  { deep: true },
+)
 
 watch(
   () => props.modelValue,
   (next) => {
-    if (!Array.isArray(next)) {
+    if (suppressSync || !Array.isArray(next)) {
       return
     }
-    if (next.length !== rows.value.length) {
-      rows.value = Array.from({ length: next.length }, (_u, i) => i)
-      nextRowId = next.length
+    if (next.length === rows.value.length) {
+      return
+    }
+    suppressSync = true
+    if (next.length > rows.value.length) {
+      while (rows.value.length < next.length) {
+        const d = next[rows.value.length]
+        rows.value.push(makeRow(typeof d === "object" && d !== null ? (d as Record<string, unknown>) : {}))
+      }
+    } else {
+      const removed = rows.value.splice(next.length)
+      removed.forEach((r) => store.resetForm(r.formId))
     }
+    void nextTick(() => {
+      suppressSync = false
+    })
   },
 )
 
 function addRow(): void {
-  rows.value.push(nextRowId++)
-  emit("update:modelValue", [...(props.modelValue ?? []), {}])
+  rows.value.push(makeRow())
 }
 
 function removeRow(rowId: number): void {
-  const idx = rows.value.indexOf(rowId)
-  rows.value = rows.value.filter((id) => id !== rowId)
-  if (idx >= 0) {
-    const next = [...(props.modelValue ?? [])]
-    next.splice(idx, 1)
-    emit("update:modelValue", next)
+  const idx = rows.value.findIndex((r) => r.id === rowId)
+  if (idx < 0) {
+    return
+  }
+  const [removed] = rows.value.splice(idx, 1)
+  store.resetForm(removed.formId)
+}
+
+function toggleRow(rowId: number): void {
+  const row = rows.value.find((r) => r.id === rowId)
+  if (row) {
+    row.collapsed = !row.collapsed
   }
 }
 </script>
 
 <template>
-  <Card
-    :class="cn('border-dashed', props.classList)"
+  <div
+    :class="cn('flex flex-col gap-1', props.classList)"
     :data-element-name="props.name ?? undefined"
-    :data-stub="`configuration-block/${styleKey}`"
   >
-    <CardHeader>
-      <div class="flex items-center justify-between gap-2">
-        <CardTitle class="flex items-center gap-2 text-base">
-          <Construction class="size-5 text-muted-foreground" />
-          <span>{{ props.label }}</span>
-        </CardTitle>
-        <Badge variant="outline" size="sm">{{ styleKey }}</Badge>
-      </div>
-    </CardHeader>
-    <CardContent>
-      <p class="mb-3 text-sm text-muted-foreground">
-        Repeatable block — FormBuilder integration coming in task #7. Rows:
-        {{ rows.length }}
-      </p>
-      <div v-if="rows.length" class="mb-3 flex flex-col gap-3">
+    <div v-if="rows.length" class="flex flex-col gap-2">
+      <div
+        v-for="(row, index) in rows"
+        :key="row.id"
+        class="rounded-md border bg-card"
+        data-testid="repeatable-row"
+      >
+        <!-- Row header -->
         <div
-          v-for="rowId in rows"
-          :key="rowId"
-          class="rounded-md border border-dashed p-3"
-          data-testid="repeatable-row"
+          class="flex cursor-pointer items-center justify-between gap-2 px-3 py-2"
+          @click="toggleRow(row.id)"
         >
-          <div class="mb-2 flex items-center justify-between">
-            <span class="text-xs font-medium text-muted-foreground">
-              Row {{ rowId + 1 }}
-            </span>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              type="button"
-              aria-label="Remove row"
-              @click="removeRow(rowId)"
-            >
-              <X />
-            </Button>
-          </div>
-          <div v-if="rowSchema.length" class="flex flex-col gap-2">
-            <ElementRenderer
-              v-for="child in rowSchema"
-              :key="`${rowId}-${child.id}`"
-              :element="child"
-              :item="props.item"
-            />
+          <div class="flex items-center gap-1.5 text-sm font-medium">
+            <ChevronDown v-if="!row.collapsed" class="size-3.5 shrink-0 text-muted-foreground" />
+            <ChevronRight v-else class="size-3.5 shrink-0 text-muted-foreground" />
+            <span>{{ rowLabel(row, index) }}</span>
           </div>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            type="button"
+            aria-label="Remove row"
+            class="shrink-0 text-muted-foreground hover:text-destructive"
+            @click.stop="removeRow(row.id)"
+          >
+            <Trash2 class="size-3.5" />
+          </Button>
+        </div>
+
+        <!-- Row content -->
+        <div v-if="!row.collapsed && rowSchema.length" class="border-t px-3 py-3">
+          <RepeatableRow
+            :form-id="row.formId"
+            :schema="rowSchema"
+            :item="props.item"
+          />
         </div>
       </div>
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        data-testid="repeatable-add"
-        @click="addRow"
-      >
-        <Plus />
-        {{ props.addButtonLabel }}
-      </Button>
-    </CardContent>
-  </Card>
+    </div>
+
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      class="self-start"
+      data-testid="repeatable-add"
+      @click="addRow"
+    >
+      <Plus class="size-3.5" />
+      {{ props.addButtonLabel }}
+    </Button>
+  </div>
 </template>

package/src/components/compositions/elements/configuration-block/RepeatableRow.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * Single row inside a RepeatableBlock.
+ *
+ * Provides its own isolated formId via Vue's inject/provide so every
+ * child ElementRenderer binds to that row's slot in the formDataStore
+ * rather than the parent form's slot.
+ */
+import type { CardElement } from "@/definitions/elements"
+import ElementRenderer from "@/engine/ElementRenderer.vue"
+import { provideFormId } from "@/engine/useFormData"
+
+const props = defineProps<{
+  /** Unique key for this row's isolated formDataStore entry. */
+  formId: string
+  /** CardElement schema for each field in the row. */
+  schema: CardElement[]
+  /** Read-only context item forwarded from the parent. */
+  item: Record<string, unknown>
+}>()
+
+// Must be synchronous — provide happens during component setup so all
+// descendant ElementRenderers pick it up before their own setup runs.
+provideFormId(props.formId)
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <ElementRenderer
+      v-for="child in props.schema"
+      :key="child.id"
+      :element="child"
+      :item="props.item"
+    />
+  </div>
+</template>

package/src/components/compositions/elements/display/BannerDisplay.stories.ts

@@ -1,14 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import BannerDisplay from "./BannerDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/BannerDisplay",
+  title: "Elements/Display/BannerDisplay",
   component: BannerDisplay,
   tags: ["autodocs"],
   args: {
     title: "Heads up",
     value: "This is a static banner message.",
   },
+  parameters: componentDoc("BannerDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-xl p-4"><story /></div>',

package/src/components/compositions/elements/display/BarcodeDisplay.stories.ts

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import BarcodeDisplay from "./BarcodeDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Display/BarcodeDisplay",
+  title: "Elements/Display/BarcodeDisplay",
   component: BarcodeDisplay,
   tags: ["autodocs"],
   args: { value: "GXP-12345" },
+  parameters: componentDoc("BarcodeDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="p-4"><story /></div>',

package/src/components/compositions/elements/display/CarouselDisplay.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import CarouselDisplay from "./CarouselDisplay.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const imageSlides = [
   { src: "https://picsum.photos/seed/gxp-1/800/400", alt: "Slide 1" },
@@ -8,7 +9,7 @@ const imageSlides = [
 ]
 
 const meta = {
-  title: "Compositions/Elements/Display/CarouselDisplay",
+  title: "Elements/Display/CarouselDisplay",
   component: CarouselDisplay,
   tags: ["autodocs"],
   args: {
@@ -19,6 +20,7 @@ const meta = {
     showIndicators: true,
     showArrows: true,
   },
+  parameters: componentDoc("CarouselDisplay", { barrel: "display" }),
   decorators: [
     () => ({
       template: '<div class="max-w-xl p-4"><story /></div>',