@dxos/react-ui-syntax-highlighter 0.8.4-main.d05673bc65 → 0.8.4-main.dfabb4ec29

package/src/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './Json';
+export * from './JsonHighlighter';
+export * from './Syntax';
 export * from './SyntaxHighlighter';

package/dist/types/src/Json/Json.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { type CreateReplacerProps } from '@dxos/util';
-export type JsonProps = ThemedClassName<{
-    data?: any;
-    filter?: boolean;
-    replacer?: CreateReplacerProps;
-    testId?: string;
-}>;
-export declare const Json: React.ForwardRefExoticComponent<Omit<{
-    data?: any;
-    filter?: boolean;
-    replacer?: CreateReplacerProps;
-    testId?: string;
-}, "className"> & {
-    classNames?: import("@dxos/ui-types").ClassNameValue;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const JsonFilter: React.ForwardRefExoticComponent<Omit<{
-    data?: any;
-    filter?: boolean;
-    replacer?: CreateReplacerProps;
-    testId?: string;
-}, "className"> & {
-    classNames?: import("@dxos/ui-types").ClassNameValue;
-} & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Json.d.ts.map

package/dist/types/src/Json/Json.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Json.d.ts","sourceRoot":"","sources":["../../../../src/Json/Json.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,KAAK,mBAAmB,EAAiC,MAAM,YAAY,CAAC;AAIrF,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IACtC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,eAAO,MAAM,IAAI;WANR,GAAG;aACD,OAAO;eACL,mBAAmB;aACrB,MAAM;;;wCAmBf,CAAC;AAEH,eAAO,MAAM,UAAU;WAxBd,GAAG;aACD,OAAO;eACL,mBAAmB;aACrB,MAAM;;;wCA8DhB,CAAC"}

package/dist/types/src/Json/Json.stories.d.ts

@@ -1,22 +0,0 @@
-import { type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { Json } from './Json';
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<Omit<{
-        data?: any;
-        filter?: boolean;
-        replacer?: import("@dxos/util").CreateReplacerProps;
-        testId?: string;
-    }, "className"> & {
-        classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & React.RefAttributes<HTMLDivElement>>;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default meta;
-type Story = StoryObj<typeof Json>;
-export declare const Default: Story;
-export declare const Filter: Story;
-export declare const Large: Story;
-export declare const Cycle: Story;
-//# sourceMappingURL=Json.stories.d.ts.map

package/dist/types/src/Json/Json.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Json.stories.d.ts","sourceRoot":"","sources":["../../../../src/Json/Json.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AA6C9B,QAAA,MAAM,IAAI;;;;;;;;;;;CAImB,CAAC;AAE9B,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAUF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC"}

package/dist/types/src/Json/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Json';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/Json/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Json/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}

package/src/Json/Json.stories.tsx

@@ -1,106 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-
-import { Json } from './Json';
-
-faker.seed(0);
-
-const createNode = () => {
-  const data: Record<string, any> = {};
-  const keys = [...Array(faker.number.int({ min: 1, max: 5 }))].map(() => faker.lorem.word());
-  keys.forEach((key) => {
-    switch (faker.helpers.arrayElement(['object', 'string', 'number', 'boolean', 'null'])) {
-      case 'object':
-        data[key] = createNode();
-        break;
-      case 'string':
-        data[key] = faker.lorem.word();
-        break;
-      case 'number':
-        data[key] = faker.number.int();
-        break;
-      case 'boolean':
-        data[key] = faker.datatype.boolean();
-        break;
-      case 'null':
-        data[key] = null;
-        break;
-    }
-  });
-
-  return data;
-};
-
-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) });
-      root.children = [...new Array(num)].map(() => {
-        return createChildren(createNode(), d + 1);
-      });
-    }
-
-    return root;
-  };
-
-  return createChildren(createNode());
-};
-
-const meta = {
-  title: 'ui/react-ui-syntax-highlighter/Json',
-  component: Json,
-  decorators: [withTheme(), withLayout({ layout: 'column' })],
-} satisfies Meta<typeof Json>;
-
-export default meta;
-
-type Story = StoryObj<typeof Json>;
-
-const data = createData();
-
-export const Default: Story = {
-  args: {
-    classNames: 'text-sm',
-    data,
-  },
-};
-
-export const Filter: Story = {
-  args: {
-    classNames: 'text-sm',
-    filter: true,
-    data,
-  },
-};
-
-export const Large: Story = {
-  args: {
-    classNames: 'text-sm',
-    filter: true,
-    data: createData({ depth: 5 }),
-    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

@@ -1,79 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { JSONPath } from 'jsonpath-plus';
-import React, { forwardRef, useEffect, useState } from 'react';
-
-import { Input, type ThemedClassName } from '@dxos/react-ui';
-import { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';
-
-import { SyntaxHighlighter } from '../SyntaxHighlighter';
-
-export type JsonProps = ThemedClassName<{
-  data?: any;
-  filter?: boolean;
-  replacer?: CreateReplacerProps;
-  testId?: string;
-}>;
-
-export const Json = forwardRef<HTMLDivElement, JsonProps>((props, forwardedRef) => {
-  if (props.filter) {
-    return <JsonFilter {...props} />;
-  }
-
-  const { classNames, data, replacer, testId } = props;
-  return (
-    <SyntaxHighlighter
-      language='json'
-      classNames={['w-full overflow-y-auto text-sm', classNames]}
-      data-testid={testId}
-      ref={forwardedRef}
-    >
-      {safeStringify(data, replacer && createReplacer(replacer), 2)}
-    </SyntaxHighlighter>
-  );
-});
-
-export const JsonFilter = forwardRef<HTMLDivElement, JsonProps>(
-  ({ classNames, data: initialData, replacer, testId }, forwardedRef) => {
-    const [data, setData] = useState(initialData);
-    const [text, setText] = useState('');
-    const [error, setError] = useState<Error | null>(null);
-
-    useEffect(() => {
-      if (!initialData || !text.trim().length) {
-        setData(initialData);
-      } else {
-        try {
-          setData(JSONPath({ path: text, json: initialData }));
-          setError(null);
-        } catch (err) {
-          setData(initialData);
-          setError(err as Error);
-        }
-      }
-    }, [initialData, text]); // TODO(burdon): Need structural diff.
-
-    return (
-      <div className='flex flex-col h-full overflow-hidden' ref={forwardedRef}>
-        <Input.Root validationValence={error ? 'error' : 'success'}>
-          <Input.TextInput
-            classNames={['p-1 px-2 font-mono', error && 'border-rose-500']}
-            variant='subdued'
-            value={text}
-            placeholder='JSONPath (e.g., $.graph.nodes)'
-            onChange={(event) => setText(event.target.value)}
-          />
-        </Input.Root>
-        <SyntaxHighlighter
-          language='json'
-          classNames={['w-full overflow-y-auto text-sm', classNames]}
-          data-testid={testId}
-        >
-          {safeStringify(data, replacer && createReplacer(replacer), 2)}
-        </SyntaxHighlighter>
-      </div>
-    );
-  },
-);