betterstart-cli 0.0.103 → 0.0.104

package/dist/assets/adapters/next/templates/renderers/generators/form-admin/admin-columns/generate-columns.ts

@@ -0,0 +1,89 @@
+export function renderColumnsValueTemplate({
+  accessor,
+  tableColumnSize,
+  buildSortableHeaderDefBuildSortableHeaderDef,
+  fTextarea
+}: {
+  accessor: string
+  tableColumnSize: string
+  buildSortableHeaderDefBuildSortableHeaderDef: string
+  fTextarea: string
+}): string {
+  return `  {
+    accessorKey: '${accessor}',
+    size: ${tableColumnSize},
+    ${buildSortableHeaderDefBuildSortableHeaderDef},
+    cell: ({ row }) => {
+      const value = row.getValue('${accessor}')
+      return <div>${fTextarea}</div>
+    }
+  }`
+}
+
+export function renderColumnsLayoutTemplate({ pascal }: { pascal: string }): string {
+  return `  {
+    id: 'actions',
+    size: 64,
+    enableResizing: false,
+    meta: { width: '64px' },
+    header: () => <span className="sr-only">Actions</span>,
+    cell: ({ row }) => (
+      <div className="flex justify-end">
+        <${pascal}Actions id={row.original.id} />
+      </div>
+    )
+  }`
+}
+
+export function renderColumnsClientModuleTemplate({
+  pascal,
+  actionImportPath,
+  actionsImport,
+  hasBadgeBadge,
+  columnDefsContent,
+  actionsColumnContent
+}: {
+  pascal: string
+  actionImportPath: string
+  actionsImport: string
+  hasBadgeBadge: string
+  columnDefsContent: string
+  actionsColumnContent: string
+}): string {
+  return `'use client'
+
+import { SortIndicator } from '@admin/components/shared/sort-indicator'
+import type { ${pascal}SubmissionData } from '@admin/actions/${actionImportPath}'
+${actionsImport}${hasBadgeBadge}import { Button } from '@admin/components/ui/button'
+import { Checkbox } from '@admin/components/ui/checkbox'
+import type { ColumnDef } from '@tanstack/react-table'
+
+export const columns: ColumnDef<${pascal}SubmissionData>[] = [
+  {
+    id: 'select',
+    size: 50,
+    enableResizing: false,
+    meta: { width: '50px' },
+    header: ({ table }) => (
+      <div className="flex items-center">
+        <Checkbox
+          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+          onCheckedChange={(value: boolean) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value: boolean) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false
+  },
+${columnDefsContent}${actionsColumnContent}
+]
+`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form-admin/admin-page/generate-page.ts

@@ -0,0 +1,23 @@
+export function renderPageImportsTemplate({
+  pascal,
+  kebab
+}: {
+  pascal: string
+  kebab: string
+}): string {
+  return `import { getSetting } from '@admin/actions/settings'
+import * as React from 'react'
+import { ${pascal}SubmissionsPageContent } from './${kebab}-submissions-page-content'
+import { ${pascal}SubmissionsPageSkeleton } from './${kebab}-submissions-page-skeleton'
+
+export default async function Page() {
+  const initialSettings = await getSetting()
+
+  return (
+    <React.Suspense fallback={<${pascal}SubmissionsPageSkeleton />}>
+      <${pascal}SubmissionsPageContent initialSettings={initialSettings} />
+    </React.Suspense>
+  )
+}
+`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form-admin/admin-page-content.ts

@@ -0,0 +1,246 @@
+export function renderPageContentActionButtonsTemplate(): string {
+  return `
+            <Button
+              variant="outline"
+              onClick={() => exportCsv.mutate()}
+              disabled={exportCsv.isPending}
+              aria-busy={exportCsv.isPending}
+            >
+              {exportCsv.isPending ? <Spinner className="size-3.5" /> : <Download className="size-3.5" />}
+              {exportCsv.isPending ? 'Exporting CSV…' : 'Export CSV'}
+            </Button>`
+}
+
+export function renderPageContentHandleBulkDeleteTemplate({
+  pascal,
+  camel
+}: {
+  pascal: string
+  camel: string
+}): string {
+  return `
+  const handleBulkDelete = () => {
+    startTransition(async () => {
+      try {
+        const result = await deleteBulk${pascal}Submissions(selectedIds)
+
+        if (result.success) {
+          toast.success(
+            selectedIds.length === 1
+              ? \`\${selectedIds.length} submission deleted\`
+              : \`\${selectedIds.length} submissions deleted\`
+          )
+          queryClient.refetchQueries({ queryKey: ['${camel}-submissions'] })
+          void setSelectedIds([])
+        } else {
+          toast.error(result.error || 'Failed to delete the selected submissions')
+        }
+      } catch (error) {
+        toast.error('Failed to delete the selected submissions. Try again.')
+        console.error(error)
+      }
+    })
+  }
+`
+}
+
+export function renderPageContentLayoutTemplate(): string {
+  return `
+          actions={
+            <div className="flex items-center gap-1">
+              {selectedIds.length > 0 && (
+                <DeleteDialog
+                  count={selectedIds.length}
+                  entityName="submission"
+                  onConfirm={handleBulkDelete}
+                  isPending={isPending}
+                />
+              )}
+            </div>
+          }`
+}
+
+export function renderPageContentClientModuleTemplate({
+  queryClientImport,
+  exportIconImport,
+  toastImport,
+  deleteActionImport,
+  deleteDialogImport,
+  exportSpinnerImport,
+  devModeIntegrateButtonExportName,
+  devModeIntegrateButtonImportPath,
+  exportHookImport,
+  pascal,
+  kebab,
+  queryClient,
+  camel,
+  exportHook,
+  deleteTransition,
+  bulkDeleteHandler,
+  label,
+  exportButton,
+  adminRoutePath,
+  toLowerCase,
+  bulkDeleteActions
+}: {
+  queryClientImport: string
+  exportIconImport: string
+  toastImport: string
+  deleteActionImport: string
+  deleteDialogImport: string
+  exportSpinnerImport: string
+  devModeIntegrateButtonExportName: string
+  devModeIntegrateButtonImportPath: string
+  exportHookImport: string
+  pascal: string
+  kebab: string
+  queryClient: string
+  camel: string
+  exportHook: string
+  deleteTransition: string
+  bulkDeleteHandler: string
+  label: string
+  exportButton: string
+  adminRoutePath: string
+  toLowerCase: string
+  bulkDeleteActions: string
+}): string {
+  return `'use client'
+
+import type { Setting } from '@admin/actions/settings'
+import { useIsFetching${queryClientImport} } from '@tanstack/react-query'
+import { ${exportIconImport}Settings } from 'lucide-react'
+import Link from 'next/link'
+import { parseAsArrayOf, parseAsInteger, parseAsString, useQueryState, useQueryStates } from 'nuqs'
+import * as React from 'react'
+${toastImport}
+${deleteActionImport}
+${deleteDialogImport}
+import { EntityFiltersBar } from '@admin/components/shared/entity-filters-bar'
+import { PageHeader } from '@admin/components/shared/page-header'
+import { Button } from '@admin/components/ui/button'${exportSpinnerImport}
+import { ${devModeIntegrateButtonExportName} } from '${devModeIntegrateButtonImportPath}'${exportHookImport}
+import { columns } from './columns'
+import { ${pascal}SubmissionDrawer } from './${kebab}-submission-drawer'
+import { ${pascal}SubmissionsTable } from './${kebab}-submissions-table'
+
+interface ${pascal}SubmissionsPageContentProps {
+  initialSettings?: Setting | null
+}
+
+export function ${pascal}SubmissionsPageContent({
+  initialSettings
+}: ${pascal}SubmissionsPageContentProps) {
+${queryClient}  const isSearchFetching = useIsFetching({ queryKey: ['${camel}-submissions'] }) > 0${exportHook}
+  const [search, setSearch] = useQueryState('q', parseAsString.withDefault(''))
+  const [, setPageIndex] = useQueryState('page', parseAsInteger.withDefault(0))
+  const [selectedSubmissionId, setSelectedSubmissionId] = useQueryState(
+    'submission',
+    parseAsString.withDefault('')
+  )
+  const filterParsers = {
+    submittedAtFrom: parseAsString.withDefault(''),
+    submittedAtTo: parseAsString.withDefault(''),
+  } as const
+  const [filterValues, setFilters] = useQueryStates(filterParsers)
+  const submittedAtFrom = filterValues.submittedAtFrom
+  const submittedAtTo = filterValues.submittedAtTo
+  const [selectedIds, setSelectedIds] = useQueryState(
+    'selected',
+    parseAsArrayOf(parseAsString).withDefault([])
+  )
+${deleteTransition}${bulkDeleteHandler}
+
+  const activeFilterCount = [search, (submittedAtFrom || submittedAtTo)].filter(Boolean).length
+
+  const handleViewSubmission = React.useCallback((id: string) => {
+    void setSelectedSubmissionId(id)
+  }, [setSelectedSubmissionId])
+
+  const handleSubmissionDrawerOpenChange = React.useCallback((open: boolean) => {
+    if (!open) {
+      void setSelectedSubmissionId(null)
+    }
+  }, [setSelectedSubmissionId])
+
+  const handleSearch = React.useCallback((value: string | null) => {
+    React.startTransition(() => {
+      void setPageIndex(0)
+      void setSearch(value)
+    })
+  }, [setSearch, setPageIndex])
+
+  const handleClearAll = React.useCallback(() => {
+    React.startTransition(() => {
+      void setPageIndex(0)
+      void setSearch(null)
+      void setFilters({
+        submittedAtFrom: null,
+        submittedAtTo: null
+      })
+    })
+  }, [setSearch, setFilters, setPageIndex])
+
+  const filters = [
+    {
+      key: 'submittedAt',
+      label: 'Submitted',
+      type: 'date-range' as const,
+      from: submittedAtFrom,
+      to: submittedAtTo
+    }
+  ]
+
+  return (
+    <React.Fragment>
+      <PageHeader
+        title="${label}"
+        actions={
+          <div className="flex items-center gap-1">
+            <${devModeIntegrateButtonExportName} initialSettings={initialSettings} />${exportButton}
+            <Button variant="outline" asChild>
+              <Link href="${adminRoutePath}/settings/forms">
+                <Settings className="size-3.5" />
+                Settings
+              </Link>
+            </Button>
+          </div>
+        }
+      />
+      <EntityFiltersBar
+          filters={filters}
+          activeFilterCount={activeFilterCount}
+          onFilterChange={(updates) => {
+            React.startTransition(() => {
+              void setPageIndex(0)
+              void setFilters(updates)
+            })
+          }}
+          onClearAll={handleClearAll}
+          search={search}
+          searchPlaceholder="Search ${toLowerCase} submissions..."
+          isPending={isSearchFetching}
+          onSearch={handleSearch}
+${bulkDeleteActions}
+        />
+      <main className="space-y-4 px-4 pb-4 flex-1">
+        <${pascal}SubmissionsTable
+          columns={columns}
+          selectedIds={selectedIds}
+          setSelectedIds={setSelectedIds}
+          onViewSubmission={handleViewSubmission}
+          search={search}
+          submittedAtFrom={submittedAtFrom}
+          submittedAtTo={submittedAtTo}
+        />
+      </main>
+      <${pascal}SubmissionDrawer
+        open={Boolean(selectedSubmissionId)}
+        submissionId={selectedSubmissionId || null}
+        onOpenChange={handleSubmissionDrawerOpenChange}
+      />
+    </React.Fragment>
+  )
+}
+`
+}

package/dist/assets/adapters/next/templates/renderers/generators/form-admin/admin-submission-drawer.ts

@@ -0,0 +1,216 @@
+export function renderSubmissionDrawerLayoutTemplate({
+  lbl,
+  name
+}: {
+  lbl: string
+  name: string
+}): string {
+  return `              <div className="space-y-1">
+                <p className="text-sm font-medium text-muted-foreground">${lbl}</p>
+                <p className="text-sm">
+                  {submission.${name} ? (
+                    <a href={\`mailto:\${submission.${name}}\`} className="text-primary hover:underline">{submission.${name}}</a>
+                  ) : '-'}
+                </p>
+              </div>`
+}
+
+export function renderSubmissionDrawerLayoutDetailsTemplate({
+  lbl,
+  name
+}: {
+  lbl: string
+  name: string
+}): string {
+  return `              <div className="space-y-1">
+                <p className="text-sm font-medium text-muted-foreground">${lbl}</p>
+                <p className="text-sm whitespace-pre-wrap">{submission.${name} || '-'}</p>
+              </div>`
+}
+
+export function renderSubmissionDrawerLayoutDetailsBranchTemplate({
+  lbl,
+  name
+}: {
+  lbl: string
+  name: string
+}): string {
+  return `              <div className="space-y-1">
+                <p className="text-sm font-medium text-muted-foreground">${lbl}</p>
+                <p className="text-sm">{submission.${name} ? 'Yes' : 'No'}</p>
+              </div>`
+}
+
+export function renderSubmissionDrawerLayoutDetailsBranchBodyTemplate({
+  lbl,
+  name
+}: {
+  lbl: string
+  name: string
+}): string {
+  return `              <div className="space-y-1">
+                <p className="text-sm font-medium text-muted-foreground">${lbl}</p>
+                <p className="text-sm">{submission.${name} ? new Date(submission.${name}).toLocaleDateString() : '-'}</p>
+              </div>`
+}
+
+export function renderSubmissionDrawerLayoutDetailsBranchBodyFragmentTemplate({
+  lbl,
+  name
+}: {
+  lbl: string
+  name: string
+}): string {
+  return `              <div className="space-y-1">
+                <p className="text-sm font-medium text-muted-foreground">${lbl}</p>
+                <p className="text-sm">
+                  {submission.${name} ? (
+                    <a href={submission.${name}} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline break-all">{submission.${name}}</a>
+                  ) : '-'}
+                </p>
+              </div>`
+}
+
+export function renderSubmissionDrawerLayoutDetailsBranchBodyFragmentSectionTemplate({
+  lbl,
+  name
+}: {
+  lbl: string
+  name: string
+}): string {
+  return `              <div className="space-y-1">
+                <p className="text-sm font-medium text-muted-foreground">${lbl}</p>
+                <div className="text-sm">
+                  {Array.isArray(submission.${name}) && submission.${name}.length > 0 ? (
+                    <ul className="list-inside list-disc space-y-1">
+                      {submission.${name}.map((item: unknown) => {
+                        const itemLabel = typeof item === 'string'
+                          ? item
+                          : item && typeof item === 'object'
+                            ? Object.entries(item).map(([key, value]) => \`\${key}: \${String(value)}\`).join(', ')
+                            : String(item)
+                        return <li key={itemLabel}>{itemLabel}</li>
+                      })}
+                    </ul>
+                  ) : '-'}
+                </div>
+              </div>`
+}
+
+export function renderSubmissionDrawerLayoutDetailsBranchBodyFragmentSectionVariantTemplate({
+  lbl,
+  name
+}: {
+  lbl: string
+  name: string
+}): string {
+  return `              <div className="space-y-1">
+                <p className="text-sm font-medium text-muted-foreground">${lbl}</p>
+                <p className="text-sm">{submission.${name} ?? '-'}</p>
+              </div>`
+}
+
+export function renderSubmissionDrawerLayoutDetailsBranchBodyFragmentSectionVariantContinuationTemplate(): string {
+  return `
+              {submission.customFields && Object.keys(submission.customFields).length > 0 && (
+                <div className="space-y-3 border-t pt-4">
+                  <p className="text-sm font-semibold text-muted-foreground">Custom Fields</p>
+                  {Object.entries(submission.customFields).map(([key, value]) => (
+                    <div key={key} className="space-y-1">
+                      <p className="text-sm font-medium capitalize">{key.replace(/([A-Z])/g, ' $1').trim()}</p>
+                      <p className="text-sm">{value !== null && value !== undefined ? String(value) : '-'}</p>
+                    </div>
+                  ))}
+                </div>
+              )}`
+}
+
+export function renderSubmissionDrawerClientModuleTemplate({
+  pascal,
+  kebab,
+  label,
+  fieldItems,
+  customFieldsSection
+}: {
+  pascal: string
+  kebab: string
+  label: string
+  fieldItems: string
+  customFieldsSection: string
+}): string {
+  return `'use client'
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle
+} from '@admin/components/ui/drawer'
+import { ScrollArea } from '@admin/components/ui/scroll-area'
+import { use${pascal}Submission } from '@admin/hooks/use-${kebab}-form'
+
+interface ${pascal}SubmissionDrawerProps {
+  open: boolean
+  submissionId: string | null
+  onOpenChange: (open: boolean) => void
+}
+
+function formatDateTime(value: string): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+
+  return new Intl.DateTimeFormat('en-US', {
+    dateStyle: 'medium',
+    timeStyle: 'medium'
+  }).format(date)
+}
+
+export function ${pascal}SubmissionDrawer({
+  open,
+  submissionId,
+  onOpenChange
+}: ${pascal}SubmissionDrawerProps) {
+  const { data: submission, error, isPending } = use${pascal}Submission(
+    open ? submissionId : null
+  )
+  const description = submission
+    ? \`Submitted \${formatDateTime(submission.submittedAt)}\`
+    : submissionId
+      ? \`Submission \${submissionId}\`
+      : 'No submission selected'
+
+  return (
+    <Drawer direction="right" open={open} onOpenChange={onOpenChange} modal>
+      <DrawerContent className="h-full w-full overflow-hidden data-[vaul-drawer-direction=right]:sm:max-w-xl">
+        <DrawerHeader>
+          <DrawerTitle>${label} Submission</DrawerTitle>
+          <DrawerDescription>{description}</DrawerDescription>
+        </DrawerHeader>
+        <ScrollArea className="min-h-0 flex-1">
+          {isPending ? (
+            <div className="p-4 text-sm text-muted-foreground">Loading submission…</div>
+          ) : error ? (
+            <div className="p-4 text-sm text-destructive">
+              Error loading submission: {error.message}
+            </div>
+          ) : submission ? (
+            <div className="p-4">
+              <div className="space-y-4 rounded-sm border border-border bg-card p-4">
+${fieldItems}${customFieldsSection}
+                <div className="space-y-1 border-t pt-4">
+                  <p className="text-sm font-medium text-muted-foreground">Submitted At</p>
+                  <p className="text-sm">{formatDateTime(submission.submittedAt)}</p>
+                </div>
+              </div>
+            </div>
+          ) : submissionId ? (
+            <div className="p-4 text-sm text-muted-foreground">Submission not found.</div>
+          ) : null}
+        </ScrollArea>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+`
+}