@gxp-dev/app-ui 0.1.6

package/src/components/ui/separator/Separator.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { Separator } from '.'
+
+describe('Separator', () => {
+  describe('default rendering', () => {
+    it('renders as a div element', () => {
+      const wrapper = mount(Separator)
+      expect(wrapper.element.tagName).toBe('DIV')
+    })
+
+    it('has correct base styling classes', () => {
+      const wrapper = mount(Separator)
+      expect(wrapper.classes()).toContain('shrink-0')
+      expect(wrapper.classes()).toContain('bg-border')
+    })
+  })
+
+  describe('horizontal orientation (default)', () => {
+    it('has correct horizontal classes by default', () => {
+      const wrapper = mount(Separator)
+      expect(wrapper.classes()).toContain('h-px')
+      expect(wrapper.classes()).toContain('w-full')
+    })
+
+    it('does not have vertical classes by default', () => {
+      const wrapper = mount(Separator)
+      expect(wrapper.classes()).not.toContain('w-px')
+      expect(wrapper.classes()).not.toContain('h-full')
+    })
+  })
+
+  describe('vertical orientation', () => {
+    it('has correct vertical classes when orientation is vertical', () => {
+      const wrapper = mount(Separator, {
+        props: { orientation: 'vertical' }
+      })
+      expect(wrapper.classes()).toContain('w-px')
+      expect(wrapper.classes()).toContain('h-full')
+    })
+
+    it('does not have horizontal classes when orientation is vertical', () => {
+      const wrapper = mount(Separator, {
+        props: { orientation: 'vertical' }
+      })
+      expect(wrapper.classes()).not.toContain('h-px')
+      expect(wrapper.classes()).not.toContain('w-full')
+    })
+  })
+
+  describe('custom class', () => {
+    it('accepts custom class via class prop', () => {
+      const wrapper = mount(Separator, {
+        props: { class: 'custom-class' }
+      })
+      expect(wrapper.classes()).toContain('custom-class')
+    })
+
+    it('merges custom classes with default classes', () => {
+      const wrapper = mount(Separator, {
+        props: { class: 'my-custom-class' }
+      })
+      expect(wrapper.classes()).toContain('my-custom-class')
+      expect(wrapper.classes()).toContain('shrink-0')
+      expect(wrapper.classes()).toContain('bg-border')
+    })
+  })
+
+  describe('decorative prop', () => {
+    it('is decorative by default', () => {
+      const wrapper = mount(Separator)
+      expect(wrapper.attributes('data-orientation')).toBe('horizontal')
+    })
+
+    it('sets aria role when not decorative', () => {
+      const wrapper = mount(Separator, {
+        props: { decorative: false }
+      })
+      expect(wrapper.attributes('role')).toBe('separator')
+    })
+  })
+})

package/src/components/ui/separator/Separator.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/**
+ * Thin visual divider between sections. Renders as `<hr>`-equivalent
+ * with proper ARIA semantics.
+ */
+
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<
+  SeparatorProps & { class?: HTMLAttributes["class"] }
+>(), {
+  orientation: "horizontal",
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border',
+        props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
+        props.class,
+      )
+    "
+  />
+</template>

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

@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue"

