From b3c746cd49c5b908f30da515c9ea4ccd607defc6 Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Fri, 4 Apr 2025 12:40:46 +0530 Subject: [PATCH] Add useSortedClasses rule to Biome configuration --- .changeset/ten-teeth-help.md | 5 + apps/cli/package.json | 5 +- apps/cli/src/helpers/db-setup.ts | 2 +- apps/cli/src/helpers/post-installation.ts | 2 +- apps/cli/src/helpers/prisma-postgres-setup.ts | 11 --- apps/cli/template/with-biome/biome.json | 9 ++ .../_components/BackgroundGradients.tsx | 8 +- .../app/(home)/_components/CenterLines.tsx | 14 +-- .../app/(home)/_components/CodeContainer.tsx | 80 ++++++++-------- .../app/(home)/_components/CommandDisplay.tsx | 10 +- .../_components/CustomizableSection.tsx | 32 +++---- .../(home)/_components/FeaturedSection.tsx | 44 ++++----- .../web/src/app/(home)/_components/Footer.tsx | 36 +++---- .../web/src/app/(home)/_components/Navbar.tsx | 86 ++++++++--------- .../src/app/(home)/_components/NpmPackage.tsx | 6 +- .../app/(home)/_components/SideCircles.tsx | 12 +-- .../app/(home)/_components/StackArchitech.tsx | 94 +++++++++---------- .../app/(home)/_components/TechShowcase.tsx | 42 ++++----- .../app/(home)/_components/Testimonials.tsx | 44 ++++----- apps/web/src/app/(home)/layout.tsx | 2 +- apps/web/src/app/(home)/page.tsx | 34 +++---- biome.json | 11 ++- bun.lock | 2 +- 23 files changed, 293 insertions(+), 298 deletions(-) create mode 100644 .changeset/ten-teeth-help.md 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 ( -