diff --git a/bun.lockb b/bun.lockb index 56ab733..f1e7818 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/webui/components.json b/packages/webui/components.json deleted file mode 100644 index 62f1aa7..0000000 --- a/packages/webui/components.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "$schema": "https://ui.shadcn.com/schema.json", - "style": "default", - "rsc": false, - "tsx": true, - "tailwind": { - "config": "tailwind.config.js", - "css": "src/index.css", - "baseColor": "slate", - "cssVariables": true, - "prefix": "" - }, - "aliases": { - "components": "@/components", - "utils": "@/lib/utils" - } -} diff --git a/packages/webui/package.json b/packages/webui/package.json index aa59fe8..a45cb3a 100644 --- a/packages/webui/package.json +++ b/packages/webui/package.json @@ -10,18 +10,13 @@ }, "dependencies": { "@effect/schema": "^0.68.17", - "@mui/material": "^5.16.1", - "@radix-ui/react-checkbox": "^1.1.1", - "@radix-ui/react-slot": "^1.1.0", - "@radix-ui/react-tooltip": "^1.1.2", + "@radix-ui/themes": "^3.1.1", "@tanstack/react-query": "4", "@tanstack/react-router": "^1.44.2", "@thilawyn/thilalib": "^0.1.5", "@todo-tests/common": "workspace:*", "@trpc/client": "^10.45.2", "@trpc/react-query": "^10.45.2", - "class-variance-authority": "^0.7.0", - "clsx": "^2.1.1", "effect": "^3.4.7", "framer-motion": "^11.3.6", "lodash-es": "^4.17.21", @@ -30,9 +25,7 @@ "mobx-react-lite": "^4.0.7", "react": "^18.3.1", "react-dom": "^18.3.1", - "remeda": "^2.6.0", - "tailwind-merge": "^2.4.0", - "tailwindcss-animate": "^1.0.7" + "remeda": "^2.6.0" }, "devDependencies": { "@tanstack/router-devtools": "^1.44.2", diff --git a/packages/webui/src/components/ui/button.tsx b/packages/webui/src/components/ui/button.tsx deleted file mode 100644 index 0ba4277..0000000 --- a/packages/webui/src/components/ui/button.tsx +++ /dev/null @@ -1,56 +0,0 @@ -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 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", - { - variants: { - variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90", - destructive: - "bg-destructive text-destructive-foreground hover:bg-destructive/90", - outline: - "border border-input bg-background hover:bg-accent hover:text-accent-foreground", - secondary: - "bg-secondary text-secondary-foreground hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", - }, - size: { - default: "h-10 px-4 py-2", - sm: "h-9 rounded-md px-3", - lg: "h-11 rounded-md px-8", - icon: "h-10 w-10", - }, - }, - defaultVariants: { - variant: "default", - size: "default", - }, - } -) - -export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean -} - -const Button = React.forwardRef( - ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button" - return ( - - ) - } -) -Button.displayName = "Button" - -export { Button, buttonVariants } diff --git a/packages/webui/src/components/ui/card.tsx b/packages/webui/src/components/ui/card.tsx deleted file mode 100644 index afa13ec..0000000 --- a/packages/webui/src/components/ui/card.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import * as React from "react" - -import { cn } from "@/lib/utils" - -const Card = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)) -Card.displayName = "Card" - -const CardHeader = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)) -CardHeader.displayName = "CardHeader" - -const CardTitle = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -

-)) -CardTitle.displayName = "CardTitle" - -const CardDescription = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -

-)) -CardDescription.displayName = "CardDescription" - -const CardContent = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -

