@alepha/ui 0.18.2 → 0.19.0

package/src/core/json/components/JsonViewer.tsx

@@ -1,31 +1,24 @@
 import {
-  ActionIcon,
-  Flex,
   getTreeExpandedState,
   type MantineSize,
   Text,
   Tree,
   useTree,
 } from "@mantine/core";
+import { type ReactNode, useCallback, useMemo } from "react";
+import { JsonViewerRowNode } from "./JsonViewerRowNode.tsx";
 import {
-  IconCheck,
-  IconChevronDown,
-  IconChevronRight,
-  IconCopy,
-} from "@tabler/icons-react";
-import {
-  type CSSProperties,
-  type ReactNode,
-  useCallback,
-  useMemo,
-  useState,
-} from "react";
+  getValueType,
+  type JsonTreeNode,
+  SIZE_CONFIG,
+  STYLES,
+} from "./JsonViewerShared.ts";
 
 // =============================================================================
-// TYPES
+// PROPS
 // =============================================================================
 
-interface JsonViewerProps {
+export interface JsonViewerProps {
   data: any;
   /**
    * Depth level to expand by default (0 = collapsed, Infinity = all expanded)
@@ -57,312 +50,21 @@ interface JsonViewerProps {
   ) => string | number | undefined;
 }
 
-interface JsonTreeNode {
-  value: string;
-  label: string;
-  children?: JsonTreeNode[];
-  // Custom properties
-  nodeValue: any;
-  nodeKey: string | undefined;
-  path: string[];
-  isArrayItem: boolean;
-  isRoot?: boolean;
-}
-
-// =============================================================================
-// CONSTANTS
-// =============================================================================
-
-const SIZE_CONFIG: Record<MantineSize, { icon: number; levelOffset: number }> =
-  {
-    xs: { icon: 14, levelOffset: 16 },
-    sm: { icon: 16, levelOffset: 20 },
-    md: { icon: 18, levelOffset: 24 },
-    lg: { icon: 20, levelOffset: 28 },
-    xl: { icon: 22, levelOffset: 32 },
-  };
-
-const STYLES = {
-  root: {
-    fontFamily: "var(--mantine-font-family-monospace)",
-  } satisfies CSSProperties,
-  chevron: {
-    flexShrink: 0,
-    color: "var(--mantine-color-dimmed)",
-  } satisfies CSSProperties,
-  key: {
-    color: "var(--mantine-color-cyan-text)",
-    fontWeight: 500,
-  } satisfies CSSProperties,
-  colon: {
-    color: "var(--mantine-color-dimmed)",
-  } satisfies CSSProperties,
-  string: {
-    color: "var(--mantine-color-teal-text)",
-  } satisfies CSSProperties,
-  number: {
-    color: "var(--mantine-color-blue-text)",
-  } satisfies CSSProperties,
-  boolean: {
-    color: "var(--mantine-color-violet-text)",
-  } satisfies CSSProperties,
-  null: {
-    color: "var(--mantine-color-dimmed)",
-    fontStyle: "italic",
-  } satisfies CSSProperties,
-  preview: {
-    color: "var(--mantine-color-dimmed)",
-  } satisfies CSSProperties,
-};
-
-// =============================================================================
-// HELPERS
-// =============================================================================
-
-const getValueType = (val: any): string => {
-  if (val === null) return "null";
-  if (val === undefined) return "undefined";
-  if (Array.isArray(val)) return "array";
-  return typeof val;
-};
-
-// Convert JSON to tree data structure
-function buildTreeNodes(
-  data: any,
-  path: string[] = [],
-  key?: string,
-  isArrayItem = false,
-  maxDepth = 10,
-): JsonTreeNode | null {
-  const currentPath = key !== undefined ? [...path, key] : path;
-  const nodeId = currentPath.length > 0 ? currentPath.join(".") : "root";
-
-  if (currentPath.length > maxDepth) {
-    return {
-      value: nodeId,
-      label: key ?? "",
-      nodeValue: data,
-      nodeKey: key,
-      path: currentPath,
-      isArrayItem,
-    };
-  }
-
-  const type = getValueType(data);
-
-  if (type === "object" || type === "array") {
-    const entries =
-      type === "array"
-        ? (data as any[]).map((v, i) => [String(i), v] as const)
-        : Object.entries(data);
-
-    const children = entries
-      .map(([k, v]) =>
-        buildTreeNodes(v, currentPath, k, type === "array", maxDepth),
-      )
-      .filter((n): n is JsonTreeNode => n !== null);
-
-    return {
-      value: nodeId,
-      label: key ?? "",
-      nodeValue: data,
-      nodeKey: key,
-      path: currentPath,
-      isArrayItem,
-      children: children.length > 0 ? children : undefined,
-    };
-  }
-
-  return {
-    value: nodeId,
-    label: key ?? "",
-    nodeValue: data,
-    nodeKey: key,
-    path: currentPath,
-    isArrayItem,
-  };
-}
-
-// Get all expandable node IDs up to a certain depth
-function getExpandedIds(
-  nodes: JsonTreeNode[],
-  targetDepth: number,
-  currentDepth = 0,
-): string[] {
-  if (currentDepth >= targetDepth) return [];
-  const ids: string[] = [];
-  for (const node of nodes) {
-    if (node.children) {
-      ids.push(node.value);
-      ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));
-    }
-  }
-  return ids;
-}
-
 // =============================================================================
-// COPY BUTTON COMPONENT
+// COMPONENT
 // =============================================================================
 
-const CopyButton = ({
-  value,
-  iconSize,
-}: {
-  value: string;
-  iconSize: number;
-}) => {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      navigator.clipboard.writeText(value);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    },
-    [value],
-  );
-
-  return (
-    <ActionIcon
-      size={iconSize + 4}
-      variant="transparent"
-      c={copied ? "green" : "dimmed"}
-      onClick={handleCopy}
-      className="alepha-json-viewer-copy"
-    >
-      {copied ? <IconCheck size={iconSize} /> : <IconCopy size={iconSize} />}
-    </ActionIcon>
-  );
-};
-
-// =============================================================================
-// ROW NODE COMPONENT
-// =============================================================================
-
-interface RowNodeProps {
-  node: JsonTreeNode;
-  expanded: boolean;
-  hasChildren: boolean;
-  elementProps: any;
-  size: MantineSize;
-  config: { icon: number; levelOffset: number };
-  showQuotes: boolean;
-  showCopyButton: boolean;
-  renderValue: (val: any, key: string | undefined, path: string[]) => ReactNode;
-}
+export const JsonViewer = (props: JsonViewerProps) => {
+  const {
+    data,
+    defaultExpandedDepth = 2,
+    maxDepth = 10,
+    size = "sm",
+    showQuotes = false,
+    showCopyButton = true,
+    formatValue,
+  } = props;
 
-const RowNode = ({
-  node,
-  expanded,
-  hasChildren,
-  elementProps,
-  size,
-  config,
-  showQuotes,
-  showCopyButton,
-  renderValue,
-}: RowNodeProps) => {
-  const { nodeValue, nodeKey, path, isArrayItem, isRoot } = node;
-  const type = getValueType(nodeValue);
-  const isExpandable = type === "object" || type === "array";
-
-  const getPreview = () => {
-    if (!isExpandable) return null;
-    const entries = type === "array" ? nodeValue : Object.keys(nodeValue);
-    const count = entries.length;
-    const label = type === "array" ? "item" : "key";
-
-    // For root node or collapsed nodes, show the count
-    if (!expanded) {
-      return (
-        <Text fs={"italic"} component="span" size={size} style={STYLES.preview}>
-          {count === 0
-            ? type === "array"
-              ? "[]"
-              : "{}"
-            : type === "array"
-              ? `[ ${count} ${count === 1 ? label : `${label}s`} ]`
-              : `{ ${count} ${count === 1 ? label : `${label}s`} }`}
-        </Text>
-      );
-    }
-
-    return null;
-  };
-
-  const getCopyValue = () =>
-    isExpandable ? JSON.stringify(nodeValue, null, 2) : String(nodeValue ?? "");
-
-  return (
-    <Flex
-      gap={6}
-      wrap="nowrap"
-      {...elementProps}
-      className={`alepha-json-viewer-row ${elementProps.className || ""}`}
-    >
-      {hasChildren ? (
-        expanded ? (
-          <IconChevronDown size={config.icon} style={STYLES.chevron} />
-        ) : (
-          <IconChevronRight size={config.icon} style={STYLES.chevron} />
-        )
-      ) : (
-        <span style={{ width: config.icon, flexShrink: 0 }} />
-      )}
-
-      {nodeKey !== undefined && !isArrayItem && (
-        <Text component="span" size={size}>
-          <span style={STYLES.key}>
-            {showQuotes ? `"${nodeKey}"` : nodeKey}
-          </span>
-          <span style={STYLES.colon}>:</span>
-        </Text>
-      )}
-
-      {nodeKey !== undefined && isArrayItem && (
-        <Text component="span" size={size}>
-          <span style={STYLES.key}>{nodeKey}</span>
-          <span style={STYLES.colon}>:</span>
-        </Text>
-      )}
-
-      {hasChildren ? (
-        getPreview()
-      ) : isExpandable ? (
-        type === "array" ? (
-          <Text component="span" size={size} style={STYLES.preview}>
-            []
-          </Text>
-        ) : (
-          <Text component="span" size={size} style={STYLES.preview}>
-            {"{}"}
-          </Text>
-        )
-      ) : (
-        renderValue(nodeValue, nodeKey, path)
-      )}
-
-      {showCopyButton && (
-        <CopyButton value={getCopyValue()} iconSize={config.icon} />
-      )}
-    </Flex>
-  );
-};
-
-// =============================================================================
-// MAIN COMPONENT
-// =============================================================================
-
-export const JsonViewer = ({
-  data,
-  defaultExpandedDepth = 2,
-  maxDepth = 10,
-  size = "sm",
-  showQuotes = false,
-  showCopyButton = true,
-  formatValue,
-}: JsonViewerProps) => {
   const config = SIZE_CONFIG[size] || SIZE_CONFIG.sm;
 
   // Build tree data from JSON with root wrapper
@@ -487,7 +189,7 @@ export const JsonViewer = ({
       elementProps: any;
     }): ReactNode => {
       return (
-        <RowNode
+        <JsonViewerRowNode
           node={node}
           expanded={expanded}
           hasChildren={hasChildren}
@@ -523,4 +225,86 @@ export const JsonViewer = ({
   );
 };
 
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+/**
+ * Convert JSON to tree data structure.
+ */
+const buildTreeNodes = (
+  data: any,
+  path: string[] = [],
+  key?: string,
+  isArrayItem = false,
+  maxDepth = 10,
+): JsonTreeNode | null => {
+  const currentPath = key !== undefined ? [...path, key] : path;
+  const nodeId = currentPath.length > 0 ? currentPath.join(".") : "root";
+
+  if (currentPath.length > maxDepth) {
+    return {
+      value: nodeId,
+      label: key ?? "",
+      nodeValue: data,
+      nodeKey: key,
+      path: currentPath,
+      isArrayItem,
+    };
+  }
+
+  const type = getValueType(data);
+
+  if (type === "object" || type === "array") {
+    const entries =
+      type === "array"
+        ? (data as any[]).map((v, i) => [String(i), v] as const)
+        : Object.entries(data);
+
+    const children = entries
+      .map(([k, v]) =>
+        buildTreeNodes(v, currentPath, k, type === "array", maxDepth),
+      )
+      .filter((n): n is JsonTreeNode => n !== null);
+
+    return {
+      value: nodeId,
+      label: key ?? "",
+      nodeValue: data,
+      nodeKey: key,
+      path: currentPath,
+      isArrayItem,
+      children: children.length > 0 ? children : undefined,
+    };
+  }
+
+  return {
+    value: nodeId,
+    label: key ?? "",
+    nodeValue: data,
+    nodeKey: key,
+    path: currentPath,
+    isArrayItem,
+  };
+};
+
+/**
+ * Get all expandable node IDs up to a certain depth.
+ */
+const getExpandedIds = (
+  nodes: JsonTreeNode[],
+  targetDepth: number,
+  currentDepth = 0,
+): string[] => {
+  if (currentDepth >= targetDepth) return [];
+  const ids: string[] = [];
+  for (const node of nodes) {
+    if (node.children) {
+      ids.push(node.value);
+      ids.push(...getExpandedIds(node.children, targetDepth, currentDepth + 1));
+    }
+  }
+  return ids;
+};
+
 export default JsonViewer;

package/src/core/json/components/JsonViewerCopyButton.tsx

@@ -0,0 +1,46 @@
+import { ActionIcon } from "@mantine/core";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { useCallback, useState } from "react";
+
+// =============================================================================
+// PROPS
+// =============================================================================
+
+export interface JsonViewerCopyButtonProps {
+  value: string;
+  iconSize: number;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export const JsonViewerCopyButton = (props: JsonViewerCopyButtonProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      navigator.clipboard.writeText(props.value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    },
+    [props.value],
+  );
+
+  return (
+    <ActionIcon
+      size={props.iconSize + 4}
+      variant="transparent"
+      c={copied ? "green" : "dimmed"}
+      onClick={handleCopy}
+      className="alepha-json-viewer-copy"
+    >
+      {copied ? (
+        <IconCheck size={props.iconSize} />
+      ) : (
+        <IconCopy size={props.iconSize} />
+      )}
+    </ActionIcon>
+  );
+};

package/src/core/json/components/JsonViewerRowNode.tsx

@@ -0,0 +1,120 @@
+import { Flex, type MantineSize, Text } from "@mantine/core";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+import { JsonViewerCopyButton } from "./JsonViewerCopyButton.tsx";
+import { getValueType, type JsonTreeNode, STYLES } from "./JsonViewerShared.ts";
+
+// =============================================================================
+// PROPS
+// =============================================================================
+
+export interface JsonViewerRowNodeProps {
+  node: JsonTreeNode;
+  expanded: boolean;
+  hasChildren: boolean;
+  elementProps: any;
+  size: MantineSize;
+  config: { icon: number; levelOffset: number };
+  showQuotes: boolean;
+  showCopyButton: boolean;
+  renderValue: (val: any, key: string | undefined, path: string[]) => ReactNode;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export const JsonViewerRowNode = (props: JsonViewerRowNodeProps) => {
+  const { nodeValue, nodeKey, path, isArrayItem } = props.node;
+  const type = getValueType(nodeValue);
+  const isExpandable = type === "object" || type === "array";
+
+  const getPreview = () => {
+    if (!isExpandable) return null;
+    const entries = type === "array" ? nodeValue : Object.keys(nodeValue);
+    const count = entries.length;
+    const label = type === "array" ? "item" : "key";
+
+    if (!props.expanded) {
+      return (
+        <Text
+          fs={"italic"}
+          component="span"
+          size={props.size}
+          style={STYLES.preview}
+        >
+          {count === 0
+            ? type === "array"
+              ? "[]"
+              : "{}"
+            : type === "array"
+              ? `[ ${count} ${count === 1 ? label : `${label}s`} ]`
+              : `{ ${count} ${count === 1 ? label : `${label}s`} }`}
+        </Text>
+      );
+    }
+
+    return null;
+  };
+
+  const getCopyValue = () =>
+    isExpandable ? JSON.stringify(nodeValue, null, 2) : String(nodeValue ?? "");
+
+  return (
+    <Flex
+      gap={6}
+      wrap="nowrap"
+      {...props.elementProps}
+      className={`alepha-json-viewer-row ${props.elementProps.className || ""}`}
+    >
+      {props.hasChildren ? (
+        props.expanded ? (
+          <IconChevronDown size={props.config.icon} style={STYLES.chevron} />
+        ) : (
+          <IconChevronRight size={props.config.icon} style={STYLES.chevron} />
+        )
+      ) : (
+        <span style={{ width: props.config.icon, flexShrink: 0 }} />
+      )}
+
+      {nodeKey !== undefined && !isArrayItem && (
+        <Text component="span" size={props.size}>
+          <span style={STYLES.key}>
+            {props.showQuotes ? `"${nodeKey}"` : nodeKey}
+          </span>
+          <span style={STYLES.colon}>:</span>
+        </Text>
+      )}
+
+      {nodeKey !== undefined && isArrayItem && (
+        <Text component="span" size={props.size}>
+          <span style={STYLES.key}>{nodeKey}</span>
+          <span style={STYLES.colon}>:</span>
+        </Text>
+      )}
+
+      {props.hasChildren ? (
+        getPreview()
+      ) : isExpandable ? (
+        type === "array" ? (
+          <Text component="span" size={props.size} style={STYLES.preview}>
+            []
+          </Text>
+        ) : (
+          <Text component="span" size={props.size} style={STYLES.preview}>
+            {"{}"}
+          </Text>
+        )
+      ) : (
+        props.renderValue(nodeValue, nodeKey, path)
+      )}
+
+      {props.showCopyButton && (
+        <JsonViewerCopyButton
+          value={getCopyValue()}
+          iconSize={props.config.icon}
+        />
+      )}
+    </Flex>
+  );
+};

package/src/core/json/components/JsonViewerShared.ts

@@ -0,0 +1,76 @@
+import type { MantineSize } from "@mantine/core";
+import type { CSSProperties } from "react";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface JsonTreeNode {
+  value: string;
+  label: string;
+  children?: JsonTreeNode[];
+  nodeValue: any;
+  nodeKey: string | undefined;
+  path: string[];
+  isArrayItem: boolean;
+  isRoot?: boolean;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+export const SIZE_CONFIG: Record<
+  MantineSize,
+  { icon: number; levelOffset: number }
+> = {
+  xs: { icon: 14, levelOffset: 16 },
+  sm: { icon: 16, levelOffset: 20 },
+  md: { icon: 18, levelOffset: 24 },
+  lg: { icon: 20, levelOffset: 28 },
+  xl: { icon: 22, levelOffset: 32 },
+};
+
+export const STYLES = {
+  root: {
+    fontFamily: "var(--mantine-font-family-monospace)",
+  } satisfies CSSProperties,
+  chevron: {
+    flexShrink: 0,
+    color: "var(--mantine-color-dimmed)",
+  } satisfies CSSProperties,
+  key: {
+    color: "var(--mantine-color-cyan-text)",
+    fontWeight: 500,
+  } satisfies CSSProperties,
+  colon: {
+    color: "var(--mantine-color-dimmed)",
+  } satisfies CSSProperties,
+  string: {
+    color: "var(--mantine-color-teal-text)",
+  } satisfies CSSProperties,
+  number: {
+    color: "var(--mantine-color-blue-text)",
+  } satisfies CSSProperties,
+  boolean: {
+    color: "var(--mantine-color-violet-text)",
+  } satisfies CSSProperties,
+  null: {
+    color: "var(--mantine-color-dimmed)",
+    fontStyle: "italic",
+  } satisfies CSSProperties,
+  preview: {
+    color: "var(--mantine-color-dimmed)",
+  } satisfies CSSProperties,
+};
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+export const getValueType = (val: any): string => {
+  if (val === null) return "null";
+  if (val === undefined) return "undefined";
+  if (Array.isArray(val)) return "array";
+  return typeof val;
+};