@create-lft-app/nextjs 1.0.2 → 3.0.0

package/template/src/db/index.ts

@@ -0,0 +1,12 @@
+import { drizzle } from 'drizzle-orm/postgres-js'
+import postgres from 'postgres'
+import * as schema from './schema'
+
+const connectionString = process.env.DATABASE_URL!
+
+// Disable prefetch as it is not supported for "Transaction" pool mode
+const client = postgres(connectionString, { prepare: false })
+
+export const db = drizzle(client, { schema })
+
+export type Database = typeof db

package/template/src/db/schema/index.ts

@@ -0,0 +1 @@
+export * from './users'

package/template/src/db/schema/users.ts

@@ -0,0 +1,16 @@
+import { pgTable, uuid, varchar, text, timestamp, pgEnum } from 'drizzle-orm/pg-core'
+
+export const userRoleEnum = pgEnum('user_role', ['admin', 'user', 'viewer'])
+
+export const users = pgTable('users', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  email: varchar('email', { length: 255 }).notNull().unique(),
+  name: varchar('name', { length: 255 }).notNull(),
+  role: userRoleEnum('role').default('user').notNull(),
+  avatarUrl: text('avatar_url'),
+  createdAt: timestamp('created_at', { withTimezone: true }).defaultNow().notNull(),
+  updatedAt: timestamp('updated_at', { withTimezone: true }).defaultNow().notNull(),
+})
+
+export type User = typeof users.$inferSelect
+export type NewUser = typeof users.$inferInsert

package/template/src/db/seed.ts

@@ -0,0 +1,39 @@
+import { db } from './index'
+import { users } from './schema'
+
+async function seed() {
+  console.log('🌱 Seeding database...')
+
+  // Clear existing data
+  await db.delete(users)
+
+  // Insert seed data
+  await db.insert(users).values([
+    {
+      email: 'admin@example.com',
+      name: 'Admin User',
+      role: 'admin',
+    },
+    {
+      email: 'user@example.com',
+      name: 'Regular User',
+      role: 'user',
+    },
+    {
+      email: 'viewer@example.com',
+      name: 'Viewer User',
+      role: 'viewer',
+    },
+  ])
+
+  console.log('✅ Database seeded successfully!')
+}
+
+seed()
+  .catch((error) => {
+    console.error('❌ Seed failed:', error)
+    process.exit(1)
+  })
+  .finally(() => {
+    process.exit(0)
+  })

package/template/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useMediaQuery, useIsMobile, useIsTablet, useIsDesktop } from './useMediaQuery'
+export { useDebounce, useDebouncedCallback } from './useDebounce'
+export { useDataTable } from './useDataTable'

package/template/src/hooks/useDataTable.ts

@@ -0,0 +1,82 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  TableOptions,
+} from '@tanstack/react-table'
+
+interface UseDataTableOptions<TData> {
+  data: TData[]
+  columns: ColumnDef<TData, unknown>[]
+  initialPageSize?: number
+  enableRowSelection?: boolean
+}
+
+export function useDataTable<TData>({
+  data,
+  columns,
+  initialPageSize = 10,
+  enableRowSelection = false,
+}: UseDataTableOptions<TData>) {
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = useState({})
+
+  const tableOptions: TableOptions<TData> = useMemo(
+    () => ({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      onSortingChange: setSorting,
+      getSortedRowModel: getSortedRowModel(),
+      onColumnFiltersChange: setColumnFilters,
+      getFilteredRowModel: getFilteredRowModel(),
+      onColumnVisibilityChange: setColumnVisibility,
+      onRowSelectionChange: setRowSelection,
+      enableRowSelection,
+      state: {
+        sorting,
+        columnFilters,
+        columnVisibility,
+        rowSelection,
+      },
+      initialState: {
+        pagination: {
+          pageSize: initialPageSize,
+        },
+      },
+    }),
+    [data, columns, sorting, columnFilters, columnVisibility, rowSelection, enableRowSelection, initialPageSize]
+  )
+
+  const table = useReactTable(tableOptions)
+
+  const selectedRows = useMemo(
+    () => table.getFilteredSelectedRowModel().rows.map((row) => row.original),
+    [table]
+  )
+
+  return {
+    table,
+    sorting,
+    columnFilters,
+    columnVisibility,
+    rowSelection,
+    selectedRows,
+    setSorting,
+    setColumnFilters,
+    setColumnVisibility,
+    setRowSelection,
+  }
+}

