@gxp-dev/app-ui 0.1.0

package/src/components/ui/button/Button.test.ts

@@ -0,0 +1,307 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import { Button } from '.'
+
+describe('Button', () => {
+  describe('default rendering', () => {
+    it('renders with default variant and size', () => {
+      const wrapper = mount(Button, {
+        slots: { default: 'Click me' }
+      })
+      expect(wrapper.text()).toBe('Click me')
+      // Default variant classes
+      expect(wrapper.classes()).toContain('bg-primary')
+      expect(wrapper.classes()).toContain('text-primary-foreground')
+      // Default size classes
+      expect(wrapper.classes()).toContain('h-10')
+      expect(wrapper.classes()).toContain('px-4')
+      expect(wrapper.classes()).toContain('py-2')
+    })
+
+    it('renders as a button element by default', () => {
+      const wrapper = mount(Button, {
+        slots: { default: 'Click me' }
+      })
+      expect(wrapper.element.tagName).toBe('BUTTON')
+    })
+  })
+
+  describe('variants', () => {
+    it('renders default variant', () => {
+      const wrapper = mount(Button, {
+        props: { variant: 'default' },
+        slots: { default: 'Default' }
+      })
+      expect(wrapper.classes()).toContain('bg-primary')
+      expect(wrapper.classes()).toContain('text-primary-foreground')
+    })
+
+    it('renders secondary variant', () => {
+      const wrapper = mount(Button, {
+        props: { variant: 'secondary' },
+        slots: { default: 'Secondary' }
+      })
+      expect(wrapper.classes()).toContain('bg-secondary')
+      expect(wrapper.classes()).toContain('text-secondary-foreground')
+    })
+
+    it('renders destructive variant', () => {
+      const wrapper = mount(Button, {
+        props: { variant: 'destructive' },
+        slots: { default: 'Destructive' }
+      })
+      expect(wrapper.classes()).toContain('bg-destructive')
+      expect(wrapper.classes()).toContain('text-destructive-foreground')
+    })
+
+    it('renders outline variant', () => {
+      const wrapper = mount(Button, {
+        props: { variant: 'outline' },
+        slots: { default: 'Outline' }
+      })
+      expect(wrapper.classes()).toContain('border')
+      expect(wrapper.classes()).toContain('border-input')
+      expect(wrapper.classes()).toContain('bg-background')
+    })
+
+    it('renders ghost variant', () => {
+      const wrapper = mount(Button, {
+        props: { variant: 'ghost' },
+        slots: { default: 'Ghost' }
+      })
+      expect(wrapper.classes()).toContain('hover:bg-accent')
+      expect(wrapper.classes()).toContain('hover:text-accent-foreground')
+      // Ghost should NOT have bg-primary
+      expect(wrapper.classes()).not.toContain('bg-primary')
+    })
+
+    it('renders link variant', () => {
+      const wrapper = mount(Button, {
+        props: { variant: 'link' },
+        slots: { default: 'Link' }
+      })
+      expect(wrapper.classes()).toContain('text-primary')
+      expect(wrapper.classes()).toContain('underline-offset-4')
+      expect(wrapper.classes()).toContain('hover:underline')
+    })
+  })
+
+  describe('sizes', () => {
+    it('renders default size', () => {
+      const wrapper = mount(Button, {
+        props: { size: 'default' },
+        slots: { default: 'Default' }
+      })
+      expect(wrapper.classes()).toContain('h-10')
+      expect(wrapper.classes()).toContain('px-4')
+      expect(wrapper.classes()).toContain('py-2')
+    })
+
+    it('renders sm size', () => {
+      const wrapper = mount(Button, {
+        props: { size: 'sm' },
+        slots: { default: 'Small' }
+      })
+      expect(wrapper.classes()).toContain('h-9')
+      expect(wrapper.classes()).toContain('px-3')
+    })
+
+    it('renders lg size', () => {
+      const wrapper = mount(Button, {
+        props: { size: 'lg' },
+        slots: { default: 'Large' }
+      })
+      expect(wrapper.classes()).toContain('h-11')
+      expect(wrapper.classes()).toContain('px-8')
+    })
+
+    it('renders icon size', () => {
+      const wrapper = mount(Button, {
+        props: { size: 'icon' },
+        slots: { default: '+' }
+      })
+      expect(wrapper.classes()).toContain('h-10')
+      expect(wrapper.classes()).toContain('w-10')
+    })
+  })
+
+  describe('custom class', () => {
+    it('accepts custom class via class prop', () => {
+      const wrapper = mount(Button, {
+        props: { class: 'custom-class' },
+        slots: { default: 'Custom' }
+      })
+      expect(wrapper.classes()).toContain('custom-class')
+    })
+
+    it('merges custom classes with default classes', () => {
+      const wrapper = mount(Button, {
+        props: { class: 'my-custom-class' },
+        slots: { default: 'Merged' }
+      })
+      // Should have both default and custom classes
+      expect(wrapper.classes()).toContain('my-custom-class')
+      expect(wrapper.classes()).toContain('bg-primary')
+      expect(wrapper.classes()).toContain('inline-flex')
+    })
+
+    it('allows overriding default classes with custom classes', () => {
+      const wrapper = mount(Button, {
+        props: { class: 'bg-blue-500' },
+        slots: { default: 'Override' }
+      })
+      // Custom class should be present
+      expect(wrapper.classes()).toContain('bg-blue-500')
+    })
+  })
+
+  describe('slot content', () => {
+    it('renders text slot content', () => {
+      const wrapper = mount(Button, {
+        slots: { default: 'Button Text' }
+      })
+      expect(wrapper.text()).toBe('Button Text')
+    })
+
+    it('renders HTML slot content', () => {
+      const wrapper = mount(Button, {
+        slots: { default: '<span class="icon">+</span> Add' }
+      })
+      expect(wrapper.find('.icon').exists()).toBe(true)
+      expect(wrapper.text()).toContain('Add')
+    })
+
+    it('renders component slot content', () => {
+      const IconComponent = {
+        template: '<svg class="test-icon"></svg>'
+      }
+      const wrapper = mount(Button, {
+        slots: { default: h(IconComponent) }
+      })
+      expect(wrapper.find('.test-icon').exists()).toBe(true)
+    })
+
+    it('renders empty button when no slot content provided', () => {
+      const wrapper = mount(Button)
+      expect(wrapper.text()).toBe('')
+    })
+  })
+
+  describe('asChild prop', () => {
+    it('renders as button when asChild is false (default)', () => {
+      const wrapper = mount(Button, {
+        props: { asChild: false },
+        slots: { default: 'Button' }
+      })
+      expect(wrapper.element.tagName).toBe('BUTTON')
+    })
+
+    it('works with asChild prop for custom element rendering', () => {
+      const wrapper = mount(Button, {
+        props: { asChild: true },
+        slots: {
+          default: h('a', { href: '/test', class: 'child-link' }, 'Link Button')
+        }
+      })
+      // When asChild is true, the child element should be rendered directly
+      expect(wrapper.find('a').exists()).toBe(true)
+      expect(wrapper.find('a').attributes('href')).toBe('/test')
+    })
+
+    it('passes button styles to child element when asChild is true', () => {
+      const wrapper = mount(Button, {
+        props: { asChild: true, variant: 'secondary' },
+        slots: {
+          default: h('a', { href: '/test' }, 'Styled Link')
+        }
+      })
+      const link = wrapper.find('a')
+      expect(link.exists()).toBe(true)
+      expect(link.classes()).toContain('bg-secondary')
+    })
+  })
+
+  describe('as prop', () => {
+    it('renders as different element using as prop', () => {
+      const wrapper = mount(Button, {
+        props: { as: 'a' },
+        attrs: { href: '/test' },
+        slots: { default: 'Link' }
+      })
+      expect(wrapper.element.tagName).toBe('A')
+      expect(wrapper.attributes('href')).toBe('/test')
+    })
+
+    it('renders as div when specified', () => {
+      const wrapper = mount(Button, {
+        props: { as: 'div' },
+        slots: { default: 'Div Button' }
+      })
+      expect(wrapper.element.tagName).toBe('DIV')
+    })
+  })
+
+  describe('base styles', () => {
+    it('has correct base styling classes', () => {
+      const wrapper = mount(Button, {
+        slots: { default: 'Base' }
+      })
+      expect(wrapper.classes()).toContain('inline-flex')
+      expect(wrapper.classes()).toContain('items-center')
+      expect(wrapper.classes()).toContain('justify-center')
+      expect(wrapper.classes()).toContain('rounded-md')
+      expect(wrapper.classes()).toContain('text-sm')
+      expect(wrapper.classes()).toContain('font-medium')
+    })
+
+    it('has focus-visible styles', () => {
+      const wrapper = mount(Button, {
+        slots: { default: 'Focus' }
+      })
+      expect(wrapper.classes()).toContain('focus-visible:outline-none')
+      expect(wrapper.classes()).toContain('focus-visible:ring-2')
+      expect(wrapper.classes()).toContain('focus-visible:ring-ring')
+    })
+
+    it('has disabled styles', () => {
+      const wrapper = mount(Button, {
+        slots: { default: 'Disabled' }
+      })
+      expect(wrapper.classes()).toContain('disabled:pointer-events-none')
+      expect(wrapper.classes()).toContain('disabled:opacity-50')
+    })
+  })
+
+  describe('variant and size combinations', () => {
+    it('renders with secondary variant and sm size', () => {
+      const wrapper = mount(Button, {
+        props: { variant: 'secondary', size: 'sm' },
+        slots: { default: 'Secondary Small' }
+      })
+      expect(wrapper.classes()).toContain('bg-secondary')
+      expect(wrapper.classes()).toContain('h-9')
+      expect(wrapper.classes()).toContain('px-3')
+    })
+
+    it('renders with destructive variant and lg size', () => {
+      const wrapper = mount(Button, {
+        props: { variant: 'destructive', size: 'lg' },
+        slots: { default: 'Destructive Large' }
+      })
+      expect(wrapper.classes()).toContain('bg-destructive')
+      expect(wrapper.classes()).toContain('h-11')
+      expect(wrapper.classes()).toContain('px-8')
+    })
+
+    it('renders with outline variant and icon size', () => {
+      const wrapper = mount(Button, {
+        props: { variant: 'outline', size: 'icon' },
+        slots: { default: '+' }
+      })
+      expect(wrapper.classes()).toContain('border')
+      expect(wrapper.classes()).toContain('h-10')
+      expect(wrapper.classes()).toContain('w-10')
+    })
+  })
+})

