@gxp-dev/mod-ui 2.0.0

package/src/components/compositions/cards/GridViewCard.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+/**
+ * Props-driven `grid-view` composition — a responsive CSS-grid layout
+ * driven by `gridLayout`. Each `GridItem.i` is matched to one of the
+ * resolved `cards` (or `gridElements`) by `id` and rendered into a CSS
+ * grid cell using the item's `x`, `y`, `w`, `h` coordinates.
+ *
+ * Self-contained — directly mountable in any Vue app:
+ *
+ *   <GridViewCard
+ *     :grid-layout="layout"
+ *     :cards="[chartCard, feedCard]"
+ *     :item="dataModel"
+ *   />
+ *
+ * The full vue-grid-layout drag/resize behaviour from v2 is not yet
+ * implemented; this composition focuses on the static visual layout.
+ */
+import { computed } from "vue"
+import type { CardElement } from "@/definitions/elements"
+import type { DisplayCard } from "@/definitions/cards"
+import type {
+  GridBreakpoint,
+  GridItem,
+  GridLayout,
+} from "@/definitions/cards/GridViewCard"
+import CardRenderer from "@/engine/CardRenderer.vue"
+import ElementRenderer from "@/engine/ElementRenderer.vue"
+
+export interface GridViewCardProps {
+  title?: string
+  subtitle?: string
+  showCard?: boolean
+  /** Per-breakpoint item layout map. */
+  gridLayout?: GridLayout
+  /** Pixel height of a single grid row. */
+  rowHeight?: number
+  /** Horizontal and vertical gap between items, in pixels. */
+  margin?: [number, number]
+  /** Padding around the entire grid container, in pixels. */
+  containerPadding?: [number, number]
+  /** Column count per breakpoint. */
+  cols?: Partial<Record<GridBreakpoint, number>>
+  /** Resolved nested cards (NOT IDs). */
+  cards?: DisplayCard[]
+  /** Resolved nested elements (NOT IDs) for grid items that target elements. */
+  gridElements?: CardElement[]
+  /** Page-level data model passed through to child renderers. */
+  item?: Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<GridViewCardProps>(), {
+  showCard: true,
+  rowHeight: 150,
+  margin: () => [10, 10] as [number, number],
+  containerPadding: () => [10, 10] as [number, number],
+  cards: () => [],
+  gridElements: () => [],
+  item: () => ({}),
+})
+
+const BREAKPOINT_PRIORITY: GridBreakpoint[] = [
+  "xxl",
+  "xl",
+  "lg",
+  "md",
+  "sm",
+  "xs",
+  "xxs",
+]
+
+const items = computed<GridItem[]>(() => {
+  const layout = props.gridLayout ?? {}
+  for (const bp of BREAKPOINT_PRIORITY) {
+    const entry = layout[bp]
+    if (entry && entry.length > 0) {
+      return entry
+    }
+  }
+  return []
+})
+
+const columnCount = computed<number>(() => {
+  const cols = props.cols ?? {}
+  for (const bp of BREAKPOINT_PRIORITY) {
+    if (typeof cols[bp] === "number") {
+      return cols[bp] as number
+    }
+  }
+  return 12
+})
+
+const gridStyle = computed(() => ({
+  display: "grid",
+  gridTemplateColumns: `repeat(${columnCount.value}, minmax(0, 1fr))`,
+  gridAutoRows: `${props.rowHeight}px`,
+  columnGap: `${props.margin[0]}px`,
+  rowGap: `${props.margin[1]}px`,
+  padding: `${props.containerPadding[1]}px ${props.containerPadding[0]}px`,
+}))
+
+function cellStyle(slot: GridItem): Record<string, string> {
+  return {
+    gridColumn: `${slot.x + 1} / span ${slot.w}`,
+    gridRow: `${slot.y + 1} / span ${slot.h}`,
+  }
+}
+
+const cardById = computed<Record<string, DisplayCard>>(() => {
+  const out: Record<string, DisplayCard> = {}
+  for (const c of props.cards) {
+    out[c.id] = c
+  }
+  return out
+})
+
+const elementById = computed<Record<string, CardElement>>(() => {
+  const out: Record<string, CardElement> = {}
+  for (const e of props.gridElements) {
+    out[e.id] = e
+  }
+  return out
+})
+
+function resolveCard(id: string): DisplayCard | undefined {
+  return cardById.value[id]
+}
+
+function resolveElement(id: string): CardElement | undefined {
+  return elementById.value[id]
+}
+
+const showChrome = computed<boolean>(() => props.showCard !== false)
+</script>
+
+<template>
+  <section
+    :class="[
+      'gxp-grid-view',
+      showChrome
+        ? 'rounded-lg border bg-card text-card-foreground shadow-sm p-4'
+        : '',
+    ]"
+  >
+    <header
+      v-if="title || subtitle"
+      class="mb-3 flex flex-col gap-0.5"
+    >
+      <h3 v-if="title" class="text-base font-semibold">{{ title }}</h3>
+      <p v-if="subtitle" class="text-sm text-muted-foreground">
+        {{ subtitle }}
+      </p>
+    </header>
+    <div
+      v-if="items.length > 0"
+      :style="gridStyle"
+      data-testid="grid-view-container"
+    >
+      <div
+        v-for="slot in items"
+        :key="slot.i"
+        :style="cellStyle(slot)"
+        :data-grid-item-id="slot.i"
+        :class="[
+          'gxp-grid-view__cell',
+          slot.options?.displayBorder ? 'border rounded-md p-2' : '',
+        ]"
+      >
+        <CardRenderer
+          v-if="resolveCard(slot.i)"
+          :card="resolveCard(slot.i)!"
+          :item="item"
+        />
+        <ElementRenderer
+          v-else-if="resolveElement(slot.i)"
+          :element="resolveElement(slot.i)!"
+          :item="item"
+        />
+      </div>
+    </div>
+    <p
+      v-else
+      class="text-sm text-muted-foreground italic"
+      data-testid="grid-view-empty"
+    >
+      No grid items to display.
+    </p>
+  </section>
+</template>

