@uiw/react-json-view 0.0.1 → 0.1.0

package/README.md

@@ -6,10 +6,20 @@ react-json-view
 
 A React component for displaying and editing javascript arrays and JSON objects.
 
+<!--rehype:ignore:start-->
+<a href="https://uiwjs.github.io/react-json-view/" target="_blank">
+  <img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-json-view/assets/1680273/b8b8300b-2a43-4173-878b-73e50cfac19c" />
+</a>
+<a href="https://uiwjs.github.io/react-json-view/" target="_blank">
+  <img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-code-preview-layout/assets/1680273/da8e8499-6de3-4d4f-8316-8b2a3b616170" />
+</a>
+
+<!--rehype:ignore:end-->
+
 ## Features
 
 📚 Use Typescript to write, better code hints.  
-🎨 Support theme customization  
+🎨 Support theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme) theme  
 🌒 Support dark/light mode  
 
 ## Quick Start
@@ -121,6 +131,90 @@ export default function Demo() {
 }
 ```
 
+## Online Editing Theme
+
+Online custom style example, please check in the [documentation website](https://uiwjs.github.io/react-json-view/)
+
+```tsx mdx:preview
+import React, { useState, useRef } from 'react';
+import Colorful from '@uiw/react-color-colorful';
+import JsonView from '@uiw/react-json-view';
+
+const object = {
+  avatar: 'https://i.imgur.com/MK3eW3As.jpg',
+  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,
+  },
+  string_number: '1234',
+}
+const customTheme = {
+  '--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() {
+  const [cssvar, setCssvar] = useState('--w-rjv-background-color');
+  const [hex, setHex] = useState("#1e1e1e");
+  const [theme, setTheme] = useState(customTheme);
+  const onChange = ({ hexa }) => {
+    const value = cssvar === '--w-rjv-border-left' ? `1px solid ${hexa}` : hexa;
+    setHex(hexa);
+    setTheme({ ...theme, [cssvar]: value });
+  };
+  return (
+    <React.Fragment>
+      <div style={{ display: 'flex', gap: '1rem' }}>
+        <JsonView value={object} keyName="root" style={{ flex: 1, ...theme }} />
+        <div>
+          <Colorful color={hex} onChange={onChange} />
+          <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
+            {Object.keys(customTheme).map((varname, idx) => {
+              const click = () => setCssvar(varname);
+              const active = cssvar === varname ? '#a8a8a8' : '';
+              return <button key={idx} style={{ background: active }} onClick={click}>{varname}</button>
+            })}
+          </div>
+        </div>
+      </div>
+      Copy the theme configuration below into your project.
+      <pre>
+        {JSON.stringify(theme, null, 2)}
+      </pre>
+    </React.Fragment>
+  )
+}
+```
 ## Render
 
 ```tsx mdx:preview

package/dark.d.ts

