@gxp-dev/mod-ui 2.0.0

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

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import type { ElementListBuilderSchema } from "@/stores/elementListBuilderStore"
+import ElementListBuilder from "./ElementListBuilder.vue"
+
+const seededSchema = {
+  elements: [
+    {
+      id: "first-name",
+      type: "input.text",
+      name: "first_name",
+      label: "First name",
+      required: true,
+    },
+    {
+      id: "email",
+      type: "input.email",
+      name: "email",
+      label: "Email",
+      required: true,
+      placeholder: "you@example.com",
+    },
+    {
+      id: "active",
+      type: "boolean.switch",
+      name: "is_active",
+      label: "Active",
+    },
+  ],
+} as unknown as ElementListBuilderSchema
+
+const meta = {
+  title: "Elements/Builder/ElementListBuilder",
+  component: ElementListBuilder,
+  tags: ["autodocs"],
+  args: {
+    label: "Element List Builder",
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A simplified FormBuilder that produces a flat list of CardElements (no cards, no tabs, no nested cards). Useful for forms-as-arrays and list-of-fields configs.",
+      },
+    },
+  },
+} satisfies Meta<typeof ElementListBuilder>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Empty: Story = {
+  name: "Empty (default)",
+  args: {},
+}
+
+export const WithSeededSchema: Story = {
+  name: "Pre-populated schema",
+  args: {
+    modelValue: seededSchema,
+  },
+}
+
+export const ReadOnlyPreview: Story = {
+  name: "Custom label",
+  args: {
+    label: "Author element list",
+    modelValue: seededSchema,
+  },
+}
+
+export const Showcase: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { ElementListBuilder },
+    setup() {
+      const variants: Array<{
+        label: string
+        modelValue?: ElementListBuilderSchema
+      }> = [
+        { label: "Empty list" },
+        { label: "Sidebar elements", modelValue: seededSchema },
+        { label: "Mobile elements", modelValue: seededSchema },
+      ]
+      return { variants }
+    },
+    template: `
+      <div class="flex flex-col gap-6 p-4">
+        <ElementListBuilder
+          v-for="(v, i) in variants"
+          :key="i"
+          :label="v.label"
+          :model-value="v.modelValue"
+          :builder-id="'showcase-' + i"
+        />
+      </div>
+    `,
+  }),
+}

package/src/components/compositions/elements/builder/ElementListBuilder.test.ts

