betterstart-cli 0.0.1

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

@@ -0,0 +1,182 @@
+'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, ImageIcon, Link2 } from 'lucide-react'
+import Link from 'next/link'
+import * as React from 'react'
+
+type MediaGalleryFieldValueMode = 'id' | 'url'
+
+interface MediaGalleryFieldProps {
+  value?: string
+  onChange: (value: string) => void
+  onBlur?: () => void
+  onRemove?: () => void
+  accept?: string
+  disabled?: boolean
+  className?: string
+  isRemovable?: boolean
+  valueMode?: MediaGalleryFieldValueMode
+}
+
+export function MediaGalleryField({
+  value,
+  onChange,
+  onBlur,
+  onRemove,
+  accept,
+  disabled,
+  className,
+  isRemovable = false,
+  valueMode = 'id'
+}: MediaGalleryFieldProps) {
+  const [open, setOpen] = React.useState(false)
+  const { data: media } = useMediaById(valueMode === 'id' ? value : undefined)
+  const [copyMediaUrl, hasCopiedMediaUrl] = useCopyToClipboard()
+  const selectedMedia =
+    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 handleAddImage(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 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"
+                />
+                <div className="absolute inset-0 flex items-center justify-center gap-1 opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => setOpen(true)}
+                    className="border-primary/10"
+                  >
+                    Change
+                  </Button>
+                  <Button type="button" variant="default" onClick={handleRemove}>
+                    Remove
+                  </Button>
+                </div>
+              </>
+            )}
+          </CardContent>
+          <CardFooter className="grid w-full gap-0.5 px-4">
+            <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"
+                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>
+          </CardFooter>
+        </Card>
+
+        <MediaGalleryDialog
+          open={open}
+          onOpenChange={setOpen}
+          onSelect={handleSelect}
+          mode="single"
+          accept={accept}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={className}>
+      <Card
+        className={cn('group p-0 gap-0', {
+          'cursor-not-allowed opacity-50 pointer-events-none': disabled
+        })}
+        onClick={() => !disabled && setOpen(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': isRemovable && !disabled
+            })}
+            strokeWidth={1}
+          />
+          {isRemovable && !disabled && (
+            <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">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleAddImage}
+                className="border-primary/10"
+              >
+                Add Image
+              </Button>
+              <Button type="button" variant="default" onClick={handleRemove}>
+                Remove
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <MediaGalleryDialog
+        open={open}
+        onOpenChange={setOpen}
+        onSelect={handleSelect}
+        mode="single"
+        accept={accept}
+      />
+    </div>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/page-skeleton.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from '@admin/components/ui/skeleton'
+
+export function PageSkeleton() {
+  return (
+    <div className="space-y-3 p-6">
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-4/5" />
+      <Skeleton className="h-4 w-3/5" />
+    </div>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/placeholder-card.tsx

@@ -0,0 +1,34 @@
+import { cn } from '@admin/utils/shared/cn'
+import type * as React from 'react'
+
+interface PlaceholderCardProps {
+  icon?: React.ReactNode
+  title: string
+  description?: string
+  action?: React.ReactNode
+  className?: string
+}
+
+export function PlaceholderCard({
+  icon,
+  title,
+  description,
+  action,
+  className
+}: PlaceholderCardProps) {
+  return (
+    <div
+      className={cn(
+        'flex h-75 border border-border border-dashed bg-background flex-col items-center justify-center gap-5 rounded-lg',
+        className
+      )}
+    >
+      {icon}
+      <div className="space-y-2 text-center">
+        <p className="font-medium">{title}</p>
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+      </div>
+      {action}
+    </div>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/placeholder.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@admin/utils/shared/cn'
+import type * as React from 'react'
+
+type PlaceholderProps = {
+  label: string
+  description: string
+  action: React.ReactNode
+  className?: string
+} & React.ComponentProps<'div'>
+
+export function Placeholder({ label, description, action, className, ...props }: PlaceholderProps) {
+  return (
+    <div
+      className={cn(
+        'border flex items-center flex-col gap-2 border-dashed border-border rounded-lg p-8 bg-background',
+        className
+      )}
+      {...props}
+    >
+      <h4 className="text-sm font-medium">{label}</h4>
+      <p className="text-sm text-muted-foreground">{description}</p>
+      <div className="flex pt-4">{action}</div>
+    </div>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/progressive-blur.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { usePageBoundaryBlurVisibility } from '@admin/hooks/use-page-boundary-blur-visibility'
+import { cn } from '@admin/utils/shared/cn'
+import { motion } from 'motion/react'
+import type * as React from 'react'
+
+type ProgressiveBlurProps = React.ComponentProps<typeof motion.div> & {
+  backgroundColor?: string
+  position?: 'top' | 'bottom'
+  height?: React.CSSProperties['height']
+  blurAmount?: string
+  scrollAware?: boolean
+}
+
+function ProgressiveBlur({
+  className,
+  style,
+  backgroundColor = 'var(--background)',
+  position = 'top',
+  height = '150px',
+  blurAmount = '0',
+  scrollAware = true,
+  ...props
+}: ProgressiveBlurProps) {
+  const isVisible = usePageBoundaryBlurVisibility(position, {
+    disabled: !scrollAware
+  })
+
+  return (
+    <motion.div
+      aria-hidden="true"
+      data-slot="progressive-blur"
+      data-position={position}
+      initial={false}
+      animate={{ opacity: isVisible ? 1 : 0 }}
+      transition={{ duration: 0.16, ease: 'easeOut' }}
+      className={cn(
+        'pointer-events-none h-(--progressive-blur-height) w-full shrink-0 select-none [background:var(--progressive-blur-background)] [-webkit-backdrop-filter:blur(var(--progressive-blur-amount))] [backdrop-filter:blur(var(--progressive-blur-amount))] [-webkit-mask-image:var(--progressive-blur-mask)] mask-(--progressive-blur-mask)',
+        className
+      )}
+      style={
+        {
+          '--progressive-blur-height': typeof height === 'number' ? `${height}px` : height,
+          '--progressive-blur-amount': blurAmount,
+          '--progressive-blur-background':
+            position === 'top'
+              ? `linear-gradient(to top, transparent, ${backgroundColor})`
+              : `linear-gradient(to bottom, transparent, ${backgroundColor})`,
+          '--progressive-blur-mask':
+            position === 'top'
+              ? 'linear-gradient(to bottom, inherit 10%, transparent)'
+              : 'linear-gradient(to top, inherit 10%, transparent)',
+          ...style
+        } as React.ComponentProps<typeof motion.div>['style']
+      }
+      {...props}
+    />
+  )
+}
+
+export { ProgressiveBlur }

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

@@ -0,0 +1,68 @@
+import type { AdminMedia } from '@admin/types'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical, X } from 'lucide-react'
+import type * as React from 'react'
+import { GalleryThumbnail } from './gallery-thumbnail'
+
+export function SortableGalleryItem({
+  id,
+  media,
+  disabled,
+  onRemove
+}: {
+  id: string
+  media: AdminMedia | undefined
+  disabled?: boolean
+  onRemove: () => void
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    disabled
+  })
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="group relative aspect-square overflow-hidden rounded-lg border bg-muted"
+    >
+      {!disabled && (
+        <div
+          {...attributes}
+          {...listeners}
+          className="absolute left-1 top-1 z-10 cursor-grab rounded bg-background/80 p-0.5 opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing"
+        >
+          <GripVertical className="size-3.5 text-foreground" />
+        </div>
+      )}
+
+      {!disabled && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove()
+          }}
+          className="absolute right-1 top-1 z-10 flex size-5 items-center justify-center rounded-full bg-destructive text-destructive-foreground opacity-0 transition-opacity group-hover:opacity-100"
+        >
+          <X className="size-3" />
+        </button>
+      )}
+
+      {media ? (
+        <GalleryThumbnail media={media} />
+      ) : (
+        <div className="flex size-full items-center justify-center">
+          <div className="size-4 animate-pulse rounded-full bg-muted-foreground/20" />
+        </div>
+      )}
+    </div>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/upload-dropzone.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { Card, CardContent } from '@admin/components/ui/card'
+import { Progress } from '@admin/components/ui/progress'
+import type { UploadProgress } from '@admin/types'
+import { cn } from '@admin/utils/shared/cn'
+import { parseDropzoneAccept } from '@admin/utils/upload/upload'
+import { GalleryVerticalEnd } from 'lucide-react'
+import * as React from 'react'
+import { useDropzone } from 'react-dropzone'
+
+export interface UploadDropzoneHandle {
+  openFileDialog: () => void
+}
+
+export interface UploadDropzoneProps {
+  onFilesSelected: (files: File[]) => void
+  progress: UploadProgress[]
+  isUploading: boolean
+  accept?: string
+  multiple?: boolean
+  className?: string
+  disabled?: boolean
+  ref?: React.Ref<UploadDropzoneHandle>
+}
+
+export function UploadDropzone({
+  onFilesSelected,
+  progress,
+  isUploading,
+  accept,
+  multiple = true,
+  className,
+  disabled = false,
+  ref
+}: UploadDropzoneProps) {
+  const progressPercent = React.useMemo(() => {
+    if (progress.length === 0) return 0
+    return Math.round(progress.reduce((sum, item) => sum + item.progress, 0) / progress.length)
+  }, [progress])
+
+  const handleDrop = React.useCallback(
+    (files: File[]) => {
+      if (files.length === 0) return
+      onFilesSelected(files)
+    },
+    [onFilesSelected]
+  )
+
+  const parsedAccept = React.useMemo(() => parseDropzoneAccept(accept), [accept])
+
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    noClick: true,
+    noKeyboard: true,
+    multiple,
+    accept: parsedAccept,
+    disabled: isUploading || disabled,
+    onDrop: handleDrop
+  })
+
+  React.useImperativeHandle(ref, () => ({ openFileDialog: open }), [open])
+
+  return (
+    <Card
+      data-slot="upload-dropzone"
+      {...getRootProps({
+        className: cn(
+          'flex items-center justify-center',
+          {
+            'bg-muted ring-1 ring-border p-2 transition-all duration-100': isDragActive,
+            'cursor-not-allowed': disabled || isUploading
+          },
+          className
+        ),
+        'aria-label': 'File upload dropzone'
+      })}
+    >
+      <CardContent className="w-full h-full">
+        {isUploading ? (
+          <div
+            data-slot="upload-dropzone-progress"
+            className="flex w-full flex-col h-full justify-center items-center gap-3 text-center"
+          >
+            <p className="font-medium text-sm">Uploading files…</p>
+            <Progress value={progressPercent} className="h-2 max-w-sm mx-auto" />
+            <p className="text-sm text-muted-foreground">{progressPercent}% complete</p>
+          </div>
+        ) : (
+          <div
+            data-slot="upload-dropzone-idle"
+            className="flex w-full flex-col h-full justify-center items-center gap-3 text-center"
+          >
+            <Button type="button" variant="outline" onClick={open}>
+              <GalleryVerticalEnd />
+              Add files
+            </Button>
+            <p className="text-sm text-muted-foreground">
+              Drag & drop images, videos, or documents here
+            </p>
+          </div>
+        )}
+        <input {...getInputProps({ className: 'hidden' })} />
+      </CardContent>
+    </Card>
+  )
+}

package/dist/assets/shared-assets/react-admin/dependencies.ts

@@ -0,0 +1,73 @@
+export const REACT_ADMIN_DEPS = [
+  '@base-ui/react',
+  '@codemirror/commands',
+  '@codemirror/lang-javascript',
+  '@codemirror/lang-json',
+  '@codemirror/lang-markdown',
+  '@codemirror/view',
+  '@dnd-kit/core',
+  '@dnd-kit/sortable',
+  '@dnd-kit/utilities',
+  '@floating-ui/react',
+  '@radix-ui/react-accordion',
+  '@radix-ui/react-alert-dialog',
+  '@radix-ui/react-aspect-ratio',
+  '@radix-ui/react-avatar',
+  '@radix-ui/react-checkbox',
+  '@radix-ui/react-collapsible',
+  '@radix-ui/react-context-menu',
+  '@radix-ui/react-dialog',
+  '@radix-ui/react-dropdown-menu',
+  '@radix-ui/react-hover-card',
+  '@radix-ui/react-label',
+  '@radix-ui/react-menubar',
+  '@radix-ui/react-navigation-menu',
+  '@radix-ui/react-popover',
+  '@radix-ui/react-progress',
+  '@radix-ui/react-radio-group',
+  '@radix-ui/react-scroll-area',
+  '@radix-ui/react-select',
+  '@radix-ui/react-separator',
+  '@radix-ui/react-slider',
+  '@radix-ui/react-slot',
+  '@radix-ui/react-switch',
+  '@radix-ui/react-tabs',
+  '@radix-ui/react-toast',
+  '@radix-ui/react-toggle',
+  '@radix-ui/react-toggle-group',
+  '@radix-ui/react-tooltip',
+  '@tiptap/core',
+  '@tiptap/extension-underline',
+  '@tiptap/extension-highlight',
+  '@tiptap/extension-horizontal-rule',
+  '@tiptap/extension-image',
+  '@tiptap/extension-list',
+  '@tiptap/extension-placeholder',
+  '@tiptap/extension-table',
+  '@tiptap/extension-table-cell',
+  '@tiptap/extension-table-header',
+  '@tiptap/extension-table-row',
+  '@tiptap/extension-typography',
+  '@tiptap/extensions',
+  '@tiptap/markdown',
+  '@tiptap/pm',
+  '@tiptap/react',
+  '@tiptap/starter-kit',
+  '@uiw/codemirror-theme-github',
+  '@uiw/react-codemirror',
+  'cmdk',
+  'embla-carousel-react',
+  'input-otp',
+  'katex',
+  'lodash.throttle',
+  'motion',
+  'next-themes',
+  'radix-ui',
+  'react-day-picker',
+  'react-hotkeys-hook',
+  'react-resizable-panels',
+  'recharts',
+  'vaul'
+]
+
+export const REACT_ADMIN_DEV_DEPS = ['@tailwindcss/typography']