Thilawyn/todo-tests
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Radix UI setup

Browse Source
This commit is contained in:
Julien Valverdé
2024-07-20 01:00:05 +02:00
parent 1170083e49
commit 0e4950a3cd
17 changed files with 93 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/webui/src/components/ui/button.tsx
View File

@@ -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<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }

79
packages/webui/src/components/ui/card.tsx
View File

@@ -1,79 +0,0 @@
import * as React from "react"
import { cn } from "@/lib/utils"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
className
)}
{...props}
/>
))
Card.displayName = "Card"
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

28
packages/webui/src/components/ui/checkbox.tsx
View File

@@ -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<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
export { Checkbox }

15
packages/webui/src/components/ui/skeleton.tsx
View File

@@ -1,15 +0,0 @@
import { cn } from "@/lib/utils"
function Skeleton({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn("rounded-md animate-pulse bg-muted", className)}
{...props}
/>
)
}
export { Skeleton }

28
packages/webui/src/components/ui/tooltip.tsx
View File

@@ -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<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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
)}
{...props}
/>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

66
packages/webui/src/index.css
View File

@@ -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;
}
}

13
packages/webui/src/lib/Passthrough.tsx
View File

@@ -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
}

6
packages/webui/src/lib/utils.ts
View File

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

12
packages/webui/src/main.tsx
View File

@@ -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(
<React.StrictMode>
<TRPCClientProvider>
<RouterProvider router={router} />
</TRPCClientProvider>
<Theme>
<TRPCClientProvider>
<RouterProvider router={router} />
</TRPCClientProvider>
</Theme>
</React.StrictMode>
)

9
packages/webui/src/routes/about.lazy.tsx
View File

@@ -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 <>
<p className="mx-auto">About</p>
</>
return (
<Container>
<Heading align="center">About</Heading>
</Container>
)
})

31
packages/webui/src/routes/index.lazy.tsx
View File

@@ -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 (
<div className="flex flex-col gap-1 items-stretch">
<p className="text-center">{serverTime.toString()}</p>
<Container>
<Flex
direction="column"
align="stretch"
gap="1"
>
<Text align="center">{serverTime.toString()}</Text>
{todos.map(todo => (
<VTodo
key={Option.match(todo.id, {
onSome: identity,
onNone: () => todo.order,
})}
{todos.map(todo => (
<VTodo
key={Option.match(todo.id, {
onSome: identity,
onNone: () => todo.order,
})}
todo={todo}
/>
))}
</div>
todo={todo}
/>
))}
</Flex>
</Container>
)
})

124
packages/webui/src/todo/VTodo.tsx
View File

@@ -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 (
<Skeleton>
<Skeleton loading={updateTodo.isLoading || removeTodo.isLoading}>
<Card>
<CardContent className="flex flex-row justify-between content-center">
<p>{todo.content}</p>
<Flex
justify="between"
align="center"
>
<Text>{todo.content}</Text>
<div className="flex flex-row gap-1 content-center">
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button
variant="outline"
size="icon"
<Flex
align="center"
gap="1"
>
<Tooltip content="Move down">
<IconButton
variant="outline"
onClick={() => updateTodo.mutate(encodeTodo(
new Todo({
...todo,
order: todo.order + 2,
}, { disableValidation: true })
))}
>
<ChevronDown />
</Button>
</TooltipTrigger>
onClick={() => updateTodo.mutate(encodeTodo(
new Todo({
...todo,
order: todo.order + 2,
}, { disableValidation: true })
))}
>
<ChevronDown />
</IconButton>
</Tooltip>
<TooltipContent>
<p>Move down</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Tooltip content="Move up">
<IconButton
variant="outline"
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button
variant="outline"
size="icon"
onClick={() => updateTodo.mutate(encodeTodo(
new Todo({
...todo,
order: todo.order - 2,
}, { disableValidation: true })
))}
>
<ChevronUp />
</IconButton>
</Tooltip>
onClick={() => updateTodo.mutate(encodeTodo(
new Todo({
...todo,
order: todo.order - 2,
}, { disableValidation: true })
))}
>
<ChevronUp />
</Button>
</TooltipTrigger>
<Tooltip content="Delete">
<IconButton
variant="outline"
<TooltipContent>
<p>Move up</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button
variant="outline"
size="icon"
onClick={() => removeTodo.mutate(encodeTodo(todo))}
>
<X />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Delete</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</CardContent>
onClick={() => removeTodo.mutate(encodeTodo(todo))}
>
<X />
</IconButton>
</Tooltip>
</Flex>
</Flex>
</Card>
</Skeleton>
)