@nextsparkjs/core 0.1.0-beta.84 → 0.1.0-beta.85

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

@@ -0,0 +1,47 @@
+import { TestCasesViewer } from "@nextsparkjs/core/components/devtools";
+import { FileText } from "lucide-react";
+import { getTranslations } from "next-intl/server";
+
+interface DevTestsPageProps {
+  params: Promise<{ path?: string[] }>;
+}
+
+/**
+ * Test Cases Page (Catch-all route)
+ *
+ * Displays test documentation viewer with file tree and markdown rendering.
+ * Shows all test case files from tests/cypress/e2e/**\/*.md
+ *
+ * URL Examples:
+ * - /dev/tests                                    → No selection
+ * - /dev/tests/auth/login-logout.bdd.md          → File selected
+ * - /dev/tests/page-builder/admin/block-editor.bdd.md → Nested file
+ */
+export default async function DevTestsPage({ params }: DevTestsPageProps) {
+  const { path } = await params;
+  const t = await getTranslations("dev.tests");
+
+  // Convert path array to string (e.g., ['auth', 'login.bdd.md'] -> 'auth/login.bdd.md')
+  const initialPath = path?.join("/") || null;
+
+  return (
+    <div
+      className="space-y-6 2xl:w-[calc(100%+500px)] 2xl:-ml-[250px]"
+      data-cy="devtools-tests-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">
+          <FileText className="h-6 w-6 text-violet-600 dark:text-violet-400" />
+        </div>
+        <div>
+          <h1 className="text-3xl font-bold">{t("title")}</h1>
+          <p className="text-muted-foreground">{t("description")}</p>
+        </div>
+      </div>
+
+      {/* Test Cases Viewer */}
+      <TestCasesViewer initialPath={initialPath} />
+    </div>
+  );
+}

package/templates/app/globals.css

@@ -0,0 +1,12 @@
+/* =============================================
+   GLOBAL STYLES - Import from Active Theme
+
+   This file imports styles from the active theme.
+   DO NOT edit directly - all styles are in:
+   contents/themes/{theme}/styles/globals.css
+
+   To customize colors, typography and tokens, edit
+   the globals.css file in your active theme.
+   ============================================= */
+
+@import "../../../themes/default/styles/globals.css";

package/templates/app/layout.tsx

@@ -0,0 +1,96 @@
+/**
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ * Generated by @nextspark/core
+ * Regenerate with: npx nextspark generate
+ */
+
+import type { Metadata } from "next"
+import { Geist, Geist_Mono } from "next/font/google"
+import { NextIntlClientProvider } from 'next-intl'
+import { getMessages } from 'next-intl/server'
+
+import "./globals.css"
+import { QueryProvider } from "@nextsparkjs/core/providers/query-provider"
+import { ThemeProvider as NextThemeProvider } from "@nextsparkjs/core/providers/theme-provider"
+import { ThemeProvider as CustomThemeProvider } from "@nextsparkjs/core/lib/theme/ThemeProvider"
+import { TeamProvider } from "@nextsparkjs/core/contexts/TeamContext"
+import { SubscriptionProvider } from "@nextsparkjs/core/contexts/SubscriptionContext"
+import { getUserLocale } from '@nextsparkjs/core/lib/locale'
+import { Toaster } from "@nextsparkjs/core/components/ui/sonner"
+import { TranslationContextManager } from "@nextsparkjs/core/providers/TranslationContextManager"
+import { PluginService } from '@nextsparkjs/core/lib/services'
+import { getMetadataOrDefault } from '@nextsparkjs/core/lib/template-resolver'
+import { getDefaultThemeMode } from '@nextsparkjs/core/lib/theme/get-default-theme-mode'
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+})
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+})
+
+const defaultMetadata: Metadata = {
+  title: "NextSpark App",
+  description: "Built with NextSpark",
+}
+
+export const metadata: Metadata = getMetadataOrDefault(
+  'app/layout.tsx',
+  defaultMetadata
+)
+
+let pluginsInitialized = false
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  if (!pluginsInitialized) {
+    await PluginService.initializeAll()
+    pluginsInitialized = true
+  }
+
+  const locale = await getUserLocale()
+  const messages = await getMessages({ locale })
+  const defaultTheme = await getDefaultThemeMode()
+
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <head>
+        {/* Preconnect hints for Stripe - improves payment form load time */}
+        <link rel="dns-prefetch" href="https://js.stripe.com" />
+        <link rel="dns-prefetch" href="https://api.stripe.com" />
+        <link rel="preconnect" href="https://js.stripe.com" crossOrigin="anonymous" />
+        <link rel="preconnect" href="https://api.stripe.com" crossOrigin="anonymous" />
+      </head>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <NextIntlClientProvider messages={messages}>
+          <NextThemeProvider
+            attribute="class"
+            defaultTheme={defaultTheme}
+            enableSystem
+            disableTransitionOnChange
+          >
+            <CustomThemeProvider>
+              <QueryProvider>
+                <TeamProvider>
+                  <SubscriptionProvider>
+                    <TranslationContextManager />
+                    <main>{children}</main>
+                    <Toaster position="bottom-left" />
+                  </SubscriptionProvider>
+                </TeamProvider>
+              </QueryProvider>
+            </CustomThemeProvider>
+          </NextThemeProvider>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  )
+}

