@uiw/react-json-view 0.0.1

package/esm/arrow/TriangleArrow.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["style"];
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TriangleArrow(props) {
+  var {
+      style
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var defaultStyle = _extends({
+    cursor: 'pointer',
+    height: '1em',
+    width: '1em'
+  }, style);
+  return /*#__PURE__*/_jsx("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "var(--w-rjv-arrow-color, currentColor)",
+    style: defaultStyle
+  }, reset, {
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+    })
+  }));
+}

package/esm/arrow/TriangleSolidArrow.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export interface TriangleSolidArrowProps extends React.SVGProps<SVGSVGElement> {
+}
+export declare function TriangleSolidArrow(props: TriangleSolidArrowProps): import("react/jsx-runtime").JSX.Element;

package/esm/arrow/TriangleSolidArrow.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["style"];
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TriangleSolidArrow(props) {
+  var {
+      style
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var defaultStyle = _extends({
+    cursor: 'pointer',
+    height: '1em',
+    width: '1em'
+  }, style);
+  return /*#__PURE__*/_jsx("svg", _extends({
+    viewBox: "0 0 15 15",
+    fill: "var(--w-rjv-arrow-color, currentColor)",
+    style: defaultStyle
+  }, reset, {
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M0 5l6 6 6-6z"
+    })
+  }));
+}

package/esm/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { MetaProps, SemicolonProps, EllipsisProps } from './node';
+import { ValueViewProps } from './value';
+export * from './node';
+export * from './value';
+export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    /** This property contains your input JSON */
+    value?: T;
+    /** Set the indent-width for nested objects @default `15`*/
+    indentWidth?: number;
+    /** When set to `true`, data type labels prefix values @default `true` */
+    displayDataTypes?: boolean;
+    /** When set to `true`, `objects` and `arrays` are labeled with size @default `true` */
+    displayObjectSize?: boolean;
+    /** Define the root node name. @default `undefined` */
+    keyName?: string | number;
+    components?: {
+        braces?: MetaProps['render'];
+        ellipsis?: EllipsisProps['render'];
+        arrow?: JSX.Element;
+        objectKey?: SemicolonProps['render'];
+        value?: ValueViewProps<T>['renderValue'];
+    };
+}
+declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default JsonView;

package/esm/index.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "style", "className"];
+import React, { useId } from 'react';
+import { forwardRef } from 'react';
+import { RooNode } from './node';
+import { jsx as _jsx } from "react/jsx-runtime";
+export * from './node';
+export * from './value';
+var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
+  var {
+      value,
+      style,
+      className
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var defaultStyle = _extends({
+    lineHeight: 1.4,
+    fontFamily: 'monospace',
+    color: 'var(--w-rjv-color, #002b36)',
+    backgroundColor: 'var(--w-rjv-background-color, #00000000)'
+  }, style);
+  var cls = "w-json-view-container w-rjv " + (className || '');
+  var keyid = useId();
+  return /*#__PURE__*/_jsx(RooNode, _extends({
+    className: cls,
+    value: value
+  }, reset, {
+    ref: ref,
+    keyid: keyid,
+    style: defaultStyle
+  }));
+});
+export default JsonView;

package/esm/node.d.ts

@@ -0,0 +1,26 @@
+import { FC, PropsWithChildren } from 'react';
+import { LabelProps } from './value';
+import { JsonViewProps } from './';
+export interface MetaProps extends LabelProps {
+    isArray?: boolean;
+    start?: boolean;
+    render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
+}
+export declare function Meta(props: MetaProps): import("react/jsx-runtime").JSX.Element;
+export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
+export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+    render?: (props: EllipsisProps) => JSX.Element;
+}
+export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
+export interface SemicolonProps extends LabelProps {
+    show?: boolean;
+    value?: object;
+    render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
+}
+export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
+export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
+export interface RooNodeProps<T> extends JsonViewProps<T> {
+    keyName?: string | number;
+    keyid?: string;
+}
+export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/node.js

