update recurrence picker with shadcn components

src/components/recurrence-picker.tsx

@@ -1,10 +1,14 @@
-'use client'
+"use client"
 
-import { useState } from 'react'
-import { Input } from '@/components/ui/input'
+import { useState } from "react"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
 type Recurrence = {
-  freq: 'NONE' | 'DAILY' | 'WEEKLY' | 'MONTHLY'
+  freq: "NONE" | "DAILY" | "WEEKLY" | "MONTHLY"
   interval: number
   byDay?: string[]
   count?: number
@@ -20,110 +24,137 @@ export function RecurrencePicker({ value, onChange }: Props) {
   const [rec, setRec] = useState<Recurrence>(() => {
     // If existing rrule, parse minimally (for simplicity we only rehydrate FREQ and INTERVAL)
     if (value) {
-      const parts = Object.fromEntries(
-        value.split(';').map(p => p.split('='))
-      )
+      const parts = Object.fromEntries(value.split(";").map((p) => p.split("=")))
       return {
-        freq: parts.FREQ || 'NONE',
-        interval: parts.INTERVAL ? parseInt(parts.INTERVAL, 10) : 1,
-        byDay: parts.BYDAY ? parts.BYDAY.split(',') : [],
-        count: parts.COUNT ? parseInt(parts.COUNT, 10) : undefined,
-        until: parts.UNTIL
+        freq: parts.FREQ || "NONE",
+        interval: parts.INTERVAL ? Number.parseInt(parts.INTERVAL, 10) : 1,
+        byDay: parts.BYDAY ? parts.BYDAY.split(",") : [],
+        count: parts.COUNT ? Number.parseInt(parts.COUNT, 10) : undefined,
+        until: parts.UNTIL,
       }
     }
-    return { freq: 'NONE', interval: 1 }
+    return { freq: "NONE", interval: 1 }
   })
 
   const update = (updates: Partial<Recurrence>) => {
     const newRec = { ...rec, ...updates }
     setRec(newRec)
 
-    if (newRec.freq === 'NONE') {
+    if (newRec.freq === "NONE") {
       onChange(undefined)
       return
     }
 
     // Build RRULE string
     let rrule = `FREQ=${newRec.freq};INTERVAL=${newRec.interval}`
-    if (newRec.freq === 'WEEKLY' && newRec.byDay?.length) {
-      rrule += `;BYDAY=${newRec.byDay.join(',')}`
+    if (newRec.freq === "WEEKLY" && newRec.byDay?.length) {
+      rrule += `;BYDAY=${newRec.byDay.join(",")}`
     }
     if (newRec.count) rrule += `;COUNT=${newRec.count}`
-    if (newRec.until) rrule += `;UNTIL=${newRec.until.replace(/-/g, '')}T000000Z`
+    if (newRec.until) rrule += `;UNTIL=${newRec.until.replace(/-/g, "")}T000000Z`
 
     onChange(rrule)
   }
 
   const toggleDay = (day: string) => {
     const byDay = rec.byDay || []
-    const newByDay = byDay.includes(day)
-      ? byDay.filter(d => d !== day)
-      : [...byDay, day]
+    const newByDay = byDay.includes(day) ? byDay.filter((d) => d !== day) : [...byDay, day]
     update({ byDay: newByDay })
   }
 
+  const dayLabels = {
+    MO: "Mon",
+    TU: "Tue",
+    WE: "Wed",
+    TH: "Thu",
+    FR: "Fri",
+    SA: "Sat",
+    SU: "Sun",
+  }
+
   return (
-    <div className="space-y-2 border rounded p-2 mt-2 bg-gray-50">
-      <label className="block font-semibold text-sm">Repeats</label>
-      <select
-        className="border p-1 rounded w-full"
-        value={rec.freq}
-        onChange={e => update({ freq: e.target.value as "NONE" | "DAILY" | "WEEKLY" | "MONTHLY" | undefined })}
-      >
-        <option value="NONE">Does not repeat</option>
-        <option value="DAILY">Daily</option>
-        <option value="WEEKLY">Weekly</option>
-        <option value="MONTHLY">Monthly</option>
-      </select>
+    <Card className="w-full">
 
-      {rec.freq !== 'NONE' && (
-        <>
-          <label className="block text-sm">
-            Interval (every N {rec.freq === 'DAILY' ? 'days' : rec.freq === 'WEEKLY' ? 'weeks' : 'months'})
-          </label>
-          <Input
-            type="number"
-            min={1}
-            value={rec.interval}
-            onChange={e => update({ interval: parseInt(e.target.value, 10) || 1 })}
-          />
+      {/* <CardHeader className="pb-4">
+        <CardTitle className="text-base">Recurrence Settings</CardTitle>
+      </CardHeader> */}
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="frequency">Repeats</Label>
+          <Select value={rec.freq} onValueChange={(value) => update({ freq: value as Recurrence["freq"] })}>
+            <SelectTrigger id="frequency">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="NONE">Does not repeat</SelectItem>
+              <SelectItem value="DAILY">Daily</SelectItem>
+              <SelectItem value="WEEKLY">Weekly</SelectItem>
+              <SelectItem value="MONTHLY">Monthly</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
 
-          {rec.freq === 'WEEKLY' && (
-            <div className="flex gap-2 mt-2">
-              {['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'].map(day => (
-                <label key={day} className="flex items-center gap-1">
-                  <input
-                    type="checkbox"
-                    checked={rec.byDay?.includes(day)}
-                    onChange={() => toggleDay(day)}
-                  />
-                  {day}
-                </label>
-              ))}
-            </div>
-          )}
-
-          <div className="flex gap-2 mt-2">
-            <div>
-              <label className="text-sm">End after count</label>
+        {rec.freq !== "NONE" && (
+          <>
+            <div className="space-y-2">
+              <Label htmlFor="interval">
+                Interval (every {rec.interval} {rec.freq === "DAILY" ? "day" : rec.freq === "WEEKLY" ? "week" : "month"}
+                {rec.interval > 1 ? "s" : ""})
+              </Label>
               <Input
+                id="interval"
                 type="number"
-                placeholder="e.g. 10"
-                value={rec.count || ''}
-                onChange={e => update({ count: e.target.value ? parseInt(e.target.value, 10) : undefined })}
+                min={1}
+                value={rec.interval}
+                onChange={(e) => update({ interval: Number.parseInt(e.target.value, 10) || 1 })}
+                className="w-24"
               />
             </div>
-            <div>
-              <label className="text-sm">End by date</label>
-              <Input
-                type="date"
-                value={rec.until || ''}
-                onChange={e => update({ until: e.target.value || undefined })}
-              />
+
+            {rec.freq === "WEEKLY" && (
+              <div className="space-y-2">
+                <Label>Days of the week</Label>
+                <div className="flex flex-wrap gap-4">
+                  {["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
+                    <div key={day} className="flex items-center space-x-2">
+                      <Checkbox
+                        id={day}
+                        checked={rec.byDay?.includes(day) || false}
+                        onCheckedChange={() => toggleDay(day)}
+                      />
+                      <Label htmlFor={day} className="text-sm font-normal">
+                        {dayLabels[day as keyof typeof dayLabels]}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="count">End after (occurrences)</Label>
+                <Input
+                  id="count"
+                  type="number"
+                  placeholder="e.g. 10"
+                  value={rec.count || ""}
+                  onChange={(e) => update({ count: e.target.value ? Number.parseInt(e.target.value, 10) : undefined })}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="until">End by date</Label>
+                <Input
+                  id="until"
+                  type="date"
+                  value={rec.until || ""}
+                  onChange={(e) => update({ until: e.target.value || undefined })}
+                />
+              </div>
             </div>
-          </div>
-        </>
-      )}
-    </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
   )
 }

src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+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<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      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",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      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",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/select.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}