@gxp-dev/mod-ui 2.0.0 → 2.0.3

package/src/components/compositions/elements/builder/GridBuilder.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import type { GridBuilderSchema } from "@/stores/gridBuilderStore"
 import GridBuilder from "./GridBuilder.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const seededSchema: GridBuilderSchema = {
   cols: 12,
@@ -22,6 +23,7 @@ const meta = {
   },
   parameters: {
     layout: "fullscreen",
+    ...componentDoc("GridBuilder", { barrel: "builder" }),
   },
 } satisfies Meta<typeof GridBuilder>
 

package/src/components/compositions/elements/builder/ObjectBuilder.stories.ts

@@ -55,7 +55,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Visually compose a JSON object as a list of typed key / value entries. Each row carries a `key`, a `type` (string / number / boolean / array / object / null), and a `value`. The output is bindable via v-model.",
+          "```ts\nimport { ObjectBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nVisually compose a JSON object as a list of typed key / value entries. Each row carries a `key`, a `type` (string / number / boolean / array / object / null), and a `value`. The output is bindable via v-model.",
       },
     },
   },

package/src/components/compositions/elements/builder/PresetBuilder.stories.ts

@@ -49,7 +49,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Bundles a named, described preset around an embedded FormBuilder schema.",
+          "```ts\nimport { PresetBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nBundles a named, described preset around an embedded FormBuilder schema.",
       },
     },
   },

package/src/components/compositions/elements/builder/QuizBuilder.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import type { QuizBuilderSchema } from "@/stores/quizBuilderStore"
 import QuizBuilder from "./QuizBuilder.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const seededSchema: QuizBuilderSchema = {
   title: "Onboarding quiz",
@@ -47,6 +48,7 @@ const meta = {
   },
   parameters: {
     layout: "fullscreen",
+    ...componentDoc("QuizBuilder", { barrel: "builder" }),
   },
 } satisfies Meta<typeof QuizBuilder>
 

package/src/components/compositions/elements/builder/ReactiveCanvasBuilder.stories.ts

@@ -48,7 +48,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Visual canvas where component-like blocks can be placed and configured. Blocks support pointer-driven drag (free positioning, no snap) and four-corner resize, with the inspector available for numeric edits.",
+          "```ts\nimport { ReactiveCanvasBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nVisual canvas where component-like blocks can be placed and configured. Blocks support pointer-driven drag (free positioning, no snap) and four-corner resize, with the inspector available for numeric edits.",
       },
     },
   },

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

@@ -2,9 +2,10 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import { onBeforeUnmount, ref, type Ref } from "vue"
 import BuildStatus from "./BuildStatus.vue"
 import type { BuildStatusEvent } from "./BuildStatus.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Code/BuildStatus",
+  title: "Elements/Code/BuildStatus",
   component: BuildStatus,
   tags: ["autodocs"],
   args: {
@@ -12,6 +13,7 @@ const meta = {
     initial: { status: "pending" },
     showLogs: true,
   },
+  parameters: componentDoc("BuildStatus", { barrel: "code" }),
   decorators: [
     () => ({
       template: '<div class="w-[640px] p-4"><story /></div>',

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

@@ -14,7 +14,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Generic chat-message bubble — Slack / Discord / iMessage style. Display-only, no platform integration.",
+          "```ts\nimport { ChatMessage } from \"@gxp-dev/mod-ui/code\"\n```\n\nGeneric chat-message bubble — Slack / Discord / iMessage style. Display-only, no platform integration.",
       },
     },
   },

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import FileTree from "./FileTree.vue"
 import type { TreeNode } from "./FileTree.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const ROOT: TreeNode[] = [
   { path: "src", name: "src", kind: "directory" },
@@ -53,13 +54,14 @@ function alwaysFail(): (path: string) => Promise<TreeNode[]> {
 }
 
 const meta = {
-  title: "Compositions/Elements/Code/FileTree",
+  title: "Elements/Code/FileTree",
   component: FileTree,
   tags: ["autodocs"],
   args: {
     label: "File Tree",
     onLoadTree: mockLoad(),
   },
+  parameters: componentDoc("FileTree", { barrel: "code" }),
   decorators: [
     () => ({
       template: '<div class="w-96 p-4"><story /></div>',

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")
+  })
 })