@nextsparkjs/core 0.1.0-beta.75 → 0.1.0-beta.77

package/templates/app/accept-invite/[token]/page.tsx

@@ -1,342 +0,0 @@
-'use client'
-
-import { useEffect, useState, useRef } from 'react'
-import { useParams, useRouter } from 'next/navigation'
-import { useAuth } from '@nextsparkjs/core/hooks/useAuth'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
-import { Button } from '@nextsparkjs/core/components/ui/button'
-import { Alert, AlertDescription, AlertTitle } from '@nextsparkjs/core/components/ui/alert'
-import { Loader2, CheckCircle, XCircle, Users, LogIn, UserPlus } from 'lucide-react'
-import { toast } from 'sonner'
-import Link from 'next/link'
-import { sel } from '@nextsparkjs/core/selectors'
-
-type InvitationStatus = 'loading' | 'valid' | 'accepting' | 'accepted' | 'error' | 'expired' | 'not_found' | 'email_mismatch' | 'already_member' | 'requires_auth'
-
-interface InvitationInfo {
-  teamName: string
-  inviterName: string
-  role: string
-  email: string
-}
-
-export default function AcceptInvitePage() {
-  const params = useParams()
-  const router = useRouter()
-  const { user, isLoading: authLoading } = useAuth()
-  const token = params.token as string
-
-  const [status, setStatus] = useState<InvitationStatus>('loading')
-  const [invitationInfo, setInvitationInfo] = useState<InvitationInfo | null>(null)
-  const [errorMessage, setErrorMessage] = useState<string>('')
-  const autoAcceptAttempted = useRef(false)
-
-  // Validate invitation and auto-accept when user is authenticated
-  useEffect(() => {
-    if (authLoading) return
-
-    async function validateAndAccept() {
-      try {
-        // First validate the invitation
-        const response = await fetch(`/api/v1/team-invitations/${token}`)
-        const data = await response.json()
-
-        if (!response.ok) {
-          if (data.code === 'INVITATION_NOT_FOUND') {
-            setStatus('not_found')
-          } else if (data.code === 'INVITATION_EXPIRED') {
-            setStatus('expired')
-          } else {
-            setStatus('error')
-            setErrorMessage(data.error || 'Failed to validate invitation')
-          }
-          return
-        }
-
-        const info = {
-          teamName: data.data.teamName || 'Unknown Team',
-          inviterName: data.data.inviterName || 'Someone',
-          role: data.data.role,
-          email: data.data.email
-        }
-        setInvitationInfo(info)
-
-        // Check if user is logged in
-        if (!user) {
-          setStatus('requires_auth')
-          return
-        }
-
-        // Check email match
-        if (!user.email || user.email.toLowerCase() !== data.data.email.toLowerCase()) {
-          setStatus('email_mismatch')
-          setErrorMessage(`This invitation was sent to ${data.data.email}, but you are logged in as ${user.email || 'unknown'}`)
-          return
-        }
-
-        // Auto-accept the invitation since user is authenticated and email matches
-        if (autoAcceptAttempted.current) return
-        autoAcceptAttempted.current = true
-
-        setStatus('accepting')
-
-        const acceptResponse = await fetch(`/api/v1/team-invitations/${token}/accept`, {
-          method: 'POST',
-          credentials: 'include'
-        })
-
-        const acceptData = await acceptResponse.json()
-
-        if (!acceptResponse.ok) {
-          if (acceptData.code === 'ALREADY_MEMBER') {
-            setStatus('already_member')
-          } else if (acceptData.code === 'EMAIL_MISMATCH') {
-            setStatus('email_mismatch')
-            setErrorMessage(acceptData.error)
-          } else if (acceptData.code === 'INVITATION_EXPIRED') {
-            setStatus('expired')
-          } else {
-            setStatus('error')
-            setErrorMessage(acceptData.error || 'Failed to accept invitation')
-          }
-          return
-        }
-
-        setStatus('accepted')
-        toast.success(`Welcome to ${info.teamName}!`, {
-          description: 'You have successfully joined the team'
-        })
-
-        // Redirect to dashboard after a short delay
-        setTimeout(() => {
-          router.push('/dashboard/settings/teams')
-        }, 1500)
-      } catch {
-        setStatus('error')
-        setErrorMessage('Failed to validate invitation')
-      }
-    }
-
-    validateAndAccept()
-  }, [token, user, authLoading, router])
-
-  // Accept invitation (manual fallback)
-  const handleAccept = async () => {
-    setStatus('accepting')
-
-    try {
-      const response = await fetch(`/api/v1/team-invitations/${token}/accept`, {
-        method: 'POST',
-        credentials: 'include'
-      })
-
-      const data = await response.json()
-
-      if (!response.ok) {
-        if (data.code === 'ALREADY_MEMBER') {
-          setStatus('already_member')
-        } else if (data.code === 'EMAIL_MISMATCH') {
-          setStatus('email_mismatch')
-          setErrorMessage(data.error)
-        } else if (data.code === 'INVITATION_EXPIRED') {
-          setStatus('expired')
-        } else {
-          setStatus('error')
-          setErrorMessage(data.error || 'Failed to accept invitation')
-        }
-        return
-      }
-
-      setStatus('accepted')
-      toast.success(`Welcome to ${invitationInfo?.teamName}!`, {
-        description: 'You have successfully joined the team'
-      })
-
-      // Redirect to dashboard after a short delay
-      setTimeout(() => {
-        router.push('/dashboard/settings/teams')
-      }, 1500)
-    } catch {
-      setStatus('error')
-      setErrorMessage('Failed to accept invitation')
-    }
-  }
-
-  // Build auth URLs with invitation context
-  const buildAuthUrl = (path: string) => {
-    const params = new URLSearchParams({
-      callbackUrl: `/accept-invite/${token}`,
-      fromInvite: 'true',
-    })
-    if (invitationInfo?.email) {
-      params.set('email', invitationInfo.email)
-    }
-    // Pass token for signup to skip email verification
-    if (path === '/signup') {
-      params.set('inviteToken', token)
-    }
-    return `${path}?${params.toString()}`
-  }
-
-  const loginUrl = buildAuthUrl('/login')
-  const signupUrl = buildAuthUrl('/signup')
-
-  if (authLoading || status === 'loading') {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-background" data-cy={sel('teams.acceptInvite.loading')}>
-        <Card className="w-full max-w-md">
-          <CardContent className="flex flex-col items-center py-10">
-            <Loader2 className="h-10 w-10 animate-spin text-primary" />
-            <p className="mt-4 text-muted-foreground">Validating invitation...</p>
-          </CardContent>
-        </Card>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4" data-cy={sel('teams.acceptInvite.container')}>
-      <Card className="w-full max-w-md" data-cy={sel('teams.acceptInvite.info')}>
-        <CardHeader className="text-center">
-          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
-            <Users className="h-8 w-8 text-primary" />
-          </div>
-          <CardTitle className="text-2xl">Team Invitation</CardTitle>
-          <CardDescription>
-            {invitationInfo && (
-              <>You&apos;ve been invited to join <strong data-cy={sel('teams.acceptInvite.teamName')}>{invitationInfo.teamName}</strong></>
-            )}
-          </CardDescription>
-        </CardHeader>
-
-        <CardContent className="space-y-6">
-          {/* Requires Authentication */}
-          {status === 'requires_auth' && invitationInfo && (
-            <div data-cy={sel('teams.acceptInvite.requiresAuth')}>
-              <div className="rounded-lg border p-4 space-y-2">
-                <p className="text-sm text-muted-foreground">
-                  <strong data-cy={sel('teams.acceptInvite.inviter')}>{invitationInfo.inviterName}</strong> has invited you to join <strong>{invitationInfo.teamName}</strong> as a <strong data-cy={sel('teams.acceptInvite.role')}>{invitationInfo.role}</strong>.
-                </p>
-                <p className="text-sm text-muted-foreground">
-                  This invitation was sent to <strong>{invitationInfo.email}</strong>
-                </p>
-              </div>
-
-              <div className="space-y-3 mt-6">
-                <p className="text-sm text-center text-muted-foreground">
-                  Please sign in or create an account to accept this invitation.
-                </p>
-                <Button asChild className="w-full" data-cy={sel('teams.acceptInvite.signin')}>
-                  <Link href={loginUrl}>
-                    <LogIn className="mr-2 h-4 w-4" />
-                    Sign In
-                  </Link>
-                </Button>
-                <Button asChild variant="outline" className="w-full" data-cy={sel('teams.acceptInvite.signup')}>
-                  <Link href={signupUrl}>
-                    <UserPlus className="mr-2 h-4 w-4" />
-                    Create Account
-                  </Link>
-                </Button>
-              </div>
-            </div>
-          )}
-
-          {/* Valid - Ready to Accept */}
-          {status === 'valid' && invitationInfo && (
-            <div data-cy={sel('teams.acceptInvite.valid')}>
-              <div className="rounded-lg border p-4 space-y-2">
-                <p className="text-sm text-muted-foreground">
-                  <strong>{invitationInfo.inviterName}</strong> has invited you to join <strong>{invitationInfo.teamName}</strong> as a <strong>{invitationInfo.role}</strong>.
-                </p>
-              </div>
-
-              <Button onClick={handleAccept} className="w-full mt-6" data-cy={sel('teams.acceptInvite.accept')}>
-                Accept Invitation
-              </Button>
-            </div>
-          )}
-
-          {/* Accepting */}
-          {status === 'accepting' && (
-            <div className="flex flex-col items-center py-4" data-cy={sel('teams.acceptInvite.accepting')}>
-              <Loader2 className="h-8 w-8 animate-spin text-primary" />
-              <p className="mt-4 text-muted-foreground">Accepting invitation...</p>
-            </div>
-          )}
-
-          {/* Accepted */}
-          {status === 'accepted' && (
-            <Alert className="border-green-200 bg-green-50" data-cy={sel('teams.acceptInvite.success')}>
-              <CheckCircle className="h-5 w-5 text-green-600" />
-              <AlertTitle className="text-green-800">Welcome to the team!</AlertTitle>
-              <AlertDescription className="text-green-700">
-                You&apos;ve successfully joined {invitationInfo?.teamName}. Redirecting to your dashboard...
-              </AlertDescription>
-            </Alert>
-          )}
-
-          {/* Already Member */}
-          {status === 'already_member' && (
-            <Alert className="border-blue-200 bg-blue-50" data-cy={sel('teams.acceptInvite.alreadyMember')}>
-              <CheckCircle className="h-5 w-5 text-blue-600" />
-              <AlertTitle className="text-blue-800">Already a member</AlertTitle>
-              <AlertDescription className="text-blue-700">
-                You&apos;re already a member of this team.
-                <Button asChild variant="link" className="p-0 h-auto ml-1">
-                  <Link href="/dashboard/settings/teams">Go to Teams</Link>
-                </Button>
-              </AlertDescription>
-            </Alert>
-          )}
-
-          {/* Email Mismatch */}
-          {status === 'email_mismatch' && (
-            <Alert variant="destructive" data-cy={sel('teams.acceptInvite.emailMismatch')}>
-              <XCircle className="h-5 w-5" />
-              <AlertTitle>Email mismatch</AlertTitle>
-              <AlertDescription>
-                {errorMessage}
-                <br />
-                <Button asChild variant="link" className="p-0 h-auto">
-                  <Link href={loginUrl}>Sign in with a different account</Link>
-                </Button>
-              </AlertDescription>
-            </Alert>
-          )}
-
-          {/* Not Found */}
-          {status === 'not_found' && (
-            <Alert variant="destructive" data-cy={sel('teams.acceptInvite.notFound')}>
-              <XCircle className="h-5 w-5" />
-              <AlertTitle>Invitation not found</AlertTitle>
-              <AlertDescription>
-                This invitation link is invalid or has already been used. Please contact the team owner for a new invitation.
-              </AlertDescription>
-            </Alert>
-          )}
-
-          {/* Expired */}
-          {status === 'expired' && (
-            <Alert variant="destructive" data-cy={sel('teams.acceptInvite.expired')}>
-              <XCircle className="h-5 w-5" />
-              <AlertTitle>Invitation expired</AlertTitle>
-              <AlertDescription>
-                This invitation has expired. Please contact the team owner for a new invitation.
-              </AlertDescription>
-            </Alert>
-          )}
-
-          {/* Generic Error */}
-          {status === 'error' && (
-            <Alert variant="destructive" data-cy={sel('teams.acceptInvite.error')}>
-              <XCircle className="h-5 w-5" />
-              <AlertTitle>Error</AlertTitle>
-              <AlertDescription>{errorMessage || 'An error occurred. Please try again.'}</AlertDescription>
-            </Alert>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  )
-}

package/templates/app/devtools/api/[...path]/page.tsx

@@ -1,36 +0,0 @@
-import { notFound } from 'next/navigation'
-import { ApiRoutesService } from '@nextsparkjs/core/lib/services/api-routes.service'
-import { ApiTester } from '@nextsparkjs/core/components/devtools/api-tester'
-
-interface DevApiDetailPageProps {
-  params: Promise<{ path: string[] }>
-}
-
-/**
- * DevTools API Tester Page (catch-all route)
- *
- * Displays API tester for a specific endpoint.
- * URL format: /devtools/api/v1/users/%5Bid%5D -> path = ['v1', 'users', '%5Bid%5D']
- *
- * Note: Brackets must be URL-encoded in the URL to avoid Next.js treating them
- * as dynamic route segments. We decode them here to match the registry paths.
- */
-export default async function DevApiDetailPage({ params }: DevApiDetailPageProps) {
-  const { path } = await params
-
-  // Decode URL-encoded brackets back to literal brackets
-  // %5B -> [ and %5D -> ]
-  const decodedPath = path.map(segment => decodeURIComponent(segment))
-
-  // Reconstruir el path del API
-  const apiPath = '/api/' + decodedPath.join('/')
-
-  // Buscar el endpoint en el registry
-  const route = ApiRoutesService.getRoute(apiPath)
-
-  if (!route) {
-    notFound()
-  }
-
-  return <ApiTester route={route} basePath={apiPath} />
-}

package/templates/app/devtools/api/page.tsx

@@ -1,213 +0,0 @@
-import { Code, Database, Layers, Puzzle } from "lucide-react"
-import Link from "next/link"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextsparkjs/core/components/ui/card"
-import { Badge } from "@nextsparkjs/core/components/ui/badge"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@nextsparkjs/core/components/ui/tabs"
-import { ApiRoutesService } from "@nextsparkjs/core/lib/services/api-routes.service"
-import { getTranslations } from "next-intl/server"
-
-/**
- * Method badge colors
- */
-const methodColors: Record<string, string> = {
-  GET: "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300",
-  POST: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300",
-  PATCH: "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300",
-  PUT: "bg-orange-100 text-orange-700 dark:bg-orange-950 dark:text-orange-300",
-  DELETE: "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300",
-}
-
-/**
- * Encode path for Link href to handle dynamic segments
- * Next.js App Router doesn't support [...] in href, so we encode brackets
- */
-function encodePathForLink(path: string): string {
-  return path
-    .replace('/api', '')
-    .replace(/\[/g, '%5B')
-    .replace(/\]/g, '%5D')
-}
-
-/**
- * Category icons and colors
- */
-const categoryConfig = {
-  core: {
-    icon: Code,
-    color: "text-violet-600 dark:text-violet-400",
-    bgColor: "bg-violet-100 dark:bg-violet-950",
-    label: "Core"
-  },
-  entity: {
-    icon: Database,
-    color: "text-blue-600 dark:text-blue-400",
-    bgColor: "bg-blue-100 dark:bg-blue-950",
-    label: "Entities"
-  },
-  theme: {
-    icon: Layers,
-    color: "text-pink-600 dark:text-pink-400",
-    bgColor: "bg-pink-100 dark:bg-pink-950",
-    label: "Theme"
-  },
-  plugin: {
-    icon: Puzzle,
-    color: "text-green-600 dark:text-green-400",
-    bgColor: "bg-green-100 dark:bg-green-950",
-    label: "Plugins"
-  }
-}
-
-/**
- * Developer API Explorer Page
- *
- * Lists all available API endpoints grouped by category.
- * Shows paths, HTTP methods, and source information.
- */
-export default async function DevToolsApiPage() {
-  const t = await getTranslations("devtools.api")
-
-  const summary = ApiRoutesService.getSummary()
-  const routesByCategory = ApiRoutesService.getRoutesGroupedByCategory()
-
-  return (
-    <div className="space-y-6" data-cy="devtools-api-page">
-      {/* Header */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center justify-center w-12 h-12 bg-violet-100 dark:bg-violet-950 rounded-lg">
-          <Code className="h-6 w-6 text-violet-600 dark:text-violet-400" />
-        </div>
-        <div>
-          <h1 className="text-3xl font-bold text-violet-600 dark:text-violet-400">
-            {t('title')}
-          </h1>
-          <p className="text-muted-foreground">
-            {summary.totalRoutes} {t('endpointsAvailable')}
-          </p>
-        </div>
-      </div>
-
-      {/* Summary Cards */}
-      <div className="grid gap-4 md:grid-cols-4">
-        {(Object.keys(categoryConfig) as Array<keyof typeof categoryConfig>).map((category) => {
-          const config = categoryConfig[category]
-          const Icon = config.icon
-          const countKey = category === 'entity' ? 'entities' : category === 'plugin' ? 'plugins' : category
-          const count = summary.byCategory[countKey as keyof typeof summary.byCategory]
-
-          return (
-            <Card key={category} data-cy={`devtools-api-summary-${category}`}>
-              <CardContent className="pt-6">
-                <div className="flex items-center gap-3">
-                  <div className={`flex items-center justify-center w-10 h-10 ${config.bgColor} rounded-lg`}>
-                    <Icon className={`h-5 w-5 ${config.color}`} />
-                  </div>
-                  <div>
-                    <p className="text-2xl font-bold">{count}</p>
-                    <p className="text-sm text-muted-foreground">{config.label}</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          )
-        })}
-      </div>
-
-      {/* Routes by Category Tabs */}
-      <Tabs defaultValue="core" className="w-full">
-        <TabsList className="grid w-full grid-cols-4">
-          <TabsTrigger value="core" data-cy="devtools-api-tab-core">
-            Core ({summary.byCategory.core})
-          </TabsTrigger>
-          <TabsTrigger value="entity" data-cy="devtools-api-tab-entity">
-            Entities ({summary.byCategory.entities})
-          </TabsTrigger>
-          <TabsTrigger value="theme" data-cy="devtools-api-tab-theme">
-            Theme ({summary.byCategory.theme})
-          </TabsTrigger>
-          <TabsTrigger value="plugin" data-cy="devtools-api-tab-plugin">
-            Plugins ({summary.byCategory.plugins})
-          </TabsTrigger>
-        </TabsList>
-
-        {(Object.keys(routesByCategory) as Array<keyof typeof routesByCategory>).map((category) => {
-          const routes = routesByCategory[category]
-          const config = categoryConfig[category]
-
-          return (
-            <TabsContent key={category} value={category} className="mt-6">
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <config.icon className={`h-5 w-5 ${config.color}`} />
-                    {config.label} Endpoints
-                  </CardTitle>
-                  <CardDescription>
-                    {routes.length === 0
-                      ? t('noRoutesInCategory')
-                      : `${routes.length} ${t('endpointsInCategory')}`
-                    }
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  {routes.length === 0 ? (
-                    <p className="text-sm text-muted-foreground py-4 text-center">
-                      {t('noRoutesMessage')}
-                    </p>
-                  ) : (
-                    <div className="space-y-3">
-                      {routes.map((route, index) => (
-                        <Link
-                          href={`/devtools/api${encodePathForLink(route.path)}`}
-                          key={`${route.path}-${index}`}
-                          className="flex items-center justify-between p-3 rounded-lg border bg-card hover:bg-muted/50 transition-colors cursor-pointer"
-                          data-cy={`devtools-api-route-${category}-${index}`}
-                        >
-                          <div className="flex-1 min-w-0">
-                            <code className="text-sm font-mono font-medium break-all">
-                              {route.path}
-                            </code>
-                            {route.source && (
-                              <p className="text-xs text-muted-foreground mt-1">
-                                Source: {route.source}
-                              </p>
-                            )}
-                            {route.subcategory && (
-                              <p className="text-xs text-muted-foreground mt-1">
-                                Category: {route.subcategory}
-                              </p>
-                            )}
-                          </div>
-                          <div className="flex gap-1 ml-4 flex-shrink-0">
-                            {route.methods.map((method) => (
-                              <Badge
-                                key={method}
-                                variant="secondary"
-                                className={`text-xs font-mono ${methodColors[method] || ""}`}
-                              >
-                                {method}
-                              </Badge>
-                            ))}
-                          </div>
-                        </Link>
-                      ))}
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-            </TabsContent>
-          )
-        })}
-      </Tabs>
-
-      {/* Generation Info */}
-      <Card>
-        <CardContent className="pt-6">
-          <p className="text-xs text-muted-foreground text-center">
-            {t('generatedAt')}: {new Date(summary.generatedAt).toLocaleString()}
-          </p>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}