@gxp-dev/mod-ui 2.0.0

package/src/components/compositions/elements/picker/DateTimePicker.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+/**
+ * Props-driven date+time picker composition. DatePicker-style Popover
+ * (Calendar) plus two numeric inputs for hour/minute. Round-trips ISO
+ * 8601 (e.g. `2024-06-15T13:30:00`). When only the date half is set the
+ * value falls back to a date-only ISO string.
+ *
+ *   <DateTimePicker v-model="when" label="Starts at" />
+ */
+import { computed, ref, watchEffect } from "vue"
+import { Calendar as CalendarIcon, Clock } from "lucide-vue-next"
+import {
+  CalendarDate,
+  parseDate,
+  type DateValue,
+} from "@internationalized/date"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import { Input } from "@/components/ui/input"
+import { FieldFrame } from "@/components/ui/field-frame"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+
+export interface DateTimePickerProps {
+  modelValue?: string | null
+  id?: string
+  name?: string
+  label?: string
+  hideLabel?: boolean
+  placeholder?: string
+  required?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  helpText?: string
+  errors?: string[]
+}
+
+withDefaults(defineProps<DateTimePickerProps>(), {
+  errors: () => [],
+})
+
+const model = defineModel<string | null>("modelValue")
+
+const datePart = ref<string>("")
+const hourPart = ref<string>("")
+const minutePart = ref<string>("")
+
+watchEffect(() => {
+  const iso = model.value
+  if (!iso) {
+    datePart.value = ""
+    hourPart.value = ""
+    minutePart.value = ""
+    return
+  }
+  const [d, t] = iso.split("T")
+  datePart.value = d ?? ""
+  if (t) {
+    const [hh, mm] = t.split(":")
+    hourPart.value = hh ?? ""
+    minutePart.value = (mm ?? "").slice(0, 2)
+  } else {
+    hourPart.value = ""
+    minutePart.value = ""
+  }
+})
+
+const open = ref(false)
+
+const calendarValue = computed<DateValue | undefined>(() => {
+  if (!datePart.value) {
+    return undefined
+  }
+  try {
+    return parseDate(datePart.value)
+  } catch {
+    return undefined
+  }
+})
+
+function emitCombined(): void {
+  if (!datePart.value) {
+    model.value = null
+    return
+  }
+  if (hourPart.value === "" && minutePart.value === "") {
+    model.value = datePart.value
+    return
+  }
+  const hh = padTwo(hourPart.value || "0")
+  const mm = padTwo(minutePart.value || "0")
+  model.value = `${datePart.value}T${hh}:${mm}:00`
+}
+
+function padTwo(value: string): string {
+  const n = Math.max(0, parseInt(value, 10) || 0)
+  return n.toString().padStart(2, "0")
+}
+
+function onDateSelected(value: DateValue | undefined): void {
+  if (!value) {
+    datePart.value = ""
+    emitCombined()
+    return
+  }
+  const calendar =
+    value instanceof CalendarDate
+      ? value
+      : new CalendarDate(value.year, value.month, value.day)
+  datePart.value = calendar.toString()
+  emitCombined()
+  open.value = false
+}
+
+function onHourInput(value: string | number | undefined): void {
+  const next = String(value ?? "")
+  const numeric = Math.min(23, Math.max(0, parseInt(next, 10) || 0))
+  hourPart.value = numeric.toString()
+  emitCombined()
+}
+
+function onMinuteInput(value: string | number | undefined): void {
+  const next = String(value ?? "")
+  const numeric = Math.min(59, Math.max(0, parseInt(next, 10) || 0))
+  minutePart.value = numeric.toString()
+  emitCombined()
+}
+
+const displayValue = computed<string>(() => {
+  if (!datePart.value) {
+    return ""
+  }
+  if (hourPart.value === "" && minutePart.value === "") {
+    return datePart.value
+  }
+  return `${datePart.value} ${padTwo(hourPart.value || "0")}:${padTwo(minutePart.value || "0")}`
+})
+</script>
+
+<template>
+  <FieldFrame
+    :label="label"
+    :required="required"
+    :hide-label="hideLabel"
+    :for="id"
+    :help-text="helpText"
+    :errors="errors"
+  >
+    <Popover v-model:open="open">
+      <PopoverTrigger as-child>
+        <Button
+          type="button"
+          variant="outline"
+          :disabled="disabled"
+          :class="
+            cn(
+              'w-full justify-start text-left font-normal',
+              !displayValue && 'text-muted-foreground',
+            )
+          "
+          :data-element-name="name ?? undefined"
+          :data-readonly="readonly || undefined"
+        >
+          <CalendarIcon class="mr-2 size-4" />
+          <span>{{ displayValue || placeholder || "Pick a date & time" }}</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-auto p-0">
+        <Calendar
+          :model-value="calendarValue"
+          :placeholder="calendarValue"
+          @update:model-value="onDateSelected"
+        />
+        <div class="flex items-center gap-2 border-t p-3">
+          <Clock class="size-4 text-muted-foreground" />
+          <Input
+            type="number"
+            min="0"
+            max="23"
+            :model-value="hourPart"
+            class="w-16"
+            :disabled="disabled"
+            placeholder="HH"
+            data-testid="datetime-hour"
+            @update:model-value="onHourInput"
+          />
+          <span class="text-muted-foreground">:</span>
+          <Input
+            type="number"
+            min="0"
+            max="59"
+            :model-value="minutePart"
+            class="w-16"
+            :disabled="disabled"
+            placeholder="MM"
+            data-testid="datetime-minute"
+            @update:model-value="onMinuteInput"
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  </FieldFrame>
+</template>

