From 56c0d6403c26048b94c1889b7742ded1c7964762 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Sun, 1 Mar 2026 13:25:02 +0100 Subject: [PATCH] =?UTF-8?q?refactor:=20go=20fully=20native=20=E2=80=94=20r?= =?UTF-8?q?emove=20all=20remaining=20shadcn=20component=20usage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace shadcn Select → native setCommentStyle(v as CommentStyle)}> - - - - - +
+ + + +
{/* Stats */} {!isLoading && text && ( diff --git a/components/color/ExportMenu.tsx b/components/color/ExportMenu.tsx index 7da319f..cbf44d5 100644 --- a/components/color/ExportMenu.tsx +++ b/components/color/ExportMenu.tsx @@ -1,13 +1,6 @@ 'use client'; import { useState, useEffect } from 'react'; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui/select'; import { Download, Copy, Check, Loader2 } from 'lucide-react'; import { toast } from 'sonner'; import { @@ -30,6 +23,9 @@ interface ExportMenuProps { type ExportFormat = 'css' | 'scss' | 'tailwind' | 'json' | 'javascript'; type ColorSpace = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklab' | 'lch' | 'oklch'; +const selectCls = + 'flex-1 bg-transparent border border-border/40 rounded-lg px-2.5 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer'; + const actionBtn = 'flex items-center gap-1.5 px-3 py-1.5 text-xs glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed'; @@ -92,28 +88,26 @@ export function ExportMenu({ colors, className }: ExportMenuProps) { {/* Selectors */}
- - + +
{/* Code preview */} diff --git a/components/media/FormatSelector.tsx b/components/media/FormatSelector.tsx deleted file mode 100644 index 40ad319..0000000 --- a/components/media/FormatSelector.tsx +++ /dev/null @@ -1,137 +0,0 @@ -'use client'; - -import * as React from 'react'; -import Fuse from 'fuse.js'; -import { Search } from 'lucide-react'; -import { cn } from '@/lib/utils/cn'; -import { Input } from '@/components/ui/input'; -import { Label } from '@/components/ui/label'; -import { Card } from '@/components/ui/card'; -import type { ConversionFormat } from '@/types/media'; - -export interface FormatSelectorProps { - formats: ConversionFormat[]; - selectedFormat?: ConversionFormat; - onFormatSelect: (format: ConversionFormat) => void; - label?: string; - disabled?: boolean; -} - -export function FormatSelector({ - formats, - selectedFormat, - onFormatSelect, - label = 'Select format', - disabled = false, -}: FormatSelectorProps) { - const [searchQuery, setSearchQuery] = React.useState(''); - const [filteredFormats, setFilteredFormats] = React.useState(formats); - - // Set up Fuse.js for fuzzy search - const fuse = React.useMemo(() => { - return new Fuse(formats, { - keys: ['name', 'extension', 'description'], - threshold: 0.3, - includeScore: true, - }); - }, [formats]); - - // Filter formats based on search query - React.useEffect(() => { - if (!searchQuery.trim()) { - setFilteredFormats(formats); - return; - } - - const results = fuse.search(searchQuery); - setFilteredFormats(results.map((result) => result.item)); - }, [searchQuery, formats, fuse]); - - // Group formats by category - const groupedFormats = React.useMemo(() => { - const groups: Record = {}; - - filteredFormats.forEach((format) => { - if (!groups[format.category]) { - groups[format.category] = []; - } - groups[format.category].push(format); - }); - - return groups; - }, [filteredFormats]); - - return ( -
- - - {/* Search input */} -
- - setSearchQuery(e.target.value)} - disabled={disabled} - className="pl-10" - /> -
- - {/* Format list */} - - {Object.entries(groupedFormats).length === 0 ? ( -
- No formats found matching "{searchQuery}" -
- ) : ( -
- {Object.entries(groupedFormats).map(([category, categoryFormats]) => ( -
-

- {category} -

-
- {categoryFormats.map((format) => ( - - ))} -
-
- ))} -
- )} - - - {/* Selected format display */} - {selectedFormat && ( -
- Selected: {selectedFormat.name} (. - {selectedFormat.extension}) -
- )} -
- ); -} diff --git a/components/ui/card.tsx b/components/ui/card.tsx deleted file mode 100644 index 681ad98..0000000 --- a/components/ui/card.tsx +++ /dev/null @@ -1,92 +0,0 @@ -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/components/ui/input.tsx b/components/ui/input.tsx deleted file mode 100644 index 8916905..0000000 --- a/components/ui/input.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from "react" - -import { cn } from "@/lib/utils" - -function Input({ className, type, ...props }: React.ComponentProps<"input">) { - return ( - - ) -} - -export { Input } diff --git a/components/ui/label.tsx b/components/ui/label.tsx deleted file mode 100644 index c144a06..0000000 --- a/components/ui/label.tsx +++ /dev/null @@ -1,24 +0,0 @@ -"use client" - -import * as React from "react" -import { Label as LabelPrimitive } from "radix-ui" - -import { cn } from "@/lib/utils/index" - -function Label({ - className, - ...props -}: React.ComponentProps) { - return ( - - ) -} - -export { Label } diff --git a/components/ui/select.tsx b/components/ui/select.tsx deleted file mode 100644 index fd01b74..0000000 --- a/components/ui/select.tsx +++ /dev/null @@ -1,190 +0,0 @@ -"use client" - -import * as React from "react" -import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react" -import { Select as SelectPrimitive } from "radix-ui" - -import { cn } from "@/lib/utils" - -function Select({ - ...props -}: React.ComponentProps) { - return -} - -function SelectGroup({ - ...props -}: React.ComponentProps) { - return -} - -function SelectValue({ - ...props -}: React.ComponentProps) { - return -} - -function SelectTrigger({ - className, - size = "default", - children, - ...props -}: React.ComponentProps & { - size?: "sm" | "default" -}) { - return ( - - {children} - - - - - ) -} - -function SelectContent({ - className, - children, - position = "item-aligned", - align = "center", - ...props -}: React.ComponentProps) { - return ( - - - - - {children} - - - - - ) -} - -function SelectLabel({ - className, - ...props -}: React.ComponentProps) { - return ( - - ) -} - -function SelectItem({ - className, - children, - ...props -}: React.ComponentProps) { - return ( - - - - - - - {children} - - ) -} - -function SelectSeparator({ - className, - ...props -}: React.ComponentProps) { - return ( - - ) -} - -function SelectScrollUpButton({ - className, - ...props -}: React.ComponentProps) { - return ( - - - - ) -} - -function SelectScrollDownButton({ - className, - ...props -}: React.ComponentProps) { - return ( - - - - ) -} - -export { - Select, - SelectContent, - SelectGroup, - SelectItem, - SelectLabel, - SelectScrollDownButton, - SelectScrollUpButton, - SelectSeparator, - SelectTrigger, - SelectValue, -} diff --git a/components/units/MainConverter.tsx b/components/units/MainConverter.tsx index af5abf6..c82a987 100644 --- a/components/units/MainConverter.tsx +++ b/components/units/MainConverter.tsx @@ -2,13 +2,6 @@ import { useState, useEffect, useCallback } from 'react'; import { ArrowLeftRight, BarChart3, Grid3X3 } from 'lucide-react'; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui/select'; import SearchUnits from './SearchUnits'; import VisualComparison from './VisualComparison'; import { @@ -207,18 +200,15 @@ export default function MainConverter() { /> {/* From unit */} - + {/* Swap */}
{/* Result display */}