@create-lft-app/nextjs 1.0.2 → 3.0.0

package/template/src/components/ui/dialog.tsx

@@ -2,8 +2,8 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { motion, AnimatePresence } from "framer-motion"
 import { XIcon } from "lucide-react"
-
 import { cn } from "@/lib/utils"
 
 function Dialog({
@@ -30,50 +30,52 @@ function DialogClose({
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay ref={ref} asChild {...props}>
+    <motion.div
       data-slot="dialog-overlay"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
       className={cn(
         "fixed inset-0 z-50",
-        "bg-[#f6f6f3]/60 dark:bg-[#0C0C0C]/80",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "bg-black/60 backdrop-blur-sm",
         className
       )}
-      {...props}
     />
-  )
-}
+  </DialogPrimitive.Overlay>
+))
+DialogOverlay.displayName = "DialogOverlay"
 
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean
+  }
+>(({ className, children, showCloseButton = true, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content ref={ref} asChild {...props}>
+      <motion.div
         data-slot="dialog-content"
+        initial={{ opacity: 0, scale: 0.95, y: -10 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={{ opacity: 0, scale: 0.95, y: -10 }}
+        transition={{
+          type: "spring",
+          stiffness: 300,
+          damping: 30,
+        }}
         className={cn(
           "fixed left-[50%] top-[50%] z-50",
           "translate-x-[-50%] translate-y-[-50%]",
           "grid w-full max-w-xl gap-4 border bg-background p-6",
-          "duration-200",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
           className
         )}
-        {...props}
       >
         {children}
         {showCloseButton && (
@@ -85,10 +87,11 @@ function DialogContent({
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
+      </motion.div>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = "DialogContent"
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/template/src/components/ui/motion.tsx

@@ -0,0 +1,197 @@
+'use client'
+
+import { motion, type HTMLMotionProps, type Variants } from 'framer-motion'
+import { forwardRef } from 'react'
+
+// Variantes de animación reutilizables
+export const fadeIn: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+}
+
+export const fadeInUp: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+}
+
+export const fadeInDown: Variants = {
+  hidden: { opacity: 0, y: -20 },
+  visible: { opacity: 1, y: 0 },
+}
+
+export const fadeInLeft: Variants = {
+  hidden: { opacity: 0, x: -20 },
+  visible: { opacity: 1, x: 0 },
+}
+
+export const fadeInRight: Variants = {
+  hidden: { opacity: 0, x: 20 },
+  visible: { opacity: 1, x: 0 },
+}
+
+export const scaleIn: Variants = {
+  hidden: { opacity: 0, scale: 0.95 },
+  visible: { opacity: 1, scale: 1 },
+}
+
+export const slideInFromBottom: Variants = {
+  hidden: { y: '100%' },
+  visible: { y: 0 },
+}
+
+export const slideInFromTop: Variants = {
+  hidden: { y: '-100%' },
+  visible: { y: 0 },
+}
+
+export const staggerContainer: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+}
+
+export const staggerItem: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+}
+
+// Transiciones predefinidas
+export const springTransition = {
+  type: 'spring',
+  stiffness: 300,
+  damping: 30,
+}
+
+export const easeTransition = {
+  duration: 0.3,
+  ease: [0.25, 0.1, 0.25, 1],
+}
+
+export const smoothTransition = {
+  duration: 0.4,
+  ease: 'easeInOut',
+}
+
+// Componentes de animación base
+export const MotionDiv = motion.div
+export const MotionSpan = motion.span
+export const MotionButton = motion.button
+export const MotionUl = motion.ul
+export const MotionLi = motion.li
+export const MotionNav = motion.nav
+export const MotionSection = motion.section
+export const MotionArticle = motion.article
+export const MotionHeader = motion.header
+export const MotionFooter = motion.footer
+export const MotionMain = motion.main
+export const MotionAside = motion.aside
+
+// Componente FadeIn genérico
+interface FadeInProps extends HTMLMotionProps<'div'> {
+  direction?: 'up' | 'down' | 'left' | 'right' | 'none'
+  delay?: number
+  duration?: number
+}
+
+export const FadeIn = forwardRef<HTMLDivElement, FadeInProps>(
+  ({ children, direction = 'up', delay = 0, duration = 0.4, ...props }, ref) => {
+    const variants: Record<string, Variants> = {
+      up: fadeInUp,
+      down: fadeInDown,
+      left: fadeInLeft,
+      right: fadeInRight,
+      none: fadeIn,
+    }
+
+    return (
+      <motion.div
+        ref={ref}
+        initial="hidden"
+        animate="visible"
+        variants={variants[direction]}
+        transition={{ duration, delay, ease: 'easeOut' }}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+FadeIn.displayName = 'FadeIn'
+
+// Componente ScaleIn
+interface ScaleInProps extends HTMLMotionProps<'div'> {
+  delay?: number
+  duration?: number
+}
+
+export const ScaleIn = forwardRef<HTMLDivElement, ScaleInProps>(
+  ({ children, delay = 0, duration = 0.3, ...props }, ref) => {
+    return (
+      <motion.div
+        ref={ref}
+        initial="hidden"
+        animate="visible"
+        variants={scaleIn}
+        transition={{ duration, delay, ...springTransition }}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+ScaleIn.displayName = 'ScaleIn'
+
+// Componente para listas con stagger
+interface StaggerListProps extends HTMLMotionProps<'ul'> {
+  staggerDelay?: number
+}
+
+export const StaggerList = forwardRef<HTMLUListElement, StaggerListProps>(
+  ({ children, staggerDelay = 0.1, ...props }, ref) => {
+    return (
+      <motion.ul
+        ref={ref}
+        initial="hidden"
+        animate="visible"
+        variants={{
+          hidden: { opacity: 0 },
+          visible: {
+            opacity: 1,
+            transition: {
+              staggerChildren: staggerDelay,
+            },
+          },
+        }}
+        {...props}
+      >
+        {children}
+      </motion.ul>
+    )
+  }
+)
+StaggerList.displayName = 'StaggerList'
+
+export const StaggerItem = forwardRef<HTMLLIElement, HTMLMotionProps<'li'>>(
+  ({ children, ...props }, ref) => {
+    return (
+      <motion.li
+        ref={ref}
+        variants={staggerItem}
+        transition={easeTransition}
+        {...props}
+      >
+        {children}
+      </motion.li>
+    )
+  }
+)
+StaggerItem.displayName = 'StaggerItem'
+
+// Componente de presencia animada para entradas/salidas
+export { AnimatePresence } from 'framer-motion'

package/template/src/components/ui/page-transition.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { motion, type HTMLMotionProps } from 'framer-motion'
+import { cn } from '@/lib/utils'
+
+const pageVariants = {
+  initial: {
+    opacity: 0,
+    y: 20,
+  },
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.4,
+      ease: [0.25, 0.1, 0.25, 1],
+      when: 'beforeChildren',
+      staggerChildren: 0.1,
+    },
+  },
+  exit: {
+    opacity: 0,
+    y: -20,
+    transition: {
+      duration: 0.3,
+    },
+  },
+}
+
+const childVariants = {
+  initial: {
+    opacity: 0,
+    y: 20,
+  },
+  enter: {
+    opacity: 1,
+    y: 0,
+  },
+  exit: {
+    opacity: 0,
+    y: -20,
+  },
+}
+
+interface PageTransitionProps extends HTMLMotionProps<'div'> {
+  children: React.ReactNode
+}
+
+export function PageTransition({
+  children,
+  className,
+  ...props
+}: PageTransitionProps) {
+  return (
+    <motion.div
+      initial="initial"
+      animate="enter"
+      exit="exit"
+      variants={pageVariants}
+      className={cn('w-full', className)}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+interface PageSectionProps extends HTMLMotionProps<'section'> {
+  children: React.ReactNode
+  delay?: number
+}
+
+export function PageSection({
+  children,
+  className,
+  delay = 0,
+  ...props
+}: PageSectionProps) {
+  return (
+    <motion.section
+      variants={childVariants}
+      transition={{
+        duration: 0.4,
+        delay,
+        ease: [0.25, 0.1, 0.25, 1],
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </motion.section>
+  )
+}
+
+interface PageHeaderProps extends HTMLMotionProps<'header'> {
+  children: React.ReactNode
+}
+
+export function PageHeader({
+  children,
+  className,
+  ...props
+}: PageHeaderProps) {
+  return (
+    <motion.header
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{
+        duration: 0.4,
+        ease: [0.25, 0.1, 0.25, 1],
+      }}
+      className={cn('mb-6', className)}
+      {...props}
+    >
+      {children}
+    </motion.header>
+  )
+}
+
+interface PageTitleProps extends HTMLMotionProps<'h1'> {
+  children: React.ReactNode
+}
+
+export function PageTitle({ children, className, ...props }: PageTitleProps) {
+  return (
+    <motion.h1
+      initial={{ opacity: 0, x: -20 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{
+        duration: 0.4,
+        delay: 0.1,
+        ease: [0.25, 0.1, 0.25, 1],
+      }}
+      className={cn('text-2xl font-bold tracking-tight', className)}
+      {...props}
+    >
+      {children}
+    </motion.h1>
+  )
+}
+
+interface PageDescriptionProps extends HTMLMotionProps<'p'> {
+  children: React.ReactNode
+}
+
+export function PageDescription({
+  children,
+  className,
+  ...props
+}: PageDescriptionProps) {
+  return (
+    <motion.p
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{
+        duration: 0.4,
+        delay: 0.2,
+        ease: [0.25, 0.1, 0.25, 1],
+      }}
+      className={cn('text-muted-foreground', className)}
+      {...props}
+    >
+      {children}
+    </motion.p>
+  )
+}

package/template/src/components/ui/sheet.tsx

@@ -2,8 +2,8 @@
 
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { motion } from "framer-motion"
 import { XIcon } from "lucide-react"
-
 import { cn } from "@/lib/utils"
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
@@ -28,65 +28,89 @@ function SheetPortal({
   return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 }
 
-function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  return (
-    <SheetPrimitive.Overlay
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay ref={ref} asChild {...props}>
+    <motion.div
       data-slot="sheet-overlay"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
       className={cn(
         "fixed inset-0 z-50",
-        "bg-[#f6f6f3]/60 dark:bg-[#0C0C0C]/80",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "bg-black/60 backdrop-blur-sm",
         className
       )}
-      {...props}
     />
-  )
+  </SheetPrimitive.Overlay>
+))
+SheetOverlay.displayName = "SheetOverlay"
+
+const slideVariants = {
+  right: {
+    initial: { x: "100%" },
+    animate: { x: 0 },
+    exit: { x: "100%" },
+  },
+  left: {
+    initial: { x: "-100%" },
+    animate: { x: 0 },
+    exit: { x: "-100%" },
+  },
+  top: {
+    initial: { y: "-100%" },
+    animate: { y: 0 },
+    exit: { y: "-100%" },
+  },
+  bottom: {
+    initial: { y: "100%" },
+    animate: { y: 0 },
+    exit: { y: "100%" },
+  },
 }
 
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
-}) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & {
+    side?: "top" | "right" | "bottom" | "left"
+  }
+>(({ className, children, side = "right", ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content ref={ref} asChild {...props}>
+      <motion.div
         data-slot="sheet-content"
+        initial={slideVariants[side].initial}
+        animate={slideVariants[side].animate}
+        exit={slideVariants[side].exit}
+        transition={{
+          type: "spring",
+          stiffness: 300,
+          damping: 30,
+        }}
         className={cn(
           "fixed z-50 gap-4 p-6",
-          "bg-[#FAFAF9] dark:bg-[#0C0C0C]",
-          "transition ease-in-out",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=open]:duration-300 data-[state=closed]:duration-200",
-          side === "right" &&
-            "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-[520px] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
-          side === "left" &&
-            "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-[520px] data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
-          side === "top" &&
-            "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          side === "bottom" &&
-            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          "bg-background border",
+          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-[520px]",
+          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-[520px]",
+          side === "top" && "inset-x-0 top-0 border-b",
+          side === "bottom" && "inset-x-0 bottom-0 border-t",
           className
         )}
-        {...props}
       >
         {children}
         <SheetPrimitive.Close className="absolute right-6 top-6 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none">
           <XIcon className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
-}
+      </motion.div>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = "SheetContent"
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/template/src/config/navigation.ts

@@ -0,0 +1,69 @@
+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',
+  },
+]

package/template/src/config/site.ts

@@ -0,0 +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