Merge pull request #10332 from shadcn-ui/shadcn/open-preset

feat: add open preset

apps/v4/app/(app)/create/components/copy-preset.tsx

@@ -10,6 +10,7 @@ import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
 export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
   const presetCode = usePresetCode()
   const [hasCopied, setHasCopied] = React.useState(false)
+  const label = hasCopied ? "Copied" : `--preset ${presetCode}`
 
   React.useEffect(() => {
     if (hasCopied) {
@@ -32,12 +33,13 @@ export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
     <Button
       variant="outline"
       onClick={handleCopy}
+      title={label}
       className={cn(
         "touch-manipulation bg-transparent! px-2! py-0! text-sm! transition-none select-none hover:bg-muted! pointer-coarse:h-10!",
         className
       )}
     >
-      <span>{hasCopied ? "Copied" : `--preset ${presetCode}`}</span>
+      <span className="block min-w-0 truncate">{label}</span>
     </Button>
   )
 }

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

@@ -23,12 +23,12 @@ import { FontPicker } from "@/app/(app)/create/components/font-picker"
 import { IconLibraryPicker } from "@/app/(app)/create/components/icon-library-picker"
 import { MainMenu } from "@/app/(app)/create/components/main-menu"
 import { MenuColorPicker } from "@/app/(app)/create/components/menu-picker"
+import { OpenPreset } from "@/app/(app)/create/components/open-preset"
 import { RadiusPicker } from "@/app/(app)/create/components/radius-picker"
 import { RandomButton } from "@/app/(app)/create/components/random-button"
 import { ResetDialog } from "@/app/(app)/create/components/reset-button"
 import { StylePicker } from "@/app/(app)/create/components/style-picker"
 import { ThemePicker } from "@/app/(app)/create/components/theme-picker"
-import { V0Button } from "@/app/(app)/create/components/v0-button"
 import { FONT_HEADING_OPTIONS, FONTS } from "@/app/(app)/create/lib/fonts"
 import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 
@@ -102,8 +102,12 @@ export function Customizer({
         </FieldGroup>
       </CardContent>
       <CardFooter className="flex min-w-0 gap-2 md:flex-col md:rounded-b-none md:**:[button,a]:w-full">
-        <CopyPreset className="flex-1 md:flex-none" />
-        <RandomButton className="flex-1 md:flex-none" />
+        <CopyPreset className="min-w-0 flex-1 md:flex-none" />
+        <OpenPreset
+          className="max-w-20 min-w-0 flex-1 sm:max-w-none md:flex-none"
+          label={isMobile ? "Open" : "Open Preset"}
+        />
+        <RandomButton className="max-w-20 min-w-0 flex-1 sm:max-w-none md:flex-none" />
         <ActionMenu itemsByBase={itemsByBase} />
         <ResetDialog />
       </CardFooter>

apps/v4/app/(app)/create/components/main-menu.tsx

@@ -17,6 +17,7 @@ import {
 } from "@/app/(app)/create/components/picker"
 import { useActionMenuTrigger } from "@/app/(app)/create/hooks/use-action-menu"
 import { useHistory } from "@/app/(app)/create/hooks/use-history"
+import { useOpenPresetTrigger } from "@/app/(app)/create/hooks/use-open-preset"
 import { useRandom } from "@/app/(app)/create/hooks/use-random"
 import { useReset } from "@/app/(app)/create/hooks/use-reset"
 import { useThemeToggle } from "@/app/(app)/create/hooks/use-theme-toggle"
@@ -27,6 +28,7 @@ export function MainMenu({ className }: React.ComponentProps<typeof Button>) {
   const [isMac, setIsMac] = React.useState(false)
   const { canGoBack, canGoForward, goBack, goForward } = useHistory()
   const { openActionMenu } = useActionMenuTrigger()
+  const { openPreset } = useOpenPresetTrigger()
   const { randomize } = useRandom()
   const { toggleTheme } = useThemeToggle()
   const { setShowResetDialog } = useReset()
@@ -55,6 +57,9 @@ export function MainMenu({ className }: React.ComponentProps<typeof Button>) {
               Navigate...
               <PickerShortcut>{isMac ? "⌘P" : "Ctrl+P"}</PickerShortcut>
             </PickerItem>
+            <PickerItem onClick={openPreset}>
+              Open Preset... <PickerShortcut>O</PickerShortcut>
+            </PickerItem>
             <PickerItem onClick={randomize}>
               Shuffle <PickerShortcut>R</PickerShortcut>
             </PickerItem>

apps/v4/app/(app)/create/components/open-preset.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import Script from "next/script"
+
+import { cn } from "@/lib/utils"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { Button } from "@/styles/base-nova/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/styles/base-nova/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/styles/base-nova/ui/drawer"
+import { Field, FieldContent, FieldLabel } from "@/styles/base-nova/ui/field"
+import { Input } from "@/styles/base-nova/ui/input"
+import {
+  OPEN_PRESET_FORWARD_TYPE,
+  useOpenPreset,
+} from "@/app/(app)/create/hooks/use-open-preset"
+import { parsePresetInput } from "@/app/(app)/create/lib/parse-preset-input"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+const PRESET_EXAMPLE = "b2D0wqNxT"
+const PRESET_TITLE = "Open Preset"
+const PRESET_DESCRIPTION = "Paste a preset code to load a saved configuration."
+
+export function OpenPreset({
+  className,
+  label = "Open Preset",
+}: React.ComponentProps<typeof Button> & {
+  label?: string
+}) {
+  const [input, setInput] = React.useState("")
+  const [, setParams] = useDesignSystemSearchParams()
+  const isMobile = useIsMobile()
+  const { open, setOpen } = useOpenPreset()
+
+  const nextPreset = React.useMemo(() => parsePresetInput(input), [input])
+  const isInvalid = input.trim().length > 0 && nextPreset === null
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      setOpen(nextOpen)
+
+      if (!nextOpen) {
+        setInput("")
+      }
+    },
+    [setOpen]
+  )
+
+  const handleSubmit = React.useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+
+      if (!nextPreset) {
+        return
+      }
+
+      setParams({ preset: nextPreset })
+      handleOpenChange(false)
+    },
+    [handleOpenChange, nextPreset, setParams]
+  )
+
+  const triggerClassName = cn(
+    "touch-manipulation bg-transparent! px-2! py-0! text-sm! transition-none select-none hover:bg-muted! pointer-coarse:h-10!",
+    className
+  )
+
+  const desktopTrigger = (
+    <Button variant="outline" className={triggerClassName} />
+  )
+
+  const fields = (
+    <Field data-invalid={isInvalid || undefined}>
+      <FieldLabel htmlFor="preset-code" className="sr-only">
+        Preset code
+      </FieldLabel>
+      <FieldContent>
+        <Input
+          id="preset-code"
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+          placeholder={`${PRESET_EXAMPLE} or --preset ${PRESET_EXAMPLE}`}
+          autoCapitalize="none"
+          autoCorrect="off"
+          spellCheck={false}
+          aria-invalid={isInvalid}
+          className="h-10 md:h-8"
+        />
+      </FieldContent>
+    </Field>
+  )
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={handleOpenChange}>
+        <DrawerTrigger asChild>
+          <Button variant="outline" className={triggerClassName}>
+            {label}
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="dark rounded-t-2xl!">
+          <DrawerHeader>
+            <DrawerTitle className="text-xl">{PRESET_TITLE}</DrawerTitle>
+            <DrawerDescription>{PRESET_DESCRIPTION}</DrawerDescription>
+          </DrawerHeader>
+          <form onSubmit={handleSubmit}>
+            <div className="px-4 py-2">{fields}</div>
+            <DrawerFooter>
+              <Button type="submit" className="h-10" disabled={!nextPreset}>
+                Open
+              </Button>
+              <DrawerClose asChild>
+                <Button variant="outline" type="button" className="h-10">
+                  Cancel
+                </Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </form>
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger render={desktopTrigger}>{label}</DialogTrigger>
+      <DialogContent className="dark">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>{PRESET_TITLE}</DialogTitle>
+            <DialogDescription>{PRESET_DESCRIPTION}</DialogDescription>
+          </DialogHeader>
+          <div className="py-4">{fields}</div>
+          <DialogFooter>
+            <DialogClose render={<Button variant="outline" type="button" />}>
+              Cancel
+            </DialogClose>
+            <Button type="submit" disabled={!nextPreset}>
+              Open
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function OpenPresetScript() {
+  return (
+    <Script
+      id="open-preset-listener"
+      strategy="beforeInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+            (function() {
+              // Forward O key.
+              document.addEventListener('keydown', function(e) {
+                if (e.key === 'o' && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                  if (
+                    (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+                    e.target instanceof HTMLInputElement ||
+                    e.target instanceof HTMLTextAreaElement ||
+                    e.target instanceof HTMLSelectElement
+                  ) {
+                    return;
+                  }
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({
+                      type: '${OPEN_PRESET_FORWARD_TYPE}',
+                      key: e.key
+                    }, '*');
+                  }
+                }
+              });
+
+            })();
+          `,
+      }}
+    />
+  )
+}

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

@@ -11,6 +11,7 @@ import { DARK_MODE_FORWARD_TYPE } from "@/app/(app)/create/components/mode-switc
 import { PreviewSwitcher } from "@/app/(app)/create/components/preview-switcher"
 import { RANDOMIZE_FORWARD_TYPE } from "@/app/(app)/create/components/random-button"
 import { sendToIframe } from "@/app/(app)/create/hooks/use-iframe-sync"
+import { OPEN_PRESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-open-preset"
 import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset"
 import {
   serializeDesignSystemSearchParams,
@@ -20,78 +21,6 @@ import {
 // Hoisted — avoids recreating on every message event. (js-hoist-regexp)
 const MAC_REGEX = /Mac|iPhone|iPad|iPod/
 
-// Hoisted — only uses module-level constants, no component state. (rendering-hoist-jsx)
-function handleMessage(event: MessageEvent) {
-  if (
-    typeof window === "undefined" ||
-    event.origin !== window.location.origin
-  ) {
-    return
-  }
-
-  const type = event.data.type
-  if (type === CMD_K_FORWARD_TYPE) {
-    const isMac = MAC_REGEX.test(navigator.userAgent)
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: event.data.key || "k",
-        metaKey: isMac,
-        ctrlKey: !isMac,
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  } else if (type === RANDOMIZE_FORWARD_TYPE) {
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: event.data.key || "r",
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  } else if (type === UNDO_FORWARD_TYPE) {
-    const isMac = MAC_REGEX.test(navigator.userAgent)
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: "z",
-        metaKey: isMac,
-        ctrlKey: !isMac,
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  } else if (type === REDO_FORWARD_TYPE) {
-    const isMac = MAC_REGEX.test(navigator.userAgent)
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: "z",
-        shiftKey: true,
-        metaKey: isMac,
-        ctrlKey: !isMac,
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  } else if (type === RESET_FORWARD_TYPE) {
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: "R",
-        shiftKey: true,
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  } else if (type === DARK_MODE_FORWARD_TYPE) {
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: event.data.key || "d",
-        bubbles: true,
-        cancelable: true,
-      })
-    )
-  }
-}
-
 export function Preview() {
   const [params] = useDesignSystemSearchParams()
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
@@ -117,6 +46,89 @@ export function Preview() {
   }, [params])
 
   React.useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      const iframeWindow = iframeRef.current?.contentWindow
+      if (
+        !iframeWindow ||
+        event.origin !== window.location.origin ||
+        event.source !== iframeWindow ||
+        !event.data ||
+        typeof event.data !== "object"
+      ) {
+        return
+      }
+
+      const type = event.data.type
+      if (type === CMD_K_FORWARD_TYPE) {
+        const isMac = MAC_REGEX.test(navigator.userAgent)
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: event.data.key || "k",
+            metaKey: isMac,
+            ctrlKey: !isMac,
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === RANDOMIZE_FORWARD_TYPE) {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: event.data.key || "r",
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === OPEN_PRESET_FORWARD_TYPE) {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: event.data.key || "o",
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === UNDO_FORWARD_TYPE) {
+        const isMac = MAC_REGEX.test(navigator.userAgent)
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: "z",
+            metaKey: isMac,
+            ctrlKey: !isMac,
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === REDO_FORWARD_TYPE) {
+        const isMac = MAC_REGEX.test(navigator.userAgent)
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: "z",
+            shiftKey: true,
+            metaKey: isMac,
+            ctrlKey: !isMac,
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === RESET_FORWARD_TYPE) {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: "R",
+            shiftKey: true,
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      } else if (type === DARK_MODE_FORWARD_TYPE) {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: event.data.key || "d",
+            bubbles: true,
+            cancelable: true,
+          })
+        )
+      }
+    }
+
     window.addEventListener("message", handleMessage)
     return () => {
       window.removeEventListener("message", handleMessage)

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

@@ -28,7 +28,7 @@ export function RandomButton({
       )}
       {...props}
     >
-      <span className="w-full text-center font-medium">Shuffle</span>
+      <span className="w-full truncate text-center font-medium">Shuffle</span>
     </Button>
   )
 }

apps/v4/app/(app)/create/hooks/use-open-preset.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import useSWR from "swr"
+
+const OPEN_PRESET_KEY = "create:open-preset-open"
+export const OPEN_PRESET_FORWARD_TYPE = "open-preset-forward"
+
+function isEditableTarget(target: EventTarget | null) {
+  return (
+    (target instanceof HTMLElement && target.isContentEditable) ||
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target instanceof HTMLSelectElement
+  )
+}
+
+export function useOpenPreset() {
+  const { data: open = false, mutate: setOpenData } = useSWR<boolean>(
+    OPEN_PRESET_KEY,
+    {
+      fallbackData: false,
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+      revalidateOnReconnect: false,
+    }
+  )
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      void setOpenData(nextOpen, { revalidate: false })
+    },
+    [setOpenData]
+  )
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (
+        e.key === "o" &&
+        !e.shiftKey &&
+        !e.metaKey &&
+        !e.ctrlKey &&
+        !e.altKey
+      ) {
+        if (isEditableTarget(e.target)) {
+          return
+        }
+
+        e.preventDefault()
+        void setOpenData(true, { revalidate: false })
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => {
+      document.removeEventListener("keydown", down)
+    }
+  }, [setOpenData])
+
+  return {
+    open,
+    setOpen: handleOpenChange,
+  }
+}
+
+export function useOpenPresetTrigger() {
+  const { mutate: setOpenData } = useSWR<boolean>(OPEN_PRESET_KEY, {
+    fallbackData: false,
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    revalidateOnReconnect: false,
+  })
+
+  const openPreset = React.useCallback(() => {
+    void setOpenData(true, { revalidate: false })
+  }, [setOpenData])
+
+  return {
+    openPreset,
+  }
+}

apps/v4/app/(app)/create/lib/parse-preset-input.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest"
+
+import { parsePresetInput } from "./parse-preset-input"
+
+describe("parsePresetInput", () => {
+  it("accepts a raw preset code", () => {
+    expect(parsePresetInput("b0")).toBe("b0")
+  })
+
+  it("accepts a --preset flag", () => {
+    expect(parsePresetInput(" --preset b0 ")).toBe("b0")
+  })
+
+  it("rejects invalid preset input", () => {
+    expect(parsePresetInput("open sesame")).toBeNull()
+  })
+})

apps/v4/app/(app)/create/lib/parse-preset-input.ts

@@ -0,0 +1,15 @@
+import { isPresetCode } from "shadcn/preset"
+
+const PRESET_FLAG_PATTERN = /^--preset\b\s+(.+)$/i
+
+export function parsePresetInput(value: string) {
+  const input = value.trim()
+
+  if (!input) {
+    return null
+  }
+
+  const preset = input.match(PRESET_FLAG_PATTERN)?.[1]?.trim() ?? input
+
+  return isPresetCode(preset) ? preset : null
+}

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

@@ -10,6 +10,7 @@ import { ActionMenuScript } from "@/app/(app)/create/components/action-menu"
 import { DesignSystemProvider } from "@/app/(app)/create/components/design-system-provider"
 import { HistoryScript } from "@/app/(app)/create/components/history-buttons"
 import { DarkModeScript } from "@/app/(app)/create/components/mode-switcher"
+import { OpenPresetScript } from "@/app/(app)/create/components/open-preset"
 import { PreviewStyle } from "@/app/(app)/create/components/preview-style"
 import { RandomizeScript } from "@/app/(app)/create/components/random-button"
 import {
@@ -139,6 +140,7 @@ export default async function BlockPage({
       <PreventScrollOnFocusScript />
       <PreviewStyle />
       <ActionMenuScript />
+      <OpenPresetScript />
       <RandomizeScript />
       <HistoryScript />
       <DarkModeScript />