@dxos/react-ui-syntax-highlighter 0.8.4-main.fffef41 → 0.8.4-staging.ac66bdf99f

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-syntax-highlighter",
-  "version": "0.8.4-main.fffef41",
+  "version": "0.8.4-staging.ac66bdf99f",
   "description": "A syntax highlighter wrapper.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -25,30 +29,29 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "jsonpath": "^1.1.1",
+    "jsonpath-plus": "^10.3.0",
     "react-syntax-highlighter": "^15.6.1",
-    "@dxos/util": "0.8.4-main.fffef41"
+    "@dxos/ui-types": "0.8.4-staging.ac66bdf99f",
+    "@dxos/util": "0.8.4-staging.ac66bdf99f"
   },
   "devDependencies": {
-    "@types/jsonpath": "^0.2.4",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.fffef41",
-    "@dxos/react-ui": "0.8.4-main.fffef41",
-    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
-    "@dxos/storybook-utils": "0.8.4-main.fffef41",
-    "@dxos/util": "0.8.4-main.fffef41"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-staging.ac66bdf99f",
+    "@dxos/react-ui": "0.8.4-staging.ac66bdf99f",
+    "@dxos/storybook-utils": "0.8.4-staging.ac66bdf99f",
+    "@dxos/ui-theme": "0.8.4-staging.ac66bdf99f",
+    "@dxos/util": "0.8.4-staging.ac66bdf99f"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
-    "@dxos/react-ui": "0.8.4-main.fffef41"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-staging.ac66bdf99f",
+    "@dxos/ui-theme": "0.8.4-staging.ac66bdf99f"
   },
   "publishConfig": {
     "access": "public"

package/src/Json/Json.stories.tsx

@@ -5,29 +5,29 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Json } from './Json';
 
