betterstart-cli 0.0.102 → 0.0.104

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

@@ -0,0 +1,419 @@
+export function renderPageContentClientModuleTemplate({
+  join,
+  hasCreateLink,
+  hasFiltersUseQueryStates,
+  hasDeleteParseAsArrayOf,
+  hasFiltersEntityFiltersBar,
+  devModeIntegrationButtonExportName,
+  devModeIntegrationButtonImportPath
+}: {
+  join: string
+  hasCreateLink: string
+  hasFiltersUseQueryStates: string
+  hasDeleteParseAsArrayOf: string
+  hasFiltersEntityFiltersBar: string
+  devModeIntegrationButtonExportName: string
+  devModeIntegrationButtonImportPath: string
+}): string {
+  return `'use client'
+
+import type { Setting } from '@admin/actions/settings'
+import { useIsFetching, useQuery, useQueryClient } from '@tanstack/react-query'
+import type { ColumnDef } from '@tanstack/react-table'
+import { ${join} } from 'lucide-react'
+${hasCreateLink}import { parseAsInteger, parseAsString${hasFiltersUseQueryStates}${hasDeleteParseAsArrayOf}, useQueryState } from 'nuqs'
+import * as React from 'react'
+import { toast } from 'sonner'
+${hasFiltersEntityFiltersBar}import { SortOrderDialog } from '@admin/components/shared/sort-order-dialog'
+import { PageHeader } from '@admin/components/shared/page-header'
+import { Button } from '@admin/components/ui/button'
+import { ${devModeIntegrationButtonExportName} } from '${devModeIntegrationButtonImportPath}'
+`
+}
+
+export function renderPageContentImportsTemplate(): string {
+  return `import { DeleteDialog } from '@admin/components/shared/delete-dialog'
+`
+}
+
+export function renderPageContentImportsSchemaNameTemplate({
+  join,
+  schemaName
+}: {
+  join: string
+  schemaName: string
+}): string {
+  return `import {
+  ${join}
+} from '@admin/hooks/use-${schemaName}'
+`
+}
+
+export function renderPageContentImportsAdminTemplate({
+  singular,
+  actionImportPath,
+  plural,
+  hasDeleteAdmin,
+  toKebabCase
+}: {
+  singular: string
+  actionImportPath: string
+  plural: string
+  hasDeleteAdmin: string
+  toKebabCase: string
+}): string {
+  return `import type { ${singular} } from '@admin/actions/${actionImportPath}'
+import { get${plural}, bulkUpdate${plural}SortOrder } from '@admin/actions/${actionImportPath}'
+${hasDeleteAdmin}import { ${plural}Table } from './${toKebabCase}-table'
+`
+}
+
+export function renderPageContentFilterParsersTemplate({
+  resolvedFiltersDate,
+  resolvedFiltersDateDate,
+  resolvedFiltersDistinct
+}: {
+  resolvedFiltersDate: string
+  resolvedFiltersDateDate: string
+  resolvedFiltersDistinct: string
+}): string {
+  return `  const filterParsers = {
+${resolvedFiltersDate}
+  } as const
+  const [filterValues, setFilters] = useQueryStates(filterParsers)
+${resolvedFiltersDateDate}
+${resolvedFiltersDistinct}
+`
+}
+
+export function renderPageContentSelectOptionsTemplate({
+  filterVariableName
+}: {
+  filterVariableName: string
+}): string {
+  return `  const ${filterVariableName}SelectOptions = (${filterVariableName}Options ?? []).map((option) => ({
+    label: option,
+    value: option
+  }))`
+}
+
+export function renderPageContentHandleBulkDeleteTemplate({
+  plural,
+  escapeTemplateText,
+  escapeTemplateTextEscapedTemplateText,
+  pluralText,
+  quoteLiteral,
+  quoteLiteralQuotedValue
+}: {
+  plural: string
+  escapeTemplateText: string
+  escapeTemplateTextEscapedTemplateText: string
+  pluralText: string
+  quoteLiteral: string
+  quoteLiteralQuotedValue: string
+}): string {
+  return `
+  const [selectedIds, setSelectedIds] = useQueryState(
+    'selected',
+    parseAsArrayOf(parseAsString).withDefault([])
+  )
+  const [isPending, startTransition] = React.useTransition()
+
+  const handleBulkDelete = () => {
+    startTransition(async () => {
+      try {
+        const result = await deleteBulk${plural}(selectedIds)
+
+        if (result.success) {
+          toast.success(
+            selectedIds.length === 1
+              ? \`\${selectedIds.length} ${escapeTemplateText} deleted\`
+              : \`\${selectedIds.length} ${escapeTemplateTextEscapedTemplateText} deleted\`
+          )
+          queryClient.refetchQueries({ queryKey: ['${pluralText}'] })
+          void setSelectedIds([])
+        } else {
+          toast.error(result.error || ${quoteLiteral})
+        }
+      } catch (error) {
+        toast.error(${quoteLiteralQuotedValue})
+        console.error(error)
+      }
+    })
+  }
+`
+}
+
+export function renderPageContentResultTemplate({
+  plural,
+  pluralText,
+  camelPlural,
+  labelExpr
+}: {
+  plural: string
+  pluralText: string
+  camelPlural: string
+  labelExpr: string
+}): string {
+  return `
+  const [sortDialogOpen, setSortDialogOpen] = React.useState(false)
+  const { data: sortOrderSummary } = useQuery({
+    queryKey: ['${plural}', 'sort-order-summary'],
+    queryFn: () => get${pluralText}({ limit: 1, offset: 0 })
+  })
+  const sortOrderTotalRows = sortOrderSummary?.total ?? 0
+
+  const fetchSortPage = React.useCallback(
+    async (offset: number, limit: number) => {
+      const result = await get${pluralText}({ limit, offset })
+      return {
+        items: (result.${camelPlural} ?? []).map((item) => ({
+          id: item.id,
+          label: ${labelExpr}
+        })),
+        total: result.total
+      }
+    },
+    []
+  )
+
+  const handleSaveSortOrder = React.useCallback(
+    async (updates: { id: string; sortOrder: number }[]) => {
+      const result = await bulkUpdate${pluralText}SortOrder(updates)
+      if (result.success) {
+        queryClient.refetchQueries({ queryKey: ['${plural}'] })
+      }
+      return result
+    },
+    [queryClient]
+  )
+`
+}
+
+export function renderPageContentTemplate({ singular }: { singular: string }): string {
+  return `
+            {selectedIds.length > 0 && (
+              <DeleteDialog
+                count={selectedIds.length}
+                entityName="${singular}"
+                onConfirm={handleBulkDelete}
+                isPending={isPending}
+              />
+            )}`
+}
+
+export function renderPageContentActionButtonsTemplate({
+  adminRoutePath,
+  schemaName,
+  singularizeLabel
+}: {
+  adminRoutePath: string
+  schemaName: string
+  singularizeLabel: string
+}): string {
+  return `<Button asChild>
+              <Link href="${adminRoutePath}/${schemaName}/new">
+                Create ${singularizeLabel}
+              </Link>
+            </Button>`
+}
+
+export function renderPageContentActionButtonsDetailsTemplate(): string {
+  return `
+            <Button variant="outline" onClick={() => setSortDialogOpen(true)} disabled={sortOrderTotalRows === 0}>
+              <GripVertical className="size-4" />
+              Rearrange
+            </Button>`
+}
+
+export function renderPageContentLayoutTemplate({
+  deleteButton,
+  rearrangeButton
+}: {
+  deleteButton: string
+  rearrangeButton: string
+}): string {
+  return `          <div className="flex items-center gap-1">${deleteButton}${rearrangeButton}
+          </div>`
+}
+
+export function renderPageContentLayoutDetailsTemplate({
+  rearrangeButton
+}: {
+  rearrangeButton: string
+}): string {
+  return `          <div className="flex items-center gap-1">${rearrangeButton}
+          </div>`
+}
+
+export function renderPageContentLabelTemplate({
+  plural,
+  schemaLabel
+}: {
+  plural: string
+  schemaLabel: string
+}): string {
+  return `
+        <SortOrderDialog
+          open={sortDialogOpen}
+          onOpenChange={setSortDialogOpen}
+          queryKey={['${plural}']}
+          fetchPage={fetchSortPage}
+          onSave={handleSaveSortOrder}
+          title="Rearrange ${schemaLabel}"
+          description="Drag items to reorder them."
+        />`
+}
+
+export function renderPageContentComponentTemplate({
+  imports,
+  plural,
+  singular,
+  pluralText,
+  filterStateLogicContent,
+  deleteLogic,
+  sortOrderLogic,
+  filterOptionsLogicContent,
+  activeFilterCountExpr,
+  hasFiltersContent,
+  hasFiltersSetFilters,
+  filterConfigEntriesContent,
+  schemaLabel,
+  devModeIntegrationButtonExportName,
+  createButtonContent,
+  hasFiltersLabel,
+  tableProps,
+  sortOrderDialog
+}: {
+  imports: string
+  plural: string
+  singular: string
+  pluralText: string
+  filterStateLogicContent: string
+  deleteLogic: string
+  sortOrderLogic: string
+  filterOptionsLogicContent: string
+  activeFilterCountExpr: string
+  hasFiltersContent: string
+  hasFiltersSetFilters: string
+  filterConfigEntriesContent: string
+  schemaLabel: string
+  devModeIntegrationButtonExportName: string
+  createButtonContent: string
+  hasFiltersLabel: string
+  tableProps: string
+  sortOrderDialog: string
+}): string {
+  return `${imports}
+interface ${plural}PageContentProps<TValue> {
+  columns: ColumnDef<${singular}, TValue>[]
+  initialSettings?: Setting | null
+}
+
+export function ${plural}PageContent<TValue>({
+  columns,
+  initialSettings
+}: ${plural}PageContentProps<TValue>) {
+  const queryClient = useQueryClient()
+  const isSearchFetching = useIsFetching({ queryKey: ['${pluralText}'] }) > 0
+  const [search, setSearch] = useQueryState('q', parseAsString.withDefault(''))
+  const [, setPageIndex] = useQueryState('page', parseAsInteger.withDefault(0))
+${filterStateLogicContent}${deleteLogic}${sortOrderLogic}
+${filterOptionsLogicContent}  const activeFilterCount = ${activeFilterCountExpr}
+
+  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)
+${hasFiltersContent}
+    })
+  }, [setSearch, setPageIndex${hasFiltersSetFilters}])
+${filterConfigEntriesContent}
+  return (
+    <React.Fragment>
+      <PageHeader
+        title="${schemaLabel}"
+        actions={
+          <div className="flex items-center gap-1">
+            <${devModeIntegrationButtonExportName} initialSettings={initialSettings} />
+${createButtonContent}
+          </div>
+        }
+      />
+${hasFiltersLabel}
+      <main className="space-y-4 px-4 pb-4 flex-1">
+        <${plural}Table ${tableProps} />${sortOrderDialog}
+      </main>
+    </React.Fragment>
+  )
+}
+`
+}
+
+export function renderPageContentDetailsTemplate({
+  clearFilterObject
+}: {
+  clearFilterObject: string
+}): string {
+  return `      void setFilters({
+${clearFilterObject}
+      })`
+}
+
+export function renderPageContentFiltersTemplate({
+  filterConfigEntries
+}: {
+  filterConfigEntries: string
+}): string {
+  return `
+  const filters = [
+${filterConfigEntries}
+  ]
+`
+}
+
+export function renderPageContentLabelBranchTemplate({
+  toLowerCase,
+  filtersActionsContent
+}: {
+  toLowerCase: string
+  filtersActionsContent: string
+}): string {
+  return `
+      <EntityFiltersBar
+        filters={filters}
+        activeFilterCount={activeFilterCount}
+        onFilterChange={(updates) => {
+          React.startTransition(() => {
+            void setPageIndex(0)
+            void setFilters(updates)
+          })
+        }}
+        onClearAll={handleClearAll}
+        search={search}
+        searchPlaceholder="Search ${toLowerCase}..."
+        isPending={isSearchFetching}
+        onSearch={handleSearch}
+        actions={
+${filtersActionsContent}
+        }
+      />`
+}
+
+export function renderPageContentLayoutDetailsBranchTemplate({
+  filtersActionsContent
+}: {
+  filtersActionsContent: string
+}): string {
+  return `
+      <div className="flex items-center justify-end">
+${filtersActionsContent}
+      </div>`
+}

