Skip to content

Commit 03a5cc9

Browse files
shadcnshadcn
committed
chore: refactor shuffle button
1 parent ccafdaf commit 03a5cc9

File tree

7 files changed

+123
-55
lines changed

7 files changed

+123
-55
lines changed

‎apps/v4/app/(create)/components/customizer.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,17 @@ import { HugeiconsIcon } from "@hugeicons/react"
77
import { useIsMobile } from "@/hooks/use-mobile"
88
import { getThemesForBaseColor, PRESETS, STYLES } from "@/registry/config"
99
import { FieldGroup } from "@/registry/new-york-v4/ui/field"
10+
import { Separator } from "@/registry/new-york-v4/ui/separator"
1011
import { MenuAccentPicker } from "@/app/(create)/components/accent-picker"
1112
import { BaseColorPicker } from "@/app/(create)/components/base-color-picker"
1213
import { BasePicker } from "@/app/(create)/components/base-picker"
13-
import { CustomizerControls } from "@/app/(create)/components/customizer-controls"
1414
import { FontPicker } from "@/app/(create)/components/font-picker"
1515
import { IconLibraryPicker } from "@/app/(create)/components/icon-library-picker"
1616
import { MenuColorPicker } from "@/app/(create)/components/menu-picker"
1717
import { PresetPicker } from "@/app/(create)/components/preset-picker"
1818
import { RadiusPicker } from "@/app/(create)/components/radius-picker"
19+
import { RandomButton } from "@/app/(create)/components/random-button"
20+
import { ResetButton } from "@/app/(create)/components/reset-button"
1921
import { StylePicker } from "@/app/(create)/components/style-picker"
2022
import { ThemePicker } from "@/app/(create)/components/theme-picker"
2123
import { FONTS } from "@/app/(create)/lib/fonts"
@@ -75,7 +77,10 @@ export function Customizer() {
7577
<RadiusPicker isMobile={isMobile} anchorRef={anchorRef} />
7678
<MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
7779
<MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
78-
<CustomizerControls className="mt-auto hidden w-full flex-col md:flex" />
80+
<div className="mt-auto hidden w-full flex-col items-center gap-0 md:flex">
81+
<RandomButton />
82+
<ResetButton />
83+
</div>
7984
</FieldGroup>
8085
</div>
8186
</div>

‎apps/v4/app/(create)/components/preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { type ImperativePanelHandle } from "react-resizable-panels"
55

66
import { DARK_MODE_FORWARD_TYPE } from "@/components/mode-switcher"
77
import { Badge } from "@/registry/new-york-v4/ui/badge"
8-
import { RANDOMIZE_FORWARD_TYPE } from "@/app/(create)/components/customizer-controls"
8+
import { RANDOMIZE_FORWARD_TYPE } from "@/app/(create)/components/random-button"
99
import { CMD_K_FORWARD_TYPE } from "@/app/(create)/components/item-picker"
1010
import { sendToIframe } from "@/app/(create)/hooks/use-iframe-sync"
1111
import {

apps/v4/app/(create)/components/customizer-controls.tsx renamed to apps/v4/app/(create)/components/random-button.tsx

Lines changed: 31 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@
22

33
import * as React from "react"
44
import Script from "next/script"
5-
import { DiceFaces05Icon, Undo02Icon } from "@hugeicons/core-free-icons"
5+
import { DiceFaces05Icon } from "@hugeicons/core-free-icons"
66
import { HugeiconsIcon } from "@hugeicons/react"
77

8-
import { cn } from "@/lib/utils"
98
import {
109
BASE_COLORS,
11-
DEFAULT_CONFIG,
1210
getThemesForBaseColor,
1311
iconLibraries,
1412
MENU_ACCENTS,
@@ -18,6 +16,11 @@ import {
1816
} from "@/registry/config"
1917
import { Button } from "@/registry/new-york-v4/ui/button"
2018
import { Kbd } from "@/registry/new-york-v4/ui/kbd"
19+
import {
20+
Tooltip,
21+
TooltipContent,
22+
TooltipTrigger,
23+
} from "@/registry/new-york-v4/ui/tooltip"
2124
import { useLocks } from "@/app/(create)/hooks/use-locks"
2225
import { FONTS } from "@/app/(create)/lib/fonts"
2326
import {
@@ -33,26 +36,10 @@ function randomItem<T>(array: readonly T[]): T {
3336
return array[Math.floor(Math.random() * array.length)]
3437
}
3538

36-
export function CustomizerControls({ className }: { className?: string }) {
39+
export function RandomButton() {
3740
const { locks } = useLocks()
3841
const [params, setParams] = useDesignSystemSearchParams()
3942

40-
const handleReset = React.useCallback(() => {
41-
setParams({
42-
base: params.base, // Keep the current base value
43-
style: DEFAULT_CONFIG.style,
44-
baseColor: DEFAULT_CONFIG.baseColor,
45-
theme: DEFAULT_CONFIG.theme,
46-
iconLibrary: DEFAULT_CONFIG.iconLibrary,
47-
font: DEFAULT_CONFIG.font,
48-
menuAccent: DEFAULT_CONFIG.menuAccent,
49-
menuColor: DEFAULT_CONFIG.menuColor,
50-
radius: DEFAULT_CONFIG.radius,
51-
template: DEFAULT_CONFIG.template,
52-
item: "preview",
53-
})
54-
}, [setParams, params.base])
55-
5643
const handleRandomize = React.useCallback(() => {
5744
// Use current value if locked, otherwise randomize.
5845
const baseColor = locks.has("baseColor")
@@ -130,33 +117,30 @@ export function CustomizerControls({ className }: { className?: string }) {
130117
}, [handleRandomize])
131118

132119
return (
133-
<div className={cn("items-center gap-0", className)}>
134-
<Button
135-
variant="ghost"
136-
size="sm"
137-
onClick={handleRandomize}
138-
className="border-foreground/10 bg-muted/50 h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
139-
>
140-
<div className="flex flex-col justify-start text-left">
141-
<div className="text-muted-foreground text-xs">Shuffle</div>
142-
<div className="text-foreground text-sm font-medium">Try Random</div>
143-
</div>
144-
<HugeiconsIcon icon={DiceFaces05Icon} className="size-5 md:hidden" />
145-
<Kbd className="bg-foreground/10 text-foreground hidden md:flex">R</Kbd>
146-
</Button>
147-
<Button
148-
variant="ghost"
149-
size="sm"
150-
onClick={handleReset}
151-
className="border-foreground/10 bg-muted/50 hidden h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:flex md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
152-
>
153-
<div className="flex flex-col justify-start text-left">
154-
<div className="text-muted-foreground text-xs">Reset</div>
155-
<div className="text-foreground text-sm font-medium">Start Over</div>
156-
</div>
157-
<HugeiconsIcon icon={Undo02Icon} className="-translate-x-0.5" />
158-
</Button>
159-
</div>
120+
<Tooltip>
121+
<TooltipTrigger asChild>
122+
<Button
123+
variant="ghost"
124+
size="sm"
125+
onClick={handleRandomize}
126+
className="border-foreground/10 bg-muted/50 h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
127+
>
128+
<div className="flex flex-col justify-start text-left">
129+
<div className="text-muted-foreground text-xs">Shuffle</div>
130+
<div className="text-foreground text-sm font-medium">
131+
Try Random
132+
</div>
133+
</div>
134+
<HugeiconsIcon icon={DiceFaces05Icon} className="size-5 md:hidden" />
135+
<Kbd className="bg-foreground/10 text-foreground hidden md:flex">
136+
R
137+
</Kbd>
138+
</Button>
139+
</TooltipTrigger>
140+
<TooltipContent side="left">
141+
Use browser back/forward to navigate history
142+
</TooltipContent>
143+
</Tooltip>
160144
)
161145
}
162146

‎apps/v4/app/(create)/components/reset-button.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { Undo02Icon } from "@hugeicons/core-free-icons"
5+
import { HugeiconsIcon } from "@hugeicons/react"
6+
7+
import { DEFAULT_CONFIG } from "@/registry/config"
8+
import {
9+
AlertDialog,
10+
AlertDialogAction,
11+
AlertDialogCancel,
12+
AlertDialogContent,
13+
AlertDialogDescription,
14+
AlertDialogFooter,
15+
AlertDialogHeader,
16+
AlertDialogTitle,
17+
AlertDialogTrigger,
18+
} from "@/registry/new-york-v4/ui/alert-dialog"
19+
import { Button } from "@/registry/new-york-v4/ui/button"
20+
import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
21+
22+
export function ResetButton() {
23+
const [params, setParams] = useDesignSystemSearchParams()
24+
25+
const handleReset = React.useCallback(() => {
26+
setParams({
27+
base: params.base, // Keep the current base value.
28+
style: DEFAULT_CONFIG.style,
29+
baseColor: DEFAULT_CONFIG.baseColor,
30+
theme: DEFAULT_CONFIG.theme,
31+
iconLibrary: DEFAULT_CONFIG.iconLibrary,
32+
font: DEFAULT_CONFIG.font,
33+
menuAccent: DEFAULT_CONFIG.menuAccent,
34+
menuColor: DEFAULT_CONFIG.menuColor,
35+
radius: DEFAULT_CONFIG.radius,
36+
template: DEFAULT_CONFIG.template,
37+
item: "preview",
38+
})
39+
}, [setParams, params.base])
40+
41+
return (
42+
<AlertDialog>
43+
<AlertDialogTrigger asChild>
44+
<Button
45+
variant="ghost"
46+
size="sm"
47+
className="border-foreground/10 bg-muted/50 hidden h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:flex md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
48+
>
49+
<div className="flex flex-col justify-start text-left">
50+
<div className="text-muted-foreground text-xs">Reset</div>
51+
<div className="text-foreground text-sm font-medium">
52+
Start Over
53+
</div>
54+
</div>
55+
<HugeiconsIcon icon={Undo02Icon} className="-translate-x-0.5" />
56+
</Button>
57+
</AlertDialogTrigger>
58+
<AlertDialogContent className="dialog-ring p-4 sm:max-w-sm">
59+
<AlertDialogHeader>
60+
<AlertDialogTitle>Reset to defaults?</AlertDialogTitle>
61+
<AlertDialogDescription>
62+
This will reset all customization options to their default values.
63+
This action cannot be undone.
64+
</AlertDialogDescription>
65+
</AlertDialogHeader>
66+
<AlertDialogFooter>
67+
<AlertDialogCancel className="rounded-lg">Cancel</AlertDialogCancel>
68+
<AlertDialogAction className="rounded-lg" onClick={handleReset}>
69+
Reset
70+
</AlertDialogAction>
71+
</AlertDialogFooter>
72+
</AlertDialogContent>
73+
</AlertDialog>
74+
)
75+
}

‎apps/v4/app/(create)/create/page.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@ import { Button } from "@/registry/new-york-v4/ui/button"
1212
import { Separator } from "@/registry/new-york-v4/ui/separator"
1313
import { SidebarProvider } from "@/registry/new-york-v4/ui/sidebar"
1414
import { Customizer } from "@/app/(create)/components/customizer"
15-
import { CustomizerControls } from "@/app/(create)/components/customizer-controls"
1615
import { ItemExplorer } from "@/app/(create)/components/item-explorer"
1716
import { ItemPicker } from "@/app/(create)/components/item-picker"
1817
import { Preview } from "@/app/(create)/components/preview"
18+
import { RandomButton } from "@/app/(create)/components/random-button"
19+
import { ResetButton } from "@/app/(create)/components/reset-button"
1920
import { ShareButton } from "@/app/(create)/components/share-button"
2021
import { ToolbarControls } from "@/app/(create)/components/toolbar-controls"
2122
import { V0Button } from "@/app/(create)/components/v0-button"
@@ -103,7 +104,10 @@ export default async function CreatePage({
103104
</div>
104105
<div className="fixed inset-x-0 bottom-0 ml-auto flex flex-1 items-center gap-2 px-4.5 pb-4 sm:static sm:justify-end sm:p-0 lg:ml-0 xl:justify-center">
105106
<ItemPicker items={filteredItems} />
106-
<CustomizerControls className="sm:hidden" />
107+
<div className="items-center gap-0 sm:hidden">
108+
<RandomButton />
109+
<ResetButton />
110+
</div>
107111
<Separator
108112
orientation="vertical"
109113
className="mr-2 hidden sm:flex xl:hidden"

‎apps/v4/app/(create)/preview/[base]/[name]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { absoluteUrl } from "@/lib/utils"
77
import { DarkModeScript } from "@/components/mode-switcher"
88
import { TailwindIndicator } from "@/components/tailwind-indicator"
99
import { BASES, type Base } from "@/registry/config"
10-
import { RandomizeScript } from "@/app/(create)/components/customizer-controls"
10+
import { RandomizeScript } from "@/app/(create)/components/random-button"
1111
import { DesignSystemProvider } from "@/app/(create)/components/design-system-provider"
1212
import { ItemPickerScript } from "@/app/(create)/components/item-picker"
1313
import { PreviewStyle } from "@/app/(create)/components/preview-style"

‎apps/v4/registry/config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,13 +133,13 @@ export const PRESETS: Preset[] = [
133133
{
134134
name: "radix-vega",
135135
title: "Vega (Radix)",
136-
description: "Vega / Lucide / Geist Sans",
136+
description: "Vega / Lucide / Inter",
137137
base: "radix",
138138
style: "vega",
139139
baseColor: "neutral",
140140
theme: "neutral",
141141
iconLibrary: "lucide",
142-
font: "geist",
142+
font: "inter",
143143
item: "Item",
144144
menuAccent: "subtle",
145145
menuColor: "default",

0 commit comments

Comments
 (0)