+ ) +} + +function AlertDialogFooter({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( +

+ ) +} + +function AlertDialogTitle({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function AlertDialogDescription({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function AlertDialogAction({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function AlertDialogCancel({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..fd3a406 --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,46 @@ +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" + +const badgeVariants = cva( + "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", + secondary: + "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", + destructive: + "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + outline: + "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +function Badge({ + className, + variant, + asChild = false, + ...props +}: React.ComponentProps<"span"> & + VariantProps & { asChild?: boolean }) { + const Comp = asChild ? Slot : "span" + + return ( + + ) +} + +export { Badge, badgeVariants } diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx new file mode 100644 index 0000000..7686e13 --- /dev/null +++ b/src/components/ui/button.tsx @@ -0,0 +1,62 @@ +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' + +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", + { + variants: { + variant: { + default: 'bg-primary text-primary-foreground hover:bg-primary/90', + destructive: + 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', + 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', + secondary: + 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + ghost: + 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', + destructiveGhost: + 'text-destructive hover:bg-destructive/10 hover:text-destructive-foreground', + link: 'text-primary underline-offset-4 hover:underline', + }, + size: { + 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', + lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', + icon: 'size-9', + 'icon-sm': 'size-8', + 'icon-lg': 'size-10', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + }, +) + +function Button({ + className, + variant, + size, + asChild = false, + ...props +}: React.ComponentProps<'button'> & + VariantProps & { + asChild?: boolean + }) { + const Comp = asChild ? Slot : 'button' + + return ( + + ) +} + +export { Button, buttonVariants } diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx new file mode 100644 index 0000000..681ad98 --- /dev/null +++ b/src/components/ui/card.tsx @@ -0,0 +1,92 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Card({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +function CardHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +function CardTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +function CardDescription({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +function CardAction({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +function CardContent({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +function CardFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardAction, + CardDescription, + CardContent, +} diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx new file mode 100644 index 0000000..0e2a6cd --- /dev/null +++ b/src/components/ui/checkbox.tsx @@ -0,0 +1,30 @@ +import * as React from "react" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { CheckIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function Checkbox({ + className, + ...props +}: React.ComponentProps) { + return ( + + + + + + ) +} + +export { Checkbox } diff --git a/src/components/ui/empty.tsx b/src/components/ui/empty.tsx new file mode 100644 index 0000000..df91e9d --- /dev/null +++ b/src/components/ui/empty.tsx @@ -0,0 +1,104 @@ +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +function Empty({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +const emptyMediaVariants = cva( + "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0", + { + variants: { + variant: { + default: "bg-transparent", + icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +function EmptyMedia({ + className, + variant = "default", + ...props +}: React.ComponentProps<"div"> & VariantProps) { + return ( +

+ ) +} + +function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) { + return ( +

a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4", + className + )} + {...props} + /> + ) +} + +function EmptyContent({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +export { + Empty, + EmptyHeader, + EmptyTitle, + EmptyDescription, + EmptyContent, + EmptyMedia, +} diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..8916905 --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,21 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Input({ className, type, ...props }: React.ComponentProps<"input">) { + return ( + + ) +} + +export { Input } diff --git a/src/components/ui/loading-swap.tsx b/src/components/ui/loading-swap.tsx new file mode 100644 index 0000000..83b6ec1 --- /dev/null +++ b/src/components/ui/loading-swap.tsx @@ -0,0 +1,36 @@ +import { cn } from "@/lib/utils" +import { Loader2Icon } from "lucide-react" +import type { ReactNode } from "react" + +export function LoadingSwap({ + isLoading, + children, + className, +}: { + isLoading: boolean + children: ReactNode + className?: string +}) { + return ( +

+ {children} +

+ +

+ ) +} diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx new file mode 100644 index 0000000..9f46e06 --- /dev/null +++ b/src/components/ui/sonner.tsx @@ -0,0 +1,38 @@ +import { + CircleCheckIcon, + InfoIcon, + Loader2Icon, + OctagonXIcon, + TriangleAlertIcon, +} from "lucide-react" +import { useTheme } from "next-themes" +import { Toaster as Sonner, type ToasterProps } from "sonner" + +const Toaster = ({ ...props }: ToasterProps) => { + const { theme = "system" } = useTheme() + + return ( + , + info: , + warning: , + error: , + loading: , + }} + style={ + { + "--normal-bg": "var(--popover)", + "--normal-text": "var(--popover-foreground)", + "--normal-border": "var(--border)", + "--border-radius": "var(--radius)", + } as React.CSSProperties + } + {...props} + /> + ) +} + +export { Toaster } diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx new file mode 100644 index 0000000..5513a5c --- /dev/null +++ b/src/components/ui/table.tsx @@ -0,0 +1,114 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Table({ className, ...props }: React.ComponentProps<"table">) { + return ( +

+ + + ) +} + +function TableHeader({ className, ...props }: React.ComponentProps<"thead">) { + return ( + + ) +} + +function TableBody({ className, ...props }: React.ComponentProps<"tbody">) { + return ( + + ) +} + +function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) { + return ( + tr]:last:border-b-0", + className + )} + {...props} + /> + ) +} + +function TableRow({ className, ...props }: React.ComponentProps<"tr">) { + return ( + + ) +} + +function TableHead({ className, ...props }: React.ComponentProps<"th">) { + return ( +

[role=checkbox]]:translate-y-[2px]", + className + )} + {...props} + /> + ) +} + +function TableCell({ className, ...props }: React.ComponentProps<"td">) { + return ( +

[role=checkbox]]:translate-y-[2px]", + className + )} + {...props} + /> + ) +} + +function TableCaption({ + className, + ...props +}: React.ComponentProps<"caption">) { + return ( +

+ ) +} + +export { + Table, + TableHeader, + TableBody, + TableFooter, + TableHead, + TableRow, + TableCell, + TableCaption, +} diff --git a/src/db/index.ts b/src/db/index.ts new file mode 100644 index 0000000..035a7ea --- /dev/null +++ b/src/db/index.ts @@ -0,0 +1,9 @@ +import { drizzle } from 'drizzle-orm/node-postgres' +import { Pool } from 'pg' + +import * as schema from './schema.ts' + +const pool = new Pool({ + connectionString: process.env.DATABASE_URL!, +}) +export const db = drizzle(pool, { schema }) diff --git a/src/db/schema.ts b/src/db/schema.ts new file mode 100644 index 0000000..3846955 --- /dev/null +++ b/src/db/schema.ts @@ -0,0 +1,12 @@ +import { pgTable, uuid, text, boolean, timestamp } from 'drizzle-orm/pg-core' + +export const todos = pgTable('todos', { + id: uuid('id').primaryKey().defaultRandom(), + name: text('name').notNull(), + isComplete: boolean().notNull(), + createdAt: timestamp({ withTimezone: true }).defaultNow().notNull(), + updatedAt: timestamp({ withTimezone: true }) + .defaultNow() + .notNull() + .$onUpdate(() => new Date()), +}) diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..fed2fe9 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from 'clsx' +import { twMerge } from 'tailwind-merge' + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts new file mode 100644 index 0000000..42aea37 --- /dev/null +++ b/src/routeTree.gen.ts @@ -0,0 +1,104 @@ +/* eslint-disable */ + +// @ts-nocheck + +// noinspection JSUnusedGlobalSymbols + +// This file was automatically generated by TanStack Router. +// You should NOT make any changes in this file as it will be overwritten. +// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. + +import { Route as rootRouteImport } from './routes/__root' +import { Route as IndexRouteImport } from './routes/index' +import { Route as TodosNewIndexRouteImport } from './routes/todos/new/index' +import { Route as TodosIdEditIndexRouteImport } from './routes/todos/$id/edit/index' + +const IndexRoute = IndexRouteImport.update({ + id: '/', + path: '/', + getParentRoute: () => rootRouteImport, +} as any) +const TodosNewIndexRoute = TodosNewIndexRouteImport.update({ + id: '/todos/new/', + path: '/todos/new/', + getParentRoute: () => rootRouteImport, +} as any) +const TodosIdEditIndexRoute = TodosIdEditIndexRouteImport.update({ + id: '/todos/$id/edit/', + path: '/todos/$id/edit/', + getParentRoute: () => rootRouteImport, +} as any) + +export interface FileRoutesByFullPath { + '/': typeof IndexRoute + '/todos/new': typeof TodosNewIndexRoute + '/todos/$id/edit': typeof TodosIdEditIndexRoute +} +export interface FileRoutesByTo { + '/': typeof IndexRoute + '/todos/new': typeof TodosNewIndexRoute + '/todos/$id/edit': typeof TodosIdEditIndexRoute +} +export interface FileRoutesById { + __root__: typeof rootRouteImport + '/': typeof IndexRoute + '/todos/new/': typeof TodosNewIndexRoute + '/todos/$id/edit/': typeof TodosIdEditIndexRoute +} +export interface FileRouteTypes { + fileRoutesByFullPath: FileRoutesByFullPath + fullPaths: '/' | '/todos/new' | '/todos/$id/edit' + fileRoutesByTo: FileRoutesByTo + to: '/' | '/todos/new' | '/todos/$id/edit' + id: '__root__' | '/' | '/todos/new/' | '/todos/$id/edit/' + fileRoutesById: FileRoutesById +} +export interface RootRouteChildren { + IndexRoute: typeof IndexRoute + TodosNewIndexRoute: typeof TodosNewIndexRoute + TodosIdEditIndexRoute: typeof TodosIdEditIndexRoute +} + +declare module '@tanstack/react-router' { + interface FileRoutesByPath { + '/': { + id: '/' + path: '/' + fullPath: '/' + preLoaderRoute: typeof IndexRouteImport + parentRoute: typeof rootRouteImport + } + '/todos/new/': { + id: '/todos/new/' + path: '/todos/new' + fullPath: '/todos/new' + preLoaderRoute: typeof TodosNewIndexRouteImport + parentRoute: typeof rootRouteImport + } + '/todos/$id/edit/': { + id: '/todos/$id/edit/' + path: '/todos/$id/edit' + fullPath: '/todos/$id/edit' + preLoaderRoute: typeof TodosIdEditIndexRouteImport + parentRoute: typeof rootRouteImport + } + } +} + +const rootRouteChildren: RootRouteChildren = { + IndexRoute: IndexRoute, + TodosNewIndexRoute: TodosNewIndexRoute, + TodosIdEditIndexRoute: TodosIdEditIndexRoute, +} +export const routeTree = rootRouteImport + ._addFileChildren(rootRouteChildren) + ._addFileTypes() + +import type { getRouter } from './router.tsx' +import type { createStart } from '@tanstack/react-start' +declare module '@tanstack/react-start' { + interface Register { + ssr: true + router: Awaited> + } +} diff --git a/src/router.tsx b/src/router.tsx new file mode 100644 index 0000000..ee1edab --- /dev/null +++ b/src/router.tsx @@ -0,0 +1,13 @@ +import { createRouter } from '@tanstack/react-router' + +// Import the generated route tree +import { routeTree } from './routeTree.gen' + +// Create a new router instance +export const getRouter = () => { + return createRouter({ + routeTree, + scrollRestoration: true, + defaultPreloadStaleTime: 0, + }) +} diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx new file mode 100644 index 0000000..717bac5 --- /dev/null +++ b/src/routes/__root.tsx @@ -0,0 +1,55 @@ +import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router' +import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools' +import { TanStackDevtools } from '@tanstack/react-devtools' + +import appCss from '../styles.css?url' + +export const Route = createRootRoute({ + head: () => ({ + meta: [ + { + charSet: 'utf-8', + }, + { + name: 'viewport', + content: 'width=device-width, initial-scale=1', + }, + { + title: 'TanStack Start Starter', + }, + ], + links: [ + { + rel: 'stylesheet', + href: appCss, + }, + ], + }), + + shellComponent: RootDocument, +}) + +function RootDocument({ children }: { children: React.ReactNode }) { + return ( + + + + + + {children} + , + }, + ]} + /> + + + + ) +} diff --git a/src/routes/index.tsx b/src/routes/index.tsx new file mode 100644 index 0000000..9086364 --- /dev/null +++ b/src/routes/index.tsx @@ -0,0 +1,221 @@ +import { createFileRoute, Link, useRouter } from '@tanstack/react-router' +import { createServerFn, useServerFn } from '@tanstack/react-start' +import { db } from '@/db' +import { Badge } from '@/components/ui/badge' +import { Button } from '@/components/ui/button' +import { EditIcon, ListTodoIcon, PlusIcon, Trash2Icon } from 'lucide-react' +import { + Empty, + EmptyContent, + EmptyDescription, + EmptyHeader, + EmptyMedia, + EmptyTitle, +} from '@/components/ui/empty' +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table' +import { Checkbox } from '@/components/ui/checkbox' +import { cn } from '@/lib/utils' +import { ActionButton } from '@/components/ui/action-button' +import z from 'zod' +import { todos } from '@/db/schema' +import { eq } from 'drizzle-orm' +import { startTransition, useState } from 'react' +import { LocalCountButton } from '@/components/local-count-button' + +const serverLoader = createServerFn({ method: 'GET' }).handler(() => { + return db.query.todos.findMany() +}) + +export const Route = createFileRoute('/')({ + component: App, + loader: () => { + return serverLoader() + }, +}) + +function App() { + const todos = Route.useLoaderData() + + const completedCount = todos.filter((t) => t.isComplete).length + const totalCount = todos.length + + return ( +

Todo List

+ {totalCount > 0 && ( + + {completedCount} of {totalCount} completed + + )} +

+ + +

+ ) +} + +function TodoListTable({ + todos, +}: { + todos: Array<{ + id: string + name: string + isComplete: boolean + createdAt: Date + }> +}) { + if (todos.length === 0) { + return ( + + + + + + No Todos + Try adding a new todo + + + + + + ) + } + + return ( + + + + + Task + Created On + + + + + {todos.map((todo) => ( + + ))} + +

+ ) +} + +const deleteFn = createServerFn({ method: 'POST' }) + .inputValidator(z.object({ id: z.string().min(1) })) + .handler(async ({ data }) => { + await db.delete(todos).where(eq(todos.id, data.id)) + + return { error: false } + }) + +const toggleFn = createServerFn({ method: 'POST' }) + .inputValidator( + z.object({ + id: z.string().min(1), + isComplete: z.boolean(), + }), + ) + .handler(async ({ data }) => { + await new Promise((res) => setTimeout(res, 1000)) + await db + .update(todos) + .set({ isComplete: data.isComplete }) + .where(eq(todos.id, data.id)) + }) + +function TodoTableRow({ + createdAt, + id, + isComplete, + name, +}: { + id: string + name: string + isComplete: boolean + createdAt: Date +}) { + const deleteFnServer = useServerFn(deleteFn) + const toggleFnServer = useServerFn(toggleFn) + const [isCurrentComplete, setIsCurrentComplete] = useState(isComplete) + const router = useRouter() + + return ( + { + const target = e.target as HTMLElement + if (target.closest('[data-actions]')) return + + setIsCurrentComplete((c) => !c) + startTransition(async () => { + await toggleFnServer({ data: { id, isComplete: !isCurrentComplete } }) + router.invalidate() + }) + }} + > + + + + + {name} + + + {formatDate(createdAt)} + + +

+ + { + const res = await deleteFnServer({ data: { id } }) + router.invalidate() + return res + }} + variant="destructiveGhost" + size="icon-sm" + > + + +

+ + + ) +} + +function formatDate(date: Date) { + const formatter = new Intl.DateTimeFormat(undefined, { + dateStyle: 'short', + }) + + return formatter.format(date) +} diff --git a/src/routes/todos/$id/edit/index.tsx b/src/routes/todos/$id/edit/index.tsx new file mode 100644 index 0000000..559ce24 --- /dev/null +++ b/src/routes/todos/$id/edit/index.tsx @@ -0,0 +1,62 @@ +import { TodoForm } from '@/components/todo-form' +import { Button } from '@/components/ui/button' +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from '@/components/ui/card' +import { db } from '@/db' +import { todos } from '@/db/schema' +import { createFileRoute, Link, notFound } from '@tanstack/react-router' +import { createServerFn } from '@tanstack/react-start' +import { eq } from 'drizzle-orm' +import { ArrowLeftIcon } from 'lucide-react' + +const loaderFn = createServerFn({ method: 'GET' }) + .inputValidator((data: { id: string }) => data) + .handler(async ({ data }) => { + const todo = await db.query.todos.findFirst({ + where: eq(todos.id, data.id), + }) + + if (todo == null) throw notFound() + + return todo + }) + +export const Route = createFileRoute('/todos/$id/edit/')({ + component: RouteComponent, + loader: ({ params }) => loaderFn({ data: params }), +}) + +function RouteComponent() { + const todo = Route.useLoaderData() + + return ( +

+ + + + Edit Todo + + Update the details of your todo item + + + + + + +

+ ) +} diff --git a/src/routes/todos/new/index.tsx b/src/routes/todos/new/index.tsx new file mode 100644 index 0000000..b21b1d1 --- /dev/null +++ b/src/routes/todos/new/index.tsx @@ -0,0 +1,43 @@ +import { TodoForm } from '@/components/todo-form' +import { Button } from '@/components/ui/button' +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from '@/components/ui/card' +import { createFileRoute, Link } from '@tanstack/react-router' +import { ArrowLeftIcon } from 'lucide-react' + +export const Route = createFileRoute('/todos/new/')({ + component: RouteComponent, +}) + +function RouteComponent() { + return ( +

+ + + + Add New Todo + + Create a new task to add to your todo list + + + + + + +

+ ) +} diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..ceba684 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,144 @@ +@import 'tailwindcss'; + +@import 'tw-animate-css'; + +@custom-variant dark (&:is(.dark *)); + +body { + @apply m-0; + font-family: + -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', + 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: + source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; +} + +:root { + --background: oklch(1 0 0); + --foreground: oklch(0.141 0.005 285.823); + --card: oklch(1 0 0); + --card-foreground: oklch(0.141 0.005 285.823); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.141 0.005 285.823); + --primary: oklch(0.21 0.006 285.885); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.967 0.001 286.375); + --secondary-foreground: oklch(0.21 0.006 285.885); + --muted: oklch(0.967 0.001 286.375); + --muted-foreground: oklch(0.552 0.016 285.938); + --accent: oklch(0.967 0.001 286.375); + --accent-foreground: oklch(0.21 0.006 285.885); + --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(0.577 0.245 27.325); + --border: oklch(0.92 0.004 286.32); + --input: oklch(0.92 0.004 286.32); + --ring: oklch(0.871 0.006 286.286); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --radius: 0.625rem; + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.141 0.005 285.823); + --sidebar-primary: oklch(0.21 0.006 285.885); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.967 0.001 286.375); + --sidebar-accent-foreground: oklch(0.21 0.006 285.885); + --sidebar-border: oklch(0.92 0.004 286.32); + --sidebar-ring: oklch(0.871 0.006 286.286); +} + +.dark { + --background: oklch(0.141 0.005 285.823); + --foreground: oklch(0.985 0 0); + --card: oklch(0.141 0.005 285.823); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.141 0.005 285.823); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.985 0 0); + --primary-foreground: oklch(0.21 0.006 285.885); + --secondary: oklch(0.274 0.006 286.033); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.274 0.006 286.033); + --muted-foreground: oklch(0.705 0.015 286.067); + --accent: oklch(0.274 0.006 286.033); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.396 0.141 25.723); + --destructive-foreground: oklch(0.637 0.237 25.331); + --border: oklch(0.274 0.006 286.033); + --input: oklch(0.274 0.006 286.033); + --ring: oklch(0.442 0.017 285.786); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.21 0.006 285.885); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.274 0.006 286.033); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(0.274 0.006 286.033); + --sidebar-ring: oklch(0.442 0.017 285.786); +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} + +@utility container { + @apply max-w-4xl; + margin-inline: auto; + padding: 1rem; +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..fdd8fa0 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,29 @@ +{ + "include": ["**/*.ts", "**/*.tsx", "eslint.config.js", "prettier.config.js", "vite.config.js"], + + "compilerOptions": { + "target": "ES2022", + "jsx": "react-jsx", + "module": "ESNext", + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "types": ["vite/client"], + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": false, + "noEmit": true, + + /* Linting */ + "skipLibCheck": true, + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"], + } + } +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..206769f --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,19 @@ +import { defineConfig } from 'vite' +import { tanstackStart } from '@tanstack/react-start/plugin/vite' +import viteReact from '@vitejs/plugin-react' +import viteTsConfigPaths from 'vite-tsconfig-paths' +import tailwindcss from '@tailwindcss/vite' + +const config = defineConfig({ + plugins: [ + // this is the plugin that enables path aliases + viteTsConfigPaths({ + projects: ['./tsconfig.json'], + }), + tailwindcss(), + tanstackStart(), + viteReact(), + ], +}) + +export default config