package/template/src/hooks/useDebounce.ts

@@ -0,0 +1,49 @@
+'use client'
+
+import { useEffect, useState, useCallback, useRef } from 'react'
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}
+
+export function useDebouncedCallback<T extends (...args: Parameters<T>) => ReturnType<T>>(
+  callback: T,
+  delay: number
+): T {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const debouncedCallback = useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        callback(...args)
+      }, delay)
+    },
+    [callback, delay]
+  ) as T
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  return debouncedCallback
+}

package/template/src/hooks/useMediaQuery.ts

@@ -0,0 +1,36 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false)
+
+  useEffect(() => {
+    const media = window.matchMedia(query)
+
+    if (media.matches !== matches) {
+      setMatches(media.matches)
+    }
+
+    const listener = (event: MediaQueryListEvent) => {
+      setMatches(event.matches)
+    }
+
+    media.addEventListener('change', listener)
+    return () => media.removeEventListener('change', listener)
+  }, [matches, query])
+
+  return matches
+}
+
+export function useIsMobile(): boolean {
+  return useMediaQuery('(max-width: 768px)')
+}
+
+export function useIsTablet(): boolean {
+  return useMediaQuery('(min-width: 769px) and (max-width: 1024px)')
+}
+
+export function useIsDesktop(): boolean {
+  return useMediaQuery('(min-width: 1025px)')
+}

package/template/src/lib/date/config.ts

@@ -0,0 +1,34 @@
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import isBetween from 'dayjs/plugin/isBetween'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import 'dayjs/locale/es'
+
+// Extend dayjs with plugins
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(relativeTime)
+dayjs.extend(localizedFormat)
+dayjs.extend(isBetween)
+dayjs.extend(isSameOrAfter)
+dayjs.extend(isSameOrBefore)
+
+// Set default locale to Spanish
+dayjs.locale('es')
+
+// Set default timezone (can be overridden)
+const DEFAULT_TIMEZONE = 'America/Mexico_City'
+
+export function setDefaultTimezone(tz: string) {
+  dayjs.tz.setDefault(tz)
+}
+
+// Initialize with default timezone
+setDefaultTimezone(DEFAULT_TIMEZONE)
+
+export { dayjs }
+export default dayjs

package/template/src/lib/date/formatters.ts

@@ -0,0 +1,120 @@
+import { dayjs } from './config'
+import type { Dayjs, ConfigType } from 'dayjs'
+
+type DateInput = ConfigType
+
+/**
+ * Format date to localized short format (e.g., "15/01/2024")
+ */
+export function formatDate(date: DateInput): string {
+  return dayjs(date).format('DD/MM/YYYY')
+}
+
+/**
+ * Format date to localized long format (e.g., "15 de enero de 2024")
+ */
+export function formatDateLong(date: DateInput): string {
+  return dayjs(date).format('D [de] MMMM [de] YYYY')
+}
+
+/**
+ * Format time (e.g., "14:30")
+ */
+export function formatTime(date: DateInput): string {
+  return dayjs(date).format('HH:mm')
+}
+
+/**
+ * Format time with seconds (e.g., "14:30:45")
+ */
+export function formatTimeWithSeconds(date: DateInput): string {
+  return dayjs(date).format('HH:mm:ss')
+}
+
+/**
+ * Format date and time (e.g., "15/01/2024 14:30")
+ */
+export function formatDateTime(date: DateInput): string {
+  return dayjs(date).format('DD/MM/YYYY HH:mm')
+}
+
+/**
+ * Format date and time long (e.g., "15 de enero de 2024 a las 14:30")
+ */
+export function formatDateTimeLong(date: DateInput): string {
+  return dayjs(date).format('D [de] MMMM [de] YYYY [a las] HH:mm')
+}
+
+/**
+ * Format relative time (e.g., "hace 2 horas")
+ */
+export function formatRelative(date: DateInput): string {
+  return dayjs(date).fromNow()
+}
+
+/**
+ * Format ISO string
+ */
+export function formatISO(date: DateInput): string {
+  return dayjs(date).toISOString()
+}
+
+/**
+ * Format for API requests (ISO format)
+ */
+export function formatForApi(date: DateInput): string {
+  return dayjs(date).utc().format()
+}
+
+/**
+ * Parse a date string and return a Dayjs object
+ */
+export function parseDate(date: DateInput): Dayjs {
+  return dayjs(date)
+}
+
+/**
+ * Get start of day
+ */
+export function startOfDay(date: DateInput): Dayjs {
+  return dayjs(date).startOf('day')
+}
+
+/**
+ * Get end of day
+ */
+export function endOfDay(date: DateInput): Dayjs {
+  return dayjs(date).endOf('day')
+}
+
+/**
+ * Check if a date is today
+ */
+export function isToday(date: DateInput): boolean {
+  return dayjs(date).isSame(dayjs(), 'day')
+}
+
+/**
+ * Check if a date is in the past
+ */
+export function isPast(date: DateInput): boolean {
+  return dayjs(date).isBefore(dayjs())
+}
+
+/**
+ * Check if a date is in the future
+ */
+export function isFuture(date: DateInput): boolean {
+  return dayjs(date).isAfter(dayjs())
+}
+
+/**
+ * Get difference between two dates in specified unit
+ */
+export function diff(
+  date1: DateInput,
+  date2: DateInput,
+  unit: 'day' | 'week' | 'month' | 'year' | 'hour' | 'minute' = 'day'
+): number {
+  return dayjs(date1).diff(dayjs(date2), unit)
+}