package/src/components/ui/sheet/Sheet.stories.ts

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SheetClose,
+} from '.'
+import { Button } from '../button'
+import { Input } from '../input'
+import { Label } from '../label'
+
+const meta = {
+  title: 'UI/Sheet',
+  component: Sheet,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Sheet>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: {
+      Sheet,
+      SheetContent,
+      SheetDescription,
+      SheetFooter,
+      SheetHeader,
+      SheetTitle,
+      SheetTrigger,
+      SheetClose,
+      Button,
+    },
+    template: `
+      <Sheet>
+        <SheetTrigger as-child>
+          <Button variant="outline">Open Sheet</Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Edit Profile</SheetTitle>
+            <SheetDescription>
+              Make changes to your profile here. Click save when you're done.
+            </SheetDescription>
+          </SheetHeader>
+          <div class="py-4">
+            <p class="text-sm text-muted-foreground">
+              Your profile settings will be updated across all devices.
+            </p>
+          </div>
+          <SheetFooter>
+            <SheetClose as-child>
+              <Button variant="outline">Cancel</Button>
+            </SheetClose>
+            <Button>Save changes</Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    `,
+  }),
+}
+
+export const LeftSide: Story = {
+  name: 'Left Side',
+  render: () => ({
+    components: {
+      Sheet,
+      SheetContent,
+      SheetDescription,
+      SheetFooter,
+      SheetHeader,
+      SheetTitle,
+      SheetTrigger,
+      SheetClose,
+      Button,
+    },
+    template: `
+      <Sheet>
+        <SheetTrigger as-child>
+          <Button variant="outline">Open Left Sheet</Button>
+        </SheetTrigger>
+        <SheetContent side="left">
+          <SheetHeader>
+            <SheetTitle>Navigation</SheetTitle>
+            <SheetDescription>
+              Browse through the application sections.
+            </SheetDescription>
+          </SheetHeader>
+          <nav class="flex flex-col gap-2 py-4">
+            <a href="#" class="text-sm hover:underline">Dashboard</a>
+            <a href="#" class="text-sm hover:underline">Projects</a>
+            <a href="#" class="text-sm hover:underline">Team</a>
+            <a href="#" class="text-sm hover:underline">Settings</a>
+          </nav>
+          <SheetFooter>
+            <SheetClose as-child>
+              <Button variant="outline">Close</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    `,
+  }),
+}
+
+export const WithForm: Story = {
+  name: 'With Form',
+  render: () => ({
+    components: {
+      Sheet,
+      SheetContent,
+      SheetDescription,
+      SheetFooter,
+      SheetHeader,
+      SheetTitle,
+      SheetTrigger,
+      SheetClose,
+      Button,
+      Input,
+      Label,
+    },
+    template: `
+      <Sheet>
+        <SheetTrigger as-child>
+          <Button>Edit Profile</Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Edit Profile</SheetTitle>
+            <SheetDescription>
+              Make changes to your profile here. Click save when you're done.
+            </SheetDescription>
+          </SheetHeader>
+          <div class="grid gap-4 py-4">
+            <div class="grid grid-cols-4 items-center gap-4">
+              <Label for="name" class="text-right">Name</Label>
+              <Input id="name" value="John Doe" class="col-span-3" />
+            </div>
+            <div class="grid grid-cols-4 items-center gap-4">
+              <Label for="username" class="text-right">Username</Label>
+              <Input id="username" value="@johndoe" class="col-span-3" />
+            </div>
+          </div>
+          <SheetFooter>
+            <SheetClose as-child>
+              <Button variant="outline">Cancel</Button>
+            </SheetClose>
+            <Button type="submit">Save changes</Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    `,
+  }),
+}

package/src/components/ui/sheet/Sheet.test.ts

