create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

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

@@ -1,30 +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
+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

package/templates/default/src/components/loading-skeleton/form/button-skeleton.tsx

@@ -1,8 +1,8 @@
-import { Skeleton } from '@/components/ui/skeleton'
-import React from 'react'
-
-const ButtonSkeleton = () => {
-  return <Skeleton className="h-10 w-24" />
-}
-
-export default ButtonSkeleton
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const ButtonSkeleton = () => {
+  return <Skeleton className="h-10 w-24" />
+}
+
+export default ButtonSkeleton

package/templates/default/src/components/loading-skeleton/form/icon-button-skeleton.tsx

@@ -1,8 +1,8 @@
-import { Skeleton } from '@/components/ui/skeleton'
-import React from 'react'
-
-const IconButtonSkeleton = () => {
-  return <Skeleton className="h-8 w-8 rounded-sm" />
-}
-
-export default IconButtonSkeleton
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const IconButtonSkeleton = () => {
+  return <Skeleton className="h-8 w-8 rounded-sm" />
+}
+
+export default IconButtonSkeleton

package/templates/default/src/components/loading-skeleton/form/text-input-skeleton.tsx

@@ -1,8 +1,8 @@
-import { Skeleton } from '@/components/ui/skeleton'
-import React from 'react'
-
-const TextInputSkeleton = () => {
-  return <Skeleton className="h-10 w-44" />
-}
-
-export default TextInputSkeleton
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const TextInputSkeleton = () => {
+  return <Skeleton className="h-10 w-44" />
+}
+
+export default TextInputSkeleton

package/templates/default/src/components/loading-skeleton/visualization/table-skeleton.tsx

@@ -1,14 +1,14 @@
-import { Skeleton } from '@/components/ui/skeleton'
-import React from 'react'
-
-const TableSkeleton = () => {
-  return (
-    <div className="flex flex-col gap-2">
-      <Skeleton className="h-10 w-full" />
-      <Skeleton className="h-10 w-full" />
-      <Skeleton className="h-10 w-full" />
-    </div>
-  )
-}
-
-export default TableSkeleton
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const TableSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+  )
+}
+
+export default TableSkeleton

package/templates/default/src/components/navigation/command-badge.tsx

@@ -1,34 +1,34 @@
-'use client'
-
-import * as React from 'react'
-import { X } from 'lucide-react'
-import { Badge } from '../ui/badge'
-import { cn } from '@/lib/utils'
-
-export interface CommandBadgeProps {
-  label: string
-  onClose: () => void
-  className?: string
-}
-
-export function CommandBadge({ label, onClose, className }: CommandBadgeProps) {
-  return (
-    <Badge
-      variant="secondary"
-      className={cn('inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium', className)}
-    >
-      <span>{label}</span>
-      <button
-        type="button"
-        onClick={e => {
-          e.stopPropagation()
-          onClose()
-        }}
-        className="hover:bg-secondary-foreground/20 ml-0.5 rounded-sm focus:outline-none focus:ring-1 focus:ring-ring"
-        aria-label={`Clear ${label}`}
-      >
-        <X className="h-3 w-3" />
-      </button>
-    </Badge>
-  )
-}
+'use client'
+
+import * as React from 'react'
+import { X } from 'lucide-react'
+import { Badge } from '../ui/badge'
+import { cn } from '@/lib/utils'
+
+export interface CommandBadgeProps {
+  label: string
+  onClose: () => void
+  className?: string
+}
+
+export function CommandBadge({ label, onClose, className }: CommandBadgeProps) {
+  return (
+    <Badge
+      variant="secondary"
+      className={cn('inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium', className)}
+    >
+      <span>{label}</span>
+      <button
+        type="button"
+        onClick={e => {
+          e.stopPropagation()
+          onClose()
+        }}
+        className="hover:bg-secondary-foreground/20 ml-0.5 rounded-sm focus:outline-none focus:ring-1 focus:ring-ring"
+        aria-label={`Clear ${label}`}
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </Badge>
+  )
+}

package/templates/default/src/components/navigation/command-chain-input.tsx

