@arpproject/recrate 0.1.7 → 0.1.8

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

@@ -1,255 +0,0 @@
-import React from 'react';
-import dayjs from 'dayjs';
-import { isDecimal, isInt, isFloat, isNumeric } from 'validator';
-import { isURL } from '../CrateManager/lib';
-import { useStateStore } from '../store';
-import TextComponent from '../primitives/Text';
-import DateComponent from '../primitives/Date';
-import DateTimeComponent from '../primitives/DateTime';
-import TimeComponent from '../primitives/Time';
-import NumberComponent from '../primitives/Number';
-import ValueComponent from '../primitives/Value';
-import SelectComponent from '../primitives/Select';
-import UrlComponent from '../primitives/Url';
-import BooleanComponent from '../primitives/Boolean';
-
-interface EntityPropertyInstanceProps {
-  property: string;
-  value: string | number | boolean | Date | any[];
-  idx: number;
-  definition: {
-    type: string;
-    value?: any;
-    values?: string[];
-    minValue?: number;
-    maxValue?: number;
-    numberType?: string[];
-    style?: 'dropdown' | 'radio' | 'checkbox';
-    // Add TextComponent definition properties
-    minLength?: number;
-    maxLength?: number;
-    regex?: string;
-    dateFormat?: string[];
-  };
-  className?: string;
-  placeholder?: string;
-  onSaveProperty: (data: any) => void;
-  onCreateEntity: (data: any) => void;
-}
-
-export const EntityPropertyInstance: React.FC<EntityPropertyInstanceProps> = ({
-  property,
-  value,
-  idx,
-  definition,
-  className,
-  placeholder,
-  onSaveProperty,
-  onCreateEntity
-}) => {
-  const state = useStateStore();
-
-  const savePropertyValue = async (data: any) => {
-    if (!data.idx) {
-      data = { ...data, property, idx };
-    }
-    onSaveProperty(data);
-  };
-
-  const isDate = (value: any) => {
-    try {
-      if (typeof value === 'boolean') return false;
-      const date = dayjs(value);
-      return date.isValid() && definitionIncludes('Date');
-    } catch (error) {
-      return false;
-    }
-  };
-
-  const isDateTime = (value: any) => {
-    try {
-      if (typeof value === 'boolean') return false;
-      const date = dayjs(value);
-      return date.isValid() && definitionIncludes('DateTime');
-    } catch (error) {
-      return false;
-    }
-  };
-
-  const isTime = (value: any) => {
-    const stringValue = String(value);
-    return (stringValue.match(/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/) ||
-      stringValue.match(/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/)) &&
-      (definitionIncludes('DateTime') || definitionIncludes('Time'));
-  };
-
-  const isNumber = (value: any) => {
-    const stringValue = String(value);
-    return (isDecimal(stringValue) || isInt(stringValue) || isFloat(stringValue) || isNumeric(stringValue)) &&
-      (definitionIncludes('Number') || definitionIncludes('Float') || definitionIncludes('Integer'));
-  };
-
-  const isValue = () => {
-    return definition?.type === 'Value';
-  };
-
-  const isSelect = () => {
-    return (definition?.values?.includes(String(value)) || definitionIncludes('Select'));
-  };
-
-  const isBoolean = () => {
-    return definition?.type == 'Boolean';
-  };
-
-  const isText = (value: any) => {
-    return !isBoolean() &&
-      !isDate(value) &&
-      !isDateTime(value) &&
-      !isTime(value) &&
-      !isNumber(value) &&
-      !isURL(value) &&
-      !isSelect() &&
-      !isValue();
-  };
-
-  const definitionIncludes = (type: string) => {
-    return definition?.type?.includes(type);
-  };
-
-  if (state.configuration?.readonly) {
-    if (isDate(value)) {
-      try {
-        const dateValue = typeof value === 'string' || typeof value === 'number' || value instanceof Date ? value : String(value);
-        return <div>{dayjs(dateValue).format('dddd, MMM DD, YYYY')}</div>;
-      } catch (error) {
-        return <div>{String(value)}</div>;
-      }
-    }
-    if (isDateTime(value)) {
-      try {
-        const dateValue = typeof value === 'string' || typeof value === 'number' || value instanceof Date ? value : String(value);
-        return <div>{dayjs(dateValue).format('dddd, MMM DD, YYYY hh:mm A')}</div>;
-      } catch (error) {
-        return <div>{String(value)}</div>;
-      }
-    }
-    return <div className={className}>{String(value)}</div>;
-  }
-
-  if (isValue()) {
-    return <ValueComponent 
-      value={typeof value === 'string' ? value : String(value)} 
-      property={property} 
-    />;
-  }
-
-  if (isBoolean()) {
-    return (
-      <BooleanComponent
-        property={property}
-        value={value as boolean}
-        onSaveProperty={savePropertyValue}
-      />
-    );
-  }
-
-  if (isDateTime(value)) {
-    return (
-      <DateTimeComponent
-        property={property}
-        value={value as string}
-        onSaveProperty={savePropertyValue}
-      />
-    );
-  }
-
-  if (isDate(value)) {
-    return (
-      <DateComponent
-        property={property}
-        value={value as string}
-        onSaveProperty={savePropertyValue}
-      />
-    );
-  }
-
-  if (isTime(value)) {
-    return (
-      <TimeComponent
-        property={property}
-        value={value as string}
-        onSaveProperty={savePropertyValue}
-      />
-    );
-  }
-
-  if (isNumber(value)) {
-    return (
-      <NumberComponent
-        property={property}
-        value={value as number}
-        definition={definition}
-        onSaveProperty={savePropertyValue}
-      />
-    );
-  }
-
-  if (isSelect()) {
-    return (
-      <SelectComponent
-        property={property}
-        value={value as string}
-        definition={{
-          values: definition.values || [],
-          style: definition.style
-        }}
-        onSaveProperty={savePropertyValue}
-      />
-    );
-  }
-
-  if (isURL(String(value)) && state.configuration?.enableUrlMarkup) {
-    return (
-      <UrlComponent
-        property={property}
-        value={String(value)}
-        onCreateEntity={onCreateEntity}
-      />
-    );
-  }
-
-  if (isText(value) && definition.type.includes('TextArea')) {
-    return (
-      <TextComponent
-        type="textarea"
-        property={property}
-        value={value as string}
-        definition={{
-          minLength: definition.minLength,
-          maxLength: definition.maxLength,
-          regex: definition.regex,
-          dateFormat: definition.dateFormat
-        }}
-        placeholder={placeholder}
-        onSaveProperty={savePropertyValue}
-      />
-    );
-  }
-
-  return (
-    <TextComponent
-      property={property}
-      value={value as string}
-      definition={{
-        minLength: definition.minLength,
-        maxLength: definition.maxLength,
-        regex: definition.regex,
-        dateFormat: definition.dateFormat
-      }}
-      placeholder={placeholder}
-      onSaveProperty={savePropertyValue}
-    />
-  );
-};
-
-export default EntityPropertyInstance;

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

