@gxp-dev/mod-ui 2.0.0

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

@@ -0,0 +1,133 @@
+import { beforeEach, describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import { createPinia, setActivePinia } from "pinia"
+import PresetBuilder from "./PresetBuilder.vue"
+import {
+  __resetPresetBuilderIdCounter,
+  usePresetBuilderStore,
+  type PresetBuilderSchema,
+} from "@/stores/presetBuilderStore"
+import {
+  __resetFormBuilderIdCounter,
+  useFormBuilderStore,
+} from "@/stores/formBuilderStore"
+
+const BUILDER_ID = "preset-test"
+
+describe("PresetBuilder", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    __resetPresetBuilderIdCounter()
+    __resetFormBuilderIdCounter()
+  })
+
+  it("renders the preset envelope with name + description inputs", () => {
+    const wrapper = mount(PresetBuilder, { props: { builderId: BUILDER_ID } })
+    expect(wrapper.find("[data-testid='preset-builder']").exists()).toBe(true)
+    expect(
+      wrapper.find("[data-testid='preset-builder-name']").exists(),
+    ).toBe(true)
+    expect(
+      wrapper.find("[data-testid='preset-builder-description']").exists(),
+    ).toBe(true)
+  })
+
+  it("renders the embedded FormBuilder", () => {
+    const wrapper = mount(PresetBuilder, { props: { builderId: BUILDER_ID } })
+    expect(wrapper.find("[data-testid='form-builder']").exists()).toBe(true)
+    expect(
+      wrapper.find("[data-testid='form-builder-palette']").exists(),
+    ).toBe(true)
+  })
+
+  it("writes name + description into the store on input", async () => {
+    const wrapper = mount(PresetBuilder, { props: { builderId: BUILDER_ID } })
+    await wrapper
+      .find("[data-testid='preset-builder-name']")
+      .setValue("Brand kit")
+    await wrapper
+      .find("[data-testid='preset-builder-description']")
+      .setValue("Default colors and type")
+
+    const store = usePresetBuilderStore()
+    const state = store.getState(BUILDER_ID)
+    expect(state.presetName).toBe("Brand kit")
+    expect(state.presetDescription).toBe("Default colors and type")
+  })
+
+  it("seeds both stores from modelValue on mount", () => {
+    const seed: PresetBuilderSchema = {
+      presetName: "Initial preset",
+      presetDescription: "Pre-loaded",
+      schema: {
+        rootCardId: "seed-root",
+        cards: {
+          "seed-root": {
+            id: "seed-root",
+            cardType: "element-list",
+            elementList: ["seed-el"],
+          } as never,
+        },
+        elements: {
+          "seed-el": {
+            id: "seed-el",
+            type: "input.text",
+            label: "Seeded label",
+          } as never,
+        },
+      },
+    }
+    mount(PresetBuilder, {
+      props: { builderId: BUILDER_ID, modelValue: seed },
+    })
+
+    const presetStore = usePresetBuilderStore()
+    expect(presetStore.getState(BUILDER_ID).presetName).toBe(
+      "Initial preset",
+    )
+    expect(presetStore.getState(BUILDER_ID).presetDescription).toBe(
+      "Pre-loaded",
+    )
+
+    const formStore = useFormBuilderStore()
+    const innerId = presetStore.getState(BUILDER_ID).innerBuilderId
+    const innerSchema = formStore.getSchema(innerId)
+    expect(innerSchema.rootCardId).toBe("seed-root")
+    expect(innerSchema.elements["seed-el"]?.label).toBe("Seeded label")
+  })
+
+  it("emits update:modelValue with the full preset schema on mutation", async () => {
+    const wrapper = mount(PresetBuilder, { props: { builderId: BUILDER_ID } })
+    await wrapper
+      .find("[data-testid='preset-builder-name']")
+      .setValue("Brand kit")
+    await wrapper.vm.$nextTick()
+
+    const emitted = wrapper.emitted("update:modelValue")
+    expect(emitted).toBeTruthy()
+    const last = emitted![emitted!.length - 1] as unknown[]
+    const value = last[0] as PresetBuilderSchema
+    expect(value.presetName).toBe("Brand kit")
+    expect(typeof value.schema).toBe("object")
+    expect(typeof value.schema.rootCardId).toBe("string")
+  })
+
+  it("adding an element via the inner palette mutates the preset's inner schema", async () => {
+    const wrapper = mount(PresetBuilder, { props: { builderId: BUILDER_ID } })
+    await wrapper
+      .find("[data-testid='form-builder-palette-input']")
+      .trigger("click")
+    await wrapper
+      .find("[data-testid='form-builder-palette-input-text']")
+      .trigger("click")
+
+    const presetStore = usePresetBuilderStore()
+    const innerId = presetStore.getState(BUILDER_ID).innerBuilderId
+    const formStore = useFormBuilderStore()
+    const innerSchema = formStore.getSchema(innerId)
+    const root = innerSchema.cards[innerSchema.rootCardId] as unknown as {
+      elementList: string[]
+    }
+    expect(root.elementList).toHaveLength(1)
+  })
+})

