@arpproject/recrate 0.1.7-test5 → 0.1.7-test7

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

@@ -1,87 +0,0 @@
-import React, { useState, useContext, useEffect } from 'react';
-import { Flex, Radio, Button, Drawer, Typography } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { CrateManagerContext } from '../Shell';
-import { CloseOutlined, SaveOutlined } from '@ant-design/icons';
-
-interface DialogSaveEntityTemplateProps {
-  entity: {
-    '@id': string;
-    [key: string]: any;
-  };
-  onClose: () => void;
-  open: boolean;
-  onSaveEntityTemplate: (data: { resolveDepth: number }) => void;
-}
-
-const DialogSaveEntityTemplate: React.FC<DialogSaveEntityTemplateProps> = ({
-  entity,
-  onClose,
-  open,
-  onSaveEntityTemplate
-}) => {
-  const { t } = useTranslation();
-  const crateManager = useContext(CrateManagerContext);
-  const [resolveDepth, setResolveDepth] = useState<string>('0');
-
-  const [exportedEntity, setExportedEntity] = useState<any>(null);
-
-  useEffect(() => {
-    if (crateManager && entity?.['@id']) {
-      try {
-        const exported = crateManager.exportEntityTemplate({
-          id: entity['@id'],
-          resolveDepth: parseInt(resolveDepth)
-        });
-        setExportedEntity(exported);
-      } catch (error) {
-        console.error('Error exporting entity template:', error);
-      }
-    }
-  }, [crateManager, entity, resolveDepth]);
-
-  return (
-    <Drawer
-      title={<Typography.Title level={4} style={{ margin: 0 }}>{'Save Entity Template'}</Typography.Title>}
-      placement="right"
-      onClose={onClose}
-      open={open}
-      width={600} // Equivalent to minWidth: '600px'
-    >
-      <Flex vertical className="h-full">
-        <Flex vertical gap={16}>
-          <Flex gap={16} align="center">
-            <Radio.Group
-              onChange={(e) => setResolveDepth(e.target.value as string)}
-              value={resolveDepth}
-            >
-              <Radio value="0">Depth: 0</Radio>
-              <Radio value="1">Depth: 1</Radio>
-            </Radio.Group>
-            <Button
-              type="primary"
-              icon={<SaveOutlined />}
-              onClick={() => {
-                onSaveEntityTemplate({ resolveDepth: parseInt(resolveDepth) });
-                onClose();
-              }}
-            >
-              {'Save Template'}
-            </Button>
-          </Flex>
-
-          <Flex vertical className="flex-grow overflow-auto">
-            <Typography.Text strong className="mb-2">
-              {'Template Preview'}
-            </Typography.Text>
-            <div className="p-4 border rounded bg-gray-50 font-mono text-sm overflow-auto">
-              <pre className="whitespace-pre-wrap">{JSON.stringify(exportedEntity, null, 2)}</pre>
-            </div>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Drawer>
-  );
-};
-
-export default DialogSaveEntityTemplate;