package/templates/app/public/page.tsx

@@ -0,0 +1,30 @@
+import { getTemplateOrDefault } from '@nextsparkjs/core/lib/template-resolver'
+
+// Default public page component  
+function DefaultPublicPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-white rounded-lg shadow-md p-8 text-center">
+          <h1 className="text-3xl font-bold text-gray-900 mb-4">
+            Default Public Page
+          </h1>
+          <p className="text-gray-600 mb-6">
+            This is the default public page (no theme override)
+          </p>
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <p className="text-blue-800 font-medium">
+              Default Template
+            </p>
+            <p className="text-sm text-blue-600 mt-1">
+              Path: app/public/page.tsx
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Export the resolved component (theme override or default)
+export default getTemplateOrDefault('app/public/page.tsx', DefaultPublicPage)

package/templates/app/superadmin/docs/[section]/[page]/page.tsx

@@ -0,0 +1,92 @@
+import { notFound } from 'next/navigation'
+import { DOCS_REGISTRY } from '@nextsparkjs/registries/docs-registry'
+import { parseMarkdownFile } from '@nextsparkjs/core/lib/docs/parser'
+import { DocsBreadcrumbs } from '@nextsparkjs/core/components/docs/docs-breadcrumbs'
+import { DocsContent } from '@nextsparkjs/core/components/docs/docs-content'
+import { SuperadminDocsSidebar } from '@nextsparkjs/core/components/docs/superadmin-docs-sidebar'
+import path from 'path'
+import type { Metadata } from 'next'
+
+interface SuperadminDocsPageProps {
+  params: Promise<{
+    section: string
+    page: string
+  }>
+}
+
+export async function generateStaticParams() {
+  const params = []
+
+  for (const section of DOCS_REGISTRY.superadmin) {
+    for (const page of section.pages) {
+      params.push({
+        section: section.slug,
+        page: page.slug
+      })
+    }
+  }
+
+  return params
+}
+
+export async function generateMetadata({ params }: SuperadminDocsPageProps): Promise<Metadata> {
+  const resolvedParams = await params
+  const { section: sectionSlug, page: pageSlug } = resolvedParams
+
+  const section = DOCS_REGISTRY.superadmin.find(s => s.slug === sectionSlug)
+  if (!section) return { title: 'Page Not Found' }
+
+  const page = section.pages.find(p => p.slug === pageSlug)
+  if (!page) return { title: 'Page Not Found' }
+
+  const filePath = path.join(process.cwd(), page.path)
+  const { metadata } = await parseMarkdownFile(filePath)
+
+  return {
+    title: `${metadata.title} | Admin Docs`,
+    description: metadata.description || `Admin documentation for ${metadata.title}`,
+    robots: 'noindex, nofollow'
+  }
+}
+
+export default async function SuperadminDocsDetailPage({ params }: SuperadminDocsPageProps) {
+  const resolvedParams = await params
+  const { section: sectionSlug, page: pageSlug } = resolvedParams
+
+  const section = DOCS_REGISTRY.superadmin.find(s => s.slug === sectionSlug)
+  if (!section) notFound()
+
+  const page = section.pages.find(p => p.slug === pageSlug)
+  if (!page) notFound()
+
+  const filePath = path.join(process.cwd(), page.path)
+  const { metadata, html } = await parseMarkdownFile(filePath)
+
+  return (
+    <div className="flex gap-8" data-cy="superadmin-docs-page">
+      <aside className="hidden lg:block w-64 shrink-0">
+        <SuperadminDocsSidebar sections={DOCS_REGISTRY.superadmin} />
+      </aside>
+
+      <main className="flex-1 max-w-4xl">
+        <DocsBreadcrumbs
+          items={[
+            { label: 'Super Admin', href: '/superadmin' },
+            { label: 'Documentation', href: '/superadmin/docs' },
+            { label: section.title },
+            { label: metadata.title }
+          ]}
+        />
+
+        <article className="mt-8 prose prose-slate dark:prose-invert max-w-none">
+          <h1 className="text-4xl font-bold mb-2">{metadata.title}</h1>
+          {metadata.description && (
+            <p className="text-xl text-muted-foreground mb-8">{metadata.description}</p>
+          )}
+
+          <DocsContent html={html} />
+        </article>
+      </main>
+    </div>
+  )
+}

package/templates/app/superadmin/docs/page.tsx