package/src/components/compositions/elements/builder/PresetBuilder.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+/**
+ * PresetBuilder — wraps a FormBuilder schema with a named, described
+ * preset envelope.
+ *
+ * Layout:
+ *   - Canvas header: preset name + description inputs.
+ *   - Canvas body:   embedded FormBuilder bound to the inner schema.
+ *
+ * State for the name + description lives in `presetBuilderStore`. The
+ * inner schema is owned by `formBuilderStore` (keyed off a derived
+ * `innerBuilderId`) so all existing FormBuilder behaviours work
+ * unchanged.
+ *
+ * Two-way binds the full `PresetBuilderSchema` via `defineModel`.
+ */
+import { computed, onMounted, ref, watch } from "vue"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import {
+  FieldFrame,
+  type FieldFrameProps,
+} from "@/components/ui/field-frame"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import FormBuilder from "./FormBuilder.vue"
+import {
+  usePresetBuilder,
+  type PresetBuilderSchema,
+} from "@/stores/presetBuilderStore"
+import {
+  useFormBuilder,
+  type BuilderSchema,
+} from "@/stores/formBuilderStore"
+import { cn } from "@/lib/utils"
+
+export interface PresetBuilderProps
+  extends Pick<FieldFrameProps, "label" | "hideLabel" | "helpText" | "errors"> {
+  /** Initial / current schema. Two-way bindable via v-model. */
+  modelValue?: PresetBuilderSchema
+  /**
+   * Identifier used to key the presetBuilderStore. Defaults to a
+   * stable auto-generated id so multiple PresetBuilders on the same
+   * page don't collide.
+   */
+  builderId?: string
+  name?: string | null
+  item?: Record<string, unknown>
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<PresetBuilderProps>(), {
+  errors: () => [],
+  item: () => ({}),
+})
+
+const model = defineModel<PresetBuilderSchema | undefined>("modelValue")
+
+let nextAutoId = 0
+function makeAutoId(): string {
+  nextAutoId += 1
+  return `preset-builder-${Date.now()}-${nextAutoId}`
+}
+const fallbackId = ref<string>(makeAutoId())
+const builderId = computed<string>(() => props.builderId ?? fallbackId.value)
+
+const builder = usePresetBuilder(builderId.value)
+const innerBuilderId = computed<string>(() => builder.state.value.innerBuilderId)
+const inner = useFormBuilder(innerBuilderId.value)
+
+function isPresetSchema(value: unknown): value is PresetBuilderSchema {
+  if (typeof value !== "object" || value === null) {
+    return false
+  }
+  const v = value as Record<string, unknown>
+  return (
+    typeof v.presetName === "string" &&
+    typeof v.schema === "object" &&
+    v.schema !== null
+  )
+}
+
+/** Seed both stores from the initial modelValue. */
+onMounted(() => {
+  const seed = model.value
+  if (isPresetSchema(seed)) {
+    builder.loadMeta({
+      presetName: seed.presetName,
+      presetDescription: seed.presetDescription,
+    })
+    inner.loadSchema(seed.schema)
+  }
+})
+
+const innerSchemaRef = computed<BuilderSchema>(() => inner.schema.value)
+const stateRef = computed(() => builder.state.value)
+
+/** Push schema changes back via v-model. */
+watch(
+  [stateRef, innerSchemaRef],
+  ([state, schema]) => {
+    model.value = {
+      presetName: state.presetName,
+      presetDescription: state.presetDescription,
+      schema,
+    }
+  },
+  { deep: true },
+)
+
+function onNameInput(e: Event): void {
+  builder.setName((e.target as HTMLInputElement).value)
+}
+
+function onDescriptionInput(e: Event): void {
+  builder.setDescription((e.target as HTMLTextAreaElement).value)
+}
+</script>
+
+<template>
+  <FieldFrame
+    :label="props.label"
+    :hide-label="props.hideLabel"
+    :help-text="props.helpText"
+    :errors="props.errors"
+    :class="props.classList"
+  >
+    <Card
+      class="gxp-preset-builder"
+      data-testid="preset-builder"
+      :data-element-name="props.name ?? undefined"
+    >
+      <CardHeader>
+        <div class="flex items-center justify-between gap-2">
+          <CardTitle class="text-base">Preset</CardTitle>
+          <Badge variant="outline" class="font-mono text-[10px]">
+            builder/preset-builder
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent class="flex flex-col gap-4">
+        <div class="grid gap-3 sm:grid-cols-2">
+          <div class="flex flex-col gap-1">
+            <Label for="preset-builder-name">Preset name</Label>
+            <Input
+              id="preset-builder-name"
+              :model-value="stateRef.presetName"
+              placeholder="My preset"
+              data-testid="preset-builder-name"
+              @input="onNameInput"
+            />
+          </div>
+          <div class="flex flex-col gap-1">
+            <Label for="preset-builder-description">Description</Label>
+            <Textarea
+              id="preset-builder-description"
+              :model-value="stateRef.presetDescription"
+              placeholder="Optional description"
+              data-testid="preset-builder-description"
+              @input="onDescriptionInput"
+            />
+          </div>
+        </div>
+
+        <div
+          :class="cn('rounded-md border bg-card/40 p-2')"
+          data-testid="preset-builder-inner"
+        >
+          <FormBuilder
+            :builder-id="innerBuilderId"
+            :item="props.item"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  </FieldFrame>
+</template>

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

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import type { QuizBuilderSchema } from "@/stores/quizBuilderStore"
+import QuizBuilder from "./QuizBuilder.vue"
+
+const seededSchema: QuizBuilderSchema = {
+  title: "Onboarding quiz",
+  description: "A short check that you understand the basics.",
+  passingScore: 2,
+  questions: [
+    {
+      id: "q1",
+      prompt: "What is 2 + 2?",
+      type: "single-choice",
+      required: true,
+      options: [
+        { id: "q1a", label: "3", value: "3" },
+        { id: "q1b", label: "4", value: "4", correct: true, score: 1 },
+        { id: "q1c", label: "5", value: "5" },
+      ],
+    },
+    {
+      id: "q2",
+      prompt: "Pick all primary colors.",
+      type: "multi-choice",
+      options: [
+        { id: "q2a", label: "Red", value: "red", correct: true, score: 1 },
+        { id: "q2b", label: "Green", value: "green" },
+        { id: "q2c", label: "Blue", value: "blue", correct: true, score: 1 },
+        { id: "q2d", label: "Yellow", value: "yellow", correct: true, score: 1 },
+      ],
+    },
+    {
+      id: "q3",
+      prompt: "Briefly describe your favorite color.",
+      type: "free-text",
+      options: [],
+    },
+  ],
+}
+
+const meta = {
+  title: "Elements/Builder/QuizBuilder",
+  component: QuizBuilder,
+  tags: ["autodocs"],
+  args: {
+    label: "Quiz",
+  },
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof QuizBuilder>
+
+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 Showcase: Story = {
+  args: {
+    modelValue: seededSchema,
+  },
+}

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

@@ -0,0 +1,177 @@
+import { beforeEach, describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import { createPinia, setActivePinia } from "pinia"
+import QuizBuilder from "./QuizBuilder.vue"
+import {
+  __resetQuizBuilderIdCounter,
+  useQuizBuilderStore,
+  type QuizBuilderSchema,
+} from "@/stores/quizBuilderStore"
+
+const BUILDER_ID = "qb-test"
+
+describe("QuizBuilder", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    __resetQuizBuilderIdCounter()
+  })
+
+  it("renders the three-pane layout", () => {
+    const wrapper = mount(QuizBuilder, { props: { builderId: BUILDER_ID } })
+    expect(wrapper.find("[data-testid='quiz-builder-palette']").exists()).toBe(
+      true,
+    )
+    expect(wrapper.find("[data-testid='quiz-builder-canvas']").exists()).toBe(
+      true,
+    )
+    expect(
+      wrapper.find("[data-testid='quiz-builder-inspector']").exists(),
+    ).toBe(true)
+  })
+
+  it("shows an empty-state hint on the canvas when there are no questions", () => {
+    const wrapper = mount(QuizBuilder, { props: { builderId: BUILDER_ID } })
+    expect(
+      wrapper.find("[data-testid='quiz-builder-canvas-empty']").exists(),
+    ).toBe(true)
+  })
+
+  it("lists every question-type chip in the palette", () => {
+    const wrapper = mount(QuizBuilder, { props: { builderId: BUILDER_ID } })
+    const palette = wrapper.find("[data-testid='quiz-builder-palette']")
+    expect(palette.find("[data-testid='quiz-builder-palette-add']").exists()).toBe(
+      true,
+    )
+    for (const type of ["single-choice", "multi-choice", "free-text"]) {
+      expect(
+        palette.find(`[data-testid='quiz-builder-palette-${type}']`).exists(),
+      ).toBe(true)
+    }
+  })
+
+  it("clicking a chip appends a question of that type and selects it", async () => {
+    const wrapper = mount(QuizBuilder, { props: { builderId: BUILDER_ID } })
+    await wrapper
+      .find("[data-testid='quiz-builder-palette-multi-choice']")
+      .trigger("click")
+
+    const store = useQuizBuilderStore()
+    const schema = store.getSchema(BUILDER_ID)
+    expect(schema.questions).toHaveLength(1)
+    expect(schema.questions[0]!.type).toBe("multi-choice")
+    expect(schema.questions[0]!.options).toHaveLength(2)
+    expect(
+      wrapper.find("[data-testid='quiz-builder-inspector-fields']").exists(),
+    ).toBe(true)
+  })
+
+  it("free-text questions have no options", async () => {
+    const wrapper = mount(QuizBuilder, { props: { builderId: BUILDER_ID } })
+    await wrapper
+      .find("[data-testid='quiz-builder-palette-free-text']")
+      .trigger("click")
+
+    const store = useQuizBuilderStore()
+    const schema = store.getSchema(BUILDER_ID)
+    expect(schema.questions[0]!.options).toHaveLength(0)
+  })
+
+  it("editing the prompt patches the schema", async () => {
+    const wrapper = mount(QuizBuilder, { props: { builderId: BUILDER_ID } })
+    await wrapper
+      .find("[data-testid='quiz-builder-palette-single-choice']")
+      .trigger("click")
+    await wrapper
+      .find("[data-testid='quiz-builder-inspector-prompt']")
+      .setValue("What is 2 + 2?")
+
+    const store = useQuizBuilderStore()
+    const schema = store.getSchema(BUILDER_ID)
+    expect(schema.questions[0]!.prompt).toBe("What is 2 + 2?")
+  })
+
+  it("editing the top-level title patches schema meta", async () => {
+    const wrapper = mount(QuizBuilder, { props: { builderId: BUILDER_ID } })
+    await wrapper
+      .find("[data-testid='quiz-builder-title']")
+      .setValue("My quiz")
+
+    const store = useQuizBuilderStore()
+    const schema = store.getSchema(BUILDER_ID)
+    expect(schema.title).toBe("My quiz")
+  })
+
+  it("Add option adds an option to the selected question", async () => {
+    const wrapper = mount(QuizBuilder, { props: { builderId: BUILDER_ID } })
+    await wrapper
+      .find("[data-testid='quiz-builder-palette-single-choice']")
+      .trigger("click")
+    await wrapper
+      .find("[data-testid='quiz-builder-inspector-add-option']")
+      .trigger("click")
+
+    const store = useQuizBuilderStore()
+    const schema = store.getSchema(BUILDER_ID)
+    expect(schema.questions[0]!.options).toHaveLength(3)
+  })
+
+  it("removes the selected question when Remove question is clicked", async () => {
+    const wrapper = mount(QuizBuilder, { props: { builderId: BUILDER_ID } })
+    await wrapper
+      .find("[data-testid='quiz-builder-palette-single-choice']")
+      .trigger("click")
+    await wrapper.find("[data-testid='quiz-builder-remove']").trigger("click")
+
+    const store = useQuizBuilderStore()
+    const schema = store.getSchema(BUILDER_ID)
+    expect(schema.questions).toHaveLength(0)
+  })
+
+  it("loads an existing schema from modelValue on mount", () => {
+    const existing: QuizBuilderSchema = {
+      title: "Pre-loaded",
+      description: "desc",
+      passingScore: 4,
+      questions: [
+        {
+          id: "q1",
+          prompt: "Q1?",
+          type: "single-choice",
+          required: true,
+          options: [
+            {
+              id: "o1",
+              label: "A",
+              value: "a",
+              correct: true,
+              score: 2,
+            },
+          ],
+        },
+      ],
+    }
+    mount(QuizBuilder, {
+      props: { builderId: BUILDER_ID, modelValue: existing },
+    })
+
+    const store = useQuizBuilderStore()
+    const schema = store.getSchema(BUILDER_ID)
+    expect(schema.title).toBe("Pre-loaded")
+    expect(schema.questions).toHaveLength(1)
+    expect(schema.questions[0]!.options[0]!.correct).toBe(true)
+  })
+
+  it("emits update:modelValue on schema mutation", async () => {
+    const wrapper = mount(QuizBuilder, { props: { builderId: BUILDER_ID } })
+    await wrapper
+      .find("[data-testid='quiz-builder-palette-single-choice']")
+      .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 QuizBuilderSchema
+    expect(schema.questions).toHaveLength(1)
+  })
+})