package/src/components/compositions/cards/InfoCard.stories.ts

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import InfoCard from "./InfoCard.vue"
+
+const sampleItem = {
+  user: {
+    name: "Stephen Peek",
+    email: "peek@gramercytech.com",
+    role: "Product Lead",
+  },
+}
+
+const meta = {
+  title: "Cards/InfoCard",
+  component: InfoCard,
+  tags: ["autodocs"],
+  args: {
+    fields: [
+      { label: "Name", value: "user.name" },
+      { label: "Email", value: "user.email" },
+      { label: "Role", value: "user.role" },
+    ],
+    showCard: true,
+    item: sampleItem,
+  },
+} satisfies Meta<typeof InfoCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const WithTitle: Story = {
+  args: {
+    title: "Account summary",
+    subtitle: "Profile details",
+    icon: "user",
+  },
+}
+
+export const WithoutChrome: Story = {
+  args: {
+    title: "No chrome",
+    showCard: false,
+  },
+}
+
+export const Showcase: Story = {
+  args: {
+    title: "Showcase",
+    subtitle: "Formatted fields with prepend/append",
+    icon: "info",
+    fields: [
+      { label: "Name", value: "user.name", icon: "user" },
+      { label: "Email", value: "user.email", icon: "mail" },
+      {
+        label: "Balance",
+        value: "balance",
+        prepend: "$",
+        append: " USD",
+      },
+      { label: "Sessions", value: "sessions", append: " active" },
+    ],
+    item: {
+      ...sampleItem,
+      balance: 1240.5,
+      sessions: 3,
+    },
+  },
+}

package/src/components/compositions/cards/InfoCard.test.ts

