@nextsparkjs/core 0.1.0-beta.1

package/dist/presets/theme/migrations/README.md

@@ -0,0 +1,57 @@
+# Theme Migrations
+
+This directory contains SQL migrations specific to this theme.
+
+## Naming Convention
+
+```
+{order}_{description}.sql
+```
+
+- `001_` - `099_`: Schema migrations (tables, indexes, RLS)
+- `100_` - `199_`: Sample data migrations
+
+## Examples
+
+- `001_example_table.sql` - Create main entity table
+- `002_custom_team_roles.sql` - Add custom team roles to ENUM
+- `003_example_metas.sql` - Create metadata table
+- `100_example_sample_data.sql` - Insert sample data
+
+## Adding Custom Team Roles
+
+To add custom team roles (like `editor`, `moderator`, etc.):
+
+1. **Config**: Add to `teamRoles.additionalTeamRoles` in `app.config.ts`
+2. **Translations**: Add to `teams.roles.{role}` in `messages/{locale}.json`
+3. **Migration**: Add `ALTER TYPE team_role ADD VALUE` in `002_custom_team_roles.sql`
+
+See `002_custom_team_roles.sql` for the migration pattern.
+
+## Migration Structure
+
+Each migration should include:
+
+1. **DROP existing objects** (for idempotency)
+2. **CREATE TABLE** with all fields
+3. **COMMENTS** on table and columns
+4. **TRIGGER** for updatedAt
+5. **INDEXES** for performance
+6. **RLS** policies for security
+
+## Running Migrations
+
+```bash
+# Run all pending migrations
+pnpm db:migrate
+
+# Verify table structure
+pnpm db:verify
+```
+
+## Important Notes
+
+- Always include `userId` and `teamId` for team isolation
+- Enable RLS on all tables
+- Use `gen_random_uuid()::text` for ID generation
+- Include proper constraints and checks

package/dist/presets/theme/public/brand/.gitkeep

@@ -0,0 +1,8 @@
+# Brand Assets Directory
+#
+# Place your brand assets here:
+# - logo.png / logo.svg
+# - favicon.ico
+# - og-image.png (for social sharing)
+#
+# These will be copied to public/theme/brand/ during build.

package/dist/presets/theme/styles/components.css

@@ -0,0 +1,101 @@
+/**
+ * {{THEME_DISPLAY_NAME}} Theme - Component Styles
+ *
+ * Custom styles for theme-specific components.
+ * Use this file to add component-level overrides.
+ *
+ * Prefer using CSS custom properties for consistency:
+ * - hsl(var(--primary))
+ * - hsl(var(--background))
+ * - var(--radius)
+ */
+
+/* =============================================
+   BUTTON OVERRIDES
+   ============================================= */
+/*
+.btn-custom {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-radius: var(--radius);
+}
+*/
+
+/* =============================================
+   CARD OVERRIDES
+   ============================================= */
+/*
+.card-custom {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+}
+*/
+
+/* =============================================
+   SIDEBAR OVERRIDES
+   ============================================= */
+/*
+[data-sidebar="sidebar"] {
+  background: hsl(var(--sidebar-background));
+}
+*/
+
+/* =============================================
+   FORM OVERRIDES
+   ============================================= */
+/*
+.form-input-custom {
+  border-color: hsl(var(--input));
+  border-radius: var(--radius);
+}
+
+.form-input-custom:focus {
+  ring: 2px solid hsl(var(--ring));
+}
+*/
+
+/* =============================================
+   TABLE OVERRIDES
+   ============================================= */
+/*
+.table-custom th {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+.table-custom tr:hover {
+  background: hsl(var(--accent));
+}
+*/
+
+/* =============================================
+   ANIMATION OVERRIDES
+   ============================================= */
+/*
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+*/
+
+/* =============================================
+   RESPONSIVE OVERRIDES
+   ============================================= */
+/*
+@media (max-width: 768px) {
+  .mobile-full-width {
+    width: 100%;
+  }
+}
+*/
+
+/* =============================================
+   THEME-SPECIFIC COMPONENTS
+   Add your custom component styles below
+   ============================================= */

package/dist/presets/theme/styles/globals.css

