Utility Components

/**
 * Renders object property labels with names and values
 * Used for displaying individual properties in object trees
 * @param props - ObjectLabel rendering props
 * @returns React element displaying property name and value
 */
function ObjectLabel(props: ObjectLabelProps): React.ReactElement;

interface ObjectLabelProps {
  /** Property name or key - string for object properties, number for array indices */
  name: string | number | any;
  /** Property value - any JavaScript value */
  data: any;
  /** Whether property is non-enumerable (affects styling - appears dimmed) */
  isNonenumerable?: boolean;
}

import React from "react";
import { ObjectLabel } from "react-inspector";

// Basic property display
function BasicLabelExample() {
  return (
    <div>
      <ObjectLabel name="userName" data="Alice" />
      <ObjectLabel name="age" data={30} />
      <ObjectLabel name="isActive" data={true} />
    </div>
  );
}

// Non-enumerable property (dimmed)
function NonEnumerableExample() {
  return (
    <ObjectLabel 
      name="__proto__" 
      data={Object.prototype} 
      isNonenumerable={true}
    />
  );
}

// Array index
function ArrayIndexExample() {
  return (
    <ObjectLabel name={0} data="first item" />
  );
}

/**
 * Renders root object labels for tree root nodes
 * Displays optional name and object preview
 * @param props - ObjectRootLabel rendering props  
 * @returns React element displaying root label
 */
function ObjectRootLabel(props: ObjectRootLabelProps): React.ReactElement;

interface ObjectRootLabelProps {
  /** Optional name for the root object */
  name?: string;
  /** Root object data */
  data: any;
}

import React from "react";
import { ObjectRootLabel } from "react-inspector";

// Named root object
function NamedRootExample() {
  const userData = { name: "Alice", age: 30 };
  return <ObjectRootLabel name="user" data={userData} />;
}

// Unnamed root object (shows preview only)
function UnnamedRootExample() {
  const config = { apiUrl: "https://api.example.com", timeout: 5000 };
  return <ObjectRootLabel data={config} />;
}

/**
 * Renders compact preview of objects showing type and brief content
 * Used for collapsed nodes and property values
 * @param props - ObjectPreview rendering props
 * @returns React element displaying object preview
 */
function ObjectPreview(props: ObjectPreviewProps): React.ReactElement;

interface ObjectPreviewProps {
  /** Object to generate preview for */
  data: any;
}

// Array preview: (length) [item1, item2, ...]
[1, 2, 3] → "(3) [1, 2, 3]"
["a", "b"] → "(2) ['a', 'b']"

// Object preview: {key1: value1, key2: value2, ...}
{name: "Alice", age: 30} → "{name: 'Alice', age: 30}"

// Constructor name for complex objects:
new Date() → "Date"
/regex/ → "RegExp"
function fn() {} → "Function"

// Primitive values displayed directly:
"string" → "string"
42 → 42
true → true
null → null

import React from "react";
import { ObjectPreview } from "react-inspector";

function PreviewExamples() {
  const complexData = {
    users: ["Alice", "Bob"],
    config: { debug: true },
    timestamp: new Date(),
    pattern: /test/gi
  };
  
  return (
    <div>
      <ObjectPreview data={complexData.users} />
      <ObjectPreview data={complexData.config} />
      <ObjectPreview data={complexData.timestamp} />
      <ObjectPreview data={complexData.pattern} />
    </div>
  );
}

/**
 * Renders values with type-appropriate styling
 * Handles all JavaScript types with proper formatting and colors
 * @param props - ObjectValue rendering props
 * @returns React element displaying formatted value
 */
function ObjectValue(props: ObjectValueProps): React.ReactElement;

interface ObjectValueProps {
  /** Value to render */
  object: any;
  /** Custom styles to apply */
  styles?: React.CSSProperties;
}

// Primitives with type-specific colors:
"string" → "string" (with quotes, string color)
42 → 42 (number color)
true → true (boolean color)
null → null (null color)
undefined → undefined (undefined color)
Symbol('sym') → Symbol(sym) (symbol color)
123n → 123n (bigint with 'n' suffix)