package/dist/assets/adapters/next/templates/renderers/generators/page.ts

@@ -0,0 +1,24 @@
+export function renderPageImportsTemplate({
+  plural,
+  kebabPlural
+}: {
+  plural: string
+  kebabPlural: string
+}): string {
+  return `import { getSetting } from '@admin/actions/settings'
+import * as React from 'react'
+import { columns } from './columns'
+import { ${plural}PageContent } from './${kebabPlural}-page-content'
+import { ${plural}PageSkeleton } from './${kebabPlural}-page-skeleton'
+
+export default async function ${plural}Page() {
+  const initialSettings = await getSetting()
+
+  return (
+    <React.Suspense fallback={<${plural}PageSkeleton />}>
+      <${plural}PageContent columns={columns} initialSettings={initialSettings} />
+    </React.Suspense>
+  )
+}
+`
+}

package/dist/assets/adapters/next/templates/renderers/generators/row-actions-emitters/build-delete-dialog-source.ts

@@ -0,0 +1,108 @@
+export function renderBuildDeleteDialogSourceClientModuleTemplate({
+  deleteActionName,
+  actionImportPath,
+  componentName,
+  quoteLiteral,
+  queryKey,
+  quoteLiteralQuotedValue,
+  quoteLiteralText,
+  escapeJsx,
+  quoteLiteralContent
+}: {
+  deleteActionName: string
+  actionImportPath: string
+  componentName: string
+  quoteLiteral: string
+  queryKey: string
+  quoteLiteralQuotedValue: string
+  quoteLiteralText: string
+  escapeJsx: string
+  quoteLiteralContent: string
+}): string {
+  return `'use client'
+
+import { ${deleteActionName} } from '@admin/actions/${actionImportPath}'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@admin/components/ui/alert-dialog'
+import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
+import { useQueryClient } from '@tanstack/react-query'
+import { Trash } from 'lucide-react'
+import * as React from 'react'
+import { toast } from 'sonner'
+
+interface ${componentName}Props {
+  id: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function ${componentName}({
+  id,
+  open,
+  onOpenChange
+}: ${componentName}Props) {
+  const [isPending, startTransition] = React.useTransition()
+  const queryClient = useQueryClient()
+
+  const handleDelete = () => {
+    startTransition(async () => {
+      try {
+        const result = await ${deleteActionName}(id)
+
+        if (result.success) {
+          toast.success(${quoteLiteral})
+          queryClient.refetchQueries({ queryKey: ['${queryKey}'] })
+          onOpenChange(false)
+        } else {
+          toast.error(result.error || ${quoteLiteralQuotedValue})
+        }
+      } catch (error) {
+        toast.error(${quoteLiteralText})
+        console.error(error)
+      }
+    })
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogTrigger asChild>
+        <DropdownMenuItem variant="destructive" onSelect={(event) => event.preventDefault()}>
+          <Trash className="size-4" />
+          Delete ${escapeJsx}
+        </DropdownMenuItem>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete ${escapeJsx}?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This permanently deletes it and cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault()
+              handleDelete()
+            }}
+            disabled={isPending}
+            aria-busy={isPending}
+          >
+            {isPending ? 'Deleting…' : ${quoteLiteralContent}}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+`
+}

