@asynx/create-asynx-next-app 1.0.3 → 1.0.6

package/templates/standard/src/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,45 @@
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+
+export default function DashboardPage() {
+	return (
+		<main className="container mx-auto p-6">
+			<h1 className="text-3xl font-bold mb-6">Dashboard</h1>
+
+			<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+				<Card>
+					<CardHeader>
+						<CardTitle>Total Users</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<p className="text-3xl font-bold">1,234</p>
+						<p className="text-sm text-muted-foreground mt-2">
+							+12% from last month
+						</p>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>Revenue</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<p className="text-3xl font-bold">$45,231</p>
+						<p className="text-sm text-muted-foreground mt-2">
+							+8% from last month
+						</p>
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>Active Sessions</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<p className="text-3xl font-bold">573</p>
+						<p className="text-sm text-muted-foreground mt-2">Live now</p>
+					</CardContent>
+				</Card>
+			</div>
+		</main>
+	);
+}

package/templates/standard/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+
+export default function DashboardLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<div className="min-h-screen flex">
+			{/* Sidebar placeholder */}
+			<aside className="w-64 border-r p-6">
+				<h2 className="text-lg font-bold mb-6">Menu</h2>
+				<nav className="space-y-2">
+					<a href="/dashboard" className="block py-2 hover:underline">
+						Dashboard
+					</a>
+					<a href="/dashboard/users" className="block py-2 hover:underline">
+						Users
+					</a>
+					<a href="/dashboard/settings" className="block py-2 hover:underline">
+						Settings
+					</a>
+				</nav>
+			</aside>
+
+			{/* Main content */}
+			<div className="flex-1">{children}</div>
+		</div>
+	);
+}

package/templates/standard/src/app/(public)/layout.tsx

@@ -0,0 +1,16 @@
+import type React from 'react';
+// Public layout - for unauthenticated pages like landing, login, signup
+// Nested layouts allow different shells for different route groups
+
+export default function PublicLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<div className="min-h-screen">
+			{/* Public pages don't need the full header/footer */}
+			{children}
+		</div>
+	);
+}

package/templates/standard/src/app/(public)/login/page.tsx

@@ -0,0 +1,33 @@
+export default function LoginPage() {
+	return (
+		<main className="min-h-screen flex items-center justify-center p-6">
+			<div className="w-full max-w-md border rounded-lg p-6">
+				<h1 className="text-2xl font-bold mb-6">Sign In</h1>
+				<form className="space-y-4">
+					<div>
+						<label className="block text-sm font-medium mb-2">Email</label>
+						<input
+							type="email"
+							className="w-full px-3 py-2 border rounded-md"
+							placeholder="you@example.com"
+						/>
+					</div>
+					<div>
+						<label className="block text-sm font-medium mb-2">Password</label>
+						<input
+							type="password"
+							className="w-full px-3 py-2 border rounded-md"
+							placeholder="••••••••"
+						/>
+					</div>
+					<button
+						type="submit"
+						className="w-full bg-foreground text-background py-2 rounded-md hover:opacity-90"
+					>
+						Sign In
+					</button>
+				</form>
+			</div>
+		</main>
+	);
+}

package/templates/standard/src/app/globals.css

