@arpproject/recrate 0.1.2

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

@@ -0,0 +1,255 @@
+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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,37 @@
+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 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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,141 @@
+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

@@ -0,0 +1,39 @@
+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;