add icons in stack builder

2025-10-12 23:52:15 +00:00 · 2025-04-20 10:45:18 +05:30
parent 1e4bd56501
commit f56a2865fb
29 changed files with 202 additions and 71 deletions
--- a/apps/web/src/app/(home)/_components/StackArchitech.tsx
+++ b/apps/web/src/app/(home)/_components/StackArchitech.tsx
@@ -19,6 +19,7 @@ import {
 	Terminal,
 } from "lucide-react";
 import { motion } from "motion/react";
+import Image from "next/image";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

 const validateProjectName = (name: string): string | undefined => {
@@ -72,6 +73,29 @@ const hasPWACompatibleFrontend = (frontend: string[]) =>

 const hasNativeFrontend = (frontend: string[]) => frontend.includes("native");

+const TechIcon = ({
+	icon,
+	name,
+	className,
+}: { icon: string; name: string; className?: string }) => {
+	if (icon.startsWith("/icon/")) {
+		return (
+			<Image
+				src={icon}
+				alt={`${name} icon`}
+				width={20}
+				height={20}
+				className={`inline-block ${className || ""}`}
+				unoptimized
+			/>
+		);
+	}
+
+	return (
+		<span className={`inline-block text-lg ${className || ""}`}>{icon}</span>
+	);
+};
+
 const StackArchitect = () => {
 	const [stack, setStack] = useState<StackState>(DEFAULT_STACK);
 	const [command, setCommand] = useState("");
@@ -118,7 +142,7 @@ const StackArchitect = () => {
 		}
 	}, []);

