mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
957 lines
29 KiB
TypeScript
957 lines
29 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
DEFAULT_STACK,
|
|
PRESET_TEMPLATES,
|
|
type StackState,
|
|
TECH_OPTIONS,
|
|
} from "@/lib/constant";
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
Check,
|
|
Circle,
|
|
CircleCheck,
|
|
ClipboardCopy,
|
|
HelpCircle,
|
|
InfoIcon,
|
|
RefreshCw,
|
|
Settings,
|
|
Star,
|
|
Terminal,
|
|
} from "lucide-react";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
|
|
const validateProjectName = (name: string): string | undefined => {
|
|
const INVALID_CHARS = ["<", ">", ":", '"', "|", "?", "*"];
|
|
const MAX_LENGTH = 255;
|
|
|
|
if (name === ".") return undefined;
|
|
|
|
if (!name) return "Project name cannot be empty";
|
|
if (name.length > MAX_LENGTH) {
|
|
return `Project name must be less than ${MAX_LENGTH} characters`;
|
|
}
|
|
if (INVALID_CHARS.some((char) => name.includes(char))) {
|
|
return "Project name contains invalid characters";
|
|
}
|
|
if (name.startsWith(".") || name.startsWith("-")) {
|
|
return "Project name cannot start with a dot or dash";
|
|
}
|
|
if (
|
|
name.toLowerCase() === "node_modules" ||
|
|
name.toLowerCase() === "favicon.ico"
|
|
) {
|
|
return "Project name is reserved";
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
const StackArchitect = () => {
|
|
const [stack, setStack] = useState<StackState>(DEFAULT_STACK);
|
|
const [command, setCommand] = useState(
|
|
"npx create-better-t-stack@latest my-better-t-app --yes",
|
|
);
|
|
const [activeTab, setActiveTab] = useState("frontend");
|
|
const [copied, setCopied] = useState(false);
|
|
const [compatNotes, setCompatNotes] = useState<Record<string, string[]>>({});
|
|
const [projectNameError, setProjectNameError] = useState<string | undefined>(
|
|
undefined,
|
|
);
|
|
const [showPresets, setShowPresets] = useState(false);
|
|
const [showHelp, setShowHelp] = useState(false);
|
|
const [lastSavedStack, setLastSavedStack] = useState<StackState | null>(null);
|
|
|
|
useEffect(() => {
|
|
const savedStack = localStorage.getItem("betterTStackPreference");
|
|
if (savedStack) {
|
|
try {
|
|
const parsedStack = JSON.parse(savedStack);
|
|
setLastSavedStack(parsedStack);
|
|
} catch (e) {
|
|
console.error("Failed to parse saved stack", e);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (stack.database === "none" && stack.orm !== "none") {
|
|
setStack((prev) => ({ ...prev, orm: "none" }));
|
|
}
|
|
|
|
if (stack.database !== "postgres" || stack.orm !== "prisma") {
|
|
if (stack.prismaPostgres === "true") {
|
|
setStack((prev) => ({ ...prev, prismaPostgres: "false" }));
|
|
}
|
|
}
|
|
|
|
if (stack.database !== "sqlite" || stack.orm === "prisma") {
|
|
if (stack.turso === "true") {
|
|
setStack((prev) => ({ ...prev, turso: "false" }));
|
|
}
|
|
}
|
|
|
|
if (stack.database === "none" && stack.auth === "true") {
|
|
setStack((prev) => ({ ...prev, auth: "false" }));
|
|
}
|
|
}, [
|
|
stack.database,
|
|
stack.orm,
|
|
stack.prismaPostgres,
|
|
stack.turso,
|
|
stack.auth,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
const cmd = generateCommand(stack);
|
|
setCommand(cmd);
|
|
|
|
const notes: Record<string, string[]> = {};
|
|
const hasWebFrontend =
|
|
stack.frontend.includes("tanstack-router") ||
|
|
stack.frontend.includes("react-router");
|
|
|
|
notes.frontend = [];
|
|
|
|
notes.addons = [];
|
|
if (!hasWebFrontend) {
|
|
notes.addons.push("PWA and Tauri are only available with React Web.");
|
|
}
|
|
|
|
notes.database = [];
|
|
|
|
notes.orm = [];
|
|
if (stack.database === "none") {
|
|
notes.orm.push(
|
|
"ORM options are only available when a database is selected.",
|
|
);
|
|
}
|
|
|
|
notes.auth = [];
|
|
if (stack.database === "none") {
|
|
notes.auth.push("Authentication requires a database.");
|
|
}
|
|
|
|
notes.turso = [];
|
|
if (stack.database !== "sqlite") {
|
|
notes.turso.push(
|
|
"Turso integration is only available with SQLite database.",
|
|
);
|
|
}
|
|
if (stack.orm === "prisma") {
|
|
notes.turso.push("Turso is not compatible with Prisma ORM.");
|
|
}
|
|
|
|
notes.prismaPostgres = [];
|
|
if (stack.database !== "postgres" || stack.orm !== "prisma") {
|
|
notes.prismaPostgres.push(
|
|
"Prisma PostgreSQL setup requires PostgreSQL database with Prisma ORM.",
|
|
);
|
|
}
|
|
|
|
notes.examples = [];
|
|
if (!hasWebFrontend) {
|
|
notes.examples.push(
|
|
"Todo and AI examples are only available with React Web.",
|
|
);
|
|
}
|
|
if (stack.backendFramework === "elysia") {
|
|
notes.examples.push("AI example is only compatible with Hono backend.");
|
|
}
|
|
|
|
setCompatNotes(notes);
|
|
}, [stack]);
|
|
|
|
const generateCommand = useCallback((stackState: StackState) => {
|
|
let base: string;
|
|
if (stackState.packageManager === "npm") {
|
|
base = "npx create-better-t-stack@latest";
|
|
} else if (stackState.packageManager === "pnpm") {
|
|
base = "pnpm create better-t-stack@latest";
|
|
} else {
|
|
base = "bun create better-t-stack@latest";
|
|
}
|
|
|
|
const projectName = stackState.projectName || "my-better-t-app";
|
|
const flags: string[] = ["--yes"];
|
|
|
|
if (stackState.frontend.length === 1 && stackState.frontend[0] === "none") {
|
|
flags.push("--frontend none");
|
|
} else if (
|
|
!(
|
|
stackState.frontend.length === 1 &&
|
|
stackState.frontend[0] === "tanstack-router"
|
|
)
|
|
) {
|
|
flags.push(`--frontend ${stackState.frontend.join(" ")}`);
|
|
}
|
|
|
|
if (stackState.database !== "sqlite") {
|
|
flags.push(`--database ${stackState.database}`);
|
|
}
|
|
|
|
if (stackState.database !== "none" && stackState.orm !== "drizzle") {
|
|
flags.push(`--orm ${stackState.orm}`);
|
|
}
|
|
|
|
if (stackState.auth === "false") {
|
|
flags.push("--no-auth");
|
|
}
|
|
|
|
if (stackState.turso === "true") {
|
|
flags.push("--turso");
|
|
}
|
|
|
|
if (stackState.prismaPostgres === "true") {
|
|
flags.push("--prisma-postgres");
|
|
}
|
|
|
|
if (stackState.backendFramework !== "hono") {
|
|
flags.push(`--backend ${stackState.backendFramework}`);
|
|
}
|
|
|
|
if (stackState.runtime !== "bun") {
|
|
flags.push(`--runtime ${stackState.runtime}`);
|
|
}
|
|
|
|
if (stackState.packageManager !== "bun") {
|
|
flags.push(`--package-manager ${stackState.packageManager}`);
|
|
}
|
|
|
|
if (stackState.git === "false") {
|
|
flags.push("--no-git");
|
|
}
|
|
|
|
if (stackState.install === "false") {
|
|
flags.push("--no-install");
|
|
}
|
|
|
|
if (stackState.addons.length > 0) {
|
|
flags.push(`--addons ${stackState.addons.join(" ")}`);
|
|
}
|
|
|
|
if (stackState.examples.length > 0) {
|
|
flags.push(`--examples ${stackState.examples.join(" ")}`);
|
|
}
|
|
|
|
return `${base} ${projectName} ${flags.join(" ")}`;
|
|
}, []);
|
|
|
|
const handleTechSelect = useCallback(
|
|
(category: keyof typeof TECH_OPTIONS, techId: string) => {
|
|
setStack((prev) => {
|
|
if (category === "frontend") {
|
|
const currentSelection = [...prev.frontend];
|
|
const webTypes = ["tanstack-router", "react-router"];
|
|
|
|
if (techId === "none") {
|
|
return {
|
|
...prev,
|
|
frontend: ["none"],
|
|
examples: [],
|
|
addons: prev.addons.filter(
|
|
(addon) => addon !== "pwa" && addon !== "tauri",
|
|
),
|
|
};
|
|
}
|
|
|
|
if (currentSelection.includes(techId)) {
|
|
if (currentSelection.length === 1) {
|
|
return prev;
|
|
}
|
|
|
|
return {
|
|
...prev,
|
|
frontend: currentSelection.filter((id) => id !== techId),
|
|
};
|
|
}
|
|
|
|
let newSelection = [...currentSelection];
|
|
|
|
if (newSelection.includes("none")) {
|
|
newSelection = [];
|
|
}
|
|
|
|
if (webTypes.includes(techId)) {
|
|
newSelection = newSelection.filter((id) => !webTypes.includes(id));
|
|
}
|
|
|
|
newSelection.push(techId);
|
|
|
|
return {
|
|
...prev,
|
|
frontend: newSelection,
|
|
};
|
|
}
|
|
|
|
if (category === "addons" || category === "examples") {
|
|
const currentArray = [...(prev[category] || [])];
|
|
const index = currentArray.indexOf(techId);
|
|
const hasWebFrontend =
|
|
prev.frontend.includes("tanstack-router") ||
|
|
prev.frontend.includes("react-router");
|
|
|
|
if (index >= 0) {
|
|
currentArray.splice(index, 1);
|
|
} else {
|
|
if (
|
|
category === "examples" &&
|
|
(techId === "todo" || techId === "ai") &&
|
|
!hasWebFrontend
|
|
) {
|
|
return prev;
|
|
}
|
|
|
|
if (
|
|
category === "examples" &&
|
|
techId === "ai" &&
|
|
prev.backendFramework === "elysia"
|
|
) {
|
|
return prev;
|
|
}
|
|
|
|
if (
|
|
category === "addons" &&
|
|
(techId === "pwa" || techId === "tauri") &&
|
|
!hasWebFrontend
|
|
) {
|
|
return prev;
|
|
}
|
|
|
|
if (
|
|
category === "addons" &&
|
|
techId === "husky" &&
|
|
!currentArray.includes("biome")
|
|
) {
|
|
currentArray.push("biome");
|
|
}
|
|
|
|
currentArray.push(techId);
|
|
}
|
|
|
|
return {
|
|
...prev,
|
|
[category]: currentArray,
|
|
};
|
|
}
|
|
|
|
if (category === "database") {
|
|
if (techId === "none") {
|
|
return {
|
|
...prev,
|
|
database: techId,
|
|
orm: "none",
|
|
turso: "false",
|
|
prismaPostgres: "false",
|
|
auth: "false",
|
|
};
|
|
}
|
|
|
|
if (prev.database === "none") {
|
|
return {
|
|
...prev,
|
|
database: techId,
|
|
orm: "drizzle",
|
|
turso: techId === "sqlite" ? prev.turso : "false",
|
|
prismaPostgres:
|
|
techId === "postgres" && prev.orm === "prisma"
|
|
? prev.prismaPostgres
|
|
: "false",
|
|
auth:
|
|
hasWebFrontend(prev.frontend) ||
|
|
prev.frontend.includes("native")
|
|
? "true"
|
|
: "false",
|
|
};
|
|
}
|
|
|
|
const updatedState = {
|
|
...prev,
|
|
database: techId,
|
|
};
|
|
|
|
if (techId === "sqlite") {
|
|
updatedState.prismaPostgres = "false";
|
|
} else if (techId === "postgres" && prev.orm === "prisma") {
|
|
} else {
|
|
updatedState.turso = "false";
|
|
}
|
|
|
|
return updatedState;
|
|
}
|
|
|
|
if (category === "orm") {
|
|
if (prev.database === "none") {
|
|
return prev;
|
|
}
|
|
|
|
const updatedState = {
|
|
...prev,
|
|
orm: techId,
|
|
};
|
|
|
|
if (techId === "prisma") {
|
|
updatedState.turso = "false";
|
|
if (prev.database === "postgres") {
|
|
} else {
|
|
updatedState.prismaPostgres = "false";
|
|
}
|
|
} else if (techId === "drizzle" || techId === "none") {
|
|
updatedState.prismaPostgres = "false";
|
|
}
|
|
|
|
return updatedState;
|
|
}
|
|
|
|
if (
|
|
category === "turso" &&
|
|
(prev.database !== "sqlite" || prev.orm === "prisma")
|
|
) {
|
|
return prev;
|
|
}
|
|
|
|
if (
|
|
category === "prismaPostgres" &&
|
|
(prev.database !== "postgres" || prev.orm !== "prisma")
|
|
) {
|
|
return prev;
|
|
}
|
|
|
|
if (
|
|
category === "auth" &&
|
|
prev.database === "none" &&
|
|
techId === "true"
|
|
) {
|
|
return prev;
|
|
}
|
|
|
|
return {
|
|
...prev,
|
|
[category]: techId,
|
|
};
|
|
});
|
|
},
|
|
[],
|
|
);
|
|
|
|
const hasWebFrontend = useCallback((frontendOptions: string[]) => {
|
|
return (
|
|
frontendOptions.includes("tanstack-router") ||
|
|
frontendOptions.includes("react-router") ||
|
|
frontendOptions.includes("native")
|
|
);
|
|
}, []);
|
|
|
|
const copyToClipboard = useCallback(() => {
|
|
navigator.clipboard.writeText(command);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}, [command]);
|
|
|
|
const resetStack = useCallback(() => {
|
|
setStack(DEFAULT_STACK);
|
|
setActiveTab("frontend");
|
|
}, []);
|
|
|
|
const saveCurrentStack = useCallback(() => {
|
|
localStorage.setItem("betterTStackPreference", JSON.stringify(stack));
|
|
setLastSavedStack(stack);
|
|
const saveMessage = document.createElement("div");
|
|
saveMessage.textContent = "Stack preferences saved!";
|
|
saveMessage.className =
|
|
"fixed bottom-4 right-4 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg z-50";
|
|
document.body.appendChild(saveMessage);
|
|
setTimeout(() => {
|
|
document.body.removeChild(saveMessage);
|
|
}, 3000);
|
|
}, [stack]);
|
|
|
|
const loadSavedStack = useCallback(() => {
|
|
if (lastSavedStack) {
|
|
setStack(lastSavedStack);
|
|
}
|
|
}, [lastSavedStack]);
|
|
|
|
const applyPreset = useCallback((presetId: string) => {
|
|
const preset = PRESET_TEMPLATES.find(
|
|
(template) => template.id === presetId,
|
|
);
|
|
if (preset) {
|
|
setStack(preset.stack);
|
|
setShowPresets(false);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div className="mx-auto w-full">
|
|
<div className="overflow-hidden rounded-xl border border-gray-300 bg-gray-100 text-gray-800 shadow-xl dark:border-gray-700 dark:bg-gray-900 dark:text-white">
|
|
<div className="flex items-center justify-between bg-gray-200 px-4 py-2 dark:bg-gray-800">
|
|
<div className="flex space-x-2">
|
|
<div className="h-3 w-3 rounded-full bg-red-500" />
|
|
<div className="h-3 w-3 rounded-full bg-yellow-500" />
|
|
<div className="h-3 w-3 rounded-full bg-green-500" />
|
|
</div>
|
|
<div className="font-mono text-gray-600 text-xs dark:text-gray-400">
|
|
Stack Architect Terminal
|
|
</div>
|
|
<div className="flex space-x-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowHelp(!showHelp)}
|
|
className="text-gray-600 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
|
|
title="Help"
|
|
>
|
|
<HelpCircle className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPresets(!showPresets)}
|
|
className="text-gray-600 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
|
|
title="Presets"
|
|
>
|
|
<Star className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={copyToClipboard}
|
|
className="text-gray-600 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
|
|
title="Copy command"
|
|
>
|
|
{copied ? (
|
|
<Check className="h-4 w-4" />
|
|
) : (
|
|
<ClipboardCopy className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{showHelp && (
|
|
<div className="border-gray-300 border-b bg-blue-50 p-4 dark:border-gray-700 dark:bg-blue-900/20">
|
|
<h3 className="mb-2 font-medium text-blue-800 dark:text-blue-300">
|
|
How to Use Stack Architect
|
|
</h3>
|
|
<ul className="list-disc space-y-1 pl-5 text-blue-700 text-sm dark:text-blue-400">
|
|
<li>
|
|
Select your preferred technologies from each category using the
|
|
tabs below
|
|
</li>
|
|
<li>
|
|
The command will automatically update based on your selections
|
|
</li>
|
|
<li>
|
|
Click the copy button to copy the command to your clipboard
|
|
</li>
|
|
<li>
|
|
You can reset to defaults or choose from presets for quick setup
|
|
</li>
|
|
<li>Save your preferences to load them later when you return</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{showPresets && (
|
|
<div className="border-gray-300 border-b bg-amber-50 p-4 dark:border-gray-700 dark:bg-amber-900/20">
|
|
<h3 className="mb-2 font-medium text-amber-800 dark:text-amber-300">
|
|
Quick Start Presets
|
|
</h3>
|
|
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
|
{PRESET_TEMPLATES.map((preset) => (
|
|
<button
|
|
type="button"
|
|
key={preset.id}
|
|
onClick={() => applyPreset(preset.id)}
|
|
className="rounded border border-amber-200 p-2 text-left transition-colors hover:bg-amber-100 dark:border-amber-700 dark:hover:bg-amber-800/30"
|
|
>
|
|
<div className="font-medium text-amber-700 dark:text-amber-300">
|
|
{preset.name}
|
|
</div>
|
|
<div className="text-amber-600 text-xs dark:text-amber-400">
|
|
{preset.description}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="p-4 font-mono">
|
|
<div className="mb-4 flex items-start justify-between">
|
|
<label className="flex flex-col">
|
|
<span className="mb-1 text-gray-600 text-xs dark:text-gray-400">
|
|
Project Name:
|
|
</span>
|
|
<div className="flex items-center">
|
|
<input
|
|
type="text"
|
|
value={stack.projectName || ""}
|
|
onChange={(e) => {
|
|
const newValue = e.target.value;
|
|
setStack((prev) => ({ ...prev, projectName: newValue }));
|
|
setProjectNameError(validateProjectName(newValue));
|
|
}}
|
|
className={`border bg-gray-200 dark:bg-gray-800 ${
|
|
projectNameError
|
|
? "border-red-500 dark:border-red-500"
|
|
: "border-gray-300 dark:border-gray-700"
|
|
} rounded px-2 py-1 font-mono text-sm focus:border-blue-500 focus:outline-none dark:focus:border-blue-400`}
|
|
placeholder="my-better-t-app"
|
|
/>
|
|
</div>
|
|
{projectNameError && (
|
|
<p className="mt-1 text-red-500 text-xs">{projectNameError}</p>
|
|
)}
|
|
</label>
|
|
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={resetStack}
|
|
className="flex items-center gap-1 rounded border border-gray-300 bg-gray-200 px-2 py-1 text-gray-700 text-xs hover:bg-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
|
|
title="Reset to defaults"
|
|
>
|
|
<RefreshCw className="h-3 w-3" />
|
|
Reset
|
|
</button>
|
|
|
|
{lastSavedStack && (
|
|
<button
|
|
type="button"
|
|
onClick={loadSavedStack}
|
|
className="flex items-center gap-1 rounded border border-blue-300 bg-blue-100 px-2 py-1 text-blue-700 text-xs hover:bg-blue-200 dark:border-blue-700 dark:bg-blue-900/50 dark:text-blue-300 dark:hover:bg-blue-800/50"
|
|
title="Load saved preferences"
|
|
>
|
|
<Settings className="h-3 w-3" />
|
|
Load Saved
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={saveCurrentStack}
|
|
className="flex items-center gap-1 rounded border border-green-300 bg-green-100 px-2 py-1 text-green-700 text-xs hover:bg-green-200 dark:border-green-700 dark:bg-green-900/50 dark:text-green-300 dark:hover:bg-green-800/50"
|
|
title="Save current preferences"
|
|
>
|
|
<Star className="h-3 w-3" />
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="mb-4">
|
|
<div className="flex">
|
|
<span className="mr-2 text-green-600 dark:text-green-400">$</span>
|
|
<code className="text-gray-700 dark:text-gray-300">
|
|
{command}
|
|
</code>
|
|
</div>
|
|
</div>
|
|
{compatNotes[activeTab] && compatNotes[activeTab].length > 0 && (
|
|
<div className="mb-4 rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
|
|
<div className="mb-2 flex items-center gap-2 font-medium text-blue-800 text-sm dark:text-blue-300">
|
|
<InfoIcon className="h-4 w-4" />
|
|
<span>Compatibility Notes</span>
|
|
</div>
|
|
<ul className="list-inside list-disc space-y-1 text-blue-700 text-xs dark:text-blue-400">
|
|
{compatNotes[activeTab].map((note) => (
|
|
<li key={note}>{note}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
<div className="border-gray-300 border-t pt-4 dark:border-gray-700">
|
|
<div className="mb-3 flex items-center text-gray-600 dark:text-gray-400">
|
|
<Terminal className="mr-2 h-4 w-4" />
|
|
<span>
|
|
Configure{" "}
|
|
{activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mb-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
|
{TECH_OPTIONS[activeTab as keyof typeof TECH_OPTIONS].map(
|
|
(tech) => {
|
|
let isSelected = false;
|
|
if (activeTab === "addons" || activeTab === "examples") {
|
|
isSelected = stack[activeTab].includes(tech.id);
|
|
} else if (activeTab === "frontend") {
|
|
isSelected = stack.frontend.includes(tech.id);
|
|
} else {
|
|
isSelected =
|
|
stack[activeTab as keyof StackState] === tech.id;
|
|
}
|
|
|
|
const hasWebFrontendSelected =
|
|
stack.frontend.includes("tanstack-router") ||
|
|
stack.frontend.includes("react-router");
|
|
|
|
const isDisabled =
|
|
(activeTab === "orm" && stack.database === "none") ||
|
|
(activeTab === "turso" &&
|
|
(stack.database !== "sqlite" ||
|
|
stack.orm === "prisma")) ||
|
|
(activeTab === "prismaPostgres" &&
|
|
(stack.database !== "postgres" ||
|
|
stack.orm !== "prisma")) ||
|
|
(activeTab === "examples" &&
|
|
(((tech.id === "todo" || tech.id === "ai") &&
|
|
!hasWebFrontendSelected) ||
|
|
(tech.id === "ai" &&
|
|
stack.backendFramework === "elysia"))) ||
|
|
(activeTab === "addons" &&
|
|
(tech.id === "pwa" || tech.id === "tauri") &&
|
|
!hasWebFrontendSelected) ||
|
|
(activeTab === "auth" &&
|
|
tech.id === "true" &&
|
|
stack.database === "none");
|
|
|
|
const compatNote = isDisabled
|
|
? compatNotes[activeTab]?.find((note) =>
|
|
note.toLowerCase().includes(tech.name.toLowerCase()),
|
|
)
|
|
: null;
|
|
|
|
return (
|
|
<motion.div
|
|
key={tech.id}
|
|
className={`rounded p-2 px-3${
|
|
isDisabled
|
|
? " cursor-not-allowed opacity-50"
|
|
: " cursor-pointer"
|
|
}
|
|
${
|
|
isSelected
|
|
? "border border-blue-300 bg-blue-100 dark:border-blue-500/50 dark:bg-blue-900/40"
|
|
: "border border-gray-300 hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
|
|
}
|
|
`}
|
|
title={
|
|
isDisabled
|
|
? compatNote ||
|
|
"Option not available with current selection"
|
|
: tech.description
|
|
}
|
|
whileHover={!isDisabled ? { scale: 1.02 } : undefined}
|
|
whileTap={!isDisabled ? { scale: 0.98 } : undefined}
|
|
onClick={() =>
|
|
!isDisabled &&
|
|
handleTechSelect(
|
|
activeTab as keyof typeof TECH_OPTIONS,
|
|
tech.id,
|
|
)
|
|
}
|
|
>
|
|
<div className="flex items-center">
|
|
<div className="mr-2 flex-shrink-0">
|
|
{isSelected ? (
|
|
<CircleCheck className="h-4 w-4 text-blue-600 dark:text-blue-400" />
|
|
) : (
|
|
<Circle className="h-4 w-4 text-gray-400 dark:text-gray-600" />
|
|
)}
|
|
</div>
|
|
<div className="flex-grow">
|
|
<div className="flex items-center">
|
|
<span className="mr-2">{tech.icon}</span>
|
|
<span
|
|
className={
|
|
isSelected
|
|
? "text-blue-700 dark:text-blue-300"
|
|
: "text-gray-700 dark:text-gray-300"
|
|
}
|
|
>
|
|
{tech.name}
|
|
</span>
|
|
</div>
|
|
<p className="text-gray-500 text-xs">
|
|
{tech.description}
|
|
</p>
|
|
</div>
|
|
{tech.default && !isSelected && (
|
|
<span className="ml-2 text-gray-500 text-xs dark:text-gray-600">
|
|
Default
|
|
</span>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
},
|
|
)}
|
|
</div>
|
|
|
|
<div className="mb-3 border-gray-300 border-t pt-3 dark:border-gray-700">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<div className="text-gray-600 text-xs dark:text-gray-400">
|
|
Selected Stack
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
alert(
|
|
// biome-ignore lint/style/useTemplate: <explanation>
|
|
"Stack Summary:\n\n" +
|
|
Object.entries(stack)
|
|
.map(([key, value]) => {
|
|
if (Array.isArray(value)) {
|
|
return `${key}: ${value.join(", ") || "none"}`;
|
|
}
|
|
return `${key}: ${value || "none"}`;
|
|
})
|
|
.join("\n"),
|
|
);
|
|
}}
|
|
className="text-blue-600 text-xs hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
Full Summary
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-wrap gap-1">
|
|
{stack.frontend.map((frontendId) => {
|
|
const frontend = TECH_OPTIONS.frontend.find(
|
|
(f) => f.id === frontendId,
|
|
);
|
|
return frontend ? (
|
|
<span
|
|
key={frontendId}
|
|
className="inline-flex items-center rounded border border-blue-300 bg-blue-100 px-1.5 py-0.5 text-blue-800 text-xs dark:border-blue-700/30 dark:bg-blue-900/30 dark:text-blue-300"
|
|
>
|
|
{frontend.icon} {frontend.name}
|
|
</span>
|
|
) : null;
|
|
})}
|
|
<span className="inline-flex items-center rounded border border-amber-300 bg-amber-100 px-1.5 py-0.5 text-amber-800 text-xs dark:border-amber-700/30 dark:bg-amber-900/30 dark:text-amber-300">
|
|
{
|
|
TECH_OPTIONS.runtime.find((t) => t.id === stack.runtime)
|
|
?.icon
|
|
}{" "}
|
|
{
|
|
TECH_OPTIONS.runtime.find((t) => t.id === stack.runtime)
|
|
?.name
|
|
}
|
|
</span>
|
|
|
|
<span className="inline-flex items-center rounded border border-blue-300 bg-blue-100 px-1.5 py-0.5 text-blue-800 text-xs dark:border-blue-700/30 dark:bg-blue-900/30 dark:text-blue-300">
|
|
{
|
|
TECH_OPTIONS.backendFramework.find(
|
|
(t) => t.id === stack.backendFramework,
|
|
)?.icon
|
|
}{" "}
|
|
{
|
|
TECH_OPTIONS.backendFramework.find(
|
|
(t) => t.id === stack.backendFramework,
|
|
)?.name
|
|
}
|
|
</span>
|
|
|
|
<span className="inline-flex items-center rounded border border-indigo-300 bg-indigo-100 px-1.5 py-0.5 text-indigo-800 text-xs dark:border-indigo-700/30 dark:bg-indigo-900/30 dark:text-indigo-300">
|
|
{
|
|
TECH_OPTIONS.database.find((t) => t.id === stack.database)
|
|
?.icon
|
|
}{" "}
|
|
{
|
|
TECH_OPTIONS.database.find((t) => t.id === stack.database)
|
|
?.name
|
|
}
|
|
</span>
|
|
|
|
{stack.orm && stack.database !== "none" && (
|
|
<span className="inline-flex items-center rounded border border-cyan-300 bg-cyan-100 px-1.5 py-0.5 text-cyan-800 text-xs dark:border-cyan-700/30 dark:bg-cyan-900/30 dark:text-cyan-300">
|
|
{TECH_OPTIONS.orm.find((t) => t.id === stack.orm)?.icon}{" "}
|
|
{TECH_OPTIONS.orm.find((t) => t.id === stack.orm)?.name}
|
|
</span>
|
|
)}
|
|
|
|
{stack.frontend[0] !== "none" &&
|
|
stack.database !== "none" &&
|
|
stack.auth === "true" && (
|
|
<span className="inline-flex items-center rounded border border-green-300 bg-green-100 px-1.5 py-0.5 text-green-800 text-xs dark:border-green-700/30 dark:bg-green-900/30 dark:text-green-300">
|
|
{TECH_OPTIONS.auth.find((t) => t.id === "true")?.icon}{" "}
|
|
{TECH_OPTIONS.auth.find((t) => t.id === "true")?.name}
|
|
</span>
|
|
)}
|
|
|
|
{stack.turso === "true" &&
|
|
stack.database === "sqlite" &&
|
|
stack.orm !== "prisma" && (
|
|
<span className="inline-flex items-center rounded border border-pink-300 bg-pink-100 px-1.5 py-0.5 text-pink-800 text-xs dark:border-pink-700/30 dark:bg-pink-900/30 dark:text-pink-300">
|
|
{
|
|
TECH_OPTIONS.turso.find((t) => t.id === stack.turso)
|
|
?.icon
|
|
}{" "}
|
|
{
|
|
TECH_OPTIONS.turso.find((t) => t.id === stack.turso)
|
|
?.name
|
|
}
|
|
</span>
|
|
)}
|
|
|
|
{stack.prismaPostgres === "true" &&
|
|
stack.database === "postgres" &&
|
|
stack.orm === "prisma" && (
|
|
<span className="inline-flex items-center rounded border border-indigo-300 bg-indigo-100 px-1.5 py-0.5 text-indigo-800 text-xs dark:border-indigo-700/30 dark:bg-indigo-900/30 dark:text-indigo-300">
|
|
{
|
|
TECH_OPTIONS.prismaPostgres.find(
|
|
(t) => t.id === stack.prismaPostgres,
|
|
)?.icon
|
|
}{" "}
|
|
{
|
|
TECH_OPTIONS.prismaPostgres.find(
|
|
(t) => t.id === stack.prismaPostgres,
|
|
)?.name
|
|
}
|
|
</span>
|
|
)}
|
|
|
|
{stack.addons.map((addonId) => {
|
|
const addon = TECH_OPTIONS.addons.find(
|
|
(a) => a.id === addonId,
|
|
);
|
|
return addon ? (
|
|
<span
|
|
key={addonId}
|
|
className="inline-flex items-center rounded border border-violet-300 bg-violet-100 px-1.5 py-0.5 text-violet-800 text-xs dark:border-violet-700/30 dark:bg-violet-900/30 dark:text-violet-300"
|
|
>
|
|
{addon.icon} {addon.name}
|
|
</span>
|
|
) : null;
|
|
})}
|
|
|
|
{stack.examples.length > 0 &&
|
|
stack.examples.map((exampleId) => {
|
|
const example = TECH_OPTIONS.examples.find(
|
|
(e) => e.id === exampleId,
|
|
);
|
|
return example ? (
|
|
<span
|
|
key={exampleId}
|
|
className="inline-flex items-center rounded border border-teal-300 bg-teal-100 px-1.5 py-0.5 text-teal-800 text-xs dark:border-teal-700/30 dark:bg-teal-900/30 dark:text-teal-300"
|
|
>
|
|
{example.icon} {example.name}
|
|
</span>
|
|
) : null;
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex overflow-x-auto border-gray-300 border-t bg-gray-200 dark:border-gray-700 dark:bg-gray-900">
|
|
{Object.keys(TECH_OPTIONS).map((category) => (
|
|
<button
|
|
type="button"
|
|
key={category}
|
|
className={`whitespace-nowrap px-4 py-2 font-mono text-xs transition-colors${
|
|
activeTab === category
|
|
? " border-blue-500 border-t-2 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
|
|
: " text-gray-600 hover:bg-gray-300 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
|
|
}
|
|
`}
|
|
onClick={() => setActiveTab(category)}
|
|
>
|
|
{category}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StackArchitect;
|