// Complex types:
function fn() {} → "ƒ fn()" (with function prefix)
new Date() → "Mon Jan 01 2024..." (date string)
/regex/gi → "/regex/gi" (regex color)
[1, 2, 3] → "Array(3)" (array with length)
{a: 1} → "Object" (or constructor name)
new Map() → "Map" (constructor name)
Buffer.from('test') → "Buffer[4]" (buffer with length)

import React from "react";
import { ObjectValue } from "react-inspector";

function ValueExamples() {
  return (
    <div>
      <ObjectValue object="Hello World" />
      <ObjectValue object={123} />
      <ObjectValue object={true} />
      <ObjectValue object={null} />
      <ObjectValue object={undefined} />
      <ObjectValue object={Symbol('test')} />
      <ObjectValue object={() => console.log('test')} />
      <ObjectValue object={new Date()} />
      <ObjectValue object={/pattern/gi} />
      <ObjectValue object={[1, 2, 3]} />
    </div>
  );
}

// With custom styling
function StyledValueExample() {
  return (
    <ObjectValue 
      object="Custom styled string"
      styles={{ fontSize: '14px', fontWeight: 'bold' }}
    />
  );
}

/**
 * Renders property names with appropriate styling
 * Supports dimming for non-enumerable properties
 * @param props - ObjectName rendering props
 * @returns React element displaying property name
 */
function ObjectName(props: ObjectNameProps): React.ReactElement;

interface ObjectNameProps {
  /** Property name to display */
  name: string;
  /** Whether to dim the name (for non-enumerable properties) */
  dimmed?: boolean;
  /** Custom styles to apply */
  styles?: React.CSSProperties;
}

import React from "react";
import { ObjectName } from "react-inspector";

function NameExamples() {
  return (
    <div>
      {/* Regular property name */}
      <ObjectName name="userName" />
      
      {/* Dimmed non-enumerable property */}
      <ObjectName name="__proto__" dimmed={true} />
      
      {/* Empty string property name (shows as "") */}
      <ObjectName name="" />
      
      {/* Custom styling */}
      <ObjectName 
        name="customProperty"
        styles={{ color: 'purple', fontStyle: 'italic' }}
      />
    </div>
  );
}

/**
 * Example custom node renderer using utility components
 * @param props - Node renderer props from ObjectInspector
 * @returns Custom rendered node
 */
function customNodeRenderer({ depth, name, data, isNonenumerable }: NodeRendererProps) {
  if (depth === 0) {
    return <ObjectRootLabel name={name} data={data} />;
  }
  
  // Custom rendering for specific types
  if (typeof data === 'function') {
    return (
      <span>
        <ObjectName name={name} dimmed={isNonenumerable} />
        <span>: </span>
        <ObjectValue object={data} />
        <span style={{ color: 'purple' }}> 🔧</span>
      </span>
    );
  }
  
  // Default rendering
  return <ObjectLabel name={name} data={data} isNonenumerable={isNonenumerable} />;
}

import React from "react";
import { 
  ObjectInspector, 
  ObjectLabel, 
  ObjectRootLabel,
  ObjectName,
  ObjectValue,
  ObjectPreview 
} from "react-inspector";

function EnhancedNodeRenderer({ depth, name, data, isNonenumerable }) {
  if (depth === 0) {
    return (
      <div style={{ fontWeight: 'bold', color: 'blue' }}>
        <ObjectRootLabel name={name} data={data} />
      </div>
    );
  }
  
  // Special handling for different data types
  const getIcon = (value: any) => {
    if (typeof value === 'function') return '⚡';
    if (Array.isArray(value)) return '📋';
    if (value instanceof Date) return '📅';
    if (typeof value === 'string') return '📝';
    if (typeof value === 'number') return '🔢';
    return '📦';
  };
  
  return (
    <span>
      <span>{getIcon(data)} </span>
      <ObjectName name={name} dimmed={isNonenumerable} />
      <span>: </span>
      <ObjectValue object={data} />
    </span>
  );
}

function CustomInspectorExample() {
  const data = {
    name: "Alice",
    age: 30,
    hobbies: ["reading", "coding"],
    greet: () => "Hello!",
    birthday: new Date('1994-06-15')
  };
  
  return (
    <ObjectInspector 
      data={data}
      nodeRenderer={EnhancedNodeRenderer}
      expandLevel={1}
    />
  );
}