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

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

@@ -1,8 +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, sans-serif;
+	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

@@ -1,3 +1,4 @@
+import type React from 'react';
 import './globals.css';
 
 export const metadata = {
@@ -12,7 +13,26 @@ export default function RootLayout({
 }) {
 	return (
 		<html lang="en">
-			<body>{children}</body>
+			<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

@@ -1,8 +1,27 @@
 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 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/standard/tsconfig.json

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

package/templates/starter/package.json

@@ -13,7 +13,7 @@
 		"react-dom": "latest"
 	},
 	"devDependencies": {
-		"tailwindcss": "^3.4.0",
+		"tailwindcss": "^4.0.0",
 		"postcss": "^8.4.0",
 		"autoprefixer": "^10.4.0",
 		"@types/node": "^20.0.0",

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

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

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

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