@arpproject/recrate 0.1.7 → 0.1.8

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;

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

@@ -1,136 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Select, Input, Typography, Flex } from 'antd';
-import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { useTranslation } from 'react-i18next';
-
-interface BulkAddProps {
-  types: string | string[];
-  primitives: string[];
-  onCreateEntity: (data: { json: any }) => void;
-}
-
-interface DataRow {
-  id: string;
-  name: string;
-}
-
-const BulkAdd: React.FC<BulkAddProps> = ({ types, primitives, onCreateEntity }) => {
-  const { t } = useTranslation();
-  const [selectedType, setSelectedType] = useState<string>('');
-  const [data, setData] = useState<DataRow[]>([
-    { id: '', name: '' },
-    { id: '', name: '' },
-    { id: '', name: '' },
-    { id: '', name: '' },
-    { id: '', name: '' },
-  ]);
-
-  const availableTypes = Array.isArray(types) 
-    ? types.filter(t => !primitives.includes(t) && t !== 'ANY')
-    : [];
-
-  const addRow = () => {
-    setData([...data, { id: '', name: '' }]);
-  };
-
-  const deleteRow = (index: number) => {
-    setData(data.filter((_, idx) => idx !== index));
-  };
-
-  const updateRow = (index: number, field: keyof DataRow, value: string) => {
-    const newData = [...data];
-    newData[index] = { ...newData[index], [field]: value };
-    setData(newData);
-  };
-
-  const createEntities = () => {
-    data.forEach(entity => {
-      if (entity.id && entity.name) {
-        onCreateEntity({
-          json: {
-            '@id': entity.id,
-            '@type': selectedType,
-            name: entity.name,
-          },
-        });
-      }
-    });
-  };
-
-  return (
-    <div className="flex flex-col space-y-2 m-1">
-      <Typography.Title level={5} className="my-1 text-lg text-center">
-        Note beforehand: This does not lookup existing entities.
-      </Typography.Title>
-      
-      <div>
-        <Typography.Text>@type</Typography.Text>
-        <Select
-          value={selectedType}
-          onChange={(value) => setSelectedType(value as string)}
-          style={{ width: '100%' }}
-          placeholder="Select a type"
-          size='middle'
-        >
-          <Select.Option value="">Select a type</Select.Option>
-          {availableTypes.map((type) => (
-            <Select.Option key={type} value={type}>
-              {type}
-            </Select.Option>
-          ))}
-        </Select>
-      </div>
-
-      <Flex className="flex-row space-x-1">
-        <div className="w-1/2">@id</div>
-        <div className="w-1/2">name</div>
-        <div className="w-12"></div>
-      </Flex>
-
-      {data.map((row, idx) => (
-        <Flex key={idx} className="flex-row space-x-1">
-          <Input
-            size='small'
-            value={row.id}
-            onChange={(e) => updateRow(idx, 'id', e.target.value)}
-            style={{ flex: 1 }}
-          />
-          <Input
-            size='small'
-            value={row.name}
-            onChange={(e) => updateRow(idx, 'name', e.target.value)}
-            style={{ flex: 1 }}
-          />
-          <Button
-            danger
-            variant='solid'
-            color='red'
-            onClick={() => deleteRow(idx)}
-            icon={<DeleteOutlined />}
-          />
-        </Flex>
-      ))}
-
-      <Flex justify="space-between">
-        <Button
-          type="primary"
-          onClick={addRow}
-          icon={<PlusOutlined />}
-        >
-          Add row
-        </Button>
-        <Button
-          size='middle'
-          variant='solid'
-          color='green'
-          onClick={createEntities}
-          disabled={!selectedType}
-        >
-          Create these entities
-        </Button>
-      </Flex>
-    </div>
-  );
-};
-
-export default BulkAdd;

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Button } from 'antd';
-import { DeleteOutlined, LinkOutlined } from '@ant-design/icons';
-
-interface DeletePropertyProps {
-  type?: 'delete' | 'unlink';
-  property: string;
-  onDeleteProperty: () => void;
-}
-
-const DeleteProperty: React.FC<DeletePropertyProps> = ({
-  type = 'unlink',
-  property,
-  onDeleteProperty
-}) => {
-  const handleDelete = () => {
-    onDeleteProperty();
-  };
-
-  return (
-    <Button
-      danger
-      onClick={handleDelete}
-      size="middle"
-      variant='solid'
-      color='red'
-      className="describo-delete-property"
-      icon={type === 'delete' ? <DeleteOutlined /> : <LinkOutlined />}
-    />
-  );
-};
-
-export default DeleteProperty;

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

