@betterstart/cli 0.1.3 → 0.1.4

package/templates/ui/image-upload-field.tsx

@@ -0,0 +1,360 @@
+'use client'
+
+import { useUpload } from '@cms/hooks/use-upload'
+import { cn } from '@cms/utils/cn'
+import { Check, Loader2, Upload, X } from 'lucide-react'
+import * as React from 'react'
+import { toast } from 'sonner'
+import { Button } from './button'
+import { Input } from './input'
+import { Progress } from './progress'
+
+function isValidUrl(url: string): boolean {
+  try {
+    new URL(url)
+    return true
+  } catch {
+    return false
+  }
+}
+
+function createPreviewUrl(file: File): string {
+  return URL.createObjectURL(file)
+}
+
+function revokePreviewUrl(url: string): void {
+  if (url.startsWith('blob:')) URL.revokeObjectURL(url)
+}
+
+function useFetchImage({ maxSizeInMB }: { accept: string; maxSizeInMB: number }) {
+  const [isFetching, setIsFetching] = React.useState(false)
+
+  const fetchImageFromUrl = React.useCallback(
+    async (url: string): Promise<File | null> => {
+      setIsFetching(true)
+      try {
+        const response = await fetch(url)
+        if (!response.ok) {
+          toast.error('Failed to fetch image from URL')
+          return null
+        }
+        const blob = await response.blob()
+        if (blob.size > maxSizeInMB * 1024 * 1024) {
+          toast.error(`Image exceeds ${maxSizeInMB}MB limit`)
+          return null
+        }
+        const filename = url.split('/').pop() || 'image'
+        return new File([blob], filename, { type: blob.type })
+      } catch {
+        toast.error('Failed to fetch image from URL')
+        return null
+      } finally {
+        setIsFetching(false)
+      }
+    },
+    [maxSizeInMB]
+  )
+
+  return { fetchImageFromUrl, isFetching }
+}
+
+export interface ImageUploadFieldProps {
+  value?: string
+  onChange: (value: string) => void
+  onBlur?: () => void
+  disabled?: boolean
+  accept?: string
+  maxSizeInMB?: number
+  className?: string
+  label?: string
+  description?: string
+}
+
+interface UrlInputState {
+  value: string
+  preview: string | null
+}
+
+/**
+ * Image upload field component with R2 integration
+ * Designed for use in forms with react-hook-form
+ */
+export function ImageUploadField({
+  value,
+  onChange,
+  onBlur,
+  disabled = false,
+  accept = 'image/*',
+  maxSizeInMB = 5,
+  className,
+  label,
+  description
+}: ImageUploadFieldProps) {
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+  const [previewUrl, setPreviewUrl] = React.useState<string | null>(value || null)
+  const [urlState, setUrlState] = React.useState<UrlInputState>({
+    value: '',
+    preview: null
+  })
+
+  const { fetchImageFromUrl, isFetching: isFetchingUrl } = useFetchImage({
+    accept,
+    maxSizeInMB
+  })
+
+  const { upload, mutation, progress } = useUpload({
+    accept,
+    maxSizeInMB,
+    validationConfig: {
+      maxFiles: 1
+    },
+    onSuccess: (result) => {
+      if (result.success && result.files?.[0]) {
+        const uploadedUrl = result.files[0].url
+        onChange(uploadedUrl)
+        setPreviewUrl(uploadedUrl)
+        toast.success('Image uploaded successfully')
+      } else {
+        const errorMsg = result.error || 'Upload failed'
+        toast.error(errorMsg)
+        setPreviewUrl(value || null)
+      }
+    },
+    onError: (error) => {
+      toast.error(error.message || 'Network error during upload')
+      setPreviewUrl(value || null)
+    },
+    prefix: 'images'
+  })
+
+  // Update preview when value changes externally
+  React.useEffect(() => {
+    if (value) {
+      setPreviewUrl(value)
+    }
+  }, [value])
+
+  // Cleanup object URLs on unmount
+  React.useEffect(() => {
+    return () => {
+      if (previewUrl) {
+        revokePreviewUrl(previewUrl)
+      }
+    }
+  }, [previewUrl])
+
+  const handleFileSelect = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (!file) return
+
+      if (file.size === 0) {
+        toast.error('Cannot upload empty file')
+        if (fileInputRef.current) {
+          fileInputRef.current.value = ''
+        }
+        return
+      }
+
+      // Create local preview
+      try {
+        const localPreview = createPreviewUrl(file)
+        setPreviewUrl(localPreview)
+      } catch (error) {
+        console.error('[ImageUploadField] Failed to create preview:', error)
+        toast.error('Failed to preview image')
+        return
+      }
+
+      upload([file])
+    },
+    [upload]
+  )
+
+  const handleUrlChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const url = e.target.value.trim()
+    const preview = url && isValidUrl(url) ? url : null
+    setUrlState({ value: url, preview })
+  }, [])
+
+  const handleUrlConfirm = React.useCallback(async () => {
+    if (!urlState.value.trim()) {
+      toast.error('Please enter a valid image URL')
+      return
+    }
+
+    const file = await fetchImageFromUrl(urlState.value.trim())
+    if (!file) return
+
+    // Create local preview
+    try {
+      const localPreview = createPreviewUrl(file)
+      setPreviewUrl(localPreview)
+      setUrlState({ value: '', preview: null })
+    } catch (error) {
+      console.error('[ImageUploadField] Failed to create preview:', error)
+      toast.error('Failed to preview image')
+      return
+    }
+
+    upload([file])
+  }, [urlState.value, fetchImageFromUrl, upload])
+
+  const handleRemove = React.useCallback(() => {
+    if (previewUrl) {
+      revokePreviewUrl(previewUrl)
+    }
+    setPreviewUrl(null)
+    setUrlState({ value: '', preview: null })
+    onChange('')
+    mutation.reset()
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }, [previewUrl, onChange, mutation])
+
+  const handleClick = React.useCallback(() => {
+    fileInputRef.current?.click()
+  }, [])
+
+  const isUploading = mutation.isPending
+  const uploadProgress = progress[0]?.progress || 0
+  const displayPreview = urlState.preview || previewUrl
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {label && (
+        <label htmlFor="file-input" className="text-sm font-medium">
+          {label}
+        </label>
+      )}
+      {description && <p className="text-sm text-muted-foreground">{description}</p>}
+
+      <div className="space-y-4">
+        <input
+          id="file-input"
+          ref={fileInputRef}
+          type="file"
+          accept={accept}
+          onChange={handleFileSelect}
+          onBlur={onBlur}
+          disabled={disabled || isUploading || isFetchingUrl}
+          className="hidden"
+        />
+
+        {/* URL Input Section */}
+        <div className="space-y-2">
+          <div className="flex gap-2">
+            <Input
+              type="url"
+              placeholder="Paste image URL here or Click below to upload"
+              value={urlState.value}
+              onChange={handleUrlChange}
+              onBlur={onBlur}
+              disabled={disabled || isUploading || isFetchingUrl}
+              className="flex-1"
+            />
+            {urlState.preview && (
+              <Button
+                type="button"
+                onClick={handleUrlConfirm}
+                disabled={disabled || isUploading || isFetchingUrl}
+                className="shrink-0"
+                size="lg"
+              >
+                {isFetchingUrl ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <>
+                    <Check className="size-4" />
+                    Confirm
+                  </>
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Preview or Upload Area */}
+        {displayPreview ? (
+          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary h-50 flex items-center justify-center p-10 group">
+            <img
+              src={displayPreview}
+              alt="Preview"
+              className="w-full h-auto max-h-40 object-contain"
+            />
+
+            {/* Upload Progress Overlay */}
+            {isUploading && (
+              <div className="absolute inset-0 bg-black/50 flex flex-col items-center justify-center gap-2">
+                <Loader2 className="size-8 text-white animate-spin" />
+                <Progress value={uploadProgress} className="w-3/4" />
+                <span className="text-white text-sm">{uploadProgress}%</span>
+              </div>
+            )}
+
+            {/* Remove Button */}
+            {!isUploading && !isFetchingUrl && (
+              <Button
+                type="button"
+                variant="destructive"
+                size="icon"
+                className="absolute top-2 right-2 hidden group-hover:flex"
+                onClick={handleRemove}
+                disabled={disabled}
+              >
+                <X className="size-4" />
+              </Button>
+            )}
+
+            {/* URL Preview Indicator */}
+            {urlState.preview && !previewUrl && (
+              <div className="absolute bottom-2 left-2 bg-primary/90 text-primary-foreground text-xs px-2 py-1 rounded">
+                Click Confirm to upload
+              </div>
+            )}
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={handleClick}
+            disabled={disabled || isUploading}
+            className={cn(
+              'w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary h-50 flex items-center justify-center p-10 group',
+              'hover:border-primary/50 transition-colors',
+              'flex flex-col items-center justify-center gap-2 p-8',
+              'disabled:opacity-50 disabled:cursor-not-allowed'
+            )}
+          >
+            {isUploading ? (
+              <>
+                <Loader2 className="size-10 text-muted-foreground animate-spin" />
+                <Progress value={uploadProgress} className="w-3/4" />
+                <span className="text-sm text-muted-foreground">{uploadProgress}%</span>
+              </>
+            ) : (
+              <>
+                <div className="rounded-full corner-squircle bg-primary/10 p-3">
+                  <Upload className="size-6 text-primary" />
+                </div>
+                <div className="text-center">
+                  <p className="text-sm font-medium">Click to upload image</p>
+                  <p className="text-xs text-muted-foreground mt-1">Max size: {maxSizeInMB}MB</p>
+                </div>
+              </>
+            )}
+          </button>
+        )}
+
+        {/* Error Message */}
+        {mutation.isError && (
+          <div className="text-sm text-destructive">Upload failed: {mutation.error.message}</div>
+        )}
+
+        {mutation.data && !mutation.data.success && (
+          <div className="text-sm text-destructive">{mutation.data.error}</div>
+        )}
+      </div>
+    </div>
+  )
+}

