@uiw/react-json-view - npm Package Compare versions

Comparing version 1.9.0 to 1.10.0

cjs/theme/dark.d.ts

@@ -1,24 +0,2 @@
-export declare const darkTheme: {
-    '--w-rjv-font-family': string;
-    '--w-rjv-color': string;
-    '--w-rjv-background-color': string;
-    '--w-rjv-line-color': string;
-    '--w-rjv-arrow-color': string;
-    '--w-rjv-edit-color': string;
-    '--w-rjv-info-color': string;
-    '--w-rjv-update-color': string;
-    '--w-rjv-copied-color': string;
-    '--w-rjv-copied-success-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-url-color': string;
-    '--w-rjv-type-null-color': string;
-    '--w-rjv-type-nan-color': string;
-    '--w-rjv-type-undefined-color': string;
-};
+/// <reference types="react" />
+export declare const darkTheme: import("react").CSSProperties;

cjs/theme/dark.js

@@ -28,5 +28,5 @@ "use strict";
   '--w-rjv-type-null-color': '#d33682',
-  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-nan-color': '#076678',
   '--w-rjv-type-undefined-color': '#586e75'
 };
 exports.darkTheme = darkTheme;

cjs/theme/light.d.ts

@@ -1,24 +0,2 @@
-export declare const lightTheme: {
-    '--w-rjv-font-family': string;
-    '--w-rjv-color': string;
-    '--w-rjv-background-color': string;
-    '--w-rjv-line-color': string;
-    '--w-rjv-arrow-color': string;
-    '--w-rjv-edit-color': string;
-    '--w-rjv-info-color': string;
-    '--w-rjv-update-color': string;
-    '--w-rjv-copied-color': string;
-    '--w-rjv-copied-success-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-url-color': string;
-    '--w-rjv-type-null-color': string;
-    '--w-rjv-type-nan-color': string;
-    '--w-rjv-type-undefined-color': string;
-};
+/// <reference types="react" />
+export declare const lightTheme: import("react").CSSProperties;

cjs/theme/light.js

@@ -19,2 +19,3 @@ "use strict";
   '--w-rjv-curlybraces-color': '#236a7c',
+  '--w-rjv-colon-color': '#002b36',
   '--w-rjv-brackets-color': '#236a7c',
@@ -21,0 +22,0 @@ '--w-rjv-type-string-color': '#cb4b16',

cjs/value.js

@@ -83,5 +83,7 @@ "use strict";
     className: "w-rjv-colon",
-    style: (0, _objectSpread2["default"])({
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
       paddingRight: 3
-    }, style)
+    }, style), {}, {
+      color: 'var(--w-rjv-colon-color, var(--w-rjv-color))'
+    })
   }, props), {}, {
@@ -99,2 +101,6 @@ children: children
     content = value.toString();
+    if (isNaN(value)) {
+      type = 'NaN';
+      content = 'NaN';
+    }
   }
@@ -217,3 +223,3 @@ if (typeof value === 'boolean') {
   }
-  if (value === undefined) {
+  if (value === undefined || type === 'NaN') {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
@@ -220,0 +226,0 @@ }

dark.d.ts

 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;
-  };
+  export const darkTheme: import('react').CSSProperties;
 }

esm/theme/dark.d.ts

@@ -1,24 +0,2 @@
-export declare const darkTheme: {
-    '--w-rjv-font-family': string;
-    '--w-rjv-color': string;
-    '--w-rjv-background-color': string;
-    '--w-rjv-line-color': string;
-    '--w-rjv-arrow-color': string;
-    '--w-rjv-edit-color': string;
-    '--w-rjv-info-color': string;
-    '--w-rjv-update-color': string;
-    '--w-rjv-copied-color': string;
-    '--w-rjv-copied-success-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-url-color': string;
-    '--w-rjv-type-null-color': string;
-    '--w-rjv-type-nan-color': string;
-    '--w-rjv-type-undefined-color': string;
-};
+/// <reference types="react" />
+export declare const darkTheme: import("react").CSSProperties;

esm/theme/dark.js

@@ -22,4 +22,4 @@ export var darkTheme = {
   '--w-rjv-type-null-color': '#d33682',
-  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-nan-color': '#076678',
   '--w-rjv-type-undefined-color': '#586e75'
 };

esm/theme/light.d.ts

@@ -1,24 +0,2 @@
-export declare const lightTheme: {
-    '--w-rjv-font-family': string;
-    '--w-rjv-color': string;
-    '--w-rjv-background-color': string;
-    '--w-rjv-line-color': string;
-    '--w-rjv-arrow-color': string;
-    '--w-rjv-edit-color': string;
-    '--w-rjv-info-color': string;
-    '--w-rjv-update-color': string;
-    '--w-rjv-copied-color': string;
-    '--w-rjv-copied-success-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-url-color': string;
-    '--w-rjv-type-null-color': string;
-    '--w-rjv-type-nan-color': string;
-    '--w-rjv-type-undefined-color': string;
-};
+/// <reference types="react" />
+export declare const lightTheme: import("react").CSSProperties;

