Extract the JSON visualizer component in twenty-ui (#10937)

- Move the JsonTree component and the other components to twenty-ui - Rely on a React Context to provide translations ## Future work It would be good to migrate the `createRequiredContext` function to `twenty-ui`. I didn't want to migrate it in this PR but would have liked to use it.
2025-03-17 16:00:06 +01:00
parent 428499e222
commit 093d6c0a1a
22 changed files with 189 additions and 89 deletions
@@ -0,0 +1,93 @@
+import { isBoolean, isNull, isNumber, isString } from '@sniptt/guards';
+import {
+  IconCheckbox,
+  IconCircleOff,
+  IconNumber9,
+  IconTypography,
+} from '@ui/display';
+import { JsonArrayNode } from '@ui/json-visualizer/components/JsonArrayNode';
+import { JsonObjectNode } from '@ui/json-visualizer/components/JsonObjectNode';
+import { JsonValueNode } from '@ui/json-visualizer/components/JsonValueNode';
+import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow';
+import { isArray } from '@ui/json-visualizer/utils/isArray';
+import { JsonValue } from 'type-fest';
+
+export const JsonNode = ({
+  label,
+  value,
+  depth,
+  keyPath,
+}: {
+  label?: string;
+  value: JsonValue;
+  depth: number;
+  keyPath: string;
+}) => {
+  const { shouldHighlightNode } = useJsonTreeContextOrThrow();
+
+  const isHighlighted = shouldHighlightNode?.(keyPath) ?? false;
+
+  if (isNull(value)) {
+    return (
+      <JsonValueNode
+        label={label}
+        valueAsString="[null]"
+        Icon={IconCircleOff}
+        isHighlighted={isHighlighted}
+      />
+    );
+  }
+
+  if (isString(value)) {
+    return (
+      <JsonValueNode
+        label={label}
+        valueAsString={value}
+        Icon={IconTypography}
+        isHighlighted={isHighlighted}
+      />
+    );
+  }
+
+  if (isNumber(value)) {
+    return (
+      <JsonValueNode
+        label={label}
+        valueAsString={String(value)}
+        Icon={IconNumber9}
+        isHighlighted={isHighlighted}
+      />
+    );
+  }
+
+  if (isBoolean(value)) {
+    return (
+      <JsonValueNode
+        label={label}
+        valueAsString={String(value)}
+        Icon={IconCheckbox}
+        isHighlighted={isHighlighted}
+      />
+    );
+  }
+
+  if (isArray(value)) {
+    return (
+      <JsonArrayNode
+        label={label}
+        value={value}
+        depth={depth}
+        keyPath={keyPath}
+      />
+    );
+  }
+
+  return (
+    <JsonObjectNode
+      label={label}
+      value={value}
+      depth={depth}
+      keyPath={keyPath}
+    />
+  );
+};