@@ -1,51 +1,51 @@
-'use client'
-
-import * as React from 'react'
-import { Command as CommandPrimitive } from 'cmdk'
-import { Search } from 'lucide-react'
-import { CommandBadge } from './command-badge'
-import { cn } from '@/lib/utils'
-
-export interface CommandChainInputProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {
-  badge?: {
-    label: string
-    onClose: () => void
-  }
-}
-
-export const CommandChainInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  CommandChainInputProps
->(({ badge, className, onKeyDown, ...props }, ref) => {
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    // If backspace is pressed and input is empty, clear the badge
-    if (e.key === 'Backspace' && !(e.target as HTMLInputElement).value && badge) {
-      e.preventDefault()
-      badge.onClose()
-      return
-    }
-    onKeyDown?.(e)
-  }
-
-  return (
-    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-      <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-      {badge && (
-        <div className="mr-2 flex-shrink-0">
-          <CommandBadge label={badge.label} onClose={badge.onClose} />
-        </div>
-      )}
-      <CommandPrimitive.Input
-        ref={ref}
-        className={cn(
-          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        onKeyDown={handleKeyDown}
-        {...props}
-      />
-    </div>
-  )
-})
-
-CommandChainInput.displayName = 'CommandChainInput'
+'use client'
+
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+import { CommandBadge } from './command-badge'
+import { cn } from '@/lib/utils'
+
+export interface CommandChainInputProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {
+  badge?: {
+    label: string
+    onClose: () => void
+  }
+}
+
+export const CommandChainInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  CommandChainInputProps
+>(({ badge, className, onKeyDown, ...props }, ref) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // If backspace is pressed and input is empty, clear the badge
+    if (e.key === 'Backspace' && !(e.target as HTMLInputElement).value && badge) {
+      e.preventDefault()
+      badge.onClose()
+      return
+    }
+    onKeyDown?.(e)
+  }
+
+  return (
+    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+      <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+      {badge && (
+        <div className="mr-2 flex-shrink-0">
+          <CommandBadge label={badge.label} onClose={badge.onClose} />
+        </div>
+      )}
+      <CommandPrimitive.Input
+        ref={ref}
+        className={cn(
+          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        onKeyDown={handleKeyDown}
+        {...props}
+      />
+    </div>
+  )
+})
+
+CommandChainInput.displayName = 'CommandChainInput'

package/templates/default/src/components/navigation/entity-search-command.tsx

@@ -1,116 +1,118 @@
-'use client'
-
-import * as React from 'react'
-import { useEffect, useState, useMemo } from 'react'
-import { CommandGroup, CommandItem } from '../ui/command'
-import { ActionResponse } from '@/types/form/actionHandler'
-
-export interface EntitySearchCommandProps<T extends { id: string }> {
-  searchQuery: string
-  entityName: string
-  fetchAction: () => Promise<ActionResponse>
-  searchKey: keyof T
-  icon?: React.ReactNode
-  onSelect?: (entity: T) => void
-}
-
-export function EntitySearchCommand<T extends { id: string }>({
-  searchQuery,
-  entityName,
-  fetchAction,
-  searchKey,
-  icon,
-  onSelect,
-}: EntitySearchCommandProps<T>) {
-  const [entities, setEntities] = useState<T[]>([])
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    let isMounted = true
-
-    const fetchEntities = async () => {
-      setIsLoading(true)
-      setError(null)
-      try {
-        const result = await fetchAction()
-        if (isMounted) {
-          if (result.status === 200 && result.data) {
-            setEntities(result.data as T[])
-          } else {
-            setError(result.error || 'Failed to fetch entities')
-          }
-          setIsLoading(false)
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : 'An error occurred')
-          setIsLoading(false)
-        }
-      }
-    }
-
-    fetchEntities()
-
-    return () => {
-      isMounted = false
-    }
-  }, [fetchAction])
-
-  const filteredEntities = useMemo(() => {
-    if (!searchQuery.trim()) {
-      return entities
-    }
-
-    const query = searchQuery.toLowerCase()
-    return entities.filter(entity => {
-      const value = entity[searchKey]
-      if (typeof value === 'string') {
-        return value.toLowerCase().includes(query)
-      }
-      return false
-    })
-  }, [entities, searchQuery, searchKey])
-
-  if (isLoading) {
-    return (
-      <CommandGroup heading={`Searching ${entityName}...`}>
-        <CommandItem disabled>Loading...</CommandItem>
-      </CommandGroup>
-    )
-  }
-
-  if (error) {
-    return (
-      <CommandGroup heading="Error">
-        <CommandItem disabled className="text-destructive">
-          {error}
-        </CommandItem>
-      </CommandGroup>
-    )
-  }
-
-  if (filteredEntities.length === 0) {
-    return <></>
-  }
-
-  return (
-    <CommandGroup heading={`${entityName} Results`}>
-      {filteredEntities.map(entity => {
-        const displayValue = entity[searchKey]
-        return (
-          <CommandItem
-            key={entity.id}
-            value={typeof displayValue === 'string' ? displayValue : entity.id}
-            onSelect={() => {
-              onSelect?.(entity)
-            }}
-          >
-            {icon}
-            <span>{typeof displayValue === 'string' ? displayValue : entity.id}</span>
-          </CommandItem>
-        )
-      })}
-    </CommandGroup>
-  )
-}
+'use client'
+
+import * as React from 'react'
+import { useEffect, useState, useMemo } from 'react'
+import { CommandGroup, CommandItem } from '../ui/command'
+import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
+
+export interface EntitySearchCommandProps<T extends { id: string }> {
+  searchQuery: string
+  entityName: string
+  fetchAction: () => Promise<ActionResponse>
+  getEntities: (data: ActionResponseData | undefined) => T[]
+  searchKey: keyof T
+  icon?: React.ReactNode
+  onSelect?: (entity: T) => void
+}
+
+export function EntitySearchCommand<T extends { id: string }>({
+  searchQuery,
+  entityName,
+  fetchAction,
+  getEntities,
+  searchKey,
+  icon,
+  onSelect,
+}: EntitySearchCommandProps<T>) {
+  const [entities, setEntities] = useState<T[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let isMounted = true
+
+    const fetchEntities = async () => {
+      setIsLoading(true)
+      setError(null)
+      try {
+        const result = await fetchAction()
+        if (isMounted) {
+          if (result.status === 200) {
+            setEntities(getEntities(result.data))
+          } else {
+            setError(result.error || 'Failed to fetch entities')
+          }
+          setIsLoading(false)
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : 'An error occurred')
+          setIsLoading(false)
+        }
+      }
+    }
+
+    fetchEntities()
+
+    return () => {
+      isMounted = false
+    }
+  }, [fetchAction, getEntities])
+
+  const filteredEntities = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return entities
+    }
+
+    const query = searchQuery.toLowerCase()
+    return entities.filter(entity => {
+      const value = entity[searchKey]
+      if (typeof value === 'string') {
+        return value.toLowerCase().includes(query)
+      }
+      return false
+    })
+  }, [entities, searchQuery, searchKey])
+
+  if (isLoading) {
+    return (
+      <CommandGroup heading={`Searching ${entityName}...`}>
+        <CommandItem disabled>Loading...</CommandItem>
+      </CommandGroup>
+    )
+  }
+
+  if (error) {
+    return (
+      <CommandGroup heading="Error">
+        <CommandItem disabled className="text-destructive">
+          {error}
+        </CommandItem>
+      </CommandGroup>
+    )
+  }
+
+  if (filteredEntities.length === 0) {
+    return <></>
+  }
+
+  return (
+    <CommandGroup heading={`${entityName} Results`}>
+      {filteredEntities.map(entity => {
+        const displayValue = entity[searchKey]
+        return (
+          <CommandItem
+            key={entity.id}
+            value={typeof displayValue === 'string' ? displayValue : entity.id}
+            onSelect={() => {
+              onSelect?.(entity)
+            }}
+          >
+            {icon}
+            <span>{typeof displayValue === 'string' ? displayValue : entity.id}</span>
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}

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

@@ -1,31 +1,31 @@
-import React from 'react'
-import { Card, CardContent } from '../ui/card'
-import Link from 'next/link'
-
-const NavCard = ({
-  data,
-  href,
-  icon,
-}: {
-  data: { title: string; description: string }
-  href: string
-  icon: React.ReactNode
-}) => {
-  return (
-    <Link href={href} className="w-full">
-      <Card className="h-24 w-full border-none outline-none transition-colors hover:bg-accent hover:text-accent-foreground">
-        <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">
-            {icon}
-          </div>
-          <div className="flex min-w-0 flex-1 flex-col justify-center">
-            <span className="truncate text-sm font-medium">{data.title}</span>
-            <span className="line-clamp-2 text-xs text-muted-foreground">{data.description}</span>
-          </div>
-        </CardContent>
-      </Card>
-    </Link>
-  )
-}
-
-export default NavCard
+import React from 'react'
+import { Card, CardContent } from '../ui/card'
+import Link from 'next/link'
+
+const NavCard = ({
+  data,
+  href,
+  icon,
+}: {
+  data: { title: string; description: string }
+  href: string
+  icon: React.ReactNode
+}) => {
+  return (
+    <Link href={href} className="w-full">
+      <Card className="h-24 w-full border-none outline-none transition-colors hover:bg-accent hover:text-accent-foreground">
+        <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">
+            {icon}
+          </div>
+          <div className="flex min-w-0 flex-1 flex-col justify-center">
+            <span className="truncate text-sm font-medium">{data.title}</span>
+            <span className="line-clamp-2 text-xs text-muted-foreground">{data.description}</span>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  )
+}
+
+export default NavCard