add theme

reaviz · Apr 16, 2024 · dfb4b21 · dfb4b21
1 parent bfbf8ab
commit dfb4b21
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 28 deletions.
diff --git a/src/layout/Tree/JsonTree/JsonTreeNode.tsx b/src/layout/Tree/JsonTree/JsonTreeNode.tsx
@@ -1,49 +1,81 @@
 import React, { FC, useCallback } from 'react';
 import { TreeNode } from '../TreeNode';
 import { JsonTreeData } from './utils';
+import { useComponentTheme } from '../../../utils/Theme/hooks';
+import { JsonTreeTheme } from './JsonTreeTheme';
+import { twMerge } from 'tailwind-merge';
 
 export interface JsonTreeNodeProps {
+  /**
+   * The data to be rendered as a JSON tree.
+   */
   data?: JsonTreeData;
+
+  /**
+   * The CSS class name to be applied to the JSON tree node.
+   */
   className?: string;
+
+  /**
+   * The depth of the JSON tree node. This is typically used for indentation purposes.
+   */
   depth?: number;
+
+  /**
+   * The depth at which the JSON tree nodes should be expanded by default.
+   */
   expandDepth?: number;
+
+  /**
+   * Theme for the Json Tree
+   */
+  theme?: JsonTreeTheme;
 }
 
 export const JsonTreeNode: FC<JsonTreeNodeProps> = ({
   depth,
   data,
-  expandDepth
+  expandDepth,
+  className,
+  theme: customTheme
 }) => {
+  const theme = useComponentTheme('jsonTree', customTheme);
   const type = data.type;
 
   const renderExpandableNode = useCallback(() => {
     const label = type === 'array' ? 'items' : 'keys';
+    const symbol = type === 'array' ? '[]' : '{}';
     return (
-      <span>
-        <span className="font-mono opacity-70">{data.label}</span>
-        <span>{` (${data.data.length.toLocaleString()} ${label})`}</span>
-      </span>
+      <>
+        <span className={twMerge(theme.node.label)}>{data.label}</span>
+        <span className={twMerge(theme.node.symbol)}>{symbol}</span>
+        <span
+          className={twMerge(theme.node.count)}
+        >{`(${data.data.length.toLocaleString()} ${label})`}</span>
+      </>
     );
   }, [data]);
 
   const renderPrimativeNode = useCallback(() => {
     return (
-      <span>
-        <span className="font-mono opacity-70">{data.label}</span>
-        <span>{`: ${data.data}`}</span>
-      </span>
+      <>
+        <span className={twMerge(theme.node.label)}>{data.label}</span>
+        <span className={twMerge(theme.node.delimiter)}>:</span>
+        <span className={twMerge(theme.node.value)}>{`${data.data}`}</span>
+      </>
     );
   }, [data]);
 
   return (
     <TreeNode
+      className={className}
       expanded={depth < expandDepth}
       label={
-        <span>
+        <>
           {type === 'array' || type === 'object'
             ? renderExpandableNode()
             : renderPrimativeNode()}
-        </span>
+        </>
       }
     >
       {(data.type === 'array' || data.type === 'object') && (

diff --git a/src/layout/Tree/JsonTree/JsonTreeTheme.ts b/src/layout/Tree/JsonTree/JsonTreeTheme.ts
@@ -2,14 +2,18 @@ export interface JsonTreeTheme {
   node: {
     label: string;
     value: string;
+    delimiter: string;
+    symbol: string;
     count: string;
   };
 }
 
-const baseTheme: JsonTreeTheme = {
+export const jsonTreeTheme: JsonTreeTheme = {
   node: {
-    label: 'font-mono opacity-70',
+    label: 'font-mono text-anakiwa',
+    delimiter: 'pr-1',
+    symbol: 'px-1 opacity-50 font-mono',
     value: '',
-    count: ''
+    count: 'opacity-50'
   }
 };
diff --git a/src/layout/Tree/TreeNode.tsx b/src/layout/Tree/TreeNode.tsx
@@ -5,7 +5,8 @@ import React, {
   useState,
   useEffect,
   useCallback,
-  useContext
+  useContext,
+  PropsWithChildren
 } from 'react';
 import { Button } from '../../elements/Button';
 import { Collapse } from '../Collapse';
@@ -14,7 +15,7 @@ import { twMerge } from 'tailwind-merge';
 import { TreeTheme } from './TreeTheme';
 import { useComponentTheme } from '../../utils';
 
-export interface TreeNodeProps {
+export interface TreeNodeProps extends PropsWithChildren {
   /**
    * Label to display for the node
    */
@@ -25,11 +26,6 @@ export interface TreeNodeProps {
    */
   className?: string;
 
-  /**
-   * Children to render inside the node
-   */
-  children?: any;
-
   /**
    * Whether the node is expanded or not
    */
@@ -40,6 +36,11 @@ export interface TreeNodeProps {
    */
   disabled?: boolean;
 
+  /**
+   * Theme for the Tree
+   */
+  theme?: TreeTheme;
+
   /**
    * Event fired when the node is expanded
    */
@@ -49,11 +50,6 @@ export interface TreeNodeProps {
    * Event fired when the node is collapsed
    */
   onCollapse?: () => void;
-
-  /**
-   * Theme for the Tree
-   */
-  theme?: TreeTheme;
 }
 
 export const TreeNode: FC<Partial<TreeNodeProps>> = ({

diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts
@@ -109,7 +109,9 @@ import {
   legacyCollapseTheme,
   legacyTreeTheme,
   legacyTabsTheme,
-  legacyDividerTheme
+  legacyDividerTheme,
+  JsonTreeTheme,
+  jsonTreeTheme
 } from '../../../layout';
 
 import {
@@ -175,6 +177,7 @@ export interface ReablocksTheme {
     toggle: ToggleTheme;
     tooltip: TooltipTheme;
     tree: TreeTheme;
+    jsonTree: JsonTreeTheme;
     popover: PopoverTheme;
     pager: PagerTheme;
     tabs: TabsTheme;
@@ -222,7 +225,8 @@ export const theme: ReablocksTheme = {
     tree: treeTheme,
     popover: popoverTheme,
     pager: pagerTheme,
-    tabs: tabsTheme
+    tabs: tabsTheme,
+    jsonTree: jsonTreeTheme
   }
 };