@gxp-dev/mod-ui 2.0.0

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

@@ -0,0 +1,38 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Badge } from "./Badge.vue"
+
+export const badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        success:
+          "border-transparent bg-success text-success-foreground hover:bg-success/80",
+        warning:
+          "border-transparent bg-warning text-warning-foreground hover:bg-warning/80",
+        info:
+          "border-transparent bg-info text-info-foreground hover:bg-info/80",
+      },
+      size: {
+        default: "px-2.5 py-0.5 text-xs",
+        sm: "px-2 py-0 text-[10px]",
+        lg: "px-3 py-1 text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>

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

@@ -0,0 +1,168 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ChevronRight, Loader2, Mail, Plus } from "lucide-vue-next"
+import { Button } from "."
+
+const meta = {
+  title: "UI/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "default",
+        "secondary",
+        "destructive",
+        "outline",
+        "ghost",
+        "link",
+        "success",
+        "warning",
+        "info",
+      ],
+      description: "Visual style.",
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg", "xl", "icon", "icon-sm", "icon-lg"],
+      description: "Size.",
+    },
+    asChild: {
+      control: "boolean",
+      description: "Render as the slot's root element (reka-ui Primitive).",
+    },
+  },
+  args: { variant: "default", size: "default" },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args }
+    },
+    template: '<Button v-bind="args">Button</Button>',
+  }),
+}
+
+export const AllVariants: Story = {
+  name: "All Variants",
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button variant="default">Default</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="destructive">Destructive</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="link">Link</Button>
+        <Button variant="success">Success</Button>
+        <Button variant="warning">Warning</Button>
+        <Button variant="info">Info</Button>
+      </div>
+    `,
+  }),
+}
+
+export const AllSizes: Story = {
+  name: "All Sizes",
+  render: () => ({
+    components: { Button, Plus },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button size="sm">Small</Button>
+        <Button size="default">Default</Button>
+        <Button size="lg">Large</Button>
+        <Button size="xl">Extra Large</Button>
+        <Button size="icon" aria-label="Add"><Plus /></Button>
+        <Button size="icon-sm" aria-label="Add small"><Plus /></Button>
+        <Button size="icon-lg" aria-label="Add large"><Plus /></Button>
+      </div>
+    `,
+  }),
+}
+
+export const WithIconLeft: Story = {
+  name: "With Icon (Left)",
+  render: () => ({
+    components: { Button, Mail },
+    template: '<Button><Mail /> Login with Email</Button>',
+  }),
+}
+
+export const WithIconRight: Story = {
+  name: "With Icon (Right)",
+  render: () => ({
+    components: { Button, ChevronRight },
+    template: '<Button>Next <ChevronRight /></Button>',
+  }),
+}
+
+export const Loading: Story = {
+  name: "Loading",
+  render: () => ({
+    components: { Button, Loader2 },
+    template: '<Button disabled><Loader2 class="animate-spin" /> Please wait</Button>',
+  }),
+}
+
+export const Disabled: Story = {
+  name: "Disabled (All Variants)",
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button disabled>Default</Button>
+        <Button variant="secondary" disabled>Secondary</Button>
+        <Button variant="destructive" disabled>Destructive</Button>
+        <Button variant="outline" disabled>Outline</Button>
+        <Button variant="ghost" disabled>Ghost</Button>
+      </div>
+    `,
+  }),
+}
+
+export const AsAnchor: Story = {
+  name: "As <a>",
+  render: () => ({
+    components: { Button },
+    template: '<Button as="a" href="https://example.com" target="_blank">Open external</Button>',
+  }),
+}
+
+export const Showcase: Story = {
+  name: "Showcase",
+  render: () => ({
+    components: { Button, Mail, ChevronRight, Loader2 },
+    template: `
+      <div class="space-y-6">
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Variants</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Button>Default</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="destructive">Destructive</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="link">Link</Button>
+            <Button variant="success">Success</Button>
+            <Button variant="warning">Warning</Button>
+            <Button variant="info">Info</Button>
+          </div>
+        </section>
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">With icons</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Button><Mail /> Email</Button>
+            <Button variant="outline">Next <ChevronRight /></Button>
+            <Button disabled><Loader2 class="animate-spin" /> Loading</Button>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,170 @@
+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")
+      expect(wrapper.classes()).toContain("bg-primary")
+      expect(wrapper.classes()).toContain("text-primary-foreground")
+      expect(wrapper.classes()).toContain("h-10")
+      expect(wrapper.classes()).toContain("px-4")
+    })
+
+    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.each([
+      ["default", ["bg-primary", "text-primary-foreground"]],
+      ["secondary", ["bg-secondary", "text-secondary-foreground"]],
+      ["destructive", ["bg-destructive", "text-destructive-foreground"]],
+      ["outline", ["border", "border-input", "bg-background"]],
+      ["ghost", ["hover:bg-accent", "hover:text-accent-foreground"]],
+      ["link", ["text-primary", "underline-offset-4", "hover:underline"]],
+      ["success", ["bg-success", "text-success-foreground"]],
+      ["warning", ["bg-warning", "text-warning-foreground"]],
+      ["info", ["bg-info", "text-info-foreground"]],
+    ] as const)("renders %s variant with expected classes", (variant, expected) => {
+      const wrapper = mount(Button, {
+        props: { variant },
+        slots: { default: variant },
+      })
+      for (const cls of expected) {
+        expect(wrapper.classes()).toContain(cls)
+      }
+    })
+
+    it("does not apply primary classes to ghost variant", () => {
+      const wrapper = mount(Button, { props: { variant: "ghost" } })
+      expect(wrapper.classes()).not.toContain("bg-primary")
+    })
+  })
+
+  describe("sizes", () => {
+    it.each([
+      ["default", ["h-10", "px-4", "py-2"]],
+      ["sm", ["h-9", "px-3"]],
+      ["lg", ["h-11", "px-8"]],
+      ["xl", ["h-12", "px-10"]],
+      ["icon", ["h-10", "w-10"]],
+      ["icon-sm", ["size-9"]],
+      ["icon-lg", ["size-11"]],
+    ] as const)("renders %s size with expected classes", (size, expected) => {
+      const wrapper = mount(Button, { props: { size } })
+      for (const cls of expected) {
+        expect(wrapper.classes()).toContain(cls)
+      }
+    })
+  })
+
+  describe("custom class", () => {
+    it("merges custom class with default classes", () => {
+      const wrapper = mount(Button, { props: { class: "my-custom-class" } })
+      expect(wrapper.classes()).toContain("my-custom-class")
+      expect(wrapper.classes()).toContain("bg-primary")
+      expect(wrapper.classes()).toContain("inline-flex")
+    })
+
+    it("allows overriding default classes via tailwind-merge", () => {
+      const wrapper = mount(Button, { props: { class: "bg-blue-500" } })
+      expect(wrapper.classes()).toContain("bg-blue-500")
+      expect(wrapper.classes()).not.toContain("bg-primary")
+    })
+  })
+
+  describe("slot content", () => {
+    it("renders text", () => {
+      const wrapper = mount(Button, { slots: { default: "Hello" } })
+      expect(wrapper.text()).toBe("Hello")
+    })
+
+    it("renders HTML", () => {
+      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", () => {
+      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 when no slot", () => {
+      const wrapper = mount(Button)
+      expect(wrapper.text()).toBe("")
+    })
+  })
+
+  describe("asChild prop", () => {
+    it("renders the child element when asChild is true", () => {
+      const wrapper = mount(Button, {
+        props: { asChild: true },
+        slots: {
+          default: h("a", { href: "/test", class: "child-link" }, "Link"),
+        },
+      })
+      expect(wrapper.find("a").exists()).toBe(true)
+      expect(wrapper.find("a").attributes("href")).toBe("/test")
+    })
+
+    it("passes button styles to the child element when asChild is true", () => {
+      const wrapper = mount(Button, {
+        props: { asChild: true, variant: "secondary" },
+        slots: { default: h("a", { href: "/test" }, "Styled") },
+      })
+      expect(wrapper.find("a").classes()).toContain("bg-secondary")
+    })
+  })
+
+  describe("as prop", () => {
+    it("renders as an anchor when as='a'", () => {
+      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 a div when as='div'", () => {
+      const wrapper = mount(Button, {
+        props: { as: "div" },
+      })
+      expect(wrapper.element.tagName).toBe("DIV")
+    })
+  })
+
+  describe("base styles + a11y", () => {
+    it("has base layout, transition, and focus-visible classes", () => {
+      const wrapper = mount(Button)
+      const classes = wrapper.classes()
+      for (const cls of [
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "rounded-md",
+        "text-sm",
+        "font-medium",
+        "transition-colors",
+        "focus-visible:outline-none",
+        "focus-visible:ring-2",
+        "focus-visible:ring-ring",
+        "disabled:pointer-events-none",
+        "disabled:opacity-50",
+      ]) {
+        expect(classes).toContain(cls)
+      }
+    })
+  })
+})

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+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 "."
+
+export interface ButtonProps extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  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,41 @@
+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",
+        success: "bg-success text-success-foreground hover:bg-success/90",
+        warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+        info: "bg-info text-info-foreground hover:bg-info/90",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        xl: "h-12 rounded-md px-10 text-base",
+        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,117 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { CalendarDate, type DateValue } from "@internationalized/date"
+import { ref } from "vue"
+import { Calendar } from "."
+
+const meta = {
+  title: "UI/Calendar",
+  component: Calendar,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+    locale: { control: "text" },
+    weekStartsOn: { control: { type: "select" }, options: [0, 1, 2, 3, 4, 5, 6] },
+    fixedWeeks: { control: "boolean" },
+    numberOfMonths: { control: { type: "number", min: 1, max: 3 } },
+  },
+} satisfies Meta<typeof Calendar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const today = new CalendarDate(2024, 6, 15)
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { Calendar },
+    setup() {
+      const value = ref<DateValue | undefined>(today)
+      return { args, value, today }
+    },
+    template: `
+      <div class="space-y-2">
+        <Calendar v-bind="args" v-model="value" :placeholder="today" />
+        <div class="text-xs text-muted-foreground">Selected: {{ value?.toString() ?? "(none)" }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const RangeMode: Story = {
+  name: "Multi-month",
+  render: () => ({
+    components: { Calendar },
+    setup() {
+      const value = ref<DateValue | undefined>()
+      return { value, today }
+    },
+    template: `
+      <Calendar v-model="value" :placeholder="today" :number-of-months="2" />
+    `,
+  }),
+}
+
+export const MinMax: Story = {
+  name: "Min / Max",
+  render: () => ({
+    components: { Calendar },
+    setup() {
+      const value = ref<DateValue | undefined>()
+      const min = new CalendarDate(2024, 6, 10)
+      const max = new CalendarDate(2024, 6, 25)
+      return { value, today, min, max }
+    },
+    template: `
+      <div class="space-y-2">
+        <Calendar v-model="value" :placeholder="today" :min-value="min" :max-value="max" />
+        <div class="text-xs text-muted-foreground">Only Jun 10 – Jun 25 are selectable.</div>
+      </div>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { Calendar },
+    setup() {
+      return { today }
+    },
+    template: '<Calendar :placeholder="today" disabled />',
+  }),
+}
+
+export const FixedWeeks: Story = {
+  name: "Fixed weeks",
+  render: () => ({
+    components: { Calendar },
+    setup() {
+      return { today }
+    },
+    template: '<Calendar :placeholder="today" fixed-weeks />',
+  }),
+}
+
+export const Showcase: Story = {
+  name: "Showcase",
+  render: () => ({
+    components: { Calendar },
+    setup() {
+      const a = ref<DateValue | undefined>(today)
+      const b = ref<DateValue | undefined>()
+      return { a, b, today }
+    },
+    template: `
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">With selection</h3>
+          <Calendar v-model="a" :placeholder="today" class="rounded-md border" />
+          <div class="mt-2 text-xs text-muted-foreground">Selected: {{ a?.toString() }}</div>
+        </section>
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Empty</h3>
+          <Calendar v-model="b" :placeholder="today" class="rounded-md border" />
+        </section>
+      </div>
+    `,
+  }),
+}