adjust and test project setup (#1548)

* chore: remove deprecated husky command * chore: add playground, descriptive name for cn * feat: add dark theme * ci: force npm i * fix: import `cn` properly and remove `--force` from the install script * chore: adjust filename case * fix: rename cn import * test: add theme test to playground * fix: update imports --------- Co-authored-by: BrickheadJohnny <[email protected]>
guildxyz · Nov 19, 2024 · f242b41 · f242b41
1 parent c42fea7
commit f242b41
Show file tree

Hide file tree

Showing 11 changed files with 1,592 additions and 2,248 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky",
     "dev": "next dev",
     "dev:turbo": "next dev --turbo",
     "build": "next build",
@@ -23,6 +23,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "next": "15.0.3",
+    "next-themes": "^0.4.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "tailwind-merge": "^2.5.4",

diff --git a/src/app/components/ui/Badge.tsx b/src/app/components/ui/Badge.tsx
@@ -1,5 +1,5 @@
 import { type VariantProps, cva } from "class-variance-authority";
-import { cn } from "lib/cn";
+import { cn } from "lib/cssUtils";
 import { type ElementRef, type HTMLAttributes, forwardRef } from "react";
 
 export const badgeVariants = cva(

diff --git a/src/app/components/ui/Button.tsx b/src/app/components/ui/Button.tsx
@@ -1,7 +1,7 @@
 import { CircleNotch } from "@phosphor-icons/react/dist/ssr";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
-import { cn } from "lib/cn";
+import { cn } from "lib/cssUtils";
 import { type ButtonHTMLAttributes, type ReactNode, forwardRef } from "react";
 
 const buttonVariants = cva(

diff --git a/src/app/components/ui/Card.tsx b/src/app/components/ui/Card.tsx
@@ -1,4 +1,4 @@
-import { cn } from "lib/cn";
+import { cn } from "lib/cssUtils";
 import { type HTMLAttributes, forwardRef } from "react";
 
 const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,146 +2,151 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  html {
-    scroll-behavior: smooth;
-  }
-
-  :root {
-    /* Raw colors */
-    --indigo-50: #eef2ff;
-    --indigo-100: #e0e7ff;
-    --indigo-200: #c7d2fe;
-    --indigo-300: #a5b4fc;
-    --indigo-400: #818cf8;
-    --indigo-500: #6366f1;
-    --indigo-600: #4f46e5;
-    --indigo-700: #4338ca;
-    --indigo-800: #3730a3;
-    --indigo-900: #312e81;
-
-    --green-50: #f0fdf4;
-    --green-100: #dcfce7;
-    --green-200: #bbf7d0;
-    --green-300: #86efac;
-    --green-400: #4ade80;
-    --green-500: #22c55e;
-    --green-600: #16a34a;
-    --green-700: #15803d;
-    --green-800: #166534;
-    --green-900: #14532d;
-
-    --blue-50: #eff6ff;
-    --blue-100: #dbeafe;
-    --blue-200: #bfdbfe;
-    --blue-300: #93c5fd;
-    --blue-400: #60a5fa;
-    --blue-500: #3b82f6;
-    --blue-600: #2563eb;
-    --blue-700: #1d4ed8;
-    --blue-800: #1e40af;
-    --blue-900: #1e3a8a;
-
-    --red-50: #fef2f2;
-    --red-100: #fee2e2;
-    --red-200: #fecaca;
-    --red-300: #fca5a5;
-    --red-400: #f87171;
-    --red-500: #ef4444;
-    --red-600: #dc2626;
-    --red-700: #b91c1c;
-    --red-800: #991b1b;
-    --red-900: #7f1d1d;
-
-    --gray-50: #fafafa;
-    --gray-100: #f4f4f5;
-    --gray-200: #e4e4e7;
-    --gray-300: #d4d4d8;
-    --gray-350: #b0b0b9;
-    --gray-400: #a1a1aa;
-    --gray-450: #8a8a96;
-    --gray-500: #71717a;
-    --gray-600: #52525b;
-    --gray-700: #3f3f46;
-    --gray-800: #27272a;
-    --gray-900: #18181b;
-
-    /* Semantic colors */
-    --background: var(--gray-100);
-    --foreground: var(--gray-800);
-    --card: #fff;
-    --image: var(--gray-700);
-    --skeleton: var(--gray-300);
-
-    --button-primary: var(--indigo-500);
-    --button-primary-hover: var(--indigo-600);
-    --button-primary-active: var(--indigo-700);
-    --button-primary-foreground: #fff;
-    --button-primary-subtle: var(--indigo-300);
-    --button-primary-subtle-foreground: var(--indigo-500);
-
-    --button-secondary: rgba(0, 0, 0, 0.06);
-    --button-secondary-hover: rgba(0, 0, 0, 0.08);
-    --button-secondary-active: rgba(0, 0, 0, 0.16);
-    --button-secondary-foreground: var(--foreground);
-    --button-secondary-subtle: #a1a1aa;
-    --button-secondary-subtle-foreground: var(--foreground);
-
-    --button-destructive: var(--red-500);
-    --button-destructive-hover: var(--red-600);
-    --button-destructive-active: var(--red-700);
-    --button-destructive-foreground: #fff;
-    --button-destructive-subtle: var(--red-300);
-    --button-destructive-subtle-foreground: var(--red-500);
-
-    --button-success: var(--green-500);
-    --button-success-hover: var(--green-600);
-    --button-success-active: var(--green-700);
-    --button-success-foreground: #fff;
-    --button-success-subtle: var(--green-300);
-    --button-success-subtle-foreground: var(--green-500);
-
-    --badge-background: rgba(0, 0, 0, 0.06);
-    --badge-foreground: var(--foreground);
-  }
-
-  :root[data-theme="dark"],
-  [data-theme="dark"] {
-    --background: var(--gray-800);
-    --foreground: var(--gray-100);
-    --card: var(--gray-700);
-    --image: var(--gray-600);
-    --skeleton: var(--gray-600);
-
-    --button-primary: var(--indigo-500);
-    --button-primary-hover: var(--indigo-400);
-    --button-primary-active: var(--indigo-300);
-    --button-primary-foreground: #fff;
-    --button-primary-subtle: var(--indigo-300);
-    --button-primary-subtle-foreground: var(--indigo-500);
-
-    --button-secondary: rgba(255, 255, 255, 0.06);
-    --button-secondary-hover: rgba(255, 255, 255, 0.08);
-    --button-secondary-active: rgba(255, 255, 255, 0.16);
-    --button-secondary-foreground: var(--foreground);
-    --button-secondary-subtle: #a1a1aa;
-    --button-secondary-subtle-foreground: var(--foreground);
-
-    --button-destructive: var(--red-500);
-    --button-destructive-hover: var(--red-400);
-    --button-destructive-active: var(--red-300);
-    --button-destructive-foreground: #fff;
-    --button-destructive-subtle: var(--red-300);
-    --button-destructive-subtle-foreground: var(--red-500);
-
-    --button-success: var(--green-500);
-    --button-success-hover: var(--green-400);
-    --button-success-active: var(--green-300);
-    --button-success-foreground: #fff;
-    --button-success-subtle: var(--green-300);
-    --button-success-subtle-foreground: var(--green-500);
-
-    --badge-background: rgba(255, 255, 255, 0.06);
-    --badge-foreground: var(--foreground);
-  }
+html {
+  scroll-behavior: smooth;
+}
+
+:root {
+  /* Raw colors */
+  --indigo-50: #eef2ff;
+  --indigo-100: #e0e7ff;
+  --indigo-200: #c7d2fe;
+  --indigo-300: #a5b4fc;
+  --indigo-400: #818cf8;
+  --indigo-500: #6366f1;
+  --indigo-600: #4f46e5;
+  --indigo-700: #4338ca;
+  --indigo-800: #3730a3;
+  --indigo-900: #312e81;
+
+  --green-50: #f0fdf4;
+  --green-100: #dcfce7;
+  --green-200: #bbf7d0;
+  --green-300: #86efac;
+  --green-400: #4ade80;
+  --green-500: #22c55e;
+  --green-600: #16a34a;
+  --green-700: #15803d;
+  --green-800: #166534;
+  --green-900: #14532d;
+
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-200: #bfdbfe;
+  --blue-300: #93c5fd;
+  --blue-400: #60a5fa;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #1d4ed8;
+  --blue-800: #1e40af;
+  --blue-900: #1e3a8a;
+
+  --red-50: #fef2f2;
+  --red-100: #fee2e2;
+  --red-200: #fecaca;
+  --red-300: #fca5a5;
+  --red-400: #f87171;
+  --red-500: #ef4444;
+  --red-600: #dc2626;
+  --red-700: #b91c1c;
+  --red-800: #991b1b;
+  --red-900: #7f1d1d;
+
+  --gray-50: #fafafa;
+  --gray-100: #f4f4f5;
+  --gray-200: #e4e4e7;
+  --gray-300: #d4d4d8;
+  --gray-350: #b0b0b9;
+  --gray-400: #a1a1aa;
+  --gray-450: #8a8a96;
+  --gray-500: #71717a;
+  --gray-600: #52525b;
+  --gray-700: #3f3f46;
+  --gray-800: #27272a;
+  --gray-900: #18181b;
+
+  /* Semantic colors */
+  --background: var(--gray-100);
+  --foreground: var(--gray-800);
+  --card: #fff;
+  --image: var(--gray-700);
+  --skeleton: var(--gray-300);
+
+  --button-primary: var(--indigo-500);
+  --button-primary-hover: var(--indigo-600);
+  --button-primary-active: var(--indigo-700);
+  --button-primary-foreground: #fff;
+  --button-primary-subtle: var(--indigo-300);
+  --button-primary-subtle-foreground: var(--indigo-500);
+
+  --button-secondary: rgba(0, 0, 0, 0.06);
+  --button-secondary-hover: rgba(0, 0, 0, 0.08);
+  --button-secondary-active: rgba(0, 0, 0, 0.16);
+  --button-secondary-foreground: var(--foreground);
+  --button-secondary-subtle: #a1a1aa;
+  --button-secondary-subtle-foreground: var(--foreground);
+
+  --button-destructive: var(--red-500);
+  --button-destructive-hover: var(--red-600);
+  --button-destructive-active: var(--red-700);
+  --button-destructive-foreground: #fff;
+  --button-destructive-subtle: var(--red-300);
+  --button-destructive-subtle-foreground: var(--red-500);
+
+  --button-success: var(--green-500);
+  --button-success-hover: var(--green-600);
+  --button-success-active: var(--green-700);
+  --button-success-foreground: #fff;
+  --button-success-subtle: var(--green-300);
+  --button-success-subtle-foreground: var(--green-500);
+
+  --badge-background: rgba(0, 0, 0, 0.06);
+  --badge-foreground: var(--foreground);
+}
+
+.dark {
+  --background: var(--gray-800);
+  --foreground: var(--gray-100);
+  --card: var(--gray-700);
+  --image: var(--gray-600);
+  --skeleton: var(--gray-600);
+
+  --button-primary: var(--indigo-500);
+  --button-primary-hover: var(--indigo-400);
+  --button-primary-active: var(--indigo-300);
+  --button-primary-foreground: #fff;
+  --button-primary-subtle: var(--indigo-300);
+  --button-primary-subtle-foreground: var(--indigo-500);
+
+  --button-secondary: rgba(255, 255, 255, 0.06);
+  --button-secondary-hover: rgba(255, 255, 255, 0.08);
+  --button-secondary-active: rgba(255, 255, 255, 0.16);
+  --button-secondary-foreground: var(--foreground);
+  --button-secondary-subtle: #a1a1aa;
+  --button-secondary-subtle-foreground: var(--foreground);
+
+  --button-destructive: var(--red-500);
+  --button-destructive-hover: var(--red-400);
+  --button-destructive-active: var(--red-300);
+  --button-destructive-foreground: #fff;
+  --button-destructive-subtle: var(--red-300);
+  --button-destructive-subtle-foreground: var(--red-500);
+
+  --button-success: var(--green-500);
+  --button-success-hover: var(--green-400);
+  --button-success-active: var(--green-300);
+  --button-success-foreground: #fff;
+  --button-success-subtle: var(--green-300);
+  --button-success-subtle-foreground: var(--green-500);
+
+  --badge-background: rgba(255, 255, 255, 0.06);
+  --badge-foreground: var(--foreground);
+}
+
+.dark video,
+.dark img {
+  @apply brightness-90 contrast-125;
+}
+body {
+  @apply bg-background text-foreground font-sans min-h-screen antialiased selection:bg-foreground selection:text-background;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,8 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { CsrProviders } from "components/Providers";
 import { dystopian, inter } from "fonts";
-import { cn } from "lib/cn";
+import { cn } from "lib/cssUtils";
 
 export const metadata: Metadata = {
   title: "Guildhall",
@@ -19,15 +20,15 @@ const RootLayout = ({
   children: React.ReactNode;
 }>) => {
   return (
-    <html lang="en" data-theme="dark">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={cn(
           dystopian.variable,
           inter.variable,
           "bg-background text-foreground antialiased",
         )}
       >
-        {children}
+        <CsrProviders>{children}</CsrProviders>
       </body>
     </html>
   );

diff --git a/src/app/playground/page.tsx b/src/app/playground/page.tsx
@@ -0,0 +1,19 @@
+const Playground = () => {
+  return (
+    <main className="text-8xl">
+      <h1 className="font-display">
+        Hello, Guild!, page for testing frameworks, configs
+      </h1>
+      <h2 className="font-bold font-display">Hello, Guild!</h2>
+      <p>Test, one, two, three...</p>
+      <p className="border font-sans">
+        Test, <strong>one</strong>, <em>two</em>, three...
+      </p>
+      <p className="font-bold text-rose-500 dark:text-violet-500">
+        In dark mode I appear violet, in light we go rose
+      </p>
+    </main>
+  );
+};
+
+export default Playground;