@@ -0,0 +1,91 @@
+import { beforeEach, describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import { createPinia, setActivePinia } from "pinia"
+import InfoCard from "./InfoCard.vue"
+
+describe("InfoCard", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it("mounts without error", () => {
+    const wrapper = mount(InfoCard, { props: {} })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it("renders the title when set", () => {
+    const wrapper = mount(InfoCard, {
+      props: { title: "Account summary" },
+    })
+    expect(wrapper.text()).toContain("Account summary")
+  })
+
+  it("renders the subtitle when set", () => {
+    const wrapper = mount(InfoCard, {
+      props: { title: "Header", subtitle: "Helper subtitle" },
+    })
+    expect(wrapper.text()).toContain("Helper subtitle")
+  })
+
+  it("renders the card chrome by default", () => {
+    const wrapper = mount(InfoCard, { props: {} })
+    expect(wrapper.find("[data-testid='info-card-bare']").exists()).toBe(false)
+  })
+
+  it("renders without chrome when showCard is false", () => {
+    const wrapper = mount(InfoCard, {
+      props: { showCard: false },
+    })
+    expect(wrapper.find("[data-testid='info-card-bare']").exists()).toBe(true)
+  })
+
+  it("renders each field's label and resolved value", () => {
+    const wrapper = mount(InfoCard, {
+      props: {
+        fields: [
+          { label: "Name", value: "user.name" },
+          { label: "Email", value: "user.email" },
+        ],
+        item: {
+          user: { name: "Stephen Peek", email: "peek@gramercytech.com" },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain("Name")
+    expect(wrapper.text()).toContain("Stephen Peek")
+    expect(wrapper.text()).toContain("Email")
+    expect(wrapper.text()).toContain("peek@gramercytech.com")
+    expect(wrapper.findAll("[data-testid='info-card-field']").length).toBe(2)
+  })
+
+  it("supports prepend/append modifiers on field values", () => {
+    const wrapper = mount(InfoCard, {
+      props: {
+        fields: [
+          { label: "Price", value: "price", prepend: "$", append: " USD" },
+        ],
+        item: { price: 42 },
+      },
+    })
+    expect(wrapper.text()).toContain("$42 USD")
+  })
+
+  it("renders the header icon when configured", () => {
+    const wrapper = mount(InfoCard, {
+      props: { title: "T", icon: "star" },
+    })
+    expect(wrapper.find("[data-testid='info-card-icon-star']").exists()).toBe(
+      true,
+    )
+  })
+
+  it("renders an empty fields list cleanly", () => {
+    const wrapper = mount(InfoCard, {
+      props: { title: "Empty", fields: [] },
+    })
+    expect(wrapper.find("[data-testid='info-card-fields']").exists()).toBe(
+      false,
+    )
+    expect(wrapper.text()).toContain("Empty")
+  })
+})

package/src/components/compositions/cards/InfoCard.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+/**
+ * Props-driven `info-card` composition. Renders a read-only summary
+ * tile: optional icon header, title, subtitle, and a list of
+ * `{ label, value, icon? }` rows resolved from the data model.
+ *
+ * Self-contained — directly mountable in any Vue app:
+ *
+ *   <InfoCard
+ *     title="Account summary"
+ *     icon="user"
+ *     :fields="[{ label: 'Name', value: 'user.name' }]"
+ *     :item="{ user: { name: 'Jane' } }"
+ *   />
+ *
+ * `field.value` is treated as a dot-path into `item`. When the path
+ * resolves to `undefined` / `null` the row still renders so the label
+ * remains visible — this matches v2 behaviour for info tiles.
+ */
+import { computed } from "vue"
+import type { InfoCardField } from "@/definitions/cards/InfoCard"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
+export interface InfoCardProps {
+  title?: string
+  subtitle?: string
+  showCard?: boolean
+  icon?: string
+  iconColor?: string
+  headerImage?: string
+  defaultHeaderImage?: string
+  headerRatio?: string
+  fields?: InfoCardField[]
+  bodyClassList?: string[] | string
+  lessPadding?: boolean
+  /** Page-level data model used to resolve `field.value` dot-paths. */
+  item?: Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<InfoCardProps>(), {
+  showCard: true,
+  fields: () => [],
+  lessPadding: false,
+  item: () => ({}),
+})
+
+const showChrome = computed<boolean>(() => props.showCard !== false)
+
+const hasHeader = computed<boolean>(
+  () =>
+    Boolean(props.title) ||
+    Boolean(props.subtitle) ||
+    Boolean(props.icon),
+)
+
+const fieldList = computed<InfoCardField[]>(() => props.fields ?? [])
+
+const bodyClass = computed(() => {
+  const list = props.bodyClassList
+  if (!list) {
+    return ""
+  }
+  return Array.isArray(list) ? list.join(" ") : list
+})
+
+function resolvePath(item: Record<string, unknown>, path: string): unknown {
+  if (!path) {
+    return undefined
+  }
+  const segments = path.split(".")
+  let cursor: unknown = item
+  for (const seg of segments) {
+    if (cursor === null || cursor === undefined) {
+      return undefined
+    }
+    if (typeof cursor !== "object") {
+      return undefined
+    }
+    cursor = (cursor as Record<string, unknown>)[seg]
+  }
+  return cursor
+}
+
+function fieldClass(field: InfoCardField): string {
+  const list = field.classList
+  if (!list) {
+    return ""
+  }
+  return Array.isArray(list) ? list.join(" ") : list
+}
+
+function formatValue(field: InfoCardField, raw: unknown): string {
+  if (raw === undefined || raw === null || raw === "") {
+    return ""
+  }
+  const text = typeof raw === "string" ? raw : String(raw)
+  return `${field.prepend ?? ""}${text}${field.append ?? ""}`
+}
+
+function valueFor(field: InfoCardField): string {
+  return formatValue(field, resolvePath(props.item, field.value))
+}
+</script>
+
+<template>
+  <Card v-if="showChrome" class="flex flex-col">
+    <CardHeader v-if="hasHeader" class="flex flex-row items-start gap-3">
+      <span
+        v-if="icon"
+        class="text-2xl leading-none"
+        :style="{ color: iconColor ?? undefined }"
+        :data-testid="`info-card-icon-${icon}`"
+        aria-hidden="true"
+      >
+        {{ icon }}
+      </span>
+      <div class="flex flex-col gap-1.5">
+        <CardTitle v-if="title">{{ title }}</CardTitle>
+        <CardDescription v-if="subtitle">
+          {{ subtitle }}
+        </CardDescription>
+      </div>
+    </CardHeader>
+    <CardContent
+      :class="[
+        bodyClass,
+        lessPadding ? 'p-3' : '',
+        hasHeader ? '' : 'pt-6',
+      ]"
+    >
+      <dl
+        v-if="fieldList.length"
+        class="flex flex-col gap-2"
+        data-testid="info-card-fields"
+      >
+        <div
+          v-for="(field, index) in fieldList"
+          :key="`${field.value}-${index}`"
+          class="flex items-baseline justify-between gap-3"
+          data-testid="info-card-field"
+        >
+          <dt class="flex items-center gap-1.5 text-sm text-muted-foreground">
+            <span
+              v-if="field.icon"
+              class="text-base leading-none"
+              :data-testid="`info-card-field-icon-${field.icon}`"
+              aria-hidden="true"
+            >
+              {{ field.icon }}
+            </span>
+            <span v-if="field.label">{{ field.label }}</span>
+          </dt>
+          <dd
+            class="text-sm font-medium text-foreground"
+            :class="fieldClass(field)"
+            data-testid="info-card-field-value"
+          >
+            {{ valueFor(field) }}
+          </dd>
+        </div>
+      </dl>
+    </CardContent>
+  </Card>
+  <section
+    v-else
+    class="flex flex-col gap-2"
+    data-testid="info-card-bare"
+  >
+    <header v-if="hasHeader" class="flex flex-row items-start gap-3">
+      <span
+        v-if="icon"
+        class="text-2xl leading-none"
+        :style="{ color: iconColor ?? undefined }"
+        :data-testid="`info-card-icon-${icon}`"
+        aria-hidden="true"
+      >
+        {{ icon }}
+      </span>
+      <div class="flex flex-col gap-0.5">
+        <h3 v-if="title" class="text-base font-semibold">
+          {{ title }}
+        </h3>
+        <p v-if="subtitle" class="text-sm text-muted-foreground">
+          {{ subtitle }}
+        </p>
+      </div>
+    </header>
+    <dl
+      v-if="fieldList.length"
+      class="flex flex-col gap-2"
+      data-testid="info-card-fields"
+    >
+      <div
+        v-for="(field, index) in fieldList"
+        :key="`${field.value}-${index}`"
+        class="flex items-baseline justify-between gap-3"
+        data-testid="info-card-field"
+      >
+        <dt class="flex items-center gap-1.5 text-sm text-muted-foreground">
+          <span
+            v-if="field.icon"
+            class="text-base leading-none"
+            :data-testid="`info-card-field-icon-${field.icon}`"
+            aria-hidden="true"
+          >
+            {{ field.icon }}
+          </span>
+          <span v-if="field.label">{{ field.label }}</span>
+        </dt>
+        <dd
+          class="text-sm font-medium text-foreground"
+          :class="fieldClass(field)"
+          data-testid="info-card-field-value"
+        >
+          {{ valueFor(field) }}
+        </dd>
+      </div>
+    </dl>
+  </section>
+</template>

package/src/components/compositions/cards/TabListCard.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import type { DisplayCard } from "@/definitions/cards"
+import TabListCard from "./TabListCard.vue"
+
+function child(id: string, title: string): DisplayCard {
+  return {
+    id,
+    cardType: "element-list",
+    elementList: [],
+    title,
+  } as unknown as DisplayCard
+}
+
+const meta = {
+  title: "Cards/TabListCard",
+  component: TabListCard,
+  tags: ["autodocs"],
+  args: {
+    tabs: [child("t1", "General"), child("t2", "Advanced")],
+    item: {},
+  },
+} satisfies Meta<typeof TabListCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const WithMultipleChildren: Story = {
+  args: {
+    tabs: [
+      child("t1", "General"),
+      child("t2", "Branding"),
+      child("t3", "Permissions"),
+      child("t4", "Notifications"),
+    ],
+    style: "horizontal",
+  },
+}
+
+export const Showcase: Story = {
+  args: {
+    title: "Settings",
+    subtitle: "Configure every aspect of your project",
+    tabs: [
+      child("general", "General"),
+      child("billing", "Billing"),
+      child("team", "Team"),
+    ],
+    style: "horizontal",
+  },
+}