@dxos/react-ui-syntax-highlighter 0.8.4-main.dedc0f3 → 0.8.4-main.e8ec1fe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-syntax-highlighter",
-  "version": "0.8.4-main.dedc0f3",
+  "version": "0.8.4-main.e8ec1fe",
   "description": "A syntax highlighter wrapper.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -27,27 +27,28 @@
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
     "jsonpath": "^1.1.1",
-    "react-syntax-highlighter": "^15.6.1"
+    "react-syntax-highlighter": "^15.6.1",
+    "@dxos/util": "0.8.4-main.e8ec1fe"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/random": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
-    "@dxos/storybook-utils": "0.8.4-main.dedc0f3",
-    "@dxos/util": "0.8.4-main.dedc0f3"
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe",
+    "@dxos/util": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/storybook-utils": "0.8.4-main.e8ec1fe"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
   },
   "publishConfig": {
     "access": "public"

package/src/Json/Json.stories.tsx

@@ -2,12 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { faker } from '@dxos/random';
-import { ColumnContainer, withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Json } from './Json';
 
@@ -57,7 +56,7 @@ const createData = ({ depth = 2, children = 3 } = {}): any => {
 const meta = {
   title: 'ui/react-ui-syntax-highlighter/Json',
   component: Json,
-  decorators: [withTheme, withLayout({ fullscreen: true, Container: ColumnContainer })],
+  decorators: [withTheme, withLayout({ container: 'column' })],
 } satisfies Meta<typeof Json>;
 
 export default meta;
@@ -93,3 +92,15 @@ export const Large: Story = {
     },
   },
 };
+
+const cycle: any = {
+  a: 1,
+  b: [],
+};
+
+cycle.b.push(cycle);
+
+// NOTE: Storybook args cannot be circular.
+export const Cycle: Story = {
+  render: () => <Json data={cycle} />,
+};

package/src/Json/Json.tsx

@@ -7,10 +7,11 @@ import jp from 'jsonpath';
 import React, { useEffect, useState } from 'react';
 
 import { Input, type ThemedClassName } from '@dxos/react-ui';
+import { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';
 
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 
-const defaultClassNames = '!m-0 grow overflow-y-auto';
+const defaultClassNames = 'grow overflow-y-auto text-sm';
 
 export type JsonProps = ThemedClassName<{
   data?: any;
@@ -27,7 +28,7 @@ export const Json = ({ filter, ...params }: JsonProps) => {
   const { classNames, data, replacer, testId } = params;
   return (
     <SyntaxHighlighter language='json' classNames={[defaultClassNames, classNames]} data-testid={testId}>
-      {JSON.stringify(data, replacer && createReplacer(replacer), 2)}
+      {safeStringify(data, replacer && createReplacer(replacer), 2)}
     </SyntaxHighlighter>
   );
 };
@@ -54,7 +55,7 @@ export const JsonFilter = ({ classNames, data: initialData, replacer, testId }:
     <div className='flex flex-col grow overflow-hidden'>
       <Input.Root validationValence={error ? 'error' : 'success'}>
         <Input.TextInput
-          classNames={['p-1 px-2 font-mono', error && 'border-red-500']}
+          classNames={['p-1 pli-2 font-mono', error && 'border-red-500']}
           variant='subdued'
           value={text}
           onChange={(event) => setText(event.target.value)}
@@ -62,69 +63,8 @@ export const JsonFilter = ({ classNames, data: initialData, replacer, testId }:
         />
       </Input.Root>
       <SyntaxHighlighter language='json' classNames={[defaultClassNames, classNames]} data-testid={testId}>
-        {JSON.stringify(data, replacer && createReplacer(replacer), 2)}
+        {safeStringify(data, replacer && createReplacer(replacer), 2)}
       </SyntaxHighlighter>
     </div>
   );
 };
-
-export type CreateReplacerProps = {
-  omit?: string[];
-  parse?: string[];
-  maxDepth?: number;
-  maxArrayLen?: number;
-  maxStringLen?: number;
-};
-
-export type JsonReplacer = (this: any, key: string, value: any) => any;
-
-export const createReplacer = ({
-  omit,
-  parse,
-  maxDepth,
-  maxArrayLen,
-  maxStringLen,
-}: CreateReplacerProps): JsonReplacer => {
-  let currentDepth = 0;
-  const depthMap = new WeakMap<object, number>();
-
-  return function (this: any, key: string, value: any) {
-    // Track depth.
-    if (key === '') {
-      currentDepth = 0;
-    } else if (this && typeof this === 'object') {
-      const parentDepth = depthMap.get(this) ?? 0;
-      currentDepth = parentDepth + 1;
-    }
-
-    // Store depth for this object.
-    if (value && typeof value === 'object') {
-      depthMap.set(value, currentDepth);
-
-      // Check max depth.
-      if (maxDepth != null && currentDepth >= maxDepth) {
-        return Array.isArray(value) ? `[{ length: ${value.length} }]` : `{ keys: ${Object.keys(value).length} }`;
-      }
-    }
-
-    // Apply other filters.
-    if (omit?.includes(key)) {
-      return undefined;
-    }
-    if (parse?.includes(key) && typeof value === 'string') {
-      try {
-        return JSON.parse(value);
-      } catch {
-        return value;
-      }
-    }
-    if (maxArrayLen != null && Array.isArray(value) && value.length > maxArrayLen) {
-      return `[length: ${value.length}]`;
-    }
-    if (maxStringLen != null && typeof value === 'string' && value.length > maxStringLen) {
-      return value.slice(0, maxStringLen) + '...';
-    }
-
-    return value;
-  };
-};

package/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx

@@ -2,11 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 import { trim } from '@dxos/util';
 
 import { SyntaxHighlighter } from './SyntaxHighlighter';

package/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -25,6 +25,7 @@ export type SyntaxHighlighterProps = ThemedClassName<
  * https://github.com/react-syntax-highlighter/react-syntax-highlighter
  * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html
  */
+// TODO(burdon): Replace with react-ui-editor (and reuse styles).
 export const SyntaxHighlighter = ({
   classNames,
   children,
@@ -35,9 +36,9 @@ export const SyntaxHighlighter = ({
   const { themeMode } = useThemeContext();
 
   return (
-    <div className={mx('is-full p-1 overflow-hidden font-thin text-baseText', classNames)}>
+    <div className={mx('flex is-full p-1 overflow-hidden', classNames)}>
       <NativeSyntaxHighlighter
-        className='is-full overflow-auto scrollbar-thin'
+        className='!m-0 is-full overflow-auto scrollbar-thin'
         language={languages[language as keyof typeof languages] || language}
         style={themeMode === 'dark' ? dark : light}
         customStyle={{