@@ -0,0 +1,345 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  SheetTrigger,
+  SheetClose,
+} from '.'
+
+describe('Sheet', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders without errors', () => {
+    const wrapper = mount(Sheet, {
+      slots: { default: 'content' },
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('renders trigger content', () => {
+    const wrapper = mount(Sheet, {
+      slots: {
+        default: '<button>Open Sheet</button>',
+      },
+    })
+    expect(wrapper.text()).toContain('Open Sheet')
+    wrapper.unmount()
+  })
+
+  describe('SheetHeader', () => {
+    it('renders slot content', () => {
+      const wrapper = mount(SheetHeader, {
+        slots: { default: 'Header Content' },
+      })
+      expect(wrapper.text()).toBe('Header Content')
+    })
+
+    it('has correct base classes', () => {
+      const wrapper = mount(SheetHeader)
+      expect(wrapper.classes()).toContain('flex')
+      expect(wrapper.classes()).toContain('flex-col')
+      expect(wrapper.classes()).toContain('gap-y-2')
+      expect(wrapper.classes()).toContain('text-center')
+      expect(wrapper.classes()).toContain('sm:text-left')
+    })
+
+    it('renders as a div element', () => {
+      const wrapper = mount(SheetHeader)
+      expect(wrapper.element.tagName).toBe('DIV')
+    })
+
+    it('accepts custom class', () => {
+      const wrapper = mount(SheetHeader, {
+        props: { class: 'custom-header' },
+      })
+      expect(wrapper.classes()).toContain('custom-header')
+      expect(wrapper.classes()).toContain('flex')
+    })
+
+    it('renders HTML slot content', () => {
+      const wrapper = mount(SheetHeader, {
+        slots: { default: '<h2 class="title">Sheet Title</h2>' },
+      })
+      expect(wrapper.find('.title').exists()).toBe(true)
+      expect(wrapper.text()).toContain('Sheet Title')
+    })
+  })
+
+  describe('SheetFooter', () => {
+    it('renders slot content', () => {
+      const wrapper = mount(SheetFooter, {
+        slots: { default: 'Footer Content' },
+      })
+      expect(wrapper.text()).toBe('Footer Content')
+    })
+
+    it('has correct base classes', () => {
+      const wrapper = mount(SheetFooter)
+      expect(wrapper.classes()).toContain('flex')
+      expect(wrapper.classes()).toContain('flex-col-reverse')
+      expect(wrapper.classes()).toContain('sm:flex-row')
+      expect(wrapper.classes()).toContain('sm:justify-end')
+      expect(wrapper.classes()).toContain('sm:gap-x-2')
+    })
+
+    it('renders as a div element', () => {
+      const wrapper = mount(SheetFooter)
+      expect(wrapper.element.tagName).toBe('DIV')
+    })
+
+    it('accepts custom class', () => {
+      const wrapper = mount(SheetFooter, {
+        props: { class: 'custom-footer' },
+      })
+      expect(wrapper.classes()).toContain('custom-footer')
+      expect(wrapper.classes()).toContain('flex')
+    })
+
+    it('renders multiple slot children', () => {
+      const wrapper = mount(SheetFooter, {
+        slots: { default: '<button>Cancel</button><button>Save</button>' },
+      })
+      expect(wrapper.text()).toContain('Cancel')
+      expect(wrapper.text()).toContain('Save')
+    })
+  })
+
+  describe('SheetTrigger', () => {
+    it('renders trigger inside sheet', () => {
+      const wrapper = mount(Sheet, {
+        slots: {
+          default: {
+            template: '<SheetTrigger as-child><button class="trigger-btn">Open</button></SheetTrigger>',
+            components: { SheetTrigger },
+          },
+        },
+      })
+      expect(wrapper.find('.trigger-btn').exists()).toBe(true)
+      expect(wrapper.find('.trigger-btn').text()).toBe('Open')
+      wrapper.unmount()
+    })
+  })
+
+  describe('Sheet with open content', () => {
+    it('renders SheetTitle with correct classes when sheet is open', async () => {
+      const wrapper = mount(Sheet, {
+        props: { defaultOpen: true },
+        slots: {
+          default: {
+            template: `
+              <SheetContent>
+                <SheetHeader>
+                  <SheetTitle>Test Title</SheetTitle>
+                </SheetHeader>
+              </SheetContent>
+            `,
+            components: { SheetContent, SheetHeader, SheetTitle },
+          },
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      const title = document.body.querySelector('h2')
+      expect(title).toBeTruthy()
+      expect(title?.textContent).toContain('Test Title')
+      expect(title?.className).toContain('text-lg')
+      expect(title?.className).toContain('font-semibold')
+      expect(title?.className).toContain('text-foreground')
+
+      wrapper.unmount()
+    })
+
+    it('renders SheetDescription with correct classes when sheet is open', async () => {
+      const wrapper = mount(Sheet, {
+        props: { defaultOpen: true },
+        slots: {
+          default: {
+            template: `
+              <SheetContent>
+                <SheetHeader>
+                  <SheetTitle>Title</SheetTitle>
+                  <SheetDescription>Test Description</SheetDescription>
+                </SheetHeader>
+              </SheetContent>
+            `,
+            components: { SheetContent, SheetHeader, SheetTitle, SheetDescription },
+          },
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      const description = document.body.querySelector('p')
+      expect(description).toBeTruthy()
+      expect(description?.textContent).toContain('Test Description')
+      expect(description?.className).toContain('text-sm')
+      expect(description?.className).toContain('text-muted-foreground')
+
+      wrapper.unmount()
+    })
+
+    it('renders SheetContent with close button', async () => {
+      const wrapper = mount(Sheet, {
+        props: { defaultOpen: true },
+        slots: {
+          default: {
+            template: `
+              <SheetContent>
+                <SheetTitle>Title</SheetTitle>
+                <p>Body</p>
+              </SheetContent>
+            `,
+            components: { SheetContent, SheetTitle },
+          },
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      // SheetContent renders a close X button
+      const svg = document.body.querySelector('svg')
+      expect(svg).toBeTruthy()
+
+      wrapper.unmount()
+    })
+
+    it('renders overlay when sheet is open', async () => {
+      const wrapper = mount(Sheet, {
+        props: { defaultOpen: true },
+        slots: {
+          default: {
+            template: `
+              <SheetContent>
+                <SheetTitle>Title</SheetTitle>
+              </SheetContent>
+            `,
+            components: { SheetContent, SheetTitle },
+          },
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      const overlay = document.body.querySelector('[data-state="open"]')
+      expect(overlay).toBeTruthy()
+
+      wrapper.unmount()
+    })
+
+    it('renders content with right side variant classes by default', async () => {
+      const wrapper = mount(Sheet, {
+        props: { defaultOpen: true },
+        slots: {
+          default: {
+            template: `
+              <SheetContent>
+                <SheetTitle>Title</SheetTitle>
+              </SheetContent>
+            `,
+            components: { SheetContent, SheetTitle },
+          },
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      const content = document.body.querySelector('[role="dialog"]')
+      expect(content).toBeTruthy()
+      expect(content?.className).toContain('fixed')
+      expect(content?.className).toContain('z-50')
+      expect(content?.className).toContain('bg-background')
+      expect(content?.className).toContain('p-6')
+      expect(content?.className).toContain('shadow-lg')
+      // Right side variant classes
+      expect(content?.className).toContain('inset-y-0')
+      expect(content?.className).toContain('right-0')
+      expect(content?.className).toContain('h-full')
+      expect(content?.className).toContain('w-3/4')
+      expect(content?.className).toContain('border-l')
+
+      wrapper.unmount()
+    })
+
+    it('renders SheetClose inside open sheet', async () => {
+      const wrapper = mount(Sheet, {
+        props: { defaultOpen: true },
+        slots: {
+          default: {
+            template: `
+              <SheetContent>
+                <SheetTitle>Title</SheetTitle>
+                <SheetClose as-child>
+                  <button class="close-btn">Close Me</button>
+                </SheetClose>
+              </SheetContent>
+            `,
+            components: { SheetContent, SheetTitle, SheetClose },
+          },
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      const closeBtn = document.body.querySelector('.close-btn')
+      expect(closeBtn).toBeTruthy()
+      expect(closeBtn?.textContent).toBe('Close Me')
+
+      wrapper.unmount()
+    })
+
+    it('renders full sheet structure with header, body, and footer', async () => {
+      const wrapper = mount(Sheet, {
+        props: { defaultOpen: true },
+        slots: {
+          default: {
+            template: `
+              <SheetContent>
+                <SheetHeader>
+                  <SheetTitle>Edit Settings</SheetTitle>
+                  <SheetDescription>Make changes to your settings here.</SheetDescription>
+                </SheetHeader>
+                <div class="sheet-body">Body content</div>
+                <SheetFooter>
+                  <button>Save changes</button>
+                </SheetFooter>
+              </SheetContent>
+            `,
+            components: { SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter },
+          },
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      const title = document.body.querySelector('h2')
+      expect(title?.textContent).toContain('Edit Settings')
+
+      const description = document.body.querySelector('p')
+      expect(description?.textContent).toContain('Make changes to your settings here.')
+
+      expect(document.body.querySelector('.sheet-body')?.textContent).toBe('Body content')
+
+      const footer = document.body.querySelector('[class*="flex-col-reverse"]')
+      expect(footer?.textContent).toContain('Save changes')
+
+      wrapper.unmount()
+    })
+  })
+})

package/src/components/ui/sheet/Sheet.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/**
+ * Slide-in drawer panel anchored to one edge of the screen (top, right,
+ * bottom, left). Use for navigation or supplemental detail; use `Dialog`
+ * for centered modal flows.
+ */
+
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

package/src/components/ui/sheet/SheetClose.vue

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