@@ -0,0 +1,19 @@
+declare module '@uiw/react-json-view/dark' {
+  export 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-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/light.d.ts

@@ -0,0 +1,19 @@
+declare module '@uiw/react-json-view/light' {
+  export 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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -45,9 +45,12 @@
     "react-dom": ">=18.0.0"
   },
   "files": [
+    "dark.d.ts",
+    "light.d.ts",
+    "triangle-arrow.d.ts",
+    "triangle-solid-arrow.d.ts",
     "cjs",
-    "esm",
-    "src"
+    "esm"
   ],
   "keywords": [
     "monaco-editor",

package/triangle-arrow.d.ts

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

package/triangle-solid-arrow.d.ts

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

package/src/arrow/TriangleArrow.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-export interface TriangleArrowProps extends React.SVGProps<SVGSVGElement> {}
-export function TriangleArrow(props: TriangleArrowProps) {
-  const { style, ...reset } = props;
-  const defaultStyle: React.CSSProperties = {
-    cursor: 'pointer',
-    height: '1em',
-    width: '1em',
-    ...style,
-  };
-  return (
-    <svg viewBox="0 0 24 24" fill="var(--w-rjv-arrow-color, currentColor)" style={defaultStyle} {...reset}>
-      <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>
-    </svg>
-  );
-}

package/src/arrow/TriangleSolidArrow.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-export interface TriangleSolidArrowProps extends React.SVGProps<SVGSVGElement> {}
-export function TriangleSolidArrow(props: TriangleSolidArrowProps) {
-  const { style, ...reset } = props;
-  const defaultStyle: React.CSSProperties = {
-    cursor: 'pointer',
-    height: '1em',
-    width: '1em',
-    ...style,
-  };
-  return (
-    <svg viewBox="0 0 15 15" fill="var(--w-rjv-arrow-color, currentColor)" style={defaultStyle} {...reset}>
-      <path d="M0 5l6 6 6-6z"></path>
-    </svg>
-  );
-}

package/src/index.tsx

@@ -1,43 +0,0 @@
-import React, { useId } from 'react';
-import { forwardRef } from 'react';
-import { RooNode, 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'];
-  };
-}
-
-const JsonView = forwardRef<HTMLDivElement, JsonViewProps<object>>((props, ref) => {
-  const { value, style, className, ...reset } = props;
-  const defaultStyle = {
-    lineHeight: 1.4,
-    fontFamily: 'monospace',
-    color: 'var(--w-rjv-color, #002b36)',
-    backgroundColor: 'var(--w-rjv-background-color, #00000000)',
-    ...style,
-  } as React.CSSProperties;
-  const cls = `w-json-view-container w-rjv ${className || ''}`;
-  const keyid = useId();
-  return <RooNode className={cls} value={value} {...reset} ref={ref} keyid={keyid} style={defaultStyle} />;
-});
-
-export default JsonView;

package/src/node.tsx

@@ -1,201 +0,0 @@
-import { FC, Fragment, PropsWithChildren, useId, cloneElement } from 'react';
-import { ValueView, ValueViewProps, Colon, Label, LabelProps, typeMap } from './value';
-import { TriangleArrow } from './arrow/TriangleArrow';
-import { useExpandsStatus, store } from './store';
-import { JsonViewProps } from './';
-
-export interface MetaProps extends LabelProps {
-  isArray?: boolean;
-  start?: boolean;
-  render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
-}
-
-export function Meta(props: MetaProps) {
-  const { isArray = false, start = false, className, render, ...reset } = props;
-  const mark = isArray ? '[]' : '{}';
-  const cls = `w-rjv-${isArray ? 'brackets' : 'curlybraces'}-${start ? 'start' : 'end'} ${className || ''}`;
-  const color = `var(--w-rjv-${isArray ? 'brackets' : 'curlybraces'}-color, #236a7c)`;
-  if (render)
-    return render({
-      isArray,
-      className: cls,
-      style: { color },
-      children: start ? mark.charAt(0) : mark.charAt(1),
-      ...reset,
-    });
-  return (
-    <Label color={color} className={cls} {...reset}>
-      {start ? mark.charAt(0) : mark.charAt(1)}
-    </Label>
-  );
-}
-
-export const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (props) => <div {...props} />;
-
-export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
-  render?: (props: EllipsisProps) => JSX.Element;
-}
-export const Ellipsis: FC<PropsWithChildren<EllipsisProps>> = ({ style, render, ...props }) => {
-  const styl = { cursor: 'pointer', ...style };
-  const className = `w-rjv-ellipsis ${props.className || ''}`;
-  if (render) return render({ style: styl, ...props, className });
-  return (
-    <span className={className} style={styl} {...props}>
-      ...
-    </span>
-  );
-};
-export interface SemicolonProps extends LabelProps {
-  show?: boolean;
-  value?: object;
-  render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
-}
-export const Semicolon: FC<PropsWithChildren<SemicolonProps>> = ({
-  children,
-  render,
-  color,
-  value,
-  className = 'w-rjv-object-key',
-  show,
-  ...props
-}) => {
-  const content = show ? `"${children}"` : children;
-  if (render) return render({ className, ...props, value, style: { color }, children: content });
-  return (
-    <Label className={className} color={color} {...props}>
-      {content}
-    </Label>
-  );
-};
-export const CountInfo: FC<PropsWithChildren<LabelProps>> = ({ children }) => (
-  <Label
-    style={{ paddingLeft: 4, fontStyle: 'italic' }}
-    color="var(--w-rjv-info-color, #0000004d)"
-    className="object-size"
-  >
-    {children}
-  </Label>
-);
-
-export interface RooNodeProps<T> extends JsonViewProps<T> {
-  keyName?: string | number;
-  keyid?: string;
-}
-export function RooNode<T extends object>(props: RooNodeProps<T>) {
-  const {
-    value = {},
-    keyName,
-    displayDataTypes = true,
-    components = {},
-    displayObjectSize = true,
-    indentWidth = 15,
-    keyid = 'root',
-    ...reset
-  } = props;
-  const isArray = Array.isArray(value);
-  const nameKeys = (isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value)) as (keyof typeof value)[];
-  const subkeyid = useId();
-  const expands = useExpandsStatus();
-  const expand = expands[keyid] ?? true;
-  const arrowStyle = { transform: `rotate(${expand ? '0' : '-90'}deg)`, transition: 'all 0.3s' };
-  const handle = () => {
-    !expand ? store.expand(keyid) : store.collapse(keyid);
-  };
-  const subNodeProps: RooNodeProps<T> = {
-    components,
-    indentWidth,
-    displayDataTypes,
-    displayObjectSize,
-    style: { paddingLeft: indentWidth },
-  };
-  const valueViewProps = {
-    displayDataTypes,
-    renderValue: components.value,
-  } as ValueViewProps<T>;
-
-  const arrowView = components.arrow ? (
-    cloneElement(components.arrow, { style: arrowStyle, 'data-expand': expand })
-  ) : (
-    <TriangleArrow style={arrowStyle} />
-  );
-  return (
-    <div {...reset}>
-      <Line style={{ display: 'inline-flex', alignItems: 'center' }} onClick={handle}>
-        {arrowView}
-        {(typeof keyName === 'string' || typeof keyName === 'number') && (
-          <Fragment>
-            <Semicolon
-              value={value}
-              render={components.objectKey}
-              color={typeof keyName === 'number' ? typeMap['number'].color : ''}
-              show={typeof keyName === 'string'}
-            >
-              {keyName}
-            </Semicolon>
-            <Colon />
-          </Fragment>
-        )}
-        <Meta start isArray={isArray} render={components.braces} />
-        {!expand && <Ellipsis render={components.ellipsis} />}
-        {!expand && <Meta isArray={isArray} render={components.braces} />}
-        {displayObjectSize && <CountInfo>{nameKeys.length} items</CountInfo>}
-      </Line>
-      {expand && (
-        <Line style={{ borderLeft: 'var(--w-rjv-border-left, 1px solid #ebebeb)', marginLeft: 6 }}>
-          {nameKeys.length > 0 &&
-            nameKeys.map((key, idx) => {
-              const item = value[key];
-              if (Array.isArray(item)) {
-                const label = isArray ? idx : key;
-                return (
-                  <Line key={label + idx}>
-                    <RooNode value={item} keyid={keyid + subkeyid + label} keyName={label} {...subNodeProps} />
-                  </Line>
-                );
-              }
-              const renderKey = (
-                <Semicolon
-                  value={item}
-                  render={components.objectKey}
-                  color={typeof key === 'number' ? typeMap['number'].color : ''}
-                  show={typeof key === 'string'}
-                >
-                  {key}
-                </Semicolon>
-              );
-              if (typeof item === 'object' && item && !((item as any) instanceof Date)) {
-                if (Object.keys(item).length === 0) {
-                  return (
-                    <Line key={key + idx} style={{ paddingLeft: indentWidth }}>
-                      <ValueView {...valueViewProps} renderKey={renderKey} keyName={key} value={item} />
-                      <Meta render={components.braces} start isArray={isArray} />
-                      <Meta render={components.braces} isArray={isArray} />
-                      {displayObjectSize && <CountInfo>{Object.keys(item).length} items</CountInfo>}
-                    </Line>
-                  );
-                }
-                return (
-                  <Line key={key + idx}>
-                    <RooNode keyid={keyid + subkeyid + key} value={item} keyName={key} {...subNodeProps} />
-                  </Line>
-                );
-              }
-              if (typeof item === 'function') {
-                return;
-              }
-              return (
-                <Line key={idx} style={{ paddingLeft: indentWidth }}>
-                  <ValueView {...valueViewProps} renderKey={renderKey} keyName={key} value={item} />
-                </Line>
-              );
-            })}
-        </Line>
-      )}
-      {expand && (
-        <Line style={{ paddingLeft: 2 }}>
-          <Meta render={components.braces} isArray={isArray} style={{ paddingLeft: 2, display: 'inline-block' }} />
-        </Line>
-      )}
-    </div>
-  );
-}