package/dist/assets/adapters/next/templates/renderers/generators/row-actions-emitters/build-row-actions-source.ts

@@ -0,0 +1,61 @@
+export function renderBuildRowActionsSourceClientModuleTemplate({
+  dialogComponentName,
+  dialogModuleName,
+  componentName,
+  escapeTemplateText,
+  escapeJsx
+}: {
+  dialogComponentName: string
+  dialogModuleName: string
+  componentName: string
+  escapeTemplateText: string
+  escapeJsx: string
+}): string {
+  return `'use client'
+
+import { Button } from '@admin/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger
+} from '@admin/components/ui/dropdown-menu'
+import { MoreHorizontal } from 'lucide-react'
+import * as React from 'react'
+import { ${dialogComponentName} } from './${dialogModuleName}'
+
+export function ${componentName}({ id }: { id: string }) {
+  const [menuOpen, setMenuOpen] = React.useState(false)
+  const [deleteOpen, setDeleteOpen] = React.useState(false)
+
+  function handleDeleteOpenChange(open: boolean) {
+    setDeleteOpen(open)
+
+    if (!open) {
+      setMenuOpen(false)
+    }
+  }
+
+  return (
+    <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="size-8 p-0"
+          aria-label={\`Open ${escapeTemplateText} actions for \${id}\`}
+        >
+          <span className="sr-only">Open ${escapeJsx} actions</span>
+          <MoreHorizontal className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <${dialogComponentName}
+          id={id}
+          open={deleteOpen}
+          onOpenChange={handleDeleteOpenChange}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+`
+}