@@ -0,0 +1,158 @@
+/**
+ * {{THEME_DISPLAY_NAME}} Theme - Global Styles
+ *
+ * CSS Variables for light and dark modes.
+ * These override the core theme values.
+ *
+ * Color format: HSL values without hsl() wrapper
+ * Example: --primary: 220 70% 50%;
+ *
+ * For OKLCH colors (recommended), use theme.config.ts instead.
+ */
+
+/* =============================================
+   LIGHT MODE
+   ============================================= */
+:root {
+  /* Background & Foreground */
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  /* Card */
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  /* Popover */
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  /* Primary - Main brand color */
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+
+  /* Secondary */
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  /* Muted */
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  /* Accent */
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  /* Destructive */
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  /* Border, Input, Ring */
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+
+  /* Chart Colors */
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+
+  /* Sidebar */
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 240 5.9% 90%;
+  --sidebar-ring: 240 5.9% 10%;
+
+  /* Radius */
+  --radius: 0.5rem;
+}
+
+/* =============================================
+   DARK MODE
+   ============================================= */
+.dark {
+  /* Background & Foreground */
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+
+  /* Card */
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  /* Popover */
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  /* Primary */
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+
+  /* Secondary */
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  /* Muted */
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+
+  /* Accent */
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+
+  /* Destructive */
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  /* Border, Input, Ring */
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+
+  /* Chart Colors */
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+
+  /* Sidebar */
+  --sidebar-background: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 0 0% 98%;
+  --sidebar-primary-foreground: 240 5.9% 10%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 240 4.9% 83.9%;
+}
+
+/* =============================================
+   CUSTOM THEME STYLES
+   Add your custom global styles below
+   ============================================= */
+
+/* Example: Custom scrollbar */
+/*
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: var(--radius);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+*/

package/dist/presets/theme/templates/(public)/layout.tsx

@@ -0,0 +1,31 @@
+import { PublicNavbar } from '@/core/components/app/layouts/PublicNavbar'
+import { PublicFooter } from '@/core/components/app/layouts/PublicFooter'
+
+/**
+ * Public Layout Template
+ *
+ * This layout wraps all public-facing pages (landing, pricing, support, etc.)
+ * It includes the public navigation bar and footer.
+ *
+ * Customize this layout to match your theme's public pages design.
+ */
+function PublicLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      {/* Public Navbar */}
+      <PublicNavbar />
+
+      {/* Main Content */}
+      <main className="flex-1">{children}</main>
+
+      {/* Public Footer */}
+      <PublicFooter />
+    </div>
+  )
+}
+
+export default PublicLayout