package/template/src/lib/date/index.ts

@@ -0,0 +1,19 @@
+export { dayjs, setDefaultTimezone } from './config'
+export {
+  formatDate,
+  formatDateLong,
+  formatTime,
+  formatTimeWithSeconds,
+  formatDateTime,
+  formatDateTimeLong,
+  formatRelative,
+  formatISO,
+  formatForApi,
+  parseDate,
+  startOfDay,
+  endOfDay,
+  isToday,
+  isPast,
+  isFuture,
+  diff,
+} from './formatters'

package/template/src/lib/excel/exporter.ts

@@ -0,0 +1,89 @@
+import * as XLSX from 'xlsx'
+
+export interface ExportOptions {
+  filename?: string
+  sheetName?: string
+  headers?: string[]
+  columnWidths?: number[]
+}
+
+/**
+ * Export data to Excel file and trigger download
+ */
+export function exportToExcel<T extends Record<string, unknown>>(
+  data: T[],
+  options: ExportOptions = {}
+): void {
+  const {
+    filename = 'export',
+    sheetName = 'Sheet1',
+    headers,
+    columnWidths,
+  } = options
+
+  // Create worksheet from data
+  const worksheet = XLSX.utils.json_to_sheet(data, {
+    header: headers,
+  })
+
+  // Set column widths if provided
+  if (columnWidths) {
+    worksheet['!cols'] = columnWidths.map((width) => ({ wch: width }))
+  }
+
+  // Create workbook
+  const workbook = XLSX.utils.book_new()
+  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
+
+  // Generate filename with extension
+  const fullFilename = filename.endsWith('.xlsx') ? filename : `${filename}.xlsx`
+
+  // Trigger download
+  XLSX.writeFile(workbook, fullFilename)
+}
+
+/**
+ * Export data to Excel buffer (for server-side usage)
+ */
+export function exportToExcelBuffer<T extends Record<string, unknown>>(
+  data: T[],
+  options: Omit<ExportOptions, 'filename'> = {}
+): Buffer {
+  const { sheetName = 'Sheet1', headers, columnWidths } = options
+
+  const worksheet = XLSX.utils.json_to_sheet(data, {
+    header: headers,
+  })
+
+  if (columnWidths) {
+    worksheet['!cols'] = columnWidths.map((width) => ({ wch: width }))
+  }
+
+  const workbook = XLSX.utils.book_new()
+  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
+
+  return XLSX.write(workbook, { type: 'buffer', bookType: 'xlsx' })
+}
+
+/**
+ * Create an Excel template with headers only
+ */
+export function createTemplate(
+  headers: string[],
+  options: Omit<ExportOptions, 'headers'> = {}
+): void {
+  const { filename = 'template', sheetName = 'Sheet1' } = options
+
+  const worksheet = XLSX.utils.aoa_to_sheet([headers])
+
+  // Auto-fit column widths based on header length
+  worksheet['!cols'] = headers.map((header) => ({
+    wch: Math.max(header.length + 2, 12),
+  }))
+
+  const workbook = XLSX.utils.book_new()
+  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
+
+  const fullFilename = filename.endsWith('.xlsx') ? filename : `${filename}.xlsx`
+  XLSX.writeFile(workbook, fullFilename)
+}

package/template/src/lib/excel/index.ts

