@nestledjs/data-browser 0.1.1 → 0.1.4

package/project.json

@@ -1,35 +0,0 @@
-{
-  "name": "admin-data",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/admin-data/src",
-  "projectType": "library",
-  "tags": ["publishable"],
-  "targets": {
-    "build": {
-      "executor": "nx:run-commands",
-      "outputs": ["{workspaceRoot}/dist/libs/admin-data"],
-      "options": {
-        "commands": [
-          "vite build",
-          "cp README.md ../../dist/libs/admin-data/",
-          "cp package.json ../../dist/libs/admin-data/"
-        ],
-        "cwd": "libs/admin-data",
-        "parallel": false
-      }
-    },
-    "publish": {
-      "executor": "nx:run-commands",
-      "dependsOn": ["build"],
-      "options": {
-        "command": "npm publish dist/libs/admin-data --access public"
-      }
-    },
-    "version": {
-      "executor": "@jscutlery/semver:version",
-      "options": {
-        "preset": "conventional"
-      }
-    }
-  }
-}

package/src/index.ts

@@ -1,28 +0,0 @@
-// Context
-export * from './lib/context/AdminDataContext'
-
-// Main components
-export * from './lib/pages/AdminDataCreatePage'
-export * from './lib/pages/AdminDataEditPage'
-export * from './lib/pages/AdminDataListPage'
-export * from './lib/pages/AdminDataIndexPage'
-
-// Layouts
-export * from './lib/layouts/AdminDataLayout'
-
-// Types
-export * from './lib/types'
-
-// Hooks
-export * from './lib/hooks/useAdminList'
-export * from './lib/hooks/useClickOutside'
-export * from './lib/hooks/useDebounce'
-export * from './lib/hooks/useRelationData'
-
-// Components
-export * from './lib/components'
-
-// Utilities
-export * from './lib/utils/graphql-utils'
-export * from './lib/utils/secure-storage'
-export * from './lib/utils/string-utils'

package/src/lib/admin-data.spec.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import AdminData from './admin-data'
-
-describe('AdminData', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<AdminData />)
-    expect(baseElement).toBeTruthy()
-  })
-})

package/src/lib/admin-data.tsx

@@ -1,9 +0,0 @@
-export function AdminData() {
-  return (
-    <div>
-      <h1>Welcome to AdminData!</h1>
-    </div>
-  )
-}
-
-export default AdminData

package/src/lib/components/filters/DateRangeFilter.tsx

