@arpproject/recrate 0.1.7-test5 → 0.1.7-test6

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;

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

@@ -1,107 +0,0 @@
-import React, { useRef, useEffect, useState, useContext } from 'react';
-import {
-  Drawer,
-  Button,
-  Flex,
-  Typography,
-  Divider,
-} from 'antd';
-import { CloseOutlined, SaveOutlined } from '@ant-design/icons';
-import { useTranslation } from 'react-i18next';
-import { EditorView, basicSetup } from 'codemirror';
-import { EditorState } from '@codemirror/state';
-import { javascript } from '@codemirror/lang-javascript';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { CrateManagerContext } from '../Shell';
-
-interface DialogEditContextProps {
-  onClose: () => void;
-  onUpdateContext: (context: any) => void;
-  open: boolean;
-}
-
-const DialogEditContext: React.FC<DialogEditContextProps> = ({
-  onClose,
-  onUpdateContext,
-  open,
-}) => {
-  const { t } = useTranslation();
-  const crateManager = useContext(CrateManagerContext);
-  const [error, setError] = useState(false);
-  const editorRef = useRef<EditorView | undefined>(undefined);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (open) {
-      const timeout = setTimeout(() => {
-        if (containerRef.current) {
-          const context = crateManager.getContext();
-          const initialState = EditorState.create({
-            doc: JSON.stringify(context, null, 2),
-            extensions: [basicSetup, oneDark, javascript()],
-          });
-  
-          if (editorRef.current) {
-            editorRef.current.destroy();
-          }
-  
-          editorRef.current = new EditorView({
-            state: initialState,
-            parent: containerRef.current,
-          });
-        }
-      }, 50); // Delay just enough for the drawer to render
-  
-      return () => {
-        clearTimeout(timeout);
-        editorRef.current?.destroy();
-      };
-    }
-  }, [open, crateManager]);
-
-  const handleSave = () => {
-    try {
-      const context = JSON.parse(editorRef.current?.state.doc.toString() || '');
-      onUpdateContext(context);
-      setError(false);
-      onClose();
-    } catch (error) {
-      console.error(error);
-      setError(true);
-    }
-  };
-
-  return (
-    <Drawer 
-      title={<Typography.Title className='m-2' level={4}>{t('edit_context')}</Typography.Title>}
-      placement="left" 
-      onClose={onClose}
-      open={open}
-      width={600} // Equivalent to minWidth: '600px'
-    >
-        <Divider style={{ margin: '16px 0' }} />
-
-        <div
-          ref={containerRef}
-          className="cm-editor"
-        ></div>
-
-        {error && (
-          <Typography.Text type="danger">
-            The context is not a valid JSON data structure.
-          </Typography.Text>
-        )}
-
-        <Button
-          onClick={handleSave}
-          type="primary"
-          icon={<SaveOutlined />}
-          style={{ marginTop: '16px' }}
-        >
-          {t('save_label')}
-        </Button>
-    </Drawer>
-  );
-};
-
-export default DialogEditContext;

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

@@ -1,54 +0,0 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { Flex, Typography, Drawer, Button } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { CrateManagerContext } from '../Shell';
-import { CloseOutlined } from '@ant-design/icons';
-
-interface DialogPreviewCrateProps {
-  onClose: () => void;
-  open: boolean;
-}
-
-const DialogPreviewCrate: React.FC<DialogPreviewCrateProps> = ({ onClose, open }) => {
-  const { t } = useTranslation();
-  const crateManager = useContext(CrateManagerContext);
-  const [crate, setCrate] = useState<any>({});
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (open) { // Only load when drawer is open
-      const loadCrate = async () => {
-        setLoading(true);
-        await new Promise(resolve => setTimeout(resolve, 400));
-        setCrate(crateManager.exportCrate());
-        setLoading(false);
-      };
-      loadCrate();
-    }
-    return () => {
-      setCrate({});
-    };
-  }, [crateManager, open]); // Removed 'key' from dependencies
-
-  return (
-    <Drawer
-      title={<Typography.Title className='m-2' level={4}>{t('preview_crate') || 'Preview Crate'}</Typography.Title>}
-      placement="left"
-      onClose={onClose}
-      open={open}
-      width={600} // Equivalent to minWidth: '600px'
-    >
-      <Flex vertical className="h-full">
-        <div className="text-sm overflow-auto flex-grow">
-          {crate['@graph'] ? (
-            <pre className="whitespace-pre-wrap">{JSON.stringify(crate, null, 2)}</pre>
-          ) : (
-            <Typography.Text>{t('preview_loading')}</Typography.Text>
-          )}
-        </div>
-      </Flex>
-    </Drawer>
-  );
-};
-
-export default DialogPreviewCrate;

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

@@ -1,65 +0,0 @@
-import React, { useState } from 'react';
-import { Flex, Input, Button, Drawer, Typography } from 'antd';
-import { SaveOutlined, CloseOutlined } from '@ant-design/icons';
-import { useTranslation } from 'react-i18next';
-
-interface DialogSaveCrateAsTemplateProps {
-  entity: {
-    [key: string]: any;
-  };
-  onClose: () => void;
-  open: boolean;
-  onSaveCrateTemplate: (data: { name: string }) => void;
-}
-
-const DialogSaveCrateAsTemplate: React.FC<DialogSaveCrateAsTemplateProps> = ({
-  entity,
-  onClose,
-  open,
-  onSaveCrateTemplate
-}) => {
-  const { t } = useTranslation();
-  const [crateName, setCrateName] = useState<string>('');
-
-  const handleSave = () => {
-    onSaveCrateTemplate({ name: crateName });
-    setCrateName('');
-    onClose();
-  };
-
-  return (
-    <Drawer
-      title={<Typography.Title className='m-2' level={4} style={{ margin: 0 }}>{t('save_template') || 'Save as Template'}</Typography.Title>}
-      placement="right"
-      onClose={onClose}
-      open={open}
-      width={600} // Equivalent to minWidth: '600px'
-    >
-      <Flex vertical className="h-full">
-        <Flex vertical gap={16}>
-          <Typography.Text className="text-sm">
-            {t('save_template_prompt')}
-          </Typography.Text>
-          <Input
-            value={crateName}
-            onChange={(e) => setCrateName(e.target.value)}
-            placeholder={t('provide_name_for_template') || 'Enter template name'}
-            size="middle"
-          />
-          <Flex justify="flex-end">
-            <Button
-              onClick={handleSave}
-              disabled={!crateName}
-              type="primary"
-              icon={<SaveOutlined />}
-            >
-              {t('save_label')}
-            </Button>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Drawer>
-  );
-};
-
-export default DialogSaveCrateAsTemplate;