From 9c6b184f7e9c185f45221cbe8bc66d0ebd04e107 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Tue, 24 Feb 2026 16:20:35 +0100 Subject: [PATCH] refactor: update UI component usage to match latest shadcn APIs --- app/(app)/pastel/batch/page.tsx | 30 +- app/(app)/pastel/colorblind/page.tsx | 24 +- app/(app)/pastel/contrast/page.tsx | 6 +- app/(app)/pastel/distinct/page.tsx | 37 +- app/(app)/pastel/gradient/page.tsx | 4 +- app/(app)/pastel/harmony/page.tsx | 30 +- app/(app)/pastel/names/page.tsx | 21 +- app/(app)/pastel/page.tsx | 2 +- app/(app)/pastel/textcolor/page.tsx | 2 +- app/globals.css | 114 + components.json | 23 + components/figlet/FontPreview.tsx | 29 +- components/figlet/FontSelector.tsx | 49 +- components/layout/AppHeader.tsx | 2 +- components/layout/AppSidebar.tsx | 2 +- components/pastel/color/ColorInfo.tsx | 2 +- components/pastel/color/ColorPicker.tsx | 2 +- components/pastel/layout/ThemeToggle.tsx | 2 +- components/pastel/tools/ExportMenu.tsx | 27 +- components/pastel/tools/ManipulationPanel.tsx | 59 +- components/ui/Badge.tsx | 35 - components/ui/Button.tsx | 45 - components/ui/Card.tsx | 50 - components/ui/EmptyState.tsx | 36 - components/ui/Input.tsx | 28 - components/ui/Select.tsx | 39 - components/ui/Skeleton.tsx | 14 - components/ui/Slider.tsx | 65 - components/ui/badge.tsx | 48 + components/ui/button.tsx | 64 + components/ui/card.tsx | 92 + components/ui/empty.tsx | 104 + components/ui/input.tsx | 21 + components/ui/select.tsx | 190 + components/ui/skeleton.tsx | 13 + components/ui/slider.tsx | 63 + components/units/converter/MainConverter.tsx | 74 +- components/units/converter/SearchUnits.tsx | 4 +- package.json | 4 + pnpm-lock.yaml | 3472 ++++++++++++++++- 40 files changed, 4463 insertions(+), 465 deletions(-) create mode 100644 components.json delete mode 100644 components/ui/Badge.tsx delete mode 100644 components/ui/Button.tsx delete mode 100644 components/ui/Card.tsx delete mode 100644 components/ui/EmptyState.tsx delete mode 100644 components/ui/Input.tsx delete mode 100644 components/ui/Select.tsx delete mode 100644 components/ui/Skeleton.tsx delete mode 100644 components/ui/Slider.tsx create mode 100644 components/ui/badge.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/empty.tsx create mode 100644 components/ui/input.tsx create mode 100644 components/ui/select.tsx create mode 100644 components/ui/skeleton.tsx create mode 100644 components/ui/slider.tsx diff --git a/app/(app)/pastel/batch/page.tsx b/app/(app)/pastel/batch/page.tsx index c8355e5..37b5b01 100644 --- a/app/(app)/pastel/batch/page.tsx +++ b/app/(app)/pastel/batch/page.tsx @@ -1,9 +1,15 @@ 'use client'; import { useState } from 'react'; -import { Button } from '@/components/ui/Button'; -import { Select } from '@/components/ui/Select'; -import { Input } from '@/components/ui/Input'; +import { Button } from '@/components/ui/button'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { Input } from '@/components/ui/input'; import { PaletteGrid } from '@/components/pastel/color/PaletteGrid'; import { ExportMenu } from '@/components/pastel/tools/ExportMenu'; import { useLighten, useDarken, useSaturate, useDesaturate, useRotate } from '@/lib/pastel/api/queries'; @@ -118,15 +124,19 @@ export default function BatchPage() {

Operation

diff --git a/app/(app)/pastel/colorblind/page.tsx b/app/(app)/pastel/colorblind/page.tsx index 908df42..a255791 100644 --- a/app/(app)/pastel/colorblind/page.tsx +++ b/app/(app)/pastel/colorblind/page.tsx @@ -3,8 +3,14 @@ import { useState } from 'react'; import { ColorPicker } from '@/components/pastel/color/ColorPicker'; import { ColorDisplay } from '@/components/pastel/color/ColorDisplay'; -import { Button } from '@/components/ui/Button'; -import { Select } from '@/components/ui/Select'; +import { Button } from '@/components/ui/button'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; import { useSimulateColorBlindness } from '@/lib/pastel/api/queries'; import { Loader2, Eye, Plus, X } from 'lucide-react'; import { toast } from 'sonner'; @@ -113,13 +119,17 @@ export default function ColorBlindPage() {

Blindness Type

diff --git a/app/(app)/pastel/contrast/page.tsx b/app/(app)/pastel/contrast/page.tsx index a849058..1d71fc0 100644 --- a/app/(app)/pastel/contrast/page.tsx +++ b/app/(app)/pastel/contrast/page.tsx @@ -2,8 +2,8 @@ import { useState, useEffect } from 'react'; import { ColorPicker } from '@/components/pastel/color/ColorPicker'; -import { Button } from '@/components/ui/Button'; -import { Badge } from '@/components/ui/Badge'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; import { getContrastRatio, hexToRgb, checkWCAGCompliance } from '@/lib/pastel/utils/color'; import { ArrowLeftRight, Check, X } from 'lucide-react'; @@ -39,7 +39,7 @@ export default function ContrastPage() { }) => (

{label} - + {passed ? ( <> diff --git a/app/(app)/pastel/distinct/page.tsx b/app/(app)/pastel/distinct/page.tsx index 5de3c3c..94ecb76 100644 --- a/app/(app)/pastel/distinct/page.tsx +++ b/app/(app)/pastel/distinct/page.tsx @@ -3,9 +3,15 @@ import { useState } from 'react'; import { PaletteGrid } from '@/components/pastel/color/PaletteGrid'; import { ExportMenu } from '@/components/pastel/tools/ExportMenu'; -import { Button } from '@/components/ui/Button'; -import { Input } from '@/components/ui/Input'; -import { Select } from '@/components/ui/Select'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; import { useGenerateDistinct } from '@/lib/pastel/api/queries'; import { Loader2 } from 'lucide-react'; import { toast } from 'sonner'; @@ -65,14 +71,23 @@ export default function DistinctPage() {

- +
+ + +
diff --git a/app/(app)/pastel/page.tsx b/app/(app)/pastel/page.tsx index f6d3696..c976ba1 100644 --- a/app/(app)/pastel/page.tsx +++ b/app/(app)/pastel/page.tsx @@ -9,7 +9,7 @@ import { ManipulationPanel } from '@/components/pastel/tools/ManipulationPanel'; import { useColorInfo } from '@/lib/pastel/api/queries'; import { useColorHistory } from '@/lib/pastel/stores/historyStore'; import { Loader2, Share2, History, X } from 'lucide-react'; -import { Button } from '@/components/ui/Button'; +import { Button } from '@/components/ui/button'; import { toast } from 'sonner'; function PlaygroundContent() { diff --git a/app/(app)/pastel/textcolor/page.tsx b/app/(app)/pastel/textcolor/page.tsx index 8fe284d..1a5e202 100644 --- a/app/(app)/pastel/textcolor/page.tsx +++ b/app/(app)/pastel/textcolor/page.tsx @@ -3,7 +3,7 @@ import { useState } from 'react'; import { ColorPicker } from '@/components/pastel/color/ColorPicker'; import { ColorDisplay } from '@/components/pastel/color/ColorDisplay'; -import { Button } from '@/components/ui/Button'; +import { Button } from '@/components/ui/button'; import { useTextColor } from '@/lib/pastel/api/queries'; import { Loader2, Palette, Plus, X, CheckCircle2, XCircle } from 'lucide-react'; import { toast } from 'sonner'; diff --git a/app/globals.css b/app/globals.css index ba3ca3c..fbf8a5d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,4 +1,8 @@ @import "tailwindcss"; +@import "tw-animate-css"; +@import "shadcn/tailwind.css"; + +@custom-variant dark (&:is(.dark *)); @source "../components/*.{js,ts,jsx,tsx}"; @source "../components/ui/*.{js,ts,jsx,tsx}"; @@ -222,3 +226,113 @@ html { @utility gradient-brand { background: linear-gradient(to right, #a78bfa, #f472b6, #22d3ee); } + +@theme inline { + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --radius-2xl: calc(var(--radius) + 8px); + --radius-3xl: calc(var(--radius) + 12px); + --radius-4xl: calc(var(--radius) + 16px); + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} \ No newline at end of file diff --git a/components.json b/components.json new file mode 100644 index 0000000..f87021e --- /dev/null +++ b/components.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "iconLibrary": "lucide", + "rtl": false, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "registries": {} +} diff --git a/components/figlet/FontPreview.tsx b/components/figlet/FontPreview.tsx index 240aeaf..e2b2925 100644 --- a/components/figlet/FontPreview.tsx +++ b/components/figlet/FontPreview.tsx @@ -2,10 +2,16 @@ import * as React from 'react'; import { toPng } from 'html-to-image'; -import { Card } from '@/components/ui/Card'; -import { Button } from '@/components/ui/Button'; -import { Skeleton } from '@/components/ui/Skeleton'; -import { EmptyState } from '@/components/ui/EmptyState'; +import { Card } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Skeleton } from '@/components/ui/skeleton'; +import { + Empty, + EmptyDescription, + EmptyHeader, + EmptyMedia, + EmptyTitle, +} from "@/components/ui/empty" import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight, Type } from 'lucide-react'; import { cn } from '@/lib/utils/cn'; import { toast } from 'sonner'; @@ -190,12 +196,15 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare {text} ) : ( - + + + + + + Start typing to see your ASCII art + Enter text in the input field above to generate ASCII art with the selected font + + )}
diff --git a/components/figlet/FontSelector.tsx b/components/figlet/FontSelector.tsx index 23e37ce..e964c93 100644 --- a/components/figlet/FontSelector.tsx +++ b/components/figlet/FontSelector.tsx @@ -2,12 +2,18 @@ import * as React from 'react'; import Fuse from 'fuse.js'; -import { Input } from '@/components/ui/Input'; -import { Card } from '@/components/ui/Card'; -import { EmptyState } from '@/components/ui/EmptyState'; +import { Input } from '@/components/ui/input'; +import { Card } from '@/components/ui/card'; +import { + Empty, + EmptyDescription, + EmptyHeader, + EmptyMedia, + EmptyTitle, +} from "@/components/ui/empty" import { Search, X, Heart, Clock, List, Shuffle } from 'lucide-react'; import { cn } from '@/lib/utils/cn'; -import { Button } from '@/components/ui/Button'; +import { Button } from '@/components/ui/button'; import type { FigletFont } from '@/types/figlet'; import { getFavorites, getRecentFonts, toggleFavorite, isFavorite } from '@/lib/storage/favorites'; @@ -162,26 +168,31 @@ export function FontSelector({ {/* Font List */}
{filteredFonts.length === 0 ? ( - + + + {filter === 'favorites' ? : (filter === 'recent' ? : )} + + { filter === 'favorites' ? 'No favorite fonts yet' : filter === 'recent' ? 'No recent fonts' : 'No fonts found' - } - description={ - filter === 'favorites' - ? 'Click the heart icon on any font to add it to your favorites' - : filter === 'recent' - ? 'Fonts you use will appear here' - : searchQuery - ? 'Try a different search term' - : 'Loading fonts...' - } - className="py-8" - /> + } + + { + filter === 'favorites' + ? 'Click the heart icon on any font to add it to your favorites' + : filter === 'recent' + ? 'Fonts you use will appear here' + : searchQuery + ? 'Try a different search term' + : 'Loading fonts...' + } + + + ) : ( filteredFonts.map((font) => (
Export Palette
diff --git a/components/pastel/tools/ManipulationPanel.tsx b/components/pastel/tools/ManipulationPanel.tsx index 5e95473..fd3f39c 100644 --- a/components/pastel/tools/ManipulationPanel.tsx +++ b/components/pastel/tools/ManipulationPanel.tsx @@ -1,8 +1,8 @@ 'use client'; import { useState } from 'react'; -import { Slider } from '@/components/ui/Slider'; -import { Button } from '@/components/ui/Button'; +import { Slider } from '@/components/ui/slider'; +import { Button } from '@/components/ui/button'; import { useLighten, useDarken, @@ -131,15 +131,16 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
{/* Lighten */}
+
+ + {(lightenAmount * 100).toFixed(0)}% +
setLightenAmount(parseFloat(e.target.value))} - suffix="%" - showValue + value={[lightenAmount]} + onValueChange={(vals) => setLightenAmount(vals[0])} />