@@ -0,0 +1,75 @@
+import { DOCS_REGISTRY } from '@nextsparkjs/registries/docs-registry'
+import { SuperadminDocsSidebar } from '@nextsparkjs/core/components/docs/superadmin-docs-sidebar'
+import Link from 'next/link'
+import { FileText, Folder } from 'lucide-react'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Admin Documentation | Super Admin',
+  description: 'Administrator documentation for deployment, configuration, and management',
+  robots: 'noindex, nofollow'
+}
+
+export default function SuperadminDocsPage() {
+  const sections = DOCS_REGISTRY.superadmin
+
+  if (sections.length === 0) {
+    return (
+      <div className="flex gap-8">
+        <aside className="hidden lg:block w-64 shrink-0">
+          <SuperadminDocsSidebar sections={sections} />
+        </aside>
+        <main className="flex-1">
+          <h1 className="text-3xl font-bold mb-4">Admin Documentation</h1>
+          <p className="text-muted-foreground">
+            No administrator documentation available yet.
+          </p>
+        </main>
+      </div>
+    )
+  }
+
+  // Redirect to first page of first section
+  const firstSection = sections[0]
+  const firstPage = firstSection.pages[0]
+
+  return (
+    <div className="flex gap-8" data-cy="superadmin-docs-container">
+      <aside className="hidden lg:block w-64 shrink-0">
+        <SuperadminDocsSidebar sections={sections} />
+      </aside>
+
+      <main className="flex-1">
+        <h1 className="text-3xl font-bold mb-4">Admin Documentation</h1>
+        <p className="text-muted-foreground mb-8">
+          Documentation for administrators covering deployment, configuration, and system management.
+        </p>
+
+        <div className="grid gap-6">
+          {sections.map((section) => (
+            <div key={section.slug} className="border rounded-lg p-6">
+              <div className="flex items-center gap-2 mb-4">
+                <Folder className="h-5 w-5 text-primary" />
+                <h2 className="text-xl font-semibold">{section.title}</h2>
+              </div>
+
+              <div className="grid gap-2">
+                {section.pages.map((page) => (
+                  <Link
+                    key={page.slug}
+                    href={`/superadmin/docs/${section.slug}/${page.slug}`}
+                    className="flex items-center gap-2 p-2 rounded-md hover:bg-accent transition-colors"
+                    data-cy={`superadmin-docs-link-${page.slug}`}
+                  >
+                    <FileText className="h-4 w-4 text-muted-foreground" />
+                    <span>{page.title}</span>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </main>
+    </div>
+  )
+}

package/templates/app/superadmin/layout.tsx

@@ -0,0 +1,67 @@
+import { SuperAdminGuard } from "@nextsparkjs/core/components/app/guards/SuperAdminGuard";
+import { SuperadminSidebar } from "@nextsparkjs/core/components/superadmin/layouts/SuperadminSidebar";
+import { Metadata } from "next";
+import { getTemplateOrDefault, getMetadataOrDefault } from '@nextsparkjs/core/lib/template-resolver'
+
+const defaultMetadata: Metadata = {
+  title: "Super Admin | Super Admin Panel",
+  description: "Super administrator control panel",
+  robots: "noindex, nofollow", // Prevent search engine indexing
+};
+
+export const metadata: Metadata = getMetadataOrDefault(
+  'app/superadmin/layout.tsx',
+  defaultMetadata
+)
+
+interface SuperadminLayoutProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Superadmin Layout
+ *
+ * Protected layout for superadmin-only sections with dedicated sidebar navigation.
+ * Applies SuperAdminGuard protection to all child routes.
+ * Includes responsive design for mobile and desktop.
+ */
+function SuperadminLayout({ children }: SuperadminLayoutProps) {
+  return (
+    <SuperAdminGuard>
+      <div className="flex h-screen bg-background" data-cy="superadmin-container">
+        {/* Sidebar - Hidden on mobile, visible on desktop */}
+        <div className="hidden lg:block">
+          <SuperadminSidebar />
+        </div>
+
+        {/* Main content area */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Mobile header for Superadmin - Only visible on mobile */}
+          <div className="lg:hidden bg-card border-b border-border p-4">
+            <div className="flex items-center gap-2">
+              <div className="flex items-center justify-center w-8 h-8 bg-red-100 rounded-lg">
+                <div className="h-5 w-5 bg-red-600 rounded-sm"></div>
+              </div>
+              <div>
+                <h1 className="text-lg font-bold text-red-600">Super Admin</h1>
+                <p className="text-xs text-muted-foreground">Super Admin Area</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Content area with scrolling */}
+          <main className="flex-1 overflow-y-auto">
+            <div className="container mx-auto p-6 max-w-7xl">
+              {children}
+            </div>
+          </main>
+        </div>
+
+        {/* Mobile sidebar overlay (future enhancement) */}
+        {/* Could add a mobile drawer/overlay sidebar here if needed */}
+      </div>
+    </SuperAdminGuard>
+  );
+}
+
+export default getTemplateOrDefault('app/superadmin/layout.tsx', SuperadminLayout)

package/templates/app/superadmin/page.tsx

@@ -0,0 +1,149 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextsparkjs/core/components/ui/card";
+import { Button } from "@nextsparkjs/core/components/ui/button";
+import { Users, BarChart3, Settings, Shield } from "lucide-react";
+import Link from "next/link";
+import { getTemplateOrDefault } from '@nextsparkjs/core/lib/template-resolver'
+import { sel } from "@nextsparkjs/core/selectors"
+
+/**
+ * Superadmin Dashboard
+ *
+ * Main dashboard for superadmin area with quick access to all sections.
+ */
+function SuperadminDashboard() {
+  const quickActions = [
+    {
+      title: "User Management",
+      description: "View and manage all users and superadministrators",
+      icon: Users,
+      href: "/superadmin/users",
+      color: "text-blue-600",
+      bgColor: "bg-blue-100",
+    },
+    {
+      title: "Analytics",
+      description: "Platform statistics and usage metrics",
+      icon: BarChart3,
+      href: "/superadmin/analytics",
+      color: "text-green-600",
+      bgColor: "bg-green-100",
+      disabled: true, // Future feature
+    },
+    {
+      title: "System Config",
+      description: "Application settings and configurations",
+      icon: Settings,
+      href: "/superadmin/config",
+      color: "text-orange-600",
+      bgColor: "bg-orange-100",
+      disabled: true, // Future feature
+    },
+  ];
+
+  return (
+    <div className="space-y-6" data-cy={sel('superadmin.dashboard.container')}>
+      {/* Header */}
+      <div className="border-b pb-6">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="flex items-center justify-center w-10 h-10 bg-red-100 rounded-lg">
+            <Shield className="h-6 w-6 text-red-600" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Super Admin Panel</h1>
+            <p className="text-muted-foreground">
+              Super Administrator Control Panel
+            </p>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-2 px-3 py-2 bg-destructive/10 border border-destructive/20 rounded-lg text-sm">
+          <Shield className="h-4 w-4 text-destructive" />
+          <span className="text-destructive font-medium">
+            Restricted Access Area - Superadmin Only
+          </span>
+        </div>
+      </div>
+
+      {/* Quick Actions Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {quickActions.map((action) => {
+          const IconComponent = action.icon;
+          
+          const CardWrapper = action.disabled ? 
+            ({ children }: { children: React.ReactNode }) => (
+              <Card className="opacity-60 cursor-not-allowed">
+                {children}
+              </Card>
+            ) :
+            ({ children }: { children: React.ReactNode }) => (
+              <Card className="hover:shadow-md transition-shadow cursor-pointer">
+                <Link href={action.href} className="block">
+                  {children}
+                </Link>
+              </Card>
+            );
+
+          return (
+            <CardWrapper key={action.title}>
+              <CardHeader className="pb-3">
+                <div className="flex items-center gap-3">
+                  <div className={`flex items-center justify-center w-10 h-10 rounded-lg ${action.bgColor}`}>
+                    <IconComponent className={`h-5 w-5 ${action.color}`} />
+                  </div>
+                  <div className="flex-1">
+                    <CardTitle className="text-lg flex items-center gap-2">
+                      {action.title}
+                      {action.disabled && (
+                        <span className="text-xs bg-muted text-muted-foreground px-2 py-1 rounded">
+                          Soon
+                        </span>
+                      )}
+                    </CardTitle>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="text-sm">
+                  {action.description}
+                </CardDescription>
+                {!action.disabled && (
+                  <Button variant="ghost" size="sm" className="mt-3 p-0 h-auto">
+                    Access Section →
+                  </Button>
+                )}
+              </CardContent>
+            </CardWrapper>
+          );
+        })}
+      </div>
+
+      {/* System Status */}
+      <Card>
+        <CardHeader>
+          <CardTitle>System Status</CardTitle>
+          <CardDescription>
+            Current platform overview
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="text-center p-4 border rounded-lg">
+              <div className="text-2xl font-bold text-green-600">Online</div>
+              <div className="text-sm text-muted-foreground">System Status</div>
+            </div>
+            <div className="text-center p-4 border rounded-lg">
+              <div className="text-2xl font-bold">v1.0.0</div>
+              <div className="text-sm text-muted-foreground">Platform Version</div>
+            </div>
+            <div className="text-center p-4 border rounded-lg">
+              <div className="text-2xl font-bold text-blue-600">Active</div>
+              <div className="text-sm text-muted-foreground">Security Level</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default getTemplateOrDefault('app/superadmin/page.tsx', SuperadminDashboard)