diff --git a/.changeset/ten-teeth-help.md b/.changeset/ten-teeth-help.md
new file mode 100644
index 0000000..8fad4a4
--- /dev/null
+++ b/.changeset/ten-teeth-help.md
@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": patch
+---
+
+Add useSortedClasses rule to Biome configuration
diff --git a/apps/cli/package.json b/apps/cli/package.json
index 367b9b9..c30df49 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -7,10 +7,7 @@
"bin": {
"create-better-t-stack": "dist/index.js"
},
- "files": [
- "dist",
- "template"
- ],
+ "files": ["template", "dist"],
"keywords": [
"typescript",
"scaffold",
diff --git a/apps/cli/src/helpers/db-setup.ts b/apps/cli/src/helpers/db-setup.ts
index 84d88a6..c67b57a 100644
--- a/apps/cli/src/helpers/db-setup.ts
+++ b/apps/cli/src/helpers/db-setup.ts
@@ -65,7 +65,7 @@ export async function setupDatabase(
orm === "prisma" &&
setupPrismaPostgresDb
) {
- await setupPrismaPostgres(projectDir, true, packageManager);
+ await setupPrismaPostgres(projectDir, packageManager);
}
}
}
diff --git a/apps/cli/src/helpers/post-installation.ts b/apps/cli/src/helpers/post-installation.ts
index ed19006..5dc7924 100644
--- a/apps/cli/src/helpers/post-installation.ts
+++ b/apps/cli/src/helpers/post-installation.ts
@@ -68,7 +68,7 @@ function getNativeInstructions(): string {
}
function getLintingInstructions(runCmd?: string): string {
- return `${pc.bold("\nLinting and formatting:")}\n${pc.cyan("•")} Format and lint fix: ${`${runCmd} check`}\n\n`;
+ return `${pc.bold("Linting and formatting:")}\n${pc.cyan("•")} Format and lint fix: ${`${runCmd} check`}\n\n`;
}
function getDatabaseInstructions(
diff --git a/apps/cli/src/helpers/prisma-postgres-setup.ts b/apps/cli/src/helpers/prisma-postgres-setup.ts
index b3e307e..fc9efbc 100644
--- a/apps/cli/src/helpers/prisma-postgres-setup.ts
+++ b/apps/cli/src/helpers/prisma-postgres-setup.ts
@@ -101,21 +101,10 @@ DATABASE_URL="your_database_url"`);
export async function setupPrismaPostgres(
projectDir: string,
- shouldSetupPrisma: boolean,
packageManager: ProjectPackageManager = "npm",
) {
const serverDir = path.join(projectDir, "apps/server");
- if (!shouldSetupPrisma) {
- await writeEnvFile(projectDir);
- log.info(
- pc.blue(
- "Using default Postgres configuration. You'll need to provide your own database.",
- ),
- );
- return;
- }
-
try {
const config = await initPrismaDatabase(serverDir, packageManager);
diff --git a/apps/cli/template/with-biome/biome.json b/apps/cli/template/with-biome/biome.json
index 14360d8..c55b2e4 100644
--- a/apps/cli/template/with-biome/biome.json
+++ b/apps/cli/template/with-biome/biome.json
@@ -31,6 +31,15 @@
"recommended": true,
"correctness": {
"useExhaustiveDependencies": "info"
+ },
+ "nursery": {
+ "useSortedClasses": {
+ "level": "warn",
+ "fix": "safe",
+ "options": {
+ "functions": ["clsx", "cva", "cn"]
+ }
+ }
}
}
},
diff --git a/apps/web/src/app/(home)/_components/BackgroundGradients.tsx b/apps/web/src/app/(home)/_components/BackgroundGradients.tsx
index 96e9da4..9393b44 100644
--- a/apps/web/src/app/(home)/_components/BackgroundGradients.tsx
+++ b/apps/web/src/app/(home)/_components/BackgroundGradients.tsx
@@ -2,13 +2,13 @@ import React from "react";
const BackgroundGradients = () => {
return (
-
+
);
};
diff --git a/apps/web/src/app/(home)/_components/CenterLines.tsx b/apps/web/src/app/(home)/_components/CenterLines.tsx
index 66cec8c..aead95a 100644
--- a/apps/web/src/app/(home)/_components/CenterLines.tsx
+++ b/apps/web/src/app/(home)/_components/CenterLines.tsx
@@ -3,18 +3,8 @@ import React from "react";
const CenterLines = () => {
return (
<>
-
-
+
+
>
);
};
diff --git a/apps/web/src/app/(home)/_components/CodeContainer.tsx b/apps/web/src/app/(home)/_components/CodeContainer.tsx
index fef43e2..fb6a138 100644
--- a/apps/web/src/app/(home)/_components/CodeContainer.tsx
+++ b/apps/web/src/app/(home)/_components/CodeContainer.tsx
@@ -53,15 +53,15 @@ const CodeContainer = () => {
}, [typingComplete, currentStep]);
return (
-
-
-
+
+
+
-
+
Quick Install Terminal
@@ -69,16 +69,16 @@ const CodeContainer = () => {
-
+
-
$
+
$
{commands[selectedPM]}
@@ -140,7 +140,7 @@ const CodeContainer = () => {
className={
typingComplete
? "hidden"
- : "text-blue-600 dark:text-blue-500 animate-pulse ml-1"
+ : "ml-1 animate-pulse text-blue-600 dark:text-blue-500"
}
>
▌
@@ -151,15 +151,15 @@ const CodeContainer = () => {
whileTap={{ scale: 0.95 }}
type="button"
onClick={() => copyToClipboard(selectedPM)}
- className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors flex-shrink-0 ml-2"
+ className="ml-2 flex-shrink-0 text-gray-600 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
title="Copy command"
>
{copied ? (
-
+
Copied!
) : (
-
+
Copy to clipboard
)}
@@ -172,7 +172,7 @@ const CodeContainer = () => {
animate={{ opacity: 1 }}
className="overflow-x-auto"
>
-
+
{currentStep >= 1 && (
{
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }}
- className="text-blue-600 dark:text-blue-400 flex items-center"
+ className="flex items-center text-blue-600 dark:text-blue-400"
>
-
+
Completed
Creating project structure
@@ -247,9 +247,9 @@ const CodeContainer = () => {
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.5 }}
- className="text-blue-600 dark:text-blue-400 flex items-center"
+ className="flex items-center text-blue-600 dark:text-blue-400"
>
-
+
Completed
Installing dependencies
@@ -265,9 +265,9 @@ const CodeContainer = () => {
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.7 }}
- className="text-blue-600 dark:text-blue-400 flex items-center"
+ className="flex items-center text-blue-600 dark:text-blue-400"
>
-
+
Completed
Setting up database schema
@@ -276,9 +276,9 @@ const CodeContainer = () => {
initial={{ opacity: 0, x: -5 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.8 }}
- className="text-blue-600 dark:text-blue-400 flex items-center"
+ className="flex items-center text-blue-600 dark:text-blue-400"
>
-
+
Completed
Configuring authentication
@@ -287,10 +287,10 @@ const CodeContainer = () => {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.9 }}
- className="mt-4 flex flex-col xs:flex-row xs:items-center px-2 py-2 rounded bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 border border-blue-300 dark:border-blue-800/30 text-[10px] sm:text-xs"
+ className="mt-4 flex xs:flex-row flex-col xs:items-center rounded border border-blue-300 bg-blue-100 px-2 py-2 text-[10px] text-blue-800 sm:text-xs dark:border-blue-800/30 dark:bg-blue-900/20 dark:text-blue-300"
>
Project ready! Run
-
+
cd my-better-t-app
and
-
+
{selectedPM === "npm" && "npm run dev"}
{selectedPM === "pnpm" && "pnpm dev"}
{selectedPM === "bun" && "bun dev"}
@@ -322,22 +322,22 @@ const CodeContainer = () => {
)}
= 5 && typingComplete ? "" : "hidden"
}`}
>
- $
-
+ $
+
▌
-
-
+
+
For custom options, use
-
+
{selectedPM === "npm" && "npx"}
{selectedPM === "pnpm" && "pnpm dlx"}
{selectedPM === "bun" && "bunx"} create-better-t-stack
diff --git a/apps/web/src/app/(home)/_components/CommandDisplay.tsx b/apps/web/src/app/(home)/_components/CommandDisplay.tsx
index 67a1806..412d89c 100644
--- a/apps/web/src/app/(home)/_components/CommandDisplay.tsx
+++ b/apps/web/src/app/(home)/_components/CommandDisplay.tsx
@@ -17,17 +17,17 @@ export function CommandDisplay({ command }: CommandDisplayProps) {
};
return (
-
-
+
+
{command}
diff --git a/apps/web/src/app/(home)/_components/CustomizableSection.tsx b/apps/web/src/app/(home)/_components/CustomizableSection.tsx
index d9b9698..ea7a461 100644
--- a/apps/web/src/app/(home)/_components/CustomizableSection.tsx
+++ b/apps/web/src/app/(home)/_components/CustomizableSection.tsx
@@ -4,8 +4,8 @@ import StackArchitect from "./StackArchitech";
export default function CustomizableSection() {
return (
-
-
+
+
-
-
+
+
{">"}
-
+
Your Stack, Your Choice
-
+
-
+
Configure your ideal TypeScript environment with all the options you
need
-
-
+
+
Runtime Options
--runtime
-
+
Framework Options
--framework
-
+
Database Options
--database
-
+
Addon Options
@@ -69,7 +69,7 @@ export default function CustomizableSection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.4, delay: 0.3 }}
- className="flex flex-wrap justify-center gap-2 sm:gap-3 pt-2"
+ className="flex flex-wrap justify-center gap-2 pt-2 sm:gap-3"
>
Bun or Node
Hono or Elysia
@@ -87,7 +87,7 @@ export default function CustomizableSection() {
transition={{ duration: 0.6, delay: 0.2 }}
className="relative"
>
-
+
@@ -113,7 +113,7 @@ function Badge({
return (
diff --git a/apps/web/src/app/(home)/_components/FeaturedSection.tsx b/apps/web/src/app/(home)/_components/FeaturedSection.tsx
index 1b6b74e..8aeffa4 100644
--- a/apps/web/src/app/(home)/_components/FeaturedSection.tsx
+++ b/apps/web/src/app/(home)/_components/FeaturedSection.tsx
@@ -4,8 +4,8 @@ import React from "react";
const Featured = () => {
return (
<>
-
-
+
+
{[
{
icon: Shield,
@@ -28,11 +28,11 @@ const Featured = () => {
].map((feature) => (
-
-
-
+
+
+
{feature.title}
@@ -43,19 +43,19 @@ const Featured = () => {
-
-
-
-
+
+
+
+
Write Better Code, Faster
-
+
Leverage the power of TypeScript with our carefully selected tools
and frameworks.
-
+
{[
{
@@ -76,11 +76,11 @@ const Featured = () => {
].map((item) => (
-
+
-
+
{item.title}
@@ -93,8 +93,8 @@ const Featured = () => {
-
-
+
+
{`// Type-safe API endpoint
export const userRouter = router({
get: publicProcedure
@@ -115,20 +115,20 @@ export const userRouter = router({
-
-
+
+
Ready to Build Something Amazing?
-
+
Start your next project with Better-T Stack and experience the future
of web development.
>
diff --git a/apps/web/src/app/(home)/_components/Footer.tsx b/apps/web/src/app/(home)/_components/Footer.tsx
index abf8d3a..8f028e5 100644
--- a/apps/web/src/app/(home)/_components/Footer.tsx
+++ b/apps/web/src/app/(home)/_components/Footer.tsx
@@ -3,14 +3,14 @@ import Link from "next/link";
const Footer = () => {
return (
-