package/src/store.tsx

@@ -1,37 +0,0 @@
-import { useSyncExternalStore } from 'react';
-
-let expands: Record<string, boolean> = {};
-let listeners: Function[] = [];
-
-export const store = {
-  collapse(id: string) {
-    expands = { ...expands, [id]: false };
-    emitChange();
-  },
-  expand(id: string) {
-    expands = { ...expands, [id]: true };
-    emitChange();
-  },
-};
-
-function getSnapshot() {
-  return expands;
-}
-
-function subscribe(listener: Function) {
-  listeners = [...listeners, listener];
-  return () => {
-    listeners = listeners.filter((l) => l !== listener);
-  };
-}
-
-function emitChange() {
-  for (let listener of listeners) {
-    listener();
-  }
-}
-
-export function useExpandsStatus() {
-  const expands = useSyncExternalStore(subscribe, getSnapshot);
-  return expands;
-}

package/src/theme/dark.ts

@@ -1,21 +0,0 @@
-export const 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/src/theme/light.ts

@@ -1,21 +0,0 @@
-export const 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/src/value.tsx

@@ -1,172 +0,0 @@
-import { FC, Fragment, PropsWithChildren } from 'react';
-
-const isFloat = (n: number) => (Number(n) === n && n % 1 !== 0) || isNaN(n);
-export const typeMap = {
-  string: {
-    color: 'var(--w-rjv-type-string-color, #cb4b16)',
-    label: 'string',
-  },
-  number: {
-    color: 'var(--w-rjv-type-int-color, #268bd2)',
-    label: 'int',
-  },
-  float: {
-    color: 'var(--w-rjv-type-float-color, #859900)',
-    label: 'float',
-  },
-  bigint: {
-    color: 'var(--w-rjv-type-bigint-color, #268bd2)',
-    label: 'bigint',
-  },
-  boolean: {
-    color: 'var(--w-rjv-type-boolean-color, #2aa198)',
-    label: 'bool',
-  },
-  date: {
-    color: 'var(--w-rjv-type-date-color, #586e75)',
-    label: 'date',
-  },
-  null: {
-    color: 'var(--w-rjv-type-null-color, #d33682)',
-    label: 'null',
-  },
-  NaN: {
-    color: 'var(--w-rjv-type-nan-color, #859900)',
-    label: 'NaN',
-  },
-  undefined: {
-    color: 'var(--w-rjv-type-undefined-color, #586e75)',
-    label: 'undefined',
-  },
-};
-
-export const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>> = ({
-  children = ':',
-  style,
-  ...props
-}) => (
-  <span className="w-rjv-colon" style={{ paddingRight: 3, ...style }} {...props}>
-    {children}
-  </span>
-);
-
-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 function ValueView<T>(props: ValueViewProps<T>) {
-  const { value, keyName, renderKey, renderValue, displayDataTypes, ...reset } = props;
-
-  let type = typeof value as TypeProps['type'];
-  let content = '';
-  let color = '';
-  let style = {} as React.CSSProperties;
-  if (typeof value === 'number') {
-    type = isFloat(value) ? 'float' : 'number';
-    content = value.toString();
-  }
-  if (typeof value === 'boolean') {
-    type = 'boolean';
-    content = value.toString();
-  }
-  if (typeof value === 'object' && value instanceof Date) {
-    type = 'date';
-    content = value.toString();
-  }
-  let typeView = <Type type={type} />;
-  if (value === null) {
-    type = 'null';
-    content = `${value}`.toLocaleUpperCase();
-    typeView = <Fragment />;
-    style = { fontWeight: 'bold' };
-  }
-  if (value === undefined) {
-    type = 'undefined';
-    content = String(value);
-    typeView = <Fragment />;
-  }
-  if (typeof value === 'bigint') {
-    type = 'bigint';
-    content = `${value}n`;
-  }
-  if (typeof value === 'string') {
-    content = `"${value}"`;
-  }
-
-  if (!displayDataTypes) {
-    typeView = <Fragment />;
-  }
-  color = typeMap[type]?.color || '';
-  if (content && typeof content === 'string') {
-    const valueView = renderValue ? (
-      renderValue({
-        className: 'w-rjv-value',
-        style: { color, ...style },
-        type,
-        children: content,
-      })
-    ) : (
-      <Label color={color} style={style} className="w-rjv-value">
-        {content}
-      </Label>
-    );
-    return (
-      <Label {...reset}>
-        {renderKey}
-        <Colon />
-        {typeView}
-        {valueView}
-      </Label>
-    );
-  }
-  return (
-    <Label {...reset}>
-      {renderKey}
-      <Colon />
-      {typeView}
-    </Label>
-  );
-}
-
-export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
-  color?: string;
-  fontSize?: number;
-  opacity?: number;
-  paddingRight?: number;
-}
-
-export const Label: FC<PropsWithChildren<LabelProps>> = ({
-  children,
-  color,
-  fontSize,
-  opacity,
-  paddingRight,
-  style,
-  ...reset
-}) => (
-  <span style={{ color, fontSize, opacity, paddingRight, ...style }} {...reset}>
-    {children}
-  </span>
-);
-
-export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
-  type: keyof typeof typeMap;
-}
-
-export const Type: FC<PropsWithChildren<TypeProps>> = (props) => {
-  const { type } = props;
-  const color = typeMap[type]?.color;
-  const label = typeMap[type]?.label;
-  if (color && label) {
-    return (
-      <Label color={color} fontSize={11} opacity={0.8} paddingRight={4} className="w-rjv-type" data-type={type}>
-        {label}
-      </Label>
-    );
-  }
-};