@arpproject/recrate 0.1.2

package/src/crate-builder/RenderEntity/layout.ts

@@ -0,0 +1,220 @@
+import difference from "lodash/difference";
+import orderBy from "lodash/orderBy";
+import uniqBy from "lodash/uniqBy";
+const coreProperties = ["@id", "@type", "@reverse", "name"];
+import type {
+    ProfileManagerType,
+    ProfileInput,
+    ProfileLayout,
+    ProfileLayoutGroup,
+    NormalisedEntityDefinition,
+} from "../types";
+
+export function applyLayout({
+    configuration,
+    entity,
+    extraProperties,
+    profileManager: pm,
+}: {
+    configuration: { [key: string]: any };
+    entity: NormalisedEntityDefinition;
+    extraProperties: string[];
+    profileManager: ProfileManagerType;
+}): {
+    renderTabs: boolean;
+    missingRequiredData: boolean;
+    entity: NormalisedEntityDefinition;
+    tabs: ProfileLayoutGroup[];
+} {
+    let missingRequiredData = false;
+    let inputs = [];
+
+    ({ missingRequiredData, entity, inputs } = getProfileInputs({
+        configuration,
+        entity,
+        pm,
+    }));
+
+    if (extraProperties.length) {
+        extraProperties.forEach((property) => {
+            if (!entity[property]) entity[property] = [];
+        });
+    }
+    let layouts = pm.getLayout({ entity });
+    let renderTabs = false;
+    let tabs = [] as ProfileLayoutGroup[];
+    if (layouts) {
+        renderTabs = true;
+        tabs = applyLayoutToEntity({ layouts, inputs, entity });
+        tabs = applyTabDataIndicators({ configuration, tabs, entity });
+    }
+
+    return { renderTabs, missingRequiredData, entity, tabs };
+}
+
+function getProfileInputs({
+    configuration,
+    entity,
+    pm,
+}: {
+    configuration: { [key: string]: any };
+    entity: NormalisedEntityDefinition;
+    pm: ProfileManagerType;
+}): {
+    missingRequiredData: boolean;
+    entity: NormalisedEntityDefinition;
+    inputs: ProfileInput[];
+} {
+    const inputs = pm.getInputsFromProfile({ entity });
+
+    let missingRequiredData = false;
+    for (let input of inputs) {
+        if (input.name === "name") continue;
+        if (!input.id) {
+            console.error(`Excluding invalid input - missing id: ${input}`);
+            continue;
+        }
+        if (!entity[input.name] && !configuration.readonly) {
+            entity[input.name] = [];
+        }
+
+        if (input.required && (!entity[input.name] || !entity[input.name].length)) {
+            missingRequiredData = true;
+        }
+    }
+    return { missingRequiredData, entity, inputs };
+}
+
+function applyLayoutToEntity({
+    layouts,
+    inputs,
+    entity,
+}: {
+    layouts: ProfileLayout;
+    inputs: ProfileInput[];
+    entity: NormalisedEntityDefinition;
+}): ProfileLayoutGroup[] {
+    // normalise the layouts
+    let sort = false;
+    for (let name of Object.keys(layouts)) {
+        layouts[name].name = name;
+        layouts[name].inputs = [];
+        if (!layouts[name].properties) layouts[name].properties = [];
+        if (layouts[name].order) sort = true;
+    }
+
+    // sort the profile inputs into their groups
+    for (let input of inputs) {
+        if (coreProperties.includes(input.name)) continue;
+        if (!entity[input.name]) continue;
+        if (input.hide) continue;
+        if (input.group && layouts[input.group]) {
+            layouts[input.group].inputs.push(input);
+        }
+    }
+
+    // now sort any ungrouped inputs using the properties
+    //   array in each layout
+    let ungroupedInputs = [];
+    for (let input of inputs) {
+        if (coreProperties.includes(input.name)) continue;
+        if (!entity[input.name]) continue;
+        if (input?.hide) continue;
+        if (input.group && layouts[input.group]) continue;
+        let matched = false;
+        for (let name of Object.keys(layouts)) {
+            if (
+                layouts[name] &&
+                layouts[name].properties &&
+                (layouts[name].properties.includes(input.id) ||
+                    layouts[name].properties.includes(input.name))
+            ) {
+                layouts[name].inputs.push(input);
+                matched = true;
+            }
+        }
+        if (!matched) ungroupedInputs.push(input);
+    }
+
+    // and any that still aren't part of a group go into overflow
+    for (let input of ungroupedInputs) {
+        layouts.overflow.inputs.push(input);
+    }
+
+    // get a list of the properties defined on the entity
+    //   but which have no input definition and pop them
+    //   into the overflow group with a default Text configuration
+    let profileInputs = inputs.map((i) => i.name);
+    let entityProperties = Object.keys(entity);
+    let missingInputs = difference(entityProperties, profileInputs);
+    for (let input of missingInputs) {
+        if (coreProperties.includes(input)) continue;
+        layouts.overflow.inputs.push({
+            id: "",
+            name: input,
+            multiple: true,
+            type: ["Text"],
+        });
+    }
+
+    let tabs: any[] = Object.keys(layouts)
+        .map((k) => layouts[k])
+        .filter((t) => t.name !== "appliesTo");
+    if (sort) tabs = orderBy(tabs, "order");
+
+    // if a properties array is defined
+    //  reorder the inputs by the order in that array
+    for (let tab of tabs) {
+        if (tab.properties.length) {
+            let orderedInputs = [];
+            let otherInputs = [];
+            for (let property of tab.properties) {
+                for (let input of tab.inputs) {
+                    if ([input.name, input.id].includes(property)) {
+                        orderedInputs.push(input);
+                    } else {
+                        otherInputs.push(input);
+                    }
+                }
+            }
+            orderedInputs = uniqBy(orderedInputs, "name");
+            otherInputs = uniqBy(otherInputs, "name");
+            otherInputs = difference(otherInputs, orderedInputs);
+            tab.inputs = [...orderedInputs, ...otherInputs];
+        }
+    }
+    return tabs;
+}
+
+function applyTabDataIndicators({
+    configuration,
+    tabs,
+    entity,
+}: {
+    configuration: { [key: string]: any };
+    tabs: ProfileLayoutGroup[];
+    entity: NormalisedEntityDefinition;
+}): ProfileLayoutGroup[] {
+    // special case: component in readonly mode
+    if (configuration.readonly) {
+        tabs = tabs.map((tab) => {
+            tab.hasData = false;
+            tab.missingRequiredData = false;
+            return tab;
+        });
+    } else {
+        for (let tab of tabs) {
+            tab.missingRequiredData = false;
+            tab.hasData = false;
+            for (let input of tab.inputs) {
+                if (input.required && !entity[input.name].length) {
+                    tab.missingRequiredData = true;
+                }
+                if (entity[input.name].length) {
+                    tab.hasData = true;
+                }
+            }
+        }
+    }
+    return tabs;
+}