@@ -1,83 +0,0 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { Input, Flex, Typography, Drawer, Button } from 'antd';
-import { CloseOutlined, ArrowRightOutlined } from '@ant-design/icons';
-import { useTranslation } from 'react-i18next';
-import { ProfileManagerContext } from '../Shell';
-
-interface DialogAddPropertyProps {
-  entity: any;
-  onClose: () => void;
-  open: boolean;
-  onAddPropertyPlaceholder: (property: string) => void;
-}
-
-const DialogAddProperty: React.FC<DialogAddPropertyProps> = ({
-  entity,
-  onClose,
-  open,
-  onAddPropertyPlaceholder
-}) => {
-  const { t } = useTranslation();
-  const profileManager = useContext(ProfileManagerContext);
-  const [filter, setFilter] = useState<string>('');
-  
-  const inputs = React.useMemo(() => {
-    if (!entity?.['@type']) return [];
-    const { inputs } = profileManager.getAllInputs({ entity });
-    if (!filter) return inputs;
-    return inputs.filter((i: any) => {
-      const re = new RegExp(filter, 'i');
-      return i?.name?.match(re) || i?.help?.match(re);
-    });
-  }, [entity, filter, profileManager]);
-
-  const handlePropertySelection = (item: any) => {
-    onAddPropertyPlaceholder(item.name);
-    onClose();
-  };
-
-  return (
-    <Drawer
-      title={<Typography.Title className='m-2' level={4}>{t("add_properties_to_this_entity") || 'Add properties to this entity'}</Typography.Title>}
-      placement="left"
-      onClose={onClose}
-      open={open}
-      width={600} // Equivalent to minWidth: '600px'
-    >
-      <Flex vertical className="h-full">
-        <Flex vertical gap={16} className="overflow-auto flex-grow">
-          <Input.Search
-            value={filter}
-            onChange={(e) => setFilter(e.target.value)}
-            placeholder={t('filter_attribute_set') || 'Filter the attribute set'}
-            size="middle"
-          />
-          {inputs.map((item: any, idx: number) => (
-            <div
-              key={idx}
-              className="cursor-pointer p-2 hover:bg-blue-100 hover:rounded active:bg-blue-400"
-              onClick={() => handlePropertySelection(item)}
-            >
-              <Flex vertical className="text-black">
-                <Flex align="center" gap={4} className="border-b border-gray-700">
-                  {item.label ? (
-                    <Typography.Text className="text-nowrap">{item.label}</Typography.Text>
-                  ) : (
-                    <Typography.Text className="text-black">{item.name}</Typography.Text>
-                  )}
-                  <ArrowRightOutlined />
-                  <Typography.Text className="text-balance">
-                    {Array.isArray(item.type) ? item.type.join(', ') : item.type || ''}
-                  </Typography.Text>
-                </Flex>
-                <Typography.Text type="secondary" className="w-full">{item.help}</Typography.Text>
-              </Flex>
-            </div>
-          ))}
-        </Flex>
-      </Flex>
-    </Drawer>
-  );
-};
-
-export default DialogAddProperty;

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

