@uiw/react-json-view 0.0.1

package/README.md

@@ -0,0 +1,337 @@
+react-json-view
+===
+
+[![CI](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/@uiw/react-json-view.svg)](https://www.npmjs.com/package/@uiw/react-json-view)
+
+A React component for displaying and editing javascript arrays and JSON objects.
+
+## Features
+
+📚 Use Typescript to write, better code hints.  
+🎨 Support theme customization  
+🌒 Support dark/light mode  
+
+## Quick Start
+
+```bash
+npm install @uiw/react-json-view
+```
+
+```jsx
+import JsonView from '@uiw/react-json-view';
+
+const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
+const longArray = new Array(1000).fill(1);
+const example = {
+  avatar,
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  bigint: 10086n,
+  null: null,
+  undefined,
+  timer: 0,
+  date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
+  array: [19, 100.86, 'test', NaN, Infinity],
+  nestedArray: [
+    [1, 2],
+    [3, 4],
+  ],
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+  },
+  longArray,
+  string_number: '1234',
+};
+
+<JsonView value={example} />
+```
+
+## Theme
+
+By default, the `lightTheme` light theme is used, and a `darkTheme` dark theme configuration is built in
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+import { lightTheme } from '@uiw/react-json-view/light';
+import { darkTheme } from '@uiw/react-json-view/dark';
+
+const object = {
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+}
+
+export default function Demo() {
+  return (
+    <React.Fragment>
+      <JsonView value={object} style={darkTheme} />
+      <JsonView value={object} style={lightTheme} />
+    </React.Fragment>
+  )
+}
+```
+
+Example of custom `vscode` theme styles: 
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+const object = {
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+  },
+}
+const customTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#9cdcfe',
+  '--w-rjv-background-color': '#1e1e1e',
+  '--w-rjv-border-left': '1px solid #323232',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#656565',
+
+  '--w-rjv-curlybraces-color': '#d4d4d4',
+  '--w-rjv-brackets-color': '#d4d4d4',
+
+  '--w-rjv-type-string-color': '#ce9178',
+  '--w-rjv-type-int-color': '#268bd2',
+  '--w-rjv-type-float-color': '#859900',
+  '--w-rjv-type-bigint-color': '#268bd2',
+  '--w-rjv-type-boolean-color': '#559bd4',
+  '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-null-color': '#d33682',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#586e75',
+};
+
+export default function Demo() {
+  return (
+    <JsonView value={object} keyName="root" style={customTheme} />
+  )
+}
+```
+
+## Render
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+const object = {
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+  },
+}
+export default function Demo() {
+  return (
+    <JsonView
+      value={object}
+      keyName="root"
+      displayObjectSize={false}
+      displayDataTypes={false}
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+        '--w-rjv-border-left': '0',
+      }}
+      components={{
+        braces: () =>  <span />,
+        ellipsis: () =>  <React.Fragment />,
+        objectKey: ({ value, ...props}) => {
+          if (props.children === '"integer"' && value > 40) {
+            return <del {...props} />
+          }
+          return <span {...props} />
+        }
+      }}
+    />
+  )
+}
+```
+
+## Modify Icon Style
+
+Use built-in default icons.
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';
+import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';
+
+const object = {
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+  },
+  nestedArray: [
+    [1, 2],
+    [3, 4],
+  ],
+}
+export default function Demo() {
+  return (
+    <JsonView
+      value={object}
+      keyName="root"
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+        '--w-rjv-border-left': '1px dashed #ebebeb',
+      }}
+      components={{
+        arrow: <TriangleSolidArrow />
+      }}
+    />
+  )
+}
+```
+
+Display of custom **svg** `icon` components
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+const object = {
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+  },
+  nestedArray: [
+    [1, 2],
+    [3, 4],
+  ],
+}
+
+const Arrow = (props) => {
+  const { style, 'data-expand': expand,  ...reset } = props;
+  const defaultStyle = {
+    cursor: 'pointer',
+    height: '1em',
+    width: '1em',
+  };
+  if (!expand) {
+    return (
+      <svg
+        viewBox="0 0 24 24"
+        fill="var(--w-rjv-arrow-color, currentColor)"
+        style={defaultStyle}
+        {...reset}
+      >
+        <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" />
+      </svg>
+    )
+  }
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="var(--w-rjv-arrow-color, currentColor)"
+      style={defaultStyle}
+      {...reset}
+    >
+      <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7" />
+    </svg>
+  )
+}
+
+export default function Demo() {
+  return (
+    <JsonView
+      value={object}
+      keyName="root"
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+        '--w-rjv-border-left': '1px dashed #ebebeb',
+      }}
+      components={{
+        arrow: <Arrow />
+      }}
+    />
+  )
+}
+```
+
+## Props
+
+```ts
+import React from 'react';
+import { MetaProps, SemicolonProps, EllipsisProps, ValueViewProps } from '@uiw/react-json-view';
+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;
+```
+
+## Development
+
+Runs the project in development mode.  
+
+```bash
+# Step 1, run first, listen to the component compile and output the .js file
+# listen for compilation output type .d.ts file
+npm run watch
+# Step 2, development mode, listen to compile preview website instance
+npm run start
+```
+
+Builds the app for production to the build folder.
+
+```bash
+npm run build
+```
+
+The build is minified and the filenames include the hashes.
+Your app is ready to be deployed!
+
+## Contributors
+
+As always, thanks to our amazing contributors!
+
+<a href="https://github.com/uiwjs/react-json-view/graphs/contributors">
+  <img src="https://uiwjs.github.io/react-json-view/CONTRIBUTORS.svg" />
+</a>
+
+Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
+
+## License
+
+Licensed under the MIT License.

package/cjs/arrow/TriangleArrow.d.ts

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

package/cjs/arrow/TriangleArrow.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TriangleArrow = TriangleArrow;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["style"];
+function TriangleArrow(props) {
+  var style = props.style,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var defaultStyle = (0, _objectSpread2["default"])({
+    cursor: 'pointer',
+    height: '1em',
+    width: '1em'
+  }, style);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    viewBox: "0 0 24 24",
+    fill: "var(--w-rjv-arrow-color, currentColor)",
+    style: defaultStyle
+  }, reset), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+    })
+  }));
+}

package/cjs/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/cjs/arrow/TriangleSolidArrow.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TriangleSolidArrow = TriangleSolidArrow;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["style"];
+function TriangleSolidArrow(props) {
+  var style = props.style,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var defaultStyle = (0, _objectSpread2["default"])({
+    cursor: 'pointer',
+    height: '1em',
+    width: '1em'
+  }, style);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    viewBox: "0 0 15 15",
+    fill: "var(--w-rjv-arrow-color, currentColor)",
+    style: defaultStyle
+  }, reset), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M0 5l6 6 6-6z"
+    })
+  }));
+}

package/cjs/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/cjs/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _node = require("./node");
+Object.keys(_node).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _node[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _node[key];
+    }
+  });
+});
+var _jsxRuntime = require("react/jsx-runtime");
+var _value = require("./value");
+Object.keys(_value).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _value[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _value[key];
+    }
+  });
+});
+var _excluded = ["value", "style", "className"];
+var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var value = props.value,
+    style = props.style,
+    className = props.className,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var defaultStyle = (0, _objectSpread2["default"])({
+    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 ".concat(className || '');
+  var keyid = (0, _react.useId)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_node.RooNode, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: cls,
+    value: value
+  }, reset), {}, {
+    ref: ref,
+    keyid: keyid,
+    style: defaultStyle
+  }));
+});
+var _default = JsonView;
+exports["default"] = _default;

package/cjs/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;