package/src/crate-builder/Shell.tsx

@@ -0,0 +1,323 @@
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  useContext,
+  JSX,
+} from "react";
+//import RenderEntity from "./RenderEntity/Shell"; 
+import RenderEntity from "./RenderEntity/Shell2";
+import {
+  CrateManager,
+} from "./CrateManager/crate-manager";
+import {
+  ProfileManager,
+} from "./CrateManager/profile-manager";
+import { useStateStore } from "./store";
+import i18next from "./i18n";
+import isEmpty from "lodash/isEmpty";
+import isFunction from "lodash/isFunction";
+import { CrateManagerType, ProfileManagerType, UnverifiedCrate } from "./types"; // Add appropriate types
+import { propertyDefinitions } from "./property-definitions";
+import { Lookup } from "./RenderEntity/auto-complete.lib";
+
+export interface DescriboCrateBuilderProps {
+  crate?: CrateManagerType["crate"];
+  profile?: ProfileManagerType["profile"];
+  entityId?: string;
+  lookup?: any;
+  enableContextEditor?: boolean;
+  enableCratePreview?: boolean;
+  enableBrowseEntities?: boolean;
+  enableTemplateSave?: boolean;
+  enableReverseLinkBrowser?: boolean;
+  enableUrlMarkup?: boolean;
+  enableEntityTimestamps?: boolean;
+  purgeUnlinkedEntities?: boolean;
+  readonly?: boolean;
+  webComponent?: boolean;
+  tabLocation?: string;
+  showControls?: boolean;
+  language?: string;
+  resetTabOnEntityChange?: boolean;
+  resetTabOnProfileChange?: boolean;
+  onReady?: () => void;
+  onError?: (errors: any) => void;
+  onWarning?: (warnings: any) => void;
+  onNavigation?: (info: { "@id": string; "@type": string[]; name: string }) => void;
+  onSaveCrate?: (saveData: {crate: any}) => void,
+  onSaveEntityTemplate?: (entity: any) => void;
+}
+
+
+// Use propertyDefinitions to define props
+export const ProfileManagerContext = React.createContext<any>(null);
+export const CrateManagerContext = React.createContext<any>(null);
+export const LookupsContext = React.createContext<any>(null);
+
+export function DescriboCrateBuilder(props: DescriboCrateBuilderProps): JSX.Element {
+  const {
+    crate,
+    profile,
+    entityId,
+    lookup,
+    enableContextEditor = propertyDefinitions.enableContextEditor.default,
+    enableCratePreview = propertyDefinitions.enableCratePreview.default,
+    enableBrowseEntities = propertyDefinitions.enableBrowseEntities.default,
+    enableTemplateSave = propertyDefinitions.enableTemplateSave.default,
+    enableReverseLinkBrowser = propertyDefinitions.enableReverseLinkBrowser.default,
+    enableUrlMarkup = propertyDefinitions.enableUrlMarkup.default,
+    enableEntityTimestamps = propertyDefinitions.enableEntityTimestamps.default,
+    purgeUnlinkedEntities = propertyDefinitions.purgeUnlinkedEntities.default,
+    readonly = propertyDefinitions.readonly.default,
+    webComponent = propertyDefinitions.webComponent.default,
+    tabLocation = propertyDefinitions.tabLocation.default,
+    showControls = propertyDefinitions.showControls.default,
+    language = propertyDefinitions.language.default,
+    resetTabOnEntityChange = false,
+    resetTabOnProfileChange = false,
+    onReady,
+    onError,
+    onWarning,
+    onNavigation,
+    onSaveCrate,
+    onSaveEntityTemplate,
+  } = props;
+
+  console.log("DescriboCrateBuilder props:", { crate, profile, entityId });
+  const [ready, setReady] = useState(false);
+  const [error, setError] = useState(false);
+  const [contextEntity, setContextEntity] = useState<any | null>(null);
+  const [cm, setCm] = useState<CrateManager | null>(null);
+  const [pm, setPm] = useState<ProfileManager | null>(null);
+  const [lookups, setLookups] = useState<typeof propertyDefinitions.lookup | null>(null);
+  const state = useStateStore();
+  const renderEntityRef = useRef<any>(null);
+  const keys = useRef({ cm: 0, pm: 0, lookups: 0 });
+
+  const configuration = useMemo(() => {
+    const config = {
+      enableContextEditor,
+      enableCratePreview,
+      enableBrowseEntities,
+      enableTemplateSave,
+      enableReverseLinkBrowser,
+      enableUrlMarkup,
+      enableEntityTimestamps,
+      purgeUnlinkedEntities,
+      readonly,
+      webComponent,
+      tabLocation,
+      showControls,
+      language,
+      enableTemplateLookups: false,
+      enableDataPackLookups: false,
+    };
+
+
+
+    if (lookup) {
+      if (isFunction(lookup.entityTemplates)) {
+        config.enableTemplateLookups = true;
+      }
+      if (isFunction(lookup.dataPacks)) {
+        config.enableDataPackLookups = true;
+      }
+    }
+
+    return config;
+  }, [
+    enableContextEditor,
+    enableCratePreview,
+    enableBrowseEntities,
+    enableTemplateSave,
+    enableReverseLinkBrowser,
+    enableUrlMarkup,
+    enableEntityTimestamps,
+    purgeUnlinkedEntities,
+    readonly,
+    webComponent,
+    tabLocation,
+    showControls,
+    language,
+    lookup,
+  ]);
+
+  const init = useCallback(async () => {
+
+    console.log("Initializing with crate:", crate);
+    console.log("Profile loaded:", profile);
+
+    i18next.changeLanguage(language);
+
+    if (!crate || isEmpty(crate)) {
+      setReady(false);
+      setContextEntity(null);
+      setError(false);
+      return;
+    }
+
+    const newCm = new CrateManager({
+      crate: crate as UnverifiedCrate,
+      entityTimestamps: enableEntityTimestamps,
+    });
+
+    console.log("Entity:", newCm.getEntity({ id: entityId || "./" }));
+
+    // Create a deep clone of the profile to avoid mutation issues
+    const profileClone = profile ? JSON.parse(JSON.stringify(profile)) : {};
+
+    const newPm = new ProfileManager({
+      profile: profileClone,
+    });
+
+    // Add a key property to the ProfileManager for tracking changes
+    newPm.$key = ++keys.current.pm;
+
+    newCm.setProfileManager(newPm as ProfileManagerType);
+
+    // Only set context if it exists
+    if (newPm.context) newCm.setContext(newPm.context);
+
+    if (lookup) {
+      setLookups({ ...lookup, $key: ++keys.current.lookups });
+    }
+
+    const errors = newCm.getErrors();
+    if (errors.hasError) {
+      onError?.({ errors });  // Pass errors wrapped in an object to match Vue implementation
+      setReady(false);
+      //setError(true);
+      console.error("❌ CrateManager reported errors:", errors);
+      return;
+    }
+
+    const warnings = newCm.getWarnings();
+    if (warnings.hasWarning) {
+      onWarning?.({ warnings });  // Pass warnings wrapped in an object
+    }
+
+    setCm(newCm);
+    setPm(newPm);
+    setError(false);
+
+    // Force state update to ensure UI refreshes
+    state.configuration = configuration;
+
+    try {
+      // Add error handling for entity setting
+      if (entityId) {
+        handleSetCurrentEntity({ id: entityId });
+      } else {
+        // Make sure root entity exists and can be set
+        const rootEntity = newCm.getEntity({ id: "./" });
+        if (!isEmpty(rootEntity)) {
+          setContextEntity(rootEntity);
+          state.editorState.push({ id: rootEntity["@id"] });
+        } else {
+          console.warn("Root entity './' not found");
+          setError(true);
+          return;
+        }
+      }
+
+      setReady(true);
+      onReady?.();
+    } catch (error) {
+      console.error("Error setting current entity:", error);
+      setError(true);
+      onError?.({ error: "Failed to initialize entity" });
+    }
+  }, [crate, profile, entityId, lookup, configuration]);
+
+  const handleSetCurrentEntity = useCallback((params: { id: string; updateState?: boolean }) => {
+    const { id, updateState = true } = params;
+    if (!id || !cm) return;
+
+    try {
+      const entity = cm.getEntity({ id });
+      if (!isEmpty(entity)) {
+        setContextEntity(entity);
+        onNavigation?.({
+          "@id": entity["@id"],
+          "@type": entity["@type"],
+          name: entity.name,
+        });
+
+        if (updateState) {
+          state.editorState.push({ id: entity["@id"] });
+        }
+      } else {
+        console.warn(`Entity with id ${id} not found`);
+        // Try to fall back to root entity if not already trying to load it
+        if (id !== "./") {
+          handleSetCurrentEntity({ id: "./" });
+        }
+      }
+    } catch (error) {
+      console.error("Error in handleSetCurrentEntity:", error);
+      onError?.({ error: "Failed to set entity" });
+    }
+  }, [cm, onNavigation]);
+
+  const saveEntityAsTemplate = () => {
+    if (!cm || !contextEntity) return;
+    const template = cm.exportEntityTemplate({
+      id: contextEntity["@id"],
+      resolveDepth: 1, // Default resolveDepth or adjust as needed
+    });
+    onSaveEntityTemplate?.(template);
+  };
+
+  const handleWarning = () => {
+    onWarning?.({});
+  };
+
+  const handleError = () => {
+    onError?.({});
+  };
+
+  useEffect(() => {
+    state.editorState.reset();
+    init();
+  }, [crate, profile, init]);
+
+  useEffect(() => {
+    if (entityId && entityId !== contextEntity?.["@id"]) {
+      handleSetCurrentEntity({ id: entityId }); // Pass an object with the id property
+    }
+  }, [entityId, contextEntity, handleSetCurrentEntity]);
+
+  const saveCrate = () => {
+    if (!cm) return;
+    if (purgeUnlinkedEntities) {
+      cm.purgeUnlinkedEntities();
+    }
+    const exported = cm.exportCrate();
+    onSaveCrate?.({ crate: exported });
+  };
+
+  return (
+    <ProfileManagerContext.Provider value={pm}>
+      <CrateManagerContext.Provider value={cm}>
+        <LookupsContext.Provider value={lookups}>
+          {ready && !error && contextEntity && (
+            <RenderEntity
+              ref={renderEntityRef}
+              entity={contextEntity}
+              onLoadEntity={handleSetCurrentEntity}
+              onSaveCrate={saveCrate}
+              onSaveEntityTemplate={saveEntityAsTemplate}
+              onWarning={handleWarning}
+              onError={handleError}
+            />
+          )}
+        </LookupsContext.Provider>
+      </CrateManagerContext.Provider>
+    </ProfileManagerContext.Provider>
+  );
+};
+
+export default DescriboCrateBuilder;