@@ -1,136 +0,0 @@
-import React, { useState, useContext, useMemo } from 'react';
-import { Input, Select, Pagination, Flex, Drawer, Typography, Button, Card } from 'antd';
-import { CloseOutlined } from '@ant-design/icons';
-import { useTranslation } from 'react-i18next';
-import { compact } from 'lodash';
-import { CrateManagerContext } from '../Shell';
-import ItemLink from './ItemLink';
-
-interface DialogBrowseEntitiesProps {
-  onClose: () => void;
-  open: boolean;
-  onLoadEntity: (entity: any) => void;
-}
-
-const DialogBrowseEntities: React.FC<DialogBrowseEntitiesProps> = ({
-  onClose,
-  open,
-  onLoadEntity
-}) => {
-  const { t } = useTranslation();
-  const crateManager = useContext(CrateManagerContext);
-  const [data, setData] = useState({
-    filterInputModel: '',
-    pageSize: 10,
-    currentPage: 1,
-    total: 0,
-    query: '',
-    selectedEntityType: undefined as string | undefined,
-  });
-
-  const entityTypes = useMemo(() => 
-    crateManager.getEntityTypes(), [crateManager]);
-
-  const entities = useMemo(() => {
-    const offset = (data.currentPage - 1) * data.pageSize;
-    let entities;
-    
-    if (data.query) {
-      entities = [
-        ...crateManager.getEntities({
-          type: data.selectedEntityType,
-          query: data.query,
-          limit: data.pageSize,
-        }),
-      ];
-    } else {
-      entities = [...crateManager.getEntities({ type: data.selectedEntityType })];
-    }
-    
-    entities = compact(entities);
-    setData(prev => ({ ...prev, total: entities.length }));
-    return entities.slice(offset, offset + data.pageSize);
-  }, [data.currentPage, data.pageSize, data.query, data.selectedEntityType, crateManager]);
-
-  const handleLoadEntity = (entity: any) => {
-    onLoadEntity({ id: entity['@id'] });
-    onClose();
-};
-
-  return (
-    <Drawer
-      title={<Typography.Title className='m-2' level={4}>{t('browse_entities') || 'Browse Entities'}</Typography.Title>}
-      placement="right"
-      onClose={onClose}
-      open={open}
-      width={600} // Equivalent to minWidth: '600px'
-    >
-      <Flex vertical className="h-full">
-        <Flex vertical gap={16} className="overflow-auto flex-grow">
-          <Pagination
-            current={data.currentPage}
-            pageSize={data.pageSize}
-            total={data.total}
-            onChange={(page, pageSize) => setData(prev => ({ ...prev, currentPage: page, pageSize: pageSize }))}
-            size="default"
-            showSizeChanger={false}
-          />
-          <Flex gap={8}>
-            <Select
-              value={data.selectedEntityType || undefined}
-              onChange={(value) => setData(prev => ({ ...prev, selectedEntityType: value as string }))}
-              style={{ minWidth: 150 }}
-              placeholder={t('filter_by_type')}
-              size="middle"
-            >
-              <Select.Option value="">{t('filter_by_type')}</Select.Option>
-              {entityTypes.map((t: string) => (
-                <Select.Option key={t} value={t}>{t}</Select.Option>
-              ))}
-            </Select>
-            <Input.Search
-              style={{ flex: 1 }}
-              size="middle"
-              value={data.filterInputModel}
-              onChange={(e) => {
-                setData(prev => ({
-                  ...prev,
-                  filterInputModel: e.target.value,
-                  currentPage: 1,
-                  query: e.target.value
-                }));
-              }}
-              placeholder={t('search_for_connection') || 'Search for a connection'}
-            />
-          </Flex>
-          <div className="flex-grow">
-            {entities.map((entity) => (
-              <div key={entity['@id']} className="mb-2">
-                <Card 
-                  style={{ 
-                    backgroundColor: '#e6f0ff',
-                    cursor: 'pointer',
-                    transition: 'background-color 0.2s',
-                    borderLeft: '3px solid #409eff'
-                  }} 
-                  hoverable
-                >
-                  <Card.Meta
-                    title={
-                      <ItemLink
-                        entity={entity}
-                        onLoadEntity={() => handleLoadEntity(entity)}
-                      />
-                    }
-                  />
-                </Card>
-              </div>
-            ))}
-          </div>
-        </Flex>
-      </Flex>
-    </Drawer>
-  );
-};
-
-export default DialogBrowseEntities;