@uiw/react-json-view 0.0.1 → 1.0.0

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>
-    );
-  }
-};