feat: add gruvbox theme.

Author: jaywcjlove

core/README.md

@@ -89,24 +89,29 @@ 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';
 
 const object = {
   string: 'Lorem ipsum dolor sit amet',
   integer: 42,
   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 (
-    <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}>
+    <div style={style}>
       <JsonView value={object} style={darkTheme} />
       <JsonView value={object} style={lightTheme} />
       <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} />
     </div>
   );

core/gruvbox.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/gruvbox' {
+  export const gruvboxTheme: import('react').CSSProperties;
+}

core/package.json

@@ -37,6 +37,11 @@
       "types": "./cjs/theme/vscode.d.ts",
       "require": "./cjs/theme/vscode.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",

core/src/theme/dark.ts

@@ -21,6 +21,6 @@ export const darkTheme = {
   '--w-rjv-type-date-color': '#586e75',
   '--w-rjv-type-url-color': '#649bd8',
   '--w-rjv-type-null-color': '#d33682',
-  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-nan-color': '#076678',
   '--w-rjv-type-undefined-color': '#586e75',
 } as React.CSSProperties;

core/src/theme/github.dark.tsx

@@ -2,7 +2,7 @@ export const githubDarkTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#79c0ff',
   '--w-rjv-background-color': '#0d1117',
-  '--w-rjv-line-color': '#36334280',
+  '--w-rjv-line-color': '#94949480',
   '--w-rjv-arrow-color': '#ccc',
   '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#7b7b7b',

core/src/theme/gruvbox.test.ts

@@ -0,0 +1,30 @@
+import { gruvboxTheme } from './gruvbox';
+
+it('gruvboxTheme test case', () => {
+  expect(gruvboxTheme).toHaveProperty('--w-rjv-font-family', 'monospace');
+  expect(Object.keys(gruvboxTheme)).toMatchObject([
+    '--w-rjv-font-family',
+    '--w-rjv-color',
+    '--w-rjv-background-color',
+    '--w-rjv-line-color',
+    '--w-rjv-arrow-color',
+    '--w-rjv-edit-color',
+    '--w-rjv-info-color',
+    '--w-rjv-update-color',
+    '--w-rjv-copied-color',
+    '--w-rjv-copied-success-color',
+    '--w-rjv-curlybraces-color',
+    '--w-rjv-colon-color',
+    '--w-rjv-brackets-color',
+    '--w-rjv-type-string-color',
+    '--w-rjv-type-int-color',
+    '--w-rjv-type-float-color',
+    '--w-rjv-type-bigint-color',
+    '--w-rjv-type-boolean-color',
+    '--w-rjv-type-date-color',
+    '--w-rjv-type-url-color',
+    '--w-rjv-type-null-color',
+    '--w-rjv-type-nan-color',
+    '--w-rjv-type-undefined-color',
+  ]);
+});

core/src/theme/gruvbox.tsx

@@ -0,0 +1,27 @@
+export const gruvboxTheme = {
+  '--w-rjv-font-family': 'monospace',
+  '--w-rjv-color': '#3c3836',
+  '--w-rjv-background-color': '#fbf1c7',
+  '--w-rjv-line-color': '#ebdbb2',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-update-color': '#ebcb8b',
+  '--w-rjv-copied-color': '#002b36',
+  '--w-rjv-copied-success-color': '#28a745',
+
+  '--w-rjv-curlybraces-color': '#236a7c',
+  '--w-rjv-colon-color': '#002b36',
+  '--w-rjv-brackets-color': '#236a7c',
+
+  '--w-rjv-type-string-color': '#3c3836',
+  '--w-rjv-type-int-color': '#8f3f71',
+  '--w-rjv-type-float-color': '#8f3f71',
+  '--w-rjv-type-bigint-color': '#8f3f71',
+  '--w-rjv-type-boolean-color': '#8f3f71',
+  '--w-rjv-type-date-color': '#076678',
+  '--w-rjv-type-url-color': '#0969da',
+  '--w-rjv-type-null-color': '#076678',
+  '--w-rjv-type-nan-color': '#076678',
+  '--w-rjv-type-undefined-color': '#076678',
+} as React.CSSProperties;

core/src/value.tsx

@@ -92,6 +92,10 @@ export function getValueString<T>(value: T) {
   if (typeof value === 'number') {
     type = isFloat(value) ? 'float' : 'number';
     content = value.toString();
+    if (isNaN(value)) {
+      type = 'NaN';
+      content = 'NaN';
+    }
   }
   if (typeof value === 'boolean') {
     type = 'boolean';
@@ -207,7 +211,7 @@ export function ValueView<T extends object>(props: ValueViewProps<T>) {
     typeView = <Fragment />;
     style = { fontWeight: 'bold' };
   }
-  if (value === undefined) {
+  if (value === undefined || type === 'NaN') {
     typeView = <Fragment />;
   }
   const isURL = value instanceof URL;

www/src/example/default.tsx

@@ -7,8 +7,10 @@ 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';
 
 export const themesData = {
+  gruvbox: gruvboxTheme,
   light: lightTheme,
   dark: darkTheme,
   nord: nordTheme,