rename features to addons

.changeset/early-falcons-itch.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": patch
+---
+
+rename features to addons

apps/cli/src/constants.ts

@@ -11,7 +11,7 @@ export const DEFAULT_CONFIG: ProjectConfig = {
 	database: "sqlite",
 	orm: "drizzle",
 	auth: true,
-	features: [],
+	addons: [],
 	git: true,
 	packageManager: "npm",
 	noInstall: false,

apps/cli/src/helpers/addons-setup.ts

@@ -2,21 +2,18 @@ import path from "node:path";
 import { log } from "@clack/prompts";
 import fs from "fs-extra";
 import pc from "picocolors";
-import type { ProjectFeature } from "../types";
+import type { ProjectAddons } from "../types";
 
-export async function setupFeatures(
-	projectDir: string,
-	features: ProjectFeature[],
-) {
-	if (features.includes("docker")) {
+export async function setupAddons(projectDir: string, addons: ProjectAddons[]) {
+	if (addons.includes("docker")) {
 		await setupDocker(projectDir);
 	}
 
-	if (features.includes("github-actions")) {
+	if (addons.includes("github-actions")) {
 		await setupGithubActions(projectDir);
 	}
 
-	if (features.includes("SEO")) {
+	if (addons.includes("SEO")) {
 		log.info(
 			pc.yellow(
 				"SEO feature is still a work-in-progress and will be available in a future update.",

apps/cli/src/helpers/create-project.ts

@@ -5,10 +5,10 @@ import fs from "fs-extra";
 import pc from "picocolors";
 import { PKG_ROOT } from "../constants";
 import type { ProjectConfig } from "../types";
+import { setupAddons } from "./addons-setup";
 import { configureAuth } from "./auth-setup";
 import { createReadme } from "./create-readme";
 import { setupDatabase } from "./db-setup";
-import { setupFeatures } from "./feature-setup";
 import { displayPostInstallInstructions } from "./post-installation";
 
 export async function createProject(options: ProjectConfig): Promise<string> {
@@ -92,8 +92,8 @@ export async function createProject(options: ProjectConfig): Promise<string> {
 			await $({ cwd: projectDir })`git init`;
 		}
 
-		if (options.features.length > 0) {
-			await setupFeatures(projectDir, options.features);
+		if (options.addons.length > 0) {
+			await setupAddons(projectDir, options.addons);
 		}
 
 		const packageJsonPath = path.join(projectDir, "package.json");

apps/cli/src/helpers/create-readme.ts

@@ -19,7 +19,7 @@ function generateReadmeContent(options: ProjectConfig): string {
 		packageManager,
 		database,
 		auth,
-		features = [],
+		addons = [],
 		orm = "drizzle",
 	} = options;
 
@@ -32,7 +32,7 @@ This project was created with [Better-T-Stack](https://github.com/better-t-stack
 
 ## Features
 
-${generateFeaturesList(database, auth, features, orm)}
+${generateFeaturesList(database, auth, addons, orm)}
 
 ## Getting Started
 

apps/cli/src/helpers/db-setup.ts

@@ -15,7 +15,6 @@ export async function setupDatabase(
 
 	if (databaseType === "none") {
 		await fs.remove(path.join(serverDir, "src/db"));
-		log.info(pc.yellow("Database configuration removed"));
 		return;
 	}
 

apps/cli/src/helpers/install-dependencies.ts

@@ -13,7 +13,6 @@ export async function installDependencies({
 	packageManager,
 }: InstallDependenciesOptions) {
 	const s = spinner();
-	log.info(pc.blue(`Installing dependencies using ${packageManager}...`));
 
 	try {
 		s.start(`Running ${packageManager} install...`);
@@ -34,7 +33,7 @@ export async function installDependencies({
 				break;
 		}
 
-		s.stop(pc.green("Dependencies installed successfully"));
+		s.stop("Dependencies installed successfully");
 	} catch (error) {
 		s.stop(pc.red("Failed to install dependencies"));
 		if (error instanceof Error) {

apps/cli/src/index.ts

@@ -5,7 +5,7 @@ import { DEFAULT_CONFIG } from "./constants";
 import { createProject } from "./helpers/create-project";
 import { installDependencies } from "./helpers/install-dependencies";
 import { gatherConfig } from "./prompts/config-prompts";
-import type { ProjectConfig, ProjectFeature } from "./types";
+import type { ProjectAddons, ProjectConfig } from "./types";
 import { displayConfig } from "./utils/display-config";
 import { generateReproducibleCommand } from "./utils/generate-reproducible-command";
 import { getVersion } from "./utils/get-version";
@@ -33,7 +33,7 @@ async function main() {
 		.option("--docker", "Include Docker setup")
 		.option("--github-actions", "Include GitHub Actions")
 		.option("--seo", "Include SEO setup")
-		.option("--no-features", "Skip all additional features")
+		.option("--no-addons", "Skip all additional addons")
 		.option("--git", "Include git setup")
 		.option("--no-git", "Skip git initialization")
 		.option("--npm", "Use npm package manager")
@@ -75,15 +75,15 @@ async function main() {
 			...((options.docker ||
 				options.githubActions ||
 				options.seo ||
-				options.features === false) && {
-				features:
-					options.features === false
+				options.addons === false) && {
+				addons:
+					options.addons === false
 						? []
 						: ([
 								...(options.docker ? ["docker"] : []),
 								...(options.githubActions ? ["github-actions"] : []),
 								...(options.seo ? ["SEO"] : []),
-							] as ProjectFeature[]),
+							] as ProjectAddons[]),
 			}),
 		};
 
@@ -117,9 +117,9 @@ async function main() {
 							: DEFAULT_CONFIG.noInstall,
 					packageManager:
 						flagConfig.packageManager ?? DEFAULT_CONFIG.packageManager,
-					features: flagConfig.features?.length
-						? flagConfig.features
-						: DEFAULT_CONFIG.features,
+					addons: flagConfig.addons?.length
+						? flagConfig.addons
+						: DEFAULT_CONFIG.addons,
 					turso:
 						"turso" in options
 							? options.turso

apps/cli/src/prompts/addons.ts

@@ -1,14 +1,14 @@
 import { cancel, isCancel, multiselect } from "@clack/prompts";
 import pc from "picocolors";
-import type { ProjectFeature } from "../types";
+import type { ProjectAddons } from "../types";
 
-export async function getFeaturesChoice(
-	features?: ProjectFeature[],
-): Promise<ProjectFeature[]> {
-	if (features !== undefined) return features;
+export async function getAddonsChoice(
+	Addons?: ProjectAddons[],
+): Promise<ProjectAddons[]> {
+	if (Addons !== undefined) return Addons;
 
-	const response = await multiselect<ProjectFeature>({
-		message: "Which features would you like to add?",
+	const response = await multiselect<ProjectAddons>({
+		message: "Which Addons would you like to add?",
 		options: [
 			{
 				value: "docker",

apps/cli/src/prompts/config-prompts.ts

@@ -2,14 +2,14 @@ import { cancel, group } from "@clack/prompts";
 import pc from "picocolors";
 import type {
 	PackageManager,
+	ProjectAddons,
 	ProjectConfig,
 	ProjectDatabase,
-	ProjectFeature,
 	ProjectOrm,
 } from "../types";
+import { getAddonsChoice } from "./addons";
 import { getAuthChoice } from "./auth";
 import { getDatabaseChoice } from "./database";
-import { getFeaturesChoice } from "./features";
 import { getGitChoice } from "./git";
 import { getNoInstallChoice } from "./install";
 import { getORMChoice } from "./orm";
@@ -22,7 +22,7 @@ interface PromptGroupResults {
 	database: ProjectDatabase;
 	orm: ProjectOrm;
 	auth: boolean;
-	features: ProjectFeature[];
+	addons: ProjectAddons[];
 	git: boolean;
 	packageManager: PackageManager;
 	noInstall: boolean;
@@ -46,7 +46,7 @@ export async function gatherConfig(
 				results.database === "sqlite"
 					? getTursoSetupChoice(flags.turso)
 					: Promise.resolve(false),
-			features: () => getFeaturesChoice(flags.features),
+			addons: () => getAddonsChoice(flags.addons),
 			git: () => getGitChoice(flags.git),
 			packageManager: () => getPackageManagerChoice(flags.packageManager),
 			noInstall: () => getNoInstallChoice(flags.noInstall),
@@ -64,7 +64,7 @@ export async function gatherConfig(
 		database: result.database,
 		orm: result.orm,
 		auth: result.auth,
-		features: result.features,
+		addons: result.addons,
 		git: result.git,
 		packageManager: result.packageManager,
 		noInstall: result.noInstall,

apps/cli/src/prompts/install.ts

@@ -8,7 +8,7 @@ export async function getNoInstallChoice(
 	if (noInstall !== undefined) return noInstall;
 
 	const response = await confirm({
-		message: "Install dependencies after creating project?",
+		message: "Install dependencies?",
 		initialValue: !DEFAULT_CONFIG.noInstall,
 	});
 

apps/cli/src/types.ts

@@ -1,14 +1,14 @@
 export type ProjectDatabase = "sqlite" | "postgres" | "none";
 export type ProjectOrm = "drizzle" | "prisma" | "none";
 export type PackageManager = "npm" | "pnpm" | "yarn" | "bun";
-export type ProjectFeature = "docker" | "github-actions" | "SEO";
+export type ProjectAddons = "docker" | "github-actions" | "SEO";
 
 export interface ProjectConfig {
 	projectName: string;
 	database: ProjectDatabase;
 	orm: ProjectOrm;
 	auth: boolean;
-	features: ProjectFeature[];
+	addons: ProjectAddons[];
 	git: boolean;
 	packageManager: PackageManager;
 	noInstall?: boolean;

apps/cli/src/utils/display-config.ts

@@ -16,8 +16,8 @@ export function displayConfig(config: Partial<ProjectConfig>) {
 	if (config.auth !== undefined) {
 		configDisplay.push(`${pc.blue("Authentication:")} ${config.auth}`);
 	}
-	if (config.features?.length) {
-		configDisplay.push(`${pc.blue("Features:")} ${config.features.join(", ")}`);
+	if (config.addons?.length) {
+		configDisplay.push(`${pc.blue("Addons:")} ${config.addons.join(", ")}`);
 	}
 	if (config.git !== undefined) {
 		configDisplay.push(`${pc.blue("Git Init:")} ${config.git}`);

apps/cli/src/utils/generate-reproducible-command.ts

@@ -41,12 +41,12 @@ export function generateReproducibleCommand(config: ProjectConfig): string {
 		flags.push(`--${config.packageManager}`);
 	}
 
-	if (config.features.length > 0) {
-		for (const feature of config.features) {
-			flags.push(`--${feature}`);
+	if (config.addons.length > 0) {
+		for (const addon of config.addons) {
+			flags.push(`--${addon}`);
 		}
 	} else {
-		flags.push("--no-features");
+		flags.push("--no-addons");
 	}
 
 	const baseCommand = "npx create-better-t-stack";

apps/web/src/app/(home)/_components/CodeContainer.tsx

@@ -175,7 +175,7 @@ const CodeContainer = () => {
 											<span className="text-yellow-400">yes</span>
 										</p>
 										<p className="text-white">
-											Features:{" "}
+											Addons:{" "}
 											<span className="text-yellow-400">
 												docker, github-actions, SEO
 											</span>

apps/web/src/app/(home)/_components/CustomizableStack.tsx

@@ -45,7 +45,7 @@ interface ActiveNodes {
 	orm: string;
 	auth: string;
 	packageManager: string;
-	features: {
+	addons: {
 		docker: boolean;
 		githubActions: boolean;
 		seo: boolean;
@@ -62,7 +62,7 @@ const CustomizableStack = () => {
 		orm: "drizzle",
 		auth: "better-auth",
 		packageManager: "npm",
-		features: {
+		addons: {
 			docker: false,
 			githubActions: false,
 			seo: false,
@@ -128,10 +128,10 @@ const CustomizableStack = () => {
 			setActiveNodes((prev) => ({
 				...prev,
 				[category]: techId,
-				...(category === "features" && {
-					features: {
-						...prev.features,
-						[techId]: !prev.features[techId as keyof typeof prev.features],
+				...(category === "addons" && {
+					addons: {
+						...prev.addons,
+						[techId]: !prev.addons[techId as keyof typeof prev.addons],
 					},
 				}),
 			}));
@@ -342,16 +342,15 @@ const CustomizableStack = () => {
 		const command = "npx create-better-t-stack my-app";
 		const flags: string[] = [];
 
-		// Check if all defaults are being used
 		const isAllDefaults =
 			activeNodes.database === "sqlite" &&
 			activeNodes.auth === "better-auth" &&
 			activeNodes.orm === "drizzle" &&
 			activeNodes.packageManager === "npm" &&
-			activeNodes.features.git === true &&
-			!activeNodes.features.docker &&
-			!activeNodes.features.githubActions &&
-			!activeNodes.features.seo;
+			activeNodes.addons.git === true &&
+			!activeNodes.addons.docker &&
+			!activeNodes.addons.githubActions &&
+			!activeNodes.addons.seo;
 
 		// If using all defaults, just use -y flag
 		if (isAllDefaults) {
@@ -387,19 +386,19 @@ const CustomizableStack = () => {
 		}
 
 		// Feature flags
-		if (activeNodes.features.docker) {
+		if (activeNodes.addons.docker) {
 			flags.push("--docker");
 		}
 
-		if (activeNodes.features.githubActions) {
+		if (activeNodes.addons.githubActions) {
 			flags.push("--github-actions");
 		}
 
-		if (activeNodes.features.seo) {
+		if (activeNodes.addons.seo) {
 			flags.push("--seo");
 		}
 
-		if (!activeNodes.features.git) {
+		if (!activeNodes.addons.git) {
 			flags.push("--no-git");
 		}
 
@@ -408,21 +407,17 @@ const CustomizableStack = () => {
 
 	return (
 		<div className="relative w-full max-w-5xl mx-auto z-50 mt-24">
-			{/* Command Display - Fixed at top with proper centering */}
 			<div className="absolute -top-16 left-0 right-0 mx-auto flex justify-center z-50">
 				<CommandDisplay command={command} />
 			</div>
 
-			{/* Main container with proper layout */}
 			<div className="relative rounded-xl border border-gray-800 overflow-hidden">
 				<div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10" />
 
-				{/* Tech selector fixed to the left side */}
 				<div className="absolute left-0 top-0 bottom-0 lg:w-52 md:w-44 w-36 z-50 bg-gray-950/30 border-r border-gray-800/50">
 					<TechSelector onSelect={handleTechSelect} activeNodes={activeNodes} />
 				</div>
 
-				{/* Help text */}
 				<div className="max-sm:hidden bg-gray-950/30 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
 					<div className="lg:text-sm text-xs text-gray-300 text-center">
 						Select technologies from the left panel to customize your stack. The
@@ -430,7 +425,6 @@ const CustomizableStack = () => {
 					</div>
 				</div>
 
-				{/* Flow container with proper spacing from the selector */}
 				<div className="h-[600px] lg:pl-52 md:pl-44 pl-36 relative backdrop-blur-sm bg-gray-950/50">
 					<ReactFlow
 						nodes={nodes}

apps/web/src/app/(home)/_components/TechSelector.tsx

@@ -4,7 +4,7 @@ interface ActiveNodes {
 	orm: string;
 	auth: string;
 	packageManager: string;
-	features: {
+	addons: {
 		docker: boolean;
 		githubActions: boolean;
 		seo: boolean;
@@ -38,11 +38,11 @@ const techOptions: Record<string, TechOption[]> = {
 		{ id: "yarn", label: "Yarn", category: "packageManager" },
 		{ id: "bun", label: "Bun", category: "packageManager" },
 	],
-	features: [
-		{ id: "docker", label: "Docker", category: "features" },
-		{ id: "githubActions", label: "GitHub Actions", category: "features" },
-		{ id: "seo", label: "SEO", category: "features" },
-		{ id: "git", label: "Git", category: "features" },
+	addons: [
+		{ id: "docker", label: "Docker", category: "addons" },
+		{ id: "githubActions", label: "GitHub Actions", category: "addons" },
+		{ id: "seo", label: "SEO", category: "addons" },
+		{ id: "git", label: "Git", category: "addons" },
 	],
 };
 
@@ -60,7 +60,7 @@ export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
 
 			{/* Regular tech options */}
 			{Object.entries(techOptions)
-				.filter(([category]) => category !== "features")
+				.filter(([category]) => category !== "addons")
 				.map(([category, options]) => (
 					<div key={category} className="space-y-2">
 						<div className="text-xs text-gray-400 capitalize">{category}</div>
@@ -71,7 +71,7 @@ export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
 									variant="secondary"
 									className={`cursor-pointer hover:bg-gray-700 ${
 										activeNodes[
-											category as keyof Omit<ActiveNodes, "features">
+											category as keyof Omit<ActiveNodes, "addons">
 										] === option.id && "bg-blue-600 text-white"
 									}`}
 									onClick={() => onSelect(category, option.id)}
@@ -85,18 +85,18 @@ export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
 
 			{/* Feature toggles */}
 			<div className="space-y-2">
-				<div className="text-xs text-gray-400">Features</div>
+				<div className="text-xs text-gray-400">Addons</div>
 				<div className="flex flex-wrap gap-1">
-					{techOptions.features.map((option) => (
+					{techOptions.addons.map((option) => (
 						<Badge
 							key={option.id}
 							variant="secondary"
 							className={`cursor-pointer hover:bg-gray-700 ${
-								activeNodes.features[
-									option.id as keyof typeof activeNodes.features
+								activeNodes.addons[
+									option.id as keyof typeof activeNodes.addons
 								] === true && "bg-blue-600 text-white"
 							}`}
-							onClick={() => onSelect("features", option.id)}
+							onClick={() => onSelect("addons", option.id)}
 						>
 							{option.label}
 						</Badge>