709 lines
25 KiB
TypeScript
709 lines
25 KiB
TypeScript
|
import { useState, useEffect, useCallback } from 'react'
|
|||
|
|
import { FaThLarge } from 'react-icons/fa'
|
|||
|
|
import {
|
|||
|
|
parseReactCode,
|
|||
|
|
updateComponentProp,
|
|||
|
|
updateComponentProps,
|
|||
|
|
generateHookCode,
|
|||
|
|
generateHookVariableName,
|
|||
|
|
removeHookFromCode,
|
|||
|
|
generateUniqueId,
|
|||
|
|
removeComponentAndHooksFromCode,
|
|||
|
|
generateComponentJSX,
|
|||
|
|
insertJSXAtPosition,
|
|||
|
|
} from '../../utils/codeParser'
|
|||
|
|
import { ComponentLibrary } from '../../components/codeLayout/ComponentLibrary'
|
|||
|
|
import { Splitter } from '../../components/codeLayout/Splitter'
|
|||
|
|
import { PanelManager } from '../../components/codeLayout/PanelManager'
|
|||
|
|
import { CodeEditor } from '../../components/codeLayout/CodeEditor'
|
|||
|
|
import { ComponentDefinition, ComponentInfo, EditorState } from '../../proxy/developerKit/componentInfo'
|
|||
|
|
import PropertyPanel from '../../components/codeLayout/PropertyPanel'
|
|||
|
|
import ComponentSelector from '../../components/codeLayout/ComponentSelector'
|
|||
|
|
import { useParams } from 'react-router-dom'
|
|||
|
|
import { useComponents } from '../../contexts/ComponentContext'
|
|||
|
|
import { toast } from '../../components/ui'
|
|||
|
|
import Notification from '../../components/ui/Notification/Notification'
|
|||
|
|
import { PanelState } from '../../components/codeLayout/data/componentDefinitions'
|
|||
|
|
|
|||
|
|
const INITIAL_CODE = `const Component = () => {
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Component
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
function CodeLayout() {
|
|||
|
|
const { id } = useParams()
|
|||
|
|
const { getComponent, updateComponent } = useComponents()
|
|||
|
|
const [showPanelManager, setShowPanelManager] = useState(false)
|
|||
|
|
const [panelState, setPanelState] = useState<PanelState>({
|
|||
|
|
toolbox: true,
|
|||
|
|
properties: true,
|
|||
|
|
})
|
|||
|
|
const [editorState, setEditorState] = useState<EditorState>({
|
|||
|
|
code: INITIAL_CODE,
|
|||
|
|
components: [],
|
|||
|
|
selectedComponentId: null,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const isEditing = !!id
|
|||
|
|
const [code, setCode] = useState<string>(INITIAL_CODE)
|
|||
|
|
const [hasCodeChanges, setHasCodeChanges] = useState(false)
|
|||
|
|
const [isLoaded, setIsLoaded] = useState(false)
|
|||
|
|
const [name, setName] = useState('')
|
|||
|
|
const [dependencies, setDependencies] = useState<string[]>([])
|
|||
|
|
const [isActive, setIsActive] = useState(true)
|
|||
|
|
|
|||
|
|
const handleSave = async () => {
|
|||
|
|
try {
|
|||
|
|
const componentData = {
|
|||
|
|
name: name.trim(),
|
|||
|
|
dependencies: JSON.stringify(dependencies), // Serialize dependencies to JSON string
|
|||
|
|
code: code.trim(),
|
|||
|
|
isActive,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isEditing && id) {
|
|||
|
|
updateComponent(id, componentData)
|
|||
|
|
parseAndUpdateComponents(componentData.code)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error saving component:', error)
|
|||
|
|
alert('Failed to save component. Please try again.')
|
|||
|
|
} finally {
|
|||
|
|
setHasCodeChanges(false)
|
|||
|
|
setIsLoaded(true)
|
|||
|
|
|
|||
|
|
toast.push(
|
|||
|
|
<Notification type="success" duration={2000}>
|
|||
|
|
"Bileşen başarıyla kaydedildi."
|
|||
|
|
</Notification>,
|
|||
|
|
{
|
|||
|
|
placement: 'top-end',
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Load existing component data - sadece edit modunda
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (isEditing && id && !isLoaded) {
|
|||
|
|
const component = getComponent(id)
|
|||
|
|
if (component) {
|
|||
|
|
setName(component.name)
|
|||
|
|
// setDescription(component.description || "");
|
|||
|
|
// Parse dependencies from JSON string
|
|||
|
|
try {
|
|||
|
|
const deps = component.dependencies ? JSON.parse(component.dependencies) : []
|
|||
|
|
setDependencies(Array.isArray(deps) ? deps : [])
|
|||
|
|
} catch {
|
|||
|
|
setDependencies([])
|
|||
|
|
}
|
|||
|
|
setCode(component.code) // Mevcut kodu yükle
|
|||
|
|
// Parse components from the loaded code
|
|||
|
|
parseAndUpdateComponents(component.code)
|
|||
|
|
setIsActive(component.isActive)
|
|||
|
|
setIsLoaded(true)
|
|||
|
|
}
|
|||
|
|
} else if (!isEditing && !isLoaded) {
|
|||
|
|
// Yeni komponent için boş başla - TEMPLATE YOK
|
|||
|
|
setIsLoaded(true)
|
|||
|
|
}
|
|||
|
|
}, [id, isEditing, getComponent, isLoaded])
|
|||
|
|
|
|||
|
|
// NEW: Handle drop to Code Editor instead of Canvas
|
|||
|
|
const handleDropToCodeEditor = (
|
|||
|
|
componentDef: ComponentDefinition,
|
|||
|
|
position: { line: number; column: number },
|
|||
|
|
): void => {
|
|||
|
|
if (!componentDef || typeof componentDef !== 'object') {
|
|||
|
|
console.error('Component definition is null or undefined')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!componentDef.name) {
|
|||
|
|
console.error('Invalid component definition in handleDropToCodeEditor')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const propertiesObj: Record<string, any> = {}
|
|||
|
|
if (Array.isArray(componentDef.properties)) {
|
|||
|
|
componentDef.properties.forEach((prop) => {
|
|||
|
|
propertiesObj[prop.name] = prop
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const newComponent: ComponentInfo = {
|
|||
|
|
id: generateUniqueId(),
|
|||
|
|
type: componentDef.name, // type alanı componentDef.name olmalı
|
|||
|
|
props: propertiesObj,
|
|||
|
|
name: componentDef.name,
|
|||
|
|
startLine: 0,
|
|||
|
|
endLine: 0,
|
|||
|
|
startColumn: 0,
|
|||
|
|
endColumn: 0,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Generate JSX string for this component
|
|||
|
|
const componentJSX = generateComponentJSX(newComponent)
|
|||
|
|
|
|||
|
|
// Insert the JSX at the cursor position in the code editor
|
|||
|
|
setCode(insertJSXAtPosition(code, componentJSX, position))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleAppDragOver = (e: React.DragEvent<HTMLDivElement>) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const parseAndUpdateComponents = useCallback((code: string) => {
|
|||
|
|
try {
|
|||
|
|
const parsed = parseReactCode(code)
|
|||
|
|
setEditorState((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
code,
|
|||
|
|
components: parsed.components,
|
|||
|
|
}))
|
|||
|
|
} catch (error) {
|
|||
|
|
const msg = error instanceof Error ? error.message : 'Koddan komponentler parse edilemedi.'
|
|||
|
|
console.log('Parse error:', msg)
|
|||
|
|
setEditorState((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
code, // Only update the code, keep existing components
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
// Handle code changes from Monaco Editor
|
|||
|
|
const handleCodeChange = useCallback(
|
|||
|
|
(value: string | undefined) => {
|
|||
|
|
if (value !== undefined) {
|
|||
|
|
setCode(value)
|
|||
|
|
setHasCodeChanges(value !== editorState.code)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
[editorState.code],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// Apply code changes
|
|||
|
|
const handleApplyCodeChanges = useCallback(() => {
|
|||
|
|
parseAndUpdateComponents(code)
|
|||
|
|
setHasCodeChanges(false)
|
|||
|
|
}, [parseAndUpdateComponents, code])
|
|||
|
|
|
|||
|
|
// Reset code changes
|
|||
|
|
const handleResetCodeChanges = useCallback(() => {
|
|||
|
|
setCode(editorState.code)
|
|||
|
|
setHasCodeChanges(false)
|
|||
|
|
}, [editorState.code])
|
|||
|
|
|
|||
|
|
// Handle property changes from Property Panel
|
|||
|
|
// Handle hook toggle
|
|||
|
|
const handleHookToggle = useCallback(
|
|||
|
|
(componentId: string, hookType: string, enabled: boolean) => {
|
|||
|
|
console.log('🪝 App: handleHookToggle called:', {
|
|||
|
|
componentId,
|
|||
|
|
hookType,
|
|||
|
|
enabled,
|
|||
|
|
})
|
|||
|
|
const selectedComponent = editorState.components?.find((c) => c.id === componentId)
|
|||
|
|
if (!selectedComponent) return
|
|||
|
|
|
|||
|
|
// Use the most up-to-date code (pendingCode if available, otherwise editorState.code)
|
|||
|
|
let updatedCode = code || editorState.code
|
|||
|
|
console.log('🔍 App: Using code source:', code === editorState.code ? 'same' : 'pendingCode')
|
|||
|
|
|
|||
|
|
if (enabled) {
|
|||
|
|
// Check if hook is already present - more specific check
|
|||
|
|
const varName = generateHookVariableName(hookType, componentId)
|
|||
|
|
console.log('🔍 App: Checking for existing hook variable:', varName)
|
|||
|
|
|
|||
|
|
// Create a more specific regex to check for actual hook declarations
|
|||
|
|
const hookDeclarationRegex = new RegExp(
|
|||
|
|
`const\\s+(?:\\[.*?${varName}.*?\\]|${varName})\\s*=\\s*${hookType}\\s*\\(`,
|
|||
|
|
)
|
|||
|
|
if (hookDeclarationRegex.test(updatedCode)) {
|
|||
|
|
console.log('⚠️ App: Hook already exists, skipping')
|
|||
|
|
return // Hook already exists
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Handle React imports - improved approach
|
|||
|
|
const reactImportRegex = /^import\s+\{([^}]*)\}\s+from\s+['"]react['"]\s*;?/m
|
|||
|
|
const reactMatch = reactImportRegex.exec(updatedCode)
|
|||
|
|
|
|||
|
|
if (reactMatch) {
|
|||
|
|
// reactMatch[1] --> süslü parantez içi örn: "useState, useRef"
|
|||
|
|
let existingHooks = reactMatch[1]
|
|||
|
|
.split(',')
|
|||
|
|
.map((h) => h.trim())
|
|||
|
|
.filter((h) => h)
|
|||
|
|
|
|||
|
|
// Eğer hookType yoksa ekle
|
|||
|
|
if (!existingHooks.includes(hookType)) {
|
|||
|
|
existingHooks.push(hookType)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Tekrarları kaldır (güvenlik için)
|
|||
|
|
existingHooks = [...new Set(existingHooks)]
|
|||
|
|
|
|||
|
|
const newImport = `import { ${existingHooks.join(', ')} } from 'react';\n`
|
|||
|
|
updatedCode = updatedCode.replace(reactImportRegex, newImport)
|
|||
|
|
|
|||
|
|
console.log('🔄 App: Updated existing React import:', newImport.trim())
|
|||
|
|
} else {
|
|||
|
|
// React import satırı yoksa ekle
|
|||
|
|
const importLine = `import { ${hookType} } from 'react';\n\n`
|
|||
|
|
updatedCode = importLine + updatedCode
|
|||
|
|
console.log('🔄 App: Added new React import:', importLine.trim())
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Add hook declaration
|
|||
|
|
const hookCode = generateHookCode(hookType, componentId, selectedComponent.type)
|
|||
|
|
console.log('🔍 App: Generated hook code:', hookCode)
|
|||
|
|
|
|||
|
|
// Try multiple patterns for function declaration
|
|||
|
|
const functionPatterns = [
|
|||
|
|
/function\s+Component\s*\([^)]*\)\s*\{/, // function Component() {
|
|||
|
|
/function\s+\w+\s*\([^)]*\)\s*\{/, // function AnyName() {
|
|||
|
|
/const\s+\w+\s*=\s*\([^)]*\)\s*=>\s*\{/, // const Component = () => {
|
|||
|
|
/export\s+default\s+function\s*\([^)]*\)\s*\{/, // export default function() {
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
let match2 = null
|
|||
|
|
for (const pattern of functionPatterns) {
|
|||
|
|
match2 = updatedCode.match(pattern)
|
|||
|
|
if (match2) {
|
|||
|
|
console.log('🔍 App: Found function with pattern:', pattern)
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('🔍 App: Function match result:', match2)
|
|||
|
|
console.log('🔍 App: Updated code preview:', updatedCode.substring(0, 500))
|
|||
|
|
|
|||
|
|
if (match2 && typeof match2.index === 'number') {
|
|||
|
|
const insertPosition = match2.index + match2[0].length
|
|||
|
|
updatedCode =
|
|||
|
|
updatedCode.slice(0, insertPosition) +
|
|||
|
|
'\n ' +
|
|||
|
|
hookCode +
|
|||
|
|
'\n' +
|
|||
|
|
updatedCode.slice(insertPosition)
|
|||
|
|
console.log('✅ App: Hook code inserted successfully')
|
|||
|
|
} else {
|
|||
|
|
console.log('⚠️ App: Could not find function body to insert hook')
|
|||
|
|
// Fallback: insert after the first opening brace
|
|||
|
|
const firstBrace = updatedCode.indexOf('{')
|
|||
|
|
if (firstBrace !== -1) {
|
|||
|
|
updatedCode =
|
|||
|
|
updatedCode.slice(0, firstBrace + 1) +
|
|||
|
|
'\n ' +
|
|||
|
|
hookCode +
|
|||
|
|
'\n' +
|
|||
|
|
updatedCode.slice(firstBrace + 1)
|
|||
|
|
console.log('✅ App: Hook code inserted using fallback method')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update component properties if needed
|
|||
|
|
if (hookType === 'useState') {
|
|||
|
|
const setterName = `set${varName.charAt(0).toUpperCase() + varName.slice(1)}`
|
|||
|
|
|
|||
|
|
// Update component props based on type
|
|||
|
|
if (selectedComponent.type === 'input') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'value', `{${varName}}`)
|
|||
|
|
updatedCode = updateComponentProp(
|
|||
|
|
updatedCode,
|
|||
|
|
componentId,
|
|||
|
|
'onChange',
|
|||
|
|
`{(e) => ${setterName}(e.target.value)}`,
|
|||
|
|
)
|
|||
|
|
} else if (selectedComponent.type === 'button') {
|
|||
|
|
updatedCode = updateComponentProp(
|
|||
|
|
updatedCode,
|
|||
|
|
componentId,
|
|||
|
|
'onClick',
|
|||
|
|
`{() => ${setterName}(!${varName})}`,
|
|||
|
|
)
|
|||
|
|
} else if (selectedComponent.type === 'checkbox') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'checked', `{${varName}}`)
|
|||
|
|
updatedCode = updateComponentProp(
|
|||
|
|
updatedCode,
|
|||
|
|
componentId,
|
|||
|
|
'onChange',
|
|||
|
|
`{(val) => ${setterName}(val)}`,
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
} else if (hookType === 'useRef') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'ref', `{${varName}}`)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// Remove hook
|
|||
|
|
updatedCode = removeHookFromCode(updatedCode, hookType, componentId)
|
|||
|
|
|
|||
|
|
// Remove related props
|
|||
|
|
if (hookType === 'useState') {
|
|||
|
|
if (selectedComponent.type === 'input') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'value', '')
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'onChange', null)
|
|||
|
|
} else if (selectedComponent.type === 'button') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'onClick', null)
|
|||
|
|
} else if (selectedComponent.type === 'checkbox') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'checked', false)
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'onChange', null)
|
|||
|
|
}
|
|||
|
|
} else if (hookType === 'useRef') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'ref', null)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setEditorState((prev) => {
|
|||
|
|
console.log('🔄 App: Final updatedCode before parsing:', updatedCode)
|
|||
|
|
const parsed = parseReactCode(updatedCode)
|
|||
|
|
console.log('🔄 App: Parsed components:', parsed.components?.length)
|
|||
|
|
const newState = {
|
|||
|
|
code: updatedCode,
|
|||
|
|
components: parsed.components,
|
|||
|
|
selectedComponentId: prev.selectedComponentId, // Preserve selection
|
|||
|
|
}
|
|||
|
|
console.log('🔄 App: New editor state code preview:', newState.code.substring(0, 300))
|
|||
|
|
return newState
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// Also update pending code to match
|
|||
|
|
setCode(updatedCode)
|
|||
|
|
},
|
|||
|
|
[editorState.code, editorState.components, code],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// Zincirleme hook güncelleme fonksiyonu
|
|||
|
|
const applyMultipleHookToggles = (
|
|||
|
|
toggles: { componentId: string; hookType: string; enabled: boolean }[],
|
|||
|
|
) => {
|
|||
|
|
let updatedCode = code || editorState.code
|
|||
|
|
// 1. Sadece kaldırılması gereken hook'ları kaldır
|
|||
|
|
toggles
|
|||
|
|
.filter((t) => t.enabled === false)
|
|||
|
|
.forEach(({ hookType, componentId }) => {
|
|||
|
|
const selectedComponent = editorState.components?.find((c) => c.id === componentId)
|
|||
|
|
if (!selectedComponent) return
|
|||
|
|
updatedCode = removeHookFromCode(updatedCode, hookType, componentId)
|
|||
|
|
// Prop temizliği
|
|||
|
|
if (hookType === 'useState') {
|
|||
|
|
if (selectedComponent.type === 'input') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'value', '')
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'onChange', null)
|
|||
|
|
} else if (selectedComponent.type === 'button') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'onClick', null)
|
|||
|
|
} else if (selectedComponent.type === 'checkbox') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'checked', false)
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'onChange', null)
|
|||
|
|
}
|
|||
|
|
} else if (hookType === 'useRef') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'ref', null)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// 2. Eklenmesi gereken hook'ları ekle (veya zaten varsa dokunma)
|
|||
|
|
toggles
|
|||
|
|
.filter((t) => t.enabled === true)
|
|||
|
|
.forEach(({ hookType, componentId }) => {
|
|||
|
|
const selectedComponent = editorState.components?.find((c) => c.id === componentId)
|
|||
|
|
if (!selectedComponent) return
|
|||
|
|
const varName = generateHookVariableName(hookType, componentId)
|
|||
|
|
// Hook kodu fonksiyon gövdesinde yoksa ekle
|
|||
|
|
const hookDeclarationRegex = new RegExp(
|
|||
|
|
`const\\s+(?:\\[.*?${varName}.*?\\]|${varName})\\s*=\\s*${hookType}\\s*\\(`,
|
|||
|
|
)
|
|||
|
|
if (!hookDeclarationRegex.test(updatedCode)) {
|
|||
|
|
const reactImportRegex =
|
|||
|
|
// eslint-disable-next-line no-useless-escape
|
|||
|
|
/import\\s+React(?:\\s*,\\s*\\{([^}]*)\\})?\\s+from\\s+['\"]react['\"];?/
|
|||
|
|
const importMatch = updatedCode.match(reactImportRegex)
|
|||
|
|
const allHooks = new Set<string>()
|
|||
|
|
if (importMatch && importMatch[1]) {
|
|||
|
|
importMatch[1]
|
|||
|
|
.split(',')
|
|||
|
|
.map((h) => h.trim())
|
|||
|
|
.filter((h) => h)
|
|||
|
|
.forEach((h) => allHooks.add(h))
|
|||
|
|
}
|
|||
|
|
allHooks.add(hookType)
|
|||
|
|
let newImport = ''
|
|||
|
|
if (allHooks.size > 0) {
|
|||
|
|
newImport = `import { ${Array.from(allHooks).join(', ')} } from 'react';\n`
|
|||
|
|
}
|
|||
|
|
if (importMatch) {
|
|||
|
|
updatedCode = updatedCode.replace(reactImportRegex, newImport)
|
|||
|
|
} else {
|
|||
|
|
updatedCode = newImport + updatedCode
|
|||
|
|
}
|
|||
|
|
// Hook kodunu fonksiyon gövdesine ekle
|
|||
|
|
const hookCode = generateHookCode(hookType, componentId, selectedComponent.type)
|
|||
|
|
const functionPatterns = [
|
|||
|
|
/function\s+Component\s*\([^)]*\)\s*\{/, // function Component() {
|
|||
|
|
/function\s+\w+\s*\([^)]*\)\s*\{/, // function AnyName() {
|
|||
|
|
/const\s+\w+\s*=\s*\([^)]*\)\s*=>\s*\{/, // const Component = () => {
|
|||
|
|
/export\s+default\s+function\s*\([^)]*\)\s*\{/, // export default function() {
|
|||
|
|
]
|
|||
|
|
let match2 = null
|
|||
|
|
for (const pattern of functionPatterns) {
|
|||
|
|
match2 = updatedCode.match(pattern)
|
|||
|
|
if (match2) break
|
|||
|
|
}
|
|||
|
|
if (match2 && typeof match2.index === 'number') {
|
|||
|
|
const insertPosition = match2.index + match2[0].length
|
|||
|
|
updatedCode =
|
|||
|
|
updatedCode.slice(0, insertPosition) +
|
|||
|
|
'\n ' +
|
|||
|
|
hookCode +
|
|||
|
|
'\n' +
|
|||
|
|
updatedCode.slice(insertPosition)
|
|||
|
|
} else {
|
|||
|
|
const firstBrace = updatedCode.indexOf('{')
|
|||
|
|
if (firstBrace !== -1) {
|
|||
|
|
updatedCode =
|
|||
|
|
updatedCode.slice(0, firstBrace + 1) +
|
|||
|
|
'\n ' +
|
|||
|
|
hookCode +
|
|||
|
|
'\n' +
|
|||
|
|
updatedCode.slice(firstBrace + 1)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Prop güncellemeleri
|
|||
|
|
if (hookType === 'useState') {
|
|||
|
|
const setterName = `set${varName.charAt(0).toUpperCase() + varName.slice(1)}`
|
|||
|
|
if (selectedComponent.type === 'input') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'value', `{${varName}}`)
|
|||
|
|
updatedCode = updateComponentProp(
|
|||
|
|
updatedCode,
|
|||
|
|
componentId,
|
|||
|
|
'onChange',
|
|||
|
|
`{(e) => ${setterName}(e.target.value)}`,
|
|||
|
|
)
|
|||
|
|
} else if (selectedComponent.type === 'button') {
|
|||
|
|
updatedCode = updateComponentProp(
|
|||
|
|
updatedCode,
|
|||
|
|
componentId,
|
|||
|
|
'onClick',
|
|||
|
|
`{() => ${setterName}(!${varName})}`,
|
|||
|
|
)
|
|||
|
|
} else if (selectedComponent.type === 'checkbox') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'checked', `{${varName}}`)
|
|||
|
|
updatedCode = updateComponentProp(
|
|||
|
|
updatedCode,
|
|||
|
|
componentId,
|
|||
|
|
'onChange',
|
|||
|
|
`{(e) => ${setterName}(e.target.checked)}`,
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
} else if (hookType === 'useRef') {
|
|||
|
|
updatedCode = updateComponentProp(updatedCode, componentId, 'ref', `{${varName}}`)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
setEditorState((prev) => {
|
|||
|
|
const parsed = parseReactCode(updatedCode)
|
|||
|
|
return {
|
|||
|
|
code: updatedCode,
|
|||
|
|
components: parsed.components,
|
|||
|
|
selectedComponentId: prev.selectedComponentId,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
setCode(updatedCode)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Handle multiple property changes at once
|
|||
|
|
const handlePropertiesChange = useCallback(
|
|||
|
|
(componentId: string, updates: Record<string, any>) => {
|
|||
|
|
console.log('🔄 App: handlePropertiesChange called:', {
|
|||
|
|
componentId,
|
|||
|
|
updates,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const updatedCode = updateComponentProps(editorState.code, componentId, updates)
|
|||
|
|
console.log('📝 App: Properties updated, code changed:', editorState.code !== updatedCode)
|
|||
|
|
|
|||
|
|
setEditorState((prev) => {
|
|||
|
|
const parsed = parseReactCode(updatedCode)
|
|||
|
|
return {
|
|||
|
|
code: updatedCode,
|
|||
|
|
components: parsed.components,
|
|||
|
|
selectedComponentId: prev.selectedComponentId, // Preserve selection
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// Update pending code to reflect changes
|
|||
|
|
setCode(updatedCode)
|
|||
|
|
},
|
|||
|
|
[editorState.code],
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// Handle component list refresh
|
|||
|
|
const handleRefreshComponents = useCallback(() => {
|
|||
|
|
parseAndUpdateComponents(editorState.code)
|
|||
|
|
}, [parseAndUpdateComponents, editorState.code])
|
|||
|
|
|
|||
|
|
// Handle component selection
|
|||
|
|
const handleSelectComponent = useCallback((componentId: string | null) => {
|
|||
|
|
setEditorState((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
selectedComponentId: componentId,
|
|||
|
|
}))
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
// Initialize parsing on mount
|
|||
|
|
useEffect(() => {
|
|||
|
|
parseAndUpdateComponents(INITIAL_CODE)
|
|||
|
|
}, [parseAndUpdateComponents])
|
|||
|
|
|
|||
|
|
const handleDragStart = (_componentDef: ComponentDefinition, e: React.DragEvent) => {
|
|||
|
|
e.stopPropagation()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const selectedComponent =
|
|||
|
|
editorState.components?.find((c) => c.id === editorState.selectedComponentId) || null
|
|||
|
|
|
|||
|
|
const renderLeftPanel = () => {
|
|||
|
|
if (!panelState.toolbox) return null
|
|||
|
|
return <ComponentLibrary onDragStart={handleDragStart} />
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Komponent ve ilgili hook'ları koddan silen fonksiyon
|
|||
|
|
const handleDeleteComponent = (componentId: string) => {
|
|||
|
|
// Koddan JSX ve hook'ları sil
|
|||
|
|
const updatedCode = removeComponentAndHooksFromCode(code, componentId)
|
|||
|
|
// Koddan parse edip state'i güncelle
|
|||
|
|
parseAndUpdateComponents(updatedCode)
|
|||
|
|
setCode(updatedCode)
|
|||
|
|
// Seçili komponenti kaldır
|
|||
|
|
setEditorState((prev) => ({
|
|||
|
|
...prev,
|
|||
|
|
selectedComponentId: null,
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const renderRightPanel = () => {
|
|||
|
|
if (!panelState.properties) return null
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col flex-1 min-h-0 h-full w-full">
|
|||
|
|
<ComponentSelector
|
|||
|
|
components={editorState.components}
|
|||
|
|
selectedComponentId={editorState.selectedComponentId}
|
|||
|
|
onSelectComponent={handleSelectComponent}
|
|||
|
|
onRefresh={handleRefreshComponents}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<PropertyPanel
|
|||
|
|
selectedComponent={selectedComponent}
|
|||
|
|
currentCode={editorState.code}
|
|||
|
|
onPropertiesChange={handlePropertiesChange}
|
|||
|
|
onHookToggle={handleHookToggle}
|
|||
|
|
onMultipleHookToggle={applyMultipleHookToggles}
|
|||
|
|
onDeleteComponent={handleDeleteComponent}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const mainContent = (
|
|||
|
|
<div className="flex-1 flex flex-col min-h-0 h-full">
|
|||
|
|
{/* Top Header */}
|
|||
|
|
<div className="bg-white border-b border-gray-200 px-3 py-3">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center space-x-4">
|
|||
|
|
<h1 className="text-lg font-semibold text-gray-900">{name}</h1>
|
|||
|
|
<p className="text-xs text-gray-500">{dependencies.join(', ')}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center space-x-3">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowPanelManager(true)}
|
|||
|
|
className="flex items-center space-x-2 px-3 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
|||
|
|
title="Panel Manager"
|
|||
|
|
>
|
|||
|
|
<FaThLarge className="w-4 h-4 text-gray-600" />
|
|||
|
|
<span className="text-sm text-gray-600">Panels</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex flex-col flex-1 min-h-0 h-full">
|
|||
|
|
<div className="flex-1 h-full min-h-0">
|
|||
|
|
<CodeEditor
|
|||
|
|
code={code}
|
|||
|
|
onChange={handleCodeChange}
|
|||
|
|
onApplyCodeChanges={handleApplyCodeChanges}
|
|||
|
|
onResetCodeChanges={handleResetCodeChanges}
|
|||
|
|
onDrop={handleDropToCodeEditor}
|
|||
|
|
onComponentSave={handleSave}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className="flex h-screen bg-gray-50"
|
|||
|
|
onDragOver={handleAppDragOver}
|
|||
|
|
onDrop={(e) => {
|
|||
|
|
e.preventDefault()
|
|||
|
|
e.stopPropagation()
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* Panel Yöneticisi Modal */}
|
|||
|
|
{showPanelManager && (
|
|||
|
|
<PanelManager
|
|||
|
|
isOpen={showPanelManager}
|
|||
|
|
onClose={() => setShowPanelManager(false)}
|
|||
|
|
panelState={panelState}
|
|||
|
|
onPanelToggle={(panel) => setPanelState((prev) => ({ ...prev, [panel]: !prev[panel] }))}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{/* Sol Sidebar ve ana içerik */}
|
|||
|
|
{panelState.toolbox ? (
|
|||
|
|
<Splitter direction="horizontal" initialSize={288} minSize={200} maxSize={400}>
|
|||
|
|
{renderLeftPanel()}
|
|||
|
|
<div className="flex flex-1">
|
|||
|
|
{panelState.properties ? (
|
|||
|
|
<Splitter
|
|||
|
|
direction="horizontal"
|
|||
|
|
initialSize={400}
|
|||
|
|
minSize={300}
|
|||
|
|
maxSize={window.innerWidth - 288 - 100}
|
|||
|
|
reverse={true}
|
|||
|
|
>
|
|||
|
|
{mainContent}
|
|||
|
|
{renderRightPanel()}
|
|||
|
|
</Splitter>
|
|||
|
|
) : (
|
|||
|
|
mainContent
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Splitter>
|
|||
|
|
) : (
|
|||
|
|
<div className="flex flex-1">
|
|||
|
|
{panelState.properties ? (
|
|||
|
|
<Splitter
|
|||
|
|
direction="horizontal"
|
|||
|
|
initialSize={400}
|
|||
|
|
minSize={300}
|
|||
|
|
maxSize={window.innerWidth - 100}
|
|||
|
|
reverse={true}
|
|||
|
|
>
|
|||
|
|
{mainContent}
|
|||
|
|
{renderRightPanel()}
|
|||
|
|
</Splitter>
|
|||
|
|
) : (
|
|||
|
|
mainContent
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default CodeLayout
|