franpcode/Reflecto
1
0
Fork 0
mirror of https://github.com/FranP-code/Reflecto.git synced 2025-10-13 00:43:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Biome format

Browse Source
This commit is contained in:
Francisco Pessano
2025-09-03 12:43:51 -03:00
parent 5f6136a378
commit f005ae1c46
24 changed files with 125 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/server/src/db/schema/auth.ts
View File

@@ -1,4 +1,4 @@
import { pgTable, text, timestamp, boolean, serial } from "drizzle-orm/pg-core"; import { boolean, pgTable, serial, text, timestamp } from "drizzle-orm/pg-core";
export const user = pgTable("user", { export const user = pgTable("user", {
id: text("id").primaryKey(), id: text("id").primaryKey(),

11
apps/server/src/index.ts
View File

@@ -1,15 +1,14 @@
import "dotenv/config"; import "dotenv/config";
import { execSync } from "node:child_process";
import { join } from "node:path";
import { trpcServer } from "@hono/trpc-server"; import { trpcServer } from "@hono/trpc-server";
import { createContext } from "./lib/context";
import { appRouter } from "./routers/index";
import { auth } from "./lib/auth";
import { Hono } from "hono"; import { Hono } from "hono";
import { cors } from "hono/cors"; import { cors } from "hono/cors";
import { logger as honoLogger } from "hono/logger"; import { logger as honoLogger } from "hono/logger";
import { auth } from "./lib/auth";
import { join } from "node:path"; import { createContext } from "./lib/context";
import { execSync } from "node:child_process";
import { logger } from "./lib/logger"; import { logger } from "./lib/logger";
import { appRouter } from "./routers/index";
const app = new Hono(); const app = new Hono();

2
apps/server/src/lib/auth.ts
View File

@@ -7,7 +7,7 @@ export const auth = betterAuth({
database: drizzleAdapter(db, { database: drizzleAdapter(db, {
provider: "pg", provider: "pg",
schema: schema, schema,
}), }),
trustedOrigins: [process.env.CORS_ORIGIN || ""], trustedOrigins: [process.env.CORS_ORIGIN || ""],
emailAndPassword: { emailAndPassword: {

9
apps/web/src/components/mode-toggle.tsx
View File

@@ -1,5 +1,5 @@
import { Moon, Sun } from "lucide-react"; import { Moon, Sun } from "lucide-react";
import { useTheme } from "@/components/theme-provider";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
DropdownMenu, DropdownMenu,
@@ -7,7 +7,6 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { useTheme } from "@/components/theme-provider";
export function ModeToggle() { export function ModeToggle() {
const { setTheme } = useTheme(); const { setTheme } = useTheme();
@@ -15,9 +14,9 @@ export function ModeToggle() {
return ( return (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" size="icon"> <Button size="icon" variant="outline">
<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" /> <Sun className="dark:-rotate-90 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" /> <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span> <span className="sr-only">Toggle theme</span>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>

26
apps/web/src/components/sign-in-form.tsx
View File

@@ -1,8 +1,8 @@
import { authClient } from "@/lib/auth-client";
import { useForm } from "@tanstack/react-form"; import { useForm } from "@tanstack/react-form";
import { useNavigate } from "@tanstack/react-router"; import { useNavigate } from "@tanstack/react-router";
import { toast } from "sonner"; import { toast } from "sonner";
import z from "zod"; import z from "zod";
import { authClient } from "@/lib/auth-client";
import Loader from "./loader"; import Loader from "./loader";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { Input } from "./ui/input"; import { Input } from "./ui/input";
@@ -55,16 +55,16 @@ export default function SignInForm({
} }
return ( return (
<div className="mx-auto w-full mt-10 max-w-md p-6"> <div className="mx-auto mt-10 w-full max-w-md p-6">
<h1 className="mb-6 text-center text-3xl font-bold">Welcome Back</h1> <h1 className="mb-6 text-center font-bold text-3xl">Welcome Back</h1>
<form <form
className="space-y-4"
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
form.handleSubmit(); form.handleSubmit();
}} }}
className="space-y-4"
> >
<div> <div>
<form.Field name="email"> <form.Field name="email">
@@ -74,13 +74,13 @@ export default function SignInForm({
<Input <Input
id={field.name} id={field.name}
name={field.name} name={field.name}
type="email"
value={field.state.value}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={(e) => field.handleChange(e.target.value)}
type="email"
value={field.state.value}
/> />
{field.state.meta.errors.map((error) => ( {field.state.meta.errors.map((error) => (
<p key={error?.message} className="text-red-500"> <p className="text-red-500" key={error?.message}>
{error?.message} {error?.message}
</p> </p>
))} ))}
@@ -97,13 +97,13 @@ export default function SignInForm({
<Input <Input
id={field.name} id={field.name}
name={field.name} name={field.name}
type="password"
value={field.state.value}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={(e) => field.handleChange(e.target.value)}
type="password"
value={field.state.value}
/> />
{field.state.meta.errors.map((error) => ( {field.state.meta.errors.map((error) => (
<p key={error?.message} className="text-red-500"> <p className="text-red-500" key={error?.message}>
{error?.message} {error?.message}
</p> </p>
))} ))}
@@ -115,9 +115,9 @@ export default function SignInForm({
<form.Subscribe> <form.Subscribe>
{(state) => ( {(state) => (
<Button <Button
type="submit"
className="w-full" className="w-full"
disabled={!state.canSubmit || state.isSubmitting} disabled={!state.canSubmit || state.isSubmitting}
type="submit"
> >
{state.isSubmitting ? "Submitting..." : "Sign In"} {state.isSubmitting ? "Submitting..." : "Sign In"}
</Button> </Button>
@@ -127,9 +127,9 @@ export default function SignInForm({
<div className="mt-4 text-center"> <div className="mt-4 text-center">
<Button <Button
variant="link"
onClick={onSwitchToSignUp}
className="text-indigo-600 hover:text-indigo-800" className="text-indigo-600 hover:text-indigo-800"
onClick={onSwitchToSignUp}
variant="link"
> >
Need an account? Sign Up Need an account? Sign Up
</Button> </Button>

30
apps/web/src/components/sign-up-form.tsx
View File

@@ -1,8 +1,8 @@
import { authClient } from "@/lib/auth-client";
import { useForm } from "@tanstack/react-form"; import { useForm } from "@tanstack/react-form";
import { useNavigate } from "@tanstack/react-router"; import { useNavigate } from "@tanstack/react-router";
import { toast } from "sonner"; import { toast } from "sonner";
import z from "zod"; import z from "zod";
import { authClient } from "@/lib/auth-client";
import Loader from "./loader"; import Loader from "./loader";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { Input } from "./ui/input"; import { Input } from "./ui/input";
@@ -58,16 +58,16 @@ export default function SignUpForm({
} }
return ( return (
<div className="mx-auto w-full mt-10 max-w-md p-6"> <div className="mx-auto mt-10 w-full max-w-md p-6">
<h1 className="mb-6 text-center text-3xl font-bold">Create Account</h1> <h1 className="mb-6 text-center font-bold text-3xl">Create Account</h1>
<form <form
className="space-y-4"
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
form.handleSubmit(); form.handleSubmit();
}} }}
className="space-y-4"
> >
<div> <div>
<form.Field name="name"> <form.Field name="name">
@@ -77,12 +77,12 @@ export default function SignUpForm({
<Input <Input
id={field.name} id={field.name}
name={field.name} name={field.name}
value={field.state.value}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={(e) => field.handleChange(e.target.value)}
value={field.state.value}
/> />
{field.state.meta.errors.map((error) => ( {field.state.meta.errors.map((error) => (
<p key={error?.message} className="text-red-500"> <p className="text-red-500" key={error?.message}>
{error?.message} {error?.message}
</p> </p>
))} ))}
@@ -99,13 +99,13 @@ export default function SignUpForm({
<Input <Input
id={field.name} id={field.name}
name={field.name} name={field.name}
type="email"
value={field.state.value}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={(e) => field.handleChange(e.target.value)}
type="email"
value={field.state.value}
/> />
{field.state.meta.errors.map((error) => ( {field.state.meta.errors.map((error) => (
<p key={error?.message} className="text-red-500"> <p className="text-red-500" key={error?.message}>
{error?.message} {error?.message}
</p> </p>
))} ))}
@@ -122,13 +122,13 @@ export default function SignUpForm({
<Input <Input
id={field.name} id={field.name}
name={field.name} name={field.name}
type="password"
value={field.state.value}
onBlur={field.handleBlur} onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)} onChange={(e) => field.handleChange(e.target.value)}
type="password"
value={field.state.value}
/> />
{field.state.meta.errors.map((error) => ( {field.state.meta.errors.map((error) => (
<p key={error?.message} className="text-red-500"> <p className="text-red-500" key={error?.message}>
{error?.message} {error?.message}
</p> </p>
))} ))}
@@ -140,9 +140,9 @@ export default function SignUpForm({
<form.Subscribe> <form.Subscribe>
{(state) => ( {(state) => (
<Button <Button
type="submit"
className="w-full" className="w-full"
disabled={!state.canSubmit || state.isSubmitting} disabled={!state.canSubmit || state.isSubmitting}
type="submit"
> >
{state.isSubmitting ? "Submitting..." : "Sign Up"} {state.isSubmitting ? "Submitting..." : "Sign Up"}
</Button> </Button>
@@ -152,9 +152,9 @@ export default function SignUpForm({
<div className="mt-4 text-center"> <div className="mt-4 text-center">
<Button <Button
variant="link"
onClick={onSwitchToSignIn}
className="text-indigo-600 hover:text-indigo-800" className="text-indigo-600 hover:text-indigo-800"
onClick={onSwitchToSignIn}
variant="link"
> >
Already have an account? Sign In Already have an account? Sign In
</Button> </Button>

2
apps/web/src/components/theme-provider.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes"; import { ThemeProvider as NextThemesProvider } from "next-themes";
import type * as React from "react";
export function ThemeProvider({ export function ThemeProvider({
children, children,

14
apps/web/src/components/ui/button.tsx
View File

@@ -1,20 +1,20 @@
import * as React from "react";
import { Slot as SlotPrimitive } from "radix-ui";
import { cva, type VariantProps } from "class-variance-authority"; import { cva, type VariantProps } from "class-variance-authority";
import { Slot as SlotPrimitive } from "radix-ui";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
{ {
variants: { variants: {
variant: { variant: {
default: default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive: destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
outline: outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary: secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: ghost:
@@ -23,7 +23,7 @@ const buttonVariants = cva(
}, },
size: { size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3", default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4", lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9", icon: "size-9",
}, },
@@ -49,8 +49,8 @@ function Button({
return ( return (
<Comp <Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))} className={cn(buttonVariants({ variant, size, className }))}
data-slot="button"
{...props} {...props}
/> />
); );

18
apps/web/src/components/ui/card.tsx
View File

@@ -1,15 +1,15 @@
import * as React from "react"; import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
function Card({ className, ...props }: React.ComponentProps<"div">) { function Card({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="card"
className={cn( className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
className className
)} )}
data-slot="card"
{...props} {...props}
/> />
); );
@@ -18,11 +18,11 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
function CardHeader({ className, ...props }: React.ComponentProps<"div">) { function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="card-header"
className={cn( className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className className
)} )}
data-slot="card-header"
{...props} {...props}
/> />
); );
@@ -31,8 +31,8 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
function CardTitle({ className, ...props }: React.ComponentProps<"div">) { function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
className={cn("font-semibold leading-none", className)}
data-slot="card-title" data-slot="card-title"
className={cn("leading-none font-semibold", className)}
{...props} {...props}
/> />
); );
@@ -41,8 +41,8 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
function CardDescription({ className, ...props }: React.ComponentProps<"div">) { function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="card-description"
className={cn("text-muted-foreground text-sm", className)} className={cn("text-muted-foreground text-sm", className)}
data-slot="card-description"
{...props} {...props}
/> />
); );
@@ -51,11 +51,11 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
function CardAction({ className, ...props }: React.ComponentProps<"div">) { function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="card-action"
className={cn( className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end", "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className className
)} )}
data-slot="card-action"
{...props} {...props}
/> />
); );
@@ -64,8 +64,8 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
function CardContent({ className, ...props }: React.ComponentProps<"div">) { function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="card-content"
className={cn("px-6", className)} className={cn("px-6", className)}
data-slot="card-content"
{...props} {...props}
/> />
); );
@@ -74,8 +74,8 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
function CardFooter({ className, ...props }: React.ComponentProps<"div">) { function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="card-footer"
className={cn("flex items-center px-6 [.border-t]:pt-6", className)} className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
data-slot="card-footer"
{...props} {...props}
/> />
); );

10
apps/web/src/components/ui/checkbox.tsx
View File

@@ -1,6 +1,6 @@
import * as React from "react";
import { Checkbox as CheckboxPrimitive } from "radix-ui";
import { CheckIcon } from "lucide-react"; import { CheckIcon } from "lucide-react";
import { Checkbox as CheckboxPrimitive } from "radix-ui";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -10,16 +10,16 @@ function Checkbox({
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) { }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
return ( return (
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
data-slot="checkbox"
className={cn( className={cn(
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40",
className className
)} )}
data-slot="checkbox"
{...props} {...props}
> >
<CheckboxPrimitive.Indicator <CheckboxPrimitive.Indicator
data-slot="checkbox-indicator"
className="flex items-center justify-center text-current transition-none" className="flex items-center justify-center text-current transition-none"
data-slot="checkbox-indicator"
> >
<CheckIcon className="size-3.5" /> <CheckIcon className="size-3.5" />
</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Indicator>

50
apps/web/src/components/ui/dropdown-menu.tsx
View File

@@ -1,8 +1,8 @@
"use client"; "use client";
import * as React from "react";
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"; import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -39,12 +39,12 @@ function DropdownMenuContent({
return ( return (
<DropdownMenuPrimitive.Portal> <DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content <DropdownMenuPrimitive.Content
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
className={cn( className={cn(
"bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", "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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
className className
)} )}
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
{...props} {...props}
/> />
</DropdownMenuPrimitive.Portal> </DropdownMenuPrimitive.Portal>
@@ -70,13 +70,13 @@ function DropdownMenuItem({
}) { }) {
return ( return (
<DropdownMenuPrimitive.Item <DropdownMenuPrimitive.Item
data-slot="dropdown-menu-item"
data-inset={inset}
data-variant={variant}
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "data-[variant=destructive]:*:[svg]:!text-destructive relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[disabled]:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
className className
)} )}
data-inset={inset}
data-slot="dropdown-menu-item"
data-variant={variant}
{...props} {...props}
/> />
); );
@@ -90,12 +90,12 @@ function DropdownMenuCheckboxItem({
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) { }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
return ( return (
<DropdownMenuPrimitive.CheckboxItem <DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item" checked={checked}
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className className
)} )}
checked={checked} data-slot="dropdown-menu-checkbox-item"
{...props} {...props}
> >
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"> <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
@@ -126,11 +126,11 @@ function DropdownMenuRadioItem({
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) { }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
return ( return (
<DropdownMenuPrimitive.RadioItem <DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className className
)} )}
data-slot="dropdown-menu-radio-item"
{...props} {...props}
> >
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"> <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
@@ -152,12 +152,12 @@ function DropdownMenuLabel({
}) { }) {
return ( return (
<DropdownMenuPrimitive.Label <DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn( className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", "px-2 py-1.5 font-medium text-sm data-[inset]:pl-8",
className className
)} )}
data-inset={inset}
data-slot="dropdown-menu-label"
{...props} {...props}
/> />
); );
@@ -169,8 +169,8 @@ function DropdownMenuSeparator({
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) { }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return ( return (
<DropdownMenuPrimitive.Separator <DropdownMenuPrimitive.Separator
className={cn("-mx-1 my-1 h-px bg-border", className)}
data-slot="dropdown-menu-separator" data-slot="dropdown-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props} {...props}
/> />
); );
@@ -182,11 +182,11 @@ function DropdownMenuShortcut({
}: React.ComponentProps<"span">) { }: React.ComponentProps<"span">) {
return ( return (
<span <span
data-slot="dropdown-menu-shortcut"
className={cn( className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest", "ml-auto text-muted-foreground text-xs tracking-widest",
className className
)} )}
data-slot="dropdown-menu-shortcut"
{...props} {...props}
/> />
); );
@@ -208,12 +208,12 @@ function DropdownMenuSubTrigger({
}) { }) {
return ( return (
<DropdownMenuPrimitive.SubTrigger <DropdownMenuPrimitive.SubTrigger
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[inset]:pl-8 data-[state=open]:text-accent-foreground",
className className
)} )}
data-inset={inset}
data-slot="dropdown-menu-sub-trigger"
{...props} {...props}
> >
{children} {children}
@@ -228,11 +228,11 @@ function DropdownMenuSubContent({
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) { }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
return ( return (
<DropdownMenuPrimitive.SubContent <DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content"
className={cn( className={cn(
"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", "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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in",
className className
)} )}
data-slot="dropdown-menu-sub-content"
{...props} {...props}
/> />
); );

12
apps/web/src/components/ui/input.tsx
View File

@@ -1,18 +1,18 @@
import * as React from "react"; import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
function Input({ className, type, ...props }: React.ComponentProps<"input">) { function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return ( return (
<input <input
type={type}
data-slot="input"
className={cn( className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
className className
)} )}
data-slot="input"
type={type}
{...props} {...props}
/> />
); );

6
apps/web/src/components/ui/label.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { Label as LabelPrimitive } from "radix-ui"; import { Label as LabelPrimitive } from "radix-ui";
import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -9,11 +9,11 @@ function Label({
}: React.ComponentProps<typeof LabelPrimitive.Root>) { }: React.ComponentProps<typeof LabelPrimitive.Root>) {
return ( return (
<LabelPrimitive.Root <LabelPrimitive.Root
data-slot="label"
className={cn( className={cn(
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", "flex select-none items-center gap-2 font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
className className
)} )}
data-slot="label"
{...props} {...props}
/> />
); );

2
apps/web/src/components/ui/skeleton.tsx
View File

@@ -3,8 +3,8 @@ import { cn } from "@/lib/utils";
function Skeleton({ className, ...props }: React.ComponentProps<"div">) { function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
className={cn("animate-pulse rounded-md bg-accent", className)}
data-slot="skeleton" data-slot="skeleton"
className={cn("bg-accent animate-pulse rounded-md", className)}
{...props} {...props}
/> />
); );

2
apps/web/src/components/ui/sonner.tsx
View File

@@ -8,7 +8,6 @@ const Toaster = ({ ...props }: ToasterProps) => {
return ( return (
<Sonner <Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group" className="toaster group"
style={ style={
{ {
@@ -17,6 +16,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
"--normal-border": "var(--border)", "--normal-border": "var(--border)",
} as React.CSSProperties } as React.CSSProperties
} }
theme={theme as ToasterProps["theme"]}
{...props} {...props}
/> />
); );

7
apps/web/src/components/user-menu.tsx
View File

@@ -1,3 +1,4 @@
import { Link, useNavigate } from "@tanstack/react-router";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@@ -7,10 +8,8 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { authClient } from "@/lib/auth-client"; import { authClient } from "@/lib/auth-client";
import { useNavigate } from "@tanstack/react-router";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { Skeleton } from "./ui/skeleton"; import { Skeleton } from "./ui/skeleton";
import { Link } from "@tanstack/react-router";
export default function UserMenu() { export default function UserMenu() {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -22,7 +21,7 @@ export default function UserMenu() {
if (!session) { if (!session) {
return ( return (
<Button variant="outline" asChild> <Button asChild variant="outline">
<Link to="/login">Sign In</Link> <Link to="/login">Sign In</Link>
</Button> </Button>
); );
@@ -39,7 +38,6 @@ export default function UserMenu() {
<DropdownMenuItem>{session.user.email}</DropdownMenuItem> <DropdownMenuItem>{session.user.email}</DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Button <Button
variant="destructive"
className="w-full" className="w-full"
onClick={() => { onClick={() => {
authClient.signOut({ authClient.signOut({
@@ -52,6 +50,7 @@ export default function UserMenu() {
}, },
}); });
}} }}
variant="destructive"
> >
Sign Out Sign Out
</Button> </Button>

2
apps/web/src/lib/utils.ts
View File

@@ -1,4 +1,4 @@
import { clsx, type ClassValue } from "clsx"; import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {

7
apps/web/src/main.tsx
View File

@@ -1,9 +1,8 @@
import { RouterProvider, createRouter } from "@tanstack/react-router"; import { QueryClientProvider } from "@tanstack/react-query";
import { createRouter, RouterProvider } from "@tanstack/react-router";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import Loader from "./components/loader"; import Loader from "./components/loader";
import { routeTree } from "./routeTree.gen"; import { routeTree } from "./routeTree.gen";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient, trpc } from "./utils/trpc"; import { queryClient, trpc } from "./utils/trpc";
const router = createRouter({ const router = createRouter({
@@ -11,7 +10,7 @@ const router = createRouter({
defaultPreload: "intent", defaultPreload: "intent",
defaultPendingComponent: () => <Loader />, defaultPendingComponent: () => <Loader />,
context: { trpc, queryClient }, context: { trpc, queryClient },
Wrap: function WrapComponent({ children }: { children: React.ReactNode }) { Wrap({ children }: { children: React.ReactNode }) {
return ( return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider> <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
); );

22
apps/web/src/routes/__root.tsx
View File

@@ -1,17 +1,17 @@
import type { QueryClient } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import {
createRootRouteWithContext,
HeadContent,
Outlet,
useRouterState,
} from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import Header from "@/components/header"; import Header from "@/components/header";
import Loader from "@/components/loader"; import Loader from "@/components/loader";
import { ThemeProvider } from "@/components/theme-provider"; import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import type { trpc } from "@/utils/trpc"; import type { trpc } from "@/utils/trpc";
import type { QueryClient } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import {
HeadContent,
Outlet,
createRootRouteWithContext,
useRouterState,
} from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import "../index.css"; import "../index.css";
export interface RouterAppContext { export interface RouterAppContext {
@@ -54,14 +54,14 @@ function RootComponent() {
disableTransitionOnChange disableTransitionOnChange
storageKey="vite-ui-theme" storageKey="vite-ui-theme"
> >
<div className="grid grid-rows-[auto_1fr] h-svh"> <div className="grid h-svh grid-rows-[auto_1fr]">
<Header /> <Header />
{isFetching ? <Loader /> : <Outlet />} {isFetching ? <Loader /> : <Outlet />}
</div> </div>
<Toaster richColors /> <Toaster richColors />
</ThemeProvider> </ThemeProvider>
<TanStackRouterDevtools position="bottom-left" /> <TanStackRouterDevtools position="bottom-left" />
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" /> <ReactQueryDevtools buttonPosition="bottom-right" position="bottom" />
</> </>
); );
} }

6
apps/web/src/routes/dashboard.tsx
View File

@@ -1,8 +1,8 @@
import { authClient } from "@/lib/auth-client";
import { trpc } from "@/utils/trpc";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router"; import { createFileRoute } from "@tanstack/react-router";
import { useEffect } from "react"; import { useEffect } from "react";
import { authClient } from "@/lib/auth-client";
import { trpc } from "@/utils/trpc";
export const Route = createFileRoute("/dashboard")({ export const Route = createFileRoute("/dashboard")({
component: RouteComponent, component: RouteComponent,
@@ -16,7 +16,7 @@ function RouteComponent() {
const privateData = useQuery(trpc.privateData.queryOptions()); const privateData = useQuery(trpc.privateData.queryOptions());
useEffect(() => { useEffect(() => {
if (!session && !isPending) { if (!(session || isPending)) {
navigate({ navigate({
to: "/login", to: "/login",
}); });

4
apps/web/src/routes/index.tsx
View File

@@ -1,6 +1,6 @@
import { useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router"; import { createFileRoute } from "@tanstack/react-router";
import { trpc } from "@/utils/trpc"; import { trpc } from "@/utils/trpc";
import { useQuery } from "@tanstack/react-query";
export const Route = createFileRoute("/")({ export const Route = createFileRoute("/")({
component: HomeComponent, component: HomeComponent,
@@ -35,7 +35,7 @@ function HomeComponent() {
<div <div
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`} className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
/> />
<span className="text-sm text-muted-foreground"> <span className="text-muted-foreground text-sm">
{healthCheck.isLoading {healthCheck.isLoading
? "Checking..." ? "Checking..."
: healthCheck.data : healthCheck.data

4
apps/web/src/routes/login.tsx
View File

@@ -1,7 +1,7 @@
import SignInForm from "@/components/sign-in-form";
import SignUpForm from "@/components/sign-up-form";
import { createFileRoute } from "@tanstack/react-router"; import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react"; import { useState } from "react";
import SignInForm from "@/components/sign-in-form";
import SignUpForm from "@/components/sign-up-form";
export const Route = createFileRoute("/login")({ export const Route = createFileRoute("/login")({
component: RouteComponent, component: RouteComponent,

2
apps/web/src/utils/trpc.ts
View File

@@ -1,8 +1,8 @@
import type { AppRouter } from "../../../server/src/routers";
import { QueryCache, QueryClient } from "@tanstack/react-query"; import { QueryCache, QueryClient } from "@tanstack/react-query";
import { createTRPCClient, httpBatchLink } from "@trpc/client"; import { createTRPCClient, httpBatchLink } from "@trpc/client";
import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query"; import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
import { toast } from "sonner"; import { toast } from "sonner";
import type { AppRouter } from "../../../server/src/routers";
export const queryClient = new QueryClient({ export const queryClient = new QueryClient({
queryCache: new QueryCache({ queryCache: new QueryCache({

4
apps/web/vite.config.ts
View File

@@ -1,9 +1,9 @@
import { VitePWA } from "vite-plugin-pwa"; import path from "node:path";
import tailwindcss from "@tailwindcss/vite"; import tailwindcss from "@tailwindcss/vite";
import { tanstackRouter } from "@tanstack/router-plugin/vite"; import { tanstackRouter } from "@tanstack/router-plugin/vite";
import react from "@vitejs/plugin-react"; import react from "@vitejs/plugin-react";
import path from "node:path";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import { VitePWA } from "vite-plugin-pwa";
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [