create-appraisejs 0.3.0-alpha.0 → 0.3.0

package/templates/starter/src/components/diagram/template-step-combobox.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import { cn } from '@/lib/utils'
+import {
+  capitalizeGroupName,
+  type TemplateStepWithGroup,
+} from '@/types/diagram/template-step'
+
+const GROUP_KEY_OTHER = 'Other'
+
+function groupStepsByGroupName(
+  steps: TemplateStepWithGroup[],
+): Map<string, TemplateStepWithGroup[]> {
+  const map = new Map<string, TemplateStepWithGroup[]>()
+  for (const step of steps) {
+    const key = step.templateStepGroup?.name ?? GROUP_KEY_OTHER
+    const list = map.get(key) ?? []
+    list.push(step)
+    map.set(key, list)
+  }
+  return map
+}
+
+export type TemplateStepComboboxProps = {
+  value: string
+  onValueChange: (value: string) => void
+  templateSteps: TemplateStepWithGroup[]
+  placeholder?: string
+  disabled?: boolean
+  id?: string
+}
+
+const TemplateStepCombobox = ({
+  value,
+  onValueChange,
+  templateSteps,
+  placeholder = 'Select a template step',
+  disabled = false,
+  id,
+}: TemplateStepComboboxProps) => {
+  const [open, setOpen] = React.useState(false)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const searchInputRef = React.useRef<HTMLInputElement>(null)
+
+  const selectedStep = React.useMemo(
+    () => templateSteps.find(s => s.id === value) ?? null,
+    [templateSteps, value],
+  )
+
+  const groups = React.useMemo(() => {
+    const map = groupStepsByGroupName(templateSteps)
+    return Array.from(map.entries()).sort(([a], [b]) =>
+      a.localeCompare(b, undefined, { sensitivity: 'base' }),
+    )
+  }, [templateSteps])
+
+  const handleSelect = React.useCallback(
+    (stepId: string) => {
+      onValueChange(stepId)
+      setOpen(false)
+    },
+    [onValueChange],
+  )
+
+  React.useEffect(() => {
+    if (!open) return
+    // Focus search input when dropdown opens so user can type immediately
+    const focusSearch = () => searchInputRef.current?.focus()
+    const id = requestAnimationFrame(focusSearch)
+    return () => cancelAnimationFrame(id)
+  }, [open])
+
+  React.useEffect(() => {
+    if (!open) return
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleEscape)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [open])
+
+  return (
+    <div ref={containerRef} className="relative w-full">
+      <button
+        type="button"
+        id={id}
+        role="combobox"
+        aria-expanded={open}
+        aria-controls={open ? `${id}-listbox` : undefined}
+        aria-haspopup="listbox"
+        aria-label={placeholder}
+        disabled={disabled}
+        onClick={() => setOpen(prev => !prev)}
+        className={cn(
+          'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background',
+          'focus:outline-none focus:ring-1 focus:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1',
+        )}
+      >
+        <span className={cn(!selectedStep && 'text-muted-foreground')}>
+          {selectedStep ? selectedStep.name : placeholder}
+        </span>
+        <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
+      </button>
+      {open && (
+        <div id={`${id}-listbox`} role="listbox" className="absolute left-0 right-0 top-full z-50 mt-1">
+          <Command shouldFilter className="rounded-md border border-input bg-popover shadow-md">
+            <CommandInput ref={searchInputRef} placeholder="Search template steps…" />
+            <CommandList>
+              <CommandEmpty>No step found.</CommandEmpty>
+              {groups.map(([groupKey, steps]) => (
+                <CommandGroup
+                  key={groupKey}
+                  heading={capitalizeGroupName(groupKey)}
+                >
+                  {steps.map(step => (
+                    <CommandItem
+                      key={step.id}
+                      value={step.name}
+                      onSelect={() => handleSelect(step.id)}
+                    >
+                      {step.name}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ))}
+            </CommandList>
+          </Command>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TemplateStepCombobox

package/templates/starter/src/components/diagram/use-flow-node-order.ts

@@ -0,0 +1,49 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import type { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+
+type DiagramNodeOrder = NodeOrderMap | TemplateTestCaseNodeOrderMap
+
+type UseFlowNodeOrderParams<TNodeOrder extends DiagramNodeOrder> = {
+  initialNodesOrder: TNodeOrder
+  onNodeOrderChange: (nodeOrder: TNodeOrder) => void
+  normalizeNodeOrder: (nodeOrder: DiagramNodeOrder) => TNodeOrder
+  debounceMs?: number
+}
+
+export function useFlowNodeOrder<TNodeOrder extends DiagramNodeOrder>({
+  initialNodesOrder,
+  onNodeOrderChange,
+  normalizeNodeOrder,
+  debounceMs = 200,
+}: UseFlowNodeOrderParams<TNodeOrder>) {
+  const [nodesOrder, setNodesOrder] = useState<TNodeOrder>(initialNodesOrder)
+  const hasHandledInitialRenderRef = useRef(false)
+
+  useEffect(() => {
+    if (!hasHandledInitialRenderRef.current) {
+      hasHandledInitialRenderRef.current = true
+      return
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      onNodeOrderChange(nodesOrder)
+    }, debounceMs)
+
+    return () => window.clearTimeout(timeoutId)
+  }, [debounceMs, nodesOrder, onNodeOrderChange])
+
+  const handleNodeOrderChange = useCallback(
+    (nodeOrder: DiagramNodeOrder) => {
+      setNodesOrder(normalizeNodeOrder(nodeOrder))
+    },
+    [normalizeNodeOrder],
+  )
+
+  return {
+    nodesOrder,
+    handleNodeOrderChange,
+  }
+}

package/templates/starter/src/components/form/error-message.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const ErrorMessage = ({ message, visible }: { message: string; visible: boolean }) => {
+  return <div className={`text-sm text-pink-600 ${visible ? 'visible' : 'invisible'}`}>{message}</div>
+}
+
+export default ErrorMessage

package/templates/starter/src/components/kokonutui/smooth-tab.tsx

@@ -0,0 +1,453 @@
+"use client";
+
+/**
+ * @author: @dorian_baffier
+ * @description: Smooth Tab
+ * @version: 1.0.0
+ * @date: 2025-06-26
+ * @license: MIT
+ * @website: https://kokonutui.com
+ * @github: https://github.com/kokonut-labs/kokonutui
+ */
+
+import * as React from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { cn } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+interface TabItem {
+    id: string;
+    title: string;
+    icon?: LucideIcon;
+    content?: React.ReactNode;
+    cardContent?: React.ReactNode;
+    color: string;
+}
+
+const WaveformPath = () => (
+    <motion.path
+        d="M0 50 
+           C 20 40, 40 30, 60 50
+           C 80 70, 100 60, 120 50
+           C 140 40, 160 30, 180 50
+           C 200 70, 220 60, 240 50
+           C 260 40, 280 30, 300 50
+           C 320 70, 340 60, 360 50
+           C 380 40, 400 30, 420 50
+           L 420 100 L 0 100 Z"
+        initial={false}
+        animate={{
+            x: [0, 10, 0],
+            transition: {
+                duration: 5,
+                ease: "linear",
+                repeat: Number.POSITIVE_INFINITY,
+            },
+        }}
+    />
+);
+
+const DEFAULT_TABS: TabItem[] = [
+    {
+        id: "Models",
+        title: "Models",
+        color: "bg-blue-500 hover:bg-blue-600",
+        cardContent: (
+            <div className="relative h-full">
+                <div className="absolute inset-0 overflow-hidden">
+                    <svg
+                        className="absolute bottom-0 w-full h-32"
+                        viewBox="0 0 420 100"
+                        preserveAspectRatio="none"
+                        aria-hidden="true"
+                        role="presentation"
+                    >
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.15 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-blue-500 stroke-blue-500"
+                            style={{ strokeWidth: 1 }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.1 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-blue-500 stroke-blue-500"
+                            style={{
+                                strokeWidth: 1,
+                                transform: "translateY(10px)",
+                            }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                    </svg>
+                </div>
+                <div className="p-6 h-full relative flex flex-col">
+                    <div className="space-y-2">
+                        <h3 className="text-2xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
+                            Models
+                        </h3>
+                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
+                            Choose the model you want to use
+                        </p>
+                    </div>
+                </div>
+            </div>
+        ),
+    },
+    {
+        id: "MCPs",
+        title: "MCPs",
+        color: "bg-purple-500 hover:bg-purple-600",
+        cardContent: (
+            <div className="relative h-full">
+                <div className="absolute inset-0 overflow-hidden">
+                    <svg
+                        className="absolute bottom-0 w-full h-32"
+                        viewBox="0 0 420 100"
+                        preserveAspectRatio="none"
+                        aria-hidden="true"
+                        role="presentation"
+                    >
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.15 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-purple-500 stroke-purple-500"
+                            style={{ strokeWidth: 1 }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.1 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-purple-500 stroke-purple-500"
+                            style={{
+                                strokeWidth: 1,
+                                transform: "translateY(10px)",
+                            }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                    </svg>
+                </div>
+                <div className="p-6 h-full relative flex flex-col">
+                    <div className="space-y-2">
+                        <h3 className="text-xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
+                            MCPs
+                        </h3>
+                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
+                            Choose the MCP you want to use
+                        </p>
+                    </div>
+                </div>
+            </div>
+        ),
+    },
+    {
+        id: "Agents",
+        title: "Agents",
+        color: "bg-emerald-500 hover:bg-emerald-600",
+        cardContent: (
+            <div className="relative h-full">
+                <div className="absolute inset-0 overflow-hidden">
+                    <svg
+                        className="absolute bottom-0 w-full h-32"
+                        viewBox="0 0 420 100"
+                        preserveAspectRatio="none"
+                        aria-hidden="true"
+                        role="presentation"
+                    >
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.15 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-emerald-500 stroke-emerald-500"
+                            style={{ strokeWidth: 1 }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.1 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-emerald-500 stroke-emerald-500"
+                            style={{
+                                strokeWidth: 1,
+                                transform: "translateY(10px)",
+                            }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                    </svg>
+                </div>
+                <div className="p-6 h-full relative flex flex-col">
+                    <div className="space-y-2">
+                        <h3 className="text-2xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
+                            Agents
+                        </h3>
+                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
+                            Choose the agent you want to use
+                        </p>
+                    </div>
+                </div>
+            </div>
+        ),
+    },
+    {
+        id: "Users",
+        title: "Users",
+        color: "bg-amber-500 hover:bg-amber-600",
+        cardContent: (
+            <div className="relative h-full">
+                <div className="absolute inset-0 overflow-hidden">
+                    <svg
+                        className="absolute bottom-0 w-full h-32"
+                        viewBox="0 0 420 100"
+                        preserveAspectRatio="none"
+                        aria-hidden="true"
+                        role="presentation"
+                    >
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.15 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-amber-500 stroke-amber-500"
+                            style={{ strokeWidth: 1 }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                        <motion.g
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.1 }}
+                            transition={{ duration: 0.5 }}
+                            className="fill-amber-500 stroke-amber-500"
+                            style={{
+                                strokeWidth: 1,
+                                transform: "translateY(10px)",
+                            }}
+                        >
+                            <WaveformPath />
+                        </motion.g>
+                    </svg>
+                </div>
+                <div className="p-6 h-full relative flex flex-col">
+                    <div className="space-y-2">
+                        <h3 className="text-2xl font-semibold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
+                            Users
+                        </h3>
+                        <p className="text-sm text-black/50 dark:text-white/50 leading-relaxed max-w-[90%]">
+                            Choose the user you want to use
+                        </p>
+                    </div>
+                </div>
+            </div>
+        ),
+    },
+];
+
+interface SmoothTabProps {
+    items?: TabItem[];
+    defaultTabId?: string;
+    className?: string;
+    activeColor?: string;
+    onChange?: (tabId: string) => void;
+}
+
+const slideVariants = {
+    enter: (direction: number) => ({
+        x: direction > 0 ? "100%" : "-100%",
+        opacity: 0,
+        filter: "blur(8px)",
+        scale: 0.95,
+        position: "absolute" as const,
+    }),
+    center: {
+        x: 0,
+        opacity: 1,
+        filter: "blur(0px)",
+        scale: 1,
+        position: "absolute" as const,
+    },
+    exit: (direction: number) => ({
+        x: direction < 0 ? "100%" : "-100%",
+        opacity: 0,
+        filter: "blur(8px)",
+        scale: 0.95,
+        position: "absolute" as const,
+    }),
+};
+
+const transition = {
+    duration: 0.4,
+    ease: [0.32, 0.72, 0, 1],
+};
+
+export default function SmoothTab({
+    items = DEFAULT_TABS,
+    defaultTabId = DEFAULT_TABS[0].id,
+    className,
+    activeColor = "bg-[#1F9CFE]",
+    onChange,
+}: SmoothTabProps) {
+    const [selected, setSelected] = React.useState<string>(defaultTabId);
+    const [direction, setDirection] = React.useState(0);
+    const [dimensions, setDimensions] = React.useState({ width: 0, left: 0 });
+
+    // Reference for the selected button
+    const buttonRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    // Update dimensions whenever selected tab changes or on mount
+    React.useLayoutEffect(() => {
+        const updateDimensions = () => {
+            const selectedButton = buttonRefs.current.get(selected);
+            const container = containerRef.current;
+
+            if (selectedButton && container) {
+                const rect = selectedButton.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+
+                setDimensions({
+                    width: rect.width,
+                    left: rect.left - containerRect.left,
+                });
+            }
+        };
+
+        // Initial update
+        requestAnimationFrame(() => {
+            updateDimensions();
+        });
+
+        // Update on resize
+        window.addEventListener("resize", updateDimensions);
+        return () => window.removeEventListener("resize", updateDimensions);
+    }, [selected]);
+
+    const handleTabClick = (tabId: string) => {
+        const currentIndex = items.findIndex((item) => item.id === selected);
+        const newIndex = items.findIndex((item) => item.id === tabId);
+        setDirection(newIndex > currentIndex ? 1 : -1);
+        setSelected(tabId);
+        onChange?.(tabId);
+    };
+
+    const handleKeyDown = (
+        e: React.KeyboardEvent<HTMLButtonElement>,
+        tabId: string
+    ) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleTabClick(tabId);
+        }
+    };
+
+    const selectedItem = items.find((item) => item.id === selected);
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Card Content Area */}
+            <div className="flex-1 mb-4 relative">
+                <div className="bg-card border rounded-lg h-[200px] w-full relative">
+                    <div className="absolute inset-0 overflow-hidden rounded-lg">
+                        <AnimatePresence
+                            initial={false}
+                            mode="popLayout"
+                            custom={direction}
+                        >
+                            <motion.div
+                                key={`card-${selected}`}
+                                custom={direction}
+                                variants={slideVariants as React.ComponentProps<typeof motion.div>['variants']}
+                                initial="enter"
+                                animate="center"
+                                exit="exit"
+                                transition={transition as unknown as React.ComponentProps<typeof motion.div>['transition']}
+                                className="absolute inset-0 w-full h-full will-change-transform bg-card"
+                                style={{
+                                    backfaceVisibility: "hidden",
+                                    WebkitBackfaceVisibility: "hidden",
+                                }}
+                            >
+                                {selectedItem?.cardContent}
+                            </motion.div>
+                        </AnimatePresence>
+                    </div>
+                </div>
+            </div>
+
+            {/* Bottom Toolbar */}
+            <div
+                ref={containerRef}
+                role="tablist"
+                aria-label="Smooth tabs"
+                className={cn(
+                    "flex items-center justify-between gap-1 py-1 mt-auto relative",
+                    "bg-background w-[400px] mx-auto",
+                    "border rounded-xl",
+                    "transition-all duration-200",
+                    className
+                )}
+            >
+                {/* Sliding Background */}
+                <motion.div
+                    className={cn(
+                        "absolute rounded-lg z-[1]",
+                        selectedItem?.color || activeColor
+                    )}
+                    initial={false}
+                    animate={{
+                        width: dimensions.width - 8,
+                        x: dimensions.left + 4,
+                        opacity: 1,
+                    }}
+                    transition={{
+                        type: "spring",
+                        stiffness: 400,
+                        damping: 30,
+                    }}
+                    style={{ height: "calc(100% - 8px)", top: "4px" }}
+                />
+
+                <div className="grid grid-cols-4 w-full gap-1 relative z-[2]">
+                    {items.map((item) => {
+                        const isSelected = selected === item.id;
+                        return (
+                            <motion.button
+                                key={item.id}
+                                ref={(el) => {
+                                    if (el) buttonRefs.current.set(item.id, el);
+                                    else buttonRefs.current.delete(item.id);
+                                }}
+                                type="button"
+                                role="tab"
+                                aria-selected={isSelected}
+                                aria-controls={`panel-${item.id}`}
+                                id={`tab-${item.id}`}
+                                tabIndex={isSelected ? 0 : -1}
+                                onClick={() => handleTabClick(item.id)}
+                                onKeyDown={(e) => handleKeyDown(e, item.id)}
+                                className={cn(
+                                    "relative flex items-center justify-center gap-0.5 rounded-lg px-2 py-1.5",
+                                    "text-sm font-medium transition-all duration-300",
+                                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                    "truncate",
+                                    isSelected
+                                        ? "text-white"
+                                        : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                                )}
+                            >
+                                <span className="truncate">{item.title}</span>
+                            </motion.button>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+}

package/templates/starter/src/components/loading-skeleton/data-table/data-table-skeleton.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import IconButtonSkeleton from '../form/icon-button-skeleton'
+import TextInputSkeleton from '../form/text-input-skeleton'
+import ButtonSkeleton from '../form/button-skeleton'
+import { Search } from 'lucide-react'
+import TableSkeleton from '../visualization/table-skeleton'
+
+const DataTableSkeleton = () => {
+  return (
+    <>
+      <div className="flex justify-end">
+        <div className="flex gap-2">
+          <IconButtonSkeleton />
+          <IconButtonSkeleton />
+          <IconButtonSkeleton />
+        </div>
+      </div>
+      <div className="mb-6 mt-4 flex justify-between">
+        <div className="flex items-center gap-2">
+          <Search className="mr-2 h-5 w-5" />
+          <TextInputSkeleton />
+        </div>
+        <ButtonSkeleton />
+      </div>
+      <TableSkeleton />
+    </>
+  )
+}
+
+export default DataTableSkeleton