@@ -0,0 +1,216 @@
+import { beforeEach, describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import { createPinia, setActivePinia } from "pinia"
+import ElementListBuilder from "./ElementListBuilder.vue"
+import {
+  __resetElementListBuilderIdCounter,
+  useElementListBuilderStore,
+  type ElementListBuilderSchema,
+} from "@/stores/elementListBuilderStore"
+
+const BUILDER_ID = "elb-test"
+
+describe("ElementListBuilder", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    __resetElementListBuilderIdCounter()
+  })
+
+  it("renders the three-pane layout", () => {
+    const wrapper = mount(ElementListBuilder, {
+      props: { builderId: BUILDER_ID },
+    })
+    expect(
+      wrapper.find("[data-testid='element-list-builder-palette']").exists(),
+    ).toBe(true)
+    expect(
+      wrapper.find("[data-testid='element-list-builder-canvas']").exists(),
+    ).toBe(true)
+    expect(
+      wrapper.find("[data-testid='element-list-builder-inspector']").exists(),
+    ).toBe(true)
+  })
+
+  it("shows an empty-state hint on the canvas when there are no elements", () => {
+    const wrapper = mount(ElementListBuilder, {
+      props: { builderId: BUILDER_ID },
+    })
+    expect(
+      wrapper
+        .find("[data-testid='element-list-builder-canvas-empty']")
+        .exists(),
+    ).toBe(true)
+  })
+
+  it("lists every registered element type in the palette", () => {
+    const wrapper = mount(ElementListBuilder, {
+      props: { builderId: BUILDER_ID },
+    })
+    const palette = wrapper.find(
+      "[data-testid='element-list-builder-palette']",
+    )
+    for (const type of [
+      "action",
+      "boolean",
+      "builder",
+      "code",
+      "components",
+      "configuration-block",
+      "display",
+      "editor",
+      "file",
+      "input",
+      "option-select",
+      "picker",
+    ]) {
+      expect(
+        palette
+          .find(`[data-testid='element-list-builder-palette-${type}']`)
+          .exists(),
+      ).toBe(true)
+    }
+  })
+
+  it("clicking a palette button appends an element and selects it", async () => {
+    const wrapper = mount(ElementListBuilder, {
+      props: { builderId: BUILDER_ID },
+    })
+    await wrapper
+      .find("[data-testid='element-list-builder-palette-input']")
+      .trigger("click")
+
+    const store = useElementListBuilderStore()
+    const schema = store.getSchema(BUILDER_ID)
+    expect(schema.elements).toHaveLength(1)
+    expect(
+      (schema.elements[0] as unknown as { type: string }).type,
+    ).toBe("input.text")
+    expect(
+      wrapper
+        .find("[data-testid='element-list-builder-inspector-fields']")
+        .exists(),
+    ).toBe(true)
+  })
+
+  it("editing the label patches the schema", async () => {
+    const wrapper = mount(ElementListBuilder, {
+      props: { builderId: BUILDER_ID },
+    })
+    await wrapper
+      .find("[data-testid='element-list-builder-palette-input']")
+      .trigger("click")
+    await wrapper
+      .find("[data-testid='element-list-builder-inspector-label']")
+      .setValue("First name")
+
+    const store = useElementListBuilderStore()
+    const schema = store.getSchema(BUILDER_ID)
+    expect(
+      (schema.elements[0] as unknown as { label?: string }).label,
+    ).toBe("First name")
+  })
+
+  it("removes the selected element when Remove is clicked", async () => {
+    const wrapper = mount(ElementListBuilder, {
+      props: { builderId: BUILDER_ID },
+    })
+    await wrapper
+      .find("[data-testid='element-list-builder-palette-input']")
+      .trigger("click")
+    await wrapper
+      .find("[data-testid='element-list-builder-remove']")
+      .trigger("click")
+
+    const store = useElementListBuilderStore()
+    expect(store.getSchema(BUILDER_ID).elements).toHaveLength(0)
+  })
+
+  it("reorders an element when move-up is clicked", async () => {
+    const wrapper = mount(ElementListBuilder, {
+      props: { builderId: BUILDER_ID },
+    })
+    await wrapper
+      .find("[data-testid='element-list-builder-palette-input']")
+      .trigger("click")
+    await wrapper
+      .find("[data-testid='element-list-builder-palette-display']")
+      .trigger("click")
+
+    const store = useElementListBuilderStore()
+    const initial = store
+      .getSchema(BUILDER_ID)
+      .elements.map((el) => (el as unknown as { id: string }).id)
+    expect(initial).toHaveLength(2)
+
+    // The second click selected the display element. Move it up.
+    await wrapper
+      .find("[data-testid='element-list-builder-move-up']")
+      .trigger("click")
+    const reordered = store
+      .getSchema(BUILDER_ID)
+      .elements.map((el) => (el as unknown as { id: string }).id)
+    expect(reordered[0]).toBe(initial[1])
+    expect(reordered[1]).toBe(initial[0])
+  })
+
+  it("loads an existing schema from modelValue on mount", () => {
+    const existingSchema = {
+      elements: [
+        {
+          id: "preloaded-el",
+          type: "input.text",
+          name: "preloaded",
+          label: "Preloaded element",
+        },
+      ],
+    } as unknown as ElementListBuilderSchema
+    mount(ElementListBuilder, {
+      props: {
+        builderId: BUILDER_ID,
+        modelValue: existingSchema,
+      },
+    })
+
+    const store = useElementListBuilderStore()
+    const schema = store.getSchema(BUILDER_ID)
+    expect(schema.elements).toHaveLength(1)
+    expect(
+      (schema.elements[0] as unknown as { label?: string }).label,
+    ).toBe("Preloaded element")
+  })
+
+  it("emits update:modelValue on schema mutation", async () => {
+    const wrapper = mount(ElementListBuilder, {
+      props: { builderId: BUILDER_ID },
+    })
+    await wrapper
+      .find("[data-testid='element-list-builder-palette-input']")
+      .trigger("click")
+    await wrapper.vm.$nextTick()
+
+    const emitted = wrapper.emitted("update:modelValue")
+    expect(emitted).toBeTruthy()
+    const last = emitted![emitted!.length - 1] as unknown[]
+    const schema = last[0] as { elements: unknown[] }
+    expect(schema.elements.length).toBe(1)
+  })
+
+  it("patches required / readonly / disabled flags from the inspector", () => {
+    setActivePinia(createPinia())
+    __resetElementListBuilderIdCounter()
+    const store = useElementListBuilderStore()
+    const id = store.addElement(BUILDER_ID, "input")
+    store.updateElement(BUILDER_ID, id, {
+      required: true,
+      readonly: true,
+      disabled: true,
+    })
+    const el = store.getSchema(BUILDER_ID).elements[0] as unknown as Record<
+      string,
+      unknown
+    >
+    expect(el.required).toBe(true)
+    expect(el.readonly).toBe(true)
+    expect(el.disabled).toBe(true)
+  })
+})