@arpproject/recrate 0.1.7-test5 → 0.1.7-test6

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

@@ -1,249 +0,0 @@
-import React, { useState, useMemo, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import AddControl from './AddControl';
-import Text from '../primitives/Text';
-import Date from '../primitives/Date';
-import DateTime from '../primitives/DateTime';
-import Time from '../primitives/Time';
-import Number from '../primitives/Number';
-import Url from '../primitives/Url';
-import Select from '../primitives/Select';
-import SelectUrl from '../primitives/SelectUrl';
-import SelectObject from '../primitives/SelectObject';
-import Geo from '../primitives/Geo';
-import AutoComplete from './AutoComplete';
-import Boolean from '../primitives/Boolean';
-import BulkAdd from './BulkAdd';
-import { ProfileManagerContext } from '../Shell';
-
-interface AddProps {
-  property: string;
-  definition: {
-    id: string;
-    type?: string;
-    // Text-specific properties
-    minLength?: number;
-    maxLength?: number;
-    regex?: string;
-    dateFormat?: string[];
-    // Number-specific properties
-    minValue?: number;
-    maxValue?: number;
-    numberType?: string[];
-    // Select-specific properties
-    values?: string[];
-    style?: 'dropdown' | 'radio' | 'checkbox';
-    [key: string]: any;
-  };
-  embedded?: boolean;
-  placeholder?: string;
-  crateManager: any;
-  onCreateProperty: (data: any) => void;
-  onCreateEntity: (data: any) => void;
-  onLinkEntity: (data: any) => void;
-}
-
-const Add: React.FC<AddProps> = ({
-  property,
-  definition,
-  embedded = false,
-  placeholder,
-  crateManager,
-  onCreateProperty,
-  onCreateEntity,
-  onLinkEntity
-}) => {
-  const { t } = useTranslation();
-  const profileManager = useContext(ProfileManagerContext);
-
-  const [addType, setAddType] = useState<string | undefined>();
-  const [localisedAddType, setLocalisedAddType] = useState<string | undefined>();
-
-  const primitives = [
-    'Text', 'TextArea', 'Date', 'DateTime', 'Time',
-    'Number', 'Float', 'Integer', 'URL', 'Value',
-    'Select', 'SelectURL', 'SelectObject', 'Geo',
-    'Geometry', 'GeoCoordinates', 'GeoShape', 'Boolean'
-  ];
-
-  const types = useMemo(() => {
-    if (!definition.type || definition.type === 'Value') return '';
-    return definition.type;
-  }, [definition.type]);
-
-  const addSimpleType = useMemo(() => {
-    return primitives.includes(addType || '');
-  }, [addType, primitives]);
-
-  const close = () => {
-    setAddType(undefined);
-    setLocalisedAddType(undefined);
-  };
-
-  const add = ({ type }: { type: string }) => {
-    setAddType(type);
-    setLocalisedAddType(profileManager?.getTypeLabel(type));
-  };
-
-  const bulkAdd = () => {
-    setAddType('bulkAdd');
-  };
-
-  const createProperty = (data: any) => {
-    onCreateProperty({ ...data, propertyId: definition.id });
-    close();
-  };
-
-  const createEntity = (data: any) => {
-    onCreateEntity({ ...data, property, propertyId: definition.id });
-    close();
-  };
-
-  const linkEntity = (data: any) => {
-    onLinkEntity({ ...data, property, propertyId: definition.id });
-    close();
-  };
-
-  return (
-    <div 
-      className={`flex flex-col my-2 p-1 rounded ${
-        addType ? 'bg-indigo-200' : ''
-      } ${addType?.match(/geo/gi) ? 'max-w-[715px]' : ''}`}
-    >
-      <AddControl
-        crateManager={crateManager}
-        types={types}
-        selectedType={addType || ''}
-        primitives={primitives}
-        onAdd={add}
-        onBulkAdd={bulkAdd}
-        onClose={close}
-      />
-
-      {addSimpleType && ( 
-        <div className="p-1">
-          {addType === 'Text' && (
-            <Text
-              property={property}
-              type="text"
-              definition={definition}
-              onSaveProperty={createProperty}
-              placeholder={placeholder || t('add_text') || 'Add text'}
-            />
-          )}
-          {addType === 'TextArea' && (
-            <Text
-              property={property}
-              type="textarea"
-              definition={definition}
-              onSaveProperty={createProperty}
-              placeholder={placeholder}
-            />
-          )}
-          {addType === 'Date' && (
-            <Date
-              property={property}
-              onSaveProperty={createProperty}
-            />
-          )}
-          {addType === 'DateTime' && (
-            <DateTime
-              property={property}
-              onSaveProperty={createProperty}
-            />
-          )}
-          {addType && ['Number', 'Float', 'Integer'].includes(addType) && (
-            <Number
-              property={property}
-              definition={definition}
-              onSaveProperty={createProperty}
-            />
-          )}
-          {addType === 'Time' && (
-            <Time
-              property={property}
-              onSaveProperty={createProperty}
-            />
-          )}
-          {addType === 'Select' && definition.values && (
-            <Select
-              property={property}
-              definition={{
-                values: definition.values,
-                style: definition.style
-              }}
-              onSaveProperty={createProperty}
-            />
-          )}
-          {addType === 'URL' && (
-            <Url
-              property={property}
-              onCreateEntity={createEntity}
-            />
-          )}
-          {addType === 'SelectURL' && definition.values && (
-            <SelectUrl
-              property={property}
-              definition={{
-                values: definition.values
-              }}
-              onCreateEntity={createEntity}
-            />
-          )}
-          {addType === 'SelectObject' && definition.values && (
-            <SelectObject
-              property={property}
-              definition={{
-                values: definition.values
-              }}
-              onCreateEntity={createEntity}
-            />
-          )}
-          {addType && ['Geo', 'Geometry', 'GeoCoordinates', 'GeoShape'].includes(addType) && (
-            <Geo
-              property={property}
-              //onSaveProperty={createProperty}
-              onCreateEntity={createEntity}
-              onLinkEntity={linkEntity}
-            />
-          )}
-          {addType === 'Boolean' && (
-            <Boolean
-              property={property}
-              onSaveProperty={createProperty}
-            />
-          )}
-        </div>
-      )}
-
-      {addType === 'bulkAdd' && (
-        <BulkAdd
-          types={types}
-          primitives={primitives}
-          onCreateEntity={createEntity}
-        />
-      )}
-
-      {!addSimpleType && addType && addType !== 'bulkAdd' && (
-        <div className="describo-property-type-entity">
-          <div className="p-1 flex flex-row space-x-2 divide-y divide-gray-300 text-gray-600">
-            <div className="w-full">
-              {addType === 'ANY' ? (
-                <div>{t('associate_any_prompt')}</div>
-              ) : (
-                <div>{t('associate_existing_prompt', { addType: localisedAddType || addType })}</div>
-              )}
-              <AutoComplete
-                type={addType || ''}
-                onLinkEntity={linkEntity}
-                onCreateEntity={createEntity}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Add;

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

@@ -1,126 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import AddControl from './AddControl';
-import { ProfileManager } from '../CrateManager/profile-manager';
-
-const profileManager = new ProfileManager({});
-
-const crateManager = {
-  getEntities: () => [],
-  profileManager,
-};
-
-export default {
-  title: 'Components/AddControl',
-  component: AddControl,
-  argTypes: {
-    embedded: {
-      control: 'boolean',
-    },
-    onAdd: { action: 'add' },
-    onBulkAdd: { action: 'bulkAdd' },
-    onClose: { action: 'close' },
-  },
-} as Meta;
-
-interface AddControlProps {
-  crateManager: any;
-  types: string | string[];
-  selectedType: string;
-  primitives: string[];
-  onAdd: (data: { type: string }) => void;
-  onBulkAdd: () => void;
-  onClose: () => void;
-  help?: string;
-  multiple?: boolean;
-  embedded?: boolean;
-  values?: Array<string | { '@id': string; '@type': string; name: string }>;
-}
-
-const Template: StoryFn<AddControlProps> = (args) => <AddControl {...args} />;
-
-Template.args = {
-  types: ['Text'],
-  selectedType: '',
-  primitives: ['Text'],
-  onAdd: (data: { type: string }) => console.log('Add:', data),
-  onBulkAdd: () => console.log('Bulk Add'),
-  onClose: () => console.log('Close')
-};
-
-export const TextPrimitives = Template.bind({});
-TextPrimitives.args = {
-  types: ['Text', 'TextArea', 'URL'],
-  selectedType: '',
-  primitives: ['Text', 'TextArea', 'URL'],
-  help: 'some help text',
-  multiple: true,
-  embedded: false,
-};
-
-export const DateTimePrimitives = Template.bind({});
-DateTimePrimitives.args = {
-  types: ['Date', 'DateTime', 'Time'],
-  selectedType: '',
-  primitives: ['Date', 'DateTime', 'Time'],
-  help: 'some help text',
-  multiple: true,
-  embedded: false,
-};
-
-export const NumberPrimitives = Template.bind({});
-NumberPrimitives.args = {
-  types: ['Number', 'Float', 'Integer'],
-  selectedType: '',
-  primitives: ['Number', 'Float', 'Integer'],
-  help: 'some help text',
-  multiple: true,
-  embedded: false,
-};
-
-export const SelectPrimitive = Template.bind({});
-SelectPrimitive.args = {
-  types: ['Select'],
-  selectedType: '',
-  primitives: ['Select'],
-  help: 'some help text',
-  multiple: true,
-  embedded: false,
-  values: ['a', 'b', 'c'],
-};
-
-export const SelectUrlPrimitive = Template.bind({});
-SelectUrlPrimitive.args = {
-  types: ['SelectURL'],
-  selectedType: '',
-  primitives: ['SelectURL'],
-  help: 'some help text',
-  multiple: true,
-  embedded: false,
-  values: ['http://schema.org/name', 'https://schema.org/name', 'arcp://name,...'],
-};
-
-export const SelectObjectPrimitive = Template.bind({});
-SelectObjectPrimitive.args = {
-  types: ['SelectObject'],
-  selectedType: '',
-  primitives: ['SelectObject'],
-  help: 'some help text',
-  multiple: true,
-  embedded: false,
-  values: [
-    { '@id': '#1', '@type': 'Dataset', name: '1' },
-    { '@id': '#2', '@type': 'Dataset', name: '2' },
-    { '@id': '#3', '@type': 'Dataset', name: '3' },
-  ],
-};
-
-export const GeoPrimitives = Template.bind({});
-GeoPrimitives.args = {
-  types: ['Geo', 'GeoCoordinates', 'GeoShape'],
-  selectedType: '',
-  primitives: ['Geo', 'GeoCoordinates', 'GeoShape'],
-  help: 'some help text',
-  multiple: true,
-  embedded: false,
-};

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

@@ -1,84 +0,0 @@
-import React from 'react';
-import { Button } from 'antd';
-import { PlusOutlined, CloseOutlined, StarOutlined } from '@ant-design/icons';
-import { difference } from 'lodash';
-import { useContext } from 'react';
-import { ProfileManagerContext } from '../Shell';
-
-interface AddControlProps {
-  crateManager: any;
-  types: string | string[];
-  selectedType: string;
-  primitives: string[];
-  onAdd: (data: { type: string }) => void;
-  onBulkAdd: () => void;
-  onClose: () => void;
-}
-
-const AddControl: React.FC<AddControlProps> = ({
-  types,
-  selectedType,
-  primitives,
-  onAdd,
-  onBulkAdd,
-  onClose
-}) => {
-  const profileManager = useContext(ProfileManagerContext);
-  const notOnlyPrimitives = difference(
-    Array.isArray(types) ? types : [types],
-    [...primitives, 'ANY']
-  );
-
-  const getTypeLabelFromProfile = (type: string) => {
-    return profileManager?.getTypeLabel(type);
-  };
-
-  const toggle = (type: string) => {
-    if (selectedType === type) {
-      onClose();
-    } else {
-      onAdd({ type });
-    }
-  };
-
-  const handleBulkAdd = () => {
-    if (selectedType === 'bulkAdd') {
-      onClose();
-    } else {
-      onBulkAdd();
-    }
-  };
-
-  return (
-    <div className="flex flex-row flex-wrap">
-      {(Array.isArray(types) ? types : [types]).map((type, idx) => (
-        <div key={idx} className="m-1">
-          <Button
-            onClick={() => toggle(type)}
-            type="primary"
-            size="middle"
-            className="focus:outline-none focus:border-2 focus:border-green-600"
-            icon={(!selectedType || selectedType !== type) ? <PlusOutlined /> : <CloseOutlined />}
-          >
-            &nbsp;{getTypeLabelFromProfile(type)}
-          </Button>
-        </div>
-      ))}
-      {notOnlyPrimitives.length > 0 && (
-        <div className="m-1">
-          <Button
-            onClick={handleBulkAdd}
-            type="primary"
-            size="middle"
-            className="focus:outline-none focus:border-2 focus:border-green-600"
-            icon={(!selectedType || selectedType !== 'bulkAdd') ? <StarOutlined /> : <CloseOutlined />}
-          >
-            &nbsp; Bulk Add
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AddControl;

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

@@ -1,215 +0,0 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { Select, Input, Button, Typography } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
-import { useTranslation } from 'react-i18next';
-import debounce from 'lodash/debounce';
-import { CrateManagerContext, LookupsContext } from '../Shell';
-import { useStateStore } from '../store';
-import { Lookup, wrapPromise } from './auto-complete.lib';
-
-interface AutoCompleteProps {
-  type: string;
-  onLinkEntity: (data: { json: any }) => void;
-  onCreateEntity: (data: { json: any }) => void;
-}
-
-interface MatchGroup {
-  label: string;
-  entities: any[];
-}
-
-const AutoComplete: React.FC<AutoCompleteProps> = ({ type, onLinkEntity, onCreateEntity }) => {
-  const { t } = useTranslation();
-  const crateManager = useContext(CrateManagerContext);
-  const lookupHandler = useContext(LookupsContext);
-  const state = useStateStore();
-
-  const [loading, setLoading] = useState(false);
-  const [selection, setSelection] = useState<any>(null);
-  const [matches, setMatches] = useState<MatchGroup[]>([]);
-  const [inputValue, setInputValue] = useState('');
-
-  const promiseTimeout = 2500;
-
-  const querySearch = async (queryString: string) => {
-    setLoading(true);
-
-    const lookup = new Lookup({
-      config: crateManager?.profile?.lookup,
-      lookup: lookupHandler,
-      crateManager,
-    });
-
-    const newEntity = queryString ? [
-      {
-        type: 'new',
-        '@id': queryString,
-        '@type': type,
-        name: queryString,
-      },
-    ] : [];
-
-    const lookups = [];
-
-    if (crateManager?.getEntities) {
-      lookups.push(wrapPromise(lookup.getEntities(type, queryString), promiseTimeout));
-    }
-
-    if (lookupHandler?.dataPacks) {
-      lookups.push(
-        wrapPromise(lookup.dataPacks(type, queryString), promiseTimeout, {
-          reason: 'External Lookup Timeout',
-        })
-      );
-    }
-
-    if (lookupHandler?.entityTemplates) {
-      lookups.push(
-        wrapPromise(lookup.entityTemplates(type, queryString), promiseTimeout, {
-          reason: 'External Lookup Timeout',
-        })
-      );
-    }
-
-    if (lookupHandler?.entities) {
-      lookups.push(
-        wrapPromise(lookup.entities(type, queryString), promiseTimeout, {
-          reason: 'External Lookup Timeout',
-        })
-      );
-    }
-
-    if (['Organisation', 'Organization'].includes(type) || type === 'ANY') {
-      lookups.push(
-        wrapPromise(lookup.ror(queryString), promiseTimeout, {
-          reason: 'ROR Lookup Timeout',
-        })
-      );
-    }
-
-    const responses = await Promise.all(lookups);
-    const newMatches: MatchGroup[] = [];
-
-    responses.forEach((response) => {
-      if (response.endpoint === 'internal' && response.documents?.length) {
-        newMatches.push({
-          label: t('associate_existing_entity'),
-          entities: response.documents.map((e) => ({ ...e, type: 'internal' })).slice(0, 5),
-        });
-      } else if (response.endpoint === 'templates' && response.documents?.length) {
-        newMatches.push({
-          label: t('associate_entity_from_template'),
-          entities: response.documents.map((entity) => ({
-            ...entity,
-            type: 'template',
-          })),
-        });
-      } else if (response.endpoint === 'ror' && response.documents?.length) {
-        newMatches.push({
-          label: t('associate_organization_from_ror'),
-          entities: response.documents.map((entity) => ({ ...entity, type: 'ror' })),
-        });
-      } else if (response.endpoint === 'entities' && response.documents?.length) {
-        newMatches.push({
-          label: t('associate_user_created_entity'),
-          entities: response.documents.map((entity) => ({ ...entity, type: 'datapack' })),
-        });
-      } else if (response.endpoint === 'datapacks' && response.documents?.length) {
-        newMatches.push({
-          label: t('associate_from_datapack'),
-          entities: response.documents.map((entity) => ({ ...entity, type: 'datapack' })),
-        });
-      }
-    });
-
-    if (type !== 'ANY') {
-      newMatches.push({
-        label: t('create_new_entity'),
-        entities: newEntity,
-      });
-    }
-
-    setMatches(newMatches);
-    setLoading(false);
-  };
-
-  const debouncedQuerySearch = debounce(querySearch, 1000, { leading: true });
-
-  useEffect(() => {
-    querySearch('');
-  }, [type]);
-
-  const handleSelect = (value: string, option: any) => {
-    const entity = option.entity;
-    if (entity) {
-      const updatedEntity = {
-        ...entity,
-        '@type': entity['@type'].split(', ').map((t: string) => t.trim()),
-      };
-
-      if (entity?.type === 'internal') {
-        onLinkEntity({ json: updatedEntity });
-      } else {
-        onCreateEntity({ json: updatedEntity });
-      }
-    }
-    setSelection(null);
-  };
-
-  const renderOption = (option: any) => {
-    const entity = option.entity;
-    if (!entity) return null;
-
-    if (entity.type === 'new') {
-      return (
-        <Button 
-          size="middle"
-          variant="solid"
-          color="green"
-          block 
-          icon={<PlusOutlined />}
-        >
-          {t('create_new_of_type', { type: entity['@type'] })}: {entity.name}
-        </Button>
-      );
-    } else if (entity.type === 'datapack') {
-      return (
-        <div className="flex flex-row space-x-2">
-          <Typography.Text>{entity['@type']}:</Typography.Text>
-          <Typography.Text>{entity.name} ({entity['@id']})</Typography.Text>
-        </div>
-      );
-    } else {
-      return (
-        <div className="flex flex-row space-x-2">
-          <Typography.Text>{entity['@type']}:</Typography.Text>
-          <Typography.Text>{entity.name || entity['@id']}</Typography.Text>
-        </div>
-      );
-    }
-  };
-
-  return (
-    <div className={loading ? 'opacity-50' : ''}>
-      <Select
-        showSearch
-        size="middle"
-        value={selection}
-        placeholder={t('select_existing_or_create_new') || 'select an existing entity or create a new one'}
-        defaultActiveFirstOption={false}
-        filterOption={false}
-        onSearch={debouncedQuerySearch}
-        onChange={handleSelect}
-        notFoundContent={loading ? 'Loading...' : 'No results'}
-        options={matches.flatMap((group) => [
-          { label: <Typography.Text strong>{group.label}</Typography.Text>, options: group.entities.map(entity => ({ label: renderOption({ entity }), value: entity['@id'], entity })) }
-        ]).flatMap(group => [
-          { label: group.label, options: group.options }
-        ])}
-        optionRender={(option) => option.label}
-      />
-    </div>
-  );
-};
-
-export default AutoComplete;