package/src/crate-builder/component.css

@@ -0,0 +1,65 @@
+.el-tabs__item {
+    height: unset;
+}
+
+.el-select-dropdown__wrap {
+    max-height: 500px !important;
+}
+
+.el-select-group__title {
+    font-size: 14px !important;
+}
+
+/* ::-webkit-scrollbar {
+    display: none;
+} */
+
+/* Customize website's scrollbar like Mac OS
+Not supports in Firefox and IE */
+.scrollbar {
+    overflow: overlay
+}
+
+/* total width */
+.scrollbar::-webkit-scrollbar {
+    background-color: rgba(0, 0, 0, 0);
+    width: 16px;
+    height: 16px;
+    z-index: 999999;
+}
+
+/* background of the scrollbar except button or resizer */
+.scrollbar::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+/* scrollbar itself */
+.scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0);
+    border-radius: 16px;
+    border: 0px solid #fff;
+}
+
+/* set button(top and bottom of the scrollbar) */
+.scrollbar::-webkit-scrollbar-button {
+    display: none;
+}
+
+
+/* scrollbar when element is hovered */
+.scrollbar:hover::-webkit-scrollbar-thumb {
+    background-color: #a0a0a5;
+    border: 4px solid #fff;
+}
+
+/* scrollbar when scrollbar is hovered */
+.scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: #a0a0a5;
+    border: 4px solid #f4f4f4
+}
+
+.cm-editor {
+    font-size: 12px;
+    height: 350px;
+    overflow: auto;
+  }