@gxp-dev/app-ui 0.1.0

package/src/components/ui/form/Form.stories.ts

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import * as z from 'zod'
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '.'
+import { Form, Field as FormField } from 'vee-validate'
+import { Input } from '../input'
+import { Button } from '../button'
+
+const meta = {
+  title: 'UI/Form',
+  component: FormItem,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FormItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: {
+      Form,
+      FormField,
+      FormItem,
+      FormLabel,
+      FormControl,
+      FormDescription,
+      FormMessage,
+      Input,
+      Button,
+    },
+    setup() {
+      const formSchema = toTypedSchema(
+        z.object({
+          username: z.string().min(2, { message: 'Username must be at least 2 characters.' }),
+          email: z.string().email({ message: 'Please enter a valid email address.' }),
+        }),
+      )
+      const form = useForm({
+        validationSchema: formSchema,
+      })
+      const onSubmit = form.handleSubmit((values) => {
+        console.log('Form submitted:', values)
+      })
+      return { onSubmit }
+    },
+    template: `
+      <form @submit="onSubmit" class="w-full max-w-sm space-y-6">
+        <FormField v-slot="{ componentField }" name="username">
+          <FormItem>
+            <FormLabel>Username</FormLabel>
+            <FormControl>
+              <Input placeholder="Enter your username" v-bind="componentField" />
+            </FormControl>
+            <FormDescription>This is your public display name.</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+        <FormField v-slot="{ componentField }" name="email">
+          <FormItem>
+            <FormLabel>Email</FormLabel>
+            <FormControl>
+              <Input type="email" placeholder="Enter your email" v-bind="componentField" />
+            </FormControl>
+            <FormDescription>We will never share your email.</FormDescription>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+        <Button type="submit">Submit</Button>
+      </form>
+    `,
+  }),
+}
+
+export const Showcase: Story = {
+  name: 'Showcase',
+  render: () => ({
+    components: {
+      Form,
+      FormField,
+      FormItem,
+      FormLabel,
+      FormControl,
+      FormDescription,
+      FormMessage,
+      Input,
+      Button,
+    },
+    setup() {
+      const formSchema = toTypedSchema(
+        z.object({
+          firstName: z.string().min(1, { message: 'First name is required.' }),
+          lastName: z.string().min(1, { message: 'Last name is required.' }),
+          email: z.string().email({ message: 'Invalid email address.' }),
+        }),
+      )
+      const form = useForm({
+        validationSchema: formSchema,
+      })
+      const onSubmit = form.handleSubmit((values) => {
+        console.log('Form submitted:', values)
+      })
+      return { onSubmit }
+    },
+    template: `
+      <div class="space-y-8">
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-white">Registration Form</h3>
+          <form @submit="onSubmit" class="w-full max-w-sm space-y-6">
+            <FormField v-slot="{ componentField }" name="firstName">
+              <FormItem>
+                <FormLabel>First Name</FormLabel>
+                <FormControl>
+                  <Input placeholder="John" v-bind="componentField" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+            <FormField v-slot="{ componentField }" name="lastName">
+              <FormItem>
+                <FormLabel>Last Name</FormLabel>
+                <FormControl>
+                  <Input placeholder="Doe" v-bind="componentField" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+            <FormField v-slot="{ componentField }" name="email">
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input type="email" placeholder="john@example.com" v-bind="componentField" />
+                </FormControl>
+                <FormDescription>Your primary contact email.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+            <Button type="submit">Register</Button>
+          </form>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/components/ui/form/Form.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { FormItem } from '.'
+
+describe('Form', () => {
+  describe('FormItem', () => {
+    it('renders as a div element', () => {
+      const wrapper = mount(FormItem, {
+        slots: { default: 'Item content' },
+      })
+      expect(wrapper.element.tagName).toBe('DIV')
+    })
+
+    it('renders slot content', () => {
+      const wrapper = mount(FormItem, {
+        slots: { default: 'Item content' },
+      })
+      expect(wrapper.text()).toBe('Item content')
+    })
+
+    it('has correct base classes', () => {
+      const wrapper = mount(FormItem, {
+        slots: { default: 'content' },
+      })
+      expect(wrapper.classes()).toContain('space-y-2')
+    })
+
+    it('accepts custom class', () => {
+      const wrapper = mount(FormItem, {
+        props: { class: 'custom-item' },
+        slots: { default: 'content' },
+      })
+      expect(wrapper.classes()).toContain('custom-item')
+      expect(wrapper.classes()).toContain('space-y-2')
+    })
+
+    it('renders HTML slot content', () => {
+      const wrapper = mount(FormItem, {
+        slots: { default: '<label class="my-label">Field</label><input />' },
+      })
+      expect(wrapper.find('.my-label').exists()).toBe(true)
+      expect(wrapper.find('input').exists()).toBe(true)
+    })
+  })
+})

package/src/components/ui/form/FormControl.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { Slot } from "reka-ui"
+import { useFormField } from "./useFormField"
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>

package/src/components/ui/form/FormDescription.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { useFormField } from "./useFormField"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </p>
+</template>

package/src/components/ui/form/FormItem.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { useId } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/form/FormLabel.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Label } from '@/components/ui/label'
+import { useFormField } from "./useFormField"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    :class="cn(
+      error && 'text-destructive',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>

package/src/components/ui/form/FormMessage.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { ErrorMessage } from "vee-validate"
+import { toValue } from "vue"
+import { useFormField } from "./useFormField"
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    as="p"
+    :name="toValue(name)"
+    class="text-sm font-medium text-destructive"
+  />
+</template>

package/src/components/ui/form/index.ts

@@ -0,0 +1,12 @@
+/**
+ * vee-validate-backed form scaffolding: `FormField`, `FormItem`,
+ * `FormLabel`, `FormControl`, `FormDescription`, `FormMessage`. Use with
+ * a Zod schema for typed validation.
+ */
+export { default as FormControl } from "./FormControl.vue"
+export { default as FormDescription } from "./FormDescription.vue"
+export { default as FormItem } from "./FormItem.vue"
+export { default as FormLabel } from "./FormLabel.vue"
+export { default as FormMessage } from "./FormMessage.vue"
+export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+export { Form, Field as FormField } from "vee-validate"

package/src/components/ui/form/injectionKeys.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from "vue"
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>

package/src/components/ui/form/useFormField.ts

@@ -0,0 +1,30 @@
+import { FieldContextKey } from "vee-validate"
+import { computed, inject } from "vue"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+  if (!fieldContext)
+    throw new Error("useFormField should be used within <FormField>")
+
+  const { name, errorMessage: error, meta } = fieldContext
+  const id = fieldItemContext
+
+  const fieldState = {
+    valid: computed(() => meta.valid),
+    isDirty: computed(() => meta.dirty),
+    isTouched: computed(() => meta.touched),
+    error,
+  }
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}

package/src/components/ui/hover-card/HoverCard.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '.'
+import { Button } from '../button'
+
+const meta = {
+  title: 'UI/HoverCard',
+  component: HoverCard,
+  tags: ['autodocs'],
+} satisfies Meta<typeof HoverCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: {
+      HoverCard,
+      HoverCardContent,
+      HoverCardTrigger,
+      Button,
+    },
+    template: `
+      <HoverCard>
+        <HoverCardTrigger as-child>
+          <Button variant="link">@vue</Button>
+        </HoverCardTrigger>
+        <HoverCardContent class="w-80">
+          <div class="flex justify-between space-x-4">
+            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-muted text-sm font-semibold">
+              V
+            </div>
+            <div class="space-y-1">
+              <h4 class="text-sm font-semibold">@vue</h4>
+              <p class="text-sm">
+                The Progressive JavaScript Framework. Approachable, performant, and versatile.
+              </p>
+              <div class="flex items-center pt-2">
+                <span class="text-xs text-muted-foreground">
+                  Joined December 2013
+                </span>
+              </div>
+            </div>
+          </div>
+        </HoverCardContent>
+      </HoverCard>
+    `,
+  }),
+}

package/src/components/ui/hover-card/HoverCard.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '.'
+
+describe('HoverCard', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders without errors', () => {
+    const wrapper = mount(HoverCard, {
+      slots: { default: 'content' },
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('renders trigger content', () => {
+    const wrapper = mount(HoverCard, {
+      slots: {
+        default: () =>
+          h(HoverCardTrigger, { asChild: true }, {
+            default: () => h('a', { href: '#', class: 'trigger-link' }, 'Hover me'),
+          }),
+      },
+    })
+    expect(wrapper.find('.trigger-link').exists()).toBe(true)
+    expect(wrapper.find('.trigger-link').text()).toBe('Hover me')
+    wrapper.unmount()
+  })
+
+  describe('HoverCard with open content', () => {
+    it('renders content in portal when open', async () => {
+      const wrapper = mount(HoverCard, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () => [
+            h(HoverCardTrigger, { asChild: true }, {
+              default: () => h('a', { href: '#' }, '@shadcn'),
+            }),
+            h(HoverCardContent, null, {
+              default: () => h('div', { class: 'card-body' }, 'Card content here'),
+            }),
+          ],
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      const cardBody = document.body.querySelector('.card-body')
+      expect(cardBody).toBeTruthy()
+      expect(cardBody?.textContent).toBe('Card content here')
+
+      wrapper.unmount()
+    })
+
+    it('renders HoverCardContent with correct base classes', async () => {
+      const wrapper = mount(HoverCard, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () => [
+            h(HoverCardTrigger, { asChild: true }, {
+              default: () => h('a', { href: '#' }, 'Trigger'),
+            }),
+            h(HoverCardContent, null, {
+              default: () => 'Content',
+            }),
+          ],
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      // HoverCardContent is rendered inside a reka popper wrapper
+      const content = document.body.querySelector('[data-reka-popper-content-wrapper] > div')
+      expect(content).toBeTruthy()
+      expect(content?.className).toContain('z-50')
+      expect(content?.className).toContain('w-64')
+      expect(content?.className).toContain('rounded-md')
+      expect(content?.className).toContain('border')
+      expect(content?.className).toContain('bg-popover')
+      expect(content?.className).toContain('p-4')
+      expect(content?.className).toContain('text-popover-foreground')
+      expect(content?.className).toContain('shadow-md')
+      expect(content?.className).toContain('outline-none')
+
+      wrapper.unmount()
+    })
+
+    it('renders full hover card structure', async () => {
+      const wrapper = mount(HoverCard, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () => [
+            h(HoverCardTrigger, { asChild: true }, {
+              default: () => h('a', { href: '#' }, '@vue'),
+            }),
+            h(HoverCardContent, null, {
+              default: () => [
+                h('div', { class: 'flex justify-between space-x-4' }, [
+                  h('div', { class: 'space-y-1' }, [
+                    h('h4', { class: 'text-sm font-semibold' }, '@vue'),
+                    h('p', { class: 'text-sm' }, 'The Progressive JavaScript Framework.'),
+                  ]),
+                ]),
+              ],
+            }),
+          ],
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      expect(document.body.textContent).toContain('@vue')
+      expect(document.body.textContent).toContain('The Progressive JavaScript Framework.')
+
+      wrapper.unmount()
+    })
+  })
+})

package/src/components/ui/hover-card/HoverCard.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/**
+ * Tooltip-style floating panel triggered by hover, but with richer
+ * content than `Tooltip` (avatars, badges, mini-cards). Use for
+ * non-essential supplementary detail.
+ */
+
+import type { HoverCardRootEmits, HoverCardRootProps } from "reka-ui"
+import { HoverCardRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot />
+  </HoverCardRoot>
+</template>

package/src/components/ui/hover-card/HoverCardContent.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  HoverCardContent,
+  HoverCardPortal,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>

package/src/components/ui/hover-card/HoverCardTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HoverCardTriggerProps } from "reka-ui"
+import { HoverCardTrigger } from "reka-ui"
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>

package/src/components/ui/hover-card/index.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard } from "./HoverCard.vue"
+export { default as HoverCardContent } from "./HoverCardContent.vue"
+export { default as HoverCardTrigger } from "./HoverCardTrigger.vue"