@@ -1,88 +0,0 @@
-import { formatFieldName } from '../../utils/string-utils'
-
-interface DateRangeFilterProps {
-  fieldName: string
-  currentValue: any
-  onChange: (value: any) => void
-}
-
-// Component for date range filtering
-export function DateRangeFilter({ 
-  fieldName, 
-  currentValue, 
-  onChange 
-}: DateRangeFilterProps) {
-  // Parse current value if it's a range object
-  const fromDate = currentValue?.gte ? new Date(currentValue.gte).toISOString().split('T')[0] : ''
-  const toDate = currentValue?.lte ? new Date(currentValue.lte).toISOString().split('T')[0] : ''
-  
-  const handleFromChange = (date: string) => {
-    const newValue = { ...currentValue }
-    if (date) {
-      newValue.gte = new Date(date).toISOString()
-    } else {
-      delete newValue.gte
-    }
-    
-    // If no from or to date, clear the filter entirely
-    if (!newValue.gte && !newValue.lte) {
-      onChange(undefined)
-    } else {
-      onChange(newValue)
-    }
-  }
-  
-  const handleToChange = (date: string) => {
-    const newValue = { ...currentValue }
-    if (date) {
-      // Set to end of day for "to" date
-      const endOfDay = new Date(date)
-      endOfDay.setHours(23, 59, 59, 999)
-      newValue.lte = endOfDay.toISOString()
-    } else {
-      delete newValue.lte
-    }
-    
-    // If no from or to date, clear the filter entirely
-    if (!newValue.gte && !newValue.lte) {
-      onChange(undefined)
-    } else {
-      onChange(newValue)
-    }
-  }
-  
-  return (
-    <div className="space-y-1">
-      <label className="block text-sm font-medium text-gray-700">
-        {formatFieldName(fieldName)}
-      </label>
-      <div className="grid grid-cols-2 gap-2">
-        <div>
-          <label className="block text-xs text-gray-500 mb-1">From</label>
-          <input
-            type="date"
-            value={fromDate}
-            onChange={(e) => handleFromChange(e.target.value)}
-            className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web"
-          />
-        </div>
-        <div>
-          <label className="block text-xs text-gray-500 mb-1">To</label>
-          <input
-            type="date"
-            value={toDate}
-            onChange={(e) => handleToChange(e.target.value)}
-            className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web"
-          />
-        </div>
-      </div>
-      {(fromDate || toDate) && (
-        <div className="text-xs text-gray-500">
-          {fromDate && toDate && `${fromDate} to ${toDate}`}
-          {fromDate && !toDate && `From ${fromDate}`}
-          {!fromDate && toDate && `Until ${toDate}`}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/lib/components/filters/NumberRangeFilter.tsx

@@ -1,111 +0,0 @@
-import { formatFieldName } from '../../utils/string-utils'
-
-interface NumberRangeFilterProps {
-  fieldName: string
-  fieldType: string
-  currentValue: any
-  onChange: (value: any) => void
-}
-
-export function NumberRangeFilter({ 
-  fieldName, 
-  fieldType,
-  currentValue, 
-  onChange 
-}: Readonly<NumberRangeFilterProps>) {
-  // Parse current value if it's a range object
-  const minValue = currentValue?.gte !== undefined ? currentValue.gte.toString() : ''
-  const maxValue = currentValue?.lte !== undefined ? currentValue.lte.toString() : ''
-  
-  const parseNumber = (value: string) => {
-    if (!value) return undefined
-    
-    // Parse based on field type
-    if (fieldType === 'int' || fieldType === 'bigint') {
-      const parsed = parseInt(value, 10)
-      return isNaN(parsed) ? undefined : parsed
-    } else if (fieldType === 'float' || fieldType === 'decimal') {
-      const parsed = parseFloat(value)
-      return isNaN(parsed) ? undefined : parsed
-    }
-    return undefined
-  }
-  
-  const handleMinChange = (value: string) => {
-    const newValue = { ...currentValue }
-    const parsedValue = parseNumber(value)
-    
-    if (parsedValue !== undefined) {
-      newValue.gte = parsedValue
-    } else {
-      delete newValue.gte
-    }
-    
-    // If no min or max value, clear the filter entirely
-    if (newValue.gte === undefined && newValue.lte === undefined) {
-      onChange(undefined)
-    } else {
-      onChange(newValue)
-    }
-  }
-  
-  const handleMaxChange = (value: string) => {
-    const newValue = { ...currentValue }
-    const parsedValue = parseNumber(value)
-    
-    if (parsedValue !== undefined) {
-      newValue.lte = parsedValue
-    } else {
-      delete newValue.lte
-    }
-    
-    // If no min or max value, clear the filter entirely
-    if (newValue.gte === undefined && newValue.lte === undefined) {
-      onChange(undefined)
-    } else {
-      onChange(newValue)
-    }
-  }
-  
-  // Determine input step based on field type
-  const step = fieldType === 'int' || fieldType === 'bigint' ? '1' : 'any'
-  
-  return (
-    <div className="space-y-1">
-      <label className="block text-sm font-medium text-gray-700">
-        {formatFieldName(fieldName)}
-      </label>
-      <div className="grid grid-cols-2 gap-2">
-        <div>
-          <label className="block text-xs text-gray-500 mb-1">Min</label>
-          <input
-            type="number"
-            step={step}
-            value={minValue}
-            onChange={(e) => handleMinChange(e.target.value)}
-            placeholder="No minimum"
-            className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web"
-          />
-        </div>
-        <div>
-          <label className="block text-xs text-gray-500 mb-1">Max</label>
-          <input
-            type="number"
-            step={step}
-            value={maxValue}
-            onChange={(e) => handleMaxChange(e.target.value)}
-            placeholder="No maximum"
-            className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web"
-          />
-        </div>
-      </div>
-      {(minValue || maxValue) && (
-        <div className="text-xs text-gray-500">
-          {minValue && maxValue && `${minValue} to ${maxValue}`}
-          {minValue && !maxValue && `≥ ${minValue}`}
-          {!minValue && maxValue && `≤ ${maxValue}`}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/lib/components/filters/RelationComponents.tsx

@@ -1,176 +0,0 @@
-import { getItemDisplayName } from '../../utils/string-utils'
-
-// Dropdown button component
-export function RelationDropdownButton({ 
-  currentItem, 
-  relatedModelName, 
-  isOpen, 
-  onClick 
-}: Readonly<{
-  currentItem: any
-  relatedModelName: string
-  isOpen: boolean
-  onClick: () => void
-}>) {
-  return (
-        <button
-          type="button"
-      onClick={onClick}
-          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm text-left bg-white flex items-center justify-between"
-        >
-          <span className={currentItem ? 'text-gray-900' : 'text-gray-500'}>
-        {currentItem ? getItemDisplayName(currentItem) : `Select ${relatedModelName.toLowerCase()}...`}
-          </span>
-      <svg 
-        className={`w-4 h-4 text-gray-400 transition-transform ${isOpen ? 'rotate-180' : ''}`}
-        fill="none" 
-        stroke="currentColor" 
-        viewBox="0 0 24 24"
-      >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-  )
-}
-
-// Search input component
-export function RelationSearchInput({ 
-  searchTerm, 
-  onSearchChange, 
-  relatedModelName 
-}: Readonly<{
-  searchTerm: string
-  onSearchChange: (value: string) => void
-  relatedModelName: string
-}>) {
-  return (
-            <div className="p-2">
-              <input
-                type="text"
-                placeholder={`Search ${relatedModelName.toLowerCase()}...`}
-                value={searchTerm}
-        onChange={(e) => onSearchChange(e.target.value)}
-                className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-green-web"
-        autoFocus
-              />
-            </div>
-  )
-}
-
-// Individual item component
-export function RelationItem({ 
-  item, 
-  onSelect 
-}: {
-  item: any
-  onSelect: (item: any) => void
-}) {
-  return (
-    <button
-      type="button"
-      onClick={() => onSelect(item)}
-      className="w-full px-3 py-2 text-left text-sm hover:bg-gray-100 focus:bg-gray-100 transition-colors"
-    >
-      {getItemDisplayName(item)}
-    </button>
-  )
-}
-
-// Item list component with error handling
-export function RelationItemList({ 
-  items, 
-  loading, 
-  error,
-  onSelect, 
-  onClear 
-}: Readonly<{
-  items: any[]
-  loading: boolean
-  error?: any
-  onSelect: (item: any) => void
-  onClear: () => void
-}>) {
-  return (
-            <div className="max-h-48 overflow-y-auto">
-              <button
-                type="button"
-        onClick={onClear}
-        className="w-full px-3 py-2 text-left text-sm hover:bg-gray-100 text-gray-500 border-b border-gray-200"
-              >
-                Clear selection
-              </button>
-      
-      {error ? (
-        <div className="px-3 py-2 text-sm text-red-600">
-          <div className="flex items-center">
-            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-            Failed to load options
-          </div>
-          <div className="text-xs text-gray-500 mt-1">
-            {error.networkError ? 'Network error' : 'Please try again'}
-          </div>
-        </div>
-      ) : loading ? (
-        <div className="px-3 py-2 text-sm text-gray-500">
-          <div className="flex items-center">
-            <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            Loading...
-          </div>
-        </div>
-      ) : items.length === 0 ? (
-                <div className="px-3 py-2 text-sm text-gray-500">No items found</div>
-              ) : (
-        items.map((item: any) => (
-          <RelationItem
-                    key={item.id}
-            item={item}
-            onSelect={onSelect}
-          />
-                ))
-              )}
-            </div>
-  )
-}
-
-// Dropdown content container with error handling
-export function RelationDropdownContent({ 
-  searchTerm, 
-  onSearchChange, 
-  relatedModelName, 
-  items, 
-  loading, 
-  error,
-  onSelect, 
-  onClear 
-}: {
-  searchTerm: string
-  onSearchChange: (value: string) => void
-  relatedModelName: string
-  items: any[]
-  loading: boolean
-  error?: any
-  onSelect: (item: any) => void
-  onClear: () => void
-}) {
-  return (
-    <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg">
-      <RelationSearchInput
-        searchTerm={searchTerm}
-        onSearchChange={onSearchChange}
-        relatedModelName={relatedModelName}
-      />
-      <RelationItemList
-        items={items}
-        loading={loading}
-        error={error}
-        onSelect={onSelect}
-        onClear={onClear}
-      />
-          </div>
-  )
-}

package/src/lib/components/filters/RelationFilterField.tsx

@@ -1,106 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from 'react'
-import { useClickOutside } from '../../hooks/useClickOutside'
-import { useRelationData } from '../../hooks/useRelationData'
-import { formatFieldName } from '../../utils/string-utils'
-import { RelationDropdownButton, RelationDropdownContent } from './RelationComponents'
-
-interface RelationFilterFieldProps {
-  fieldName: string
-  relatedModelName: string
-  currentValue: any
-  onChange: (value: any) => void
-}
-
-// Refactored relation field filtering component
-export function RelationFilterField({ 
-  fieldName, 
-  relatedModelName, 
-  currentValue, 
-  onChange 
-}: Readonly<RelationFilterFieldProps>) {
-  const [searchTerm, setSearchTerm] = useState('')
-  const [isOpen, setIsOpen] = useState(false)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-  
-  // Memoize the close handler to prevent memory leaks
-  const handleCloseDropdown = useCallback(() => {
-    setIsOpen(false)
-  }, [])
-  
-  // Custom hooks for behavior
-  useClickOutside(dropdownRef, handleCloseDropdown, isOpen)
-  const { relatedItems, loading, error: relationError, hasDocument } = useRelationData(relatedModelName, searchTerm, isOpen)
-  
-  // Find current item to display
-  const currentItem = useMemo(() => 
-    currentValue?.id ? relatedItems.find((item: any) => item.id === currentValue.id) : null,
-    [currentValue?.id, relatedItems]
-  )
-  
-  // Event handlers
-  const handleSelect = useCallback((item: any) => {
-    onChange({ id: item.id })
-    setIsOpen(false)
-    setSearchTerm('') // Reset search when item selected
-  }, [onChange])
-  
-  const handleClear = useCallback(() => {
-    onChange(undefined)
-    setIsOpen(false)
-    setSearchTerm('')
-  }, [onChange])
-  
-  const handleToggleOpen = useCallback(() => {
-    setIsOpen(!isOpen)
-    if (!isOpen) {
-      setSearchTerm('') // Reset search when opening
-    }
-  }, [isOpen])
-  
-  // If no document available, fall back to text input
-  if (!hasDocument) {
-    return (
-      <div className="space-y-1">
-        <label className="block text-sm font-medium text-gray-700">
-          {formatFieldName(fieldName)} ID
-        </label>
-        <input
-          type="text"
-          value={currentValue?.id || ''}
-          onChange={(e) => onChange(e.target.value ? { id: e.target.value } : undefined)}
-          placeholder="Enter ID..."
-          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm"
-        />
-      </div>
-    )
-  }
-  
-  return (
-    <div className="space-y-1" ref={dropdownRef}>
-      <label className="block text-sm font-medium text-gray-700">
-        {formatFieldName(fieldName)}
-      </label>
-      <div className="relative">
-        <RelationDropdownButton
-          currentItem={currentItem}
-          relatedModelName={relatedModelName}
-          isOpen={isOpen}
-          onClick={handleToggleOpen}
-        />
-        
-        {isOpen && (
-          <RelationDropdownContent
-            searchTerm={searchTerm}
-            onSearchChange={setSearchTerm}
-            relatedModelName={relatedModelName}
-            items={relatedItems}
-            loading={loading}
-            error={relationError}
-            onSelect={handleSelect}
-            onClear={handleClear}
-          />
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,5 +0,0 @@
-export { DateRangeFilter } from './DateRangeFilter'
-export { NumberRangeFilter } from './NumberRangeFilter'
-export * from './RelationComponents'
-export { RelationFilterField } from './RelationFilterField'
-

package/src/lib/components/index.ts

@@ -1,2 +0,0 @@
-export * from './filters'
-export * from './shared'

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

@@ -1,88 +0,0 @@
-import React from 'react'
-import { Link } from 'react-router'
-import { ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline'
-
-export interface BreadcrumbItem {
-  id: string
-  label: string
-  href?: string
-  isActive?: boolean
-}
-
-export interface AdminBreadcrumbsProps {
-  readonly items: readonly BreadcrumbItem[]
-  readonly showHome?: boolean
-  readonly homeHref?: string
-  readonly className?: string
-}
-
-export function AdminBreadcrumbs({
-  items,
-  showHome = true,
-  homeHref = '/admin',
-  className = '',
-}: Readonly<AdminBreadcrumbsProps>) {
-  // Extract nested ternary logic into clear helper functions
-  const renderHomeLink = () => {
-    if (!showHome) return null
-    
-    return (
-      <li key="home" className="flex items-center">
-        <Link 
-          to={homeHref} 
-          className="text-gray-400 hover:text-gray-500"
-          aria-label="Home"
-        >
-          <HomeIcon className="h-5 w-5 flex-shrink-0" />
-        </Link>
-      </li>
-    )
-  }
-
-  const renderBreadcrumbItem = (item: BreadcrumbItem, index: number, isLast: boolean) => {
-    const content = item.href && !item.isActive ? (
-      <Link
-        to={item.href}
-        className="text-sm font-medium text-gray-500 hover:text-gray-700"
-      >
-        {item.label}
-      </Link>
-    ) : (
-      <span 
-        className={`text-sm font-medium ${
-          item.isActive ? 'text-gray-900' : 'text-gray-500'
-        }`}
-      >
-        {item.label}
-      </span>
-    )
-
-    return (
-      <li key={item.id} className="flex items-center">
-        {(showHome || index > 0) && (
-          <ChevronRightIcon 
-            className="h-5 w-5 flex-shrink-0 text-gray-400 mr-4" 
-            aria-hidden="true" 
-          />
-        )}
-        {content}
-      </li>
-    )
-  }
-
-  const shouldShowSeparator = (index: number) => {
-    return showHome || index > 0
-  }
-
-  return (
-    <nav className={`flex ${className}`} aria-label="Breadcrumb">
-      <ol className="flex items-center space-x-4">
-        {renderHomeLink()}
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1
-          return renderBreadcrumbItem(item, index, isLast)
-        })}
-      </ol>
-    </nav>
-  )
-}