@@ -0,0 +1,158 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+	--background: 0 0% 100%;
+	--foreground: 0 0% 3.9%;
+	--muted: 0 0% 96.1%;
+	--muted-foreground: 0 0% 45.1%;
+	--border: 0 0% 89.8%;
+	--radius: 0.5rem;
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(0.577 0.245 27.325);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: 0 0% 3.9%;
+	--foreground: 0 0% 98%;
+	--muted: 0 0% 14.9%;
+	--muted-foreground: 0 0% 63.9%;
+	--border: 0 0% 14.9%;
+	--card: oklch(0.145 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.145 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.985 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.396 0.141 25.723);
+	--destructive-foreground: oklch(0.637 0.237 25.331);
+	--input: oklch(0.269 0 0);
+	--ring: oklch(0.439 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(0.269 0 0);
+	--sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+	/* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	font-family: system-ui, -apple-system, sans-serif;
+	background: hsl(var(--background));
+	color: hsl(var(--foreground));
+}
+
+.container {
+	width: 100%;
+	max-width: 1280px;
+}
+
+.text-muted-foreground {
+	color: hsl(var(--muted-foreground));
+}
+
+.border {
+	border: 1px solid hsl(var(--border));
+}
+
+.border-b {
+	border-bottom: 1px solid hsl(var(--border));
+}
+
+.border-t {
+	border-top: 1px solid hsl(var(--border));
+}

package/templates/standard/src/app/layout.tsx

@@ -0,0 +1,38 @@
+import type React from 'react';
+import './globals.css';
+
+export const metadata = {
+	title: 'Asynx App',
+	description: 'Generated by create-asynx-next-app',
+};
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<html lang="en">
+			<body>
+				<div className="min-h-screen flex flex-col">
+					{/* Header placeholder - add navigation here */}
+					<header className="border-b">
+						<div className="container mx-auto px-6 py-4">
+							<h1 className="text-xl font-bold">Your App</h1>
+						</div>
+					</header>
+
+					{/* Main content area */}
+					<div className="flex-1">{children}</div>
+
+					{/* Footer placeholder */}
+					<footer className="border-t py-4">
+						<div className="container mx-auto px-6 text-center text-sm text-muted-foreground">
+							© {new Date().getFullYear()} Your Company
+						</div>
+					</footer>
+				</div>
+			</body>
+		</html>
+	);
+}

package/templates/standard/src/app/page.tsx

@@ -0,0 +1,27 @@
+export default function HomePage() {
+	return (
+		<main className="container mx-auto p-6">
+			<h1 className="text-3xl font-bold mb-2">Dashboard</h1>
+			<p className="text-muted-foreground mb-6">
+				Welcome to your Standard App template
+			</p>
+
+			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+				<div className="border rounded-lg p-4">
+					<h2 className="font-semibold mb-2">Quick Stats</h2>
+					<p className="text-sm text-muted-foreground">
+						Your metrics at a glance
+					</p>
+				</div>
+				<div className="border rounded-lg p-4">
+					<h2 className="font-semibold mb-2">Recent Activity</h2>
+					<p className="text-sm text-muted-foreground">Latest updates</p>
+				</div>
+				<div className="border rounded-lg p-4">
+					<h2 className="font-semibold mb-2">Actions</h2>
+					<p className="text-sm text-muted-foreground">Get started quickly</p>
+				</div>
+			</div>
+		</main>
+	);
+}

package/templates/standard/src/lib/api.ts

@@ -0,0 +1,37 @@
+export async function fetcher<T>(url: string): Promise<T> {
+	const response = await fetch(url);
+
+	if (!response.ok) {
+		throw new Error(`API error: ${response.status}`);
+	}
+
+	return response.json();
+}
+
+export class ApiClient {
+	private baseUrl: string;
+
+	constructor(baseUrl = '/api') {
+		this.baseUrl = baseUrl;
+	}
+
+	async get<T>(endpoint: string): Promise<T> {
+		return fetcher<T>(`${this.baseUrl}${endpoint}`);
+	}
+
+	async post<T>(endpoint: string, data: unknown): Promise<T> {
+		const response = await fetch(`${this.baseUrl}${endpoint}`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(data),
+		});
+
+		if (!response.ok) {
+			throw new Error(`API error: ${response.status}`);
+		}
+
+		return response.json();
+	}
+}
+
+export const api = new ApiClient();

package/templates/standard/src/lib/constants.ts

@@ -0,0 +1,14 @@
+export const APP_NAME = 'Your App';
+export const APP_DESCRIPTION = 'Built with Asynx Next.js';
+
+export const ROUTES = {
+	HOME: '/',
+	LOGIN: '/login',
+	DASHBOARD: '/dashboard',
+	SETTINGS: '/settings',
+} as const;
+
+export const API_ENDPOINTS = {
+	USERS: '/api/users',
+	AUTH: '/api/auth',
+} as const;

package/templates/{simple → standard}/tsconfig.json