package/templates/ui/input-group.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import { cn } from '@cms/utils/cn'
+import { cva, type VariantProps } from 'class-variance-authority'
+import type * as React from 'react'
+import { Button } from './button'
+import { Input } from './input'
+import { Textarea } from './textarea'
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        'group/input-group border-input-border dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]',
+        'h-9 has-[>textarea]:h-auto',
+
+        // Variants based on alignment.
+        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+        // Focus state.
+        'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1',
+
+        // Error state.
+        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+        'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]',
+        'block-start':
+          '[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5',
+        'block-end':
+          '[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5'
+      }
+    },
+    defaultVariants: {
+      align: 'inline-start'
+    }
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = 'inline-start',
+  onClick,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: Click-to-focus is a mouse convenience, keyboard users can tab directly to input
+    // biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard users can tab directly to input field
+    <div
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        // Focus input when clicking addon area (but not buttons inside)
+        if (!(e.target as HTMLElement).closest('button')) {
+          e.currentTarget.parentElement?.querySelector('input')?.focus()
+        }
+        onClick?.(e)
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
+      'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+      'icon-sm': 'size-8 p-0 has-[>svg]:p-0'
+    }
+  },
+  defaultVariants: {
+    size: 'xs'
+  }
+})
+
+function InputGroupButton({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea
+}

package/templates/ui/input-otp.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { cn } from '@cms/utils/cn'
+import { OTPInput, OTPInputContext } from 'input-otp'
+import { Minus } from 'lucide-react'
+import * as React from 'react'
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      'flex items-center gap-2 has-[:disabled]:opacity-50',
+      containerClassName
+    )}
+    className={cn('disabled:cursor-not-allowed', className)}
+    {...props}
+  />
+))
+InputOTP.displayName = 'InputOTP'
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+))
+InputOTPGroup.displayName = 'InputOTPGroup'
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex h-9 w-9 items-center justify-center border-y border-r border-input-border text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'z-10 ring-1 ring-ring',
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = 'InputOTPSlot'
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ ...props }, ref) => (
+  <div ref={ref} role="presentation" aria-hidden="true" {...props}>
+    <Minus />
+  </div>
+))
+InputOTPSeparator.displayName = 'InputOTPSeparator'
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/templates/ui/input.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@cms/utils/cn'
+import * as React from 'react'
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-input-border-border bg-input px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = 'Input'
+
+export { Input }