@@ -0,0 +1,255 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["isArray", "start", "className", "render"],
+  _excluded2 = ["style", "render"],
+  _excluded3 = ["children", "render", "color", "value", "className", "show"],
+  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "indentWidth", "keyid"];
+import { Fragment, useId, cloneElement } from 'react';
+import { ValueView, Colon, Label, typeMap } from './value';
+import { TriangleArrow } from './arrow/TriangleArrow';
+import { useExpandsStatus, store } from './store';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function Meta(props) {
+  var {
+      isArray = false,
+      start = false,
+      className,
+      render
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var mark = isArray ? '[]' : '{}';
+  var cls = "w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-" + (start ? 'start' : 'end') + " " + (className || '');
+  var color = "var(--w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-color, #236a7c)";
+  if (render) return render(_extends({
+    isArray,
+    className: cls,
+    style: {
+      color
+    },
+    children: start ? mark.charAt(0) : mark.charAt(1)
+  }, reset));
+  return /*#__PURE__*/_jsx(Label, _extends({
+    color: color,
+    className: cls
+  }, reset, {
+    children: start ? mark.charAt(0) : mark.charAt(1)
+  }));
+}
+export var Line = props => /*#__PURE__*/_jsx("div", _extends({}, props));
+export var Ellipsis = _ref => {
+  var {
+      style,
+      render
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded2);
+  var styl = _extends({
+    cursor: 'pointer'
+  }, style);
+  var className = "w-rjv-ellipsis " + (props.className || '');
+  if (render) return render(_extends({
+    style: styl
+  }, props, {
+    className
+  }));
+  return /*#__PURE__*/_jsx("span", _extends({
+    className: className,
+    style: styl
+  }, props, {
+    children: "..."
+  }));
+};
+export var Semicolon = _ref2 => {
+  var {
+      children,
+      render,
+      color,
+      value,
+      className = 'w-rjv-object-key',
+      show
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+  var content = show ? "\"" + children + "\"" : children;
+  if (render) return render(_extends({
+    className
+  }, props, {
+    value,
+    style: {
+      color
+    },
+    children: content
+  }));
+  return /*#__PURE__*/_jsx(Label, _extends({
+    className: className,
+    color: color
+  }, props, {
+    children: content
+  }));
+};
+export var CountInfo = _ref3 => {
+  var {
+    children
+  } = _ref3;
+  return /*#__PURE__*/_jsx(Label, {
+    style: {
+      paddingLeft: 4,
+      fontStyle: 'italic'
+    },
+    color: "var(--w-rjv-info-color, #0000004d)",
+    className: "object-size",
+    children: children
+  });
+};
+export function RooNode(props) {
+  var _expands$keyid;
+  var {
+      value = {},
+      keyName,
+      displayDataTypes = true,
+      components = {},
+      displayObjectSize = true,
+      indentWidth = 15,
+      keyid = 'root'
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded4);
+  var isArray = Array.isArray(value);
+  var nameKeys = isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value);
+  var subkeyid = useId();
+  var expands = useExpandsStatus();
+  var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : true;
+  var arrowStyle = {
+    transform: "rotate(" + (expand ? '0' : '-90') + "deg)",
+    transition: 'all 0.3s'
+  };
+  var handle = () => {
+    !expand ? store.expand(keyid) : store.collapse(keyid);
+  };
+  var subNodeProps = {
+    components,
+    indentWidth,
+    displayDataTypes,
+    displayObjectSize,
+    style: {
+      paddingLeft: indentWidth
+    }
+  };
+  var valueViewProps = {
+    displayDataTypes,
+    renderValue: components.value
+  };
+  var arrowView = components.arrow ? /*#__PURE__*/cloneElement(components.arrow, {
+    style: arrowStyle,
+    'data-expand': expand
+  }) : /*#__PURE__*/_jsx(TriangleArrow, {
+    style: arrowStyle
+  });
+  return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
+    children: [/*#__PURE__*/_jsxs(Line, {
+      style: {
+        display: 'inline-flex',
+        alignItems: 'center'
+      },
+      onClick: handle,
+      children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(Semicolon, {
+          value: value,
+          render: components.objectKey,
+          color: typeof keyName === 'number' ? typeMap['number'].color : '',
+          show: typeof keyName === 'string',
+          children: keyName
+        }), /*#__PURE__*/_jsx(Colon, {})]
+      }), /*#__PURE__*/_jsx(Meta, {
+        start: true,
+        isArray: isArray,
+        render: components.braces
+      }), !expand && /*#__PURE__*/_jsx(Ellipsis, {
+        render: components.ellipsis
+      }), !expand && /*#__PURE__*/_jsx(Meta, {
+        isArray: isArray,
+        render: components.braces
+      }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
+        children: [nameKeys.length, " items"]
+      })]
+    }), expand && /*#__PURE__*/_jsx(Line, {
+      style: {
+        borderLeft: 'var(--w-rjv-border-left, 1px solid #ebebeb)',
+        marginLeft: 6
+      },
+      children: nameKeys.length > 0 && nameKeys.map((key, idx) => {
+        var item = value[key];
+        if (Array.isArray(item)) {
+          var label = isArray ? idx : key;
+          return /*#__PURE__*/_jsx(Line, {
+            children: /*#__PURE__*/_jsx(RooNode, _extends({
+              value: item,
+              keyid: keyid + subkeyid + label,
+              keyName: label
+            }, subNodeProps))
+          }, label + idx);
+        }
+        var renderKey = /*#__PURE__*/_jsx(Semicolon, {
+          value: item,
+          render: components.objectKey,
+          color: typeof key === 'number' ? typeMap['number'].color : '',
+          show: typeof key === 'string',
+          children: key
+        });
+        if (typeof item === 'object' && item && !(item instanceof Date)) {
+          if (Object.keys(item).length === 0) {
+            return /*#__PURE__*/_jsxs(Line, {
+              style: {
+                paddingLeft: indentWidth
+              },
+              children: [/*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
+                renderKey: renderKey,
+                keyName: key,
+                value: item
+              })), /*#__PURE__*/_jsx(Meta, {
+                render: components.braces,
+                start: true,
+                isArray: isArray
+              }), /*#__PURE__*/_jsx(Meta, {
+                render: components.braces,
+                isArray: isArray
+              }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
+                children: [Object.keys(item).length, " items"]
+              })]
+            }, key + idx);
+          }
+          return /*#__PURE__*/_jsx(Line, {
+            children: /*#__PURE__*/_jsx(RooNode, _extends({
+              keyid: keyid + subkeyid + key,
+              value: item,
+              keyName: key
+            }, subNodeProps))
+          }, key + idx);
+        }
+        if (typeof item === 'function') {
+          return;
+        }
+        return /*#__PURE__*/_jsx(Line, {
+          style: {
+            paddingLeft: indentWidth
+          },
+          children: /*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
+            renderKey: renderKey,
+            keyName: key,
+            value: item
+          }))
+        }, idx);
+      })
+    }), expand && /*#__PURE__*/_jsx(Line, {
+      style: {
+        paddingLeft: 2
+      },
+      children: /*#__PURE__*/_jsx(Meta, {
+        render: components.braces,
+        isArray: isArray,
+        style: {
+          paddingLeft: 2,
+          display: 'inline-block'
+        }
+      })
+    })]
+  }));
+}

