mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 13:44:54 +00:00
feat: migrate ErrorPanel to JSON
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"timestamp": "2026-01-21T05:06:37.965Z",
|
||||
"timestamp": "2026-01-21T05:07:04.048Z",
|
||||
"issues": [],
|
||||
"stats": {
|
||||
"totalJsonFiles": 337,
|
||||
|
||||
@@ -1565,20 +1565,21 @@
|
||||
},
|
||||
{
|
||||
"type": "ErrorPanel",
|
||||
"name": "ErrorPanel",
|
||||
"name": "Error Panel",
|
||||
"category": "layout",
|
||||
"canHaveChildren": true,
|
||||
"description": "Layout container component",
|
||||
"status": "supported",
|
||||
"source": "custom",
|
||||
"jsonCompatible": false,
|
||||
"jsonCompatible": true,
|
||||
"metadata": {
|
||||
"conversionDate": "2026-01-18",
|
||||
"autoGenerated": true
|
||||
"conversionDate": "2026-01-21",
|
||||
"phase": "Batch C migration",
|
||||
"autoGenerated": false
|
||||
},
|
||||
"load": {
|
||||
"path": "@/components/ErrorPanel",
|
||||
"export": "ErrorPanel"
|
||||
"path": "@/lib/json-ui/json-components",
|
||||
"export": "ErrorPanelMain"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import errorPanelCopy from '@/data/error-panel.json'
|
||||
import { ProjectFile } from '@/types/project'
|
||||
import { ErrorPanelHeader } from '@/components/error-panel/ErrorPanelHeader'
|
||||
import { ErrorPanelEmptyState } from '@/components/error-panel/ErrorPanelEmptyState'
|
||||
import { ErrorPanelFileList } from '@/components/error-panel/ErrorPanelFileList'
|
||||
import { useErrorPanelState } from '@/components/error-panel/useErrorPanelState'
|
||||
|
||||
interface ErrorPanelProps {
|
||||
files: ProjectFile[]
|
||||
onFileChange: (fileId: string, content: string) => void
|
||||
onFileSelect: (fileId: string) => void
|
||||
}
|
||||
|
||||
export function ErrorPanel({ files, onFileChange, onFileSelect }: ErrorPanelProps) {
|
||||
const {
|
||||
errors,
|
||||
errorsByFile,
|
||||
errorCount,
|
||||
warningCount,
|
||||
isScanning,
|
||||
isRepairing,
|
||||
scanForErrors,
|
||||
repairAllErrors,
|
||||
repairFileWithContext,
|
||||
repairSingleError,
|
||||
} = useErrorPanelState({ files, onFileChange })
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-background">
|
||||
<ErrorPanelHeader
|
||||
title={errorPanelCopy.header.title}
|
||||
scanLabel={errorPanelCopy.header.scan}
|
||||
scanningLabel={errorPanelCopy.header.scanning}
|
||||
repairAllLabel={errorPanelCopy.header.repairAll}
|
||||
repairingLabel={errorPanelCopy.header.repairing}
|
||||
errorCount={errorCount}
|
||||
warningCount={warningCount}
|
||||
errorLabel={errorPanelCopy.counts.errorSingular}
|
||||
errorsLabel={errorPanelCopy.counts.errorPlural}
|
||||
warningLabel={errorPanelCopy.counts.warningSingular}
|
||||
warningsLabel={errorPanelCopy.counts.warningPlural}
|
||||
isScanning={isScanning}
|
||||
isRepairing={isRepairing}
|
||||
onScan={scanForErrors}
|
||||
onRepairAll={repairAllErrors}
|
||||
/>
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-6">
|
||||
{errors.length === 0 && (
|
||||
<ErrorPanelEmptyState
|
||||
isScanning={isScanning}
|
||||
noIssuesTitle={errorPanelCopy.emptyStates.noIssuesTitle}
|
||||
noIssuesDescription={errorPanelCopy.emptyStates.noIssuesDescription}
|
||||
scanningTitle={errorPanelCopy.emptyStates.scanningTitle}
|
||||
scanningDescription={errorPanelCopy.emptyStates.scanningDescription}
|
||||
/>
|
||||
)}
|
||||
|
||||
{errors.length > 0 && (
|
||||
<ErrorPanelFileList
|
||||
files={files}
|
||||
errorsByFile={errorsByFile}
|
||||
issueLabel={errorPanelCopy.counts.issueSingular}
|
||||
issuesLabel={errorPanelCopy.counts.issuePlural}
|
||||
openLabel={errorPanelCopy.actions.open}
|
||||
repairLabel={errorPanelCopy.actions.repair}
|
||||
lineLabel={errorPanelCopy.labels.line}
|
||||
fixedLabel={errorPanelCopy.actions.fixed}
|
||||
showCodeLabel={errorPanelCopy.actions.showCode}
|
||||
hideCodeLabel={errorPanelCopy.actions.hideCode}
|
||||
isRepairing={isRepairing}
|
||||
onFileSelect={onFileSelect}
|
||||
onRepairFile={repairFileWithContext}
|
||||
onRepairError={repairSingleError}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import { CheckCircle, Lightning } from '@phosphor-icons/react'
|
||||
import { EmptyState } from '@/components/atoms'
|
||||
|
||||
interface ErrorPanelEmptyStateProps {
|
||||
isScanning: boolean
|
||||
noIssuesTitle: string
|
||||
noIssuesDescription: string
|
||||
scanningTitle: string
|
||||
scanningDescription: string
|
||||
}
|
||||
|
||||
export function ErrorPanelEmptyState({
|
||||
isScanning,
|
||||
noIssuesTitle,
|
||||
noIssuesDescription,
|
||||
scanningTitle,
|
||||
scanningDescription,
|
||||
}: ErrorPanelEmptyStateProps) {
|
||||
if (isScanning) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={<Lightning size={48} weight="duotone" className="text-accent animate-pulse" />}
|
||||
title={scanningTitle}
|
||||
description={scanningDescription}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<EmptyState
|
||||
icon={<CheckCircle size={48} weight="duotone" className="text-green-500" />}
|
||||
title={noIssuesTitle}
|
||||
description={noIssuesDescription}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { CheckCircle, Info, Warning, Wrench, X } from '@phosphor-icons/react'
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
||||
import { ActionButton, Badge, Code, Flex, Text } from '@/components/atoms'
|
||||
import { CodeError } from '@/types/errors'
|
||||
|
||||
interface ErrorPanelErrorItemProps {
|
||||
error: CodeError
|
||||
isRepairing: boolean
|
||||
lineLabel: string
|
||||
fixedLabel: string
|
||||
showCodeLabel: string
|
||||
hideCodeLabel: string
|
||||
onRepair: (error: CodeError) => void
|
||||
}
|
||||
|
||||
const getSeverityIcon = (severity: string) => {
|
||||
switch (severity) {
|
||||
case 'error':
|
||||
return <X size={16} weight="bold" className="text-destructive" />
|
||||
case 'warning':
|
||||
return <Warning size={16} weight="bold" className="text-yellow-500" />
|
||||
case 'info':
|
||||
return <Info size={16} weight="bold" className="text-blue-500" />
|
||||
default:
|
||||
return <Info size={16} />
|
||||
}
|
||||
}
|
||||
|
||||
const getSeverityColor = (severity: string) => {
|
||||
switch (severity) {
|
||||
case 'error':
|
||||
return 'destructive'
|
||||
case 'warning':
|
||||
return 'secondary'
|
||||
case 'info':
|
||||
return 'outline'
|
||||
default:
|
||||
return 'outline'
|
||||
}
|
||||
}
|
||||
|
||||
export function ErrorPanelErrorItem({
|
||||
error,
|
||||
isRepairing,
|
||||
lineLabel,
|
||||
fixedLabel,
|
||||
showCodeLabel,
|
||||
hideCodeLabel,
|
||||
onRepair,
|
||||
}: ErrorPanelErrorItemProps) {
|
||||
const [isExpanded, setIsExpanded] = useState(false)
|
||||
|
||||
return (
|
||||
<Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
|
||||
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-muted/50 transition-colors">
|
||||
<div className="mt-0.5">{getSeverityIcon(error.severity)}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<Flex align="center" gap="sm" className="mb-1">
|
||||
<Badge variant={getSeverityColor(error.severity) as any} size="sm">
|
||||
{error.type}
|
||||
</Badge>
|
||||
{error.line && (
|
||||
<Text variant="caption">
|
||||
{lineLabel} {error.line}
|
||||
</Text>
|
||||
)}
|
||||
{error.isFixed && (
|
||||
<Badge variant="outline" size="sm" className="text-green-500 border-green-500">
|
||||
<CheckCircle size={12} className="mr-1" />
|
||||
{fixedLabel}
|
||||
</Badge>
|
||||
)}
|
||||
</Flex>
|
||||
<Text variant="body" className="mb-2">
|
||||
{error.message}
|
||||
</Text>
|
||||
{error.code && (
|
||||
<CollapsibleTrigger asChild>
|
||||
<button className="text-xs text-accent hover:text-accent/80 underline">
|
||||
{isExpanded ? hideCodeLabel : showCodeLabel}
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
)}
|
||||
</div>
|
||||
<ActionButton
|
||||
icon={<Wrench size={14} />}
|
||||
label=""
|
||||
onClick={() => onRepair(error)}
|
||||
disabled={isRepairing || error.isFixed}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
{error.code && (
|
||||
<CollapsibleContent>
|
||||
<div className="ml-8 mt-2 p-3 bg-muted rounded">
|
||||
<Code className="text-xs">{error.code}</Code>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
)}
|
||||
</Collapsible>
|
||||
)
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
import { ArrowRight, FileCode, Wrench } from '@phosphor-icons/react'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { ActionButton, Badge, Flex, Text } from '@/components/atoms'
|
||||
import { CodeError } from '@/types/errors'
|
||||
import { ProjectFile } from '@/types/project'
|
||||
import { ErrorPanelErrorItem } from './ErrorPanelErrorItem'
|
||||
|
||||
interface ErrorPanelFileCardProps {
|
||||
file: ProjectFile
|
||||
errors: CodeError[]
|
||||
issueLabel: string
|
||||
issuesLabel: string
|
||||
openLabel: string
|
||||
repairLabel: string
|
||||
lineLabel: string
|
||||
fixedLabel: string
|
||||
showCodeLabel: string
|
||||
hideCodeLabel: string
|
||||
isRepairing: boolean
|
||||
onFileSelect: (fileId: string) => void
|
||||
onRepairFile: (fileId: string) => void
|
||||
onRepairError: (error: CodeError) => void
|
||||
}
|
||||
|
||||
export function ErrorPanelFileCard({
|
||||
file,
|
||||
errors,
|
||||
issueLabel,
|
||||
issuesLabel,
|
||||
openLabel,
|
||||
repairLabel,
|
||||
lineLabel,
|
||||
fixedLabel,
|
||||
showCodeLabel,
|
||||
hideCodeLabel,
|
||||
isRepairing,
|
||||
onFileSelect,
|
||||
onRepairFile,
|
||||
onRepairError,
|
||||
}: ErrorPanelFileCardProps) {
|
||||
return (
|
||||
<Card className="overflow-hidden">
|
||||
<div className="bg-muted px-4 py-3">
|
||||
<Flex align="center" justify="between">
|
||||
<Flex align="center" gap="sm">
|
||||
<FileCode size={18} weight="duotone" />
|
||||
<Text className="font-medium">{file.name}</Text>
|
||||
<Badge variant="outline" size="sm">
|
||||
{errors.length} {errors.length === 1 ? issueLabel : issuesLabel}
|
||||
</Badge>
|
||||
</Flex>
|
||||
<Flex gap="sm">
|
||||
<ActionButton
|
||||
icon={<ArrowRight size={14} />}
|
||||
label={openLabel}
|
||||
onClick={() => onFileSelect(file.id)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
/>
|
||||
<ActionButton
|
||||
icon={<Wrench size={14} />}
|
||||
label={repairLabel}
|
||||
onClick={() => onRepairFile(file.id)}
|
||||
disabled={isRepairing}
|
||||
variant="default"
|
||||
size="sm"
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-2">
|
||||
{errors.map((error) => (
|
||||
<ErrorPanelErrorItem
|
||||
key={error.id}
|
||||
error={error}
|
||||
isRepairing={isRepairing}
|
||||
lineLabel={lineLabel}
|
||||
fixedLabel={fixedLabel}
|
||||
showCodeLabel={showCodeLabel}
|
||||
hideCodeLabel={hideCodeLabel}
|
||||
onRepair={onRepairError}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import { Stack } from '@/components/atoms'
|
||||
import { CodeError } from '@/types/errors'
|
||||
import { ProjectFile } from '@/types/project'
|
||||
import { ErrorPanelFileCard } from './ErrorPanelFileCard'
|
||||
|
||||
interface ErrorPanelFileListProps {
|
||||
files: ProjectFile[]
|
||||
errorsByFile: Record<string, CodeError[]>
|
||||
issueLabel: string
|
||||
issuesLabel: string
|
||||
openLabel: string
|
||||
repairLabel: string
|
||||
lineLabel: string
|
||||
fixedLabel: string
|
||||
showCodeLabel: string
|
||||
hideCodeLabel: string
|
||||
isRepairing: boolean
|
||||
onFileSelect: (fileId: string) => void
|
||||
onRepairFile: (fileId: string) => void
|
||||
onRepairError: (error: CodeError) => void
|
||||
}
|
||||
|
||||
export function ErrorPanelFileList({
|
||||
files,
|
||||
errorsByFile,
|
||||
issueLabel,
|
||||
issuesLabel,
|
||||
openLabel,
|
||||
repairLabel,
|
||||
lineLabel,
|
||||
fixedLabel,
|
||||
showCodeLabel,
|
||||
hideCodeLabel,
|
||||
isRepairing,
|
||||
onFileSelect,
|
||||
onRepairFile,
|
||||
onRepairError,
|
||||
}: ErrorPanelFileListProps) {
|
||||
return (
|
||||
<Stack direction="vertical" spacing="md">
|
||||
{Object.entries(errorsByFile).map(([fileId, fileErrors]) => {
|
||||
const file = files.find((entry) => entry.id === fileId)
|
||||
if (!file) return null
|
||||
|
||||
return (
|
||||
<ErrorPanelFileCard
|
||||
key={fileId}
|
||||
file={file}
|
||||
errors={fileErrors}
|
||||
issueLabel={issueLabel}
|
||||
issuesLabel={issuesLabel}
|
||||
openLabel={openLabel}
|
||||
repairLabel={repairLabel}
|
||||
lineLabel={lineLabel}
|
||||
fixedLabel={fixedLabel}
|
||||
showCodeLabel={showCodeLabel}
|
||||
hideCodeLabel={hideCodeLabel}
|
||||
isRepairing={isRepairing}
|
||||
onFileSelect={onFileSelect}
|
||||
onRepairFile={onRepairFile}
|
||||
onRepairError={onRepairError}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
import { Lightning, Wrench } from '@phosphor-icons/react'
|
||||
import { Badge, ActionButton, Flex, Heading, IconText } from '@/components/atoms'
|
||||
|
||||
interface ErrorPanelHeaderProps {
|
||||
title: string
|
||||
scanLabel: string
|
||||
scanningLabel: string
|
||||
repairAllLabel: string
|
||||
repairingLabel: string
|
||||
errorCount: number
|
||||
warningCount: number
|
||||
errorLabel: string
|
||||
errorsLabel: string
|
||||
warningLabel: string
|
||||
warningsLabel: string
|
||||
isScanning: boolean
|
||||
isRepairing: boolean
|
||||
onScan: () => void
|
||||
onRepairAll: () => void
|
||||
}
|
||||
|
||||
export function ErrorPanelHeader({
|
||||
title,
|
||||
scanLabel,
|
||||
scanningLabel,
|
||||
repairAllLabel,
|
||||
repairingLabel,
|
||||
errorCount,
|
||||
warningCount,
|
||||
errorLabel,
|
||||
errorsLabel,
|
||||
warningLabel,
|
||||
warningsLabel,
|
||||
isScanning,
|
||||
isRepairing,
|
||||
onScan,
|
||||
onRepairAll,
|
||||
}: ErrorPanelHeaderProps) {
|
||||
return (
|
||||
<div className="border-b border-border bg-card px-6 py-4">
|
||||
<Flex align="center" justify="between">
|
||||
<Flex align="center" gap="md">
|
||||
<IconText icon={<Wrench size={20} weight="duotone" className="text-accent" />}>
|
||||
<Heading level={3}>{title}</Heading>
|
||||
</IconText>
|
||||
{(errorCount > 0 || warningCount > 0) && (
|
||||
<Flex gap="sm">
|
||||
{errorCount > 0 && (
|
||||
<Badge variant="destructive">
|
||||
{errorCount} {errorCount === 1 ? errorLabel : errorsLabel}
|
||||
</Badge>
|
||||
)}
|
||||
{warningCount > 0 && (
|
||||
<Badge variant="secondary">
|
||||
{warningCount} {warningCount === 1 ? warningLabel : warningsLabel}
|
||||
</Badge>
|
||||
)}
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
<Flex gap="sm">
|
||||
<ActionButton
|
||||
icon={<Lightning size={16} />}
|
||||
label={isScanning ? scanningLabel : scanLabel}
|
||||
onClick={onScan}
|
||||
disabled={isScanning || isRepairing}
|
||||
variant="outline"
|
||||
/>
|
||||
<ActionButton
|
||||
icon={<Wrench size={16} />}
|
||||
label={isRepairing ? repairingLabel : repairAllLabel}
|
||||
onClick={onRepairAll}
|
||||
disabled={errorCount + warningCount === 0 || isRepairing || isScanning}
|
||||
variant="default"
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,142 +0,0 @@
|
||||
import type { Dispatch, SetStateAction } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { CodeError } from '@/types/errors'
|
||||
import { ProjectFile } from '@/types/project'
|
||||
import { ErrorRepairService } from '@/lib/error-repair-service'
|
||||
import errorPanelCopy from '@/data/error-panel.json'
|
||||
|
||||
const formatWithCount = (template: string, count: number) =>
|
||||
template
|
||||
.replace('{count}', String(count))
|
||||
.replace('{plural}', count === 1 ? '' : 's')
|
||||
|
||||
const formatWithValue = (template: string, token: string, value: string) =>
|
||||
template.replace(token, value)
|
||||
|
||||
interface RepairHandlersParams {
|
||||
files: ProjectFile[]
|
||||
errors: CodeError[]
|
||||
onFileChange: (fileId: string, content: string) => void
|
||||
scanForErrors: () => Promise<void>
|
||||
setErrors: Dispatch<SetStateAction<CodeError[]>>
|
||||
setIsRepairing: Dispatch<SetStateAction<boolean>>
|
||||
}
|
||||
|
||||
export function createRepairHandlers({
|
||||
files,
|
||||
errors,
|
||||
onFileChange,
|
||||
scanForErrors,
|
||||
setErrors,
|
||||
setIsRepairing,
|
||||
}: RepairHandlersParams) {
|
||||
const repairSingleError = async (error: CodeError) => {
|
||||
const file = files.find((entry) => entry.id === error.fileId)
|
||||
if (!file) return
|
||||
|
||||
setIsRepairing(true)
|
||||
try {
|
||||
const result = await ErrorRepairService.repairCode(file, [error])
|
||||
|
||||
if (result.success && result.fixedCode) {
|
||||
onFileChange(file.id, result.fixedCode)
|
||||
|
||||
setErrors((prev) =>
|
||||
prev.map((entry) =>
|
||||
entry.id === error.id
|
||||
? { ...entry, isFixed: true, fixedCode: result.fixedCode }
|
||||
: entry
|
||||
)
|
||||
)
|
||||
|
||||
toast.success(
|
||||
formatWithValue(errorPanelCopy.toast.fixedSingle, '{message}', error.message),
|
||||
{
|
||||
description: result.explanation,
|
||||
}
|
||||
)
|
||||
|
||||
await scanForErrors()
|
||||
} else {
|
||||
toast.error(errorPanelCopy.toast.repairErrorFailed)
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(errorPanelCopy.toast.repairFailed)
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsRepairing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const repairAllErrors = async () => {
|
||||
setIsRepairing(true)
|
||||
try {
|
||||
const results = await ErrorRepairService.repairMultipleFiles(files, errors)
|
||||
|
||||
let fixedCount = 0
|
||||
results.forEach((result, fileId) => {
|
||||
if (result.success && result.fixedCode) {
|
||||
onFileChange(fileId, result.fixedCode)
|
||||
fixedCount++
|
||||
}
|
||||
})
|
||||
|
||||
if (fixedCount > 0) {
|
||||
toast.success(formatWithCount(errorPanelCopy.toast.repairedFiles, fixedCount))
|
||||
await scanForErrors()
|
||||
} else {
|
||||
toast.error(errorPanelCopy.toast.noFilesRepaired)
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(errorPanelCopy.toast.batchRepairFailed)
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsRepairing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const repairFileWithContext = async (fileId: string) => {
|
||||
const file = files.find((entry) => entry.id === fileId)
|
||||
if (!file) return
|
||||
|
||||
const fileErrors = errors.filter((entry) => entry.fileId === fileId)
|
||||
if (fileErrors.length === 0) return
|
||||
|
||||
setIsRepairing(true)
|
||||
try {
|
||||
const relatedFiles = files.filter((entry) => entry.id !== fileId).slice(0, 3)
|
||||
|
||||
const result = await ErrorRepairService.repairWithContext(
|
||||
file,
|
||||
fileErrors,
|
||||
relatedFiles
|
||||
)
|
||||
|
||||
if (result.success && result.fixedCode) {
|
||||
onFileChange(file.id, result.fixedCode)
|
||||
|
||||
toast.success(
|
||||
formatWithValue(errorPanelCopy.toast.repairedFile, '{fileName}', file.name),
|
||||
{
|
||||
description: result.explanation,
|
||||
}
|
||||
)
|
||||
|
||||
await scanForErrors()
|
||||
} else {
|
||||
toast.error(errorPanelCopy.toast.repairFileFailed)
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(errorPanelCopy.toast.contextRepairFailed)
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsRepairing(false)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
repairSingleError,
|
||||
repairAllErrors,
|
||||
repairFileWithContext,
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import type { Dispatch, SetStateAction } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { CodeError } from '@/types/errors'
|
||||
import { ProjectFile } from '@/types/project'
|
||||
import { ErrorRepairService } from '@/lib/error-repair-service'
|
||||
import errorPanelCopy from '@/data/error-panel.json'
|
||||
|
||||
const formatWithCount = (template: string, count: number) =>
|
||||
template
|
||||
.replace('{count}', String(count))
|
||||
.replace('{plural}', count === 1 ? '' : 's')
|
||||
|
||||
interface ScanForErrorsParams {
|
||||
files: ProjectFile[]
|
||||
setErrors: Dispatch<SetStateAction<CodeError[]>>
|
||||
setIsScanning: Dispatch<SetStateAction<boolean>>
|
||||
}
|
||||
|
||||
export function createScanForErrors({
|
||||
files,
|
||||
setErrors,
|
||||
setIsScanning,
|
||||
}: ScanForErrorsParams) {
|
||||
return async () => {
|
||||
setIsScanning(true)
|
||||
try {
|
||||
const allErrors: CodeError[] = []
|
||||
|
||||
for (const file of files) {
|
||||
const fileErrors = await ErrorRepairService.detectErrors(file)
|
||||
allErrors.push(...fileErrors)
|
||||
}
|
||||
|
||||
setErrors(allErrors)
|
||||
|
||||
if (allErrors.length === 0) {
|
||||
toast.success(errorPanelCopy.toast.noErrorsFound)
|
||||
} else {
|
||||
toast.info(formatWithCount(errorPanelCopy.toast.foundIssues, allErrors.length))
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(errorPanelCopy.toast.scanFailed)
|
||||
console.error(error)
|
||||
} finally {
|
||||
setIsScanning(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -46,6 +46,8 @@ export { useDataSourceManagerState } from './use-data-source-manager-state'
|
||||
export { useConflictResolution } from './use-conflict-resolution'
|
||||
export { useConflictCard } from './use-conflict-card'
|
||||
export { useConflictDetailsDialog } from './use-conflict-details-dialog'
|
||||
export { useConflictResolutionDemo } from './use-conflict-resolution-demo'
|
||||
export { useDocumentationView } from './use-documentation-view'
|
||||
export { useDockerBuildDebugger } from './use-docker-build-debugger'
|
||||
export { useDataBindingDesigner } from './use-data-binding-designer'
|
||||
export { useErrorPanelMain } from './use-error-panel-main'
|
||||
|
||||
61
src/hooks/use-conflict-resolution-demo.ts
Normal file
61
src/hooks/use-conflict-resolution-demo.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { useState, useMemo, useCallback } from 'react'
|
||||
import { useConflictResolution } from './use-conflict-resolution'
|
||||
import { db } from '@/lib/db'
|
||||
import { toast } from 'sonner'
|
||||
import conflictCopy from '@/data/conflict-resolution-copy.json'
|
||||
|
||||
const demoCopy = conflictCopy.demo
|
||||
|
||||
export function useConflictResolutionDemo() {
|
||||
const { hasConflicts, stats, detect, resolveAll } = useConflictResolution()
|
||||
const [simulatingConflict, setSimulatingConflict] = useState(false)
|
||||
|
||||
const conflictSummary = useMemo(() => {
|
||||
const count = stats.totalConflicts
|
||||
const label = count === 1 ? demoCopy.conflictSingular : demoCopy.conflictPlural
|
||||
return `${count} ${label} ${demoCopy.detectedSuffix}`
|
||||
}, [stats.totalConflicts])
|
||||
|
||||
const simulateConflict = useCallback(async () => {
|
||||
setSimulatingConflict(true)
|
||||
try {
|
||||
const testFile = {
|
||||
id: 'demo-conflict-file',
|
||||
name: 'example.ts',
|
||||
path: '/src/example.ts',
|
||||
content: 'const local = "This is the local version"',
|
||||
language: 'typescript',
|
||||
updatedAt: Date.now(),
|
||||
}
|
||||
|
||||
await db.put('files', testFile)
|
||||
toast.info(demoCopy.toastLocalCreated)
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
toast.success(demoCopy.toastSimulationComplete)
|
||||
} catch (err: any) {
|
||||
toast.error(err.message || demoCopy.toastSimulationError)
|
||||
} finally {
|
||||
setSimulatingConflict(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleQuickResolveAll = useCallback(async () => {
|
||||
try {
|
||||
await resolveAll('local')
|
||||
toast.success(demoCopy.toastResolveAllSuccess)
|
||||
} catch (err: any) {
|
||||
toast.error(err.message || demoCopy.toastResolveAllError)
|
||||
}
|
||||
}, [resolveAll])
|
||||
|
||||
return {
|
||||
hasConflicts,
|
||||
stats,
|
||||
simulatingConflict,
|
||||
conflictSummary,
|
||||
simulateConflict,
|
||||
detect,
|
||||
handleQuickResolveAll,
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,17 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useMemo, useState, useEffect } from 'react'
|
||||
import { CodeError } from '@/types/errors'
|
||||
import { ProjectFile } from '@/types/project'
|
||||
import { createScanForErrors } from './error-panel-scan'
|
||||
import { createRepairHandlers } from './error-panel-repair'
|
||||
import { createScanForErrors } from '@/components/error-panel/error-panel-scan'
|
||||
import { createRepairHandlers } from '@/components/error-panel/error-panel-repair'
|
||||
import errorPanelCopy from '@/data/error-panel.json'
|
||||
|
||||
interface UseErrorPanelStateParams {
|
||||
interface UseErrorPanelMainParams {
|
||||
files: ProjectFile[]
|
||||
onFileChange: (fileId: string, content: string) => void
|
||||
onFileSelect: (fileId: string) => void
|
||||
}
|
||||
|
||||
export function useErrorPanelState({ files, onFileChange }: UseErrorPanelStateParams) {
|
||||
export function useErrorPanelMain({ files, onFileChange, onFileSelect }: UseErrorPanelMainParams) {
|
||||
const [errors, setErrors] = useState<CodeError[]>([])
|
||||
const [isScanning, setIsScanning] = useState(false)
|
||||
const [isRepairing, setIsRepairing] = useState(false)
|
||||
@@ -60,5 +62,6 @@ export function useErrorPanelState({ files, onFileChange }: UseErrorPanelStatePa
|
||||
repairAllErrors: repairHandlers.repairAllErrors,
|
||||
repairFileWithContext: repairHandlers.repairFileWithContext,
|
||||
repairSingleError: repairHandlers.repairSingleError,
|
||||
errorPanelCopy,
|
||||
}
|
||||
}
|
||||
@@ -24,9 +24,11 @@ import { useFormatValue } from '@/hooks/use-format-value'
|
||||
import { useConflictResolution } from '@/hooks/use-conflict-resolution'
|
||||
import { useConflictCard } from '@/hooks/use-conflict-card'
|
||||
import { useConflictDetailsDialog } from '@/hooks/use-conflict-details-dialog'
|
||||
import { useConflictResolutionDemo } from '@/hooks/use-conflict-resolution-demo'
|
||||
import { useDocumentationView } from '@/hooks/use-documentation-view'
|
||||
import { useDockerBuildDebugger } from '@/hooks/use-docker-build-debugger'
|
||||
import { useDataBindingDesigner } from '@/hooks/use-data-binding-designer'
|
||||
import { useErrorPanelMain } from '@/hooks/use-error-panel-main'
|
||||
|
||||
export interface HookRegistry {
|
||||
[key: string]: (...args: any[]) => any
|
||||
@@ -58,9 +60,11 @@ export const hooksRegistry: HookRegistry = {
|
||||
useConflictResolution,
|
||||
useConflictCard,
|
||||
useConflictDetailsDialog,
|
||||
useConflictResolutionDemo,
|
||||
useDocumentationView,
|
||||
useDockerBuildDebugger,
|
||||
useDataBindingDesigner,
|
||||
useErrorPanelMain,
|
||||
// Add more hooks here as needed
|
||||
}
|
||||
|
||||
|
||||
1
src/lib/json-ui/interfaces/conflict-resolution-demo.ts
Normal file
1
src/lib/json-ui/interfaces/conflict-resolution-demo.ts
Normal file
@@ -0,0 +1 @@
|
||||
export interface ConflictResolutionDemoProps {}
|
||||
@@ -210,6 +210,7 @@ export * from './pwa-install-prompt'
|
||||
export * from './conflict-card'
|
||||
export * from './conflict-details-dialog'
|
||||
export * from './conflict-indicator'
|
||||
export * from './conflict-resolution-demo'
|
||||
export * from './error-panel'
|
||||
export * from './preview-dialog'
|
||||
export * from './not-found-page'
|
||||
@@ -235,3 +236,4 @@ export * from './feature-toggle-settings'
|
||||
export * from './documentation-view'
|
||||
export * from './docker-build-debugger'
|
||||
export * from './data-binding-designer'
|
||||
export * from './error-panel-main'
|
||||
|
||||
@@ -254,6 +254,7 @@ import type {
|
||||
DocumentationViewProps,
|
||||
DockerBuildDebuggerProps,
|
||||
DataBindingDesignerProps,
|
||||
ErrorPanelMainProps,
|
||||
} from './interfaces'
|
||||
|
||||
// Import JSON definitions
|
||||
@@ -505,6 +506,7 @@ import featureToggleSettingsDef from '@/components/json-definitions/feature-togg
|
||||
import documentationViewDef from '@/components/json-definitions/documentation-view.json'
|
||||
import dockerBuildDebuggerDef from '@/components/json-definitions/docker-build-debugger.json'
|
||||
import dataBindingDesignerDef from '@/components/json-definitions/data-binding-designer.json'
|
||||
import errorPanelMainDef from '@/components/json-definitions/error-panel-main.json'
|
||||
|
||||
// Create pure JSON components (no hooks)
|
||||
export const BindingIndicator = createJsonComponent<BindingIndicatorProps>(bindingIndicatorDef)
|
||||
@@ -982,4 +984,13 @@ export const DataBindingDesigner = createJsonComponentWithHooks<DataBindingDesig
|
||||
}
|
||||
})
|
||||
|
||||
export const ErrorPanelMain = createJsonComponentWithHooks<ErrorPanelMainProps>(errorPanelMainDef, {
|
||||
hooks: {
|
||||
panelState: {
|
||||
hookName: 'useErrorPanelMain',
|
||||
args: (props) => [props.files, props.onFileChange, props.onFileSelect]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// All components converted to pure JSON! 🎉
|
||||
|
||||
Reference in New Issue
Block a user