fix: Enhancement of Visual Json Schema Editor

packages/ui/components/VisualEditor.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import SchemaObject from './VisualEditor/SchemaObject';
 import _ from 'lodash';
+import { getColorForType } from './VisualEditor/SchemaProperty';
 
 interface VisualEditorProps {
     schema: string;
@@ -15,14 +16,7 @@ interface SchemaObjectInterface {
 }
 
 export const VisualEditor: React.FC<VisualEditorProps> = ({ schema, onSchemaChange }) => {
-  const selectStyle = {
-    backgroundColor: '#0F172A',
-    color: 'white',
-    borderRadius: '3px',
-    fontSize: '12px',
-    fontFamily: 'Inter, sans-serif'
-  };
-
+
   const [schemaObject, setSchemaObject] = useState<SchemaObjectInterface>({});
 
   useEffect(() => {
@@ -43,6 +37,14 @@ export const VisualEditor: React.FC<VisualEditorProps> = ({ schema, onSchemaChan
     onSchemaChange(newSchemaString);
   };
 
+  const selectStyle = {
+    backgroundColor: '#0F172A',
+    color: getColorForType(schemaObject.type || 'white', schemaObject.items?.type || 'red'),
+    borderRadius: '3px',
+    fontSize: '12px',
+    fontFamily: 'Inter, sans-serif'
+  };
+
   const renderRootTypeSelector = () => (
     <div>
       <select

packages/ui/components/VisualEditor/PropertyControls.tsx

@@ -10,17 +10,17 @@ interface PropertyControlsProps {
 const PropertyControls: React.FC<PropertyControlsProps> = ({ onAdd, schemaPath, level }) => {
   const inputAndSelectStyle = {
     backgroundColor: '#0F172A',
-    color: 'white',
     borderRadius: '3px',
     padding: '2px',
     fontSize: '14px',
-    fontFamily: 'Inter, Helvetica'
+    fontFamily: 'Inter, Helvetica',
   };
 
   const [key, setKey] = useState('');
   const [type, setType] = useState('');
   const [error, setError] = useState('');
   const [itemType, setItemType] = useState('');
+  const [showInputs, setShowInputs] = useState(false);
 
   const handleAddProperty = () => {
     if (_.isEmpty(key) || _.isEmpty(type)) {
@@ -31,58 +31,96 @@ const PropertyControls: React.FC<PropertyControlsProps> = ({ onAdd, schemaPath,
     const fullPath = schemaPath ? `${schemaPath}.properties.${key}` : `properties.${key}`;
     console.log('Full Full Path :)', fullPath);
     console.log(`Adding new property at: ${fullPath}`);
-
+    
     onAdd(fullPath, {
       type, 
       ...(type === 'object' && { properties: {} }), 
-      ...(type === 'array' && { items: { type: itemType } }) 
+      ...(type === 'array' && { 
+        items: (itemType !== 'object')
+          ? { type: itemType }
+          : { 
+            type: 'object',
+            properties: {},
+           }
+       }) 
     } as any); 
 
     setKey('');
     setType('');
     setItemType('');
     setError('');
+    setShowInputs(false);
+  };
+
+  const handleCancel = () => {
+    setKey('');
+    setType('');
+    setItemType('');
+    setError('');
+    setShowInputs(false);
   };
 
   return (
-    <div style={{
-      marginLeft: `${level === 0 ? 20 : level * 20}px`,
-      color: '#CBD5E1',
-      fontFamily: 'Inter, sans-serif',
-      borderLeft: '1px solid grey',
-      paddingLeft: '10px',
-      marginTop: '-1px',
-    }}>
-      <div className="flex gap-[6px] items-center mt-[6px] mb-[6px]">
-        <input
-          type="text"
-          value={key}
-          onChange={(e) => setKey(e.target.value)}
-          placeholder="Property name"
-          style={inputAndSelectStyle}
+    <div className="">
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: `${level === 0 ? 20 : level * 20}px`,
+        color: '#CBD5E1',
+        fontFamily: 'Inter, sans-serif',
+        borderLeft: '1px solid grey',
+        marginTop: '-1px',
+      }}>
+        <div
+          style={{
+            borderTop: '1px solid grey',
+            width: `${level === 0 ? 20 : level * 20}px`,
+          }}
         />
-        <select value={type} onChange={(e) => setType(e.target.value)} style={inputAndSelectStyle}>
-          <option value="">Select type</option>
-          <option value="string">String</option>
-          <option value="number">Number</option>
-          <option value="boolean">Boolean</option>
-          <option value="object">Object</option>
-          <option value="array">Array</option>
-        </select>
-        {type === 'array' && (
-          <select value={itemType} onChange={(e) => setItemType(e.target.value)} style={inputAndSelectStyle}>
-            <option value="">Select item type</option>
+          {!showInputs && (
+              <button onClick={() => setShowInputs(true)} className='text-[#808080] px-2 py-2 rounded-md flex items-center gap-2 font-inter text-sm'>
+              <div className="text-[#808080] border-2 border-[#808080] h-5 w-5 rounded-full flex items-center justify-center">
+              <span>&#43;</span>
+              </div>
+              Add Property
+              </button>
+          )}
+          {showInputs && (
+            <div className='flex gap-[6px] items-center mt-[6px] mb-[6px]'>
+            <input
+            type="text"
+            value={key}
+            onChange={(e) => setKey(e.target.value)}
+            placeholder="Property name"
+            style={inputAndSelectStyle}
+          />
+          <select value={type} onChange={(e) => setType(e.target.value)} style={inputAndSelectStyle}>
+            <option value="">Select type</option>
             <option value="string">String</option>
             <option value="number">Number</option>
             <option value="boolean">Boolean</option>
             <option value="object">Object</option>
+            <option value="array">Array</option>
           </select>
+          {type === 'array' && (
+            <select value={itemType} onChange={(e) => setItemType(e.target.value)} style={inputAndSelectStyle}>
+              <option value="">Select item type</option>
+              <option value="string">String</option>
+              <option value="number">Number</option>
+              <option value="boolean">Boolean</option>
+              <option value="object">Object</option>
+            </select>
+          )}
+          <button onClick={handleAddProperty} className='inline-flex items-center justify-center px-2 py-1 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500'>Add</button>
+          <button onClick={handleCancel} className="inline-flex items-center justify-center px-2 py-1 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-500 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">Cancel</button>
+        </div>
         )}
-        <button onClick={handleAddProperty}>Add Property</button>
       </div>
-      {error && <p style={{ color: '#DB2777' }}>{error}</p>}
+      <div className="">
+          {error && <p style={{ color: '#DB2777' }}>{error}</p>}
+      </div>
     </div>
-  );
+  );  
 };
 
 export default PropertyControls;

packages/ui/components/VisualEditor/SchemaObject.tsx

@@ -23,26 +23,68 @@ const SchemaObject: React.FC<SchemaObjectProps> = ({
     const normalizedPath = fullPath.startsWith('.') ? fullPath.slice(1) : fullPath;
     console.log('Normalised path',normalizedPath);
     _.set(updatedSchema, normalizedPath, propertySchema);
-
     console.log(`Property added at ${normalizedPath}`, updatedSchema);
     onSchemaChange(updatedSchema);
   };
 
   const handleRemoveProperty = (propertyPath: string) => {
-    const currentSchema = _.cloneDeep(schema);
-    _.unset(currentSchema, propertyPath);
-    console.log(`Removed property at ${propertyPath}`);
-    onSchemaChange(currentSchema);
+    const updatedSchema = _.cloneDeep(schema);
+    const normalizedPath = propertyPath.startsWith('.') ? propertyPath.slice(1) : propertyPath;
+    console.log("normalizedPath: ",normalizedPath)
+    console.log("propertyPath: ",propertyPath)
+      _.unset(updatedSchema, normalizedPath);
+    onSchemaChange(updatedSchema);
   };
 
-  const handleTypeChange = (propertyPath: string, newSchema: any) => { // Added types to resolve TS7006
-    console.log(`handleTypeChange called with path: ${propertyPath}, newType: ${newSchema}`);
+  const handleTypeChange = (propertyPath: string, newSchema: any, newType: any) => { // Added types to resolve TS7006
+    console.log(`handleTypeChange called with path: ${propertyPath}, newType: ${newType}`);
+    const normalizedPath = propertyPath.startsWith('.') ? propertyPath.slice(1) : propertyPath;
+    const typePath = `${normalizedPath}.type`;
+    const newTypeValue = newType.type;
     const currentSchema = _.cloneDeep(schema);
-    _.set(currentSchema, propertyPath, newSchema);
+    _.set(currentSchema, typePath , newTypeValue);
     console.log(`Type changed at ${propertyPath}`, newSchema);
     onSchemaChange(currentSchema);
   };
 
+  const handleToggleRequired = (path:string, name: string) => {
+    const updatedSchema = _.cloneDeep(schema);
+    const existingRequired = _.get(updatedSchema, `required`, []);
+    const isRequirePresent = existingRequired.includes(name);
+    console.log("isRequired",isRequirePresent);
+    if(!isRequirePresent) {  
+      const newRequired = _.uniq([...existingRequired, name]);
+      _.set(updatedSchema, `required`, newRequired);
+    } else {
+      const newRequired = existingRequired.filter((item: string) => item !== name);
+      _.set(updatedSchema, `required`, newRequired);
+    }
+
+    onSchemaChange(updatedSchema);
+  }
+
+  const handleToggleNestedRequired = (path: string, name: string) => {
+    const updatedSchema = _.cloneDeep(schema);
+    const normalizedPath = path.startsWith('.') ? path.slice(1) : path;
+    const schemaPath = normalizedPath.split('.properties');
+    console.log("schemaPath",schemaPath)
+    const requiredPath = schemaPath.slice(0, -1).join('.properties') + '.required';
+    console.log("requiredPath",requiredPath)
+
+    const existingRequired = _.get(updatedSchema, requiredPath, []);
+    const isRequirePresent = existingRequired.includes(name);
+
+    if (!isRequirePresent) {
+      const newRequired = _.uniq([...existingRequired, name]);
+      _.set(updatedSchema, requiredPath, newRequired);
+    } else {
+      const newRequired = existingRequired.filter((item: string) => item !== name);
+      _.set(updatedSchema, requiredPath, newRequired);
+    }
+
+    onSchemaChange(updatedSchema);
+  };
+
   return (
     <div style={{ margin: '10px 0' }}>
       {_.map(schema.properties, (propertySchema, propertyName) => (
@@ -51,12 +93,12 @@ const SchemaObject: React.FC<SchemaObjectProps> = ({
           name={propertyName}
           schema={propertySchema}
           onRemove={handleRemoveProperty}
-          onToggleRequired={() => console.log('Toggling required')}
+          onToggleRequired={handleToggleRequired}
           isRequired={_.includes(schema.required, propertyName)}
           onTypeChange={handleTypeChange}
           onAddNestedProperty={handleAddProperty}
           onRemoveNestedProperty={handleRemoveProperty}
-          onToggleNestedRequired={() => console.log('Toggling nested required')}
+          onToggleNestedRequired={handleToggleNestedRequired}
           path={`${path}.properties.${propertyName}`}
           level={level + 1}
         />