dev Tab

Author: johannesloetzsch

packages/config/package.json

@@ -10,14 +10,11 @@
     "build": "tsup index.ts --format esm --dts",
     "dev": "npm run build -- --watch"
   },
-  "peerDependencies": {
-  },
   "devDependencies": {
+    "@types/node": "^20.5.7",
     "eslint": "^8.48.0",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
     "typescript": "^5.2.2"
-  },
-  "dependencies": {
   }
 }

packages/example/features/app/Debug.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useAppSelector, selectData, selectEditorState, useAppDispatch, setRowData } from 'state';
+import { selectJsonSchema, selectUiSchema } from 'project-state';
+
+export function Print({json={}}: {json: any}) {
+  const key = Object.keys(json).length === 1 && Object.keys(json)[0]
+  const data = !key ? json : Object.values(json)[0];
+
+  const indentation = '  ';
+  return <>
+    <h4>{key}</h4>
+    <p>
+      { JSON.stringify(data, undefined, indentation).split('\n').map(
+          line => <>{ line.split(indentation).map( token => <span>{token} &nbsp; </span> ) }<br/></>
+        )
+      }
+    </p>
+  </>
+}
+
+export function Debug() {
+  const schema = useAppSelector(selectJsonSchema);
+  const uiSchema = useAppSelector(selectUiSchema);
+  const tableData = useAppSelector(selectData);
+
+  return <div>
+    <Print json={{schema}}/>
+    <Print json={{uiSchema}}/>
+    <Print json={{tableData}}/>
+  </div>
+}

packages/example/features/app/Tabs.tsx

@@ -1,4 +1,5 @@
 import { Timeline } from 'edit-timeline';
+import { Debug } from './Debug';
 
 import PlaceIcon from '@mui/icons-material/Place';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
@@ -21,5 +22,5 @@ export const tabs = [
   {icon: <ViewTimelineIcon/>, label: "Gantt", content: notYetImplemented},
   {icon: <HubIcon/>, label: "Network", content: notYetImplemented},
   {icon: <BarChartIcon/>, label: "Chart", content: notYetImplemented},
-  config.developerMode && {icon: <LogoDevIcon/>, label: "Dev", content: notYetImplemented}
+  config.developerMode && {icon: <LogoDevIcon/>, label: "Dev", content: <Debug/>}
 ].filter(t => t);

packages/example/package.json

@@ -26,6 +26,7 @@
     "secured-react-redux-yjs": "workspace:*",
     "security-state": "workspace:*",
     "state": "workspace:*",
+    "project-state": "workspace:*",
     "style": "workspace:*"
   },
   "devDependencies": {