betterstart-cli 0.0.13 → 0.0.15

package/dist/assets/shared-assets/react-admin/custom/content-editor/table-button.tsx

@@ -4,16 +4,9 @@ import { Button } from '@admin/components/ui/button'
 import { Input } from '@admin/components/ui/input'
 import { Label } from '@admin/components/ui/label'
 import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
-import { normalizeCount } from '@admin/utils/editor/table-input'
-import { insertContentEditorTable } from '@admin/utils/editor/tiptap'
+import { useTableButton } from '@admin/hooks/content-editor/use-table-button'
 import type { Editor } from '@tiptap/core'
 import { TableIcon } from 'lucide-react'
-import * as React from 'react'
-
-const DEFAULT_TABLE_ROWS = 3
-const DEFAULT_TABLE_COLS = 3
-const MIN_TABLE_ROWS = 2
-const MIN_TABLE_COLS = 1
 
 interface TableButtonProps {
   disabled?: boolean
@@ -22,95 +15,54 @@ interface TableButtonProps {
 }
 
 export function TableButton({ disabled, editor, onInsertTable }: TableButtonProps) {
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [rows, setRows] = React.useState(String(DEFAULT_TABLE_ROWS))
-  const [cols, setCols] = React.useState(String(DEFAULT_TABLE_COLS))
-  const rowsId = React.useId()
-  const colsId = React.useId()
-  const canInsert = Boolean(onInsertTable || editor?.isEditable)
-
-  const closePopover = React.useCallback(() => {
-    setIsOpen(false)
-    window.setTimeout(() => setIsOpen(false), 0)
-  }, [])
-
-  const insertTable = React.useCallback(() => {
-    if (disabled || !canInsert) return
-
-    const rowCount = normalizeCount(rows, DEFAULT_TABLE_ROWS, MIN_TABLE_ROWS)
-    const colCount = normalizeCount(cols, DEFAULT_TABLE_COLS, MIN_TABLE_COLS)
-
-    if (onInsertTable) {
-      onInsertTable({ cols: colCount, rows: rowCount })
-      closePopover()
-      return
-    }
-
-    if (!editor) return
-
-    insertContentEditorTable(editor, rowCount, colCount)
-    closePopover()
-  }, [canInsert, closePopover, cols, disabled, editor, onInsertTable, rows])
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key !== 'Enter') return
-
-      event.preventDefault()
-      event.stopPropagation()
-      insertTable()
-    },
-    [insertTable]
-  )
+  const tableButton = useTableButton({ disabled, editor, onInsertTable })
 
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
+    <Popover open={tableButton.isOpen} onOpenChange={tableButton.setIsOpen}>
       <PopoverTrigger asChild>
         <Button
           type="button"
           variant="ghost"
           size="sm"
-          disabled={disabled || !canInsert}
+          disabled={tableButton.isDisabled}
           aria-label="Insert table"
           title="Table"
-          onPointerDown={(event) => event.preventDefault()}
-          onClick={() => setIsOpen((current) => !current)}
         >
           <TableIcon />
           <span className="tiptap-button-text">Table</span>
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start" className="w-72 p-4">
-        <div className="flex flex-col gap-3" onKeyDownCapture={handleKeyDown}>
+        <div className="flex flex-col gap-3" onKeyDownCapture={tableButton.handleKeyDown}>
           <div className="grid grid-cols-2 gap-2">
             <div className="flex flex-col gap-1.5">
-              <Label htmlFor={rowsId}>Rows</Label>
+              <Label htmlFor={tableButton.rowsId}>Rows</Label>
               <Input
-                id={rowsId}
+                id={tableButton.rowsId}
                 inputMode="numeric"
-                min={MIN_TABLE_ROWS}
-                onChange={(event) => setRows(event.target.value)}
+                min={tableButton.minRows}
+                onChange={tableButton.handleRowsChange}
                 type="number"
-                value={rows}
+                value={tableButton.rows}
               />
             </div>
             <div className="flex flex-col gap-1.5">
-              <Label htmlFor={colsId}>Cols</Label>
+              <Label htmlFor={tableButton.colsId}>Cols</Label>
               <Input
