@uiw/react-json-view 1.12.0 → 2.0.0-alpha.1

package/cjs/store/Section.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Section = void 0;
+exports.useSection = useSection;
+exports.useSectionDispatch = useSectionDispatch;
+exports.useSectionStore = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var initialState = {
+  Copied: {
+    className: 'w-rjv-copied',
+    style: {
+      height: '1em',
+      width: '1em',
+      cursor: 'pointer',
+      verticalAlign: 'middle',
+      marginLeft: 5
+    }
+  },
+  CountInfo: {
+    as: 'span',
+    className: 'w-rjv-object-size',
+    style: {
+      color: 'var(--w-rjv-info-color, #0000004d)',
+      paddingLeft: 8,
+      fontStyle: 'italic'
+    }
+  },
+  CountInfoExtra: {
+    as: 'span',
+    className: 'w-rjv-object-extra',
+    style: {
+      paddingLeft: 8
+    }
+  },
+  Ellipsis: {
+    as: 'span',
+    style: {
+      cursor: 'pointer',
+      color: 'var(--w-rjv-ellipsis-color, #cb4b16)',
+      userSelect: 'none'
+    },
+    className: 'w-rjv-ellipsis',
+    children: '...'
+  },
+  KeyName: {
+    as: 'span',
+    className: 'w-rjv-object-key'
+  }
+};
+var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
+var reducer = function reducer(state, action) {
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
+};
+var useSectionStore = function useSectionStore() {
+  return (0, _react.useContext)(Context);
+};
+exports.useSectionStore = useSectionStore;
+var DispatchSection = /*#__PURE__*/(0, _react.createContext)(function () {});
+DispatchSection.displayName = 'JVR.DispatchSection';
+function useSection() {
+  return (0, _react.useReducer)(reducer, initialState);
+}
+function useSectionDispatch() {
+  return (0, _react.useContext)(DispatchSection);
+}
+var Section = function Section(_ref) {
+  var initial = _ref.initial,
+    dispatch = _ref.dispatch,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Context.Provider, {
+    value: initial,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DispatchSection.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+};
+exports.Section = Section;
+Section.displayName = 'JVR.Section';

package/cjs/store/ShowTools.d.ts

@@ -0,0 +1,14 @@
+import { FC, PropsWithChildren } from 'react';
+type InitialState = Record<string, boolean>;
+type Dispatch = React.Dispatch<InitialState>;
+export declare const useShowToolsStore: () => InitialState;
+export declare function useShowTools(): [{
+    [x: string]: boolean;
+}, import("react").Dispatch<InitialState>];
+export declare function useShowToolsDispatch(): Dispatch;
+interface ShowToolsProps {
+    initial: InitialState;
+    dispatch: Dispatch;
+}
+export declare const ShowTools: FC<PropsWithChildren<ShowToolsProps>>;
+export {};

package/cjs/store/ShowTools.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShowTools = void 0;
+exports.useShowTools = useShowTools;
+exports.useShowToolsDispatch = useShowToolsDispatch;
+exports.useShowToolsStore = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var initialState = {};
+var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
+var reducer = function reducer(state, action) {
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
+};
+var useShowToolsStore = function useShowToolsStore() {
+  return (0, _react.useContext)(Context);
+};
+exports.useShowToolsStore = useShowToolsStore;
+var DispatchShowTools = /*#__PURE__*/(0, _react.createContext)(function () {});
+DispatchShowTools.displayName = 'JVR.DispatchShowTools';
+function useShowTools() {
+  return (0, _react.useReducer)(reducer, initialState);
+}
+function useShowToolsDispatch() {
+  return (0, _react.useContext)(DispatchShowTools);
+}
+var ShowTools = function ShowTools(_ref) {
+  var initial = _ref.initial,
+    dispatch = _ref.dispatch,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Context.Provider, {
+    value: initial,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DispatchShowTools.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+};
+exports.ShowTools = ShowTools;
+ShowTools.displayName = 'JVR.ShowTools';

package/cjs/store/Symbols.d.ts

@@ -0,0 +1,37 @@
+import { FC, PropsWithChildren, ElementType, ComponentPropsWithoutRef } from 'react';
+import { type TagType } from './Types';
+type SymbolsElementProps<T extends TagType> = {
+    as?: T;
+    render?: (props: SymbolsElement<T>) => React.ReactNode;
+    'data-type'?: string;
+};
+export type SymbolsElement<T extends TagType> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;
+type InitialState<T extends ElementType = 'span'> = {
+    Arrow?: SymbolsElement<T>;
+    Colon?: SymbolsElement<T>;
+    Quote?: SymbolsElement<T>;
+    ValueQuote?: SymbolsElement<T>;
+    BracketsRight?: SymbolsElement<T>;
+    BracketsLeft?: SymbolsElement<T>;
+    BraceRight?: SymbolsElement<T>;
+    BraceLeft?: SymbolsElement<T>;
+};
+type Dispatch = React.Dispatch<InitialState<TagType>>;
+export declare const useSymbolsStore: () => InitialState<TagType>;
+export declare function useSymbols(): [{
+    Arrow?: SymbolsElement<TagType> | undefined;
+    Colon?: SymbolsElement<TagType> | undefined;
+    Quote?: SymbolsElement<TagType> | undefined;
+    ValueQuote?: SymbolsElement<TagType> | undefined;
+    BracketsRight?: SymbolsElement<TagType> | undefined;
+    BracketsLeft?: SymbolsElement<TagType> | undefined;
+    BraceRight?: SymbolsElement<TagType> | undefined;
+    BraceLeft?: SymbolsElement<TagType> | undefined;
+}, import("react").Dispatch<InitialState<TagType>>];
+export declare function useSymbolsDispatch(): Dispatch;
+interface SymbolsProps {
+    initial: InitialState<TagType>;
+    dispatch: Dispatch;
+}
+export declare const Symbols: FC<PropsWithChildren<SymbolsProps>>;
+export {};

package/cjs/store/Symbols.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Symbols = void 0;
+exports.useSymbols = useSymbols;
+exports.useSymbolsDispatch = useSymbolsDispatch;
+exports.useSymbolsStore = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = require("react");
+var _TriangleArrow = require("../arrow/TriangleArrow");
+var _jsxRuntime = require("react/jsx-runtime");
+var initialState = {
+  Arrow: {
+    as: 'span',
+    style: {
+      transform: 'rotate(0deg)',
+      transition: 'all 0.3s'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TriangleArrow.TriangleArrow, {})
+  },
+  Colon: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-colon-color, var(--w-rjv-color))',
+      marginLeft: 0,
+      marginRight: 2
+    },
+    className: 'w-rjv-colon',
+    children: ':'
+  },
+  Quote: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-quotes-color, #236a7c)'
+    },
+    className: 'w-rjv-quotes',
+    children: '"'
+  },
+  ValueQuote: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-quotes-string-color, #cb4b16)'
+    },
+    className: 'w-rjv-quotes',
+    children: '"'
+  },
+  BracketsLeft: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-brackets-color, #236a7c)'
+    },
+    className: 'w-rjv-brackets-start',
+    children: '['
+  },
+  BracketsRight: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-brackets-color, #236a7c)'
+    },
+    className: 'w-rjv-brackets-end',
+    children: ']'
+  },
+  BraceLeft: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-curlybraces-color, #236a7c)'
+    },
+    className: 'w-rjv-curlybraces-start',
+    children: '{'
+  },
+  BraceRight: {
+    as: 'span',
+    style: {
+      color: 'var(--w-rjv-curlybraces-color, #236a7c)'
+    },
+    className: 'w-rjv-curlybraces-end',
+    children: '}'
+  }
+};
+var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
+var reducer = function reducer(state, action) {
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
+};
+var useSymbolsStore = function useSymbolsStore() {
+  return (0, _react.useContext)(Context);
+};
+exports.useSymbolsStore = useSymbolsStore;
+var DispatchSymbols = /*#__PURE__*/(0, _react.createContext)(function () {});
+DispatchSymbols.displayName = 'JVR.DispatchSymbols';
+function useSymbols() {
+  return (0, _react.useReducer)(reducer, initialState);
+}
+function useSymbolsDispatch() {
+  return (0, _react.useContext)(DispatchSymbols);
+}
+var Symbols = function Symbols(_ref) {
+  var initial = _ref.initial,
+    dispatch = _ref.dispatch,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Context.Provider, {
+    value: initial,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DispatchSymbols.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+};
+exports.Symbols = Symbols;
+Symbols.displayName = 'JVR.Symbols';

package/cjs/store/Types.d.ts

@@ -0,0 +1,52 @@
+import { FC, PropsWithChildren, ComponentPropsWithoutRef } from 'react';
+export type TagType = React.ElementType | keyof JSX.IntrinsicElements;
+type TypesElementProps<T extends TagType> = {
+    as?: T;
+    render?: (props: TypesElement<T>, result: {
+        type: 'type' | 'value';
+        value?: unknown;
+    }) => React.ReactNode;
+    'data-type'?: string;
+};
+export type TypesElement<T extends TagType> = TypesElementProps<T> & ComponentPropsWithoutRef<T>;
+export type InitialTypesState = {
+    displayDataTypes?: boolean;
+    Url?: TypesElement<TagType>;
+    Str?: TypesElement<TagType>;
+    Undefined?: TypesElement<TagType>;
+    Null?: TypesElement<TagType>;
+    True?: TypesElement<TagType>;
+    False?: TypesElement<TagType>;
+    Date?: TypesElement<TagType>;
+    Float?: TypesElement<TagType>;
+    Set?: TypesElement<TagType>;
+    Int?: TypesElement<TagType>;
+    Map?: TypesElement<TagType>;
+    Nan?: TypesElement<TagType>;
+    Bigint?: TypesElement<TagType>;
+};
+type Dispatch = React.Dispatch<InitialTypesState>;
+export declare const useTypesStore: () => InitialTypesState;
+export declare function useTypes(): [{
+    displayDataTypes?: boolean | undefined;
+    Url?: TypesElement<TagType> | undefined;
+    Str?: TypesElement<TagType> | undefined;
+    Undefined?: TypesElement<TagType> | undefined;
+    Null?: TypesElement<TagType> | undefined;
+    True?: TypesElement<TagType> | undefined;
+    False?: TypesElement<TagType> | undefined;
+    Date?: TypesElement<TagType> | undefined;
+    Float?: TypesElement<TagType> | undefined;
+    Set?: TypesElement<TagType> | undefined;
+    Int?: TypesElement<TagType> | undefined;
+    Map?: TypesElement<TagType> | undefined;
+    Nan?: TypesElement<TagType> | undefined;
+    Bigint?: TypesElement<TagType> | undefined;
+}, import("react").Dispatch<InitialTypesState>];
+export declare function useTypesDispatch(): Dispatch;
+interface TypesProps {
+    initial: InitialTypesState;
+    dispatch: Dispatch;
+}
+export declare const Types: FC<PropsWithChildren<TypesProps>>;
+export {};

package/cjs/store/Types.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Types = void 0;
+exports.useTypes = useTypes;
+exports.useTypesDispatch = useTypesDispatch;
+exports.useTypesStore = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var initialState = {
+  Str: {
+    as: 'span',
+    'data-type': 'string',
+    style: {
+      color: 'var(--w-rjv-type-string-color, #cb4b16)'
+    },
+    className: 'w-rjv-type',
+    children: 'string'
+  },
+  Url: {
+    as: 'a',
+    style: {
+      color: 'var(--w-rjv-type-url-color, #0969da)'
+    },
+    'data-type': 'url',
+    className: 'w-rjv-type',
+    children: 'url'
+  },
+  Undefined: {
+    style: {
+      color: 'var(--w-rjv-type-undefined-color, #586e75)'
+    },
+    as: 'span',
+    'data-type': 'undefined',
+    className: 'w-rjv-type',
+    children: 'undefined'
+  },
+  Null: {
+    style: {
+      color: 'var(--w-rjv-type-null-color, #d33682)'
+    },
+    as: 'span',
+    'data-type': 'null',
+    className: 'w-rjv-type',
+    children: 'null'
+  },
+  Map: {
+    style: {
+      color: 'var(--w-rjv-type-map-color, #268bd2)'
+    },
+    as: 'span',
+    'data-type': 'map',
+    className: 'w-rjv-type',
+    children: 'Map'
+  },
+  Nan: {
+    style: {
+      color: 'var(--w-rjv-type-nan-color, #859900)'
+    },
+    as: 'span',
+    'data-type': 'nan',
+    className: 'w-rjv-type',
+    children: 'NaN'
+  },
+  Bigint: {
+    style: {
+      color: 'var(--w-rjv-type-bigint-color, #268bd2)'
+    },
+    as: 'span',
+    'data-type': 'bigint',
+    className: 'w-rjv-type',
+    children: 'bigint'
+  },
+  Int: {
+    style: {
+      color: 'var(--w-rjv-type-int-color, #268bd2)'
+    },
+    as: 'span',
+    'data-type': 'int',
+    className: 'w-rjv-type',
+    children: 'int'
+  },
+  Set: {
+    style: {
+      color: 'var(--w-rjv-type-set-color, #268bd2)'
+    },
+    as: 'span',
+    'data-type': 'set',
+    className: 'w-rjv-type',
+    children: 'Set'
+  },
+  Float: {
+    style: {
+      color: 'var(--w-rjv-type-float-color, #859900)'
+    },
+    as: 'span',
+    'data-type': 'float',
+    className: 'w-rjv-type',
+    children: 'float'
+  },
+  True: {
+    style: {
+      color: 'var(--w-rjv-type-boolean-color, #2aa198)'
+    },
+    as: 'span',
+    'data-type': 'bool',
+    className: 'w-rjv-type',
+    children: 'bool'
+  },
+  False: {
+    style: {
+      color: 'var(--w-rjv-type-boolean-color, #2aa198)'
+    },
+    as: 'span',
+    'data-type': 'bool',
+    className: 'w-rjv-type',
+    children: 'bool'
+  },
+  Date: {
+    style: {
+      color: 'var(--w-rjv-type-date-color, #268bd2)'
+    },
+    as: 'span',
+    'data-type': 'date',
+    className: 'w-rjv-type',
+    children: 'date'
+  }
+};
+var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
+var reducer = function reducer(state, action) {
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
+};
+var useTypesStore = function useTypesStore() {
+  return (0, _react.useContext)(Context);
+};
+exports.useTypesStore = useTypesStore;
+var DispatchTypes = /*#__PURE__*/(0, _react.createContext)(function () {});
+DispatchTypes.displayName = 'JVR.DispatchTypes';
+function useTypes() {
+  return (0, _react.useReducer)(reducer, initialState);
+}
+function useTypesDispatch() {
+  return (0, _react.useContext)(DispatchTypes);
+}
+var Types = function Types(_ref) {
+  var initial = _ref.initial,
+    dispatch = _ref.dispatch,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Context.Provider, {
+    value: initial,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DispatchTypes.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+};
+exports.Types = Types;
+Types.displayName = 'JVR.Types';

package/cjs/store.d.ts

@@ -1,5 +1,29 @@
-export declare const store: {
-    collapse(id: string): void;
-    expand(id: string): void;
-};
-export declare function useExpandsStatus(): Record<string, boolean>;
+import React, { PropsWithChildren } from 'react';
+import { JsonViewProps } from './';
+import { type InitialTypesState } from './store/Types';
+export type BlockTagType = keyof JSX.IntrinsicElements;
+export interface InitialState<T extends object> {
+    value?: object;
+    onExpand?: JsonViewProps<object>['onExpand'];
+    onCopied?: JsonViewProps<object>['onCopied'];
+    objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
+    displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
+    shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
+    enableClipboard?: JsonViewProps<T>['enableClipboard'];
+    highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
+    collapsed?: JsonViewProps<T>['collapsed'];
+    indentWidth?: number;
+}
+export declare const initialState: InitialState<object>;
+type Dispatch = React.Dispatch<InitialState<object>>;
+export declare const Context: React.Context<InitialState<object>>;
+export declare function reducer(state: InitialState<object>, action: InitialState<object>): InitialState<object>;
+export declare const useStore: () => InitialState<object>;
+export declare const useDispatchStore: () => Dispatch;
+export interface ProviderProps {
+    initialState?: InitialState<object>;
+    initialTypes?: InitialTypesState;
+}
+export declare const Provider: React.FC<PropsWithChildren<ProviderProps>>;
+export declare function useDispatch(): Dispatch;
+export {};