@@ -0,0 +1,14 @@
+export {
+  parseExcelBuffer,
+  parseExcelFile,
+  validateExcelData,
+  type ParseOptions,
+  type ParseResult,
+} from './parser'
+
+export {
+  exportToExcel,
+  exportToExcelBuffer,
+  createTemplate,
+  type ExportOptions,
+} from './exporter'

package/template/src/lib/excel/parser.ts

@@ -0,0 +1,96 @@
+import * as XLSX from 'xlsx'
+
+export interface ParseOptions {
+  sheet?: number | string
+  header?: number
+  range?: string
+  raw?: boolean
+}
+
+export interface ParseResult<T = Record<string, unknown>> {
+  data: T[]
+  headers: string[]
+  sheetNames: string[]
+}
+
+/**
+ * Parse an Excel file buffer to JSON
+ */
+export function parseExcelBuffer<T = Record<string, unknown>>(
+  buffer: ArrayBuffer,
+  options: ParseOptions = {}
+): ParseResult<T> {
+  const workbook = XLSX.read(buffer, { type: 'array' })
+  const sheetNames = workbook.SheetNames
+
+  const sheetName = typeof options.sheet === 'number'
+    ? sheetNames[options.sheet]
+    : options.sheet ?? sheetNames[0]
+
+  const worksheet = workbook.Sheets[sheetName]
+
+  if (!worksheet) {
+    throw new Error(`Sheet "${sheetName}" not found`)
+  }
+
+  const jsonOptions: XLSX.Sheet2JSONOpts = {
+    header: options.header,
+    range: options.range,
+    raw: options.raw ?? false,
+  }
+
+  const data = XLSX.utils.sheet_to_json<T>(worksheet, jsonOptions)
+
+  // Get headers from the first row
+  const range = XLSX.utils.decode_range(worksheet['!ref'] ?? 'A1')
+  const headers: string[] = []
+
+  for (let col = range.s.c; col <= range.e.c; col++) {
+    const cell = worksheet[XLSX.utils.encode_cell({ r: 0, c: col })]
+    headers.push(cell?.v?.toString() ?? `Column${col + 1}`)
+  }
+
+  return {
+    data,
+    headers,
+    sheetNames,
+  }
+}
+
+/**
+ * Parse an Excel file from a File object
+ */
+export async function parseExcelFile<T = Record<string, unknown>>(
+  file: File,
+  options: ParseOptions = {}
+): Promise<ParseResult<T>> {
+  const buffer = await file.arrayBuffer()
+  return parseExcelBuffer<T>(buffer, options)
+}
+
+/**
+ * Validate Excel data against a schema
+ */
+export function validateExcelData<T>(
+  data: unknown[],
+  validator: (row: unknown, index: number) => T | null
+): { valid: T[]; errors: { row: number; error: string }[] } {
+  const valid: T[] = []
+  const errors: { row: number; error: string }[] = []
+
+  data.forEach((row, index) => {
+    try {
+      const result = validator(row, index)
+      if (result !== null) {
+        valid.push(result)
+      }
+    } catch (error) {
+      errors.push({
+        row: index + 2, // +2 because Excel rows are 1-indexed and header is row 1
+        error: error instanceof Error ? error.message : 'Validation error',
+      })
+    }
+  })
+
+  return { valid, errors }
+}

package/template/src/lib/query-client.ts

@@ -0,0 +1,35 @@
+import { QueryClient, defaultShouldDehydrateQuery, isServer } from '@tanstack/react-query'
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000, // 1 minute
+        gcTime: 5 * 60 * 1000, // 5 minutes
+        retry: 1,
+        refetchOnWindowFocus: false,
+      },
+      dehydrate: {
+        shouldDehydrateQuery: (query) =>
+          defaultShouldDehydrateQuery(query) ||
+          query.state.status === 'pending',
+      },
+    },
+  })
+}
+
+let browserQueryClient: QueryClient | undefined = undefined
+
+export function getQueryClient() {
+  if (isServer) {
+    // Server: always make a new query client
+    return makeQueryClient()
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient()
+    return browserQueryClient
+  }
+}

package/template/src/lib/supabase/client.ts

@@ -1,8 +1,11 @@
 import { createBrowserClient } from '@supabase/ssr'
 
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY
+
 export function createClient() {
   return createBrowserClient(
-    process.env.NEXT_PUBLIC_SUPABASE_URL!,
-    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+    supabaseUrl!,
+    supabaseKey!
   )
 }