@nestledjs/data-browser 0.1.2 → 0.1.4

package/src/lib/components/shared/AdminErrorStates.tsx

@@ -1,180 +0,0 @@
-import React from 'react'
-import { ExclamationTriangleIcon, ExclamationCircleIcon, XCircleIcon } from '@heroicons/react/24/outline'
-
-export type ErrorSeverity = 'warning' | 'error' | 'critical'
-
-export interface AdminErrorStateProps {
-  readonly title: string
-  readonly message?: string
-  readonly severity?: ErrorSeverity
-  readonly onRetry?: () => void
-  readonly onDismiss?: () => void
-  readonly className?: string
-  readonly showIcon?: boolean
-}
-
-export interface AdminEmptyStateProps {
-  readonly title: string
-  readonly message?: string
-  readonly actionLabel?: string
-  readonly onAction?: () => void
-  readonly className?: string
-  readonly icon?: React.ComponentType<{ className?: string }>
-}
-
-export interface AdminLoadingStateProps {
-  readonly title?: string
-  readonly message?: string
-  readonly className?: string
-  readonly size?: 'small' | 'medium' | 'large'
-}
-
-const getSeverityConfig = (severity: ErrorSeverity) => {
-  const configs = {
-    warning: {
-      icon: ExclamationTriangleIcon,
-      bgColor: 'bg-yellow-50',
-      borderColor: 'border-yellow-200',
-      iconColor: 'text-yellow-400',
-      titleColor: 'text-yellow-800',
-      messageColor: 'text-yellow-700',
-      buttonColor: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200',
-    },
-    error: {
-      icon: ExclamationCircleIcon,
-      bgColor: 'bg-red-50',
-      borderColor: 'border-red-200',
-      iconColor: 'text-red-400',
-      titleColor: 'text-red-800',
-      messageColor: 'text-red-700',
-      buttonColor: 'bg-red-100 text-red-800 hover:bg-red-200',
-    },
-    critical: {
-      icon: XCircleIcon,
-      bgColor: 'bg-red-100',
-      borderColor: 'border-red-300',
-      iconColor: 'text-red-500',
-      titleColor: 'text-red-900',
-      messageColor: 'text-red-800',
-      buttonColor: 'bg-red-200 text-red-900 hover:bg-red-300',
-    },
-  }
-  return configs[severity]
-}
-
-export function AdminErrorState({
-  title,
-  message,
-  severity = 'error',
-  onRetry,
-  onDismiss,
-  className = '',
-  showIcon = true,
-}: Readonly<AdminErrorStateProps>) {
-  const config = getSeverityConfig(severity)
-  const IconComponent = config.icon
-
-  return (
-    <div className={`rounded-md border p-4 ${config.bgColor} ${config.borderColor} ${className}`}>
-      <div className="flex">
-        {showIcon && (
-          <div className="flex-shrink-0">
-            <IconComponent className={`h-5 w-5 ${config.iconColor}`} aria-hidden="true" />
-          </div>
-        )}
-        <div className={showIcon ? 'ml-3' : ''}>
-          <h3 className={`text-sm font-medium ${config.titleColor}`}>
-            {title}
-          </h3>
-          {message && (
-            <div className={`mt-2 text-sm ${config.messageColor}`}>
-              <p>{message}</p>
-            </div>
-          )}
-          {(onRetry || onDismiss) && (
-            <div className="mt-4">
-              <div className="-mx-2 -my-1.5 flex">
-                {onRetry && (
-                  <button
-                    type="button"
-                    onClick={onRetry}
-                    className={`rounded-md px-2 py-1.5 text-sm font-medium ${config.buttonColor} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500`}
-                  >
-                    Try Again
-                  </button>
-                )}
-                {onDismiss && (
-                  <button
-                    type="button"
-                    onClick={onDismiss}
-                    className={`ml-3 rounded-md px-2 py-1.5 text-sm font-medium ${config.buttonColor} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500`}
-                  >
-                    Dismiss
-                  </button>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function AdminEmptyState({
-  title,
-  message,
-  actionLabel,
-  onAction,
-  className = '',
-  icon: IconComponent,
-}: Readonly<AdminEmptyStateProps>) {
-  return (
-    <div className={`text-center ${className}`}>
-      {IconComponent && (
-        <IconComponent className="mx-auto h-12 w-12 text-gray-400" />
-      )}
-      <h3 className="mt-2 text-sm font-medium text-gray-900">{title}</h3>
-      {message && (
-        <p className="mt-1 text-sm text-gray-500">{message}</p>
-      )}
-      {actionLabel && onAction && (
-        <div className="mt-6">
-          <button
-            type="button"
-            onClick={onAction}
-            className="inline-flex items-center rounded-md bg-green-web px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-web-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-web"
-          >
-            {actionLabel}
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function AdminLoadingState({
-  title = 'Loading...',
-  message,
-  className = '',
-  size = 'medium',
-}: Readonly<AdminLoadingStateProps>) {
-  const getSizeClasses = () => {
-    const sizes = {
-      small: 'h-4 w-4',
-      medium: 'h-8 w-8',
-      large: 'h-12 w-12',
-    }
-    return sizes[size]
-  }
-
-  return (
-    <div className={`flex flex-col items-center justify-center p-8 ${className}`}>
-      <div className={`animate-spin rounded-full border-b-2 border-green-web ${getSizeClasses()}`}></div>
-      <h3 className="mt-4 text-sm font-medium text-gray-900">{title}</h3>
-      {message && (
-        <p className="mt-1 text-sm text-gray-500">{message}</p>
-      )}
-    </div>
-  )
-}

package/src/lib/components/shared/AdminStatusDisplay.tsx

@@ -1,292 +0,0 @@
-import React from 'react'
-import { 
-  CheckCircleIcon, 
-  XCircleIcon, 
-  ExclamationTriangleIcon, 
-  ClockIcon,
-  QuestionMarkCircleIcon,
-  PauseCircleIcon,
-} from '@heroicons/react/24/solid'
-
-export type StatusType = 
-  | 'active' 
-  | 'inactive' 
-  | 'pending' 
-  | 'approved' 
-  | 'rejected' 
-  | 'warning' 
-  | 'error' 
-  | 'success' 
-  | 'paused' 
-  | 'unknown'
-
-export type StatusSize = 'small' | 'medium' | 'large'
-export type StatusVariant = 'badge' | 'pill' | 'dot' | 'full'
-
-export interface AdminStatusDisplayProps {
-  readonly status: StatusType
-  readonly label?: string
-  readonly size?: StatusSize
-  readonly variant?: StatusVariant
-  readonly showIcon?: boolean
-  readonly className?: string
-  readonly onClick?: () => void
-  readonly tooltip?: string
-}
-
-export interface AdminUserStatusProps {
-  readonly status: 'online' | 'offline' | 'away' | 'busy'
-  readonly showLabel?: boolean
-  readonly size?: StatusSize
-  readonly className?: string
-}
-
-interface StatusConfig {
-  icon: React.ComponentType<{ className?: string }>
-  bgColor: string
-  textColor: string
-  borderColor: string
-  defaultLabel: string
-}
-
-// Extract status configuration logic
-const getStatusConfig = (status: StatusType): StatusConfig => {
-  const configs: Record<StatusType, StatusConfig> = {
-    active: {
-      icon: CheckCircleIcon,
-      bgColor: 'bg-green-100',
-      textColor: 'text-green-800',
-      borderColor: 'border-green-200',
-      defaultLabel: 'Active',
-    },
-    inactive: {
-      icon: XCircleIcon,
-      bgColor: 'bg-gray-100',
-      textColor: 'text-gray-800',
-      borderColor: 'border-gray-200',
-      defaultLabel: 'Inactive',
-    },
-    pending: {
-      icon: ClockIcon,
-      bgColor: 'bg-yellow-100',
-      textColor: 'text-yellow-800',
-      borderColor: 'border-yellow-200',
-      defaultLabel: 'Pending',
-    },
-    approved: {
-      icon: CheckCircleIcon,
-      bgColor: 'bg-green-100',
-      textColor: 'text-green-800',
-      borderColor: 'border-green-200',
-      defaultLabel: 'Approved',
-    },
-    rejected: {
-      icon: XCircleIcon,
-      bgColor: 'bg-red-100',
-      textColor: 'text-red-800',
-      borderColor: 'border-red-200',
-      defaultLabel: 'Rejected',
-    },
-    warning: {
-      icon: ExclamationTriangleIcon,
-      bgColor: 'bg-yellow-100',
-      textColor: 'text-yellow-800',
-      borderColor: 'border-yellow-200',
-      defaultLabel: 'Warning',
-    },
-    error: {
-      icon: XCircleIcon,
-      bgColor: 'bg-red-100',
-      textColor: 'text-red-800',
-      borderColor: 'border-red-200',
-      defaultLabel: 'Error',
-    },
-    success: {
-      icon: CheckCircleIcon,
-      bgColor: 'bg-green-100',
-      textColor: 'text-green-800',
-      borderColor: 'border-green-200',
-      defaultLabel: 'Success',
-    },
-    paused: {
-      icon: PauseCircleIcon,
-      bgColor: 'bg-blue-100',
-      textColor: 'text-blue-800',
-      borderColor: 'border-blue-200',
-      defaultLabel: 'Paused',
-    },
-    unknown: {
-      icon: QuestionMarkCircleIcon,
-      bgColor: 'bg-gray-100',
-      textColor: 'text-gray-800',
-      borderColor: 'border-gray-200',
-      defaultLabel: 'Unknown',
-    },
-  }
-
-  return configs[status]
-}
-
-// Extract size configuration logic
-const getSizeClasses = (size: StatusSize) => {
-  const sizeClasses = {
-    small: {
-      text: 'text-xs',
-      padding: 'px-2 py-1',
-      icon: 'h-3 w-3',
-      dot: 'h-2 w-2',
-    },
-    medium: {
-      text: 'text-sm',
-      padding: 'px-2.5 py-1.5',
-      icon: 'h-4 w-4',
-      dot: 'h-3 w-3',
-    },
-    large: {
-      text: 'text-base',
-      padding: 'px-3 py-2',
-      icon: 'h-5 w-5',
-      dot: 'h-4 w-4',
-    },
-  }
-
-  return sizeClasses[size]
-}
-
-// Extract variant styling logic
-const getVariantClasses = (variant: StatusVariant) => {
-  const variantClasses = {
-    badge: 'inline-flex items-center rounded border font-medium',
-    pill: 'inline-flex items-center rounded-full border font-medium',
-    dot: 'inline-flex items-center font-medium',
-    full: 'flex items-center justify-center rounded border font-medium w-full',
-  }
-
-  return variantClasses[variant]
-}
-
-// Extract user status configuration logic
-const getUserStatusConfig = (status: AdminUserStatusProps['status']) => {
-  const configs = {
-    online: {
-      color: 'bg-green-400',
-      label: 'Online',
-    },
-    offline: {
-      color: 'bg-gray-400',
-      label: 'Offline',
-    },
-    away: {
-      color: 'bg-yellow-400',
-      label: 'Away',
-    },
-    busy: {
-      color: 'bg-red-400',
-      label: 'Busy',
-    },
-  }
-
-  return configs[status]
-}
-
-export function AdminStatusDisplay({
-  status,
-  label,
-  size = 'medium',
-  variant = 'badge',
-  showIcon = true,
-  className = '',
-  onClick,
-  tooltip,
-}: Readonly<AdminStatusDisplayProps>) {
-  const config = getStatusConfig(status)
-  const sizeClasses = getSizeClasses(size)
-  const variantClasses = getVariantClasses(variant)
-  const IconComponent = config.icon
-  
-  const displayLabel = label || config.defaultLabel
-  
-  const shouldShowDot = variant === 'dot'
-  const shouldShowIcon = showIcon && !shouldShowDot
-  const isClickable = !!onClick
-  
-  const baseClasses = `${variantClasses} ${sizeClasses.text} ${sizeClasses.padding} ${config.bgColor} ${config.textColor} ${config.borderColor}`
-  const interactiveClasses = isClickable ? 'cursor-pointer hover:opacity-80' : ''
-  const finalClasses = `${baseClasses} ${interactiveClasses} ${className}`.trim()
-
-  const renderDot = () => {
-    if (!shouldShowDot) return null
-    
-    return (
-      <span className={`inline-block rounded-full mr-2 ${config.bgColor.replace('bg-', 'bg-').replace('-100', '-400')} ${sizeClasses.dot}`} />
-    )
-  }
-
-  const renderIcon = () => {
-    if (!shouldShowIcon) return null
-    
-    return (
-      <IconComponent className={`${sizeClasses.icon} ${displayLabel ? 'mr-1.5' : ''}`} />
-    )
-  }
-
-  const content = (
-    <>
-      {renderDot()}
-      {renderIcon()}
-      {displayLabel}
-    </>
-  )
-
-  const handleClick = () => {
-    if (onClick) {
-      onClick()
-    }
-  }
-
-  if (isClickable) {
-    return (
-      <button
-        type="button"
-        onClick={handleClick}
-        className={finalClasses}
-        title={tooltip}
-      >
-        {content}
-      </button>
-    )
-  }
-
-  return (
-    <span className={finalClasses} title={tooltip}>
-      {content}
-    </span>
-  )
-}
-
-export function AdminUserStatus({
-  status,
-  showLabel = false,
-  size = 'medium',
-  className = '',
-}: Readonly<AdminUserStatusProps>) {
-  const config = getUserStatusConfig(status)
-  const sizeClasses = getSizeClasses(size)
-
-  const dotSizeClass = sizeClasses.dot
-  const textSizeClass = showLabel ? sizeClasses.text : ''
-  
-  return (
-    <div className={`inline-flex items-center ${className}`}>
-      <span 
-        className={`inline-block rounded-full ${config.color} ${dotSizeClass}`}
-        aria-label={config.label}
-      />
-      {showLabel && (
-        <span className={`ml-2 text-gray-700 ${textSizeClass}`}>
-          {config.label}
-        </span>
-      )}
-    </div>
-  )
-}

package/src/lib/components/shared/index.ts

@@ -1,3 +0,0 @@
-export * from './AdminBreadcrumbs'
-export * from './AdminErrorStates'
-export * from './AdminStatusDisplay'

package/src/lib/context/AdminDataContext.tsx

@@ -1,74 +0,0 @@
-import { createContext, useContext, type ReactNode } from 'react'
-
-export interface AdminDataContextValue {
-  /** The SDK namespace for dynamic GraphQL document lookups */
-  sdk: any
-  /** Array of database models from Prisma schema */
-  databaseModels: any[]
-  /** Base path for admin data routes (e.g., "/admin/data") */
-  basePath?: string
-  /** Form theme configuration for @nestledjs/forms */
-  formTheme: any
-}
-
-const AdminDataContext = createContext<AdminDataContextValue | null>(null)
-
-export interface AdminDataProviderProps {
-  children: ReactNode
-  /** The entire SDK namespace (e.g., import * as Sdk from '@your-project/shared/sdk') */
-  sdk: any
-  /** DATABASE_MODELS array from your SDK */
-  databaseModels: any[]
-  /** Optional base path for routes (defaults to "/admin/data") */
-  basePath?: string
-  /** Form theme configuration for @nestledjs/forms */
-  formTheme: any
-}
-
-/**
- * Provider component that supplies SDK and database models to admin data components
- *
- * @example
- * ```tsx
- * import * as Sdk from '@your-project/shared/sdk'
- * import { DATABASE_MODELS } from '@your-project/shared/sdk'
- * import { AdminDataProvider } from '@nestledjs/admin-data'
- *
- * <AdminDataProvider
- *   sdk={Sdk}
- *   databaseModels={DATABASE_MODELS}
- *   formTheme={formTheme}
- *   basePath="/admin/data"
- * >
- *   <AdminDataLayout />
- * </AdminDataProvider>
- * ```
- */
-export function AdminDataProvider({
-  children,
-  sdk,
-  databaseModels,
-  basePath = '/admin/data',
-  formTheme
-}: AdminDataProviderProps) {
-  return (
-    <AdminDataContext.Provider value={{ sdk, databaseModels, basePath, formTheme }}>
-      {children}
-    </AdminDataContext.Provider>
-  )
-}
-
-/**
- * Hook to access the admin data context
- * @throws Error if used outside of AdminDataProvider
- */
-export function useAdminDataContext() {
-  const context = useContext(AdminDataContext)
-  if (!context) {
-    throw new Error(
-      'useAdminDataContext must be used within AdminDataProvider. ' +
-      'Make sure to wrap your admin data routes with <AdminDataProvider>.'
-    )
-  }
-  return context
-}

package/src/lib/hooks/useAdminList.ts

@@ -1,42 +0,0 @@
-import { useReducer } from 'react'
-import { AdminListAction, AdminListState, initialState } from '../types'
-
-// State reducer for performance optimization
-function adminListReducer(state: AdminListState, action: AdminListAction): AdminListState {
-  switch (action.type) {
-    case 'SET_SEARCH':
-      return { ...state, search: action.payload }
-    case 'SET_DEBOUNCED_SEARCH':
-      return { ...state, debouncedSearch: action.payload }
-    case 'SET_SKIP':
-      return { ...state, skip: action.payload }
-    case 'SET_PAGE_SIZE':
-      return { ...state, pageSize: action.payload }
-    case 'SET_SORT':
-      return { ...state, sort: action.payload }
-    case 'SET_VISIBLE_COLUMNS':
-      return { ...state, visibleColumns: action.payload }
-    case 'TOGGLE_COLUMN_SELECTOR':
-      return { ...state, showColumnSelector: !state.showColumnSelector }
-    case 'SET_SEARCH_FIELDS':
-      return { ...state, searchFields: action.payload }
-    case 'TOGGLE_SEARCH_FIELD_SELECTOR':
-      return { ...state, showSearchFieldSelector: !state.showSearchFieldSelector }
-    case 'SET_FILTERS':
-      return { ...state, filters: action.payload }
-    case 'TOGGLE_FILTERS':
-      return { ...state, showFilters: !state.showFilters }
-    case 'RESET_PAGINATION':
-      return { ...state, skip: 0 }
-    case 'RESET_FILTERS':
-      return { ...state, filters: {} }
-    default:
-      return state
-  }
-}
-
-export function useAdminList() {
-  const [state, dispatch] = useReducer(adminListReducer, initialState)
-  
-  return { state, dispatch }
-}

package/src/lib/hooks/useClickOutside.ts

@@ -1,21 +0,0 @@
-import React, { useEffect } from 'react'
-
-// Custom hook for click outside detection
-export function useClickOutside(
-  ref: React.RefObject<HTMLDivElement | null>, 
-  handler: () => void, 
-  isActive = true
-) {
-  useEffect(() => {
-    if (!isActive) return
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        handler()
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [handler, isActive]) // Removed 'ref' from dependency array as refs are stable
-}

package/src/lib/hooks/useDebounce.ts

@@ -1,16 +0,0 @@
-import { useEffect, useState } from 'react'
-
-// Custom hook for debouncing values
-export function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value)
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedValue(value)
-    }, delay)
-
-    return () => clearTimeout(timer)
-  }, [value, delay])
-
-  return debouncedValue
-}