betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/pages/users/users-table.tsx

@@ -0,0 +1,221 @@
+'use client'
+
+import { authClient } from '@admin/auth/client'
+import { DataTablePagination } from '@admin/components/shared/data-table/data-table-pagination'
+import { Card, CardContent } from '@admin/components/ui/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@admin/components/ui/table'
+import { useTableUtils } from '@admin/hooks/use-table-utils'
+import { useUsers } from '@admin/hooks/use-users'
+import type { User } from '@admin/types/auth'
+import { cn } from '@admin/utils/shared/cn'
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable
+} from '@tanstack/react-table'
+import { GripVertical } from 'lucide-react'
+import { parseAsInteger, useQueryState } from 'nuqs'
+import * as React from 'react'
+
+interface UsersTableProps<TValue> {
+  columns: ColumnDef<User, TValue>[]
+}
+
+export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
+  const { data: session } = authClient.useSession()
+  const { data, error, isPending } = useUsers()
+  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,
+    hoveredColumnId,
+    registerTable,
+    resetColumnSizingToContainer,
+    setHoveredColumnId,
+    tableContainerRef
+  } = useTableUtils<User>({
+    pageIndex,
+    pageSize: effectivePageSize,
+    setPageIndex
+  })
+
+  const table = useReactTable({
+    data: data?.users ?? [],
+    columns,
+    columnResizeMode: 'onChange',
+    defaultColumn: {
+      minSize: 48,
+      size: 220
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnSizingChange: handleColumnSizingChange,
+    onPaginationChange: handlePaginationChange,
+    meta: {
+      currentUser: session?.user
+        ? {
+            id: session.user.id,
+            email: session.user.email,
+            name: session.user.name,
+            image: session.user.image,
+            role: (session.user as { role?: string }).role || 'member'
+          }
+        : null
+    },
+    state: {
+      sorting,
+      columnFilters,
+      columnSizing,
+      pagination: {
+        pageIndex,
+        pageSize: effectivePageSize
+      }
+    }
+  })
+  registerTable(table)
+
+  return (
+    <div className="flex min-h-[calc(100svh-184px)] flex-col gap-6 pt-px pb-2">
+      <Card className="min-h-0 flex-1 p-0">
+        <CardContent ref={tableContainerRef} className="flex min-h-0 flex-1 flex-col p-0">
+          <Table
+            containerClassName="min-h-0 flex-1"
+            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 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="group/resize-header relative overflow-hidden"
+                        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-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:text-foreground 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={cn('size-3.5', {
+                                'text-ring': header.column.getIsResizing()
+                              })}
+                            />
+                          </button>
+                        ) : null}
+                      </TableHead>
+                    )
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {isPending ? (
+                <TableRow>
+                  <TableCell colSpan={columns.length} className="h-24 text-center">
+                    <div className="text-muted-foreground">Loading users...</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}>
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        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">
+                    No users found.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <DataTablePagination
+        table={table}
+        paginationMode="uncontrolled"
+        pageSize={pageSize}
+        setPageSize={setPageSize}
+      />
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/types/auth.ts

@@ -0,0 +1,71 @@
+export interface AuthUser {
+  id: string
+  email: string
+  name: string
+  emailVerified: boolean
+  image: string | null
+  role: string
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface AuthSession {
+  user: AuthUser
+  isAuthenticated: boolean
+}
+
+export enum UserRole {
+  ADMIN = 'admin',
+  EDITOR = 'editor',
+  MEMBER = 'member'
+}
+
+export const ADMIN_ACCESS_ROLES = [UserRole.ADMIN, UserRole.EDITOR] as const
+
+export interface UserWithRole extends AuthUser {
+  role: UserRole
+}
+
+export interface AuthState {
+  user: AuthUser | null
+  loading: boolean
+  error: Error | null
+}
+
+export interface User {
+  id: string
+  email: string
+  name: string
+  emailVerified: boolean
+  createdAt: string
+  updatedAt: string
+  role: string
+}
+
+export interface UsersPage {
+  users: User[]
+  total: number
+}
+
+export interface CreateUserInput {
+  email: string
+  name: string
+  password: string
+  role: UserRole
+}
+
+export interface CreateUserResult {
+  success: boolean
+  error?: string
+  user?: User
+}
+
+export interface UpdateUserRoleInput {
+  userId: string
+  role: UserRole
+}
+
+export interface UpdateUserRoleResult {
+  success: boolean
+  error?: string
+}

package/dist/assets/adapters/next/templates/init/types/index.ts

@@ -0,0 +1,108 @@
+export * from './auth'
+export * from './navigation'
+
+/** Media types */
+export interface AdminUserSummary {
+  id: string
+  name: string
+  email: string
+}
+
+export interface AdminMedia {
+  id: string
+  url: string
+  filename: string
+  contentType: string
+  size: number
+  width: number | null
+  height: number | null
+  alt: string | null
+  tags: string[] | null
+  createdAt: string
+  updatedAt: string
+  createdBy: string | null
+  updatedBy: string | null
+  createdByUser?: AdminUserSummary | null
+  updatedByUser?: AdminUserSummary | null
+}
+
+export interface MediaListParams {
+  search?: string
+  contentType?: string
+  page?: number
+  pageSize?: number
+}
+
+export interface MediaListResult {
+  media: AdminMedia[]
+  total: number
+  page: number
+  pageSize: number
+}
+
+/** Upload types */
+export interface UploadedFile {
+  id: string
+  key: string
+  url: string
+  filename: string
+  size: number
+  contentType: string
+  width?: number | null
+  height?: number | null
+  alt?: string | null
+  tags?: string[] | null
+}
+
+export interface UploadFileResult {
+  success: boolean
+  error?: string
+  files?: UploadedFile[]
+}
+
+export interface UploadProgress {
+  filename: string
+  progress: number
+  loaded: number
+  total: number
+}
+
+/** API response types */
+export interface ApiResponse<T = unknown> {
+  success: boolean
+  data?: T
+  error?: string
+  message?: string
+}
+
+/** Database response types */
+export interface PaginationParams {
+  page: number
+  limit: number
+  sortBy?: string
+  sortOrder?: 'asc' | 'desc'
+}
+
+export interface PaginatedResponse<T> {
+  data: T[]
+  total: number
+  page: number
+  limit: number
+  totalPages: number
+}
+
+/** TanStack Table meta augmentation */
+declare module '@tanstack/react-table' {
+  // biome-ignore lint/correctness/noUnusedVariables: augmenting module
+  interface TableMeta<TData extends import('@tanstack/react-table').RowData> {
+    reorderMode?: boolean
+    onMoveRow?: (id: string, direction: 'up' | 'down') => void
+    currentUser?: {
+      id: string
+      email: string
+      name: string
+      image?: string | null
+      role: string
+    } | null
+  }
+}

package/dist/assets/adapters/next/templates/init/types/navigation.ts

@@ -0,0 +1,11 @@
+import type { LucideIcon } from 'lucide-react'
+
+export interface AdminNavigationItem {
+  label: string
+  href: string
+  icon?: LucideIcon
+  group?: string
+  groupIcon?: LucideIcon
+  groupPosition?: number
+  position?: number
+}

package/dist/assets/adapters/next/templates/init/types/table-meta.ts

@@ -0,0 +1,14 @@
+import type { RowData } from '@tanstack/react-table'
+
+declare module '@tanstack/react-table' {
+  // biome-ignore lint/correctness/noUnusedVariables: augmenting module
+  interface TableMeta<TData extends RowData> {
+    currentUser?: {
+      id: string
+      email: string
+      name: string
+      image?: string | null
+      role: string
+    } | null
+  }
+}

package/dist/assets/adapters/next/templates/init/utils/auth/roles.ts

@@ -0,0 +1,17 @@
+import { ADMIN_ACCESS_ROLES, UserRole } from '@admin/types/auth'
+
+export function isUserRole(value: unknown): value is UserRole {
+  return typeof value === 'string' && Object.values(UserRole).includes(value as UserRole)
+}
+
+export function hasRequiredRole(userRole: UserRole, allowedRoles: readonly UserRole[]): boolean {
+  return allowedRoles.includes(userRole)
+}
+
+export function canAccessAdmin(role: unknown): role is UserRole.ADMIN | UserRole.EDITOR {
+  return isUserRole(role) && hasRequiredRole(role, ADMIN_ACCESS_ROLES)
+}
+
+export function getAdminPostLoginPath(role: unknown): '/admin' | '/admin/profile' {
+  return canAccessAdmin(role) ? '/admin' : '/admin/profile'
+}

package/dist/assets/adapters/next/templates/init/utils/date/date.ts

@@ -0,0 +1,90 @@
+import { format, isAfter, isValid, parse } from 'date-fns'
+import type { DateRange } from 'react-day-picker'
+
+const DATE_RANGE_INPUT_FORMAT = 'MMM d, yyyy'
+const DATE_RANGE_PARAM_FORMAT = 'yyyy-MM-dd'
+const DATE_RANGE_TIME_PATTERN = /^([01]\d|2[0-3]):([0-5]\d)$/
+
+export const DATE_RANGE_START_TIME = '00:00'
+export const DATE_RANGE_END_TIME = '23:59'
+
+export function parseDateInputValue(value?: string): Date | undefined {
+  if (!value) return undefined
+
+  const parsed = new Date(`${value}T00:00:00`)
+  return Number.isNaN(parsed.getTime()) ? undefined : parsed
+}
+
+export function buildDateRange(from?: string, to?: string): DateRange | undefined {
+  const fromDate = parseDateInputValue(from)
+  const toDate = parseDateInputValue(to)
+
+  if (!fromDate && !toDate) return undefined
+
+  return {
+    from: fromDate,
+    to: toDate
+  }
+}
+
+export function formatDateRangeInputDate(date?: Date) {
+  return date ? format(date, DATE_RANGE_INPUT_FORMAT) : ''
+}
+
+export function formatDateRangeParamDate(date: Date) {
+  return format(date, DATE_RANGE_PARAM_FORMAT)
+}
+
+function formatDateRangeTriggerDate(date: Date, includeYear = false) {
+  return format(date, includeYear ? 'MMM d, yyyy' : 'MMM d')
+}
+
+export function parseEditableDateRangeDate(value: string) {
+  const trimmedValue = value.trim()
+  if (!trimmedValue) return undefined
+
+  const isoDate = parseDateInputValue(trimmedValue)
+  if (isoDate) return isoDate
+
+  const parsed = parse(trimmedValue, DATE_RANGE_INPUT_FORMAT, new Date())
+  if (isValid(parsed)) return parsed
+
+  const fallback = new Date(trimmedValue)
+  return isValid(fallback) ? fallback : undefined
+}
+
+export function normalizeDateRangeTime(value: string, fallback: string) {
+  return DATE_RANGE_TIME_PATTERN.test(value) ? value : fallback
+}
+
+export function getOrderedDateRange(range?: DateRange) {
+  if (!range?.from) return range
+  if (!range.to || !isAfter(range.from, range.to)) return range
+
+  return {
+    from: range.to,
+    to: range.from
+  }
+}
+
+export function getDateRangeTriggerLabel(
+  from?: Date,
+  to?: Date,
+  placeholder = 'Pick a date range'
+) {
+  if (!from) return placeholder
+  if (!to) return `${formatDateRangeTriggerDate(from, true)} - ...`
+
+  const sameYear = from.getFullYear() === to.getFullYear()
+  const sameMonth = sameYear && from.getMonth() === to.getMonth()
+
+  if (sameMonth) {
+    return `${formatDateRangeTriggerDate(from)} - ${format(to, 'd')}`
+  }
+
+  if (sameYear) {
+    return `${formatDateRangeTriggerDate(from)} - ${formatDateRangeTriggerDate(to)}`
+  }
+
+  return `${formatDateRangeTriggerDate(from, true)} - ${formatDateRangeTriggerDate(to, true)}`
+}

package/dist/assets/adapters/next/templates/init/utils/dev-mode/code-block-height.ts

@@ -0,0 +1,9 @@
+export function getDevModeCodeBlockHeight(codes: string | string[], maxRem = 34, hasTabs = false) {
+  const lineCount = Math.max(
+    1,
+    ...(Array.isArray(codes) ? codes : [codes]).map((code) => code.split('\n').length)
+  )
+  const heightInRem = Math.min(maxRem, Math.max(10, lineCount * 1.2 + (hasTabs ? 6 : 3.5)))
+
+  return `clamp(10rem, ${heightInRem.toFixed(2)}rem, min(${maxRem}rem, calc(100vh - 20rem)))`
+}