Add JSON and URI datatypes #658 #1024

Author: Polleps

Cargo.lock

@@ -11,5 +11,7 @@ export const DatatypeToTSTypeMap = {
   [Datatype.STRING]: 'string',
   [Datatype.SLUG]: 'string',
   [Datatype.MARKDOWN]: 'string',
+  [Datatype.URI]: 'string',
+  [Datatype.JSON]: 'unknown',
   [Datatype.UNKNOWN]: 'JSONValue',
 };

browser/cli/src/DatatypeToTSTypeMap.ts

@@ -13,7 +13,7 @@ export class PropertyRecord {
     ]);
   }
 
-  public repordPropertyDefined(subject: string) {
+  public reportPropertyDefined(subject: string) {
     this.knownProperties.add(subject);
 
     if (this.missingProperties.has(subject)) {

browser/cli/src/PropertyRecord.ts

@@ -52,7 +52,7 @@ export const generateOntology = async (
   const properties = dedupe(ontology.props.properties ?? []);
 
   for (const prop of properties) {
-    propertyRecord.repordPropertyDefined(prop);
+    propertyRecord.reportPropertyDefined(prop);
   }
 
   const [baseObjStr, reverseMapping] = await generateBaseObject(ontology);

browser/cli/src/generateOntology.ts

@@ -8,6 +8,8 @@
     "@bugsnag/core": "^7.25.0",
     "@bugsnag/js": "^7.25.0",
     "@bugsnag/plugin-react": "^7.25.0",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lint": "^6.8.5",
     "@dagrejs/dagre": "^1.1.4",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -27,6 +29,9 @@
     "@tiptap/starter-kit": "^2.9.1",
     "@tiptap/suggestion": "^2.9.1",
     "@tomic/react": "workspace:*",
+    "@uiw/codemirror-theme-github": "^4.24.1",
+    "@uiw/react-codemirror": "^4.24.1",
+    "clsx": "^2.1.1",
     "emoji-mart": "^5.6.0",
     "polished": "^4.3.1",
     "prismjs": "^1.29.0",

browser/data-browser/package.json

@@ -0,0 +1,127 @@
+import CodeMirror, {
+  type BasicSetupOptions,
+  type EditorView,
+} from '@uiw/react-codemirror';
+import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
+import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { linter, type Diagnostic } from '@codemirror/lint';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { styled, useTheme } from 'styled-components';
+
+export interface JSONEditorProps {
+  initialValue?: string;
+  showErrorStyling?: boolean;
+  required?: boolean;
+  maxWidth?: string;
+  onChange: (value: string) => void;
+  onValidationChange?: (isValid: boolean) => void;
+  onBlur?: () => void;
+}
+
+const basicSetup: BasicSetupOptions = {
+  lineNumbers: false,
+  foldGutter: false,
+  highlightActiveLine: true,
+  indentOnInput: true,
+};
+
+/**
+ * ASYNC COMPONENT DO NOT IMPORT DIRECTLY, USE {@link JSONEditor.tsx}.
+ */
+const AsyncJSONEditor: React.FC<JSONEditorProps> = ({
+  initialValue,
+  showErrorStyling,
+  required,
+  maxWidth,
+  onChange,
+  onValidationChange,
+  onBlur,
+}) => {
+  const theme = useTheme();
+  const [value, setValue] = useState(initialValue ?? '');
+  const latestDiagnostics = useRef<Diagnostic[]>([]);
+  // We need to use callback because the compiler can't optimize the CodeMirror component.
+  const handleChange = useCallback(
+    (val: string) => {
+      setValue(val);
+      onChange(val);
+    },
+    [onChange],
+  );
+
+  // Wrap jsonParseLinter so we can tap into diagnostics
+  const validationLinter = useCallback(() => {
+    const delegate = jsonParseLinter();
+
+    return (view: EditorView) => {
+      const isEmpty = view.state.doc.length === 0;
+      let diagnostics = delegate(view);
+
+      if (!required && isEmpty) {
+        diagnostics = [];
+      }
+
+      // Compare the diagnostics so we don't call the onValidationChange callback unnecessarily.
+      const prev = latestDiagnostics.current;
+      const changed =
+        diagnostics.length !== prev.length ||
+        diagnostics.some(
+          (d, i) => d.from !== prev[i]?.from || d.message !== prev[i]?.message,
+        );
+
+      if (changed) {
+        latestDiagnostics.current = diagnostics;
+        onValidationChange?.(diagnostics.length === 0);
+      }
+
+      return diagnostics;
+    };
+  }, [onValidationChange]);
+
+  const extensions = useMemo(
+    // eslint-disable-next-line react-compiler/react-compiler
+    () => [json(), linter(validationLinter())],
+    [validationLinter],
+  );
+
+  return (
+    <CodeEditorWrapper
+      onBlur={() => onBlur?.()}
+      className={showErrorStyling ? 'json-editor__error' : ''}
+    >
+      <CodeMirror
+        value={value}
+        onChange={handleChange}
+        // We disable tab indenting because that would mess with accessibility/keyboard navigation.
+        indentWithTab={false}
+        theme={theme.darkMode ? githubDark : githubLight}
+        minHeight='150px'
+        maxHeight='40rem'
+        maxWidth={maxWidth ?? '100%'}
+        basicSetup={basicSetup}
+        extensions={extensions}
+      />
+    </CodeEditorWrapper>
+  );
+};
+
+export default AsyncJSONEditor;
+
+const CodeEditorWrapper = styled.div`
+  display: contents;
+
+  &.json-editor__error .cm-editor {
+    border-color: ${p => p.theme.colors.alert} !important;
+  }
+
+  & .cm-editor {
+    border: 1px solid ${p => p.theme.colors.bg2};
+    border-radius: ${p => p.theme.radius};
+    /* padding: ${p => p.theme.size(2)}; */
+    outline: none;
+
+    &:focus-within {
+      border-color: ${p => p.theme.colors.main};
+    }
+  }
+`;

browser/data-browser/src/chunks/CodeEditor/AsyncJSONEditor.tsx

@@ -5,6 +5,7 @@ import { FaExternalLinkAlt } from 'react-icons/fa';
 import { ErrorLook } from '../components/ErrorLook';
 import { isRunningInTauri } from '../helpers/tauri';
 import { useNavigateWithTransition } from '../hooks/useNavigateWithTransition';
+import clsx from 'clsx';
 
 export interface AtomicLinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -79,7 +80,7 @@ export const AtomicLink = forwardRef<HTMLAnchorElement, AtomicLinkProps>(
     return (
       <LinkView
         clean={clean}
-        className={className}
+        className={clsx(className, { 'atomic-link_external': href && !clean })}
         about={subject}
         onClick={handleClick}
         href={hrefConstructed}
@@ -92,7 +93,7 @@ export const AtomicLink = forwardRef<HTMLAnchorElement, AtomicLinkProps>(
         ref={ref}
       >
         {children}
-        {href && !clean && <FaExternalLinkAlt />}
+        {href && !clean && <FaExternalLinkAlt size='0.8em' />}
       </LinkView>
     );
   },
@@ -121,4 +122,10 @@ export const LinkView = styled.a<LinkViewProps>`
   &:active {
     color: ${props => props.theme.colors.mainDark};
   }
+
+  &.atomic-link_external {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6ch;
+  }
 `;

browser/data-browser/src/components/AtomicLink.tsx

@@ -0,0 +1,21 @@
+import { lazy, Suspense } from 'react';
+import type { JSONEditorProps } from '../chunks/CodeEditor/AsyncJSONEditor';
+import { styled } from 'styled-components';
+
+const AsyncJSONEditor = lazy(
+  () => import('../chunks/CodeEditor/AsyncJSONEditor'),
+);
+
+export const JSONEditor: React.FC<JSONEditorProps> = props => {
+  return (
+    <Suspense fallback={<Loader />}>
+      <AsyncJSONEditor {...props} />
+    </Suspense>
+  );
+};
+
+const Loader = styled.div`
+  background-color: ${p => p.theme.colors.bg};
+  border: 1px solid ${p => p.theme.colors.bg2};
+  height: 150px;
+`;

browser/data-browser/src/components/JSONEditor.tsx

@@ -9,6 +9,7 @@ import { ALL_PROPS_CONTAINER } from '../helpers/containers';
 import { LoaderInline } from './Loader';
 
 import type { JSX } from 'react';
+import { JSON_RENDERER_CLASS } from './datatypes/JSON';
 
 type Props = {
   propertyURL: string;
@@ -82,6 +83,11 @@ export const PropValRow = styled.div<PropValRowProps>`
   grid-template-rows: auto 1fr;
 
   @container ${ALL_PROPS_CONTAINER} (min-width: 500px) {
+    &:has(.${JSON_RENDERER_CLASS}) {
+      grid-template-columns: 1fr;
+      gap: 0.5rem;
+    }
+
     grid-template-columns: 23ch auto;
     grid-template-rows: 1fr;
   }

browser/data-browser/src/components/PropVal.tsx

@@ -5,7 +5,6 @@ export interface SideBarItemProps {
 }
 
 /** SideBarItem should probably be wrapped in an AtomicLink for optimal behavior */
-// eslint-disable-next-line prettier/prettier
 export const SideBarItem = styled('span')<SideBarItemProps>`
   display: flex;
   min-height: ${props => props.theme.margin * 0.5 + 1}rem;