mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 13:44:54 +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>
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { Check } from '@phosphor-icons/react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface Step {
|
|
label: string
|
|
description?: string
|
|
}
|
|
|
|
interface StepperProps {
|
|
steps: Step[]
|
|
currentStep: number
|
|
className?: string
|
|
}
|
|
|
|
export function Stepper({ steps, currentStep, className }: StepperProps) {
|
|
return (
|
|
<div className={cn('w-full', className)}>
|
|
<div className="flex items-center justify-between">
|
|
{steps.map((step, index) => {
|
|
const isCompleted = index < currentStep
|
|
const isCurrent = index === currentStep
|
|
const isLast = index === steps.length - 1
|
|
|
|
return (
|
|
<div key={index} className="flex items-center flex-1">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<div
|
|
className={cn(
|
|
'w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-colors',
|
|
isCompleted && 'bg-primary text-primary-foreground',
|
|
isCurrent && 'bg-primary text-primary-foreground ring-4 ring-primary/20',
|
|
!isCompleted && !isCurrent && 'bg-muted text-muted-foreground'
|
|
)}
|
|
>
|
|
{isCompleted ? <Check weight="bold" /> : index + 1}
|
|
</div>
|
|
<div className="text-center">
|
|
<div
|
|
className={cn(
|
|
'text-sm font-medium',
|
|
(isCompleted || isCurrent) ? 'text-foreground' : 'text-muted-foreground'
|
|
)}
|
|
>
|
|
{step.label}
|
|
</div>
|
|
{step.description && (
|
|
<div className="text-xs text-muted-foreground mt-0.5">
|
|
{step.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{!isLast && (
|
|
<div
|
|
className={cn(
|
|
'flex-1 h-0.5 mx-4 transition-colors',
|
|
isCompleted ? 'bg-primary' : 'bg-muted'
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|