betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-table-pagination.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { ProgressiveBlur } from '@admin/components/custom/progressive-blur'
+import { Button } from '@admin/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@admin/components/ui/select'
+import { cn } from '@admin/utils/shared/cn'
+import type { Table } from '@tanstack/react-table'
+import * as React from 'react'
+
+const PAGE_SIZE_OPTIONS = [
+  { value: '10', label: '10' },
+  { value: '20', label: '20' },
+  { value: '50', label: '50' },
+  { value: '100', label: '100' },
+  { value: 'all', label: 'All' }
+]
+
+interface DataTablePaginationBaseProps<TData> {
+  table: Table<TData>
+  pageSize: number
+  setPageSize: (value: number | null) => void
+  className?: string
+}
+
+interface ControlledDataTablePaginationProps {
+  paginationMode: 'controlled'
+  pageIndex: number
+  pageCount: number
+  setPageIndex: (value: number) => void
+}
+
+interface UncontrolledDataTablePaginationProps {
+  paginationMode: 'uncontrolled'
+  pageIndex?: never
+  pageCount?: never
+  setPageIndex?: never
+}
+
+type DataTablePaginationProps<TData> = DataTablePaginationBaseProps<TData> &
+  (ControlledDataTablePaginationProps | UncontrolledDataTablePaginationProps)
+
+export function DataTablePagination<TData>(props: DataTablePaginationProps<TData>) {
+  const { table, pageSize, setPageSize, className } = props
+  const controlledSetPageIndex =
+    props.paginationMode === 'controlled' ? props.setPageIndex : undefined
+  const resolvedPageIndex =
+    props.paginationMode === 'controlled' ? props.pageIndex : table.getState().pagination.pageIndex
+  const resolvedPageCount =
+    (props.paginationMode === 'controlled' ? props.pageCount : table.getPageCount()) || 1
+  const canGoPrevious = resolvedPageIndex > 0
+  const canGoNext = resolvedPageIndex < resolvedPageCount - 1
+
+  const updatePageIndex = React.useCallback(
+    (nextPageIndex: number) => {
+      React.startTransition(() => {
+        if (controlledSetPageIndex) {
+          controlledSetPageIndex(nextPageIndex)
+        } else {
+          table.setPageIndex(nextPageIndex)
+        }
+      })
+    },
+    [controlledSetPageIndex, table]
+  )
+
+  const handlePageSizeChange = React.useCallback(
+    (value: string) => {
+      React.startTransition(() => {
+        if (value === 'all') {
+          setPageSize(-1)
+        } else {
+          setPageSize(Number(value))
+        }
+        if (controlledSetPageIndex) {
+          controlledSetPageIndex(0)
+        } else {
+          table.setPageIndex(0)
+        }
+      })
+    },
+    [controlledSetPageIndex, setPageSize, table]
+  )
+
+  return (
+    <div
+      className={cn(
+        'pointer-events-none fixed right-0 bottom-0 left-[var(--admin-shell-content-left)] z-10 isolate flex flex-col transition-[left] duration-200 ease-linear',
+        className
+      )}
+    >
+      <ProgressiveBlur position="bottom" height="53px" />
+      <div className="pointer-events-auto flex [--admin-shell-bottom-bar-height:53px] h-(--admin-shell-bottom-bar-height) items-center justify-between border-t border-border bg-background px-4 py-2">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground">Rows per page</span>
+          <Select
+            value={pageSize === -1 ? 'all' : String(pageSize)}
+            onValueChange={handlePageSizeChange}
+          >
+            <SelectTrigger className="w-25 h-8">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PAGE_SIZE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            onClick={() => updatePageIndex(Math.max(resolvedPageIndex - 1, 0))}
+            disabled={!canGoPrevious}
+          >
+            Previous
+          </Button>
+          <div className="text-sm text-muted-foreground">
+            Page {resolvedPageIndex + 1} of {resolvedPageCount}
+          </div>
+          <Button
+            variant="outline"
+            onClick={() => updatePageIndex(Math.min(resolvedPageIndex + 1, resolvedPageCount - 1))}
+            disabled={!canGoNext}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-table.tsx

@@ -0,0 +1,236 @@
+'use client'
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@admin/components/ui/table'
+import { useTableUtils } from '@admin/hooks/use-table-utils'
+import { cn } from '@admin/utils/shared/cn'
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type RowData,
+  type SortingState,
+  useReactTable
+} from '@tanstack/react-table'
+import { GripVertical } from 'lucide-react'
+import { parseAsInteger, useQueryState } from 'nuqs'
+import * as React from 'react'
+import { DataTablePagination } from './data-table-pagination'
+
+interface DataTableProps<TData extends RowData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  isPending?: boolean
+  error?: Error | null
+  emptyMessage?: string
+  loadingMessage?: string
+  selectedIds?: string[]
+  onSelectedIdsChange?: (ids: string[]) => void
+  meta?: Record<string, unknown>
+  getId?: (row: TData) => string
+}
+
+export function DataTable<TData extends RowData, TValue>({
+  columns,
+  data,
+  isPending = false,
+  error = null,
+  emptyMessage = 'No results found.',
+  loadingMessage = 'Loading...',
+  selectedIds,
+  onSelectedIdsChange,
+  meta,
+  getId
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+  const [pageIndex, setPageIndex] = useQueryState('page', parseAsInteger.withDefault(0))
+  const [pageSize, setPageSize] = useQueryState('size', parseAsInteger.withDefault(20))
+  const effectivePageSize = pageSize === -1 ? Number.MAX_SAFE_INTEGER : pageSize
+  const {
+    columnSizing,
+    handleColumnSizingChange,
+    handlePaginationChange,
+    handleRowSelectionChange,
+    hoveredColumnId,
+    registerTable,
+    resetColumnSizingToContainer,
+    rowSelection,
+    setHoveredColumnId,
+    tableContainerRef
+  } = useTableUtils<TData>({
+    data,
+    getId,
+    onSelectedIdsChange,
+    pageIndex,
+    pageSize: effectivePageSize,
+    selectedIds,
+    setPageIndex
+  })
+
+  const table = useReactTable({
+    data,
+    columns,
+    columnResizeMode: 'onChange',
+    defaultColumn: {
+      minSize: 48,
+      size: 220
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnSizingChange: handleColumnSizingChange,
+    onRowSelectionChange: selectedIds ? handleRowSelectionChange : undefined,
+    onPaginationChange: handlePaginationChange,
+    meta,
+    state: {
+      sorting,
+      columnFilters,
+      columnSizing,
+      rowSelection,
+      pagination: {
+        pageIndex,
+        pageSize: effectivePageSize
+      }
+    }
+  })
+  registerTable(table)
+
+  return (
+    <div className="space-y-6 pb-24">
+      <div ref={tableContainerRef} className="overflow-hidden material-sm border-border">
+        <Table className="table-fixed" style={{ width: table.getTotalSize() }}>
+          <colgroup>
+            {table.getVisibleLeafColumns().map((column) => (
+              <col key={column.id} style={{ width: column.getSize() }} />
+            ))}
+          </colgroup>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header, headerIndex) => {
+                  const meta = header.column.columnDef.meta as Record<string, unknown> | undefined
+                  const resizeLabel =
+                    typeof header.column.columnDef.header === 'string'
+                      ? header.column.columnDef.header
+                      : header.column.id
+                  const nextHeader = headerGroup.headers[headerIndex + 1]
+                  const canResizeColumn =
+                    header.column.getCanResize() && nextHeader?.column.getCanResize() === true
+                  return (
+                    <TableHead
+                      key={header.id}
+                      className={cn('group/resize-header relative overflow-hidden', {
+                        'text-center': meta?.align === 'center',
+                        'text-right': meta?.align === 'right'
+                      })}
+                      data-column-id={header.column.id}
+                      onMouseEnter={() => setHoveredColumnId(header.column.id)}
+                      onMouseLeave={() =>
+                        setHoveredColumnId((current) =>
+                          current === header.column.id ? null : current
+                        )
+                      }
+                      style={{ width: header.getSize() }}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                      {canResizeColumn ? (
+                        <button
+                          type="button"
+                          aria-label={`Resize ${resizeLabel} column`}
+                          className="group/resize-handle absolute right-0 top-0 z-10 flex h-full w-5 cursor-col-resize touch-none select-none items-center justify-center text-foreground opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none group-focus-within/resize-header:opacity-100 data-[column-hovered=true]:opacity-100 data-[resizing=true]:opacity-100"
+                          data-resize-handle
+                          data-column-hovered={
+                            hoveredColumnId === header.column.id ? 'true' : 'false'
+                          }
+                          data-resizing={header.column.getIsResizing() ? 'true' : 'false'}
+                          onDoubleClick={resetColumnSizingToContainer}
+                          onMouseDown={header.getResizeHandler()}
+                          onTouchStart={header.getResizeHandler()}
+                        >
+                          <GripVertical aria-hidden="true" className="size-3.5 text-foreground" />
+                        </button>
+                      ) : null}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isPending ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  <div className="text-muted-foreground">{loadingMessage}</div>
+                </TableCell>
+              </TableRow>
+            ) : error ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  <div className="text-destructive">Error: {error.message}</div>
+                </TableCell>
+              </TableRow>
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() ? 'selected' : undefined}>
+                  {row.getVisibleCells().map((cell) => {
+                    const meta = cell.column.columnDef.meta as Record<string, unknown> | undefined
+                    return (
+                      <TableCell
+                        key={cell.id}
+                        className={cn({
+                          'text-center': meta?.align === 'center',
+                          'text-right': meta?.align === 'right'
+                        })}
+                        data-column-id={cell.column.id}
+                        onMouseEnter={() => setHoveredColumnId(cell.column.id)}
+                        onMouseLeave={() =>
+                          setHoveredColumnId((current) =>
+                            current === cell.column.id ? null : current
+                          )
+                        }
+                        style={{ width: cell.column.getSize() }}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    )
+                  })}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <DataTablePagination
+        table={table}
+        paginationMode="uncontrolled"
+        pageSize={pageSize}
+        setPageSize={setPageSize}
+      />
+    </div>
+  )
+}
+
+export type { DataTableProps }

package/dist/assets/adapters/next/templates/init/components/shared/delete-dialog.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@admin/components/ui/alert-dialog'
+import { Button } from '@admin/components/ui/button'
+import { Trash2 } from 'lucide-react'
+import * as React from 'react'
+
+interface DeleteDialogProps {
+  count: number
+  entityName: string
+  onConfirm: () => void
+  isPending?: boolean
+}
+
+export function DeleteDialog({
+  count,
+  entityName,
+  onConfirm,
+  isPending = false
+}: DeleteDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const label = count === 1 ? entityName : `${entityName}s`
+  const targetLabel = count === 1 ? `this ${label}` : `these ${label}`
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive" size="default">
+          <Trash2 className="size-3.5 -ml-0.5" strokeWidth={2} />
+          Delete {count} {label}
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Delete {count} {label}?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete {targetLabel}. This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault()
+              onConfirm()
+            }}
+            disabled={isPending}
+          >
+            {isPending ? 'Deleting...' : 'Delete'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/copyable-code-block.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { Card, CardContent, CardHeader } from '@admin/components/ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@admin/components/ui/tabs'
+import { useTheme } from '@admin/hooks/use-admin-theme'
+import { useCopyToClipboard } from '@admin/hooks/use-copy-to-clipboard'
+import { Check, Copy } from 'lucide-react'
+import * as React from 'react'
+import type { DevModeCodeLanguage, DevModeSnippetCodeTab } from './dev-mode-types'
+import { PlainCodeFallback } from './plain-code-fallback'
+
+const LazyCodeMirror = React.lazy(() => import('./dev-mode-code-mirror'))
+
+interface CopyableCodeBlockProps {
+  label: string
+  code: string
+  language: DevModeCodeLanguage
+  tabs?: DevModeSnippetCodeTab[]
+}
+
+export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeBlockProps) {
+  const [copy, isCopied] = useCopyToClipboard()
+  const { resolvedTheme } = useTheme()
+  const codeTheme = resolvedTheme === 'dark' ? 'dark' : 'light'
+  const fallbackTab: DevModeSnippetCodeTab = {
+    id: 'code',
+    label,
+    language,
+    code
+  }
+  const codeTabs = tabs && tabs.length > 0 ? tabs : [fallbackTab]
+  const [activeTabId, setActiveTabId] = React.useState(codeTabs[0]?.id ?? fallbackTab.id)
+  const activeTab = codeTabs.find((tab) => tab.id === activeTabId) ?? codeTabs[0] ?? fallbackTab
+  const hasTabs = codeTabs.length > 1
+
+  return (
+    <Card className="flex flex-col w-full p-0 gap-0">
+      {hasTabs ? (
+        <Tabs value={activeTab.id} onValueChange={setActiveTabId} className="min-h-0 flex-1 gap-0">
+          <CardHeader className="flex items-center justify-between gap-2 py-1! pl-3.5! pr-1 bg-background border-b border-border">
+            <div className="flex min-w-0 flex-1 items-center gap-2">
+              <span className="min-w-0 truncate text-sm font-medium text-muted-foreground">
+                {label}
+              </span>
+              <TabsList className="h-fit! shrink-0">
+                {codeTabs.map((tab) => (
+                  <TabsTrigger key={tab.id} value={tab.id} className="h-7 px-3 text-xs">
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              aria-label={`Copy ${label} ${activeTab.label}`}
+              onClick={() => {
+                void copy(activeTab.code)
+              }}
+            >
+              {isCopied ? <Check /> : <Copy />}
+            </Button>
+          </CardHeader>
+
+          {codeTabs.map((tab) => (
+            <TabsContent key={tab.id} value={tab.id} className="min-h-0 overflow-auto">
+              <CardContent className="p-0 overflow-auto">
+                <React.Suspense fallback={<PlainCodeFallback code={tab.code} />}>
+                  <LazyCodeMirror code={tab.code} language={tab.language} theme={codeTheme} />
+                </React.Suspense>
+              </CardContent>
+            </TabsContent>
+          ))}
+        </Tabs>
+      ) : (
+        <>
+          <CardHeader className="flex items-center justify-between gap-2 py-1! pl-3.5! pr-1 bg-background border-b border-border">
+            <span className="min-w-0 truncate text-sm font-medium text-muted-foreground">
+              {label}
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              aria-label={`Copy ${label}`}
+              onClick={() => {
+                void copy(activeTab.code)
+              }}
+            >
+              {isCopied ? <Check /> : <Copy />}
+            </Button>
+          </CardHeader>
+          <CardContent className="p-0 overflow-auto">
+            <React.Suspense fallback={<PlainCodeFallback code={code} />}>
+              <LazyCodeMirror code={code} language={language} theme={codeTheme} />
+            </React.Suspense>
+          </CardContent>
+        </>
+      )}
+    </Card>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/dev-mode-code-mirror.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { EditorView } from '@codemirror/view'
+import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
+import CodeMirror from '@uiw/react-codemirror'
+import * as React from 'react'
+import type { DevModeCodeLanguage, DevModeCodeTheme } from './dev-mode-types'
+
+const codeMirrorSetup = {
+  lineNumbers: true,
+  foldGutter: false,
+  highlightActiveLine: false,
+  highlightActiveLineGutter: false
+}
+
+const compactCodeTheme = EditorView.theme({
+  '&': {
+    fontSize: '12px'
+  },
+  '.cm-content': {
+    padding: '10px 0 14px'
+  },
+  '.cm-gutters': {
+    padding: '0 0 14px'
+  },
+  '.cm-content, .cm-gutters': {
+    lineHeight: '1.5'
+  },
+  '.cm-lineNumbers .cm-gutterElement': {
+    padding: '0 12px'
+  },
+  '.cm-line': {
+    padding: '0 16px'
+  },
+  '.cm-scroller': {
+    fontFamily:
+      'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
+  }
+})
+
+interface DevModeCodeMirrorProps {
+  code: string
+  language: DevModeCodeLanguage
+  theme: DevModeCodeTheme
+}
+
+export default function DevModeCodeMirror({ code, language, theme }: DevModeCodeMirrorProps) {
+  const extensions = React.useMemo(
+    () =>
+      language === 'json'
+        ? [json(), compactCodeTheme]
+        : [javascript({ typescript: true, jsx: language === 'tsx' }), compactCodeTheme],
+    [language]
+  )
+
+  return (
+    <CodeMirror
+      value={code}
+      editable={false}
+      readOnly
+      basicSetup={codeMirrorSetup}
+      extensions={extensions}
+      theme={theme === 'dark' ? githubDark : githubLight}
+    />
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/dev-mode-types.ts

@@ -0,0 +1,75 @@
+export type DevModeCodeLanguage = 'tsx' | 'ts' | 'json'
+export type DevModeCodeTheme = 'light' | 'dark'
+export type DevModeSnippetIcon =
+  | 'eye'
+  | 'file-code'
+  | 'inbox'
+  | 'list'
+  | 'pencil'
+  | 'plus'
+  | 'save'
+  | 'send'
+  | 'trash'
+export type DevModeSnippetKind = 'query' | 'mutation'
+export type DevModeLifecycleHookPhase = 'before' | 'after'
+export type DevModeLifecycleHookEvent =
+  | 'beforeCreate'
+  | 'afterCreate'
+  | 'beforeUpdate'
+  | 'afterUpdate'
+  | 'beforeDelete'
+  | 'afterDelete'
+  | 'beforePublish'
+  | 'afterPublish'
+  | 'beforeUnpublish'
+  | 'afterUnpublish'
+
+export interface DevModeSnippet {
+  id: string
+  label: string
+  kind: DevModeSnippetKind
+  icon: DevModeSnippetIcon
+  language: DevModeCodeLanguage
+  code: string
+  codeTabs?: DevModeSnippetCodeTab[]
+  payloadExample?: DevModeSnippetExample
+  responseExample: DevModeSnippetExample
+}
+
+export interface DevModeSnippetCodeTab {
+  id: string
+  label: string
+  language: DevModeCodeLanguage
+  code: string
+}
+
+export interface DevModeSnippetExample {
+  label: string
+  language: DevModeCodeLanguage
+  code: string
+}
+
+export interface DevModeLifecycleHookExample {
+  id: string
+  label: string
+  event: DevModeLifecycleHookEvent
+  phase: DevModeLifecycleHookPhase
+  icon: DevModeSnippetIcon
+  language: DevModeCodeLanguage
+  code: string
+  contextExample: DevModeSnippetExample
+}
+
+export interface DevModeIntegrationMetadata {
+  schemaName: string
+  schemaLabel: string
+  schemaType: 'entity' | 'single' | 'form'
+}
+
+export interface DevModeIntegration extends DevModeIntegrationMetadata {
+  schemaJson: string
+  snippets: DevModeSnippet[]
+  lifecycleHooks: DevModeLifecycleHookExample[]
+}
+
+export type DevModeIntegrationLoader = () => Promise<DevModeIntegration>