From 6e7fc68068e903dc7d382f999b618d3a1569c98c Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Sun, 5 Jul 2026 06:30:01 +0200 Subject: [PATCH] fix(design-sync): address CodeRabbit review on preview files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add `import type * as React from "react"` to the 26 previews that reference `React.CSSProperties` under the automatic JSX runtime (React isn't a global type namespace there, so the annotation was unresolved standalone). - Accordion preview: use `multiple` instead of `openMultiple` — @base-ui/react 1.6 renamed the prop, so the multi-open cell wasn't actually multi-open. Skipped CodeRabbit's BrandIcon dark-mode note: the preview renders in the default light card (the dark is hidden there); per-theme sources would need component support it doesn't expose. Claude-Session: https://claude.ai/code/session_01R8Aq8F1nTuvJwfut7g3DVE --- .design-sync/previews/Accordion.tsx | 3 ++- .design-sync/previews/Alert.tsx | 1 + .design-sync/previews/Attachment.tsx | 1 + .design-sync/previews/Avatar.tsx | 1 + .design-sync/previews/Badge.tsx | 1 + .design-sync/previews/BrandIcon.tsx | 1 + .design-sync/previews/Bubble.tsx | 1 + .design-sync/previews/Button.tsx | 1 + .design-sync/previews/ButtonGroup.tsx | 1 + .design-sync/previews/FormItem.tsx | 1 + .design-sync/previews/Input.tsx | 1 + .design-sync/previews/InputGroup.tsx | 1 + .design-sync/previews/Kbd.tsx | 1 + .design-sync/previews/Label.tsx | 1 + .design-sync/previews/Marker.tsx | 1 + .design-sync/previews/Message.tsx | 1 + .design-sync/previews/MessageScroller.tsx | 1 + .design-sync/previews/ResizableGroup.tsx | 1 + .design-sync/previews/ScrollArea.tsx | 1 + .design-sync/previews/Separator.tsx | 1 + .design-sync/previews/Skeleton.tsx | 1 + .design-sync/previews/Slider.tsx | 1 + .design-sync/previews/Spinner.tsx | 1 + .design-sync/previews/Switch.tsx | 1 + .design-sync/previews/Tabs.tsx | 1 + .design-sync/previews/Textarea.tsx | 1 + .design-sync/previews/Toggle.tsx | 1 + 27 files changed, 28 insertions(+), 1 deletion(-) diff --git a/.design-sync/previews/Accordion.tsx b/.design-sync/previews/Accordion.tsx index 608fa9a4c..bfc022e75 100644 --- a/.design-sync/previews/Accordion.tsx +++ b/.design-sync/previews/Accordion.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@reactive-resume/ui/components/accordion"; const wrap: React.CSSProperties = { width: 420, padding: 16 }; @@ -32,7 +33,7 @@ export const Sections = () => ( export const MultipleOpen = () => (
- + Professional Summary diff --git a/.design-sync/previews/Alert.tsx b/.design-sync/previews/Alert.tsx index 1fae12aca..8e6eb49a6 100644 --- a/.design-sync/previews/Alert.tsx +++ b/.design-sync/previews/Alert.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { InfoIcon, WarningIcon } from "@phosphor-icons/react"; import { Alert, AlertAction, AlertDescription, AlertTitle } from "@reactive-resume/ui/components/alert"; import { Button } from "@reactive-resume/ui/components/button"; diff --git a/.design-sync/previews/Attachment.tsx b/.design-sync/previews/Attachment.tsx index d3c238878..ba1e9a17c 100644 --- a/.design-sync/previews/Attachment.tsx +++ b/.design-sync/previews/Attachment.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { DownloadSimpleIcon, FileDocIcon, FilePdfIcon, TrashIcon, WarningIcon } from "@phosphor-icons/react"; import { Attachment, diff --git a/.design-sync/previews/Avatar.tsx b/.design-sync/previews/Avatar.tsx index a383e0e71..5fd40596d 100644 --- a/.design-sync/previews/Avatar.tsx +++ b/.design-sync/previews/Avatar.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { CheckIcon } from "@phosphor-icons/react"; import { Avatar, diff --git a/.design-sync/previews/Badge.tsx b/.design-sync/previews/Badge.tsx index cee796b9e..7876e9805 100644 --- a/.design-sync/previews/Badge.tsx +++ b/.design-sync/previews/Badge.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { CheckCircleIcon, PencilSimpleIcon, SparkleIcon } from "@phosphor-icons/react"; import { Badge } from "@reactive-resume/ui/components/badge"; diff --git a/.design-sync/previews/BrandIcon.tsx b/.design-sync/previews/BrandIcon.tsx index 4f4f84791..b77223cc2 100644 --- a/.design-sync/previews/BrandIcon.tsx +++ b/.design-sync/previews/BrandIcon.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { BrandIcon } from "@reactive-resume/ui/components/brand-icon"; // The component builds its src from /logo|/icon static paths that the preview diff --git a/.design-sync/previews/Bubble.tsx b/.design-sync/previews/Bubble.tsx index 83d7a8fc3..0dabba38a 100644 --- a/.design-sync/previews/Bubble.tsx +++ b/.design-sync/previews/Bubble.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "@reactive-resume/ui/components/bubble"; const wrap: React.CSSProperties = { display: "flex", flexDirection: "column", gap: 8, padding: 16, width: 420 }; diff --git a/.design-sync/previews/Button.tsx b/.design-sync/previews/Button.tsx index c1a6c86ea..fc4e4f7ed 100644 --- a/.design-sync/previews/Button.tsx +++ b/.design-sync/previews/Button.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { ArrowRightIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react"; import { Button } from "@reactive-resume/ui/components/button"; diff --git a/.design-sync/previews/ButtonGroup.tsx b/.design-sync/previews/ButtonGroup.tsx index b884c482c..aa5f1fffa 100644 --- a/.design-sync/previews/ButtonGroup.tsx +++ b/.design-sync/previews/ButtonGroup.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { AlignCenterHorizontalIcon, AlignLeftIcon, diff --git a/.design-sync/previews/FormItem.tsx b/.design-sync/previews/FormItem.tsx index d681153eb..ed8226964 100644 --- a/.design-sync/previews/FormItem.tsx +++ b/.design-sync/previews/FormItem.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form"; import { Input } from "@reactive-resume/ui/components/input"; diff --git a/.design-sync/previews/Input.tsx b/.design-sync/previews/Input.tsx index 85f2bb4e4..77c8bf8ee 100644 --- a/.design-sync/previews/Input.tsx +++ b/.design-sync/previews/Input.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { Input } from "@reactive-resume/ui/components/input"; import { Label } from "@reactive-resume/ui/components/label"; diff --git a/.design-sync/previews/InputGroup.tsx b/.design-sync/previews/InputGroup.tsx index a6001c474..a08cd74ae 100644 --- a/.design-sync/previews/InputGroup.tsx +++ b/.design-sync/previews/InputGroup.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { CopyIcon, GlobeIcon, MagnifyingGlassIcon } from "@phosphor-icons/react"; import { InputGroup, diff --git a/.design-sync/previews/Kbd.tsx b/.design-sync/previews/Kbd.tsx index 29baf66b7..ac48ad70d 100644 --- a/.design-sync/previews/Kbd.tsx +++ b/.design-sync/previews/Kbd.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { Kbd, KbdGroup } from "@reactive-resume/ui/components/kbd"; const row: React.CSSProperties = { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 12, padding: 20 }; diff --git a/.design-sync/previews/Label.tsx b/.design-sync/previews/Label.tsx index 87126f13f..ea3f4c7eb 100644 --- a/.design-sync/previews/Label.tsx +++ b/.design-sync/previews/Label.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { Input } from "@reactive-resume/ui/components/input"; import { Label } from "@reactive-resume/ui/components/label"; import { Switch } from "@reactive-resume/ui/components/switch"; diff --git a/.design-sync/previews/Marker.tsx b/.design-sync/previews/Marker.tsx index 5726be380..b2049287c 100644 --- a/.design-sync/previews/Marker.tsx +++ b/.design-sync/previews/Marker.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { CheckCircleIcon, SparkleIcon, WarningCircleIcon } from "@phosphor-icons/react"; import { Marker, MarkerContent, MarkerIcon } from "@reactive-resume/ui/components/marker"; diff --git a/.design-sync/previews/Message.tsx b/.design-sync/previews/Message.tsx index 83c0b9c5e..b9ffc6ae8 100644 --- a/.design-sync/previews/Message.tsx +++ b/.design-sync/previews/Message.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { SparkleIcon, UserIcon } from "@phosphor-icons/react"; import { Bubble, BubbleContent } from "@reactive-resume/ui/components/bubble"; import { diff --git a/.design-sync/previews/MessageScroller.tsx b/.design-sync/previews/MessageScroller.tsx index 0bf329391..987e43e7a 100644 --- a/.design-sync/previews/MessageScroller.tsx +++ b/.design-sync/previews/MessageScroller.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { SparkleIcon, UserIcon } from "@phosphor-icons/react"; import { Bubble, BubbleContent } from "@reactive-resume/ui/components/bubble"; import { Message, MessageAvatar, MessageContent } from "@reactive-resume/ui/components/message"; diff --git a/.design-sync/previews/ResizableGroup.tsx b/.design-sync/previews/ResizableGroup.tsx index ec81cedd7..593115301 100644 --- a/.design-sync/previews/ResizableGroup.tsx +++ b/.design-sync/previews/ResizableGroup.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { ResizableGroup, ResizablePanel, ResizableSeparator } from "@reactive-resume/ui/components/resizable"; const panelStyle: React.CSSProperties = { height: "100%", padding: 16, fontSize: 14, lineHeight: 1.6 }; diff --git a/.design-sync/previews/ScrollArea.tsx b/.design-sync/previews/ScrollArea.tsx index b18f94c65..b2306757c 100644 --- a/.design-sync/previews/ScrollArea.tsx +++ b/.design-sync/previews/ScrollArea.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { ScrollArea } from "@reactive-resume/ui/components/scroll-area"; const templates = [ diff --git a/.design-sync/previews/Separator.tsx b/.design-sync/previews/Separator.tsx index d36eeb61b..b726881c2 100644 --- a/.design-sync/previews/Separator.tsx +++ b/.design-sync/previews/Separator.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { Separator } from "@reactive-resume/ui/components/separator"; const block: React.CSSProperties = { diff --git a/.design-sync/previews/Skeleton.tsx b/.design-sync/previews/Skeleton.tsx index de1d9153b..69c75f80b 100644 --- a/.design-sync/previews/Skeleton.tsx +++ b/.design-sync/previews/Skeleton.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { Skeleton } from "@reactive-resume/ui/components/skeleton"; const pad: React.CSSProperties = { padding: 20 }; diff --git a/.design-sync/previews/Slider.tsx b/.design-sync/previews/Slider.tsx index c98d31153..efda3009d 100644 --- a/.design-sync/previews/Slider.tsx +++ b/.design-sync/previews/Slider.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { Label } from "@reactive-resume/ui/components/label"; import { Slider } from "@reactive-resume/ui/components/slider"; diff --git a/.design-sync/previews/Spinner.tsx b/.design-sync/previews/Spinner.tsx index 285e0efe1..6f0b2c0b8 100644 --- a/.design-sync/previews/Spinner.tsx +++ b/.design-sync/previews/Spinner.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { Spinner } from "@reactive-resume/ui/components/spinner"; const row: React.CSSProperties = { display: "flex", alignItems: "center", gap: 20, padding: 24 }; diff --git a/.design-sync/previews/Switch.tsx b/.design-sync/previews/Switch.tsx index ddb015190..0590a7ac9 100644 --- a/.design-sync/previews/Switch.tsx +++ b/.design-sync/previews/Switch.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { Label } from "@reactive-resume/ui/components/label"; import { Switch } from "@reactive-resume/ui/components/switch"; diff --git a/.design-sync/previews/Tabs.tsx b/.design-sync/previews/Tabs.tsx index 0e0fdaf14..dd26c6974 100644 --- a/.design-sync/previews/Tabs.tsx +++ b/.design-sync/previews/Tabs.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { BriefcaseIcon, GraduationCapIcon, SparkleIcon } from "@phosphor-icons/react"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@reactive-resume/ui/components/tabs"; diff --git a/.design-sync/previews/Textarea.tsx b/.design-sync/previews/Textarea.tsx index 717f90a26..dd5612ebd 100644 --- a/.design-sync/previews/Textarea.tsx +++ b/.design-sync/previews/Textarea.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { Label } from "@reactive-resume/ui/components/label"; import { Textarea } from "@reactive-resume/ui/components/textarea"; diff --git a/.design-sync/previews/Toggle.tsx b/.design-sync/previews/Toggle.tsx index 11aa2cff9..1419bd39f 100644 --- a/.design-sync/previews/Toggle.tsx +++ b/.design-sync/previews/Toggle.tsx @@ -1,3 +1,4 @@ +import type * as React from "react"; import { TextAlignCenterIcon, TextAlignLeftIcon,