feat: simplify the console

Simply the Console component by removing the JSONView component.
- Remove JSONView component
- Remove unused Header component
- Remove unused types

Author: abolkog

eslint.config.mjs

@@ -38,6 +38,7 @@ export default [
       'react/jsx-uses-react': 'error',
       'react/jsx-uses-vars': 'error',
       'react/prop-types': 'off',
+      '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
     },
   },
 ];

package-lock.json

@@ -44,7 +44,6 @@
     "@headlessui/react": "^2.2.2",
     "@heroicons/react": "^2.2.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@uiw/react-json-view": "^2.0.0-alpha.30",
     "axios": "^1.7.9",
     "date-fns": "^4.1.0",
     "eslint-plugin-react": "^7.37.2",

package.json

@@ -31,9 +31,7 @@ const App: React.FC = () => {
           <Editor />
         </div>
 
-        <div className="bg-white text-black overflow-auto">
-          <Console />
-        </div>
+        <Console />
       </Split>
     </div>
   );

src/components/App/App.tsx

@@ -17,15 +17,15 @@ const CodeEditor: React.FC = () => {
       value: '',
       language: 'typescript',
       fontSize: 20,
-      theme: state.theme,
+      theme: 'vs-dark',
       minimap: {
         enabled: false,
       },
     };
 
     const editorInstance = monaco.editor.create(
       editorRef.current!,
-      editorConfig
+      editorConfig,
     );
 
     monaco.editor.setModelLanguage(editorInstance.getModel()!, 'typescript');
@@ -69,10 +69,6 @@ const CodeEditor: React.FC = () => {
     return () => editor?.dispose();
   }, [editorRef.current]);
 
-  useEffect(() => {
-    editor?.updateOptions({ theme: state.theme });
-  }, [state.theme]);
-
   useEffect(() => {
     editor?.setValue(state.codeSample);
   }, [state.codeSample]);

src/components/CodeEditor/CodeEditor.tsx

@@ -20,7 +20,7 @@ describe('<Console />', () => {
     render(
       <AppContext.Provider value={{ state, dispatch }}>
         <Console />
-      </AppContext.Provider>
+      </AppContext.Provider>,
     );
 
     const errorDiv = screen.getByTestId('console-error');
@@ -34,12 +34,12 @@ describe('<Console />', () => {
     render(
       <AppContext.Provider value={{ state, dispatch }}>
         <Console />
-      </AppContext.Provider>
+      </AppContext.Provider>,
     );
 
     expect(screen.queryByTestId('console-error')).not.toBeInTheDocument();
     expect(screen.getByTestId('console-result').children.length).toEqual(
-      result.length
+      result.length,
     );
   });
 
@@ -49,14 +49,33 @@ describe('<Console />', () => {
     render(
       <AppContext.Provider value={{ state, dispatch }}>
         <Console />
-      </AppContext.Provider>
+      </AppContext.Provider>,
     );
 
     expect(screen.getByTestId('console-result-item-0').textContent).toEqual(
-      JSON.stringify(result[0])
+      JSON.stringify(result[0], null, 0),
     );
     expect(screen.getByTestId('console-result-item-1').textContent).toEqual(
-      result[1]
+      JSON.stringify(result[1], null, 0),
+    );
+  });
+
+  it('add indentation when result is large', () => {
+    const largeObj = {
+      a: 'This is a long string to make the object large enough for pretty print.',
+      b: Array(10).fill('more data'),
+      c: { nested: true, arr: [1, 2, 3, 4, 5] },
+    };
+    state.result = [largeObj];
+    render(
+      <AppContext.Provider value={{ state, dispatch }}>
+        <Console />
+      </AppContext.Provider>,
+    );
+
+    // The component should pretty-print with 2 spaces for large objects
+    expect(screen.getByTestId('console-result-item-0').textContent).toEqual(
+      JSON.stringify(largeObj, null, 2),
     );
   });
 });

src/components/Console/Console.spec.tsx src/components/Console/Console.test.tsxsrc/components/Console/Console.spec.tsx renamed to src/components/Console/Console.test.tsx

@@ -1,41 +1,48 @@
 import { useContext } from 'react';
-import _ from 'lodash';
 import { AppContext } from 'context/AppContext';
 
 const Console: React.FC = () => {
   const { state } = useContext(AppContext);
-  const { result, error, theme } = state;
-  const extraClass = theme === 'vs-light' ? 'console-light' : '';
+  const { result, error } = state;
 
   const createKey = (index: number) => {
     return `key${index}`;
   };
 
-  if (error) {
+  const renderError = () => {
     return (
-      <div className="console">
-        <div data-testid="console-error" className="error">
-          {error}
-        </div>
+      <div data-testid="console-error" className="font-bold text-red-500">
+        {error}
       </div>
     );
-  }
+  };
+
+  const renderResult = () => {
+    return result.map((item, index) => {
+      const key = createKey(index);
+      const isObject = typeof item === 'object' && item !== null;
+      const str = JSON.stringify(item);
+      const space = isObject && str.length > 60 ? 2 : 0;
+
+      return (
+        <div key={key} className="py-1.5">
+          <pre>
+            <span className="mr-2 text-[#8be9fd]">&#8250;</span>
+            <span data-testid={`console-result-item-${index}`}>
+              {JSON.stringify(item, null, space)}
+            </span>
+          </pre>
+        </div>
+      );
+    });
+  };
 
   return (
-    <div data-testid="console-result" className={`console ${extraClass}`}>
-      {result.map((item, index) => {
-        const consoleItem = !_.isString(item) ? JSON.stringify(item) : item;
-        return (
-          <div key={createKey(index)}>
-            <pre>
-              <span style={{ marginRight: 5 }}>&#8250;</span>
-              <span data-testid={`console-result-item-${index}`}>
-                {consoleItem}
-              </span>
-            </pre>
-          </div>
-        );
-      })}
+    <div
+      data-testid="console-result"
+      className="bg-[#282a36] text-[#f8f8f2] font-mono overflow-x-auto p-4"
+    >
+      {error ? renderError() : renderResult()}
     </div>
   );
 };