Merge pull request #712 from code0-tech/feat/#711

JSONViewer support for primitive values

Author: nicosammito

src/components/json-view/JsonView.stories.tsx

@@ -47,7 +47,7 @@ export const Collapsed = () => {
     }
 
     return <Card color={"secondary"} w={"500px"}>
-        <JsonView value={value} collapsed={1}/>
+        <JsonView value={value} collapsed={2}/>
     </Card>
 }
 
@@ -67,3 +67,13 @@ export const WithDataTypes = () => {
         <JsonView value={value} displayDataTypes displayObjectSize/>
     </Card>
 }
+
+export const Primitive = () => {
+
+    const value = "hello"
+
+    return <Card color={"secondary"} w={"500px"}>
+        {/**@ts-ignore**/}
+        <JsonView value={value} displayDataTypes displayObjectSize/>
+    </Card>
+}

src/components/json-view/JsonView.tsx

@@ -4,6 +4,7 @@ import {IconCheck, IconChevronRight, IconCopy} from "@tabler/icons-react";
 import {AnimatePresence, motion} from "motion/react";
 import {Component, hashToColor, mergeComponentProps} from "../../utils";
 import "./JsonView.style.scss";
+import {Text} from "../text/Text";
 
 export interface JsonViewProps<T extends object = object> extends Omit<Component<HTMLDivElement>, 'value'> {
     value?: T
@@ -63,9 +64,11 @@ export const JsonView = <T extends object = object>(props: JsonViewProps<T>) =>
 
     const merged = mergeComponentProps("json-view", rest)
 
-    const safeValue = (value === null || value === undefined || typeof value !== 'object')
-        ? [value] as unknown as T
-        : value
+    if ((value === null || value === undefined || typeof value !== 'object')) {
+        return <Text c={hashToColor("Text")}>
+            {String(value)}
+        </Text>
+    }
 
     return (
         <ReactJsonView
@@ -74,7 +77,7 @@ export const JsonView = <T extends object = object>(props: JsonViewProps<T>) =>
             enableClipboard={enableClipboard}
             indentWidth={indentWidth}
             {...merged}
-            value={safeValue}
+            value={value}
             style={{...JSON_VIEW_THEME, ...(merged.style ?? {})}}
         >
                 <ReactJsonView.Arrow