create-appraisejs 0.2.0 → 0.3.0-alpha.0

package/templates/default/src/components/navigation/nav-menu-card-deck.tsx

@@ -1,112 +1,112 @@
-'use client'
-
-import { usePathname } from 'next/navigation'
-import Link from 'next/link'
-import React, { useState } from 'react'
-import { cn } from '@/lib/utils'
-import { Card, CardContent } from '../ui/card'
-import { ChevronDown } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
-
-const NavMenuCardDeck = ({
-  containerButtonText,
-  containerButtonIcon,
-  dropdownItems,
-}: {
-  containerButtonText: string
-  containerButtonIcon: React.ReactNode
-  dropdownItems: {
-    text: string
-    icon: React.ReactNode
-    href: string
-    description: string
-  }[]
-}) => {
-  const pathname = usePathname()
-  const [isHovered, setIsHovered] = useState(false)
-
-  const checkIfTriggerActive = (href: string) => {
-    return dropdownItems.some(item => item.href === href || pathname.startsWith(item.href))
-  }
-
-  const checkIfItemActive = (href: string) => {
-    return href === pathname || pathname.startsWith(href)
-  }
-
-  return (
-    <div className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      <button
-        type="button"
-        className={cn(
-          'flex items-center gap-2 rounded-md px-4 py-2 outline-none transition-colors',
-          checkIfTriggerActive(pathname) && 'bg-accent text-accent-foreground',
-          'hover:bg-accent hover:text-accent-foreground',
-        )}
-      >
-        {containerButtonIcon}
-        <span className="text-sm font-medium">{containerButtonText}</span>
-        <motion.div animate={{ rotate: isHovered ? 180 : 0 }} transition={{ duration: 0.2, ease: 'easeInOut' }}>
-          <ChevronDown className="h-4 w-4 text-muted-foreground" />
-        </motion.div>
-      </button>
-
-      <AnimatePresence>
-        {isHovered && (
-          <>
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="absolute left-0 top-full h-1 w-full bg-transparent"
-            />
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="absolute left-0 top-full z-50 mt-1 rounded-md border border-none bg-popover p-2 shadow-md"
-            >
-              <div
-                className={cn(
-                  'grid gap-1',
-                  dropdownItems.length === 1 ? 'w-[300px] grid-cols-1' : 'w-[600px] grid-cols-2',
-                )}
-              >
-                {dropdownItems.map(item => (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    className="transition-colors hover:cursor-pointer"
-                    onClick={() => setIsHovered(false)}
-                  >
-                    <Card
-                      className={cn(
-                        'h-24 w-full border-none outline-none transition-colors hover:bg-accent dark:hover:bg-primary-foreground dark:hover:text-accent-foreground',
-                        checkIfItemActive(item.href) &&
-                          'bg-green-400/25 text-accent-foreground dark:bg-primary-foreground',
-                        'hover:cursor-pointer',
-                      )}
-                    >
-                      <CardContent className="flex h-full w-full items-center gap-3 p-4">
-                        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md text-accent-foreground">
-                          {item.icon}
-                        </div>
-                        <div className="flex min-w-0 flex-1 flex-col justify-center">
-                          <span className="truncate text-sm font-medium">{item.text}</span>
-                          <span className="line-clamp-2 text-xs text-accent-foreground">{item.description}</span>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  </Link>
-                ))}
-              </div>
-            </motion.div>
-          </>
-        )}
-      </AnimatePresence>
-    </div>
-  )
-}
-
-export default NavMenuCardDeck
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import React, { useState } from 'react'
+import { cn } from '@/lib/utils'
+import { Card, CardContent } from '../ui/card'
+import { ChevronDown } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
+
+const NavMenuCardDeck = ({
+  containerButtonText,
+  containerButtonIcon,
+  dropdownItems,
+}: {
+  containerButtonText: string
+  containerButtonIcon: React.ReactNode
+  dropdownItems: {
+    text: string
+    icon: React.ReactNode
+    href: string
+    description: string
+  }[]
+}) => {
+  const pathname = usePathname()
+  const [isHovered, setIsHovered] = useState(false)
+
+  const checkIfTriggerActive = (href: string) => {
+    return dropdownItems.some(item => item.href === href || pathname.startsWith(item.href))
+  }
+
+  const checkIfItemActive = (href: string) => {
+    return href === pathname || pathname.startsWith(href)
+  }
+
+  return (
+    <div className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+      <button
+        type="button"
+        className={cn(
+          'flex items-center gap-2 rounded-md px-4 py-2 outline-none transition-colors',
+          checkIfTriggerActive(pathname) && 'bg-accent text-accent-foreground',
+          'hover:bg-accent hover:text-accent-foreground',
+        )}
+      >
+        {containerButtonIcon}
+        <span className="text-sm font-medium">{containerButtonText}</span>
+        <motion.div animate={{ rotate: isHovered ? 180 : 0 }} transition={{ duration: 0.2, ease: 'easeInOut' }}>
+          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+        </motion.div>
+      </button>
+
+      <AnimatePresence>
+        {isHovered && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="absolute left-0 top-full h-1 w-full bg-transparent"
+            />
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="absolute left-0 top-full z-50 mt-1 rounded-md border border-none bg-popover p-2 shadow-md"
+            >
+              <div
+                className={cn(
+                  'grid gap-1',
+                  dropdownItems.length === 1 ? 'w-[300px] grid-cols-1' : 'w-[600px] grid-cols-2',
+                )}
+              >
+                {dropdownItems.map(item => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    className="transition-colors hover:cursor-pointer"
+                    onClick={() => setIsHovered(false)}
+                  >
+                    <Card
+                      className={cn(
+                        'h-24 w-full border-none outline-none transition-colors hover:bg-accent dark:hover:bg-primary-foreground dark:hover:text-accent-foreground',
+                        checkIfItemActive(item.href) &&
+                          'bg-green-400/25 text-accent-foreground dark:bg-primary-foreground',
+                        'hover:cursor-pointer',
+                      )}
+                    >
+                      <CardContent className="flex h-full w-full items-center gap-3 p-4">
+                        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md text-accent-foreground">
+                          {item.icon}
+                        </div>
+                        <div className="flex min-w-0 flex-1 flex-col justify-center">
+                          <span className="truncate text-sm font-medium">{item.text}</span>
+                          <span className="line-clamp-2 text-xs text-accent-foreground">{item.description}</span>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </Link>
+                ))}
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+export default NavMenuCardDeck

package/templates/default/src/components/navigation/use-nav-command.ts

@@ -0,0 +1,58 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import type { SearchCommandMode } from './nav-command-helpers'
+
+export function useNavCommand() {
+  const [open, setOpen] = useState(false)
+  const [commandMode, setCommandMode] = useState<SearchCommandMode | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [isMac, setIsMac] = useState(false)
+
+  useEffect(() => {
+    queueMicrotask(() => setIsMac(navigator.userAgent.toLowerCase().includes('mac')))
+  }, [])
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        setOpen(currentOpen => !currentOpen)
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  useEffect(() => {
+    if (!open) {
+      queueMicrotask(() => {
+        setCommandMode(null)
+        setSearchQuery('')
+      })
+    }
+  }, [open])
+
+  const clearSearchMode = () => {
+    setCommandMode(null)
+    setSearchQuery('')
+  }
+
+  const selectSearchMode = (nextMode: SearchCommandMode) => {
+    setCommandMode(nextMode)
+    setSearchQuery('')
+  }
+
+  return {
+    open,
+    setOpen,
+    commandMode,
+    searchQuery,
+    setSearchQuery,
+    isMac,
+    clearSearchMode,
+    selectSearchMode,
+  }
+}

package/templates/default/src/components/node-header.tsx

@@ -1,159 +1,159 @@
-import { forwardRef, useCallback, HTMLAttributes, ReactNode } from 'react'
-import { useNodeId, useReactFlow } from '@xyflow/react'
-import { EllipsisVertical, Trash } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-import { Slot } from '@radix-ui/react-slot'
-import { Button, ButtonProps } from '@/components/ui/button'
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '@/components/ui/dropdown-menu'
-
-/* NODE HEADER -------------------------------------------------------------- */
-
-export type NodeHeaderProps = HTMLAttributes<HTMLElement>
-
-/**
- * A container for a consistent header layout intended to be used inside the
- * `<BaseNode />` component.
- */
-export const NodeHeader = forwardRef<HTMLElement, NodeHeaderProps>(({ className, ...props }, ref) => {
-  return (
-    <header
-      ref={ref}
-      {...props}
-      className={cn(
-        'flex items-center justify-between gap-2 px-3 py-2',
-        // Remove or modify these classes if you modify the padding in the
-        // `<BaseNode />` component.
-        className,
-      )}
-    />
-  )
-})
-
-NodeHeader.displayName = 'NodeHeader'
-
-/* NODE HEADER TITLE -------------------------------------------------------- */
-
-export type NodeHeaderTitleProps = HTMLAttributes<HTMLHeadingElement> & {
-  asChild?: boolean
-}
-
-/**
- * The title text for the node. To maintain a native application feel, the title
- * text is not selectable.
- */
-export const NodeHeaderTitle = forwardRef<HTMLHeadingElement, NodeHeaderTitleProps>(
-  ({ className, asChild, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'h3'
-
-    return <Comp ref={ref} {...props} className={cn(className, 'user-select-none flex-1 font-semibold')} />
-  },
-)
-
-NodeHeaderTitle.displayName = 'NodeHeaderTitle'
-
-/* NODE HEADER ICON --------------------------------------------------------- */
-
-export type NodeHeaderIconProps = HTMLAttributes<HTMLSpanElement>
-
-export const NodeHeaderIcon = forwardRef<HTMLSpanElement, NodeHeaderIconProps>(({ className, ...props }, ref) => {
-  return <span ref={ref} {...props} className={cn(className, '[&>*]:size-5')} />
-})
-
-NodeHeaderIcon.displayName = 'NodeHeaderIcon'
-
-/* NODE HEADER ACTIONS ------------------------------------------------------ */
-
-export type NodeHeaderActionsProps = HTMLAttributes<HTMLDivElement>
-
-/**
- * A container for right-aligned action buttons in the node header.
- */
-export const NodeHeaderActions = forwardRef<HTMLDivElement, NodeHeaderActionsProps>(({ className, ...props }, ref) => {
-  return <div ref={ref} {...props} className={cn('ml-auto flex items-center gap-1 justify-self-end', className)} />
-})
-
-NodeHeaderActions.displayName = 'NodeHeaderActions'
-
-/* NODE HEADER ACTION ------------------------------------------------------- */
-
-export type NodeHeaderActionProps = ButtonProps & {
-  label: string
-}
-
-/**
- * A thin wrapper around the `<Button />` component with a fixed sized suitable
- * for icons.
- *
- * Because the `<NodeHeaderAction />` component is intended to render icons, it's
- * important to provide a meaningful and accessible `label` prop that describes
- * the action.
- */
-export const NodeHeaderAction = forwardRef<HTMLButtonElement, NodeHeaderActionProps>(
-  ({ className, label, title, ...props }, ref) => {
-    return (
-      <Button
-        ref={ref}
-        variant="ghost"
-        aria-label={label}
-        title={title ?? label}
-        className={cn(className, 'nodrag size-6 p-1')}
-        {...props}
-      />
-    )
-  },
-)
-
-NodeHeaderAction.displayName = 'NodeHeaderAction'
-
-//
-
-export type NodeHeaderMenuActionProps = Omit<NodeHeaderActionProps, 'onClick'> & {
-  trigger?: ReactNode
-}
-
-/**
- * Renders a header action that opens a dropdown menu when clicked. The dropdown
- * trigger is a button with an ellipsis icon. The trigger's content can be changed
- * by using the `trigger` prop.
- *
- * Any children passed to the `<NodeHeaderMenuAction />` component will be rendered
- * inside the dropdown menu. You can read the docs for the shadcn dropdown menu
- * here: https://ui.shadcn.com/docs/components/dropdown-menu
- *
- */
-export const NodeHeaderMenuAction = forwardRef<HTMLButtonElement, NodeHeaderMenuActionProps>(
-  ({ trigger, children, ...props }, ref) => {
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <NodeHeaderAction ref={ref} {...props}>
-            {trigger ?? <EllipsisVertical />}
-          </NodeHeaderAction>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>{children}</DropdownMenuContent>
-      </DropdownMenu>
-    )
-  },
-)
-
-NodeHeaderMenuAction.displayName = 'NodeHeaderMenuAction'
-
-/* NODE HEADER DELETE ACTION --------------------------------------- */
-
-export const NodeHeaderDeleteAction = () => {
-  const id = useNodeId()
-  const { setNodes } = useReactFlow()
-
-  const handleClick = useCallback(() => {
-    setNodes(prevNodes => prevNodes.filter(node => node.id !== id))
-  }, [id, setNodes])
-
-  return (
-    <NodeHeaderAction onClick={handleClick} variant="ghost" label="Delete node">
-      <Trash />
-    </NodeHeaderAction>
-  )
-}
-
-NodeHeaderDeleteAction.displayName = 'NodeHeaderDeleteAction'
+import { forwardRef, useCallback, HTMLAttributes, ReactNode } from 'react'
+import { useNodeId, useReactFlow } from '@xyflow/react'
+import { EllipsisVertical, Trash } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Slot } from '@radix-ui/react-slot'
+import { Button, ButtonProps } from '@/components/ui/button'
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '@/components/ui/dropdown-menu'
+
+/* NODE HEADER -------------------------------------------------------------- */
+
+export type NodeHeaderProps = HTMLAttributes<HTMLElement>
+
+/**
+ * A container for a consistent header layout intended to be used inside the
+ * `<BaseNode />` component.
+ */
+export const NodeHeader = forwardRef<HTMLElement, NodeHeaderProps>(({ className, ...props }, ref) => {
+  return (
+    <header
+      ref={ref}
+      {...props}
+      className={cn(
+        'flex items-center justify-between gap-2 px-3 py-2',
+        // Remove or modify these classes if you modify the padding in the
+        // `<BaseNode />` component.
+        className,
+      )}
+    />
+  )
+})
+
+NodeHeader.displayName = 'NodeHeader'
+
+/* NODE HEADER TITLE -------------------------------------------------------- */
+
+export type NodeHeaderTitleProps = HTMLAttributes<HTMLHeadingElement> & {
+  asChild?: boolean
+}
+
+/**
+ * The title text for the node. To maintain a native application feel, the title
+ * text is not selectable.
+ */
+export const NodeHeaderTitle = forwardRef<HTMLHeadingElement, NodeHeaderTitleProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'h3'
+
+    return <Comp ref={ref} {...props} className={cn(className, 'user-select-none flex-1 font-semibold')} />
+  },
+)
+
+NodeHeaderTitle.displayName = 'NodeHeaderTitle'
+
+/* NODE HEADER ICON --------------------------------------------------------- */
+
+export type NodeHeaderIconProps = HTMLAttributes<HTMLSpanElement>
+
+export const NodeHeaderIcon = forwardRef<HTMLSpanElement, NodeHeaderIconProps>(({ className, ...props }, ref) => {
+  return <span ref={ref} {...props} className={cn(className, '[&>*]:size-5')} />
+})
+
+NodeHeaderIcon.displayName = 'NodeHeaderIcon'
+
+/* NODE HEADER ACTIONS ------------------------------------------------------ */
+
+export type NodeHeaderActionsProps = HTMLAttributes<HTMLDivElement>
+
+/**
+ * A container for right-aligned action buttons in the node header.
+ */
+export const NodeHeaderActions = forwardRef<HTMLDivElement, NodeHeaderActionsProps>(({ className, ...props }, ref) => {
+  return <div ref={ref} {...props} className={cn('ml-auto flex items-center gap-1 justify-self-end', className)} />
+})
+
+NodeHeaderActions.displayName = 'NodeHeaderActions'
+
+/* NODE HEADER ACTION ------------------------------------------------------- */
+
+export type NodeHeaderActionProps = ButtonProps & {
+  label: string
+}
+
+/**
+ * A thin wrapper around the `<Button />` component with a fixed sized suitable
+ * for icons.
+ *
+ * Because the `<NodeHeaderAction />` component is intended to render icons, it's
+ * important to provide a meaningful and accessible `label` prop that describes
+ * the action.
+ */
+export const NodeHeaderAction = forwardRef<HTMLButtonElement, NodeHeaderActionProps>(
+  ({ className, label, title, ...props }, ref) => {
+    return (
+      <Button
+        ref={ref}
+        variant="ghost"
+        aria-label={label}
+        title={title ?? label}
+        className={cn(className, 'nodrag size-6 p-1')}
+        {...props}
+      />
+    )
+  },
+)
+
+NodeHeaderAction.displayName = 'NodeHeaderAction'
+
+//
+
+export type NodeHeaderMenuActionProps = Omit<NodeHeaderActionProps, 'onClick'> & {
+  trigger?: ReactNode
+}
+
+/**
+ * Renders a header action that opens a dropdown menu when clicked. The dropdown
+ * trigger is a button with an ellipsis icon. The trigger's content can be changed
+ * by using the `trigger` prop.
+ *
+ * Any children passed to the `<NodeHeaderMenuAction />` component will be rendered
+ * inside the dropdown menu. You can read the docs for the shadcn dropdown menu
+ * here: https://ui.shadcn.com/docs/components/dropdown-menu
+ *
+ */
+export const NodeHeaderMenuAction = forwardRef<HTMLButtonElement, NodeHeaderMenuActionProps>(
+  ({ trigger, children, ...props }, ref) => {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <NodeHeaderAction ref={ref} {...props}>
+            {trigger ?? <EllipsisVertical />}
+          </NodeHeaderAction>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>{children}</DropdownMenuContent>
+      </DropdownMenu>
+    )
+  },
+)
+
+NodeHeaderMenuAction.displayName = 'NodeHeaderMenuAction'
+
+/* NODE HEADER DELETE ACTION --------------------------------------- */
+
+export const NodeHeaderDeleteAction = () => {
+  const id = useNodeId()
+  const { setNodes } = useReactFlow()
+
+  const handleClick = useCallback(() => {
+    setNodes(prevNodes => prevNodes.filter(node => node.id !== id))
+  }, [id, setNodes])
+
+  return (
+    <NodeHeaderAction onClick={handleClick} variant="ghost" label="Delete node">
+      <Trash />
+    </NodeHeaderAction>
+  )
+}
+
+NodeHeaderDeleteAction.displayName = 'NodeHeaderDeleteAction'