From a5bfc4a8f17ad242145e39765ac7c94d8f0572dc Mon Sep 17 00:00:00 2001 From: Drew Date: Sun, 25 Aug 2024 15:22:39 -0400 Subject: [PATCH] refactor: pr udates --- .vscode/settings.json | 4 ++- app/components/ui/button.tsx | 17 +++++----- app/components/ui/dialog.tsx | 8 ++--- app/globals.css | 66 ------------------------------------ app/layout.tsx | 10 ++---- app/lib/utils.ts | 6 ---- app/utils/index.ts | 7 ++++ components.json | 4 +-- package-lock.json | 9 ----- package.json | 5 ++- tailwind.config.ts | 47 ++----------------------- 11 files changed, 32 insertions(+), 151 deletions(-) delete mode 100644 app/lib/utils.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index b9dad2c..63b5139 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,7 +7,9 @@ "tailwindCSS.experimental.classRegex": [ "tw`([^`]*)`", "tw\\(\"([^\"]*)\"\\)", - "tw\\('([^']*)'\\)" + "tw\\('([^']*)'\\)", + ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], + ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] ], "typescript.preferences.importModuleSpecifier": "non-relative", "typescript.preferences.preferTypeOnlyAutoImports": true diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx index 2aa9b52..01117c1 100644 --- a/app/components/ui/button.tsx +++ b/app/components/ui/button.tsx @@ -1,23 +1,24 @@ import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@/lib/utils"; +import { cn } from "@/utils"; const buttonVariants = cva( - "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-slate-300", { variants: { variant: { default: - "bg-primary text-primary-foreground shadow hover:bg-primary/90", + "bg-slate-900 text-slate-50 shadow hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90", destructive: - "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", + "bg-red-500 text-slate-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90", outline: - "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", + "border border-slate-200 bg-white shadow-sm hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50", secondary: - "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", + "bg-slate-100 text-slate-900 shadow-sm hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80", + ghost: + "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50", + link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50", }, size: { default: "h-9 px-4 py-2", diff --git a/app/components/ui/dialog.tsx b/app/components/ui/dialog.tsx index 765042d..4278326 100644 --- a/app/components/ui/dialog.tsx +++ b/app/components/ui/dialog.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import * as DialogPrimitive from "@radix-ui/react-dialog"; import { X } from "lucide-react"; -import { cn } from "@/lib/utils"; +import { cn } from "@/utils"; const Dialog = DialogPrimitive.Root; @@ -37,13 +37,13 @@ const DialogContent = React.forwardRef< {children} - + Close @@ -101,7 +101,7 @@ const DialogDescription = React.forwardRef< >(({ className, ...props }, ref) => ( )); diff --git a/app/globals.css b/app/globals.css index d924e24..b5c61c9 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,69 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; - --radius: 0.5rem; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; - } - - .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; - } -} - -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -} diff --git a/app/layout.tsx b/app/layout.tsx index f86bc06..0dfc65e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,7 +2,6 @@ import type { Metadata } from "next"; import { GeistSans } from "geist/font/sans"; import { Header } from "@/components/header"; import { SocketProvider } from "@/components/socket-provider"; -import { cn } from "@/lib/utils"; import "@/globals.css"; export const metadata: Metadata = { @@ -11,13 +10,8 @@ export const metadata: Metadata = { export default function RootLayout(props: Readonly) { return ( - - + +
diff --git a/app/lib/utils.ts b/app/lib/utils.ts deleted file mode 100644 index a5ef193..0000000 --- a/app/lib/utils.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; - -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); -} diff --git a/app/utils/index.ts b/app/utils/index.ts index b0bc9a9..647cd01 100644 --- a/app/utils/index.ts +++ b/app/utils/index.ts @@ -1,3 +1,10 @@ +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} + /** @see {@link https://github.com/tailwindlabs/prettier-plugin-tailwindcss#sorting-classes-in-template-literals} */ export const tw = ( strings: readonly string[] | ArrayLike, diff --git a/components.json b/components.json index 0c3a794..e366f38 100644 --- a/components.json +++ b/components.json @@ -7,11 +7,11 @@ "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "slate", - "cssVariables": true, + "cssVariables": false, "prefix": "" }, "aliases": { "components": "@/components", - "utils": "@/lib/utils" + "utils": "@/utils" } } diff --git a/package-lock.json b/package-lock.json index 98e6d80..b6dda0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,6 @@ "name": "mmmines", "dependencies": { "@radix-ui/react-dialog": "^1.1.1", - "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.1.0", "@tanstack/react-virtual": "^3.8.4", "class-variance-authority": "^0.7.0", @@ -1767,14 +1766,6 @@ } } }, - "node_modules/@radix-ui/react-icons": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", - "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==", - "peerDependencies": { - "react": "^16.x || ^17.x || ^18.x" - } - }, "node_modules/@radix-ui/react-id": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz", diff --git a/package.json b/package.json index ed7d546..28c768c 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,6 @@ }, "dependencies": { "@radix-ui/react-dialog": "^1.1.1", - "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.1.0", "@tanstack/react-virtual": "^3.8.4", "class-variance-authority": "^0.7.0", @@ -26,8 +25,7 @@ "react-dom": "^18", "socket.io": "^4.7.5", "socket.io-client": "^4.7.5", - "tailwind-merge": "^2.5.2", - "tailwindcss-animate": "^1.0.7" + "tailwind-merge": "^2.5.2" }, "devDependencies": { "@commitlint/cli": "^19.3.0", @@ -50,6 +48,7 @@ "prettier": "^3.3.3", "prettier-plugin-tailwindcss": "^0.6.5", "tailwindcss": "^3.4.1", + "tailwindcss-animate": "^1.0.7", "typescript": "^5" }, "commitlint": { diff --git a/tailwind.config.ts b/tailwind.config.ts index 1130d09..2d557a4 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -4,10 +4,9 @@ import { fontFamily } from "tailwindcss/defaultTheme"; const config = { darkMode: ["class"], content: [ - "./pages/**/*.{ts,tsx}", - "./components/**/*.{ts,tsx}", - "./app/**/*.{ts,tsx}", - "./src/**/*.{ts,tsx}", + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./app/**/*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { @@ -19,46 +18,6 @@ const config = { }, }, extend: { - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, - }, - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, keyframes: { "accordion-down": { from: { height: "0" },