-)) -CardContent.displayName = "CardContent" - -const CardFooter = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)) -CardFooter.displayName = "CardFooter" - -export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/packages/webui/src/components/ui/checkbox.tsx b/packages/webui/src/components/ui/checkbox.tsx deleted file mode 100644 index ddbdd01..0000000 --- a/packages/webui/src/components/ui/checkbox.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from "react" -import * as CheckboxPrimitive from "@radix-ui/react-checkbox" -import { Check } from "lucide-react" - -import { cn } from "@/lib/utils" - -const Checkbox = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - - - - - -)) -Checkbox.displayName = CheckboxPrimitive.Root.displayName - -export { Checkbox } diff --git a/packages/webui/src/components/ui/skeleton.tsx b/packages/webui/src/components/ui/skeleton.tsx deleted file mode 100644 index e8e1132..0000000 --- a/packages/webui/src/components/ui/skeleton.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { cn } from "@/lib/utils" - -function Skeleton({ - className, - ...props -}: React.HTMLAttributes) { - return ( -
- ) -} - -export { Skeleton } diff --git a/packages/webui/src/components/ui/tooltip.tsx b/packages/webui/src/components/ui/tooltip.tsx deleted file mode 100644 index e121f0a..0000000 --- a/packages/webui/src/components/ui/tooltip.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from "react" -import * as TooltipPrimitive from "@radix-ui/react-tooltip" - -import { cn } from "@/lib/utils" - -const TooltipProvider = TooltipPrimitive.Provider - -const Tooltip = TooltipPrimitive.Root - -const TooltipTrigger = TooltipPrimitive.Trigger - -const TooltipContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, sideOffset = 4, ...props }, ref) => ( - -)) -TooltipContent.displayName = TooltipPrimitive.Content.displayName - -export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } diff --git a/packages/webui/src/index.css b/packages/webui/src/index.css index d924e24..b5c61c9 100644 --- a/packages/webui/src/index.css +++ b/packages/webui/src/index.css @@ -1,69 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; - --radius: 0.5rem; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; - } - - .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; - } -} - -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -} diff --git a/packages/webui/src/lib/Passthrough.tsx b/packages/webui/src/lib/Passthrough.tsx deleted file mode 100644 index 595c142..0000000 --- a/packages/webui/src/lib/Passthrough.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { ReactNode } from "react" - - -export module Passthrough { - export interface Props { - children?: ReactNode - } -} - - -export function Passthrough({ children }: Passthrough.Props) { - return children -} diff --git a/packages/webui/src/lib/utils.ts b/packages/webui/src/lib/utils.ts deleted file mode 100644 index d084cca..0000000 --- a/packages/webui/src/lib/utils.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { type ClassValue, clsx } from "clsx" -import { twMerge } from "tailwind-merge" - -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) -} diff --git a/packages/webui/src/main.tsx b/packages/webui/src/main.tsx index d83ab70..7f56c0a 100644 --- a/packages/webui/src/main.tsx +++ b/packages/webui/src/main.tsx @@ -1,9 +1,12 @@ +import { Theme } from "@radix-ui/themes" import { RouterProvider, createRouter } from "@tanstack/react-router" import React from "react" import ReactDOM from "react-dom/client" import { routeTree } from "./routeTree.gen" import { TRPCClientProvider } from "./trpc/TRPCClientProvider" + +import "@radix-ui/themes/styles.css" import "./index.css" @@ -15,11 +18,12 @@ declare module "@tanstack/react-router" { } } - ReactDOM.createRoot(document.getElementById("root")!).render( - - - + + + + + ) diff --git a/packages/webui/src/routes/about.lazy.tsx b/packages/webui/src/routes/about.lazy.tsx index 1a122a2..0dee670 100644 --- a/packages/webui/src/routes/about.lazy.tsx +++ b/packages/webui/src/routes/about.lazy.tsx @@ -1,12 +1,15 @@ +import { Container, Heading } from "@radix-ui/themes" import { createLazyFileRoute } from "@tanstack/react-router" import { observer } from "mobx-react-lite" export const About = observer(() => { - return <> -

About

- + return ( + + About + + ) }) diff --git a/packages/webui/src/routes/index.lazy.tsx b/packages/webui/src/routes/index.lazy.tsx index 327381a..c1654b4 100644 --- a/packages/webui/src/routes/index.lazy.tsx +++ b/packages/webui/src/routes/index.lazy.tsx @@ -1,4 +1,5 @@ import { Schema as S } from "@effect/schema" +import { Container, Flex, Text } from "@radix-ui/themes" import { createLazyFileRoute } from "@tanstack/react-router" import { ServerTime } from "@todo-tests/common/data" import { Option, flow, identity } from "effect" @@ -37,20 +38,26 @@ export const Index = observer(() => { return ( -
-

{serverTime.toString()}

+ + + {serverTime.toString()} - {todos.map(todo => ( - todo.order, - })} + {todos.map(todo => ( + todo.order, + })} - todo={todo} - /> - ))} -
+ todo={todo} + /> + ))} + + ) }) diff --git a/packages/webui/src/todo/VTodo.tsx b/packages/webui/src/todo/VTodo.tsx index 8f6140d..1a89390 100644 --- a/packages/webui/src/todo/VTodo.tsx +++ b/packages/webui/src/todo/VTodo.tsx @@ -1,10 +1,5 @@ -import { Button } from "@/components/ui/button" -import { Card, CardContent } from "@/components/ui/card" -import { Skeleton as UISkeleton } from "@/components/ui/skeleton" -import { Tooltip, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" -import { Passthrough } from "@/lib/Passthrough" import { Schema as S } from "@effect/schema" -import { TooltipContent } from "@radix-ui/react-tooltip" +import { Card, Flex, IconButton, Skeleton, Text, Tooltip } from "@radix-ui/themes" import { ChevronDown, ChevronUp, X } from "lucide-react" import { observer } from "mobx-react-lite" import { JsonifiableTodo, Todo } from "../data" @@ -26,86 +21,61 @@ export const VTodo = observer(({ todo }: VTodo.Props) => { const updateTodo = trpc.todo.update.useMutation() const removeTodo = trpc.todo.remove.useMutation() - const Skeleton = updateTodo.isLoading || removeTodo.isLoading - ? UISkeleton - : Passthrough - return ( - + - -

{todo.content}

+ + {todo.content} -
- - - - - + onClick={() => updateTodo.mutate(encodeTodo( + new Todo({ + ...todo, + order: todo.order + 2, + }, { disableValidation: true }) + ))} + > + + + - -

Move down

- - - + + - - - - + + -

Move up

- - - - - - - - - - - -

Delete

- - - -
- + onClick={() => removeTodo.mutate(encodeTodo(todo))} + > + + + + + ) diff --git a/packages/webui/tailwind.config.js b/packages/webui/tailwind.config.js index 62ed56e..9562042 100644 --- a/packages/webui/tailwind.config.js +++ b/packages/webui/tailwind.config.js @@ -1,77 +1,13 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - darkMode: ["class"], - content: [ - './pages/**/*.{ts,tsx}', - './components/**/*.{ts,tsx}', - './app/**/*.{ts,tsx}', - './src/**/*.{ts,tsx}', - ], - prefix: "", - theme: { - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, +/** @type {import("tailwindcss").Config} */ +export default { + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], + + theme: { + extend: {}, }, - extend: { - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, - }, - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - }, - }, - }, - plugins: [require("tailwindcss-animate")], + + plugins: [], } diff --git a/packages/webui/tsconfig.json b/packages/webui/tsconfig.json index 3af2f09..ea9d0cd 100644 --- a/packages/webui/tsconfig.json +++ b/packages/webui/tsconfig.json @@ -1,10 +1,4 @@ { - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["./src/*"] - }, - }, "files": [], "references": [ {