betterstart-cli 0.0.1

package/dist/assets/shared-assets/react-admin/custom/date-picker.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { Calendar } from '@admin/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
+import { cn } from '@admin/utils/shared/cn'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+import * as React from 'react'
+
+interface DatePickerProps {
+  value?: string
+  onChange?: (value: string) => void
+  disabled?: boolean
+  placeholder?: string
+  className?: string
+  /** Start year for the year dropdown (defaults to 1900) */
+  startYear?: number
+  /** End year for the year dropdown (defaults to current year + 100) */
+  endYear?: number
+}
+
+export function DatePicker({
+  value,
+  onChange,
+  disabled,
+  placeholder = 'Pick a date',
+  className,
+  startYear = 2022,
+  endYear = new Date().getFullYear() + 5
+}: DatePickerProps) {
+  const [date, setDate] = React.useState<Date | undefined>(value ? new Date(value) : undefined)
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="lg"
+          className={cn(
+            'w-full justify-start text-left font-normal pl-3!',
+            { 'text-muted-foreground': !date },
+            className
+          )}
+          disabled={disabled}
+        >
+          <CalendarIcon className="size-4" />
+          {date ? format(date, 'PPP') : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0 overflow-hidden" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          captionLayout="dropdown"
+          startMonth={new Date(startYear, 0)}
+          endMonth={new Date(endYear, 11)}
+          onSelect={(_date) => {
+            setDate(_date)
+            if (onChange) {
+              onChange(_date ? format(_date, 'yyyy-MM-dd') : '')
+            }
+            setOpen(false)
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/date-range-picker.tsx

@@ -0,0 +1,216 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { Calendar } from '@admin/components/ui/calendar'
+import { Input } from '@admin/components/ui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
+import {
+  buildDateRange,
+  DATE_RANGE_END_TIME,
+  DATE_RANGE_START_TIME,
+  formatDateRangeInputDate,
+  formatDateRangeParamDate,
+  getDateRangeTriggerLabel,
+  getOrderedDateRange,
+  normalizeDateRangeTime,
+  parseDateInputValue,
+  parseEditableDateRangeDate
+} from '@admin/utils/date/date'
+import { cn } from '@admin/utils/shared/cn'
+import { CalendarIcon, ChevronDown, CornerDownLeft } from 'lucide-react'
+import * as React from 'react'
+import type { DateRange } from 'react-day-picker'
+
+interface DateRangePickerProps {
+  from?: string
+  to?: string
+  onChange?: (range: { from?: string; to?: string; fromTime?: string; toTime?: string }) => void
+  disabled?: boolean
+  placeholder?: string
+  className?: string
+}
+
+export function DateRangePicker({
+  from,
+  to,
+  onChange,
+  disabled,
+  placeholder = 'Pick a date range',
+  className
+}: DateRangePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [draftRange, setDraftRange] = React.useState<DateRange | undefined>(() =>
+    buildDateRange(from, to)
+  )
+  const [fromInput, setFromInput] = React.useState(() =>
+    formatDateRangeInputDate(parseDateInputValue(from))
+  )
+  const [toInput, setToInput] = React.useState(() =>
+    formatDateRangeInputDate(parseDateInputValue(to))
+  )
+  const [fromTime, setFromTime] = React.useState(DATE_RANGE_START_TIME)
+  const [toTime, setToTime] = React.useState(DATE_RANGE_END_TIME)
+  const [calendarMonth, setCalendarMonth] = React.useState<Date | undefined>(
+    () => parseDateInputValue(from) ?? parseDateInputValue(to)
+  )
+
+  const committedFrom = parseDateInputValue(from)
+  const committedTo = parseDateInputValue(to)
+  const triggerLabel = getDateRangeTriggerLabel(committedFrom, committedTo, placeholder)
+
+  const syncDraftFromProps = () => {
+    const nextRange = buildDateRange(from, to)
+    setDraftRange(nextRange)
+    setFromInput(formatDateRangeInputDate(nextRange?.from))
+    setToInput(formatDateRangeInputDate(nextRange?.to))
+    setFromTime(DATE_RANGE_START_TIME)
+    setToTime(DATE_RANGE_END_TIME)
+    setCalendarMonth(nextRange?.from ?? nextRange?.to)
+  }
+
+  const handleApply = () => {
+    const orderedRange = getOrderedDateRange({
+      from: parseEditableDateRangeDate(fromInput) ?? draftRange?.from,
+      to: parseEditableDateRangeDate(toInput) ?? draftRange?.to
+    })
+
+    onChange?.({
+      from: orderedRange?.from ? formatDateRangeParamDate(orderedRange.from) : undefined,
+      to: orderedRange?.to ? formatDateRangeParamDate(orderedRange.to) : undefined,
+      fromTime: normalizeDateRangeTime(fromTime, DATE_RANGE_START_TIME),
+      toTime: normalizeDateRangeTime(toTime, DATE_RANGE_END_TIME)
+    })
+    setOpen(false)
+  }
+
+  const handleRangeSelect = (nextRange: DateRange | undefined, selectedDay?: Date) => {
+    const nextDraftRange =
+      draftRange?.from && draftRange.to && selectedDay
+        ? { from: selectedDay, to: undefined }
+        : nextRange
+    const orderedRange = getOrderedDateRange(nextDraftRange)
+    setDraftRange(orderedRange)
+    setFromInput(formatDateRangeInputDate(orderedRange?.from))
+    setToInput(formatDateRangeInputDate(orderedRange?.to))
+    setCalendarMonth(orderedRange?.from ?? orderedRange?.to)
+  }
+
+  const handleDateInputChange = (field: 'from' | 'to', value: string) => {
+    const parsedDate = parseEditableDateRangeDate(value)
+
+    if (field === 'from') {
+      setFromInput(value)
+      if (parsedDate) setCalendarMonth(parsedDate)
+      setDraftRange((currentRange) =>
+        getOrderedDateRange({
+          from: parsedDate,
+          to: currentRange?.to
+        })
+      )
+      return
+    }
+
+    setToInput(value)
+    if (parsedDate) setCalendarMonth(parsedDate)
+    setDraftRange((currentRange) =>
+      getOrderedDateRange({
+        from: currentRange?.from,
+        to: parsedDate
+      })
+    )
+  }
+
+  const canApply = Boolean(parseEditableDateRangeDate(fromInput) ?? draftRange?.from)
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen)
+        if (nextOpen) {
+          syncDraftFromProps()
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button variant="outline" className={cn('w-[206px]', className)} disabled={disabled}>
+          <CalendarIcon data-icon="inline-start" />
+          <span className="min-w-0 flex-1 truncate text-left tabular-nums">{triggerLabel}</span>
+          <ChevronDown data-icon="inline-end" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[282px] gap-0 overflow-hidden rounded-lg p-0" align="start">
+        <Calendar
+          mode="range"
+          month={calendarMonth}
+          onMonthChange={setCalendarMonth}
+          selected={draftRange}
+          onSelect={handleRangeSelect}
+          numberOfMonths={1}
+          weekStartsOn={1}
+          className="w-full"
+          classNames={{
+            root: 'w-full',
+            months: 'relative flex flex-col',
+            month: 'flex w-full flex-col gap-2',
+            nav: 'absolute right-0 top-0 flex items-center gap-1',
+            month_caption: 'flex h-8 items-center justify-start pr-18',
+            caption_label: 'text-sm font-semibold text-foreground',
+            weekdays: 'flex',
+            weekday:
+              'flex-1 text-center text-xs font-normal leading-8 text-muted-foreground select-none',
+            week: 'mt-1 flex w-full'
+          }}
+        />
+        <div className="flex flex-col gap-2 border-t p-3">
+          <div className="flex flex-col gap-1">
+            <label className="text-sm text-muted-foreground" htmlFor="date-range-start-date">
+              Start
+            </label>
+            <div className="grid grid-cols-[1fr_96px] gap-2">
+              <Input
+                id="date-range-start-date"
+                value={fromInput}
+                onChange={(event) => handleDateInputChange('from', event.target.value)}
+                placeholder="Apr 10, 2026"
+                className="h-8 rounded-md px-3 text-sm"
+              />
+              <Input
+                type="time"
+                value={fromTime}
+                onChange={(event) => setFromTime(event.target.value)}
+                aria-label="Start time"
+                className="h-8 rounded-md px-3 text-sm tabular-nums"
+              />
+            </div>
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-sm text-muted-foreground" htmlFor="date-range-end-date">
+              End
+            </label>
+            <div className="grid grid-cols-[1fr_96px] gap-2">
+              <Input
+                id="date-range-end-date"
+                value={toInput}
+                onChange={(event) => handleDateInputChange('to', event.target.value)}
+                placeholder="Apr 30, 2026"
+                className="h-8 rounded-md px-3 text-sm"
+              />
+              <Input
+                type="time"
+                value={toTime}
+                onChange={(event) => setToTime(event.target.value)}
+                aria-label="End time"
+                className="h-8 rounded-md px-3 text-sm tabular-nums"
+              />
+            </div>
+          </div>
+          <Button variant="outline" onClick={handleApply} disabled={!canApply}>
+            Apply
+            <CornerDownLeft data-icon="inline-end" />
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/dynamic-list-field.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@admin/components/ui/form'
+import { Input } from '@admin/components/ui/input'
+import { Label } from '@admin/components/ui/label'
+import { cn } from '@admin/utils/shared/cn'
+import { Plus, Trash2 } from 'lucide-react'
+import { useFieldArray, useFormContext } from 'react-hook-form'
+
+interface DynamicListFieldProps {
+  name: string
+  label: string
+  hideLabel?: boolean
+  disabled?: boolean
+  maxItems?: number
+  placeholder?: string
+  description?: string
+  className?: string
+}
+
+export function DynamicListField({
+  name,
+  label,
+  hideLabel,
+  disabled,
+  maxItems,
+  placeholder = 'Enter value',
+  description,
+  className
+}: DynamicListFieldProps) {
+  const { control } = useFormContext()
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name
+  })
+
+  const canAddMore = !maxItems || fields.length < maxItems
+
+  const handleAdd = () => {
+    if (canAddMore) {
+      append('')
+    }
+  }
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex flex-col gap-1">
+          <Label className={cn({ 'sr-only': hideLabel })}>{label}</Label>
+          {description ? (
+            <p className="text-[0.8rem] text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handleAdd}
+          disabled={disabled || !canAddMore}
+        >
+          <Plus className="size-4" />
+          Add {label}
+        </Button>
+      </div>
+
+      {fields.length === 0 && (
+        <div className="text-sm text-muted-foreground">
+          No items added yet. Click "Add {label}" to get started.
+        </div>
+      )}
+
+      <div className="space-y-3">
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex items-start gap-2">
+            <FormField
+              control={control}
+              name={`${name}.${index}`}
+              render={({ field: formField }) => (
+                <FormItem className="flex-1">
+                  <FormLabel className="sr-only">
+                    {label} {index + 1}
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...formField} placeholder={placeholder} disabled={disabled} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button
+              type="button"
+              variant="destructive"
+              size="icon"
+              onClick={() => remove(index)}
+              disabled={disabled}
+              className="mt-0"
+            >
+              <Trash2 className="size-4" />
+            </Button>
+          </div>
+        ))}
+      </div>
+
+      {maxItems && (
+        <div className="text-xs text-muted-foreground">
+          {fields.length} / {maxItems} items
+        </div>
+      )}
+    </div>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/gallery-field.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { MediaGalleryDialog } from '@admin/components/shared/media/media-gallery-dialog'
+import { useMediaByIds } from '@admin/hooks/use-media'
+import type { AdminMedia } from '@admin/types'
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from '@dnd-kit/core'
+import { arrayMove, rectSortingStrategy, SortableContext } from '@dnd-kit/sortable'
+import { ImageIcon, Plus } from 'lucide-react'
+import * as React from 'react'
+import { SortableGalleryItem } from './sortable-gallery-item'
+
+interface GalleryFieldProps {
+  value?: string[]
+  onChange: (value: string[]) => void
+  disabled?: boolean
+  className?: string
+  maxItems?: number
+}
+
+export function GalleryField({
+  value = [],
+  onChange,
+  disabled,
+  className,
+  maxItems
+}: GalleryFieldProps) {
+  const [open, setOpen] = React.useState(false)
+  const { data: mediaItems } = useMediaByIds(value)
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor)
+  )
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+
+    const oldIndex = value.indexOf(active.id as string)
+    const newIndex = value.indexOf(over.id as string)
+    if (oldIndex !== -1 && newIndex !== -1) {
+      onChange(arrayMove(value, oldIndex, newIndex))
+    }
+  }
+
+  function handleSelect(selected: AdminMedia | AdminMedia[]) {
+    const items = Array.isArray(selected) ? selected : [selected]
+    const newIds = items.map((m) => m.id).filter((id) => !value.includes(id))
+    const merged = [...value, ...newIds]
+    onChange(maxItems ? merged.slice(0, maxItems) : merged)
+  }
+
+  function handleRemove(id: string) {
+    onChange(value.filter((v) => v !== id))
+  }
+
+  const mediaMap = React.useMemo(() => {
+    const map = new Map<string, AdminMedia>()
+    if (mediaItems) {
+      for (let i = 0; i < value.length; i++) {
+        const m = mediaItems[i]
+        if (m) map.set(m.id, m)
+      }
+    }
+    return map
+  }, [mediaItems, value])
+
+  const canAdd = !maxItems || value.length < maxItems
+
+  return (
+    <div className={className}>
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <SortableContext items={value} strategy={rectSortingStrategy}>
+          <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5">
+            {value.map((id) => {
+              const item = mediaMap.get(id)
+              return (
+                <SortableGalleryItem
+                  key={id}
+                  id={id}
+                  media={item}
+                  disabled={disabled}
+                  onRemove={() => handleRemove(id)}
+                />
+              )
+            })}
+
+            {canAdd && !disabled && (
+              <button
+                type="button"
+                onClick={() => setOpen(true)}
+                className="flex aspect-square items-center justify-center rounded-lg border border-dashed transition-colors hover:border-primary/50 hover:bg-muted/50"
+              >
+                <Plus className="size-6 text-foreground" />
+              </button>
+            )}
+          </div>
+        </SortableContext>
+      </DndContext>
+
+      {value.length === 0 && (
+        <button
+          type="button"
+          onClick={() => !disabled && setOpen(true)}
+          disabled={disabled}
+          className="flex w-full flex-col items-center justify-center gap-2 rounded-lg border border-dashed p-8 transition-colors hover:border-primary/50 hover:bg-muted/50 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <ImageIcon className="size-8 text-foreground" />
+          <span className="text-sm text-muted-foreground">Click to select media</span>
+        </button>
+      )}
+
+      <MediaGalleryDialog open={open} onOpenChange={setOpen} onSelect={handleSelect} mode="multi" />
+    </div>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/gallery-thumbnail.tsx

@@ -0,0 +1,39 @@
+import type { AdminMedia } from '@admin/types'
+import { FileText, Film } from 'lucide-react'
+import Image from 'next/image'
+
+export function GalleryThumbnail({ media }: { media: AdminMedia }) {
+  if (media.contentType.startsWith('image/')) {
+    return (
+      <Image
+        src={media.url}
+        alt={media.alt || media.filename}
+        fill
+        sizes="(max-width: 640px) 33vw, (max-width: 768px) 25vw, 160px"
+        className="object-cover"
+        loading="lazy"
+        draggable={false}
+      />
+    )
+  }
+
+  if (media.contentType.startsWith('video/')) {
+    return (
+      <div className="flex size-full flex-col items-center justify-center gap-1">
+        <Film className="size-6 text-foreground" />
+        <span className="max-w-full truncate px-1 text-[9px] text-muted-foreground">
+          {media.filename}
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-1">
+      <FileText className="size-6 text-foreground" />
+      <span className="max-w-full truncate px-1 text-[9px] text-muted-foreground">
+        {media.filename}
+      </span>
+    </div>
+  )
+}