package/esm/store.d.ts

@@ -0,0 +1,5 @@
+export declare const store: {
+    collapse(id: string): void;
+    expand(id: string): void;
+};
+export declare function useExpandsStatus(): Record<string, boolean>;

package/esm/store.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { useSyncExternalStore } from 'react';
+var expands = {};
+var listeners = [];
+export var store = {
+  collapse(id) {
+    expands = _extends({}, expands, {
+      [id]: false
+    });
+    emitChange();
+  },
+  expand(id) {
+    expands = _extends({}, expands, {
+      [id]: true
+    });
+    emitChange();
+  }
+};
+function getSnapshot() {
+  return expands;
+}
+function subscribe(listener) {
+  listeners = [...listeners, listener];
+  return () => {
+    listeners = listeners.filter(l => l !== listener);
+  };
+}
+function emitChange() {
+  for (var listener of listeners) {
+    listener();
+  }
+}
+export function useExpandsStatus() {
+  var expands = useSyncExternalStore(subscribe, getSnapshot);
+  return expands;
+}

package/esm/theme/dark.d.ts

@@ -0,0 +1,19 @@
+export declare const darkTheme: {
+    '--w-rjv-font-family': string;
+    '--w-rjv-color': string;
+    '--w-rjv-background-color': string;
+    '--w-rjv-border-left': string;
+    '--w-rjv-arrow-color': string;
+    '--w-rjv-info-color': string;
+    '--w-rjv-curlybraces-color': string;
+    '--w-rjv-brackets-color': string;
+    '--w-rjv-type-string-color': string;
+    '--w-rjv-type-int-color': string;
+    '--w-rjv-type-float-color': string;
+    '--w-rjv-type-bigint-color': string;
+    '--w-rjv-type-boolean-color': string;
+    '--w-rjv-type-date-color': string;
+    '--w-rjv-type-null-color': string;
+    '--w-rjv-type-nan-color': string;
+    '--w-rjv-type-undefined-color': string;
+};