@@ -1,11 +1,10 @@
 {
 	"compilerOptions": {
-		"target": "ES2022",
+		"target": "ES2020",
 		"lib": ["dom", "dom.iterable", "esnext"],
-		"allowJs": false,
+		"allowJs": true,
 		"skipLibCheck": true,
 		"strict": true,
-		"forceConsistentCasingInFileNames": true,
 		"noEmit": true,
 		"esModuleInterop": true,
 		"module": "esnext",
@@ -13,8 +12,16 @@
 		"resolveJsonModule": true,
 		"isolatedModules": true,
 		"jsx": "preserve",
-		"incremental": true
+		"incremental": true,
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"paths": {
+			"@/*": ["./src/*"]
+		}
 	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
 	"exclude": ["node_modules"]
 }

package/templates/{saas → starter}/package.json

@@ -13,6 +13,10 @@
 		"react-dom": "latest"
 	},
 	"devDependencies": {
+		"tailwindcss": "^4.0.0",
+		"postcss": "^8.4.0",
+		"autoprefixer": "^10.4.0",
+		"@types/node": "^20.0.0",
 		"typescript": "^5.0.0",
 		"@types/react": "^18.0.0",
 		"@types/react-dom": "^18.0.0"

package/templates/{saas → starter}/src/app/globals.css

@@ -1,3 +1,4 @@
+@import 'tailwindcss';
 * {
 	box-sizing: border-box;
 }

package/templates/{moderate → starter}/tsconfig.json

@@ -5,16 +5,22 @@
 		"allowJs": false,
 		"skipLibCheck": true,
 		"strict": true,
-		"forceConsistentCasingInFileNames": true,
 		"noEmit": true,
 		"esModuleInterop": true,
 		"module": "esnext",
 		"moduleResolution": "bundler",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve",
-		"incremental": true
+		"jsx": "react-jsx",
+		"incremental": true,
+		"plugins": [{ "name": "next" }]
 	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+	"include": [
+		"next-env.d.ts",
+		"**/*.ts",
+		"**/*.tsx",
+		".next/types/**/*.ts",
+		".next/dev/types/**/*.ts"
+	],
 	"exclude": ["node_modules"]
 }

package/templates/moderate/src/app/globals.css

@@ -1,8 +0,0 @@
-* {
-	box-sizing: border-box;
-}
-
-body {
-	margin: 0;
-	font-family: system-ui, sans-serif;
-}

package/templates/saas/src/app/layout.tsx

@@ -1,18 +0,0 @@
-import './globals.css';
-
-export const metadata = {
-	title: 'Asynx App',
-	description: 'Generated by create-asynx-next-app',
-};
-
-export default function RootLayout({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
-	return (
-		<html lang="en">
-			<body>{children}</body>
-		</html>
-	);
-}

package/templates/saas/src/app/page.tsx

@@ -1,8 +0,0 @@
-export default function HomePage() {
-	return (
-		<main style={{ padding: '2rem' }}>
-			<h1>🚀 Welcome to your Asynx Next.js App</h1>
-			<p>This project was generated using create-asynx-next-app.</p>
-		</main>
-	);
-}

package/templates/saas/tsconfig.json

@@ -1,20 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ES2022",
-		"lib": ["dom", "dom.iterable", "esnext"],
-		"allowJs": false,
-		"skipLibCheck": true,
-		"strict": true,
-		"forceConsistentCasingInFileNames": true,
-		"noEmit": true,
-		"esModuleInterop": true,
-		"module": "esnext",
-		"moduleResolution": "bundler",
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"jsx": "preserve",
-		"incremental": true
-	},
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-	"exclude": ["node_modules"]
-}

package/templates/simple/next-env.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-export {};

package/templates/simple/src/app/globals.css

@@ -1,8 +0,0 @@
-* {
-	box-sizing: border-box;
-}
-
-body {
-	margin: 0;
-	font-family: system-ui, sans-serif;
-}

package/templates/simple/src/app/layout.tsx

@@ -1,18 +0,0 @@
-import './globals.css';
-
-export const metadata = {
-	title: 'Asynx App',
-	description: 'Generated by create-asynx-next-app',
-};
-
-export default function RootLayout({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
-	return (
-		<html lang="en">
-			<body>{children}</body>
-		</html>
-	);
-}

package/templates/simple/src/app/page.tsx

@@ -1,8 +0,0 @@
-export default function HomePage() {
-	return (
-		<main style={{ padding: '2rem' }}>
-			<h1>🚀 Welcome to your Asynx Next.js App</h1>
-			<p>This project was generated using create-asynx-next-app.</p>
-		</main>
-	);
-}