betterstart-cli 0.0.17 → 0.0.18

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

@@ -1,20 +1,32 @@
 'use client'
 
 import { MediaGalleryDialog } from '@admin/components/shared/media/media-gallery-dialog'
+import { Card, CardContent, CardFooter } from '@admin/components/ui/card'
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem
+} from '@admin/components/ui/carousel'
+import { Skeleton } from '@admin/components/ui/skeleton'
 import { useMediaByIds } from '@admin/hooks/use-media'
 import type { AdminMedia } from '@admin/types'
 import {
   closestCenter,
   DndContext,
   type DragEndEvent,
+  DragOverlay,
+  type DragStartEvent,
   KeyboardSensor,
   PointerSensor,
   useSensor,
   useSensors
 } from '@dnd-kit/core'
-import { arrayMove, rectSortingStrategy, SortableContext } from '@dnd-kit/sortable'
-import { ImageIcon, Plus } from 'lucide-react'
+import { arrayMove, horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable'
+import { Plus } from 'lucide-react'
 import * as React from 'react'
+import { MediaField } from './media-field'
+import { MediaFieldEmptyState } from './media-field-empty-state'
 import { SortableGalleryItem } from './sortable-gallery-item'
 
 interface GalleryFieldProps {
@@ -33,14 +45,22 @@ export function GalleryField({
   maxItems
 }: GalleryFieldProps) {
   const [open, setOpen] = React.useState(false)
+  const [activeId, setActiveId] = React.useState<string | null>(null)
   const { data: mediaItems } = useMediaByIds(value)
+  const carouselRootRef = React.useRef<HTMLDivElement | null>(null)
+  const carouselApiRef = React.useRef<CarouselApi>(undefined)
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor)
   )
 
+  function handleDragStart(event: DragStartEvent) {
+    setActiveId(String(event.active.id))
+  }
+
   function handleDragEnd(event: DragEndEvent) {
+    setActiveId(null)
     const { active, over } = event
     if (!over || active.id === over.id) return
 
@@ -51,6 +71,10 @@ export function GalleryField({
     }
   }
 
+  function handleDragCancel() {
+    setActiveId(null)
+  }
+
   function handleSelect(selected: AdminMedia | AdminMedia[]) {
     const items = Array.isArray(selected) ? selected : [selected]
     const newIds = items.map((m) => m.id).filter((id) => !value.includes(id))
@@ -62,6 +86,68 @@ export function GalleryField({
     onChange(value.filter((v) => v !== id))
   }
 
+  function handleReplace(currentId: string, nextId: string) {
+    if (!nextId) {
+      handleRemove(currentId)
+      return
+    }
+
+    if (nextId === currentId) return
+
+    onChange(
+      value.flatMap((id) => {
+        if (id !== currentId) return [id]
+        return value.includes(nextId) ? [] : [nextId]
+      })
+    )
+  }
+
+  function handleCarouselApi(api: CarouselApi) {
+    carouselApiRef.current = api
+  }
+
+  const hasSelectedMedia = value.length > 0
+
+  React.useEffect(() => {
+    if (!hasSelectedMedia) return
+
+    const carouselRoot = carouselRootRef.current
+    if (!carouselRoot) return
+
+    function handleWheel(event: WheelEvent) {
+      const api = carouselApiRef.current
+      if (!api) return
+
+      const isHorizontalIntent = Math.abs(event.deltaX) >= Math.abs(event.deltaY)
+      const delta = isHorizontalIntent ? event.deltaX : event.deltaY
+      if (Math.abs(delta) < 1) return
+
+      const engine = api.internalEngine()
+      const target = engine.limit.constrain(engine.target.get() - delta)
+      const distance = target - engine.target.get()
+
+      if (Math.abs(distance) < 0.5) {
+        if (isHorizontalIntent) {
+          event.preventDefault()
+        }
+        return
+      }
+
+      event.preventDefault()
+      const scrollBody = engine.scrollBody
+      const setScrollFriction = scrollBody.useFriction
+      const setScrollDuration = scrollBody.useDuration
+      setScrollFriction(0)
+      setScrollDuration(0)
+      engine.scrollTo.distance(distance, false)
+    }
+
+    carouselRoot.addEventListener('wheel', handleWheel, { passive: false })
+    return () => {
+      carouselRoot.removeEventListener('wheel', handleWheel)
+    }
+  }, [hasSelectedMedia])
+
   const mediaMap = React.useMemo(() => {
     const map = new Map<string, AdminMedia>()
     if (mediaItems) {
@@ -74,51 +160,144 @@ export function GalleryField({
   }, [mediaItems, value])
 
   const canAdd = !maxItems || value.length < maxItems
+  const activeItem = activeId ? mediaMap.get(activeId) : undefined
 
   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>
-            )}
+      {hasSelectedMedia ? (
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+          onDragCancel={handleDragCancel}
+        >
+          <div ref={carouselRootRef} className="w-full overscroll-x-contain">
+            <Carousel
+              opts={{
+                align: 'start',
+                containScroll: 'trimSnaps',
+                duration: 0,
+                dragFree: true,
+                watchDrag: (_, event) => {
+                  const target = event.target
+                  return !(
+                    target instanceof Element &&
+                    target.closest(
+                      '[data-gallery-drag-handle], [data-media-field-action], button, a'
+                    )
+                  )
+                }
+              }}
+              setApi={handleCarouselApi}
+              className="w-full"
+            >
+              <CarouselContent className="-ml-3">
+                {canAdd && !disabled ? (
+                  <CarouselItem className="basis-[168px] pl-3 sm:basis-[184px]">
+                    <Card className="h-full">
+                      <CardContent className="p-2 flex flex-col cursor-pointer">
+                        <div className="flex size-full bg-background border border-border rounded-sm aspect-square overflow-hidden text-muted-foreground hover:text-foreground transition-colors items-center flex-col justify-center gap-1">
+                          <Plus className="size-6" strokeWidth={1.5} />
+                          <span className="text-sm">Add Images</span>
+                        </div>
+                      </CardContent>
+                      <CardFooter>
+                        <Skeleton className="h-4 w-3/4" />
+                      </CardFooter>
+                    </Card>
+                  </CarouselItem>
+                ) : null}
+
+                <SortableContext items={value} strategy={horizontalListSortingStrategy}>
+                  {value.map((id) => {
+                    const item = mediaMap.get(id)
+                    return (
+                      <CarouselItem key={id} className="basis-[168px] pl-3 sm:basis-[184px]">
+                        <SortableGalleryItem id={id} disabled={disabled}>
+                          {item ? (
+                            <MediaField
+                              value={id}
+                              media={item}
+                              onChange={(nextId) => handleReplace(id, nextId)}
+                              onRemove={() => handleRemove(id)}
+                              disabled={disabled}
+                              isRemovable
+                              className="**:data-media-field-preview:aspect-square! [&_[data-media-field-preview]_img]:object-cover!"
+                              footerMode="filename"
+                            />
+                          ) : (
+                            <Card>
+                              <CardContent className="p-2 flex flex-col">
+                                <div className="flex size-full bg-background border border-border rounded-sm aspect-square overflow-hidden">
+                                  <Skeleton className="size-full" />
+                                </div>
+                              </CardContent>
+                              <CardFooter>
+                                <Skeleton className="h-4 w-3/4" />
+                              </CardFooter>
+                            </Card>
+                          )}
+                        </SortableGalleryItem>
+                      </CarouselItem>
+                    )
+                  })}
+                </SortableContext>
+              </CarouselContent>
+            </Carousel>
           </div>
-        </SortableContext>
-      </DndContext>
+          <DragOverlay>
+            {activeId ? (
+              <div className="w-[168px] scale-[0.98] cursor-grabbing opacity-95 sm:w-[184px]">
+                {activeItem ? (
+                  <MediaField
+                    value={activeId}
+                    media={activeItem}
+                    onChange={(nextId) => handleReplace(activeId, nextId)}
+                    onRemove={() => handleRemove(activeId)}
+                    disabled
+                    isRemovable
+                    className="**:data-media-field-preview:aspect-square! [&_[data-media-field-preview]_img]:object-cover!"
+                    footerMode="filename"
+                  />
+                ) : (
+                  <Card>
+                    <CardContent className="p-2 flex flex-col">
+                      <div className="flex size-full bg-background border border-border rounded-sm aspect-square overflow-hidden">
+                        <Skeleton className="size-full" />
+                      </div>
+                    </CardContent>
+                    <CardFooter>
+                      <Skeleton className="h-4 w-3/4" />
+                    </CardFooter>
+                  </Card>
+                )}
+              </div>
+            ) : null}
+          </DragOverlay>
+        </DndContext>
+      ) : null}
 
-      {value.length === 0 && (
-        <button
-          type="button"
-          onClick={() => !disabled && setOpen(true)}
+      {!hasSelectedMedia ? (
+        <MediaFieldEmptyState
+          addButtonLabel="Add Images"
           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>
-      )}
+          mode="multi"
+          open={open}
+          onOpenChange={setOpen}
+          onSelect={handleSelect}
+          showAddButton
+        />
+      ) : null}
 
-      <MediaGalleryDialog open={open} onOpenChange={setOpen} onSelect={handleSelect} mode="multi" />
+      {hasSelectedMedia ? (
+        <MediaGalleryDialog
+          open={open}
+          onOpenChange={setOpen}
+          onSelect={handleSelect}
+          mode="multi"
+        />
+      ) : null}
     </div>
   )
 }

package/dist/assets/shared-assets/react-admin/custom/media-field-empty-state.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import { MediaGalleryDialog } from '@admin/components/shared/media/media-gallery-dialog'
+import { Button } from '@admin/components/ui/button'
+import { Card, CardContent } from '@admin/components/ui/card'
+import type { AdminMedia } from '@admin/types'
+import { cn } from '@admin/utils/shared/cn'
+import { ImageIcon } from 'lucide-react'
+import type * as React from 'react'
+
+interface MediaFieldEmptyStateProps {
+  accept?: string
+  addButtonLabel?: string
+  className?: string
+  disabled?: boolean
+  isRemovable?: boolean
+  mode?: 'single' | 'multi'
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onRemove?: React.MouseEventHandler<HTMLButtonElement>
+  onSelect: (selected: AdminMedia | AdminMedia[]) => void
+  showAddButton?: boolean
+}
+
+export function MediaFieldEmptyState({
+  accept,
+  addButtonLabel = 'Add Image',
+  className,
+  disabled,
+  isRemovable = false,
+  mode = 'single',
+  open,
+  onOpenChange,
+  onRemove,
+  onSelect,
+  showAddButton = false
+}: MediaFieldEmptyStateProps) {
+  const shouldShowAddButton = showAddButton || isRemovable
+  const shouldShowActions = !disabled && (shouldShowAddButton || onRemove)
+
+  function handleAddImage(e: React.MouseEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    onOpenChange(true)
+  }
+
+  return (
+    <div className={className}>
+      <Card
+        className={cn('group p-0 gap-0', {
+          'cursor-not-allowed opacity-50 pointer-events-none': disabled
+        })}
+        onClick={() => !disabled && onOpenChange(true)}
+      >
+        <CardContent className="relative p-0 justify-center items-center flex flex-col h-40 hover:bg-muted/50 transition-colors duration-200">
+          <ImageIcon
+            className={cn('text-muted-foreground transition-opacity', {
+              'group-hover:opacity-0 group-focus-within:opacity-0': shouldShowActions
+            })}
+            strokeWidth={1}
+          />
+          {shouldShowActions && (
+            <div className="absolute inset-0 flex items-center justify-center gap-1 opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100 group-focus-within:opacity-100">
+              {shouldShowAddButton ? (
+                <Button
+                  type="button"
+                  data-media-field-action="true"
+                  variant="outline"
+                  onClick={handleAddImage}
+                  className="border-primary/10"
+                >
+                  {addButtonLabel}
+                </Button>
+              ) : null}
+              {onRemove ? (
+                <Button
+                  type="button"
+                  data-media-field-action="true"
+                  variant="default"
+                  onClick={onRemove}
+                >
+                  Remove
+                </Button>
+              ) : null}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <MediaGalleryDialog
+        open={open}
+        onOpenChange={onOpenChange}
+        onSelect={onSelect}
+        mode={mode}
+        accept={accept}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,181 @@
+'use client'
+
+import { MediaGalleryDialog } from '@admin/components/shared/media/media-gallery-dialog'
+import { MediaPreview } from '@admin/components/shared/media/media-preview'
+import { Button } from '@admin/components/ui/button'
+import { Card, CardContent, CardFooter } from '@admin/components/ui/card'
+import { useCopyToClipboard } from '@admin/hooks/use-copy-to-clipboard'
+import { useMediaById } from '@admin/hooks/use-media'
+import type { AdminMedia } from '@admin/types'
+import { createAdminMediaFromUrl } from '@admin/utils/media/fallback'
+import { cn } from '@admin/utils/shared/cn'
+import { Check, Copy, Link2 } from 'lucide-react'
+import Link from 'next/link'
+import * as React from 'react'
+import { MediaFieldEmptyState } from './media-field-empty-state'
+
+type MediaFieldValueMode = 'id' | 'url'
+type MediaFieldFooterMode = 'url' | 'filename' | 'none'
+
+interface MediaFieldProps {
+  value?: string
+  onChange: (value: string) => void
+  onBlur?: () => void
+  onRemove?: () => void
+  media?: AdminMedia | null
+  accept?: string
+  disabled?: boolean
+  className?: string
+  isRemovable?: boolean
+  valueMode?: MediaFieldValueMode
+  footerMode?: MediaFieldFooterMode
+}
+
+export function MediaField({
+  value,
+  onChange,
+  onBlur,
+  onRemove,
+  media: mediaOverride,
+  accept,
+  disabled,
+  className,
+  isRemovable = false,
+  valueMode = 'id',
+  footerMode = 'url'
+}: MediaFieldProps) {
+  const [open, setOpen] = React.useState(false)
+  const { data: media } = useMediaById(
+    valueMode === 'id' && mediaOverride === undefined ? value : undefined
+  )
+  const [copyMediaUrl, hasCopiedMediaUrl] = useCopyToClipboard()
+  const selectedMedia =
+    mediaOverride ??
+    media ??
+    (valueMode === 'url' && value ? createAdminMediaFromUrl(value, accept) : null)
+
+  function handleSelect(selected: AdminMedia | AdminMedia[]) {
+    const item = Array.isArray(selected) ? selected[0] : selected
+    if (item) {
+      onChange(valueMode === 'url' ? item.url : item.id)
+    }
+  }
+
+  function handleRemove(e: React.MouseEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    if (isRemovable && onRemove) {
+      onRemove()
+      return
+    }
+    onChange('')
+    onBlur?.()
+  }
+
+  function handleChangeImage(e: React.MouseEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    setOpen(true)
+  }
+
+  if (selectedMedia?.url) {
+    return (
+      <div className={cn('group relative', className)}>
+        <Card className="p-0">
+          <CardContent className="p-0! relative">
+            <div
+              data-media-field-preview
+              className="relative aspect-video rounded-lg bg-background overflow-hidden"
+            >
+              <MediaPreview media={selectedMedia} showMetadata={Boolean(media)} />
+            </div>
+
+            {!disabled && (
+              <>
+                <div
+                  aria-hidden="true"
+                  className="pointer-events-none absolute inset-0 bg-black/10 opacity-0 backdrop-blur-xs transition-opacity duration-300 ease-out group-hover:opacity-100 rounded-lg"
+                />
+                <div className="absolute inset-0 flex flex-col items-center justify-center gap-1 opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100">
+                  <Button
+                    type="button"
+                    data-media-field-action="true"
+                    variant="outline"
+                    onClick={handleChangeImage}
+                    className="border-primary/10 w-[100px]"
+                  >
+                    Change
+                  </Button>
+                  <Button
+                    type="button"
+                    data-media-field-action="true"
+                    variant="default"
+                    onClick={handleRemove}
+                    className="w-[100px]"
+                  >
+                    Remove
+                  </Button>
+                </div>
+              </>
+            )}
+          </CardContent>
+          {footerMode !== 'none' && (
+            <CardFooter className="grid w-full gap-0.5 px-4">
+              {footerMode === 'url' ? (
+                <div className="flex w-full min-w-0 items-center gap-x-2">
+                  <div className="flex min-w-0 flex-1 items-center gap-x-2 text-muted-foreground">
+                    <Link2 className="size-4 shrink-0" />
+                    <Link
+                      href={selectedMedia.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="min-w-0 truncate text-foreground hover:underline underline-offset-4"
+                    >
+                      {selectedMedia.url}
+                    </Link>
+                  </div>
+                  <Button
+                    type="button"
+                    data-media-field-action="true"
+                    aria-label={hasCopiedMediaUrl ? 'Media URL copied' : 'Copy media URL'}
+                    variant="ghost"
+                    title={hasCopiedMediaUrl ? 'Copied' : 'Copy media URL'}
+                    onClick={() => copyMediaUrl(selectedMedia.url)}
+                    className="shrink-0 size-7"
+                  >
+                    {hasCopiedMediaUrl ? <Check className="text-foreground" /> : <Copy />}
+                  </Button>
+                </div>
+              ) : (
+                <span className="w-full truncate text-sm text-muted-foreground">
+                  {selectedMedia.filename}
+                </span>
+              )}
+            </CardFooter>
+          )}
+        </Card>
+
+        <MediaGalleryDialog
+          open={open}
+          onOpenChange={setOpen}
+          onSelect={handleSelect}
+          mode="single"
+          accept={accept}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <MediaFieldEmptyState
+      accept={accept}
+      className={className}
+      disabled={disabled}
+      isRemovable={isRemovable}
+      open={open}
+      onOpenChange={setOpen}
+      onRemove={handleRemove}
+      onSelect={handleSelect}
+    />
+  )
+}