@arpproject/recrate 0.1.7 → 0.1.8

package/src/crate-builder/RenderEntity/Shell2.tsx

@@ -1,576 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useContext, useState, useEffect, useRef, useMemo } from 'react';
-import { Flex, Tabs, Drawer } from 'antd';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTriangleExclamation, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
-import { faCircleCheck, faCircleXmark } from '@fortawesome/free-regular-svg-icons';
-import EntityId from './EntityId';
-import EntityType from './EntityType';
-import EntityName from './EntityName';
-import EntityProperty from './EntityProperty';
-import RenderControls from './RenderControls';
-import RenderReverseConnections from './RenderReverseConnections';
-import { ProfileManagerContext, CrateManagerContext } from '../Shell';
-import { useStateStore } from '../store';
-import { applyLayout } from "./layout";
-import { isURL } from '../CrateManager/lib';
-
-interface RenderEntityProps {
-  entity: any;
-  onLoadEntity: (params: { id: string; updateState?: boolean }) => void;
-  onSaveCrate: () => void;
-  onSaveEntityTemplate: () => void;
-  onWarning: () => void;
-  onError: () => void;
-}
-
-const RenderEntity = forwardRef<any, RenderEntityProps>((props, ref) => {
-  const { entity, onLoadEntity, onSaveCrate, onSaveEntityTemplate, onWarning, onError } = props;
-  const state = useStateStore();
-  const profileManager = useContext(ProfileManagerContext);
-  const crateManager = useContext(CrateManagerContext);
-  
-  // State variables
-  const [contextEntity, setContextEntity] = useState<any>(entity);
-  const [activeTab, setActiveTab] = useState("about");
-  const [reverseSidebarVisible, setReverseSidebarVisible] = useState(false);
-  const [highlightRequiredProperties, setHighlightRequiredProperties] = useState(false);
-  const [missingRequiredData, setMissingRequiredData] = useState(false);
-  const [renderTabs, setRenderTabs] = useState(false);
-  const [extraProperties, setExtraProperties] = useState<string[]>([]);
-  const [savedProperty, setSavedProperty] = useState<string | undefined>(undefined);
-  const [tabs, setTabs] = useState<any[]>([]);
-  
-  // Expose methods to parent component
-  useImperativeHandle(ref, () => ({
-    setTab: (tabName: string) => {
-      setActiveTab(tabName);
-    },
-    toggleReverseLinkBrowser: () => {
-      setReverseSidebarVisible(!reverseSidebarVisible);
-    }
-  }));
-
-  // Initialize component with entity data
-  useEffect(() => {
-      setExtraProperties([]); // Reset extraProperties when entity changes
-      init({ entity });
-  }, [entity]);
-
-  // Force re-render when profile changes
-  useEffect(() => {
-    if (profileManager && profileManager.$key) {
-      const entityObj = crateManager.getEntity({ id: entity['@id'] });
-      init({ entity: entityObj });
-    }
-  }, [profileManager?.$key]);
-
-  // Initialize the component with entity data
-  const init = ({ entity }: { entity: any }) => {
-    if (!entity['@id']) return;
-    
-    // Scroll to top when entity changes
-    if (entity['@id'] !== contextEntity['@id']) {
-      window.scrollTo(0, 0);
-    }
-
-    // Apply layout based on profile and entity
-    const layout = applyLayout({
-      configuration: state.configuration,
-      profileManager,
-      entity,
-      extraProperties,
-    });
-
-    setContextEntity(layout.entity);
-    setRenderTabs(layout.renderTabs);
-    setMissingRequiredData(layout.missingRequiredData);
-    setTabs(layout.tabs);
-
-    // Update editor state with tab information
-    if (layout.renderTabs) {
-      state.editorState.update({ id: entity['@id'], tab: activeTab });
-    } else {
-      state.editorState.deleteFromState({ property: "tab" });
-    }
-  };
-
-  // Refresh the component with latest entity data
-  const refresh = () => {
-    const entityObj = crateManager.getEntity({ id: entity['@id'] });
-    init({ entity: entityObj });
-  };
-
-  // Save tab to editor state
-  const saveTabToState = (tabName: string) => {
-    state.editorState.update({ id: entity['@id'], tab: tabName });
-  };
-
-  // Add property placeholder
-  // Add this effect near your other useEffect hooks
-  useEffect(() => {
-      if (entity?.['@id']) {
-          const entityObj = crateManager.getEntity({ id: entity['@id'] });
-          init({ entity: entityObj });
-          refresh();
-      }
-  }, [extraProperties]); // This will run whenever extraProperties changes
-  
-  const handleAddPropertyPlaceholder = (property: string) => {
-      try {
-          const newExtraProperties = [...extraProperties, property];
-          setExtraProperties(newExtraProperties);
-      } catch (error) {
-          console.error(error);
-          onError();
-      }
-  };
-
-  // Notify that a property was saved (for highlighting)
-  const notifySave = (property: string) => {
-    setSavedProperty(property);
-    setTimeout(() => {
-      setSavedProperty(undefined);
-    }, 1500);
-  };
-
-  // Entity update handlers
-  const handleUpdateEntity = (data: { property: string; value: any }) => {
-    try {
-      // Don't update core properties if value hasn't changed
-      if (["@id", "@type", "name"].includes(data.property)) {
-        if (contextEntity[data.property] === data.value) return;
-      }
-
-      // Update the property
-      const updatedEntity = crateManager.updateProperty({
-        id: entity['@id'],
-        ...data
-      });
-
-      // Handle entity ID changes
-      if (updatedEntity["@id"] !== entity["@id"]) {
-        onLoadEntity({ id: updatedEntity["@id"] });
-      } else {
-        refresh();
-      }
-
-      // Update editor state if ID changed
-      if (data.property === "@id" && updatedEntity?.["@id"]) {
-        state.editorState.replaceId({ id: entity["@id"], newId: updatedEntity["@id"] });
-      }
-
-      onSaveCrate();
-      notifySave(data.property);
-    } catch (error) {
-      console.error(error)
-      onError();
-    }
-  };
-
-  const handleCreateProperty = (data: { property: string; value: any }) => {
-    try {
-      if (isURL(data.value) && state.configuration?.enableUrlMarkup) {
-        handleCreateEntity({
-          property: data.property,
-          json: {
-            "@id": data.value,
-            "@type": "URL",
-            name: data.value,
-          },
-        });
-      } else {
-        crateManager.setProperty({ 
-          id: entity['@id'], 
-          ...data 
-        });
-      }
-      refresh();
-      onSaveCrate();
-      notifySave(data.property);
-    } catch (error) {
-      onError();
-    }
-  };
-
-  const handleCreateEntity = (data: any) => {
-    try {
-      delete data.json?.type;
-      
-      crateManager.ingestAndLink({
-        id: entity['@id'],
-        property: data.property,
-        propertyId: data.propertyId,
-        json: data.json,
-      });
-      
-      let warnings = crateManager.getWarnings();
-      if (warnings.hasWarning) {
-        onWarning();
-      }
-      refresh();
-      onSaveCrate();
-      return data.json['@id'];
-    } catch (error) {
-      onError();
-      return null;
-    }
-  };
-
-  const handleLinkEntity = (data: any) => {
-    try {
-      crateManager.linkEntity({
-        id: entity['@id'],
-        property: data.property,
-        propertyId: data.propertyId,
-        value: { "@id": data.json["@id"] },
-      });
-      refresh();
-      onSaveCrate();
-    } catch (error) {
-      onError();
-    }
-  };
-
-  const handleDeleteProperty = (data: { property: string; idx: number }) => {
-    try {
-      crateManager.deleteProperty({
-        id: entity['@id'],
-        property: data.property,
-        idx: data.idx
-      });
-      refresh();
-      onSaveCrate();
-    } catch (error) {
-      onError();
-    }
-  };
-
-  const handleUnlinkEntity = (data: { property: string; tgtEntityId: string }) => {
-    try {
-      crateManager.unlinkEntity({
-        id: entity['@id'],
-        property: data.property,
-        value: { "@id": data.tgtEntityId },
-      });
-      refresh();
-      onSaveCrate();
-    } catch (error) {
-      console.error(error);
-      onError();
-    }
-  };
-
-  const handleDeleteEntity = (data: { id: string }) => {
-    try {
-      crateManager.deleteEntity({ id: data.id });
-      onLoadEntity({ id: './' }); // Navigate to root after deletion
-      onSaveCrate();
-    } catch (error) {
-      onError();
-    }
-  };
-
-  const handleUpdateContext = (context: any) => {
-    try {
-      crateManager.setContext(context);
-      onSaveCrate();
-    } catch (error) {
-      onError();
-    }
-  };
-
-  if (!entity || !entity['@id']) {
-    return <div>No entity selected</div>;
-  }
-
-  return (
-    <div className="flex flex-row">
-      <div className="flex flex-col w-full">
-        {state.configuration?.showControls && (
-          <div className="flex flex-row place-content-between pb-1 border-b border-slate-700">
-            <RenderControls
-              entity={contextEntity}
-              onLoadEntity={onLoadEntity}
-              onBack={() => state.editorState.back()}
-              onForward={() => state.editorState.forward()}
-              onAddPropertyPlaceholder={handleAddPropertyPlaceholder}
-              onDeleteEntity={handleDeleteEntity}
-              onSaveEntityTemplate={onSaveEntityTemplate}
-              onUpdateContext={handleUpdateContext}
-            />
-            <div className="flex-grow"></div>
-            
-            {/* Toggle reverse links panel button */}
-            {state.configuration?.enableReverseLinkBrowser && (
-              <button
-                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-sm"
-                onClick={() => setReverseSidebarVisible(!reverseSidebarVisible)}
-              >
-                <FontAwesomeIcon
-                  icon={reverseSidebarVisible ? faChevronRight : faChevronLeft}
-                  size="sm"
-                />
-              </button>
-            )}
-          </div>
-        )}
-
-        {/* Untabbed layout */}
-        {!renderTabs && (
-          <div>
-            <div className="flex flex-row space-x-2 my-2 p-2">
-              <div 
-                className={`flex-grow describo-property describo-property-name-id ${
-                  savedProperty === '@id' ? 'bg-green-200 rounded p-1 my-1' : ''
-                }`}
-              >
-                <EntityId entity={contextEntity} onUpdate={handleUpdateEntity} />
-              </div>
-              
-              {/* Highlight required properties button */}
-              {!state.configuration?.readonly && missingRequiredData && (
-                <button
-                  className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-                  onClick={() => setHighlightRequiredProperties(!highlightRequiredProperties)}
-                >
-                  <FontAwesomeIcon icon={faTriangleExclamation} size="lg" />
-                </button>
-              )}
-            </div>
-
-            <div className={`my-2 p-2 describo-property describo-property-name-type`}>
-              <EntityType entity={contextEntity} onUpdateEntity={handleUpdateEntity} />
-            </div>
-
-            <div 
-              className={`my-2 p-2 describo-property describo-property-name-name ${
-                savedProperty === 'name' ? 'bg-green-200 rounded p-1 my-1' : ''
-              }`}
-            >
-              <EntityName entity={contextEntity} onUpdate={handleUpdateEntity} />
-            </div>
-
-            {/* Render entity properties */}
-            {Object.keys(contextEntity).sort().map(property => {
-              if (!['@id', '@type', 'name', '@reverse'].includes(property)) {
-                return (
-                  <div 
-                    key={property}
-                    className={`my-2 hover:bg-sky-100 ${
-                      savedProperty === property ? 'bg-green-200 hover:bg-green-200' : ''
-                    }`}
-                  >
-                    <EntityProperty
-                      entity={contextEntity}
-                      property={property}
-                      values={Array.isArray(contextEntity[property]) ? contextEntity[property] : [contextEntity[property]]}
-                      highlightRequired={highlightRequiredProperties}
-                      savedProperty={savedProperty === property}
-                      onLoadEntity={onLoadEntity}
-                      onCreateEntity={handleCreateEntity}
-                      onLinkEntity={handleLinkEntity}
-                      onUnlinkEntity={handleUnlinkEntity}
-                      onCreateProperty={handleCreateProperty}
-                      onSaveProperty={handleUpdateEntity}
-                      onDeleteProperty={handleDeleteProperty}
-                    />
-                  </div>
-                );
-              }
-              return null;
-            })}
-          </div>
-        )}
-
-        {/* Tabbed layout */}
-        {renderTabs && (
-          <div className="flex" style={{ 
-            flexDirection: state.configuration?.tabLocation === 'left' || state.configuration?.tabLocation === 'right' ? 'row' : 'column'
-          }}>
-            <Tabs
-              activeKey={activeTab}
-              onChange={(key) => {
-                setActiveTab(key);
-                saveTabToState(key);
-              }}
-              tabPosition={state.configuration?.tabLocation === 'left' ? 'left' : state.configuration?.tabLocation === 'right' ? 'right' : 'top'}
-            >
-              {tabs.map((tab) => (
-                <Tabs.TabPane
-                  key={tab.name}
-                  tab={
-                    <div className="flex flex-col w-full">
-                      <div className="flex flex-row items-center justify-between w-full">
-                        <div className="text-left text-base font-medium text-gray-700 describo-tab-label">
-                          {tab.label || tab.name}
-                        </div>
-                        <div className="ml-2">
-                          {tab.missingRequiredData && (
-                            <div className="text-red-600">
-                              <FontAwesomeIcon icon={faCircleXmark} size="lg" />
-                            </div>
-                          )}
-                          {tab.hasData && !tab.missingRequiredData && (
-                            <div className="text-green-600">
-                              <FontAwesomeIcon icon={faCircleCheck} size="lg" />
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                      {tab.description && (
-                        <div className="text-left text-gray-500 font-light text-xs describo-tab-description">
-                          {tab.description}
-                        </div>
-                      )}
-                    </div>
-                  }
-                />
-              ))}
-            </Tabs>
-
-            <div className="flex-grow p-3">
-              {/* Required properties warning button */}
-              {!state.configuration?.readonly && 
-                tabs.find(t => t.name === activeTab)?.missingRequiredData && (
-                <div className="text-red-600 float-right mb-2">
-                  <button
-                    className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded text-sm"
-                    onClick={() => setHighlightRequiredProperties(!highlightRequiredProperties)}
-                  >
-                    <FontAwesomeIcon icon={faTriangleExclamation} size="lg" />
-                  </button>
-                </div>
-              )}
-
-              {/* About tab content */}
-              {activeTab === 'about' && (
-                <div className="space-y-3">
-                  <div 
-                    className={`p-2 describo-property describo-property-name-id ${
-                      savedProperty === '@id' ? 'bg-green-200 rounded' : ''
-                    }`}
-                  >
-                    <EntityId entity={contextEntity} onUpdate={handleUpdateEntity} />
-                  </div>
-                  <div className="p-2 describo-property describo-property-name-type">
-                    <EntityType entity={contextEntity} onUpdateEntity={handleUpdateEntity} />
-                  </div>
-                  <div 
-                    className={`p-2 describo-property describo-property-name-name ${
-                      savedProperty === 'name' ? 'bg-green-200 rounded' : ''
-                    }`}
-                  >
-                    <EntityName entity={contextEntity} onUpdate={handleUpdateEntity} />
-                  </div>
-                  
-                  {/* Add this section to render additional properties in the about tab */}
-                  {tabs.find(tab => tab.name === 'about')?.inputs.map((input: any) => {
-                    if (!['@id', '@type', 'name', '@reverse'].includes(input.name)) {
-                      return (
-                        <div 
-                          key={input.name}
-                          className={`p-2 hover:bg-sky-100 ${
-                            savedProperty === input.name ? 'bg-green-200 hover:bg-green-200' : ''
-                          }`}
-                        >
-                          <EntityProperty
-                            entity={contextEntity}
-                            property={input.name}
-                            values={Array.isArray(contextEntity[input.name]) ? contextEntity[input.name] : [contextEntity[input.name]]}
-                            highlightRequired={highlightRequiredProperties}
-                            savedProperty={savedProperty === input.name}
-                            onLoadEntity={onLoadEntity}
-                            onCreateEntity={handleCreateEntity}
-                            onLinkEntity={handleLinkEntity}
-                            onUnlinkEntity={handleUnlinkEntity}
-                            onCreateProperty={handleCreateProperty}
-                            onSaveProperty={handleUpdateEntity}
-                            onDeleteProperty={handleDeleteProperty}
-                          />
-                        </div>
-                      );
-                    }
-                    return null;
-                  })}
-                </div>
-              )}
-
-              {/* Tab content for other tabs */}
-              {tabs.map(tab => {
-                if (tab.name === activeTab && tab.name !== 'about') {
-                  return (
-                    <div key={tab.name} className="space-y-3">
-                      {tab.inputs.map((input: any) => {
-                        if (!['@id', '@type', 'name', '@reverse'].includes(input.name)) {
-                          return (
-                            <div 
-                              key={input.name}
-                              className={`p-2 hover:bg-sky-100 ${
-                                savedProperty === input.name ? 'bg-green-200 hover:bg-green-200' : ''
-                              }`}
-                            >
-                              <EntityProperty
-                                entity={contextEntity}
-                                property={input.name}
-                                values={Array.isArray(contextEntity[input.name]) ? contextEntity[input.name] : [contextEntity[input.name]]}
-                                highlightRequired={highlightRequiredProperties}
-                                savedProperty={savedProperty === input.name}
-                                onLoadEntity={onLoadEntity}
-                                onCreateEntity={handleCreateEntity}
-                                onLinkEntity={handleLinkEntity}
-                                onUnlinkEntity={handleUnlinkEntity}
-                                onCreateProperty={handleCreateProperty}
-                                onSaveProperty={handleUpdateEntity}
-                                onDeleteProperty={handleDeleteProperty}
-                              />
-                            </div>
-                          );
-                        }
-                        return null;
-                      })}
-                    </div>
-                  );
-                }
-                return null;
-              })}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Remove this entire block */}
-      {/* Reverse links toggle button (when sidebar is not visible) */}
-      {/* {state.configuration?.enableReverseLinkBrowser && !reverseSidebarVisible && (
-        <div 
-          className="p-1 h-8 rounded text-lg bg-gray-200 text-blue-600 cursor-pointer"
-          onClick={() => setReverseSidebarVisible(!reverseSidebarVisible)}
-        >
-          <FontAwesomeIcon icon={faChevronLeft} size="sm" />
-        </div>
-      )} */}
-
-      {/* Reverse links drawer */}
-      <Drawer
-        placement="right"
-        open={reverseSidebarVisible}
-        onClose={() => setReverseSidebarVisible(false)}
-        width={600}
-      >
-        <div className="p-2">
-          <RenderReverseConnections
-            key={contextEntity['@id']}
-            entity={contextEntity}
-            onLoadEntity={(data) => {
-              onLoadEntity(data);
-              setReverseSidebarVisible(false);
-            }}
-          />
-        </div>
-      </Drawer>
-    </div>
-  );
-});
-
-RenderEntity.displayName = 'RenderEntity';
-
-export default RenderEntity;

package/src/crate-builder/RenderEntity/UnlinkEntity.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Button } from 'antd';
-import { LinkOutlined } from '@ant-design/icons';
-
-interface UnlinkEntityProps {
-  entity: {
-    '@id': string;
-    [key: string]: any;
-  };
-  onUnlinkEntity: (data: { entity: { '@id': string } }) => void;
-}
-
-const UnlinkEntity: React.FC<UnlinkEntityProps> = ({ entity, onUnlinkEntity }) => {
-  const handleUnlink = () => {
-    onUnlinkEntity({ entity: { '@id': entity['@id'] } });
-  };
-
-  return (
-    <Button
-      onClick={handleUnlink}
-      danger
-      variant="text"
-      color='red'
-      size="large"
-      icon={<LinkOutlined />}
-    />
-  );
-};
-
-export default UnlinkEntity;