@gxp-dev/app-ui 0.1.6

package/src/components/ui/textarea/Textarea.stories.ts

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import { Textarea } from '.'
+
+const meta = {
+  title: 'UI/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'The value of the textarea (v-model)',
+    },
+    defaultValue: {
+      control: 'text',
+      description: 'The default value of the textarea',
+    },
+    class: {
+      control: 'text',
+      description: 'Additional CSS classes to apply',
+    },
+  },
+  args: {
+    modelValue: '',
+  },
+} satisfies Meta<typeof Textarea>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default Textarea
+export const Default: Story = {
+  render: (args) => ({
+    components: { Textarea },
+    setup() {
+      return { args }
+    },
+    template: '<Textarea v-bind="args" />',
+  }),
+}
+
+// Disabled State
+export const Disabled: Story = {
+  name: 'Disabled',
+  render: () => ({
+    components: { Textarea },
+    template: '<Textarea placeholder="Disabled textarea" disabled />',
+  }),
+}
+
+// With Placeholder
+export const WithPlaceholder: Story = {
+  name: 'With Placeholder',
+  render: () => ({
+    components: { Textarea },
+    template: '<Textarea placeholder="Type your message here..." />',
+  }),
+}
+
+// With Value
+export const WithValue: Story = {
+  name: 'With Value',
+  render: () => ({
+    components: { Textarea },
+    setup() {
+      const value = ref('This is some existing content in the textarea.')
+      return { value }
+    },
+    template: '<Textarea v-model="value" />',
+  }),
+}
+
+// With Label
+export const WithLabel: Story = {
+  name: 'With Label',
+  render: () => ({
+    components: { Textarea },
+    template: `
+      <div class="grid w-full max-w-sm gap-1.5">
+        <label for="message" class="text-sm font-medium leading-none text-foreground">Your Message</label>
+        <Textarea id="message" placeholder="Type your message here..." />
+        <p class="text-sm text-muted-foreground">Your message will be sent to our support team.</p>
+      </div>
+    `,
+  }),
+}
+
+// Showcase
+export const Showcase: Story = {
+  name: 'Showcase',
+  render: () => ({
+    components: { Textarea },
+    template: `
+      <div class="space-y-8 max-w-md">
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-foreground">Basic Textarea</h3>
+          <div class="space-y-4">
+            <Textarea placeholder="Default textarea" />
+            <Textarea placeholder="Disabled textarea" disabled />
+          </div>
+        </div>
+
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-foreground">With Label</h3>
+          <div class="grid gap-1.5">
+            <label for="showcase-bio" class="text-sm font-medium text-foreground">Bio</label>
+            <Textarea id="showcase-bio" placeholder="Tell us about yourself..." />
+            <p class="text-sm text-muted-foreground">You can write up to 500 characters.</p>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/components/ui/textarea/Textarea.test.ts

@@ -0,0 +1,146 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { Textarea } from '.'
+
+describe('Textarea', () => {
+  describe('default rendering', () => {
+    it('renders as a textarea element', () => {
+      const wrapper = mount(Textarea)
+      expect(wrapper.element.tagName).toBe('TEXTAREA')
+    })
+
+    it('has correct base styling classes', () => {
+      const wrapper = mount(Textarea)
+      expect(wrapper.classes()).toContain('flex')
+      expect(wrapper.classes()).toContain('min-h-20')
+      expect(wrapper.classes()).toContain('w-full')
+      expect(wrapper.classes()).toContain('rounded-md')
+      expect(wrapper.classes()).toContain('border')
+      expect(wrapper.classes()).toContain('border-input')
+      expect(wrapper.classes()).toContain('bg-background')
+      expect(wrapper.classes()).toContain('px-3')
+      expect(wrapper.classes()).toContain('py-2')
+      expect(wrapper.classes()).toContain('text-sm')
+    })
+
+    it('has ring-offset-background class', () => {
+      const wrapper = mount(Textarea)
+      expect(wrapper.classes()).toContain('ring-offset-background')
+    })
+
+    it('has focus-visible styles', () => {
+      const wrapper = mount(Textarea)
+      expect(wrapper.classes()).toContain('focus-visible:outline-none')
+      expect(wrapper.classes()).toContain('focus-visible:ring-2')
+      expect(wrapper.classes()).toContain('focus-visible:ring-ring')
+      expect(wrapper.classes()).toContain('focus-visible:ring-offset-2')
+    })
+
+    it('has disabled styles', () => {
+      const wrapper = mount(Textarea)
+      expect(wrapper.classes()).toContain('disabled:cursor-not-allowed')
+      expect(wrapper.classes()).toContain('disabled:opacity-50')
+    })
+
+    it('has placeholder styles', () => {
+      const wrapper = mount(Textarea)
+      expect(wrapper.classes()).toContain('placeholder:text-muted-foreground')
+    })
+  })
+
+  describe('v-model / modelValue', () => {
+    it('accepts modelValue prop', () => {
+      const wrapper = mount(Textarea, {
+        props: { modelValue: 'initial value' }
+      })
+      expect((wrapper.element as HTMLTextAreaElement).value).toBe('initial value')
+    })
+
+    it('accepts number modelValue', () => {
+      const wrapper = mount(Textarea, {
+        props: { modelValue: 42 }
+      })
+      expect((wrapper.element as HTMLTextAreaElement).value).toBe('42')
+    })
+
+    it('accepts defaultValue prop', () => {
+      const wrapper = mount(Textarea, {
+        props: { defaultValue: 'default text' }
+      })
+      expect((wrapper.element as HTMLTextAreaElement).value).toBe('default text')
+    })
+
+    it('emits update:modelValue on input', async () => {
+      const wrapper = mount(Textarea, {
+        props: { modelValue: '' }
+      })
+
+      await wrapper.setValue('new value')
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new value'])
+    })
+
+    it('updates value when modelValue prop changes', async () => {
+      const wrapper = mount(Textarea, {
+        props: { modelValue: 'initial' }
+      })
+
+      expect((wrapper.element as HTMLTextAreaElement).value).toBe('initial')
+
+      await wrapper.setProps({ modelValue: 'updated' })
+
+      expect((wrapper.element as HTMLTextAreaElement).value).toBe('updated')
+    })
+  })
+
+  describe('custom class', () => {
+    it('accepts custom class via class prop', () => {
+      const wrapper = mount(Textarea, {
+        props: { class: 'custom-class' }
+      })
+      expect(wrapper.classes()).toContain('custom-class')
+    })
+
+    it('merges custom classes with default classes', () => {
+      const wrapper = mount(Textarea, {
+        props: { class: 'my-custom-class' }
+      })
+      expect(wrapper.classes()).toContain('my-custom-class')
+      expect(wrapper.classes()).toContain('flex')
+      expect(wrapper.classes()).toContain('min-h-20')
+      expect(wrapper.classes()).toContain('border')
+    })
+
+    it('allows overriding default classes with custom classes', () => {
+      const wrapper = mount(Textarea, {
+        props: { class: 'min-h-40 px-4' }
+      })
+      expect(wrapper.classes()).toContain('min-h-40')
+      expect(wrapper.classes()).toContain('px-4')
+    })
+  })
+
+  describe('HTML attributes', () => {
+    it('forwards placeholder attribute', () => {
+      const wrapper = mount(Textarea, {
+        attrs: { placeholder: 'Enter your message' }
+      })
+      expect(wrapper.attributes('placeholder')).toBe('Enter your message')
+    })
+
+    it('handles disabled attribute', () => {
+      const wrapper = mount(Textarea, {
+        attrs: { disabled: true }
+      })
+      expect(wrapper.attributes('disabled')).toBe('')
+    })
+
+    it('forwards rows attribute', () => {
+      const wrapper = mount(Textarea, {
+        attrs: { rows: '5' }
+      })
+      expect(wrapper.attributes('rows')).toBe('5')
+    })
+  })
+})

package/src/components/ui/textarea/Textarea.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+/**
+ * Multi-line text input with the shared shadcn input styling. Use
+ * `Input` for single-line entry.
+ */
+
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>

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

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

package/src/components/ui/tooltip/Tooltip.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '.'
+import { Button } from '../button'
+
+const meta = {
+  title: 'UI/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Button },
+    template: `
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="outline">Hover me</Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Add to library</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    `,
+  }),
+}

package/src/components/ui/tooltip/Tooltip.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '.'
+
+describe('Tooltip', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders without errors', () => {
+    const wrapper = mount(TooltipProvider, {
+      slots: {
+        default: () =>
+          h(Tooltip, null, {
+            default: () => [
+              h(TooltipTrigger, null, { default: () => 'Hover me' }),
+            ],
+          }),
+      },
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('renders trigger content', () => {
+    const wrapper = mount(TooltipProvider, {
+      slots: {
+        default: () =>
+          h(Tooltip, null, {
+            default: () => [
+              h(TooltipTrigger, null, { default: () => 'Hover me' }),
+            ],
+          }),
+      },
+    })
+    expect(wrapper.text()).toContain('Hover me')
+    wrapper.unmount()
+  })
+
+  describe('Tooltip with open content', () => {
+    it('renders content in portal when open', async () => {
+      const wrapper = mount(TooltipProvider, {
+        slots: {
+          default: () =>
+            h(Tooltip, { defaultOpen: true }, {
+              default: () => [
+                h(TooltipTrigger, null, { default: () => 'Trigger' }),
+                h(TooltipContent, null, { default: () => 'Tooltip text' }),
+              ],
+            }),
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      const content = document.body.querySelector('[data-dismissable-layer]')
+      expect(content).toBeTruthy()
+      expect(document.body.textContent).toContain('Tooltip text')
+
+      wrapper.unmount()
+    })
+
+    it('renders content with correct classes', async () => {
+      const wrapper = mount(TooltipProvider, {
+        slots: {
+          default: () =>
+            h(Tooltip, { defaultOpen: true }, {
+              default: () => [
+                h(TooltipTrigger, null, { default: () => 'Trigger' }),
+                h(TooltipContent, null, { default: () => 'Tooltip content' }),
+              ],
+            }),
+        },
+        attachTo: document.body,
+      })
+
+      await nextTick()
+
+      const content = document.body.querySelector('[data-dismissable-layer]')
+      expect(content).toBeTruthy()
+      expect(content?.className).toContain('z-50')
+      expect(content?.className).toContain('overflow-hidden')
+      expect(content?.className).toContain('rounded-md')
+      expect(content?.className).toContain('border')
+      expect(content?.className).toContain('bg-popover')
+      expect(content?.className).toContain('px-3')
+      expect(content?.className).toContain('py-1.5')
+      expect(content?.className).toContain('text-sm')
+      expect(content?.className).toContain('text-popover-foreground')
+      expect(content?.className).toContain('shadow-md')
+
+      wrapper.unmount()
+    })
+  })
+})

package/src/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/**
+ * Hover hint label with arrow. Keep content short (one line); use
+ * `HoverCard` for richer detail.
+ */
+
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>

package/src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/src/components/ui/tooltip/TooltipProvider.vue

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

package/src/components/ui/tooltip/TooltipTrigger.vue

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

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

@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"

package/src/composables/__demo__/UseAnimationsDemo.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { useAnimations } from '../useAnimations'
+
+const props = defineProps<{
+  pageAnimationType?: string
+  pageAnimationSpeed?: string
+}>()
+
+const { init, animatingClasses, animatePage } = useAnimations()
+
+const reapply = (): void => {
+  init({
+    globalSettings: {
+      page_animation_type: props.pageAnimationType ?? 'animate__fadeIn',
+      page_animation_speed: props.pageAnimationSpeed ?? 'animate__normal',
+    },
+  })
+}
+reapply()
+watch(() => [props.pageAnimationType, props.pageAnimationSpeed], reapply)
+
+const counter = ref(0)
+const inFlight = ref(false)
+
+const animate = async (reverse = false): Promise<void> => {
+  inFlight.value = true
+  await animatePage({ pluginVars: { animate_next: true, animate_prev: true } }, reverse)
+  counter.value++
+  inFlight.value = false
+}
+</script>
+
+<template>
+  <div class="space-y-3 rounded-lg border border-border bg-card p-4 text-card-foreground w-[480px] max-w-full">
+    <h3 class="text-base font-semibold">useAnimations demo</h3>
+
+    <div class="flex gap-2">
+      <button class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground" :disabled="inFlight" @click="animate(false)">
+        Next
+      </button>
+      <button class="rounded-md bg-secondary px-3 py-1.5 text-sm font-medium text-secondary-foreground" :disabled="inFlight" @click="animate(true)">
+        Previous
+      </button>
+    </div>
+
+    <div class="grid h-32 place-items-center rounded-md bg-muted p-4">
+      <div :class="animatingClasses">
+        <div class="rounded-md bg-primary px-6 py-3 font-semibold text-primary-foreground">
+          Frame #{{ counter }}
+        </div>
+      </div>
+    </div>
+
+    <pre class="rounded-md bg-muted p-3 font-mono text-xs">{{ { animatingClasses } }}</pre>
+    <p class="text-xs text-muted-foreground">
+      Note: animation classes come from animate.css. Pages in real use ship an animate.css import; this preview just shows the class strings.
+    </p>
+  </div>
+</template>

package/src/composables/__demo__/UseCameraBorderDemo.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useCameraBorder } from '../useCameraBorder'
+
+const { selectedBorder, canvasDimensions, drawBorder, reset } = useCameraBorder()
+
+canvasDimensions.value = { width: 600, height: 600 }
+
+const SAMPLE_PHOTO = 'https://placehold.co/600x600/0ea5e9/fff?text=Photo'
+const BORDERS = [
+  { label: 'Frame A', src: 'https://placehold.co/600x600/ef4444/fff?text=Frame+A&font=raleway' },
+  { label: 'Frame B', src: 'https://placehold.co/600x600/16a34a/fff?text=Frame+B&font=raleway' },
+  { label: 'Frame C', src: 'https://placehold.co/600x600/9333ea/fff?text=Frame+C&font=raleway' },
+]
+
+const result = ref<string>('')
+const error = ref<string>('')
+
+const compose = async (): Promise<void> => {
+  error.value = ''
+  try {
+    result.value = await drawBorder(SAMPLE_PHOTO)
+  } catch (err) {
+    error.value = (err as Error).message
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-3 rounded-lg border border-border bg-card p-4 text-card-foreground w-[520px] max-w-full">
+    <h3 class="text-base font-semibold">useCameraBorder demo</h3>
+
+    <div>
+      <p class="mb-1 text-xs font-semibold text-muted-foreground">choose a border</p>
+      <div class="flex gap-2">
+        <button
+          v-for="b in BORDERS"
+          :key="b.src"
+          type="button"
+          :class="['overflow-hidden rounded-md border-2 transition-all', selectedBorder?.src === b.src ? 'border-primary' : 'border-transparent']"
+          @click="selectedBorder = b"
+        >
+          <img :src="b.src" :alt="b.label" class="h-16 w-16 object-cover" />
+        </button>
+      </div>
+    </div>
+
+    <div class="flex gap-2">
+      <button class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground" :disabled="!selectedBorder" @click="compose">
+        drawBorder(SAMPLE_PHOTO)
+      </button>
+      <button class="rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground" @click="reset">
+        reset
+      </button>
+    </div>
+
+    <div v-if="result">
+      <p class="mb-1 text-xs font-semibold text-muted-foreground">result</p>
+      <img :src="result" alt="Composed" class="w-full rounded-md border border-border" />
+    </div>
+    <p v-if="error" class="text-sm text-destructive">{{ error }}</p>
+
+    <pre class="rounded-md bg-muted p-3 font-mono text-xs">{{ { selectedBorder, canvasDimensions } }}</pre>
+  </div>
+</template>