@create-lft-app/nextjs 3.1.0 → 3.2.0

package/template/src/config/navigation.ts

@@ -1,69 +1,59 @@
-import { LucideIcon, LayoutDashboard, Users, Settings, FileText } from 'lucide-react'
-
-export interface NavItem {
-  title: string
-  href: string
-  icon?: LucideIcon
-  disabled?: boolean
-  external?: boolean
-  badge?: string
-}
-
-export interface NavSection {
-  title?: string
-  items: NavItem[]
-}
-
-export const mainNav: NavItem[] = [
-  {
-    title: 'Dashboard',
-    href: '/dashboard',
-  },
-  {
-    title: 'Usuarios',
-    href: '/users',
-  },
-]
-
-export const sidebarNav: NavSection[] = [
-  {
-    items: [
-      {
-        title: 'Dashboard',
-        href: '/dashboard',
-        icon: LayoutDashboard,
-      },
-      {
-        title: 'Usuarios',
-        href: '/users',
-        icon: Users,
-      },
-      {
-        title: 'Reportes',
-        href: '/reports',
-        icon: FileText,
-      },
-    ],
-  },
-  {
-    title: 'Configuración',
-    items: [
-      {
-        title: 'Ajustes',
-        href: '/settings',
-        icon: Settings,
-      },
-    ],
-  },
-]
-
-export const footerNav: NavItem[] = [
-  {
-    title: 'Términos',
-    href: '/terms',
-  },
-  {
-    title: 'Privacidad',
-    href: '/privacy',
-  },
-]
+import { LucideIcon, LayoutDashboard, Users, FileText } from 'lucide-react'
+
+export interface NavItem {
+  title: string
+  href: string
+  icon?: LucideIcon
+  disabled?: boolean
+  external?: boolean
+  badge?: string
+}
+
+export interface NavSection {
+  title?: string
+  items: NavItem[]
+}
+
+export const mainNav: NavItem[] = [
+  {
+    title: 'Dashboard',
+    href: '/dashboard',
+  },
+  {
+    title: 'Usuarios',
+    href: '/users',
+  },
+]
+
+export const sidebarNav: NavSection[] = [
+  {
+    items: [
+      {
+        title: 'Dashboard',
+        href: '/dashboard',
+        icon: LayoutDashboard,
+      },
+      {
+        title: 'Usuarios',
+        href: '/users',
+        icon: Users,
+      },
+      {
+        title: 'Reportes',
+        href: '/reports',
+        icon: FileText,
+      },
+    ],
+  },
+]
+
+export const footerNav: NavItem[] = [
+  {
+    title: 'Términos',
+    href: '/terms',
+  },
+  {
+    title: 'Privacidad',
+    href: '/privacy',
+  },
+]

package/template/src/config/roles.ts

@@ -0,0 +1,27 @@
+/**
+ * Configuración centralizada de roles de usuario.
+ * Modificar aquí para agregar/quitar roles en toda la aplicación.
+ */
+
+export const USER_ROLES = ['admin', 'user', 'viewer'] as const
+
+export type UserRole = (typeof USER_ROLES)[number]
+
+export const DEFAULT_ROLE: UserRole = 'user'
+
+/**
+ * Labels para mostrar en UI (traducidos al español)
+ */
+export const ROLE_LABELS: Record<UserRole, string> = {
+  admin: 'Administrador',
+  user: 'Usuario',
+  viewer: 'Visualizador',
+}
+
+/**
+ * Opciones para selects/filtros de roles
+ */
+export const ROLE_OPTIONS = USER_ROLES.map((role) => ({
+  value: role,
+  label: ROLE_LABELS[role],
+}))

package/template/src/config/site.ts

@@ -1,12 +1,12 @@
-export const siteConfig = {
-  name: 'LFT App',
-  description: 'Next.js application with LFT stack',
-  url: process.env.NEXT_PUBLIC_APP_URL ?? 'http://localhost:3000',
-  ogImage: '/og.png',
-  links: {
-    github: 'https://github.com',
-  },
-  creator: 'LFT Team',
-}
-
-export type SiteConfig = typeof siteConfig
+export const siteConfig = {
+  name: 'LFT App',
+  description: 'Next.js application with LFT stack',
+  url: process.env.NEXT_PUBLIC_APP_URL ?? 'http://localhost:3000',
+  ogImage: '/og.png',
+  links: {
+    github: 'https://github.com',
+  },
+  creator: 'LFT Team',
+}
+
+export type SiteConfig = typeof siteConfig

package/template/src/db/index.ts

@@ -1,12 +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
+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

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

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

@@ -1,16 +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
+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

@@ -1,39 +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)
-  })
+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

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

package/template/src/hooks/use-mobile.ts

@@ -1,21 +1,21 @@
-"use client"
-
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}
+"use client"
+
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/template/src/hooks/useDataTable.ts

@@ -1,82 +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,
-  }
-}
+'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

@@ -1,49 +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
-}
+'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
+}