package/esm/theme/dark.js

@@ -0,0 +1,19 @@
+export var darkTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#0184a6',
+  '--w-rjv-background-color': '#202020',
+  '--w-rjv-border-left': '1px solid #323232',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#656565',
+  '--w-rjv-curlybraces-color': '#1896b6',
+  '--w-rjv-brackets-color': '#1896b6',
+  '--w-rjv-type-string-color': '#cb4b16',
+  '--w-rjv-type-int-color': '#268bd2',
+  '--w-rjv-type-float-color': '#859900',
+  '--w-rjv-type-bigint-color': '#268bd2',
+  '--w-rjv-type-boolean-color': '#2aa198',
+  '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-null-color': '#d33682',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#586e75'
+};

package/esm/theme/light.d.ts

@@ -0,0 +1,19 @@
+export declare const lightTheme: {
+    '--w-rjv-font-family': string;
+    '--w-rjv-color': string;
+    '--w-rjv-background-color': string;
+    '--w-rjv-border-left': string;
+    '--w-rjv-arrow-color': string;
+    '--w-rjv-info-color': string;
+    '--w-rjv-curlybraces-color': string;
+    '--w-rjv-brackets-color': string;
+    '--w-rjv-type-string-color': string;
+    '--w-rjv-type-int-color': string;
+    '--w-rjv-type-float-color': string;
+    '--w-rjv-type-bigint-color': string;
+    '--w-rjv-type-boolean-color': string;
+    '--w-rjv-type-date-color': string;
+    '--w-rjv-type-null-color': string;
+    '--w-rjv-type-nan-color': string;
+    '--w-rjv-type-undefined-color': string;
+};

package/esm/theme/light.js

@@ -0,0 +1,19 @@
+export var lightTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#002b36',
+  '--w-rjv-background-color': '#ffffff',
+  '--w-rjv-border-left': '1px solid #ebebeb',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-curlybraces-color': '#236a7c',
+  '--w-rjv-brackets-color': '#236a7c',
+  '--w-rjv-type-string-color': '#cb4b16',
+  '--w-rjv-type-int-color': '#268bd2',
+  '--w-rjv-type-float-color': '#859900',
+  '--w-rjv-type-bigint-color': '#268bd2',
+  '--w-rjv-type-boolean-color': '#2aa198',
+  '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-null-color': '#d33682',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#586e75'
+};

package/esm/value.d.ts

@@ -0,0 +1,61 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const typeMap: {
+    string: {
+        color: string;
+        label: string;
+    };
+    number: {
+        color: string;
+        label: string;
+    };
+    float: {
+        color: string;
+        label: string;
+    };
+    bigint: {
+        color: string;
+        label: string;
+    };
+    boolean: {
+        color: string;
+        label: string;
+    };
+    date: {
+        color: string;
+        label: string;
+    };
+    null: {
+        color: string;
+        label: string;
+    };
+    NaN: {
+        color: string;
+        label: string;
+    };
+    undefined: {
+        color: string;
+        label: string;
+    };
+};
+export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
+export interface ValueViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    keyName?: string;
+    value: T;
+    displayDataTypes: boolean;
+    renderKey?: JSX.Element;
+    renderValue?: (props: React.HTMLAttributes<HTMLSpanElement> & {
+        type: TypeProps['type'];
+    }) => JSX.Element;
+}
+export declare function ValueView<T>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+    color?: string;
+    fontSize?: number;
+    opacity?: number;
+    paddingRight?: number;
+}
+export declare const Label: FC<PropsWithChildren<LabelProps>>;
+export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    type: keyof typeof typeMap;
+}
+export declare const Type: FC<PropsWithChildren<TypeProps>>;