From 13b89e58d81c8a9a8af046ca7cfe0ed4be7cce4b Mon Sep 17 00:00:00 2001 From: NexVeridian Date: Mon, 3 Jun 2024 16:38:19 -0700 Subject: [PATCH] format and add OVERRIDE_URL --- .devcontainer/devcontainer.json | 97 ++++++++++++------------ CONTRIBUTING.md | 2 + README.md | 2 + components.json | 2 +- docker-compose-postgres.dev.yml | 58 +++++++------- docker-compose-postgres.yml | 58 +++++++------- docker-compose-surrealdb.dev.yml | 72 +++++++++--------- docker-compose-surrealdb.yml | 74 +++++++++--------- next.config.js | 6 +- package.json | 2 +- postcss.config.js | 2 +- src/app/[slug]/db.tsx | 13 +++- src/app/create/create.tsx | 34 +++++---- src/app/create/db.tsx | 23 ++++-- src/app/create/schema.tsx | 8 +- src/app/global-error.tsx | 12 ++- src/app/not-found.tsx | 10 +-- src/app/page.tsx | 6 +- src/app/stats/data-table.tsx | 10 +-- src/app/stats/db.tsx | 5 +- src/app/stats/loading.tsx | 6 +- src/app/stats/page.tsx | 8 +- src/components/card-grid.tsx | 5 +- src/components/db-utils.tsx | 4 +- src/components/nav.tsx | 5 +- src/components/ui/button.tsx | 28 +++---- src/components/ui/card.tsx | 39 ++++++---- src/components/ui/dropdown-menu.tsx | 97 +++++++++++++----------- src/components/ui/form.tsx | 112 +++++++++++++++------------- src/components/ui/input.tsx | 18 ++--- src/components/ui/label.tsx | 20 ++--- src/components/ui/popover.tsx | 20 ++--- src/components/ui/select.tsx | 69 +++++++++-------- src/components/ui/table.tsx | 56 +++++++------- src/lib/utils.ts | 8 +- tailwind.config.ts | 12 +-- tsconfig.json | 23 ++---- 37 files changed, 530 insertions(+), 496 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 629594c..834dcb6 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,53 +1,50 @@ // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node { - "name": "Node.js & TypeScript", - // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile - // "image": "mcr.microsoft.com/devcontainers/typescript-node:0-20", - "build": { - // Path is relataive to the devcontainer.json file. - "dockerfile": "Dockerfile" - }, - // https://github.com/microsoft/vscode-remote-release/issues/2485#issuecomment-1156342780 - "runArgs": [ - "--name", - "devcontainer-${containerWorkspaceFolderBasename}" - ], - "initializeCommand": "docker rm -f devcontainer-${containerWorkspaceFolderBasename} || true", - // Features to add to the dev container. More info: https://containers.dev/features. - "features": { - "ghcr.io/devcontainers/features/git:1": {}, - "ghcr.io/devcontainers/features/docker-in-docker:2": {}, - "ghcr.io/devcontainers/features/nix:1": {} - }, - // Use 'forwardPorts' to make a list of ports inside the container available locally. - // "forwardPorts": [], - // Use 'postCreateCommand' to run commands after the container is created. - // "postCreateCommand": "yarn install", - "postAttachCommand": { - "AddGitSafeDir": "git config --global --add safe.directory /workspaces/${containerWorkspaceFolderBasename}" - }, - "onCreateCommand": { - "nix-shell": "nix-shell --command 'echo done install packages'" - }, - // Configure tool-specific properties. - // "customizations": {}, - // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. - "remoteUser": "root", - "customizations": { - "vscode": { - "extensions": [ - "mutantdino.resourcemonitor", - "christian-kohler.path-intellisense", - "Gruntfuggly.todo-tree", - "ms-azuretools.vscode-docker", - "redhat.vscode-yaml", - "bradlc.vscode-tailwindcss", - "ms-vscode.vscode-typescript-next", - "esbenp.prettier-vscode", - "GitHub.copilot", - "GitHub.copilot-chat" - ] - } - } -} \ No newline at end of file + "name": "Node.js & TypeScript", + // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile + // "image": "mcr.microsoft.com/devcontainers/typescript-node:0-20", + "build": { + // Path is relataive to the devcontainer.json file. + "dockerfile": "Dockerfile" + }, + // https://github.com/microsoft/vscode-remote-release/issues/2485#issuecomment-1156342780 + "runArgs": ["--name", "devcontainer-${containerWorkspaceFolderBasename}"], + "initializeCommand": "docker rm -f devcontainer-${containerWorkspaceFolderBasename} || true", + // Features to add to the dev container. More info: https://containers.dev/features. + "features": { + "ghcr.io/devcontainers/features/git:1": {}, + "ghcr.io/devcontainers/features/docker-in-docker:2": {}, + "ghcr.io/devcontainers/features/nix:1": {} + }, + // Use 'forwardPorts' to make a list of ports inside the container available locally. + // "forwardPorts": [], + // Use 'postCreateCommand' to run commands after the container is created. + // "postCreateCommand": "yarn install", + "postAttachCommand": { + "AddGitSafeDir": "git config --global --add safe.directory /workspaces/${containerWorkspaceFolderBasename}" + }, + "onCreateCommand": { + "nix-shell": "nix-shell --command 'echo done install packages'" + }, + // Configure tool-specific properties. + // "customizations": {}, + // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. + "remoteUser": "root", + "customizations": { + "vscode": { + "extensions": [ + "mutantdino.resourcemonitor", + "christian-kohler.path-intellisense", + "Gruntfuggly.todo-tree", + "ms-azuretools.vscode-docker", + "redhat.vscode-yaml", + "bradlc.vscode-tailwindcss", + "ms-vscode.vscode-typescript-next", + "esbenp.prettier-vscode", + "GitHub.copilot", + "GitHub.copilot-chat" + ] + } + } +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index df7d3b8..37c2e84 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -22,6 +22,8 @@ Install docker, vscode and the [Dev Containers Extension](https://marketplace.vi `npx npm-check-updates -u` +make sure to run `npx prettier . --write` before committing + # License All code in this repository is dual-licensed under either [License-MIT](./LICENSE-MIT) or [LICENSE-APACHE](./LICENSE-Apache) at your option. This means you can select the license you prefer. [Why dual license](https://github.com/bevyengine/bevy/issues/2373) diff --git a/README.md b/README.md index e8bff19..59f72c4 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,8 @@ POSTGRES_DB=url # surrealdb DB_USER=root DB_PASSWORD=root + +OVERRIDE_URL=s.nexv.dev ``` # License diff --git a/components.json b/components.json index e4478b2..9176191 100644 --- a/components.json +++ b/components.json @@ -13,4 +13,4 @@ "components": "@/components", "utils": "@/lib/utils" } -} \ No newline at end of file +} diff --git a/docker-compose-postgres.dev.yml b/docker-compose-postgres.dev.yml index 47a2fee..90973dd 100644 --- a/docker-compose-postgres.dev.yml +++ b/docker-compose-postgres.dev.yml @@ -1,36 +1,36 @@ version: "3" services: - next-url-shortener: - container_name: next-url-shortener - build: . - env_file: - - .env - ports: - - 3000:3000 - depends_on: - - postgres - networks: - - postgres + next-url-shortener: + container_name: next-url-shortener + build: . + env_file: + - .env + ports: + - 3000:3000 + depends_on: + - postgres + networks: + - postgres - postgres: - container_name: postgres - image: postgres:latest - env_file: - - .env - restart: always - deploy: - resources: - reservations: - cpus: 1 - ports: - - 5432:5432 - volumes: - - ./data/postgres:/var/lib/postgresql/data - networks: - - postgres + postgres: + container_name: postgres + image: postgres:latest + env_file: + - .env + restart: always + deploy: + resources: + reservations: + cpus: 1 + ports: + - 5432:5432 + volumes: + - ./data/postgres:/var/lib/postgresql/data + networks: + - postgres volumes: - data: + data: networks: - postgres: + postgres: diff --git a/docker-compose-postgres.yml b/docker-compose-postgres.yml index e1685d8..5e556de 100644 --- a/docker-compose-postgres.yml +++ b/docker-compose-postgres.yml @@ -1,36 +1,36 @@ version: "3" services: - next-url-shortener: - container_name: next-url-shortener - image: ghcr.io/nexveridian/next-url-shortener:latest - env_file: - - .env - ports: - - 3000:3000 - depends_on: - - postgres - networks: - - postgres + next-url-shortener: + container_name: next-url-shortener + image: ghcr.io/nexveridian/next-url-shortener:latest + env_file: + - .env + ports: + - 3000:3000 + depends_on: + - postgres + networks: + - postgres - postgres: - container_name: postgres - image: postgres:latest - env_file: - - .env - restart: always - deploy: - resources: - reservations: - cpus: 1 - ports: - - 5432:5432 - volumes: - - ./data/postgres:/var/lib/postgresql/data - networks: - - postgres + postgres: + container_name: postgres + image: postgres:latest + env_file: + - .env + restart: always + deploy: + resources: + reservations: + cpus: 1 + ports: + - 5432:5432 + volumes: + - ./data/postgres:/var/lib/postgresql/data + networks: + - postgres volumes: - data: + data: networks: - postgres: + postgres: diff --git a/docker-compose-surrealdb.dev.yml b/docker-compose-surrealdb.dev.yml index 6644956..9ebd7de 100644 --- a/docker-compose-surrealdb.dev.yml +++ b/docker-compose-surrealdb.dev.yml @@ -1,43 +1,43 @@ version: "3" services: - nextjs: - build: . - env_file: - - .env - ports: - - "3000:3000" - depends_on: - - surrealdb - networks: - - surrealdb + nextjs: + build: . + env_file: + - .env + ports: + - "3000:3000" + depends_on: + - surrealdb + networks: + - surrealdb - surrealdb: - container_name: surrealdb - image: surrealdb/surrealdb:latest-dev - env_file: - - .env - entrypoint: - - /surreal - - start - - --user - - $DB_USER - - --pass - - $DB_PASSWORD - - file:/data/surrealdb - restart: always - deploy: - resources: - reservations: - cpus: "1" - ports: - - 8000:8000 - volumes: - - ./data:/data - networks: - - surrealdb + surrealdb: + container_name: surrealdb + image: surrealdb/surrealdb:latest-dev + env_file: + - .env + entrypoint: + - /surreal + - start + - --user + - $DB_USER + - --pass + - $DB_PASSWORD + - file:/data/surrealdb + restart: always + deploy: + resources: + reservations: + cpus: "1" + ports: + - 8000:8000 + volumes: + - ./data:/data + networks: + - surrealdb volumes: - data: + data: networks: - surrealdb: + surrealdb: diff --git a/docker-compose-surrealdb.yml b/docker-compose-surrealdb.yml index cc2db28..034ada0 100644 --- a/docker-compose-surrealdb.yml +++ b/docker-compose-surrealdb.yml @@ -1,44 +1,44 @@ version: "3" services: - next-url-shortener: - container_name: next-url-shortener - image: ghcr.io/nexveridian/next-url-shortener:latest - env_file: - - .env - ports: - - 3000:3000 - depends_on: - - surrealdb - networks: - - surrealdb + next-url-shortener: + container_name: next-url-shortener + image: ghcr.io/nexveridian/next-url-shortener:latest + env_file: + - .env + ports: + - 3000:3000 + depends_on: + - surrealdb + networks: + - surrealdb - surrealdb: - container_name: surrealdb - image: surrealdb/surrealdb:latest-dev - env_file: - - .env - entrypoint: - - /surreal - - start - - --user - - $DB_USER - - --pass - - $DB_PASSWORD - - file:/data/surrealdb - restart: always - deploy: - resources: - reservations: - cpus: 1 - ports: - - 8000:8000 - volumes: - - ./data:/data - networks: - - surrealdb + surrealdb: + container_name: surrealdb + image: surrealdb/surrealdb:latest-dev + env_file: + - .env + entrypoint: + - /surreal + - start + - --user + - $DB_USER + - --pass + - $DB_PASSWORD + - file:/data/surrealdb + restart: always + deploy: + resources: + reservations: + cpus: 1 + ports: + - 8000:8000 + volumes: + - ./data:/data + networks: + - surrealdb volumes: - data: + data: networks: - surrealdb: + surrealdb: diff --git a/next.config.js b/next.config.js index 7ad78ee..c10e07d 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - output: "standalone", -} + output: "standalone", +}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/package.json b/package.json index 059866a..04d2ed3 100644 --- a/package.json +++ b/package.json @@ -47,4 +47,4 @@ "tailwindcss": "^3.4.3", "typescript": "^5" } -} \ No newline at end of file +} diff --git a/postcss.config.js b/postcss.config.js index 33ad091..12a703d 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -3,4 +3,4 @@ module.exports = { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/src/app/[slug]/db.tsx b/src/app/[slug]/db.tsx index cd1064f..07ea8ca 100644 --- a/src/app/[slug]/db.tsx +++ b/src/app/[slug]/db.tsx @@ -1,17 +1,22 @@ "use server"; -import { initConnectionPostgres, initConnectionSurreal } from "@/components/db-utils"; +import { + initConnectionPostgres, + initConnectionSurreal, +} from "@/components/db-utils"; export async function querydb(slug: string) { let long_url = undefined; try { if (process.env.DB_TYPE === "surrealdb") { - let db = await initConnectionSurreal(); - let long_url = await db.query(` + let long_url = await db.query( + ` update url:[$id] set clicks = clicks + 1; select * from url:[$id]; - `, { id: slug }); + `, + { id: slug }, + ); // @ts-ignore long_url = long_url[0][0].long_url; diff --git a/src/app/create/create.tsx b/src/app/create/create.tsx index 0391ce4..34660ad 100644 --- a/src/app/create/create.tsx +++ b/src/app/create/create.tsx @@ -5,7 +5,7 @@ import { CardContent, CardFooter, CardHeader, - CardTitle + CardTitle, } from "@/components/ui/card"; import { Form, @@ -13,7 +13,7 @@ import { FormField, FormItem, FormLabel, - FormMessage + FormMessage, } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { @@ -31,7 +31,7 @@ import { formSchema } from "./schema"; const initialState = { url: null, -} +}; export default function CreateCard() { // @ts-ignore @@ -46,7 +46,10 @@ export default function CreateCard() { const handleCopyUrl = () => { if (state && state.url) { - const currentSiteName = window.location.hostname; + const currentSiteName = + process.env.OVERRIDE_URL !== undefined + ? process.env.OVERRIDE_URL + : window.location.hostname; let url = undefined; if (currentSiteName === "localhost" || currentSiteName === "0.0.0.0") { @@ -56,10 +59,9 @@ export default function CreateCard() { url = `https://${currentSiteName}/${state.url.toString()}`; } - navigator.clipboard.writeText(url) - .catch(err => { - console.error('Failed to copy URL to clipboard:', err); - }); + navigator.clipboard.writeText(url).catch((err) => { + console.error("Failed to copy URL to clipboard:", err); + }); } }; @@ -73,7 +75,11 @@ export default function CreateCard() {
{/* @ts-ignore */} - + Enter a url - + @@ -92,7 +98,9 @@ export default function CreateCard() { - + {state && state.url && ( @@ -101,9 +109,7 @@ export default function CreateCard() { -

- Url added to clipboard -

+

Url added to clipboard

 )} diff --git a/src/app/create/db.tsx b/src/app/create/db.tsx index 502333c..b3528df 100644 --- a/src/app/create/db.tsx +++ b/src/app/create/db.tsx @@ -1,10 +1,14 @@ "use server"; -import { initConnectionPostgres, initConnectionSurreal } from "@/components/db-utils"; +import { + initConnectionPostgres, + initConnectionSurreal, +} from "@/components/db-utils"; import { formSchema } from "./schema"; function generateRandomString(length: number) { - const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - let randomString = ''; + const charset = + "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + let randomString = ""; for (let i = 0; i < length; i++) { const randomIndex = Math.floor(Math.random() * charset.length); randomString += charset[randomIndex]; @@ -13,7 +17,7 @@ function generateRandomString(length: number) { } export async function querydb(prevState: any, formData: FormData) { - const values = formSchema.safeParse(formData) + const values = formSchema.safeParse(formData); if (!values.success) { return { error: values.error }; } @@ -23,16 +27,19 @@ export async function querydb(prevState: any, formData: FormData) { try { if (process.env.DB_TYPE === "surrealdb") { let db = await initConnectionSurreal(); - url = await db.query(` + url = await db.query( + ` create url:[rand::string(8)] CONTENT { long_url: $long_url, clicks: 0, date_added: time::now(), date_accessed: { time::now() } } return id[0]; - `, { - long_url: long_url.replace("https://", "").replace("http://", "") - }); + `, + { + long_url: long_url.replace("https://", "").replace("http://", ""), + }, + ); // @ts-ignore url = url[0][0].id; } diff --git a/src/app/create/schema.tsx b/src/app/create/schema.tsx index 06f4a12..6b0c395 100644 --- a/src/app/create/schema.tsx +++ b/src/app/create/schema.tsx @@ -1,8 +1,8 @@ import { z } from "zod"; export const formSchema = z.object({ - url: z.string().min(4, - { message: "The URL must be at least 4 characters long" } - ).max(100 - , { message: "The URL must be at most 100 characters long" }), + url: z + .string() + .min(4, { message: "The URL must be at least 4 characters long" }) + .max(100, { message: "The URL must be at most 100 characters long" }), }); diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx index c4a167a..f477eca 100644 --- a/src/app/global-error.tsx +++ b/src/app/global-error.tsx @@ -1,21 +1,19 @@ "use client"; import CardGrid from "@/components/card-grid"; -import { - Card, - CardHeader, - CardTitle -} from "@/components/ui/card"; +import { Card, CardHeader, CardTitle } from "@/components/ui/card"; export default function GlobalError({ error, }: { - error: Error & { digest?: string } + error: Error & { digest?: string }; }) { return ( - Error + {String(error)} + + Error + {String(error)} + diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index 445abf5..838cec8 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -1,17 +1,15 @@ "use client"; import CardGrid from "@/components/card-grid"; -import { - Card, - CardHeader, - CardTitle -} from "@/components/ui/card"; +import { Card, CardHeader, CardTitle } from "@/components/ui/card"; export default function NotFound() { return ( - 404 - Not Found + + 404 - Not Found + diff --git a/src/app/page.tsx b/src/app/page.tsx index 2bcea2f..899d9da 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,6 @@ "use client"; import CardGrid from "@/components/card-grid"; -import { - Card, - CardHeader, - CardTitle -} from "@/components/ui/card"; +import { Card, CardHeader, CardTitle } from "@/components/ui/card"; import Link from "next/link"; import CreateCard from "./create/create"; diff --git a/src/app/stats/data-table.tsx b/src/app/stats/data-table.tsx index 1cab87d..464a06e 100644 --- a/src/app/stats/data-table.tsx +++ b/src/app/stats/data-table.tsx @@ -11,7 +11,7 @@ import { ColumnDef, flexRender, getCoreRowModel, - useReactTable + useReactTable, } from "@tanstack/react-table"; interface DataTableProps { @@ -42,11 +42,11 @@ export function DataTable({ {header.isPlaceholder ? null : flexRender( - header.column.columnDef.header, - header.getContext() - )} + header.column.columnDef.header, + header.getContext(), + )} - ) + ); })} ))} diff --git a/src/app/stats/db.tsx b/src/app/stats/db.tsx index cfe9227..7fadd27 100644 --- a/src/app/stats/db.tsx +++ b/src/app/stats/db.tsx @@ -1,5 +1,8 @@ "use server"; -import { initConnectionPostgres, initConnectionSurreal } from "@/components/db-utils"; +import { + initConnectionPostgres, + initConnectionSurreal, +} from "@/components/db-utils"; export async function querydb() { try { diff --git a/src/app/stats/loading.tsx b/src/app/stats/loading.tsx index 64b508a..ee91dc7 100644 --- a/src/app/stats/loading.tsx +++ b/src/app/stats/loading.tsx @@ -1,10 +1,6 @@ "use client"; import CardGrid from "@/components/card-grid"; -import { - Card, - CardHeader, - CardTitle -} from "@/components/ui/card"; +import { Card, CardHeader, CardTitle } from "@/components/ui/card"; export default function Loading() { return ( diff --git a/src/app/stats/page.tsx b/src/app/stats/page.tsx index 8256a45..09f16a8 100644 --- a/src/app/stats/page.tsx +++ b/src/app/stats/page.tsx @@ -22,14 +22,14 @@ export default function StatsPage() { if (data.length !== 0 && data !== undefined && data !== null) { const formatDate = (dateString: string | number | Date) => { const date = new Date(dateString); - const day = String(date.getDate()).padStart(2, '0'); - const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, "0"); + const month = String(date.getMonth() + 1).padStart(2, "0"); const year = String(date.getFullYear()).slice(-2); return `${month}/${day}/${year}`; }; // @ts-ignore - data = data.map(item => ({ + data = data.map((item) => ({ // @ts-ignore ...item, // @ts-ignore @@ -37,7 +37,7 @@ export default function StatsPage() { // @ts-ignore date_added: formatDate(item.date_added), // @ts-ignore - id: item.id.replace(/^url:\['(.*)'\]$/, '$1') + id: item.id.replace(/^url:\['(.*)'\]$/, "$1"), })); } diff --git a/src/components/card-grid.tsx b/src/components/card-grid.tsx index d4d2685..da5066e 100644 --- a/src/components/card-grid.tsx +++ b/src/components/card-grid.tsx @@ -28,10 +28,7 @@ export default function CardGrid({ className = baseClassName + " " + className; } return ( -
+
{children}
); diff --git a/src/components/db-utils.tsx b/src/components/db-utils.tsx index deeb4c4..6d50f6f 100644 --- a/src/components/db-utils.tsx +++ b/src/components/db-utils.tsx @@ -1,5 +1,5 @@ "use server"; -import postgres, { Sql } from 'postgres'; +import postgres, { Sql } from "postgres"; import { Surreal } from "surrealdb.js"; const db = new Surreal(); @@ -29,7 +29,7 @@ export async function initConnectionPostgres(): Promise> { password: process.env.POSTGRES_PASSWORD || "root", database: process.env.POSTGRES_DB || "url", max: 100, - onnotice: () => { }, + onnotice: () => {}, }); return sql; } diff --git a/src/components/nav.tsx b/src/components/nav.tsx index 89f9f59..bf09847 100644 --- a/src/components/nav.tsx +++ b/src/components/nav.tsx @@ -17,10 +17,11 @@ export default async function Nav() { Stats
-
- GitHub + + GitHub +
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 97f1b7f..b799898 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -1,8 +1,8 @@ -import { Slot } from "@radix-ui/react-slot" -import { cva, type VariantProps } from "class-variance-authority" -import * as React from "react" +import { Slot } from "@radix-ui/react-slot"; +import { cva, type VariantProps } from "class-variance-authority"; +import * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/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", @@ -31,27 +31,27 @@ const buttonVariants = cva( variant: "default", size: "default", }, - } -) + }, +); export interface ButtonProps extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean + VariantProps { + asChild?: boolean; } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button" + const Comp = asChild ? Slot : "button"; return ( - ) - } -) -Button.displayName = "Button" + ); + }, +); +Button.displayName = "Button"; -export { Button, buttonVariants } +export { Button, buttonVariants }; diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index a36f130..a34b892 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -1,6 +1,6 @@ -import * as React from "react" +import * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const Card = React.forwardRef< HTMLDivElement, @@ -10,12 +10,12 @@ const Card = React.forwardRef< ref={ref} className={cn( "rounded-xl border bg-card text-card-foreground shadow", - className + className, )} {...props} /> -)) -Card.displayName = "Card" +)); +Card.displayName = "Card"; const CardHeader = React.forwardRef< HTMLDivElement, @@ -26,8 +26,8 @@ const CardHeader = React.forwardRef< className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} /> -)) -CardHeader.displayName = "CardHeader" +)); +CardHeader.displayName = "CardHeader"; const CardTitle = React.forwardRef< HTMLParagraphElement, @@ -38,8 +38,8 @@ const CardTitle = React.forwardRef< className={cn("font-semibold leading-none tracking-tight", className)} {...props} /> -)) -CardTitle.displayName = "CardTitle" +)); +CardTitle.displayName = "CardTitle"; const CardDescription = React.forwardRef< HTMLParagraphElement, @@ -50,16 +50,16 @@ const CardDescription = React.forwardRef< className={cn("text-sm text-muted-foreground", className)} {...props} /> -)) -CardDescription.displayName = "CardDescription" +)); +CardDescription.displayName = "CardDescription"; const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
-)) -CardContent.displayName = "CardContent" +)); +CardContent.displayName = "CardContent"; const CardFooter = React.forwardRef< HTMLDivElement, @@ -70,7 +70,14 @@ const CardFooter = React.forwardRef< className={cn("flex items-center p-6 pt-0", className)} {...props} /> -)) -CardFooter.displayName = "CardFooter" +)); +CardFooter.displayName = "CardFooter"; -export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } +export { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +}; diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx index d9b2242..725daa8 100644 --- a/src/components/ui/dropdown-menu.tsx +++ b/src/components/ui/dropdown-menu.tsx @@ -1,29 +1,29 @@ -import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; import { CheckIcon, ChevronRightIcon, DotFilledIcon, -} from "@radix-ui/react-icons" -import * as React from "react" +} from "@radix-ui/react-icons"; +import * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; -const DropdownMenu = DropdownMenuPrimitive.Root +const DropdownMenu = DropdownMenuPrimitive.Root; -const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; -const DropdownMenuGroup = DropdownMenuPrimitive.Group +const DropdownMenuGroup = DropdownMenuPrimitive.Group; -const DropdownMenuPortal = DropdownMenuPrimitive.Portal +const DropdownMenuPortal = DropdownMenuPrimitive.Portal; -const DropdownMenuSub = DropdownMenuPrimitive.Sub +const DropdownMenuSub = DropdownMenuPrimitive.Sub; -const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, children, ...props }, ref) => ( {children} -)) +)); DropdownMenuSubTrigger.displayName = - DropdownMenuPrimitive.SubTrigger.displayName + DropdownMenuPrimitive.SubTrigger.displayName; const DropdownMenuSubContent = React.forwardRef< React.ElementRef, @@ -50,13 +50,13 @@ const DropdownMenuSubContent = React.forwardRef< ref={ref} className={cn( "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", - className + className, )} {...props} /> -)) +)); DropdownMenuSubContent.displayName = - DropdownMenuPrimitive.SubContent.displayName + DropdownMenuPrimitive.SubContent.displayName; const DropdownMenuContent = React.forwardRef< React.ElementRef, @@ -69,18 +69,18 @@ const DropdownMenuContent = React.forwardRef< className={cn( "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", - className + className, )} {...props} /> -)) -DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName +)); +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName; const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, ...props }, ref) => ( -)) -DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName +)); +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName; const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, @@ -103,7 +103,7 @@ const DropdownMenuCheckboxItem = React.forwardRef< ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", - className + className, )} checked={checked} {...props} @@ -115,9 +115,9 @@ const DropdownMenuCheckboxItem = React.forwardRef< {children} -)) +)); DropdownMenuCheckboxItem.displayName = - DropdownMenuPrimitive.CheckboxItem.displayName + DropdownMenuPrimitive.CheckboxItem.displayName; const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, @@ -127,7 +127,7 @@ const DropdownMenuRadioItem = React.forwardRef< ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", - className + className, )} {...props} > @@ -138,13 +138,13 @@ const DropdownMenuRadioItem = React.forwardRef< {children} -)) -DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName +)); +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName; const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, ...props }, ref) => ( -)) -DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName +)); +DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName; const DropdownMenuSeparator = React.forwardRef< React.ElementRef, @@ -168,8 +168,8 @@ const DropdownMenuSeparator = React.forwardRef< className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} /> -)) -DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName +)); +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName; const DropdownMenuShortcut = ({ className, @@ -180,13 +180,24 @@ const DropdownMenuShortcut = ({ className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} /> - ) -} -DropdownMenuShortcut.displayName = "DropdownMenuShortcut" + ); +}; +DropdownMenuShortcut.displayName = "DropdownMenuShortcut"; export { - DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, - DropdownMenuShortcut, DropdownMenuSub, + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuPortal, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, DropdownMenuSubContent, - DropdownMenuSubTrigger, DropdownMenuTrigger -} + DropdownMenuSubTrigger, + DropdownMenuTrigger, +}; diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx index 5b5331c..b2ce0bb 100644 --- a/src/components/ui/form.tsx +++ b/src/components/ui/form.tsx @@ -1,6 +1,6 @@ -import * as LabelPrimitive from "@radix-ui/react-label" -import { Slot } from "@radix-ui/react-slot" -import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label"; +import { Slot } from "@radix-ui/react-slot"; +import * as React from "react"; import { Controller, ControllerProps, @@ -8,27 +8,27 @@ import { FieldValues, FormProvider, useFormContext, -} from "react-hook-form" +} from "react-hook-form"; -import { Label } from "@/components/ui/label" -import { cn } from "@/lib/utils" +import { Label } from "@/components/ui/label"; +import { cn } from "@/lib/utils"; -const Form = FormProvider +const Form = FormProvider; type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath + TName extends FieldPath = FieldPath, > = { - name: TName -} + name: TName; +}; const FormFieldContext = React.createContext( - {} as FormFieldContextValue -) + {} as FormFieldContextValue, +); const FormField = < TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath + TName extends FieldPath = FieldPath, >({ ...props }: ControllerProps) => { @@ -36,21 +36,21 @@ const FormField = < - ) -} + ); +}; const useFormField = () => { - const fieldContext = React.useContext(FormFieldContext) - const itemContext = React.useContext(FormItemContext) - const { getFieldState, formState } = useFormContext() + const fieldContext = React.useContext(FormFieldContext); + const itemContext = React.useContext(FormItemContext); + const { getFieldState, formState } = useFormContext(); - const fieldState = getFieldState(fieldContext.name, formState) + const fieldState = getFieldState(fieldContext.name, formState); if (!fieldContext) { - throw new Error("useFormField should be used within ") + throw new Error("useFormField should be used within "); } - const { id } = itemContext + const { id } = itemContext; return { id, @@ -59,36 +59,36 @@ const useFormField = () => { formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, - } -} + }; +}; type FormItemContextValue = { - id: string -} + id: string; +}; const FormItemContext = React.createContext( - {} as FormItemContextValue -) + {} as FormItemContextValue, +); const FormItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { - const id = React.useId() + const id = React.useId(); return (
- ) -}) -FormItem.displayName = "FormItem" + ); +}); +FormItem.displayName = "FormItem"; const FormLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { - const { error, formItemId } = useFormField() + const { error, formItemId } = useFormField(); return (
-)) -Table.displayName = "Table" +)); +Table.displayName = "Table"; const TableHeader = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -)) -TableHeader.displayName = "TableHeader" +)); +TableHeader.displayName = "TableHeader"; const TableBody = React.forwardRef< HTMLTableSectionElement, @@ -33,8 +33,8 @@ const TableBody = React.forwardRef< className={cn("[&_tr:last-child]:border-0", className)} {...props} /> -)) -TableBody.displayName = "TableBody" +)); +TableBody.displayName = "TableBody"; const TableFooter = React.forwardRef< HTMLTableSectionElement, @@ -44,12 +44,12 @@ const TableFooter = React.forwardRef< ref={ref} className={cn( "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", - className + className, )} {...props} /> -)) -TableFooter.displayName = "TableFooter" +)); +TableFooter.displayName = "TableFooter"; const TableRow = React.forwardRef< HTMLTableRowElement, @@ -59,12 +59,12 @@ const TableRow = React.forwardRef< ref={ref} className={cn( "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", - className + className, )} {...props} /> -)) -TableRow.displayName = "TableRow" +)); +TableRow.displayName = "TableRow"; const TableHead = React.forwardRef< HTMLTableCellElement, @@ -74,12 +74,12 @@ const TableHead = React.forwardRef< ref={ref} className={cn( "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", - className + className, )} {...props} /> -)) -TableHead.displayName = "TableHead" +)); +TableHead.displayName = "TableHead"; const TableCell = React.forwardRef< HTMLTableCellElement, @@ -89,12 +89,12 @@ const TableCell = React.forwardRef< ref={ref} className={cn( "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", - className + className, )} {...props} /> -)) -TableCell.displayName = "TableCell" +)); +TableCell.displayName = "TableCell"; const TableCaption = React.forwardRef< HTMLTableCaptionElement, @@ -105,10 +105,16 @@ const TableCaption = React.forwardRef< className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} /> -)) -TableCaption.displayName = "TableCaption" +)); +TableCaption.displayName = "TableCaption"; export { - Table, TableBody, TableCaption, TableCell, TableFooter, - TableHead, TableHeader, TableRow -} + Table, + TableBody, + TableCaption, + TableCell, + TableFooter, + TableHead, + TableHeader, + TableRow, +}; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index ec79801..365058c 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,6 +1,6 @@ -import { type ClassValue, clsx } from "clsx" -import { twMerge } from "tailwind-merge" - +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) + return twMerge(clsx(inputs)); } diff --git a/tailwind.config.ts b/tailwind.config.ts index 32d962e..d78447a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -2,11 +2,11 @@ module.exports = { darkMode: ["class"], content: [ - './pages/**/*.{ts,tsx}', - './components/**/*.{ts,tsx}', - './app/**/*.{ts,tsx}', - './src/**/*.{ts,tsx}', - ], + "./pages/**/*.{ts,tsx}", + "./components/**/*.{ts,tsx}", + "./app/**/*.{ts,tsx}", + "./src/**/*.{ts,tsx}", + ], theme: { container: { center: true, @@ -75,4 +75,4 @@ module.exports = { }, }, plugins: [require("tailwindcss-animate")], -} \ No newline at end of file +}; diff --git a/tsconfig.json b/tsconfig.json index 8e3a766..e59724b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -23,18 +19,9 @@ } ], "paths": { - "@/*": [ - "./src/*" - ] + "@/*": ["./src/*"] } }, - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx", - ".next/types/**/*.ts", - ], - "exclude": [ - "node_modules" - ] -} \ No newline at end of file + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +}