updated codeeditor

packages/ui/components/CodeEditor.tsx

@@ -1,53 +1,37 @@
+// CodeEditor.tsx
 import React, { useState, useEffect } from 'react';
 import debounce from 'lodash/debounce';
 
-
-interface CodeEditorProps {
-  schema: string;
-  onSchemaChange: (newSchema: string) => void;
-}
-
-export const CodeEditor: React.FC<CodeEditorProps> = ({ schema, onSchemaChange }) => {
-  const [value, setValue] = useState(schema);
-  const [error, setError] = useState('');
-
-  // Update local state when the incoming schema changes
-  useEffect(() => {
-    setValue(schema);
-  }, [schema]);
-
-  // Debounced change handler to limit the number of updates
-  const handleChange = debounce((newValue: string) => {
-    try {
-      JSON.parse(newValue); // Will throw an error if JSON is invalid
-      setError('');
-      onSchemaChange(newValue);
-    } catch (e) {
-      if (e instanceof Error) {
-        setError(e.message);
-      }
-    }
-  }, 250);
-
-  // Handle text area change event
-  const handleTextAreaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const newValue = event.target.value;
-    setValue(newValue);
-    handleChange(newValue);
-  };
-
-  return (
-    <div className="border border-gray-500 rounded p-4">
-      <h2>Code Editor</h2>
-      {error && <p className="text-red-500">Error: {error}</p>}
-      <textarea
-        className="w-full h-full rounded border border-gray-300"
-        placeholder="Enter your JSON schema here"
-        value={value}
-        onChange={handleTextAreaChange}
-      />
-    </div>
-  );
+export const CodeEditor = ({ schema, onSchemaChange }) => {
+    const [value, setValue] = useState(schema);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        setValue(schema);
+    }, [schema]);
+
+    const handleChange = debounce((newValue) => {
+        try {
+            JSON.parse(newValue);
+            setError('');
+            onSchemaChange(newValue);
+        } catch (e) {
+            if (e instanceof Error) {
+                setError(e.message);
+            }
+        }
+    }, 250);
+
+    return (
+        <div className="code-editor">
+            <h2>Code Editor</h2>
+            {error && <p>Error: {error}</p>}
+            <textarea
+                value={value}
+                onChange={(e) => handleChange(e.target.value)}
+            />
+        </div>
+    );
 };
 
-export default CodeEditor;
+export default CodeEditor;

packages/ui/components/EditorSwitch.tsx

@@ -1,34 +1,34 @@
-import React from 'react'
-import * as Switch from '@radix-ui/react-switch'
-import { EyeIcon, CodeBracketIcon } from '../components/icons'
-import classNames from 'classnames'
+// import React from 'react'
+// import * as Switch from '@radix-ui/react-switch'
+// import { EyeIcon, CodeBracketIcon } from '../components/icons'
+// import classNames from 'classnames'
 
-// Define styles as constants outside the component to avoid recreating these during each render
-const transitionStyle = 'transition duration-200 ease-in-out'
-const switchStyle = 'relative bg-gray-800 flex h-[35px] w-[62px] cursor-pointer rounded'
-const switchThumbStyle =
-  'pointer-events-none absolute h-[25px] inline-block w-[25px] transform rounded bg-primary transition duration-200 ease-in-out'
-const switchIconsStyle = 'flex flex-grow justify-between content-center z-10 m-[4px]'
+// // Define styles as constants outside the component to avoid recreating these during each render
+// const transitionStyle = 'transition duration-200 ease-in-out'
+// const switchStyle = 'relative bg-gray-800 flex h-[35px] w-[62px] cursor-pointer rounded'
+// const switchThumbStyle =
+//   'pointer-events-none absolute h-[25px] inline-block w-[25px] transform rounded bg-primary transition duration-200 ease-in-out'
+// const switchIconsStyle = 'flex flex-grow justify-between content-center z-10 m-[4px]'
 
-export interface EditorSwitchProps {
-  isCodeEditor?: boolean
-  onSwitchChange?: (value: boolean) => void
-}
+// export interface EditorSwitchProps {
+//   isCodeEditor?: boolean
+//   onSwitchChange?: (value: boolean) => void
+// }
 
-export const EditorSwitch: React.FC<EditorSwitchProps> = ({ isCodeEditor = true, onSwitchChange }) => {
-  const visualIconStyle = classNames(transitionStyle, isCodeEditor ? 'stroke-gray-400' : 'stroke-white')
-  const codeIconStyle = classNames(transitionStyle, isCodeEditor ? 'stroke-white' : 'stroke-gray-400')
-  const thumbStyle = classNames(switchThumbStyle, isCodeEditor ? 'translate-x-7' : 'translate-x-0')
+// export const EditorSwitch: React.FC<EditorSwitchProps> = ({ isCodeEditor = true, onSwitchChange }) => {
+//   const visualIconStyle = classNames(transitionStyle, isCodeEditor ? 'stroke-gray-400' : 'stroke-white')
+//   const codeIconStyle = classNames(transitionStyle, isCodeEditor ? 'stroke-white' : 'stroke-gray-400')
+//   const thumbStyle = classNames(switchThumbStyle, isCodeEditor ? 'translate-x-7' : 'translate-x-0')
 
-  return (
-    <Switch.Root checked={isCodeEditor} onCheckedChange={onSwitchChange} className={switchStyle} id='editor-switch'>
-      <div className='absolute inset-[5px] flex flex-grow'>
-        <div className={switchIconsStyle}>
-          <EyeIcon className={visualIconStyle} />
-          <CodeBracketIcon className={codeIconStyle} />
-        </div>
-        <Switch.Thumb aria-hidden='true' className={thumbStyle} />
-      </div>
-    </Switch.Root>
-  )
-}
+//   return (
+//     <Switch.Root checked={isCodeEditor} onCheckedChange={onSwitchChange} className={switchStyle} id='editor-switch'>
+//       <div className='absolute inset-[5px] flex flex-grow'>
+//         <div className={switchIconsStyle}>
+//           <EyeIcon className={visualIconStyle} />
+//           <CodeBracketIcon className={codeIconStyle} />
+//         </div>
+//         <Switch.Thumb aria-hidden='true' className={thumbStyle} />
+//       </div>
+//     </Switch.Root>
+//   )
+// }