esm/theme/light.js

@@ -13,2 +13,3 @@ export var lightTheme = {
   '--w-rjv-curlybraces-color': '#236a7c',
+  '--w-rjv-colon-color': '#002b36',
   '--w-rjv-brackets-color': '#236a7c',
@@ -15,0 +16,0 @@ '--w-rjv-type-string-color': '#cb4b16',

esm/value.js

@@ -68,3 +68,5 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
       paddingRight: 3
-    }, style)
+    }, style, {
+      color: 'var(--w-rjv-colon-color, var(--w-rjv-color))'
+    })
   }, props, {
@@ -81,2 +83,6 @@ children: children
     content = value.toString();
+    if (isNaN(value)) {
+      type = 'NaN';
+      content = 'NaN';
+    }
   }
@@ -200,3 +206,3 @@ if (typeof value === 'boolean') {
   }
-  if (value === undefined) {
+  if (value === undefined || type === 'NaN') {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
@@ -203,0 +209,0 @@ }

light.d.ts

 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;
-  };
+  export const lightTheme: import('react').CSSProperties;
 }

package.json

 {
   "name": "@uiw/react-json-view",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "JSON viewer for react.",
@@ -30,2 +30,32 @@ "main": "cjs/index.js",
     },
+    "./nord": {
+      "import": "./esm/theme/nord.js",
+      "types": "./cjs/theme/nord.d.ts",
+      "require": "./cjs/theme/nord.js"
+    },
+    "./vscode": {
+      "import": "./esm/theme/vscode.js",
+      "types": "./cjs/theme/vscode.d.ts",
+      "require": "./cjs/theme/vscode.js"
+    },
+    "./monokai": {
+      "import": "./esm/theme/monokai.js",
+      "types": "./cjs/theme/monokai.d.ts",
+      "require": "./cjs/theme/monokai.js"
+    },
+    "./gruvbox": {
+      "import": "./esm/theme/gruvbox.js",
+      "types": "./cjs/theme/gruvbox.d.ts",
+      "require": "./cjs/theme/gruvbox.js"
+    },
+    "./githubLight": {
+      "import": "./esm/theme/github.light.js",
+      "types": "./cjs/theme/github.light.d.ts",
+      "require": "./cjs/theme/github.light.js"
+    },
+    "./githubDark": {
+      "import": "./esm/theme/github.dark.js",
+      "types": "./cjs/theme/github.dark.d.ts",
+      "require": "./cjs/theme/github.dark.js"
+    },
     "./triangle-arrow": {
@@ -32,0 +62,0 @@ "import": "./esm/arrow/TriangleArrow.js",

README.md

@@ -88,2 +88,8 @@ react-json-view
 import { darkTheme } from '@uiw/react-json-view/dark';
+import { nordTheme } from '@uiw/react-json-view/nord';
+import { githubLightTheme } from '@uiw/react-json-view/githubLight';
+import { githubDarkTheme } from '@uiw/react-json-view/githubDark';
+import { vscodeTheme } from '@uiw/react-json-view/vscode';
+import { gruvboxTheme } from '@uiw/react-json-view/gruvbox';
+import { monokaiTheme } from '@uiw/react-json-view/monokai';
 
@@ -94,11 +100,23 @@ const object = {
   float: 114.514,
+  boolean: true,
+  null: null,
+  nan: NaN,
+  url: new URL('https://example.com'),
 }
 
+const style = { display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' };
+
 export default function Demo() {
   return (
-    <React.Fragment>
+    <div style={style}>
       <JsonView value={object} style={darkTheme} />
       <JsonView value={object} style={lightTheme} />
-    </React.Fragment>
-  )
+      <JsonView value={object} style={nordTheme} />
+      <JsonView value={object} style={githubLightTheme} />
+      <JsonView value={object} style={githubDarkTheme} />
+      <JsonView value={object} style={gruvboxTheme} />
+      <JsonView value={object} style={vscodeTheme} />
+      <JsonView value={object} style={monokaiTheme} />
+    </div>
+  );
 }
@@ -205,2 +223,3 @@ ```
   '--w-rjv-curlybraces-color': '#d4d4d4',
+  '--w-rjv-colon-color': '#f8f8f2',
   '--w-rjv-brackets-color': '#d4d4d4',
@@ -207,0 +226,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

206774

increased by5.85%

Number of package files

107

increased by28.92%

Lines of code

4478

increased by5.71%

Number of lines in readme file

830

increased by2.34%

No dependency changes