@@ -1,95 +0,0 @@
-import React, { useState, useMemo, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Tag, Select, Flex } from 'antd';
-import { ProfileManagerContext } from '../Shell';
-import { useStateStore } from '../store';
-
-interface EntityTypeProps {
-  entity: {
-    '@type': string[];
-  };
-  onUpdateEntity: (data: { property: string; value: string[] }) => void;
-}
-
-export const EntityType: React.FC<EntityTypeProps> = ({ entity, onUpdateEntity }) => {
-  const [selectedClass, setSelectedClass] = useState<string | undefined>(undefined);
-  const profileManager = useContext(ProfileManagerContext);
-  const state = useStateStore();
-  const { t } = useTranslation();
-
-  const classes = useMemo(() => {
-    return profileManager?.getClasses().map((c: string) => ({ value: c, label: c })) || [];
-  }, [profileManager]);
-
-  const types = useMemo(() => {
-    return entity['@type'];
-  }, [entity]);
-
-  const closable = useMemo(() => {
-    return entity['@type'].length > 1;
-  }, [entity]);
-
-  const getTypeLabelFromProfile = (type: string) => {
-    return profileManager?.getTypeLabel(type) || type;
-  };
-
-  const handleSave = (newClass: string) => {
-    if (!newClass) return;
-    onUpdateEntity({
-      property: '@type',
-      value: [...entity['@type'], newClass],
-    });
-    setSelectedClass('');
-  };
-
-  const handleDelete = (typeToDelete: string) => {
-    const updatedTypes = entity['@type'].filter(t => t !== typeToDelete);
-    onUpdateEntity({
-      property: '@type',
-      value: updatedTypes,
-    });
-    setSelectedClass('');
-  };
-
-  return (
-    <Flex className="flex-row">
-      <div className="min-w-32 w-1/3 xl:w-1/5 flex flex-col describo-property-name">@type</div>
-      <Flex className="w-2/3 xl:w-4/5 flex-row flex-wrap">
-        {types.map((etype) => (
-          <Tag
-            key={etype}
-            closable={closable}
-            onClose={() => handleDelete(etype)}
-            style={{
-              backgroundColor: '#f0f0f0',
-              borderRadius: '16px',
-              padding: '0 12px',
-              height: '32px',
-              display: 'flex',
-              alignItems: 'center',
-              margin: '4px',
-            }}
-          >
-            {getTypeLabelFromProfile(etype)}
-          </Tag>
-        ))}
-        {!state.configuration?.readonly && (
-          <Select
-            value={selectedClass}
-            onChange={(value) => handleSave(value)}
-            placeholder={t("select_a_class_to_add")}            
-            style={{ width: 250, margin: '4px', height: '32px' }}
-          >
-            {classes.map((classOption: { value: string; label: string }) => (
-              <Select.Option key={classOption.value} value={classOption.value}>
-                {classOption.label}
-              </Select.Option>
-            ))}
-          </Select>
-        )}
-      </Flex>
-    </Flex>
-  );
-};
-
-export default EntityType;

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

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Typography } from 'antd';
-import RenderTypes from './RenderTypes';
-
-interface ItemLinkProps {
-  entity: {
-    '@id': string;
-    '@type': string[];
-    name: string;
-  };
-  onLoadEntity: (data: { id: string }) => void;
-  className?: string;  // Add this line
-}
-
-export const ItemLink: React.FC<ItemLinkProps> = ({ entity, onLoadEntity, className }) => {
-  const handleLoadEntity = () => {
-    onLoadEntity({ id: entity['@id'] });
-  };
-
-  return (
-    <div className={`flex flex-col m-4 w-full ${className || ''}`} onClick={handleLoadEntity}>
-      <Typography.Text type="secondary" style={{ fontSize: '0.75rem' }} className="pb-1 mb-1 border-b border-black/20">
-        {decodeURIComponent(entity['@id'])}
-      </Typography.Text>
-      <div className="flex flex-row space-x-2 items-center">
-        <div className="text-base flex flex-row space-x-1">
-          <RenderTypes types={entity['@type']} />
-        </div>
-        <Typography.Text strong>
-          {entity.name}
-        </Typography.Text>
-      </div>
-    </div>
-  );
-};
-
-export default ItemLink;

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

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import PaginateLinkedEntities from './PaginateLinkedEntities';
-import Chance from 'chance';
-import range from 'lodash/range';
-
-const chance = new Chance();
-
-const meta: Meta<typeof PaginateLinkedEntities> = {
-  component: PaginateLinkedEntities,
-  argTypes: {
-    onLoadEntity: { action: 'loadEntity' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof PaginateLinkedEntities>;
-
-function generateEntities(limit: number) {
-  return range(0, limit).map((i) => ({
-    idx: i,
-    value: {
-      '@id': chance.url(),
-      '@type': ['File'],
-      name: `/path/to/file/${chance.word()}`,
-    },
-  }));
-}
-
-export const ValidEntityInputWithOneEntity: Story = {
-  args: {
-    readonly: false,
-    property: 'something',
-    entities: generateEntities(1),
-  },
-};
-
-export const ValidEntityInputWithOneHundredEntities: Story = {
-  args: {
-    readonly: false,
-    property: 'something',
-    entities: generateEntities(100),
-  },
-};

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

@@ -1,141 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Input, Pagination } from 'antd';
-import { useTranslation } from 'react-i18next';
-import { useStateStore } from '../store';
-import ItemLink from './ItemLink';
-import RenderLinkedItem from './RenderLinkedItem';
-
-interface PaginateLinkedEntitiesProps {
-  entities: Array<{
-    idx: number;
-    value: {
-      '@id': string;
-      '@type': string[];
-      name: string;
-    };
-  }>;
-  property: string;
-  readonly?: boolean;
-  className?: string;
-  onLoadEntity: (data: { id: string }) => void;
-  onUnlinkEntity: (data: { property: string; tgtEntityId: string }) => void;
-}
-
-const PaginateLinkedEntities: React.FC<PaginateLinkedEntitiesProps> = ({
-  entities,
-  property,
-  readonly = false,
-  className = '',
-  onLoadEntity,
-  onUnlinkEntity
-}) => {
-  const { t } = useTranslation();
-  const editorState = useStateStore();
-  const [filter, setFilter] = useState<string>('');
-  const [pageSize] = useState(10);
-  const [currentPage, setCurrentPage] = useState(
-    editorState.editorState.latest()[property]?.paginator?.currentPage ?? 1
-  );
-  const [displayEntities, setDisplayEntities] = useState<typeof entities>([]);
-  const [total, setTotal] = useState(entities.length);
-
-  useEffect(() => {
-    setTotal(entities.length);
-    setCurrentPage(editorState.editorState.latest()[property]?.paginator?.currentPage ?? 1);
-    filterAndChunkEntitiesForDisplay();
-  }, [entities]);
-
-  const filterAndChunkEntitiesForDisplay = () => {
-    if (total < pageSize) {
-      setCurrentPage(1);
-    }
-    
-    const offset = (currentPage - 1) * pageSize;
-    let filteredEntities = entities;
-
-    if (filter) {
-      const re = new RegExp(filter, 'i');
-      filteredEntities = entities.filter(
-        (e) => e.value?.name?.match(re) || e.value?.['@id']?.match(re)
-      );
-      setTotal(filteredEntities.length);
-    } else {
-      setTotal(entities.length);
-    }
-
-    setDisplayEntities(filteredEntities.slice(offset, offset + pageSize));
-
-    const currentState = editorState.editorState.latest();
-    if (currentPage !== currentState[property]?.paginator?.currentPage) {
-      currentState[property] = {
-        paginator: {
-          currentPage: currentPage,
-        },
-      };
-      editorState.editorState.update(currentState);
-    }
-  };
-
-  useEffect(() => {
-    filterAndChunkEntitiesForDisplay();
-  }, [filter, currentPage]);
-
-  const handlePageChange = (_event: React.ChangeEvent<unknown>, page: number) => {
-    setCurrentPage(page);
-  };
-
-  const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setFilter(event.target.value);
-  };
-
-  return (
-    <div className="flex flex-col">
-      <div className="flex flex-row justify-center pt-2 mb-4">
-        <Pagination
-          current={currentPage}
-          pageSize={pageSize}
-          total={total}
-          onChange={setCurrentPage}
-          showSizeChanger={false}
-          hideOnSinglePage={true}
-          showTotal={(total) => t('pagination_total', { total })}
-        />
-      </div>
-      <div className="flex flex-row space-x-2 items-center">
-        <div className="flex-grow">
-          <Input.Search
-            value={filter}
-            onChange={handleFilterChange}
-            onSearch={filterAndChunkEntitiesForDisplay}
-            placeholder={t('filter_the_entities') || 'Filter the entities'}
-          />
-        </div>
-      </div>
-      <div className="flex flex-col pt-2">
-        {displayEntities.map((entity) => (
-          <RenderLinkedItem
-            key={entity.value['@id']}
-            entity={entity.value}
-            property={property}
-            readonly={readonly}
-            onLoadEntity={onLoadEntity}
-            onUnlinkEntity={onUnlinkEntity}
-          />
-        ))}
-      </div>
-      <div className="flex flex-row justify-center pt-2">
-        <Pagination
-          current={currentPage}
-          pageSize={pageSize}
-          total={total}
-          onChange={setCurrentPage}
-          showSizeChanger={false}
-          hideOnSinglePage={true}
-          showTotal={(total) => t('pagination_total', { total })}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default PaginateLinkedEntities;

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

@@ -1,39 +0,0 @@
-import React, { useState, useMemo } from 'react';
-
-interface PropertyHelpProps {
-  help?: string;
-}
-
-export const PropertyHelp: React.FC<PropertyHelpProps> = ({ help }) => {
-  const [showMore, setShowMore] = useState(false);
-  const length = 100;
-
-  const showToggle = useMemo(() => {
-    return help ? help.length > length : false;
-  }, [help]);
-
-  const displayHelp = useMemo(() => {
-    if (!help) return '';
-    if (showMore) return help;
-    return help.slice(0, length);
-  }, [help, showMore]);
-
-  if (!showToggle) {
-    return (
-      <div className="text-gray-600 font-light text-sm pr-1 describo-property-help">
-        {displayHelp}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="text-gray-600 font-light text-sm pr-1 cursor-pointer describo-property-help-more"
-      onClick={() => setShowMore(!showMore)}
-    >
-      {displayHelp} {!showMore && <span>...</span>}
-    </div>
-  );
-};
-
-export default PropertyHelp;