diff --git a/audit-report.json b/audit-report.json index c8ab1bc..198bc29 100644 --- a/audit-report.json +++ b/audit-report.json @@ -1,5 +1,5 @@ { - "timestamp": "2026-01-21T05:06:37.965Z", + "timestamp": "2026-01-21T05:07:04.048Z", "issues": [], "stats": { "totalJsonFiles": 337, diff --git a/json-components-registry.json b/json-components-registry.json index 810aa52..c07a9d2 100644 --- a/json-components-registry.json +++ b/json-components-registry.json @@ -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" } }, { diff --git a/src/components/ErrorPanel.tsx b/src/components/ErrorPanel.tsx deleted file mode 100644 index 109e2f6..0000000 --- a/src/components/ErrorPanel.tsx +++ /dev/null @@ -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 ( -
- - - -
- {errors.length === 0 && ( - - )} - - {errors.length > 0 && ( - - )} -
- -
- ) -} diff --git a/src/components/error-panel/ErrorPanelEmptyState.tsx b/src/components/error-panel/ErrorPanelEmptyState.tsx deleted file mode 100644 index 6368019..0000000 --- a/src/components/error-panel/ErrorPanelEmptyState.tsx +++ /dev/null @@ -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 ( - } - title={scanningTitle} - description={scanningDescription} - /> - ) - } - - return ( - } - title={noIssuesTitle} - description={noIssuesDescription} - /> - ) -} diff --git a/src/components/error-panel/ErrorPanelErrorItem.tsx b/src/components/error-panel/ErrorPanelErrorItem.tsx deleted file mode 100644 index 0a9f4bb..0000000 --- a/src/components/error-panel/ErrorPanelErrorItem.tsx +++ /dev/null @@ -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 - case 'warning': - return - case 'info': - return - default: - return - } -} - -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 ( - -
-
{getSeverityIcon(error.severity)}
-
- - - {error.type} - - {error.line && ( - - {lineLabel} {error.line} - - )} - {error.isFixed && ( - - - {fixedLabel} - - )} - - - {error.message} - - {error.code && ( - - - - )} -
- } - label="" - onClick={() => onRepair(error)} - disabled={isRepairing || error.isFixed} - variant="outline" - size="sm" - /> -
- {error.code && ( - -
- {error.code} -
- - )} - - ) -} diff --git a/src/components/error-panel/ErrorPanelFileCard.tsx b/src/components/error-panel/ErrorPanelFileCard.tsx deleted file mode 100644 index be3dc2c..0000000 --- a/src/components/error-panel/ErrorPanelFileCard.tsx +++ /dev/null @@ -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 ( - -
- - - - {file.name} - - {errors.length} {errors.length === 1 ? issueLabel : issuesLabel} - - - - } - label={openLabel} - onClick={() => onFileSelect(file.id)} - variant="outline" - size="sm" - /> - } - label={repairLabel} - onClick={() => onRepairFile(file.id)} - disabled={isRepairing} - variant="default" - size="sm" - /> - - -
- -
- {errors.map((error) => ( - - ))} -
- - ) -} diff --git a/src/components/error-panel/ErrorPanelFileList.tsx b/src/components/error-panel/ErrorPanelFileList.tsx deleted file mode 100644 index b609534..0000000 --- a/src/components/error-panel/ErrorPanelFileList.tsx +++ /dev/null @@ -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 - 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 ( - - {Object.entries(errorsByFile).map(([fileId, fileErrors]) => { - const file = files.find((entry) => entry.id === fileId) - if (!file) return null - - return ( - - ) - })} - - ) -} diff --git a/src/components/error-panel/ErrorPanelHeader.tsx b/src/components/error-panel/ErrorPanelHeader.tsx deleted file mode 100644 index 06a8951..0000000 --- a/src/components/error-panel/ErrorPanelHeader.tsx +++ /dev/null @@ -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 ( -
- - - }> - {title} - - {(errorCount > 0 || warningCount > 0) && ( - - {errorCount > 0 && ( - - {errorCount} {errorCount === 1 ? errorLabel : errorsLabel} - - )} - {warningCount > 0 && ( - - {warningCount} {warningCount === 1 ? warningLabel : warningsLabel} - - )} - - )} - - - } - label={isScanning ? scanningLabel : scanLabel} - onClick={onScan} - disabled={isScanning || isRepairing} - variant="outline" - /> - } - label={isRepairing ? repairingLabel : repairAllLabel} - onClick={onRepairAll} - disabled={errorCount + warningCount === 0 || isRepairing || isScanning} - variant="default" - /> - - -
- ) -} diff --git a/src/components/error-panel/error-panel-repair.ts b/src/components/error-panel/error-panel-repair.ts deleted file mode 100644 index 415b214..0000000 --- a/src/components/error-panel/error-panel-repair.ts +++ /dev/null @@ -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 - setErrors: Dispatch> - setIsRepairing: Dispatch> -} - -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, - } -} diff --git a/src/components/error-panel/error-panel-scan.ts b/src/components/error-panel/error-panel-scan.ts deleted file mode 100644 index 0b25291..0000000 --- a/src/components/error-panel/error-panel-scan.ts +++ /dev/null @@ -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> - setIsScanning: Dispatch> -} - -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) - } - } -} diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 287c70a..ebbcd36 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -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' diff --git a/src/hooks/use-conflict-resolution-demo.ts b/src/hooks/use-conflict-resolution-demo.ts new file mode 100644 index 0000000..6b606f3 --- /dev/null +++ b/src/hooks/use-conflict-resolution-demo.ts @@ -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, + } +} diff --git a/src/components/error-panel/useErrorPanelState.ts b/src/hooks/use-error-panel-main.ts similarity index 76% rename from src/components/error-panel/useErrorPanelState.ts rename to src/hooks/use-error-panel-main.ts index bfd0850..14576a1 100644 --- a/src/components/error-panel/useErrorPanelState.ts +++ b/src/hooks/use-error-panel-main.ts @@ -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([]) 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, } } diff --git a/src/lib/json-ui/hooks-registry.ts b/src/lib/json-ui/hooks-registry.ts index acadda3..5e7b53e 100644 --- a/src/lib/json-ui/hooks-registry.ts +++ b/src/lib/json-ui/hooks-registry.ts @@ -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 } diff --git a/src/lib/json-ui/interfaces/conflict-resolution-demo.ts b/src/lib/json-ui/interfaces/conflict-resolution-demo.ts new file mode 100644 index 0000000..e224b2c --- /dev/null +++ b/src/lib/json-ui/interfaces/conflict-resolution-demo.ts @@ -0,0 +1 @@ +export interface ConflictResolutionDemoProps {} diff --git a/src/lib/json-ui/interfaces/index.ts b/src/lib/json-ui/interfaces/index.ts index b4b4424..5ca764b 100644 --- a/src/lib/json-ui/interfaces/index.ts +++ b/src/lib/json-ui/interfaces/index.ts @@ -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' diff --git a/src/lib/json-ui/json-components.ts b/src/lib/json-ui/json-components.ts index ab1248a..90a56c1 100644 --- a/src/lib/json-ui/json-components.ts +++ b/src/lib/json-ui/json-components.ts @@ -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(bindingIndicatorDef) @@ -982,4 +984,13 @@ export const DataBindingDesigner = createJsonComponentWithHooks(errorPanelMainDef, { + hooks: { + panelState: { + hookName: 'useErrorPanelMain', + args: (props) => [props.files, props.onFileChange, props.onFileSelect] + } + } +}) + // All components converted to pure JSON! 🎉