@gxp-dev/mod-ui 2.0.0

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

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * Props-driven time picker composition. Two numeric inputs (hours /
+ * minutes) with a leading clock icon. Round-trips an `HH:mm` string.
+ * `minuteStep` is applied to the minute input's `step` attribute.
+ *
+ *   <TimePicker v-model="opensAt" label="Opens at" />
+ */
+import { computed, ref, watchEffect } from "vue"
+import { Clock } from "lucide-vue-next"
+import { Input } from "@/components/ui/input"
+import { FieldFrame } from "@/components/ui/field-frame"
+
+export interface TimePickerProps {
+  modelValue?: string | null
+  id?: string
+  name?: string
+  label?: string
+  hideLabel?: boolean
+  required?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  helpText?: string
+  errors?: string[]
+  minuteStep?: number
+}
+
+const props = withDefaults(defineProps<TimePickerProps>(), {
+  errors: () => [],
+})
+
+const model = defineModel<string | null>("modelValue")
+
+const hour = ref<string>("")
+const minute = ref<string>("")
+
+watchEffect(() => {
+  const value = model.value
+  if (!value) {
+    hour.value = ""
+    minute.value = ""
+    return
+  }
+  const [hh, mm] = value.split(":")
+  hour.value = hh ?? ""
+  minute.value = (mm ?? "").slice(0, 2)
+})
+
+function pad(value: string): string {
+  const n = Math.max(0, parseInt(value, 10) || 0)
+  return n.toString().padStart(2, "0")
+}
+
+function emitCombined(): void {
+  if (hour.value === "" && minute.value === "") {
+    model.value = ""
+    return
+  }
+  model.value = `${pad(hour.value || "0")}:${pad(minute.value || "0")}`
+}
+
+function onHourInput(value: string | number | undefined): void {
+  const next = String(value ?? "")
+  const numeric = Math.min(23, Math.max(0, parseInt(next, 10) || 0))
+  hour.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))
+  minute.value = numeric.toString()
+  emitCombined()
+}
+
+const step = computed<number>(() => {
+  const raw = props.minuteStep
+  return typeof raw === "number" && raw > 0 ? raw : 1
+})
+</script>
+
+<template>
+  <FieldFrame
+    :label="label"
+    :required="required"
+    :hide-label="hideLabel"
+    :for="id"
+    :help-text="helpText"
+    :errors="errors"
+  >
+    <div
+      class="flex items-center gap-2"
+      :data-element-name="name ?? undefined"
+    >
+      <Clock class="size-4 text-muted-foreground" />
+      <Input
+        type="number"
+        min="0"
+        max="23"
+        step="1"
+        :model-value="hour"
+        class="w-20"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        placeholder="HH"
+        data-testid="time-hour"
+        @update:model-value="onHourInput"
+      />
+      <span class="text-muted-foreground">:</span>
+      <Input
+        type="number"
+        min="0"
+        max="59"
+        :step="step"
+        :model-value="minute"
+        class="w-20"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        placeholder="MM"
+        data-testid="time-minute"
+        @update:model-value="onMinuteInput"
+      />
+    </div>
+  </FieldFrame>
+</template>

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import TimezonePicker from "./TimezonePicker.vue"
+
+const meta = {
+  title: "Compositions/Elements/Picker/TimezonePicker",
+  component: TimezonePicker,
+  tags: ["autodocs"],
+  args: {
+    label: "Timezone",
+  },
+  decorators: [
+    () => ({
+      template: '<div class="w-96 p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof TimezonePicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { label: "Timezone" },
+}
+
+export const WithValue: Story = {
+  args: { label: "Timezone", modelValue: "Europe/London" },
+}
+
+export const Required: Story = {
+  args: { label: "Timezone", required: true },
+}
+
+export const Disabled: Story = {
+  args: { label: "Timezone", disabled: true },
+}
+
+export const WithHelpText: Story = {
+  args: { label: "Timezone", helpText: "Pick an IANA timezone identifier" },
+}

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

@@ -0,0 +1,75 @@
+import { describe, it, expect } from "vitest"
+import { mount } from "@vue/test-utils"
+import TimezonePicker from "./TimezonePicker.vue"
+
+describe("TimezonePicker (props-based composition)", () => {
+  describe("rendering", () => {
+    it("renders the label and combobox input", () => {
+      const wrapper = mount(TimezonePicker, { props: { label: "Timezone" } })
+      expect(wrapper.text()).toContain("Timezone")
+      expect(wrapper.find("input").exists()).toBe(true)
+    })
+
+    it("hides the label when hideLabel is true", () => {
+      const wrapper = mount(TimezonePicker, {
+        props: { label: "Timezone", hideLabel: true },
+      })
+      expect(wrapper.find("[data-testid='field-frame-label']").exists()).toBe(
+        false,
+      )
+    })
+
+    it("uses a custom placeholder when provided", () => {
+      const wrapper = mount(TimezonePicker, {
+        props: { label: "Timezone", placeholder: "Choose tz…" },
+      })
+      expect(wrapper.html()).toContain("Choose tz…")
+    })
+
+    it("marks the label as required", () => {
+      const wrapper = mount(TimezonePicker, {
+        props: { label: "Timezone", required: true },
+      })
+      expect(wrapper.html()).toContain("after:content-['*']")
+    })
+  })
+
+  describe("value binding", () => {
+    it("accepts modelValue as initial selection", () => {
+      const wrapper = mount(TimezonePicker, {
+        props: { label: "Timezone", modelValue: "Europe/London" },
+      })
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe("state matrix", () => {
+    it("flags readonly via data-attribute", () => {
+      const wrapper = mount(TimezonePicker, {
+        props: { label: "Timezone", readonly: true },
+      })
+      expect(wrapper.html()).toContain("data-readonly")
+    })
+
+    it("renders help text", () => {
+      const wrapper = mount(TimezonePicker, {
+        props: { label: "Timezone", helpText: "IANA tz identifier" },
+      })
+      expect(wrapper.text()).toContain("IANA tz identifier")
+    })
+  })
+
+  describe("errors", () => {
+    it("renders errors from props", () => {
+      const wrapper = mount(TimezonePicker, {
+        props: { label: "Timezone", errors: ["Required"] },
+      })
+      expect(wrapper.text()).toContain("Required")
+    })
+  })
+
+  it("works without any props at all", () => {
+    const wrapper = mount(TimezonePicker)
+    expect(wrapper.find("input").exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+/**
+ * Props-driven timezone picker composition. Searchable combobox over
+ * every IANA timezone reported by the runtime (`Intl.supportedValuesOf`).
+ * Falls back to a curated list when `Intl.supportedValuesOf` is missing
+ * (older jsdom).
+ *
+ *   <TimezonePicker v-model="tz" label="Timezone" />
+ */
+import { computed, ref } from "vue"
+import { Globe } from "lucide-vue-next"
+import {
+  Combobox,
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+} from "@/components/ui/combobox"
+import { FieldFrame } from "@/components/ui/field-frame"
+
+export interface TimezonePickerProps {
+  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<TimezonePickerProps>(), {
+  errors: () => [],
+})
+
+const model = defineModel<string | null>("modelValue")
+
+const query = ref<string>("")
+
+const timezones = computed<string[]>(() => {
+  const intl = Intl as unknown as {
+    supportedValuesOf?: (key: string) => string[]
+  }
+  if (typeof intl.supportedValuesOf === "function") {
+    try {
+      return intl.supportedValuesOf("timeZone")
+    } catch {
+      return []
+    }
+  }
+  return [
+    "UTC",
+    "America/New_York",
+    "America/Chicago",
+    "America/Denver",
+    "America/Los_Angeles",
+    "Europe/London",
+    "Europe/Paris",
+    "Europe/Berlin",
+    "Asia/Tokyo",
+    "Asia/Shanghai",
+    "Australia/Sydney",
+  ]
+})
+
+const filtered = computed<string[]>(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) {
+    return timezones.value.slice(0, 200)
+  }
+  return timezones.value
+    .filter((tz) => tz.toLowerCase().includes(q))
+    .slice(0, 200)
+})
+
+function onSelect(value: unknown): void {
+  const next = typeof value === "string" ? value : ""
+  model.value = next
+}
+</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"
+      >
+        <Globe class="mr-2 size-4 shrink-0 opacity-50" />
+        <ComboboxInput
+          v-model="query"
+          :placeholder="placeholder ?? 'Select a timezone…'"
+          :readonly="readonly"
+          :required="required"
+        />
+      </ComboboxAnchor>
+      <ComboboxContent>
+        <ComboboxEmpty>No timezones match.</ComboboxEmpty>
+        <ComboboxItem v-for="tz in filtered" :key="tz" :value="tz">
+          <ComboboxItemIndicator />
+          {{ tz }}
+        </ComboboxItem>
+      </ComboboxContent>
+    </Combobox>
+  </FieldFrame>
+</template>

package/src/components/ui/accordion/Accordion.stories.ts

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "."
+
+const meta = {
+  title: "UI/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Accordion>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  name: "Default (single)",
+  render: () => ({
+    components: { Accordion, AccordionItem, AccordionTrigger, AccordionContent },
+    template: `
+      <Accordion type="single" collapsible default-value="item-1" class="w-96">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Is it accessible?</AccordionTrigger>
+          <AccordionContent>Yes. It uses reka-ui under the hood and follows WAI-ARIA patterns.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Is it styled?</AccordionTrigger>
+          <AccordionContent>Yes. It comes with default styles matching the rest of the kit.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Is it animated?</AccordionTrigger>
+          <AccordionContent>Yes, by default open/close uses CSS animations.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    `,
+  }),
+}
+
+export const Multiple: Story = {
+  name: "Multiple",
+  render: () => ({
+    components: { Accordion, AccordionItem, AccordionTrigger, AccordionContent },
+    template: `
+      <Accordion type="multiple" :default-value="['item-1', 'item-2']" class="w-96">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Section 1</AccordionTrigger>
+          <AccordionContent>Body 1</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Section 2</AccordionTrigger>
+          <AccordionContent>Body 2</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Section 3</AccordionTrigger>
+          <AccordionContent>Body 3</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    `,
+  }),
+}
+
+export const Collapsible: Story = {
+  name: "Collapsible",
+  render: () => ({
+    components: { Accordion, AccordionItem, AccordionTrigger, AccordionContent },
+    template: `
+      <Accordion type="single" collapsible class="w-96">
+        <AccordionItem value="a">
+          <AccordionTrigger>Click me to toggle</AccordionTrigger>
+          <AccordionContent>I can be fully collapsed.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="b">
+          <AccordionTrigger>And me</AccordionTrigger>
+          <AccordionContent>Same here.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  name: "Disabled Item",
+  render: () => ({
+    components: { Accordion, AccordionItem, AccordionTrigger, AccordionContent },
+    template: `
+      <Accordion type="single" collapsible class="w-96">
+        <AccordionItem value="a">
+          <AccordionTrigger>Active</AccordionTrigger>
+          <AccordionContent>Open me.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="b" disabled>
+          <AccordionTrigger>Disabled</AccordionTrigger>
+          <AccordionContent>Should not open.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    `,
+  }),
+}
+
+export const Showcase: Story = {
+  name: "Showcase",
+  render: () => ({
+    components: { Accordion, AccordionItem, AccordionTrigger, AccordionContent },
+    template: `
+      <div class="space-y-8">
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Single</h3>
+          <Accordion type="single" collapsible default-value="s1" class="w-96">
+            <AccordionItem value="s1">
+              <AccordionTrigger>First</AccordionTrigger>
+              <AccordionContent>First body.</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="s2">
+              <AccordionTrigger>Second</AccordionTrigger>
+              <AccordionContent>Second body.</AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </section>
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Multiple</h3>
+          <Accordion type="multiple" :default-value="['m1', 'm2']" class="w-96">
+            <AccordionItem value="m1">
+              <AccordionTrigger>Multi 1</AccordionTrigger>
+              <AccordionContent>Body 1</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="m2">
+              <AccordionTrigger>Multi 2</AccordionTrigger>
+              <AccordionContent>Body 2</AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </section>
+      </div>
+    `,
+  }),
+}