mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-05-01 00:54:55 +00:00
johndoe6345789
f05f896a67
Migration complete for: - 5 atoms: Accordion, CopyButton, FileUpload, FilterInput, Image, Input, PasswordInput, Popover (8 total) - 1 molecule: BindingEditor Changes: - Deleted 9 legacy TSX files that have complete JSON equivalents - Exported BindingEditor from json-components.ts with useBindingEditor hook - Registered useBindingEditor in hooks-registry.ts - Updated all imports across codebase to use JSON-based components - Fixed build errors: schema-loader dynamic import, DataSourceGroupSection - Cleaned up component index exports Build status: ✅ PASSING - 0 TypeScript errors - All 9,408 modules transformed successfully - No blocking build warnings Next steps: - 3 organisms still need conversion: DataSourceManager, NavigationMenu, TreeListPanel - 120+ additional components have TSX versions (need individual migration) - 22 JSON components now available for use throughout the app Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { Check, Minus } from '@phosphor-icons/react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface CheckboxProps {
|
|
checked: boolean
|
|
onChange: (checked: boolean) => void
|
|
label?: string
|
|
indeterminate?: boolean
|
|
disabled?: boolean
|
|
size?: 'sm' | 'md' | 'lg'
|
|
className?: string
|
|
}
|
|
|
|
export function Checkbox({
|
|
checked,
|
|
onChange,
|
|
label,
|
|
indeterminate = false,
|
|
disabled = false,
|
|
size = 'md',
|
|
className
|
|
}: CheckboxProps) {
|
|
const sizeStyles = {
|
|
sm: 'w-4 h-4',
|
|
md: 'w-5 h-5',
|
|
lg: 'w-6 h-6',
|
|
}
|
|
|
|
const iconSize = {
|
|
sm: 12,
|
|
md: 16,
|
|
lg: 20,
|
|
}
|
|
|
|
return (
|
|
<label className={cn('flex items-center gap-2 cursor-pointer', disabled && 'opacity-50 cursor-not-allowed', className)}>
|
|
<button
|
|
type="button"
|
|
role="checkbox"
|
|
aria-checked={indeterminate ? 'mixed' : checked}
|
|
disabled={disabled}
|
|
onClick={() => !disabled && onChange(!checked)}
|
|
className={cn(
|
|
'flex items-center justify-center rounded border-2 transition-colors',
|
|
sizeStyles[size],
|
|
checked || indeterminate
|
|
? 'bg-primary border-primary text-primary-foreground'
|
|
: 'bg-background border-input hover:border-ring'
|
|
)}
|
|
>
|
|
{indeterminate ? (
|
|
<Minus size={iconSize[size]} weight="bold" />
|
|
) : checked ? (
|
|
<Check size={iconSize[size]} weight="bold" />
|
|
) : null}
|
|
</button>
|
|
{label && <span className="text-sm font-medium select-none">{label}</span>}
|
|
</label>
|
|
)
|
|
}
|