package/dist/assets/adapters/next/templates/renderers/generators/single-page.ts

@@ -0,0 +1,59 @@
+export function renderSinglePageDataTemplate({ singular }: { singular: string }): string {
+  return `  const data = await get${singular}()
+`
+}
+
+export function renderSinglePageGeneratedValueTemplate({ singular }: { singular: string }): string {
+  return `  const [data, initialSettings] = await Promise.all([
+    get${singular}(),
+    getSetting()
+  ])
+`
+}
+
+export function renderSinglePageImportsTemplate({
+  settingsImport,
+  singular,
+  actionImportPath,
+  devModeIntegrationButtonExportName,
+  devModeIntegrationButtonImportPath,
+  schemaName,
+  pageName,
+  dataLoad,
+  schemaLabel,
+  initialSettingsProp
+}: {
+  settingsImport: string
+  singular: string
+  actionImportPath: string
+  devModeIntegrationButtonExportName: string
+  devModeIntegrationButtonImportPath: string
+  schemaName: string
+  pageName: string
+  dataLoad: string
+  schemaLabel: string
+  initialSettingsProp: string
+}): string {
+  return `${settingsImport}import { get${singular} } from '@admin/actions/${actionImportPath}'
+import { PageHeader } from '@admin/components/shared/page-header'
+import { ${devModeIntegrationButtonExportName} } from '${devModeIntegrationButtonImportPath}'
+import { ${singular}Form } from './${schemaName}-form'
+import React from 'react'
+
+export default async function ${pageName}Page() {
+${dataLoad}
+
+  return (
+    <React.Fragment>
+      <PageHeader
+        title="${schemaLabel}"
+        actions={<${devModeIntegrationButtonExportName} ${initialSettingsProp} />}
+      />
+      <main className="mx-auto max-w-5xl w-full p-4">
+        <${singular}Form initialData={data} />
+      </main>
+    </React.Fragment>
+  )
+}
+`
+}

package/dist/assets/adapters/next/templates/renderers/generators/sortable-header/build-sort-label-expr.ts

@@ -0,0 +1,9 @@
+export function renderBuildSortLabelExprSortDirectionTemplate(): string {
+  return `const sortDirection = column.getIsSorted()
+      const sortLabel = sortDirection === 'asc'
+        ? 'sorted ascending'
+        : sortDirection === 'desc'
+        ? 'sorted descending'
+        : 'not sorted'
+`
+}

package/dist/assets/adapters/next/templates/renderers/generators/sortable-header/build-sortable-header-button-jsx.ts

@@ -0,0 +1,20 @@
+export function renderBuildSortableHeaderButtonJsxActionButtonsTemplate({
+  className,
+  escapeTemplateText,
+  escapeJsx
+}: {
+  className: string
+  escapeTemplateText: string
+  escapeJsx: string
+}): string {
+  return `<Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="${className} min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          aria-label={\`Sort by ${escapeTemplateText}, \${sortLabel}\`}
+          aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'}
+        >
+          <span className="truncate">${escapeJsx}</span>
+          <SortIndicator direction={sortDirection} />
+        </Button>`
+}