package/src/components/compositions/elements/picker/IconPicker.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import IconPicker from "./IconPicker.vue"
+
+const meta = {
+  title: "Compositions/Elements/Picker/IconPicker",
+  component: IconPicker,
+  tags: ["autodocs"],
+  args: {
+    label: "Icon",
+  },
+  decorators: [
+    () => ({
+      template: '<div class="w-96 p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof IconPicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { label: "Icon" },
+}
+
+export const WithValue: Story = {
+  args: { label: "Icon", modelValue: "Calendar" },
+}
+
+export const Required: Story = {
+  args: { label: "Icon", required: true },
+}
+
+export const Disabled: Story = {
+  args: { label: "Icon", disabled: true },
+}
+
+export const WithHelpText: Story = {
+  args: { label: "Icon", helpText: "Choose a lucide icon by name." },
+}

package/src/components/compositions/elements/picker/IconPicker.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest"
+import { mount } from "@vue/test-utils"
+import IconPicker from "./IconPicker.vue"
+
+describe("IconPicker (props-based composition)", () => {
+  describe("rendering", () => {
+    it("renders the label and combobox input", () => {
+      const wrapper = mount(IconPicker, { props: { label: "Icon" } })
+      expect(wrapper.text()).toContain("Icon")
+      expect(wrapper.find("input").exists()).toBe(true)
+    })
+
+    it("uses a custom placeholder when provided", () => {
+      const wrapper = mount(IconPicker, {
+        props: { label: "Icon", placeholder: "Pick an icon…" },
+      })
+      expect(wrapper.html()).toContain("Pick an icon…")
+    })
+
+    it("hides the label when hideLabel is true", () => {
+      const wrapper = mount(IconPicker, {
+        props: { label: "Icon", hideLabel: true },
+      })
+      expect(wrapper.find("[data-testid='field-frame-label']").exists()).toBe(
+        false,
+      )
+    })
+
+    it("marks the label as required", () => {
+      const wrapper = mount(IconPicker, {
+        props: { label: "Icon", required: true },
+      })
+      expect(wrapper.html()).toContain("after:content-['*']")
+    })
+  })
+
+  describe("value binding", () => {
+    it("renders a preview icon when modelValue is a known lucide icon", () => {
+      const wrapper = mount(IconPicker, {
+        props: { label: "Icon", modelValue: "Calendar" },
+      })
+      expect(wrapper.find("[data-testid='icon-preview']").exists()).toBe(true)
+    })
+
+    it("does not render a preview when value is unknown", () => {
+      const wrapper = mount(IconPicker, {
+        props: { label: "Icon", modelValue: "ThisIconDoesNotExist" },
+      })
+      expect(wrapper.find("[data-testid='icon-preview']").exists()).toBe(false)
+    })
+  })
+
+  describe("state matrix", () => {
+    it("renders help text", () => {
+      const wrapper = mount(IconPicker, {
+        props: { label: "Icon", helpText: "Pick a lucide icon." },
+      })
+      expect(wrapper.text()).toContain("Pick a lucide icon.")
+    })
+
+    it("marks readonly via data attribute", () => {
+      const wrapper = mount(IconPicker, {
+        props: { label: "Icon", readonly: true },
+      })
+      expect(wrapper.html()).toContain("data-readonly")
+    })
+  })
+
+  describe("errors", () => {
+    it("renders errors from props", () => {
+      const wrapper = mount(IconPicker, {
+        props: { label: "Icon", errors: ["Required"] },
+      })
+      expect(wrapper.text()).toContain("Required")
+    })
+  })
+
+  it("works without any props at all", () => {
+    const wrapper = mount(IconPicker)
+    expect(wrapper.find("input").exists()).toBe(true)
+  })
+})

package/src/components/compositions/elements/picker/IconPicker.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+/**
+ * Props-driven icon picker composition. Searchable combobox over a
+ * curated subset of lucide icon names. The selected value is the icon's
+ * PascalCase name (e.g. `"Calendar"`); the currently-selected icon is
+ * rendered as a live preview alongside the combobox input.
+ *
+ *   <IconPicker v-model="icon" label="Icon" />
+ */
+import { computed, h, ref } from "vue"
+import * as LucideIcons from "lucide-vue-next"
+import type { Component } from "vue"
+import {
+  Combobox,
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+} from "@/components/ui/combobox"
+import { FieldFrame } from "@/components/ui/field-frame"
+
+export interface IconPickerProps {
+  modelValue?: string | null
+  id?: string
+  name?: string
+  label?: string
+  hideLabel?: boolean
+  placeholder?: string
+  required?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  helpText?: string
+  errors?: string[]
+}
+
+withDefaults(defineProps<IconPickerProps>(), {
+  errors: () => [],
+})
+
+const model = defineModel<string | null>("modelValue")
+
+const query = ref<string>("")
+
+/**
+ * A small curated subset of lucide icon names. We don't enumerate the
+ * whole 1.4k+ set because we render the preview component eagerly and
+ * Storybook bundles every story.
+ */
+const ICON_NAMES = [
+  "Activity",
+  "AlertCircle",
+  "Archive",
+  "Bell",
+  "Bookmark",
+  "Briefcase",
+  "Calendar",
+  "Camera",
+  "Check",
+  "ChevronRight",
+  "Clock",
+  "Cloud",
+  "Code",
+  "Copy",
+  "Database",
+  "Download",
+  "Edit",
+  "Eye",
+  "Facebook",
+  "File",
+  "FileText",
+  "Filter",
+  "Flag",
+  "Folder",
+  "Gift",
+  "Globe",
+  "Heart",
+  "Home",
+  "Image",
+  "Inbox",
+  "Info",
+  "Layers",
+  "Link",
+  "Lock",
+  "LogIn",
+  "LogOut",
+  "Mail",
+  "MapPin",
+  "Menu",
+  "MessageSquare",
+  "Mic",
+  "Monitor",
+  "Moon",
+  "Music",
+  "Paperclip",
+  "Pause",
+  "Phone",
+  "PieChart",
+  "Play",
+  "Plus",
+  "Power",
+  "Printer",
+  "RefreshCw",
+  "Save",
+  "Search",
+  "Send",
+  "Settings",
+  "Share",
+  "ShieldCheck",
+  "ShoppingCart",
+  "Star",
+  "Sun",
+  "Tag",
+  "Trash",
+  "Twitter",
+  "Upload",
+  "User",
+  "Video",
+  "Wifi",
+  "Wrench",
+  "X",
+  "Zap",
+] as const
+
+const filtered = computed<readonly string[]>(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) {
+    return ICON_NAMES
+  }
+  return ICON_NAMES.filter((name) => name.toLowerCase().includes(q))
+})
+
+function resolveIcon(name: string): Component | undefined {
+  if (!name) {
+    return undefined
+  }
+  const registry = LucideIcons as unknown as Record<
+    string,
+    Component | undefined
+  >
+  return registry[name]
+}
+
+const previewIcon = computed<Component | undefined>(() =>
+  resolveIcon(model.value ?? ""),
+)
+
+function renderIcon(name: string) {
+  const icon = resolveIcon(name)
+  return icon ? h(icon, { class: "size-4" }) : null
+}
+
+function onSelect(value: unknown): void {
+  model.value = typeof value === "string" ? value : ""
+}
+</script>
+
+<template>
+  <FieldFrame
+    :label="label"
+    :required="required"
+    :hide-label="hideLabel"
+    :for="id"
+    :help-text="helpText"
+    :errors="errors"
+  >
+    <Combobox
+      :model-value="model ?? ''"
+      :disabled="disabled"
+      @update:model-value="onSelect"
+    >
+      <ComboboxAnchor
+        :data-element-name="name ?? undefined"
+        :data-readonly="readonly || undefined"
+      >
+        <component
+          :is="previewIcon"
+          v-if="previewIcon"
+          class="mr-2 size-4 shrink-0"
+          data-testid="icon-preview"
+        />
+        <ComboboxInput
+          v-model="query"
+          :placeholder="placeholder ?? 'Search icons…'"
+          :readonly="readonly"
+          :required="required"
+        />
+      </ComboboxAnchor>
+      <ComboboxContent>
+        <ComboboxEmpty>No icons match.</ComboboxEmpty>
+        <ComboboxItem v-for="iconName in filtered" :key="iconName" :value="iconName">
+          <ComboboxItemIndicator />
+          <component :is="renderIcon(iconName)" />
+          <span class="ml-2">{{ iconName }}</span>
+        </ComboboxItem>
+      </ComboboxContent>
+    </Combobox>
+  </FieldFrame>
+</template>

package/src/components/compositions/elements/picker/IntegrationConnectorPicker.stories.ts

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Connector } from "@/definitions/shared/connector"
+import IntegrationConnectorPicker from "./IntegrationConnectorPicker.vue"
+
+const CONNECTORS: Connector[] = [
+  {
+    id: "slack-1",
+    label: "Slack — Eng",
+    icon: "slack",
+    type: "slack",
+    status: "connected",
+  },
+  {
+    id: "sf-1",
+    label: "Salesforce Prod",
+    icon: "cloud",
+    type: "salesforce",
+    status: "disconnected",
+  },
+  {
+    id: "gh-1",
+    label: "GitHub",
+    icon: "github",
+    type: "github",
+    status: "error",
+  },
+  {
+    id: "stripe-1",
+    label: "Stripe Live",
+    icon: "credit-card",
+    type: "stripe",
+    status: "connected",
+  },
+]
+
+function mockLoad(delay = 400): () => Promise<Connector[]> {
+  return () =>
+    new Promise((resolve) => {
+      setTimeout(() => resolve(CONNECTORS), delay)
+    })
+}
+
+function mockLoadError(): () => Promise<Connector[]> {
+  return () =>
+    new Promise((_, reject) => {
+      setTimeout(() => reject(new Error("simulated failure")), 400)
+    })
+}
+
+function mockConnect(delay = 500): (id: string) => Promise<void> {
+  return () =>
+    new Promise((resolve) => {
+      setTimeout(resolve, delay)
+    })
+}
+
+const meta = {
+  title: "Compositions/Elements/Picker/IntegrationConnectorPicker",
+  component: IntegrationConnectorPicker,
+  tags: ["autodocs"],
+  args: {
+    label: "Connector",
+    onLoadConnectors: mockLoad(),
+  },
+  decorators: [
+    () => ({
+      template: '<div class="w-96 p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof IntegrationConnectorPicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { label: "Connector", onLoadConnectors: mockLoad() },
+}
+
+export const WithSelectedValue: Story = {
+  args: {
+    label: "Connector",
+    modelValue: "slack-1",
+    onLoadConnectors: mockLoad(),
+  },
+}
+
+export const WithErrors: Story = {
+  args: {
+    label: "Connector",
+    onLoadConnectors: mockLoadError(),
+    errorText: "Could not load connectors. Please retry.",
+  },
+}
+
+export const Disabled: Story = {
+  args: { label: "Disabled", disabled: true, onLoadConnectors: mockLoad() },
+}
+
+export const WithOnConnect: Story = {
+  args: {
+    label: "Connector",
+    onLoadConnectors: mockLoad(),
+    onConnect: mockConnect(),
+    helpText: "Non-connected rows expose a Connect / Reconnect action.",
+  },
+}
+
+export const Showcase: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { IntegrationConnectorPicker },
+    setup() {
+      return {
+        load: mockLoad(),
+        loadFail: mockLoadError(),
+        connect: mockConnect(),
+      }
+    },
+    template: `
+      <div class="flex flex-col gap-4 max-w-md">
+        <IntegrationConnectorPicker label="Default" :on-load-connectors="load" />
+        <IntegrationConnectorPicker
+          label="With selected value"
+          model-value="slack-1"
+          :on-load-connectors="load"
+        />
+        <IntegrationConnectorPicker
+          label="With onConnect"
+          :on-load-connectors="load"
+          :on-connect="connect"
+        />
+        <IntegrationConnectorPicker
+          label="Error path"
+          :on-load-connectors="loadFail"
+        />
+        <IntegrationConnectorPicker
+          label="Disabled"
+          disabled
+          :on-load-connectors="load"
+        />
+      </div>
+    `,
+  }),
+}