package/src/components/ui/button/Button.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/**
+ * Primary clickable action element with `default` / `destructive` /
+ * `outline` / `secondary` / `ghost` / `link` variants and three size
+ * presets. Built on reka-ui's `Primitive` so it can render as any tag
+ * via the `as` prop.
+ */
+
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,37 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-10 px-4 py-2",
+        "sm": "h-9 rounded-md px-3",
+        "lg": "h-11 rounded-md px-8",
+        "icon": "h-10 w-10",
+        "icon-sm": "size-9",
+        "icon-lg": "size-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/src/components/ui/calendar/Calendar.stories.ts

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import { Calendar } from '.'
+import { CalendarDate } from '@internationalized/date'
+
+const meta = {
+  title: 'UI/Calendar',
+  component: Calendar,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Calendar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { Calendar },
+    template: `
+      <Calendar class="rounded-md border" />
+    `,
+  }),
+}
+
+export const WithSelectedDate: Story = {
+  name: 'With Selected Date',
+  render: () => ({
+    components: { Calendar },
+    setup() {
+      const value = ref(new CalendarDate(2025, 1, 15))
+      return { value }
+    },
+    template: `
+      <Calendar v-model="value" class="rounded-md border" />
+    `,
+  }),
+}
+
+export const Showcase: Story = {
+  name: 'Showcase',
+  render: () => ({
+    components: { Calendar },
+    setup() {
+      const selectedDate = ref(new CalendarDate(2025, 6, 10))
+      return { selectedDate }
+    },
+    template: `
+      <div class="space-y-8">
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-white">Default Calendar</h3>
+          <Calendar class="rounded-md border" />
+        </div>
+
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-white">With Pre-selected Date</h3>
+          <Calendar v-model="selectedDate" class="rounded-md border" />
+        </div>
+
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-white">Fixed Weeks</h3>
+          <Calendar :fixed-weeks="true" class="rounded-md border" />
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/components/ui/calendar/Calendar.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { Calendar } from '.'
+
+describe('Calendar', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Calendar)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('has p-3 class on the root element', () => {
+    const wrapper = mount(Calendar)
+    const root = wrapper.find('[data-reka-calendar-root]')
+      ?? wrapper.element
+    expect(wrapper.html()).toContain('p-3')
+  })
+
+  it('renders a calendar grid with table element', () => {
+    const wrapper = mount(Calendar)
+    const table = wrapper.find('table')
+    expect(table.exists()).toBe(true)
+  })
+
+  it('renders navigation buttons', () => {
+    const wrapper = mount(Calendar)
+    const buttons = wrapper.findAll('button')
+    // At minimum there should be prev/next nav buttons plus day cells
+    expect(buttons.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('renders weekday head cells', () => {
+    const wrapper = mount(Calendar)
+    const headCells = wrapper.findAll('th')
+    // 7 days of the week
+    expect(headCells.length).toBe(7)
+  })
+
+  it('renders chevron icons in navigation buttons', () => {
+    const wrapper = mount(Calendar)
+    const svgs = wrapper.findAll('svg')
+    // prev and next buttons each have an svg icon
+    expect(svgs.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('renders a heading with month/year text', () => {
+    const wrapper = mount(Calendar)
+    // The heading should contain some text (month name and/or year)
+    const heading = wrapper.find('[data-reka-calendar-heading]')
+    if (heading.exists()) {
+      expect(heading.text().length).toBeGreaterThan(0)
+    } else {
+      // Fallback: the calendar HTML should contain current month text
+      expect(wrapper.text().length).toBeGreaterThan(0)
+    }
+  })
+
+  it('accepts custom class prop', () => {
+    const wrapper = mount(Calendar, {
+      props: { class: 'custom-calendar' },
+    })
+    expect(wrapper.html()).toContain('custom-calendar')
+    expect(wrapper.html()).toContain('p-3')
+  })
+})

package/src/components/ui/calendar/Calendar.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+/**
+ * Date-picker grid driven by `@internationalized/date`. Single, range,
+ * and multiple selection modes. Use directly or compose inside a
+ * `Popover` to make a date input.
+ */
+
+import type { CalendarRootEmits, CalendarRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>

package/src/components/ui/calendar/CalendarCell.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>

package/src/components/ui/calendar/CalendarCellTrigger.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCellTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-9 w-9 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>

package/src/components/ui/calendar/CalendarGrid.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { CalendarGridProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarGrid, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>

package/src/components/ui/calendar/CalendarGridBody.vue

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

package/src/components/ui/calendar/CalendarGridHead.vue

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