-faker.seed(0);
+random.seed(0);
 
 const createNode = () => {
   const data: Record<string, any> = {};
-  const keys = [...Array(faker.number.int({ min: 1, max: 5 }))].map(() => faker.lorem.word());
+  const keys = [...Array(random.number.int({ min: 1, max: 5 }))].map(() => random.lorem.word());
   keys.forEach((key) => {
-    switch (faker.helpers.arrayElement(['object', 'string', 'number', 'boolean', 'null'])) {
+    switch (random.helpers.arrayElement(['object', 'string', 'number', 'boolean', 'null'])) {
       case 'object':
         data[key] = createNode();
         break;
       case 'string':
-        data[key] = faker.lorem.word();
+        data[key] = random.lorem.word();
         break;
       case 'number':
-        data[key] = faker.number.int();
+        data[key] = random.number.int();
         break;
       case 'boolean':
-        data[key] = faker.datatype.boolean();
+        data[key] = random.datatype.boolean();
         break;
       case 'null':
         data[key] = null;
@@ -41,7 +41,7 @@ const createNode = () => {
 const createData = ({ depth = 2, children = 3 } = {}): any => {
   const createChildren = (root: any, d = 0) => {
     if (d < depth) {
-      const num = faker.number.int({ min: 1, max: Math.round(Math.log(depth + 1 - d) * children) });
+      const num = random.number.int({ min: 1, max: Math.round(Math.log(depth + 1 - d) * children) });
       root.children = [...new Array(num)].map(() => {
         return createChildren(createNode(), d + 1);
       });
@@ -53,54 +53,54 @@ const createData = ({ depth = 2, children = 3 } = {}): any => {
   return createChildren(createNode());
 };
 
+const createCycle = () => {
+  const data: any = {
+    a: 1,
+    b: [],
+  };
+
+  data.b.push(data);
+  return data;
+};
+
 const meta = {
   title: 'ui/react-ui-syntax-highlighter/Json',
-  component: Json,
-  decorators: [withTheme, withLayout({ container: 'column' })],
-} satisfies Meta<typeof Json>;
+  component: Json.Root,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+} satisfies Meta;
 
 export default meta;
 
-type Story = StoryObj<typeof Json>;
-
-const data = createData();
+type Story = StoryObj<typeof meta>;
 
+/** Standalone Json.Data — simplest usage. */
 export const Default: Story = {
+  render: (args) => <Json.Data {...args} />,
   args: {
-    classNames: 'text-sm',
-    data,
+    data: createData(),
   },
 };
 
-export const Filter: Story = {
+/** Circular reference handling. */
+export const Cycle: Story = {
+  render: (args) => <Json.Data {...args} />,
   args: {
-    classNames: 'text-sm',
-    filter: true,
-    data,
+    data: createCycle(),
   },
 };
 
-export const Large: Story = {
+/** Large dataset with replacer. */
+export const Filter: Story = {
+  render: (args) => (
+    <Json.Root {...args}>
+      <Json.Content>
+        <Json.Filter />
+        <Json.Data />
+      </Json.Content>
+    </Json.Root>
+  ),
   args: {
-    classNames: 'text-sm',
-    filter: true,
     data: createData({ depth: 5 }),
-    replacer: {
-      maxDepth: 3,
-      maxArrayLen: 10,
-      maxStringLen: 10,
-    },
+    replacer: { maxDepth: 3, maxArrayLen: 10, maxStringLen: 10 },
   },
 };
-
-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

@@ -2,69 +2,189 @@
 // Copyright 2025 DXOS.org
 //
 
-// TODO(burdon): Use to jsonpath-plus.
-import jp from 'jsonpath';
-import React, { useEffect, useState } from 'react';
+import { JSONPath } from 'jsonpath-plus';
+import React, {
+  createContext,
+  type PropsWithChildren,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
-import { Input, type ThemedClassName } from '@dxos/react-ui';
+import { Input } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/ui-theme';
+import { type ComposableProps } from '@dxos/ui-types';
 import { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';
 
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 
-const defaultClassNames = 'grow overflow-y-auto text-sm';
+//
+// Context
+//
 
-export type JsonProps = ThemedClassName<{
-  data?: any;
-  filter?: boolean;
+type JsonContextType = {
+  data: any;
+  filteredData: any;
+  filterText: string;
+  setFilterText: (text: string) => void;
+  filterError: Error | null;
   replacer?: CreateReplacerProps;
-  testId?: string;
-}>;
+};
 
-export const Json = ({ filter, ...params }: JsonProps) => {
-  if (filter) {
-    return <JsonFilter {...params} />;
+const JsonContext = createContext<JsonContextType | null>(null);
+
+/** Require Json context (throws if used outside Json.Root). */
+const useJsonContext = (consumerName: string): JsonContextType => {
+  const context = useContext(JsonContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`Json.Root\`.`);
   }
+  return context;
+};
 
-  const { classNames, data, replacer, testId } = params;
-  return (
-    <SyntaxHighlighter language='json' classNames={[defaultClassNames, classNames]} data-testid={testId}>
-      {safeStringify(data, replacer && createReplacer(replacer), 2)}
-    </SyntaxHighlighter>
-  );
+/** Optional Json context (returns null outside Json.Root). */
+const useOptionalJsonContext = (): JsonContextType | null => {
+  return useContext(JsonContext);
 };
 
-export const JsonFilter = ({ classNames, data: initialData, replacer, testId }: JsonProps) => {
-  const [data, setData] = useState(initialData);
-  const [text, setText] = useState('');
-  const [error, setError] = useState<Error | null>(null);
+//
+// Root
+//
+
+const JSON_ROOT_NAME = 'Json.Root';
+
+type JsonRootProps = PropsWithChildren<{
+  data?: any;
+  replacer?: CreateReplacerProps;
+}>;
+
+/** Headless context provider for Json composite. */
+const JsonRoot = forwardRef<HTMLDivElement, JsonRootProps>(({ children, data, replacer }, _forwardedRef) => {
+  const [filterText, setFilterText] = useState('');
+  const [filteredData, setFilteredData] = useState(data);
+  const [filterError, setFilterError] = useState<Error | null>(null);
+
   useEffect(() => {
-    if (!initialData || !text.trim().length) {
-      setData(initialData);
+    if (!filterText.trim().length) {
+      setFilteredData(data);
+      setFilterError(null);
     } else {
       try {
-        setData(jp.query(initialData, text));
-        setError(null);
+        setFilteredData(JSONPath({ path: filterText, json: data }));
+        setFilterError(null);
       } catch (err) {
-        setData(initialData);
-        setError(err as Error);
+        setFilteredData(data);
+        setFilterError(err as Error);
       }
     }
-  }, [initialData, text]); // TODO(burdon): Need structural diff.
+  }, [data, filterText]);
+
+  const context = useMemo(
+    () => ({ data, filteredData, filterText, setFilterText, filterError, replacer }),
+    [data, filteredData, filterText, setFilterText, filterError, replacer],
+  );
+
+  return <JsonContext.Provider value={context}>{children}</JsonContext.Provider>;
+});
+
+JsonRoot.displayName = JSON_ROOT_NAME;
 
+//
+// Content
+//
+
+const JSON_CONTENT_NAME = 'Json.Content';
+
+type JsonContentProps = ComposableProps;
+
+/** Layout container for Json composite parts. */
+const JsonContent = composable<HTMLDivElement, JsonContentProps>(({ children, ...props }, forwardedRef) => {
   return (
-    <div className='flex flex-col grow overflow-hidden'>
-      <Input.Root validationValence={error ? 'error' : 'success'}>
+    <div {...composableProps(props, { classNames: 'flex flex-col h-full min-h-0 overflow-hidden' })} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+JsonContent.displayName = JSON_CONTENT_NAME;
+
+//
+// Filter
+//
+
+const JSON_FILTER_NAME = 'Json.Filter';
+
+type JsonFilterProps = ComposableProps<{
+  placeholder?: string;
+}>;
+
+/** JSONPath filter input. Must be used within Json.Root. */
+const JsonFilter = forwardRef<HTMLInputElement, JsonFilterProps>(
+  ({ classNames, placeholder = 'JSONPath (e.g., $.graph.nodes)' }, forwardedRef) => {
+    const { filterText, setFilterText, filterError } = useJsonContext(JSON_FILTER_NAME);
+
+    return (
+      <Input.Root validationValence={filterError ? 'error' : 'success'}>
         <Input.TextInput
-          classNames={['p-1 pli-2 font-mono', error && 'border-red-500']}
+          classNames={['p-1 px-2 font-mono', filterError && 'border-rose-500', classNames]}
           variant='subdued'
-          value={text}
-          onChange={(event) => setText(event.target.value)}
-          placeholder='JSONPath (e.g., $.graph.nodes)'
+          value={filterText}
+          placeholder={placeholder}
+          onChange={(event) => setFilterText(event.target.value)}
+          ref={forwardedRef}
         />
       </Input.Root>
-      <SyntaxHighlighter language='json' classNames={[defaultClassNames, classNames]} data-testid={testId}>
+    );
+  },
+);
+
+JsonFilter.displayName = JSON_FILTER_NAME;
+
+//
+// Data
+//
+
+const JSON_DATA_NAME = 'Json.Data';
+
+type JsonDataProps = ComposableProps<{
+  data?: any;
+  replacer?: CreateReplacerProps;
+  testId?: string;
+}>;
+
+/** Syntax-highlighted JSON display. Works standalone or within Json.Root. */
+const JsonData = composable<HTMLDivElement, JsonDataProps>(
+  ({ data: dataProp, replacer: replacerProp, testId, ...props }, forwardedRef) => {
+    const context = useOptionalJsonContext();
+    const data = dataProp ?? context?.filteredData;
+    const replacer = replacerProp ?? context?.replacer;
+
+    return (
+      <SyntaxHighlighter
+        {...composableProps(props, { classNames: 'flex-1 min-h-0 w-full py-1 px-2 overflow-y-auto text-sm' })}
+        language='json'
+        data-testid={testId}
+        ref={forwardedRef}
+      >
         {safeStringify(data, replacer && createReplacer(replacer), 2)}
       </SyntaxHighlighter>
-    </div>
-  );
+    );
+  },
+);
+
+JsonData.displayName = JSON_DATA_NAME;
+
+//
+// Json
+//
+
+export const Json = {
+  Root: JsonRoot,
+  Content: JsonContent,
+  Filter: JsonFilter,
+  Data: JsonData,
 };
+
+export type { JsonRootProps, JsonContentProps, JsonFilterProps, JsonDataProps };

package/src/Json/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './Json';
+export { Json, type JsonRootProps, type JsonContentProps, type JsonFilterProps, type JsonDataProps } from './Json';

package/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx

@@ -4,15 +4,20 @@
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { trim } from '@dxos/util';
 
+// @ts-ignore - Vite raw import.
+import TEXT from '../../package.json?raw';
 import { SyntaxHighlighter } from './SyntaxHighlighter';
 
 const meta = {
   title: 'ui/react-ui-syntax-highlighter/SyntaxHighlighter',
   component: SyntaxHighlighter,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof SyntaxHighlighter>;
 
 export default meta;
@@ -23,7 +28,7 @@ export const Default: Story = {
   args: {
     language: 'json',
     classNames: 'text-sm',
-    children: JSON.stringify({ message: 'DXOS', initialized: true }, null, 2),
+    children: TEXT,
   },
 };
 
@@ -32,7 +37,7 @@ export const Typescript: Story = {
     language: 'tsx',
     children: trim`
       import React from 'react'
-      
+
       const Test = () => {
         return <div>Test</div>
       }
@@ -40,8 +45,4 @@ export const Typescript: Story = {
   },
 };
 
-export const Empty: Story = {
-  args: {
-    children: false,
-  },
-};
+export const Empty: Story = {};

package/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -2,21 +2,24 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';
 import NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';
 import { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
-import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { ScrollArea, useThemeContext } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/ui-theme';
 
 const zeroWidthSpace = '\u200b';
 
-export type SyntaxHighlighterProps = ThemedClassName<
-  NaturalSyntaxHighlighterProps & {
-    fallback?: string;
-  }
->;
+const languages = {
+  js: 'javascript',
+  ts: 'typescript',
+};
+
+export type SyntaxHighlighterProps = NaturalSyntaxHighlighterProps & {
+  fallback?: string;
+};
 
 /**
  * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.
@@ -25,39 +28,38 @@ 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,
-  language = 'text',
-  fallback = zeroWidthSpace,
-  ...props
-}: SyntaxHighlighterProps) => {
-  const { themeMode } = useThemeContext();
-
-  return (
-    <div className={mx('flex is-full p-1 overflow-hidden', classNames)}>
-      <NativeSyntaxHighlighter
-        className='!m-0 is-full overflow-auto scrollbar-thin'
-        language={languages[language as keyof typeof languages] || language}
-        style={themeMode === 'dark' ? dark : light}
-        customStyle={{
-          background: 'unset',
-          border: 'none',
-          boxShadow: 'none',
-          padding: 0,
-          margin: 0,
-        }}
-        {...props}
-      >
-        {/* Non-empty fallback prevents collapse. */}
-        {children || fallback}
-      </NativeSyntaxHighlighter>
-    </div>
-  );
-};
+export const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(
+  (
+    { children, language = 'text', fallback = zeroWidthSpace, classNames, className, style, ...nativeProps },
+    forwardedRef,
+  ) => {
+    const { themeMode } = useThemeContext();
 
-const languages = {
-  js: 'javascript',
-  ts: 'typescript',
-};
+    return (
+      <ScrollArea.Root {...composableProps({ classNames, className })} thin ref={forwardedRef}>
+        <ScrollArea.Viewport>
+          {/* NOTE: The div prevents NativeSyntaxHighlighter from managing scrolling. */}
+          <div role='none'>
+            <NativeSyntaxHighlighter
+              language={languages[language as keyof typeof languages] || language}
+              style={(style as { [key: string]: CSSProperties }) ?? (themeMode === 'dark' ? dark : light)}
+              customStyle={{
+                background: 'unset',
+                border: 'none',
+                boxShadow: 'none',
+                padding: 0,
+                margin: 0,
+              }}
+              {...nativeProps}
+            >
+              {/* Non-empty fallback prevents collapse. */}
+              {children || fallback}
+            </NativeSyntaxHighlighter>
+          </div>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    );
+  },
+);
+
+SyntaxHighlighter.displayName = 'SyntaxHighlighter';