-                id={colsId}
+                id={tableButton.colsId}
                 inputMode="numeric"
-                min={MIN_TABLE_COLS}
-                onChange={(event) => setCols(event.target.value)}
+                min={tableButton.minCols}
+                onChange={tableButton.handleColsChange}
                 type="number"
-                value={cols}
+                value={tableButton.cols}
               />
             </div>
           </div>
           <Button
             type="button"
             variant="default"
-            disabled={disabled || !canInsert}
-            onClick={insertTable}
+            disabled={tableButton.isDisabled}
+            onClick={tableButton.insertTable}
           >
             Insert
           </Button>

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/link-popover/link-control-popover.tsx

@@ -9,6 +9,7 @@ import { LinkMain, type LinkMainProps } from './link-main'
 
 export interface LinkControlPopoverProps extends Omit<LinkButtonProps, 'type'>, LinkMainProps {
   canSet?: boolean
+  isActive?: boolean
   label?: string
   onOpenChange?: (isOpen: boolean) => void
   open?: boolean
@@ -17,7 +18,7 @@ export interface LinkControlPopoverProps extends Omit<LinkButtonProps, 'type'>,
 export function LinkControlPopover({
   canSet = true,
   children,
-  isActive,
+  isActive = false,
   label = 'Link',
   onClick,
   onOpenChange,
@@ -75,13 +76,7 @@ export function LinkControlPopover({
       </PopoverTrigger>
 
       <PopoverContent className="w-auto max-w-[calc(100vw-2rem)]">
-        <LinkMain
-          url={url}
-          setUrl={setUrl}
-          setLink={handleSetLink}
-          removeLink={removeLink}
-          isActive={isActive}
-        />
+        <LinkMain url={url} setUrl={setUrl} setLink={handleSetLink} removeLink={removeLink} />
       </PopoverContent>
     </Popover>
   )

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/link-popover/link-popover.tsx

@@ -57,7 +57,7 @@ export function LinkPopover({
 }: LinkPopoverProps) {
   const { editor } = useTiptapEditor(providedEditor)
 
-  const { isVisible, canSet, isActive, url, setUrl, setLink, removeLink, openLink, label, Icon } =
+  const { isVisible, canSet, isActive, url, setUrl, setLink, removeLink, label, Icon } =
     useLinkPopover({
       editor,
       hideWhenUnavailable: shouldHideUnavailableControl(availability),
@@ -105,7 +105,6 @@ export function LinkPopover({
       onClick={onClick}
       onOpenChange={handleOnOpenChange}
       open={isOpen}
-      openLink={openLink}
       removeLink={removeLink}
       setLink={setLink}
       setUrl={setUrl}

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

@@ -139,7 +139,7 @@ export function DateRangePicker({
           <ChevronDown />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[282px] gap-0 overflow-hidden rounded-xl p-0" align="start">
+      <PopoverContent className="w-[282px] gap-0 overflow-hidden rounded-lg p-0" align="start">
         <Calendar
           mode="range"
           month={calendarMonth}

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

@@ -1,9 +1,15 @@
 'use client'
 
 import { Button } from '@admin/components/ui/button'
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@admin/components/ui/form'
+import {
+  FormControl,
+  FormDescription,
+  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'
@@ -46,12 +52,18 @@ export function DynamicListField({
   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>
+        <FormField
+          control={control}
+          name={name}
+          render={() => (
+            <FormItem className="flex flex-col gap-1">
+              <FormLabel className={cn({ 'sr-only': hideLabel })}>{label}</FormLabel>
+              {description ? (
+                <FormDescription className="text-muted-foreground">{description}</FormDescription>
+              ) : null}
+            </FormItem>
+          )}
+        />
         <Button
           type="button"
           variant="outline"

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

@@ -97,7 +97,7 @@ export function GalleryField({
               <button
                 type="button"
                 onClick={() => setOpen(true)}
-                className="flex aspect-square items-center justify-center rounded-xl border border-dashed transition-colors hover:border-primary/50 hover:bg-muted/50"
+                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>
@@ -111,7 +111,7 @@ export function GalleryField({
           type="button"
           onClick={() => !disabled && setOpen(true)}
           disabled={disabled}
-          className="flex w-full flex-col items-center justify-center gap-2 rounded-xl border border-dashed p-8 transition-colors hover:border-primary/50 hover:bg-muted/50 disabled:cursor-not-allowed disabled:opacity-50"
+          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>

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

@@ -73,7 +73,7 @@ export function MediaGalleryField({
       <div className={cn('group relative', className)}>
         <Card className="p-0">
           <CardContent className="p-0! relative">
-            <div className="relative aspect-video rounded-xl bg-background overflow-hidden">
+            <div className="relative aspect-video rounded-lg bg-background overflow-hidden">
               <MediaPreview media={selectedMedia} showMetadata={Boolean(media)} />
             </div>
 
@@ -81,7 +81,7 @@ export function MediaGalleryField({
               <>
                 <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-xl"
+                  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 items-center justify-center gap-1 opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100">
                   <Button

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

@@ -0,0 +1,211 @@
+'use client'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from '@admin/components/ui/accordion'
+import { Button } from '@admin/components/ui/button'
+import { Card, CardContent, CardHeader } from '@admin/components/ui/card'
+import { FormDescription, FormField, FormItem, FormLabel } from '@admin/components/ui/form'
+import { cloneDefaultValue, createListItemKey } from '@admin/utils/form/list-field'
+import { cn } from '@admin/utils/shared/cn'
+import { Plus, X } from 'lucide-react'
+import * as React from 'react'
+import { useFormContext, useWatch } from 'react-hook-form'
+
+interface NestedObjectListFieldProps {
+  name: string
+  label: string
+  singularLabel: string
+  defaultValue: Record<string, unknown>
+  children: (index: number) => React.ReactNode
+  className?: string
+  description?: string
+  disabled?: boolean
+  hideLabel?: boolean
+  maxItems?: number
+  renderTitle?: (index: number) => React.ReactNode
+  validatePaths?: string[]
+}
+
+export function NestedObjectListField({
+  name,
+  label,
+  singularLabel,
+  defaultValue,
+  children,
+  className,
+  description,
+  disabled,
+  hideLabel,
+  maxItems,
+  renderTitle,
+  validatePaths
+}: NestedObjectListFieldProps) {
+  const { control, setValue, trigger } = useFormContext()
+  const watchedItems = useWatch({
+    control,
+    name
+  })
+  const items = Array.isArray(watchedItems) ? watchedItems : []
+  const [expanded, setExpanded] = React.useState('')
+  const [itemKeys, setItemKeys] = React.useState<string[]>([])
+  const canAddMore = !maxItems || items.length < maxItems
+
+  React.useEffect(() => {
+    setItemKeys((currentKeys) => {
+      if (currentKeys.length === items.length) return currentKeys
+      if (currentKeys.length > items.length) {
+        return currentKeys.slice(0, items.length)
+      }
+
+      const missingKeyCount = items.length - currentKeys.length
+      const nextKeys = Array.from({ length: missingKeyCount }, createListItemKey)
+      return [...currentKeys, ...nextKeys]
+    })
+  }, [items.length])
+
+  async function handleAdd() {
+    if (!canAddMore) return
+    if (expanded) {
+      const isExpandedItemValid = await validateExpandedItem()
+      if (!isExpandedItemValid) return
+    }
+
+    const nextValue = cloneDefaultValue(defaultValue) as Record<string, unknown>
+    const nextItems = [...items, nextValue]
+    setValue(name, nextItems, {
+      shouldDirty: true,
+      shouldValidate: false
+    })
+    setItemKeys((currentKeys) => [...currentKeys, createListItemKey()])
+    setExpanded(`item-${nextItems.length}`)
+  }
+
+  const handleRemove = (index: number) => {
+    if (disabled) return
+
+    const nextItems = items.filter((_, itemIndex) => itemIndex !== index)
+    setValue(name, nextItems, {
+      shouldDirty: true,
+      shouldValidate: false
+    })
+    const keepOtherKeys = (_: string, itemIndex: number) => itemIndex !== index
+    setItemKeys((currentKeys) => currentKeys.filter(keepOtherKeys))
+    setExpanded('')
+  }
+
+  async function validateExpandedItem() {
+    if (!expanded) return true
+
+    const expandedIndex = Number(expanded.replace('item-', '')) - 1
+    if (expandedIndex < 0) return true
+
+    const itemPath = `${name}.${expandedIndex}`
+    const paths =
+      validatePaths && validatePaths.length > 0
+        ? validatePaths.map((path) => `${itemPath}.${path}`)
+        : [itemPath]
+
+    return trigger(paths)
+  }
+
+  async function handleExpandedChange(nextExpanded: string) {
+    if (expanded && nextExpanded && nextExpanded !== expanded) {
+      const isExpandedItemValid = await validateExpandedItem()
+      if (!isExpandedItemValid) return
+    }
+
+    setExpanded(nextExpanded)
+  }
+
+  const getTitle = (index: number) => {
+    if (renderTitle) return renderTitle(index)
+    return `${singularLabel} ${index + 1}`
+  }
+
+  return (
+    <FormItem className={cn('space-y-4', className)}>
+      {items.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center">
+            <p className="text-muted-foreground">No {label} added yet.</p>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleAdd}
+              disabled={disabled || !canAddMore}
+            >
+              <Plus className="size-3" />
+              Add {singularLabel}
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card className="space-y-4 border-t border-border pt-4">
+          <CardHeader className="flex items-center justify-between pl-5">
+            <FormField
+              control={control}
+              name={name}
+              render={() => (
+                <FormItem className="flex flex-col gap-1">
+                  <FormLabel className={cn({ 'sr-only': hideLabel })}>{label}</FormLabel>
+                  {description ? <FormDescription>{description}</FormDescription> : null}
+                </FormItem>
+              )}
+            />
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleAdd}
+              disabled={disabled || !canAddMore}
+            >
+              <Plus className="size-3" />
+              Add {singularLabel}
+            </Button>
+          </CardHeader>
+
+          <CardContent className="p-0!">
+            <Accordion
+              type="single"
+              collapsible
+              value={expanded}
+              onValueChange={handleExpandedChange}
+              className="border-none"
+            >
+              {items.map((_, index) => (
+                <AccordionItem
+                  key={itemKeys[index] ?? `${name}-${index}`}
+                  value={`item-${index + 1}`}
+                  className="bg-transparent!"
+                >
+                  <div className="relative py-1">
+                    <AccordionTrigger className="flex min-h-12 w-full items-center gap-2 py-2">
+                      <span className="w-full pr-16">{getTitle(index)}</span>
+                    </AccordionTrigger>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      className="absolute right-10 top-1/2 shrink-0 -translate-y-1/2"
+                      aria-label={`Remove ${singularLabel}`}
+                      onClick={() => handleRemove(index)}
+                      disabled={disabled}
+                    >
+                      <X />
+                    </Button>
+                  </div>
+                  <AccordionContent className="space-y-5 border rounded-lg border-border p-5 bg-background mb-4">
+                    {children(index)}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </CardContent>
+        </Card>
+      )}
+    </FormItem>
+  )
+}

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

@@ -19,7 +19,7 @@ export function PlaceholderCard({
   return (
     <div
       className={cn(
-        'flex h-75 border border-border border-dashed bg-background flex-col items-center justify-center gap-5 rounded-xl',
+        'flex h-75 border border-border border-dashed bg-background flex-col items-center justify-center gap-5 rounded-lg',
         className
       )}
     >

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

@@ -12,7 +12,7 @@ export function Placeholder({ label, description, action, className, ...props }:
   return (
     <div
       className={cn(
-        'border flex items-center flex-col gap-2 border-dashed border-border rounded-xl p-8 bg-background',
+        'border flex items-center flex-col gap-2 border-dashed border-border rounded-lg p-8 bg-background',
         className
       )}
       {...props}

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

@@ -31,7 +31,7 @@ export function SortableGalleryItem({
     <div
       ref={setNodeRef}
       style={style}
-      className="group relative aspect-square overflow-hidden rounded-xl border bg-muted"
+      className="group relative aspect-square overflow-hidden rounded-lg border bg-muted"
     >
       {!disabled && (
         <div

package/dist/assets/shared-assets/react-admin/schema.json

@@ -1441,6 +1441,111 @@
         "$ref": "#/$defs/fieldWithCreatableSelect"
       }
     },
+    "fieldArrayWithTitle": {
+      "type": "array",
+      "contains": {
+        "$ref": "#/$defs/fieldWithTitle"
+      }
+    },
+    "fieldWithTitle": {
+      "type": "object",
+      "anyOf": [
+        {
+          "properties": {
+            "name": {
+              "const": "title"
+            },
+            "type": {
+              "enum": ["string", "varchar", "text"]
+            }
+          },
+          "required": ["name", "type"]
+        },
+        {
+          "properties": {
+            "type": {
+              "enum": ["group", "section"]
+            },
+            "fields": {
+              "$ref": "#/$defs/fieldArrayWithTitle"
+            }
+          },
+          "required": ["type", "fields"]
+        },
+        {
+          "properties": {
+            "tabs": {
+              "type": "array",
+              "contains": {
+                "$ref": "#/$defs/tabWithTitle"
+              }
+            }
+          },
+          "required": ["tabs"]
+        }
+      ]
+    },
+    "tabWithTitle": {
+      "type": "object",
+      "anyOf": [
+        {
+          "properties": {
+            "fields": {
+              "$ref": "#/$defs/fieldArrayWithTitle"
+            }
+          },
+          "required": ["fields"]
+        },
+        {
+          "properties": {
+            "slot": {
+              "$ref": "#/$defs/slotLayoutWithTitle"
+            }
+          },
+          "required": ["slot"]
+        }
+      ]
+    },
+    "slotLayoutWithTitle": {
+      "type": "object",
+      "anyOf": [
+        {
+          "properties": {
+            "main": {
+              "properties": {
+                "fields": {
+                  "$ref": "#/$defs/fieldArrayWithTitle"
+                }
+              },
+              "required": ["fields"]
+            }
+          },
+          "required": ["main"]
+        },
+        {
+          "properties": {
+            "sidebar": {
+              "properties": {
+                "fields": {
+                  "$ref": "#/$defs/fieldArrayWithTitle"
+                }
+              },
+              "required": ["fields"]
+            }
+          },
+          "required": ["sidebar"]
+        }
+      ]
+    },
+    "stepWithTitle": {
+      "type": "object",
+      "properties": {
+        "fields": {
+          "$ref": "#/$defs/fieldArrayWithTitle"
+        }
+      },
+      "required": ["fields"]
+    },
     "fieldWithCreatableSelect": {
       "type": "object",
       "anyOf": [
@@ -1611,6 +1716,37 @@
     }
   ],
   "allOf": [
+    {
+      "anyOf": [
+        {
+          "properties": {
+            "fields": {
+              "$ref": "#/$defs/fieldArrayWithTitle"
+            }
+          },
+          "required": ["fields"]
+        },
+        {
+          "properties": {
+            "slot": {
+              "$ref": "#/$defs/slotLayoutWithTitle"
+            }
+          },
+          "required": ["slot"]
+        },
+        {
+          "properties": {
+            "steps": {
+              "type": "array",
+              "contains": {
+                "$ref": "#/$defs/stepWithTitle"
+              }
+            }
+          },
+          "required": ["steps"]
+        }
+      ]
+    },
     {
       "if": {
         "properties": {

package/dist/assets/shared-assets/react-admin/ui/accordion.tsx

@@ -10,7 +10,7 @@ function Accordion({ className, ...props }: React.ComponentProps<typeof Accordio
     <AccordionPrimitive.Root
       data-slot="accordion"
       className={cn(
-        'flex w-full flex-col rounded-xl overflow-hidden border border-border bg-card shadow-2xl/1',
+        'flex w-full flex-col rounded-lg overflow-hidden border border-border bg-card shadow-2xl/1',
         className
       )}
       {...props}