-	// biome-ignore lint/correctness/useExhaustiveDependencies: Dependencies are logically required for validation inside updater
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		setStack((currentStack) => {
 			const nextStack = { ...currentStack };
@@ -255,7 +279,7 @@ const StackArchitect = () => {
 		}

 		const projectName = stackState.projectName || "my-better-t-app";
-		const flags: string[] = [];
+		const flags: string[] = ["--yes"];

 		const isDefault = <K extends keyof StackState>(
 			key: K,
@@ -584,6 +608,32 @@ const StackArchitect = () => {
 		(category: keyof typeof TECH_OPTIONS, techId: string): string | null => {
 			const catKey = category as keyof StackState;

+			if (
+				(catKey === "frontend" ||
+					catKey === "addons" ||
+					catKey === "examples") &&
+				Array.isArray(stack[catKey]) &&
+				(stack[catKey] as string[]).length === 1 &&
+				(stack[catKey] as string[])[0] === techId
+			) {
+				if (catKey === "frontend" && techId === "none") {
+				} else if (catKey !== "frontend") {
+				} else {
+					return "At least one frontend option must be selected.";
+				}
+			}
+
+			if (
+				!(
+					catKey === "frontend" ||
+					catKey === "addons" ||
+					catKey === "examples"
+				) &&
+				stack[catKey] === techId
+			) {
+				return "This option is currently selected.";
+			}
+
 			if (catKey === "api" && techId !== "trpc" && currentHasNativeFrontend) {
 				return "Only tRPC API is supported with React Native.";
 			}
@@ -595,6 +645,8 @@ const StackArchitect = () => {
 					return "MongoDB requires the Prisma ORM.";
 				if (stack.dbSetup === "turso" && techId === "prisma")
 					return "Turso DB setup requires the Drizzle ORM.";
+				if (techId === "none" && stack.database === "mongodb")
+					return "MongoDB requires Prisma ORM.";
 			}

 			if (catKey === "dbSetup" && techId !== "none") {
@@ -646,10 +698,7 @@ const StackArchitect = () => {
 			return null;
 		},
 		[
-			stack.database,
-			stack.orm,
-			stack.dbSetup,
-			stack.backendFramework,
+			stack,
 			currentHasNativeFrontend,
 			currentHasPWACompatibleFrontend,
 			currentHasWebFrontend,
@@ -891,9 +940,6 @@ const StackArchitect = () => {
 				</div>

 				<div className="mb-4">
-					{/* <h3 className="mb-2 font-semibold text-gray-600 text-sm dark:text-gray-400">
-						Selected Stack Summary
-					</h3> */}
 					<div className="flex flex-wrap gap-1.5">
 						{CATEGORY_ORDER.flatMap((category) => {
 							const categoryKey = category as keyof StackState;
@@ -915,9 +961,14 @@ const StackArchitect = () => {
 									.map((tech) => (
 										<span
 											key={`${category}-${tech.id}`}
-											className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs ${getBadgeColors(category)}`}
+											className={`inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs ${getBadgeColors(category)}`}
 										>
-											{tech.icon} {tech.name}
+											<TechIcon
+												icon={tech.icon}
+												name={tech.name}
+												className="h-3 w-3"
+											/>
+											{tech.name}
 										</span>
 									));
 							}
@@ -938,9 +989,14 @@ const StackArchitect = () => {
 							return (
 								<span
 									key={`${category}-${tech.id}`}
-									className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs ${getBadgeColors(category)}`}
+									className={`inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs ${getBadgeColors(category)}`}
 								>
-									{tech.icon} {tech.name}
+									<TechIcon
+										icon={tech.icon}
+										name={tech.name}
+										className="h-3 w-3"
+									/>
+									{tech.name}
 								</span>
 							);
 						})}
@@ -1018,7 +1074,7 @@ const StackArchitect = () => {
 											className={`list-inside list-disc space-y-1 text-xs ${notesInfo.hasIssue ? "text-orange-700 dark:text-orange-400" : "text-blue-700 dark:text-blue-400"}`}
 										>
 											{notesInfo.notes.map((note, index) => (
-												// biome-ignore lint/suspicious/noArrayIndexKey: Static notes per render
+												// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
 												<li key={index}>{note}</li>
 											))}
 										</ul>
@@ -1086,9 +1142,11 @@ const StackArchitect = () => {
 													<div className="flex-grow">
 														<div className="flex items-center justify-between">
 															<div className="flex items-center">
-																<span className="mr-2 text-lg">
-																	{tech.icon}
-																</span>
+																<TechIcon
+																	icon={tech.icon}
+																	name={tech.name}
+																	className="mr-2 h-5 w-5"
+																/>
 																<span
 																	className={`font-medium ${
 																		isSelected
--- a/apps/web/src/app/global.css
+++ b/apps/web/src/app/global.css
@@ -70,24 +70,3 @@
 		background-position: 200% 50%;
 	}
 }
-
-/* custom scrollbar */
-/* ::-webkit-scrollbar {
-	width: 8px;
-}
-
-::-webkit-scrollbar-track {
-	background: rgba(16, 0, 16, 0.493);
-	border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-	background: linear-gradient(45deg, #666, #888);
-	border-radius: 4px;
-	border: 2px solid #1a1a1a;
-	transition: background 0.3s ease;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background: linear-gradient(45deg, #888, #aaa);
-} */
--- a/apps/web/src/lib/constant.ts
+++ b/apps/web/src/lib/constant.ts
@@ -4,7 +4,7 @@ export const TECH_OPTIONS = {
 			id: "trpc",
 			name: "tRPC",
 			description: "End-to-end typesafe APIs",
-			icon: "🔗",
+			icon: "/icon/trpc.svg",
 			color: "from-blue-500 to-blue-700",
 			default: true,
 		},
@@ -21,7 +21,7 @@ export const TECH_OPTIONS = {
 			id: "tanstack-router",
 			name: "TanStack Router",
 			description: "Modern type-safe router for React",
-			icon: "🌐",
+			icon: "/icon/tanstack.svg",
 			color: "from-blue-400 to-blue-600",
 			default: true,
 		},
@@ -29,7 +29,7 @@ export const TECH_OPTIONS = {
 			id: "react-router",
 			name: "React Router",
 			description: "Declarative routing for React",
-			icon: "🧭",
+			icon: "/icon/react-router.svg",
 			color: "from-cyan-400 to-cyan-600",
 			default: false,
 		},
@@ -37,7 +37,7 @@ export const TECH_OPTIONS = {
 			id: "tanstack-start",
 			name: "TanStack Start",
 			description: "Quick starter template from TanStack",
-			icon: "🚀",
+			icon: "/icon/tanstack.svg",
 			color: "from-purple-400 to-purple-600",
 			default: false,
 		},
@@ -45,7 +45,7 @@ export const TECH_OPTIONS = {
 			id: "next",
 			name: "Next.js",
 			description: "React framework with hybrid rendering",
-			icon: "▲",
+			icon: "/icon/nextjs.svg",
 			color: "from-gray-700 to-black",
 			default: false,
 		},
@@ -53,7 +53,7 @@ export const TECH_OPTIONS = {
 			id: "native",
 			name: "React Native",
 			description: "Expo with NativeWind",
-			icon: "📱",
+			icon: "/icon/expo.svg",
 			color: "from-purple-400 to-purple-600",
 			default: false,
 		},
@@ -61,7 +61,7 @@ export const TECH_OPTIONS = {
 			id: "none",
 			name: "No Frontend",
 			description: "API-only backend",
-			icon: "⚙️",
+			icon: "⚙️", // Keep emoji for missing icon
 			color: "from-gray-400 to-gray-600",
 			default: false,
 		},
@@ -71,7 +71,7 @@ export const TECH_OPTIONS = {
 			id: "bun",
 			name: "Bun",
 			description: "Fast JavaScript runtime & toolkit",
-			icon: "🥟",
+			icon: "/icon/bun.svg",
 			color: "from-amber-400 to-amber-600",
 			default: true,
 		},
@@ -79,7 +79,7 @@ export const TECH_OPTIONS = {
 			id: "node",
 			name: "Node.js",
 			description: "JavaScript runtime environment",
-			icon: "🟩",
+			icon: "/icon/node.svg",
 			color: "from-green-400 to-green-600",
 		},
 	],
@@ -88,7 +88,7 @@ export const TECH_OPTIONS = {
 			id: "hono",
 			name: "Hono",
 			description: "Ultrafast web framework",
-			icon: "⚡",
+			icon: "/icon/hono.svg",
 			color: "from-blue-500 to-blue-700",
 			default: true,
 		},
@@ -96,21 +96,21 @@ export const TECH_OPTIONS = {
 			id: "next",
 			name: "Next.js",
 			description: "App Router and API Routes",
-			icon: "▲",
+			icon: "/icon/nextjs.svg",
 			color: "from-gray-700 to-black",
 		},
 		{
 			id: "elysia",
 			name: "Elysia",
 			description: "TypeScript web framework",
-			icon: "🦊",
+			icon: "/icon/elysia.svg",
 			color: "from-purple-500 to-purple-700",
 		},
 		{
 			id: "express",
 			name: "Express",
 			description: "Popular Node.js framework",
-			icon: "🚂",
+			icon: "/icon/express.svg",
 			color: "from-gray-500 to-gray-700",
 		},
 	],
@@ -119,7 +119,7 @@ export const TECH_OPTIONS = {
 			id: "sqlite",
 			name: "SQLite",
 			description: "File-based SQL database",
-			icon: "🗃️",
+			icon: "/icon/sqlite.svg",
 			color: "from-blue-400 to-cyan-500",
 			default: true,
 		},
@@ -127,21 +127,21 @@ export const TECH_OPTIONS = {
 			id: "postgres",
 			name: "PostgreSQL",
 			description: "Advanced SQL database",
-			icon: "🐘",
+			icon: "/icon/postgres.svg",
 			color: "from-indigo-400 to-indigo-600",
 		},
 		{
 			id: "mysql",
 			name: "MySQL",
 			description: "Popular relational database",
-			icon: "🐬",
+			icon: "/icon/mysql.svg",
 			color: "from-blue-500 to-blue-700",
 		},
 		{
 			id: "mongodb",
 			name: "MongoDB",
 			description: "NoSQL document database",
-			icon: "🍃",
+			icon: "/icon/mongodb.svg",
 			color: "from-green-400 to-green-600",
 		},
 		{
@@ -157,7 +157,7 @@ export const TECH_OPTIONS = {
 			id: "drizzle",
 			name: "Drizzle",
 			description: "TypeScript ORM",
-			icon: "💧",
+			icon: "/icon/drizzle.svg",
 			color: "from-cyan-400 to-cyan-600",
 			default: true,
 		},
@@ -165,37 +165,44 @@ export const TECH_OPTIONS = {
 			id: "prisma",
 			name: "Prisma",
 			description: "Next-gen ORM",
-			icon: "◮",
+			icon: "/icon/prisma.svg",
 			color: "from-purple-400 to-purple-600",
 		},
+		{
+			id: "none",
+			name: "No ORM",
+			description: "Skip ORM integration",
+			icon: "🚫",
+			color: "from-gray-400 to-gray-600",
+		},
 	],
 	dbSetup: [
 		{
 			id: "turso",
 			name: "Turso",
 			description: "SQLite cloud database powered by libSQL",
-			icon: "☁️",
+			icon: "/icon/sqlite.svg",
 			color: "from-pink-400 to-pink-600",
 		},
 		{
 			id: "neon",
 			name: "Neon Postgres",
 			description: "Serverless PostgreSQL with Neon",
-			icon: "⚡",
+			icon: "/icon/neon.svg",
 			color: "from-blue-400 to-blue-600",
 		},
 		{
 			id: "prisma-postgres",
 			name: "Prisma PostgreSQL",
 			description: "Set up PostgreSQL with Prisma",
-			icon: "🐘",
+			icon: "/icon/postgres.svg",
 			color: "from-indigo-400 to-indigo-600",
 		},
 		{
 			id: "mongodb-atlas",
 			name: "MongoDB Atlas",
 			description: "Cloud MongoDB setup with Atlas",
-			icon: "🌩️",
+			icon: "/icon/mongodb.svg",
 			color: "from-green-400 to-green-600",
 		},
 		{
@@ -212,7 +219,7 @@ export const TECH_OPTIONS = {
 			id: "true",
 			name: "Better Auth",
 			description: "Simple authentication",
-			icon: "🔐",
+			icon: "/icon/better-auth.svg",
 			color: "from-green-400 to-green-600",
 			default: true,
 		},
@@ -229,21 +236,21 @@ export const TECH_OPTIONS = {
 			id: "npm",
 			name: "npm",
 			description: "Default package manager",
-			icon: "📦",
+			icon: "/icon/npm.svg",
 			color: "from-red-500 to-red-700",
 		},
 		{
 			id: "pnpm",
 			name: "pnpm",
 			description: "Fast, disk space efficient",
-			icon: "🚀",
+			icon: "/icon/pnpm.svg",
 			color: "from-orange-500 to-orange-700",
 		},
 		{
 			id: "bun",
 			name: "bun",
 			description: "All-in-one toolkit",
-			icon: "🥟",
+			icon: "/icon/bun.svg",
 			color: "from-amber-500 to-amber-700",
 			default: true,
 		},
@@ -261,7 +268,7 @@ export const TECH_OPTIONS = {
 			id: "tauri",
 			name: "Tauri",
 			description: "Desktop app support",
-			icon: "🖥️",
+			icon: "/icon/tauri.svg",
 			color: "from-amber-500 to-amber-700",
 			default: false,
 		},
@@ -269,7 +276,7 @@ export const TECH_OPTIONS = {
 			id: "starlight",
 			name: "Starlight",
 			description: "Documentation site with Astro",
-			icon: "📚",
+			icon: "/icon/astro.svg",
 			color: "from-teal-500 to-teal-700",
 			default: false,
 		},
@@ -277,7 +284,7 @@ export const TECH_OPTIONS = {
 			id: "biome",
 			name: "Biome",
 			description: "Linting & formatting",
-			icon: "🌿",
+			icon: "/icon/biome.svg",
 			color: "from-green-500 to-green-700",
 			default: false,
 		},
@@ -293,7 +300,7 @@ export const TECH_OPTIONS = {
 			id: "turborepo",
 			name: "Turborepo",
 			description: "Monorepo build system",
-			icon: "🌀",
+			icon: "/icon/turborepo.svg",
 			color: "from-gray-400 to-gray-700",
 			default: false,
 		},
@@ -321,7 +328,7 @@ export const TECH_OPTIONS = {
 			id: "true",
 			name: "Git",
 			description: "Initialize Git repository",
-			icon: "📝",
+			icon: "/icon/git.svg",
 			color: "from-gray-500 to-gray-700",
 			default: true,
 		},