package/dist/presets/theme/templates/(public)/page.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import Link from 'next/link'
+import { Button } from '@/core/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/core/components/ui/card'
+import { Badge } from '@/core/components/ui/badge'
+
+import { useAuth } from '@/core/hooks/useAuth'
+import { useTranslations } from 'next-intl'
+import { CheckCircle2, Zap, Lock, Layers } from 'lucide-react'
+
+/**
+ * Home Page Template
+ *
+ * This is the main landing page for your application.
+ * Customize the content, features list, and calls to action.
+ */
+function Home() {
+  const { user, isLoading } = useAuth()
+  const t = useTranslations('home')
+
+  const features = [
+    { name: t('features.protectedRoutes'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.emailVerification'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.entityManagement'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.themeSupport'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.i18nSystem'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.colorMode'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+  ]
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
+      <div className="container max-w-7xl mx-auto px-4 py-16">
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <Badge variant="secondary" className="mb-4">
+            {t('hero.badge')}
+          </Badge>
+          <h1 className="text-6xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent mb-4">
+            {t('hero.title')}
+          </h1>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            {t('hero.description')}
+          </p>
+        </div>
+
+        {/* Auth Section */}
+        {!isLoading && (
+          <Card className="mb-12 border-2">
+            <CardContent className="p-8">
+              {user ? (
+                <div className="text-center space-y-4">
+                  <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full">
+                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                    <span className="text-sm font-medium">{t('auth.authenticated')}</span>
+                  </div>
+                  <p className="text-lg">
+                    {t('auth.welcomeBack', { email: user.email })}
+                  </p>
+                  <Link href="/dashboard">
+                    <Button size="lg" className="gap-2">
+                      <Layers className="w-4 h-4" />
+                      {t('auth.goToDashboard')}
+                    </Button>
+                  </Link>
+                </div>
+              ) : (
+                <div className="text-center space-y-6">
+                  <h2 className="text-2xl font-semibold">{t('auth.getStarted')}</h2>
+                  <p className="text-muted-foreground">
+                    {t('auth.experience')}
+                  </p>
+                  <div className="flex justify-center gap-4">
+                    <Link href="/signup">
+                      <Button size="lg" className="gap-2">
+                        <Zap className="w-4 h-4" />
+                        {t('auth.createAccount')}
+                      </Button>
+                    </Link>
+                    <Link href="/login">
+                      <Button size="lg" variant="outline" className="gap-2">
+                        <Lock className="w-4 h-4" />
+                        {t('auth.signIn')}
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Features Card */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Zap className="w-5 h-5" />
+              {t('features.title')}
+            </CardTitle>
+            <CardDescription>
+              {t('features.description')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+              {features.map((feature, index) => (
+                <div key={index} className="flex items-center gap-2 p-3 rounded-lg bg-muted/50">
+                  {feature.icon}
+                  <span className="text-sm font-medium">{feature.name}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Footer */}
+        <div className="mt-16 text-center text-sm text-muted-foreground">
+          <p>{t('footer.builtWith')}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home

package/dist/presets/theme/templates/(public)/support/page.tsx

@@ -0,0 +1,162 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/core/components/ui/card'
+import { Button } from '@/core/components/ui/button'
+import { BookOpen, MessageCircle, Mail, HelpCircle, CheckCircle2 } from 'lucide-react'
+import Link from 'next/link'
+
+/**
+ * Support Page Template
+ *
+ * Basic support page with FAQ sections and contact options.
+ * Customize the content to match your application's support needs.
+ */
+function SupportPage() {
+  const quickLinks = [
+    {
+      title: 'Getting Started',
+      description: 'Learn the basics of using our platform',
+      icon: <BookOpen className="h-6 w-6" />,
+      items: ['Creating your account', 'Setting up your profile', 'First steps tutorial'],
+    },
+    {
+      title: 'Account Management',
+      description: 'Manage your account settings and preferences',
+      icon: <HelpCircle className="h-6 w-6" />,
+      items: ['Profile settings', 'Password management', 'Email preferences'],
+    },
+  ]
+
+  const faqs = [
+    {
+      question: 'How do I change my password?',
+      answer: 'Go to Dashboard > Settings > Password. Enter your current password and then the new password twice to confirm.',
+    },
+    {
+      question: 'Can I switch to dark mode?',
+      answer: 'Yes! Use the moon/sun button in the top right corner of any page to toggle between light and dark mode.',
+    },
+    {
+      question: 'How do I contact support?',
+      answer: 'You can contact us via email at support@example.com or using the live chat during business hours.',
+    },
+  ]
+
+  const contactOptions = [
+    {
+      title: 'Email Support',
+      description: 'Get help via email within 24 hours',
+      icon: <Mail className="h-6 w-6" />,
+      action: 'support@example.com',
+      link: 'mailto:support@example.com',
+    },
+    {
+      title: 'Live Chat',
+      description: 'Chat with our support team',
+      icon: <MessageCircle className="h-6 w-6" />,
+      action: 'Start Chat',
+      link: '#',
+    },
+    {
+      title: 'Documentation',
+      description: 'Browse our complete documentation',
+      icon: <BookOpen className="h-6 w-6" />,
+      action: 'View Docs',
+      link: '/docs',
+    },
+  ]
+
+  return (
+    <div className="container max-w-7xl mx-auto px-4 py-8">
+      {/* Hero Section */}
+      <div className="text-center mb-12">
+        <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium mb-4">
+          <HelpCircle className="h-4 w-4" />
+          Support Center
+        </div>
+        <h1 className="text-4xl font-bold mb-4">How can we help you?</h1>
+        <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+          Find answers to your questions, learn how to use the platform, and contact our support team.
+        </p>
+      </div>
+
+      {/* Quick Start Guide */}
+      <div className="mb-12">
+        <h2 className="text-2xl font-bold mb-6">Quick Start Guides</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {quickLinks.map((section, index) => (
+            <Card key={index} className="h-full">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-primary/10 rounded-lg text-primary">{section.icon}</div>
+                  <div>
+                    <CardTitle className="text-lg">{section.title}</CardTitle>
+                    <CardDescription>{section.description}</CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2">
+                  {section.items.map((item, itemIndex) => (
+                    <li key={itemIndex} className="flex items-center gap-2 text-sm">
+                      <CheckCircle2 className="h-4 w-4 text-green-500" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* FAQ Section */}
+      <div className="mb-12">
+        <h2 className="text-2xl font-bold mb-6">Frequently Asked Questions</h2>
+        <div className="space-y-4">
+          {faqs.map((faq, index) => (
+            <Card key={index}>
+              <CardHeader>
+                <CardTitle className="text-lg">{faq.question}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-muted-foreground">{faq.answer}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* Contact Support */}
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold mb-6">Need more help?</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {contactOptions.map((option, index) => (
+            <Card key={index} className="text-center">
+              <CardHeader>
+                <div className="flex justify-center mb-3">
+                  <div className="p-3 bg-primary/10 rounded-full text-primary">{option.icon}</div>
+                </div>
+                <CardTitle className="text-lg">{option.title}</CardTitle>
+                <CardDescription>{option.description}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button asChild className="w-full">
+                  <Link href={option.link}>{option.action}</Link>
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* Back to App */}
+      <div className="text-center">
+        <p className="text-muted-foreground mb-4">Ready to continue using the application?</p>
+        <Button asChild>
+          <Link href="/dashboard">Back to Dashboard</Link>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default SupportPage

package/dist/presets/theme/tests/cypress/.gitkeep

@@ -0,0 +1,10 @@
+# Cypress Tests Directory
+#
+# Structure your tests as:
+# tests/
+# └── cypress/
+#     ├── e2e/
+#     │   ├── api/        # API tests
+#     │   └── ui/         # UI tests
+#     ├── fixtures/       # Test data
+#     └── src/            # Page Object Models