@commercejs/ui 0.1.0

package/src/runtime/components/rental/CRentalBookingForm.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import type { RentalProductMeta, AvailabilitySlot, CreateRentalBookingInput } from '@commercejs/types'
+import { today, getLocalTimeZone } from '@internationalized/date'
+import type { DateValue } from '@internationalized/date'
+
+/**
+ * CRentalBookingForm — Date range picker for rentals.
+ * Uses Nuxt UI InputDate (range) with Calendar DatePicker for date selection.
+ */
+
+export interface RentalBookingFormProps {
+  /** Rental metadata for the product */
+  rental: RentalProductMeta
+  /** Available time slots (optional — for availability display) */
+  availability?: AvailabilitySlot[]
+  /** Product ID */
+  productId: string
+  /** Whether booking is being submitted */
+  loading?: boolean
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    dates: any
+    summary: any
+  }>
+}
+
+const props = withDefaults(defineProps<RentalBookingFormProps>(), {
+  availability: () => [],
+  loading: false,
+})
+
+const emit = defineEmits<{
+  'submit': [input: CreateRentalBookingInput]
+}>()
+
+const inputDate = useTemplateRef('inputDate')
+
+const dateRange = shallowRef<{ start: DateValue, end: DateValue } | undefined>()
+const quantity = ref(1)
+
+const todayDate = today(getLocalTimeZone())
+
+const unitLabel = computed(() => {
+  const map: Record<string, string> = { hourly: 'hour', daily: 'day', weekly: 'week', monthly: 'month' }
+  return map[props.rental.pricingUnit] || props.rental.pricingUnit
+})
+
+// Calculate duration between dates
+const duration = computed(() => {
+  if (!dateRange.value?.start || !dateRange.value?.end) return 0
+
+  const s = dateRange.value.start
+  const e = dateRange.value.end
+  const startMs = new Date(s.year, s.month - 1, s.day).getTime()
+  const endMs = new Date(e.year, e.month - 1, e.day).getTime()
+  const diffMs = endMs - startMs
+  if (diffMs <= 0) return 0
+
+  const map: Record<string, number> = {
+    hourly: 3600000,
+    daily: 86400000,
+    weekly: 604800000,
+    monthly: 2592000000,
+  }
+  return Math.ceil(diffMs / (map[props.rental.pricingUnit] || 86400000))
+})
+
+// Calculate effective price per unit (considering tiers)
+const effectiveUnitPrice = computed(() => {
+  if (props.rental.pricingTiers?.length) {
+    const sorted = [...props.rental.pricingTiers].sort((a, b) => b.minUnits - a.minUnits)
+    const tier = sorted.find(t => duration.value >= t.minUnits)
+    return tier?.pricePerUnit || props.rental.pricePerUnit
+  }
+  return props.rental.pricePerUnit
+})
+
+const isValid = computed(() => {
+  return duration.value >= props.rental.minDuration
+    && (!props.rental.maxDuration || duration.value <= props.rental.maxDuration)
+})
+
+// Check availability for dates
+const isDateUnavailable = computed(() => {
+  if (!props.availability?.length) return undefined
+  const unavailableDates = new Set(
+    props.availability
+      .filter(s => !s.available)
+      .map(s => s.date)
+  )
+  return (date: DateValue) => {
+    const iso = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`
+    return unavailableDates.has(iso)
+  }
+})
+
+function toISO(date: DateValue): string {
+  return `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`
+}
+
+function handleSubmit() {
+  if (!isValid.value || !dateRange.value?.start || !dateRange.value?.end) return
+  emit('submit', {
+    productId: props.productId,
+    startDate: toISO(dateRange.value.start),
+    endDate: toISO(dateRange.value.end),
+    quantity: quantity.value,
+  })
+}
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.rentalBookingForm ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const merge = (slot: string) => [base[slot], props.ui?.[slot as keyof typeof props.ui]]
+  return {
+    root: merge('root'),
+    dates: merge('dates'),
+    summary: merge('summary'),
+  }
+})
+</script>
+
+<template>
+  <form :class="['space-y-5', slotClasses.root]" @submit.prevent="handleSubmit">
+    <!-- Date range picker -->
+    <div :class="slotClasses.dates">
+      <label class="block text-sm font-medium text-default mb-1">Rental Period</label>
+      <UInputDate
+        ref="inputDate"
+        v-model="dateRange"
+        range
+        :min-value="todayDate"
+        :is-date-unavailable="isDateUnavailable"
+        :disabled="loading"
+      >
+        <template #trailing>
+          <UPopover :reference="(inputDate as any)?.inputsRef?.[0]?.$el">
+            <UButton
+              color="neutral"
+              variant="link"
+              size="sm"
+              icon="i-heroicons-calendar-days"
+              aria-label="Select rental dates"
+              class="px-0"
+            />
+
+            <template #content>
+              <UCalendar
+                v-model="dateRange"
+                class="p-2"
+                :number-of-months="2"
+                range
+                :min-value="todayDate"
+                :is-date-unavailable="isDateUnavailable"
+              />
+            </template>
+          </UPopover>
+        </template>
+      </UInputDate>
+    </div>
+
+    <!-- Duration & pricing summary -->
+    <div v-if="duration > 0" :class="['rounded-xl bg-elevated p-4 space-y-2', slotClasses.summary]">
+      <div class="flex justify-between text-sm">
+        <span class="text-muted">Duration</span>
+        <span class="font-medium text-highlighted">{{ duration }} {{ unitLabel }}{{ duration > 1 ? 's' : '' }}</span>
+      </div>
+      <div class="flex justify-between text-sm">
+        <span class="text-muted">Rate</span>
+        <span class="font-medium text-highlighted">{{ effectiveUnitPrice.formatted }} / {{ unitLabel }}</span>
+      </div>
+      <div v-if="rental.securityDeposit" class="flex justify-between text-sm">
+        <span class="text-muted">Security Deposit</span>
+        <span class="font-medium text-highlighted">{{ rental.securityDeposit.formatted }}</span>
+      </div>
+      <USeparator />
+      <div class="flex justify-between text-base font-bold">
+        <span>Estimated Total</span>
+        <span class="text-primary">{{ effectiveUnitPrice.formatted }} × {{ duration }}</span>
+      </div>
+
+      <!-- Validation messages -->
+      <UAlert
+        v-if="duration < rental.minDuration"
+        icon="i-heroicons-exclamation-triangle"
+        color="warning"
+        :title="`Minimum rental: ${rental.minDuration} ${unitLabel}${rental.minDuration > 1 ? 's' : ''}`"
+        size="sm"
+      />
+      <UAlert
+        v-if="rental.maxDuration && duration > rental.maxDuration"
+        icon="i-heroicons-exclamation-triangle"
+        color="warning"
+        :title="`Maximum rental: ${rental.maxDuration} ${unitLabel}${rental.maxDuration > 1 ? 's' : ''}`"
+        size="sm"
+      />
+    </div>
+
+    <UButton
+      type="submit"
+      block
+      size="lg"
+      color="primary"
+      :loading="loading"
+      :disabled="!isValid || !duration"
+    >
+      Book Rental
+    </UButton>
+  </form>
+</template>

package/src/runtime/components/rental/CRentalCard.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import type { Product, RentalProductMeta, AvailabilitySlot } from '@commercejs/types'
+
+/**
+ * CRentalCard — Product card for rental items.
+ * Shows pricing per unit, deposit requirement, and availability status.
+ */
+
+export interface RentalCardProps {
+  product: Product
+  rental?: RentalProductMeta
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    imageWrapper: any
+    image: any
+    body: any
+    title: any
+    pricing: any
+    meta: any
+    actions: any
+  }>
+}
+
+const props = defineProps<RentalCardProps>()
+
+const emit = defineEmits<{
+  'book': [product: Product]
+}>()
+
+const rentalMeta = computed(() => props.rental || props.product.rental)
+
+function t(value: any): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  return value.en || value.ar || Object.values(value)[0] || ''
+}
+
+const productName = computed(() => t(props.product.name))
+const mainImage = computed(() => props.product.primaryImage || props.product.gallery?.[0])
+
+const unitLabel = computed(() => {
+  const map: Record<string, string> = {
+    hourly: 'hour',
+    daily: 'day',
+    weekly: 'week',
+    monthly: 'month',
+  }
+  return map[rentalMeta.value?.pricingUnit || ''] || rentalMeta.value?.pricingUnit
+})
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.rentalCard ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const merge = (slot: string) => [base[slot], props.ui?.[slot as keyof typeof props.ui]]
+  return {
+    root: merge('root'),
+    imageWrapper: merge('imageWrapper'),
+    image: merge('image'),
+    body: merge('body'),
+    title: merge('title'),
+    pricing: merge('pricing'),
+    meta: merge('meta'),
+    actions: merge('actions'),
+  }
+})
+</script>
+
+<template>
+  <div :class="['group relative rounded-lg overflow-hidden ring ring-default bg-default hover:shadow-lg transition-all duration-200', slotClasses.root]">
+    <!-- Image -->
+    <div :class="['relative aspect-[4/3] overflow-hidden bg-elevated', slotClasses.imageWrapper]">
+      <img
+        v-if="mainImage"
+        :src="mainImage.url"
+        :alt="mainImage.alt || productName"
+        :class="['size-full object-cover transition-transform duration-300 group-hover:scale-105', slotClasses.image]"
+      />
+      <!-- Rental badge -->
+      <UBadge color="info" size="sm" class="absolute top-3 start-3">
+        <UIcon name="i-heroicons-calendar-days" class="me-0.5" />
+        Rental
+      </UBadge>
+    </div>
+
+    <!-- Body -->
+    <div :class="['p-4 space-y-2', slotClasses.body]">
+      <slot name="title" :name="productName">
+        <h3 :class="['font-medium text-sm text-highlighted line-clamp-2', slotClasses.title]">{{ productName }}</h3>
+      </slot>
+
+      <!-- Pricing -->
+      <slot name="pricing" :rental="rentalMeta">
+        <div v-if="rentalMeta" :class="['flex items-baseline gap-1', slotClasses.pricing]">
+          <span class="text-lg font-bold text-highlighted">{{ rentalMeta.pricePerUnit.formatted }}</span>
+          <span class="text-xs text-muted">/ {{ unitLabel }}</span>
+        </div>
+      </slot>
+
+      <!-- Meta info -->
+      <slot name="meta" :rental="rentalMeta">
+        <div v-if="rentalMeta" :class="['flex flex-wrap gap-2 text-xs', slotClasses.meta]">
+          <span v-if="rentalMeta.securityDeposit" class="inline-flex items-center gap-1 text-muted">
+            <UIcon name="i-heroicons-shield-check" />
+            {{ rentalMeta.securityDeposit.formatted }} deposit
+          </span>
+          <span class="inline-flex items-center gap-1 text-muted">
+            <UIcon name="i-heroicons-clock" />
+            Min {{ rentalMeta.minDuration }} {{ unitLabel }}{{ rentalMeta.minDuration > 1 ? 's' : '' }}
+          </span>
+          <span v-if="rentalMeta.requiresPickup" class="inline-flex items-center gap-1 text-muted">
+            <UIcon name="i-heroicons-map-pin" />
+            Pickup required
+          </span>
+        </div>
+      </slot>
+
+      <!-- Tiered pricing -->
+      <slot name="tiers" :tiers="rentalMeta?.pricingTiers">
+        <div v-if="rentalMeta?.pricingTiers?.length" class="text-xs text-muted space-y-0.5 pt-1">
+          <div v-for="(tier, i) in rentalMeta.pricingTiers" :key="i" class="flex justify-between">
+            <span>{{ tier.minUnits }}+ {{ unitLabel }}s</span>
+            <span class="font-medium text-highlighted">{{ tier.pricePerUnit.formatted }}/{{ unitLabel }}</span>
+          </div>
+        </div>
+      </slot>
+
+      <!-- Actions -->
+      <slot name="actions">
+        <UButton
+          block
+          size="sm"
+          color="primary"
+          class="mt-2"
+          @click="emit('book', product)"
+        >
+          <UIcon name="i-heroicons-calendar-days-20-solid" class="me-1" />
+          Book Now
+        </UButton>
+      </slot>
+    </div>
+  </div>
+</template>

package/src/runtime/components/review/CReviewCard.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { Review } from '@commercejs/types'
+
+/**
+ * CReviewCard — Individual product review card.
+ * Displays reviewer name, rating, title, body, and verification badge.
+ */
+
+export interface ReviewCardProps {
+  /** Review data from @commercejs/types */
+  review: Review
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    header: any
+    author: any
+    date: any
+    title: any
+    body: any
+    verified: any
+  }>
+}
+
+const props = defineProps<ReviewCardProps>()
+
+const formattedDate = computed(() => {
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    }).format(new Date(props.review.createdAt))
+  } catch {
+    return props.review.createdAt
+  }
+})
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.reviewCard ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const merge = (slot: string) => [
+    base[slot],
+    props.ui?.[slot as keyof typeof props.ui],
+  ]
+  return {
+    root: merge('root'),
+    header: merge('header'),
+    author: merge('author'),
+    date: merge('date'),
+    title: merge('title'),
+    body: merge('body'),
+    verified: merge('verified'),
+  }
+})
+</script>
+
+<template>
+  <div :class="slotClasses.root">
+    <!-- Header: stars + author + date -->
+    <div :class="slotClasses.header">
+      <slot name="rating" :rating="review.rating">
+        <CReviewStars :model-value="review.rating" size="sm" />
+      </slot>
+
+      <div class="flex items-center gap-2 text-sm">
+        <slot name="author" :author="review.authorName">
+          <span :class="slotClasses.author">{{ review.authorName }}</span>
+        </slot>
+
+        <slot name="verified" :verified="review.verified">
+          <UBadge v-if="review.verified" color="success" variant="subtle" size="xs">
+            <UIcon name="i-heroicons-check-badge-20-solid" class="me-0.5" />
+            Verified
+          </UBadge>
+        </slot>
+
+        <slot name="date" :date="formattedDate">
+          <span :class="slotClasses.date">{{ formattedDate }}</span>
+        </slot>
+      </div>
+    </div>
+
+    <!-- Title -->
+    <slot v-if="review.title" name="title" :title="review.title">
+      <h4 :class="slotClasses.title">{{ review.title }}</h4>
+    </slot>
+
+    <!-- Body -->
+    <slot v-if="review.body" name="body" :body="review.body">
+      <p :class="slotClasses.body">{{ review.body }}</p>
+    </slot>
+  </div>
+</template>

package/src/runtime/components/review/CReviewStars.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+/**
+ * CReviewStars — Star rating display (read-only or interactive).
+ * Uses Heroicons star icons via UIcon.
+ */
+
+export interface ReviewStarsProps {
+  /** Rating value (0-5, supports half values) */
+  modelValue?: number
+  /** Maximum stars */
+  max?: number
+  /** Whether the user can click to rate */
+  interactive?: boolean
+  /** Size variant */
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    star: any
+    starFilled: any
+    starEmpty: any
+    count: any
+  }>
+}
+
+const props = withDefaults(defineProps<ReviewStarsProps>(), {
+  modelValue: 0,
+  max: 5,
+  interactive: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+const hoverValue = ref<number | null>(null)
+
+const displayValue = computed(() => hoverValue.value ?? props.modelValue)
+
+function handleClick(star: number) {
+  if (props.interactive) {
+    emit('update:modelValue', star)
+  }
+}
+
+function handleHover(star: number) {
+  if (props.interactive) {
+    hoverValue.value = star
+  }
+}
+
+function handleLeave() {
+  hoverValue.value = null
+}
+
+const iconSize = computed(() => {
+  const map = { xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg' }
+  return map[props.size] || map.md
+})
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.reviewStars ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  return {
+    root: [base.root, props.ui?.root],
+    star: [base.star, props.ui?.star],
+    starFilled: [base.starFilled, props.ui?.starFilled],
+    starEmpty: [base.starEmpty, props.ui?.starEmpty],
+    count: [base.count, props.ui?.count],
+  }
+})
+</script>
+
+<template>
+  <div
+    :class="['inline-flex items-center gap-0.5', slotClasses.root]"
+    :role="interactive ? 'radiogroup' : undefined"
+    :aria-label="interactive ? 'Rating' : undefined"
+    @mouseleave="handleLeave"
+  >
+    <button
+      v-for="star in max"
+      :key="star"
+      :class="[
+        slotClasses.star,
+        iconSize,
+        interactive ? 'cursor-pointer' : 'cursor-default',
+      ]"
+      :disabled="!interactive"
+      :aria-label="`${star} star${star > 1 ? 's' : ''}`"
+      @click="handleClick(star)"
+      @mouseenter="handleHover(star)"
+    >
+      <UIcon
+        :name="star <= displayValue ? 'i-heroicons-star-20-solid' : 'i-heroicons-star'"
+        :class="star <= displayValue ? ['text-amber-400', slotClasses.starFilled] : ['text-muted/30', slotClasses.starEmpty]"
+      />
+    </button>
+
+    <slot name="count" />
+  </div>
+</template>

package/src/runtime/components/subscription/CSubscriptionCard.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { Product, SubscriptionProductMeta } from '@commercejs/types'
+
+/**
+ * CSubscriptionCard — Product card for subscription products.
+ * Shows recurring price, interval, trial info, and subscribe CTA.
+ */
+
+export interface SubscriptionCardProps {
+  product: Product
+  subscription?: SubscriptionProductMeta
+  /** Highlight as recommended/popular */
+  featured?: boolean
+  /** Per-instance theme overrides */
+  ui?: Partial<{
+    root: any
+    header: any
+    pricing: any
+    features: any
+    actions: any
+  }>
+}
+
+const props = withDefaults(defineProps<SubscriptionCardProps>(), {
+  featured: false,
+})
+
+const emit = defineEmits<{
+  'subscribe': [product: Product]
+}>()
+
+const subMeta = computed(() => props.subscription || props.product.subscription)
+
+function t(value: any): string {
+  if (!value) return ''
+  if (typeof value === 'string') return value
+  return value.en || value.ar || Object.values(value)[0] || ''
+}
+
+const productName = computed(() => t(props.product.name))
+
+const intervalLabel = computed(() => {
+  if (!subMeta.value) return ''
+  const count = subMeta.value.intervalCount
+  const map: Record<string, string> = {
+    daily: count > 1 ? `${count} days` : 'day',
+    weekly: count > 1 ? `${count} weeks` : 'week',
+    monthly: count > 1 ? `${count} months` : 'month',
+    quarterly: 'quarter',
+    yearly: count > 1 ? `${count} years` : 'year',
+  }
+  return map[subMeta.value.interval] || subMeta.value.interval
+})
+
+// Resolve theme from app.config
+const appConfig = useAppConfig()
+const theme = computed(() => (appConfig.ui as any)?.subscriptionCard ?? {})
+
+const slotClasses = computed(() => {
+  const base = theme.value?.slots ?? {}
+  const merge = (slot: string) => [base[slot], props.ui?.[slot as keyof typeof props.ui]]
+  return {
+    root: merge('root'),
+    header: merge('header'),
+    pricing: merge('pricing'),
+    features: merge('features'),
+    actions: merge('actions'),
+  }
+})
+</script>
+
+<template>
+  <div :class="[
+    'relative rounded-xl overflow-hidden ring transition-all duration-200',
+    featured ? 'ring-2 ring-primary shadow-lg shadow-primary/10' : 'ring-default',
+    'bg-default hover:shadow-lg',
+    slotClasses.root,
+  ]">
+    <!-- Featured badge -->
+    <div v-if="featured" class="bg-primary text-white text-center text-xs font-semibold py-1.5">
+      Most Popular
+    </div>
+
+    <div class="p-6 space-y-4">
+      <!-- Header -->
+      <div :class="['text-center', slotClasses.header]">
+        <slot name="title" :name="productName">
+          <h3 class="text-lg font-semibold text-highlighted">{{ productName }}</h3>
+        </slot>
+        <slot name="description">
+          <p v-if="product.shortDescription" class="text-sm text-muted mt-1">
+            {{ t(product.shortDescription) }}
+          </p>
+        </slot>
+      </div>
+
+      <!-- Pricing -->
+      <div :class="['text-center py-4', slotClasses.pricing]">
+        <slot name="pricing" :subscription="subMeta">
+          <div v-if="subMeta" class="space-y-1">
+            <div class="flex items-baseline justify-center gap-1">
+              <span class="text-4xl font-bold text-highlighted">{{ subMeta.recurringPrice.formatted }}</span>
+              <span class="text-muted text-sm">/ {{ intervalLabel }}</span>
+            </div>
+            <p v-if="subMeta.trialDays > 0" class="text-sm text-success font-medium">
+              {{ subMeta.trialDays }}-day free trial
+            </p>
+          </div>
+        </slot>
+      </div>
+
+      <!-- Features / description -->
+      <slot name="features">
+        <div
+          v-if="product.description"
+          :class="['prose prose-sm max-w-none text-muted', slotClasses.features]"
+          v-html="t(product.description)"
+        />
+      </slot>
+
+      <!-- Actions -->
+      <div :class="slotClasses.actions">
+        <slot name="actions">
+          <UButton
+            block
+            size="lg"
+            :color="featured ? 'primary' : 'neutral'"
+            :variant="featured ? 'solid' : 'outline'"
+            @click="emit('subscribe', product)"
+          >
+            {{ subMeta?.trialDays ? 'Start Free Trial' : 'Subscribe' }}
+          </UButton>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>