package/src/crate-builder/RenderEntity/DisplayPropertyName.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import DisplayPropertyName from './DisplayPropertyName';
-
-const meta: Meta<typeof DisplayPropertyName> = {
-  component: DisplayPropertyName,
-  argTypes: {
-    label: {
-      options: [
-        'name',
-        'nameOfThing',
-        'NameOfThing',
-        'name-of-thing',
-        'foaf:name',
-        'dcterms:nameOfThing',
-        'dcterms:name-of-thing',
-      ],
-      control: { type: 'select' },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DisplayPropertyName>;
-
-export const Default: Story = {
-  args: {
-    property: 'something',
-    label: 'name',
-  },
-};

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

@@ -1,21 +0,0 @@
-import React from 'react';
-
-interface DisplayPropertyNameProps {
-  property: string;
-  label?: string;
-  className?: string; // Add this prop
-}
-
-const DisplayPropertyName: React.FC<DisplayPropertyNameProps> = ({ 
-  property, 
-  label,
-  className = '' // Default to empty string
-}) => {
-  return (
-    <div className={`describo-property-name ${className}`}>
-      {label || property}
-    </div>
-  );
-};
-
-export default DisplayPropertyName;

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

@@ -1,75 +0,0 @@
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ExportOutlined } from '@ant-design/icons';
-import { Button, Typography } from 'antd';
-import TextComponent from '../primitives/Text';
-import { isURL } from '../CrateManager/lib';
-import { useStateStore } from '../store';
-
-interface EntityIdProps {
-  entity: {
-    '@id': string;
-    '@type': string | string[];
-  };
-  onUpdate: (data: { property: string; value: string }) => void;
-}
-
-export const EntityId: React.FC<EntityIdProps> = ({ entity, onUpdate }) => {
-  const state = useStateStore();
-
-  const handleSave = async (data: { property: string; value: string }) => {
-    onUpdate(data);
-  };
-
-  const openInNewTab = (url: string) => {
-    window.open(url, '_blank');
-  };
-
-  const isDatasetOrFile = () => {
-    const types = Array.isArray(entity['@type']) ? entity['@type'] : [entity['@type']];
-    return entity['@id'] === './' || types.some(type => ['Dataset', 'File'].includes(type));
-  };
-
-  return (
-    <div className="flex flex-row">
-      <div className="min-w-32 w-1/3 xl:w-1/5 flex flex-col describo-property-name">@id</div>
-
-      {!state.configuration?.readonly ? (
-        <div className="w-2/3 xl:w-4/5 flex flex-row describo-property-value">
-          {isURL(entity['@id']) && (
-            <Button
-              type="link"
-              icon={<ExportOutlined />}
-              onClick={() => openInNewTab(entity['@id'])}
-              title="Open in new tab"
-            />
-          )}
-          {isDatasetOrFile() ? (
-            <div>{entity['@id']}</div>
-          ) : (
-            <div className="flex-grow">
-              <TextComponent
-                property="@id"
-                value={entity['@id']}
-                onSaveProperty={handleSave}
-              />
-            </div>
-          )}
-        </div>
-      ) : (
-        <div className="w-2/3 xl:w-4/5 flex flex-row describo-property-value">
-          {isURL(entity['@id']) ? (
-            <Typography.Link className='text-large' style={{ fontSize: '1em' }} href={entity['@id']} target="_blank" rel="noopener noreferrer">
-              {entity['@id']}
-              &nbsp;<ExportOutlined />
-            </Typography.Link>
-          ) : (
-            <div>{entity['@id']}</div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default EntityId;

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import TextComponent from '../primitives/Text';
-import { useTranslation } from 'react-i18next';
-import { useStateStore } from '../store';
-
-interface EntityNameProps {
-    entity: {
-        name: string;
-        value?: string;
-    };
-    onUpdate: (data: { property: string; value: string }) => void;
-}
-
-export const EntityName: React.FC<EntityNameProps> = ({ entity, onUpdate }) => {
-    const [t, i18n] = useTranslation();
-    const state = useStateStore();
-
-    const handleSave = async (data: { property: string; value: string }) => {
-        onUpdate(data);
-    };
-
-    return (
-        <div className="flex flex-row">
-            <div className="min-w-32 w-1/3 xl:w-1/5 flex flex-col">
-                <div className="describo-property-name">{t('name_field_label')}</div>
-                <div className="text-gray-600 font-light text-xs pr-1 describo-property-help">
-                    {t('name_field_help')}
-                </div>
-            </div>
-            {!state.configuration?.readonly ? (
-                <div className="w-2/3 xl:w-4/5 flex flex-col">
-                    <div className="flex-grow">
-                        <TextComponent
-                            property="name"
-                            value={entity.name}
-                            onSaveProperty={handleSave}
-                        />
-                    </div>
-                </div>
-            ) : (
-                <div className="w-2/3 xl:w-4/5 flex flex-row">
-                    {entity.name}
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default EntityName;

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

@@ -1,188 +0,0 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { Badge } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { isPlainObject, orderBy } from 'lodash';
-import { ProfileManagerContext, CrateManagerContext } from '../Shell';
-import { useStateStore } from '../store';
-import PropertyHelp from './PropertyHelp';
-import EntityPropertyInstance from './EntityPropertyInstance';
-import PaginateLinkedEntities from './PaginateLinkedEntities';
-import DeleteProperty from './DeleteProperty';
-import Add from './Add';
-import DisplayPropertyName from './DisplayPropertyName';
-
-interface EntityPropertyProps {
-  entity: any;
-  property: string;
-  values: any[];
-  highlightRequired?: boolean;
-  savedProperty?: boolean;
-  onLoadEntity: (data: { id: string }) => void;
-  onCreateProperty: (data: any) => void;
-  onCreateEntity: (data: any) => void;
-  onLinkEntity: (data: any) => void;
-  onSaveProperty: (data: any) => void;
-  onDeleteProperty: (data: any) => void;
-  onUnlinkEntity: (data: any) => void;
-}
-
-export const EntityProperty: React.FC<EntityPropertyProps> = ({
-  entity,
-  property,
-  values,
-  highlightRequired = false,
-  savedProperty = false,
-  onLoadEntity,
-  onCreateProperty,
-  onCreateEntity,
-  onLinkEntity,
-  onSaveProperty,
-  onDeleteProperty,
-  onUnlinkEntity
-}) => {
-  const { t } = useTranslation();
-  const profileManager = useContext(ProfileManagerContext);
-  const crateManager = useContext(CrateManagerContext);
-  const state = useStateStore();
-  const [linkInstances, setLinkInstances] = useState<any[]>([]);
-  const [simpleInstances, setSimpleInstances] = useState<any[]>([]);
-
-  const propertyDefinition = profileManager?.getPropertyDefinition({
-    property,
-    entity
-  })?.propertyDefinition;
-
-  const isValid = values.length > 0;
-  const isRequired = propertyDefinition?.required;
-  const isNotValue = propertyDefinition?.type !== 'Value';
-  const profileWarnMissingProperty = profileManager?.profile.warnMissingProperty;
-  const showAddControl = !propertyDefinition?.readonly && 
-    (propertyDefinition?.multiple || !values?.length);
-
-  // Fix: Use a JSON string representation of values to prevent infinite loops
-  const valuesString = JSON.stringify(values);
-  
-  useEffect(() => {
-    // Only sort instances when values or propertyDefinition changes
-    let simpleInsts;
-    if (propertyDefinition?.handlesMultipleValues === true) {
-      simpleInsts = values.length === 0 ? values : [values];
-    } else {
-      simpleInsts = values;
-    }
-
-    setSimpleInstances(
-      simpleInsts
-        .map((v: any, i: number) => {
-          // Special handling for boolean values and non-objects
-          if (!isPlainObject(v) || typeof v === 'boolean') {
-            return { idx: i, value: v };
-          }
-          return null;
-        })
-        .filter(Boolean)
-    );
-
-    setLinkInstances(
-      orderBy(
-        values
-          .map((v: any, i: number) => {
-            if (isPlainObject(v) && typeof v !== 'boolean') return { idx: i, value: v };
-            return null;
-          })
-          .filter(Boolean),
-        '@id'
-      )
-    );
-  }, [valuesString, propertyDefinition?.handlesMultipleValues]);
-
-  // Remove the separate sortInstances function since we've moved its logic directly into the useEffect
-  return (
-    <div
-      className={`flex flex-row flex-grow p-2 describo-property-background ${
-        highlightRequired && isRequired && !isValid ? 'bg-red-200' : ''
-      } ${savedProperty ? 'bg-green-100 transition-colors duration-1000' : ''} describo-property describo-property-name-${property}`}
-    >
-      <div className="min-w-32 w-1/3 xl:w-1/5 flex flex-col describo-property-heading">
-        <div className="flex flex-row items-center">
-          <DisplayPropertyName
-            property={property}
-            label={propertyDefinition?.label}
-            className={`inline-block ${isRequired && !isValid ? 'text-red-600' : ''}`}
-          />
-          {isRequired && !isValid && (
-            <Badge status="error" dot className="animate-pulse ml-2" />
-          )}
-        </div>
-        <PropertyHelp help={propertyDefinition?.help} />
-        {!propertyDefinition && profileWarnMissingProperty && (
-          <div className="text-red-600 text-xs">
-            ({t('not_defined_in_profile')})
-          </div>
-        )}
-      </div>
-
-      <div className="w-2/3 xl:w-4/5 flex flex-col flex-grow describo-property-value">
-        <div className="flex flex-col space-y-1">
-          {simpleInstances.map((instance) => (
-            <div key={instance.idx}>
-              {propertyDefinition?.readonly ? (
-                <div className="describo-property-value-readonly">
-                  {instance.value}
-                </div>
-              ) : (
-                <div className="flex flex-row space-x-2">
-                  <EntityPropertyInstance
-                    className="flex-grow"
-                    property={property}
-                    value={instance.value}
-                    idx={instance.idx}
-                    definition={propertyDefinition}
-                    onSaveProperty={onSaveProperty}
-                    onCreateEntity={onCreateEntity}
-                  />
-                  {isNotValue &&
-                    !state.configuration?.readonly &&
-                    (instance.value || instance.value === false) &&
-                    !instance.value?.['@id'] && (
-                      <DeleteProperty
-                        type="delete"
-                        property={property}
-                        onDeleteProperty={() => onDeleteProperty({ property, idx: instance.idx })}
-                      />
-                    )}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-
-        {linkInstances.length > 0 && (
-          <PaginateLinkedEntities
-            className={simpleInstances.length && linkInstances.length ? 'mt-2' : ''}
-            entities={linkInstances}
-            property={property}
-            readonly={propertyDefinition?.readonly}
-            onLoadEntity={onLoadEntity}
-            onUnlinkEntity={onUnlinkEntity}
-          />
-        )}
-
-        {showAddControl && !state.configuration?.readonly && (
-          <Add
-            property={property}
-            definition={propertyDefinition}
-            embedded={false}
-            placeholder={propertyDefinition?.placeholder}
-            onCreateProperty={onCreateProperty}
-            onCreateEntity={onCreateEntity}
-            onLinkEntity={onLinkEntity}
-            crateManager={crateManager}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default EntityProperty;