@arpproject/recrate 0.1.2

package/src/crate-builder/CrateManager/validate-identifier.spec.ts

@@ -0,0 +1,82 @@
+import { describe, expect, test } from "vitest";
+import { validateId } from "./validate-identifier";
+
+describe("Test @id's that should be valid", () => {
+    test(`LICENCE.md should be valid`, () => {
+        expect(validateId({ id: "LICENCE.md", type: "File" }).isValid).toBeTruthy;
+        expect(validateId({ id: "LICENCE.md", type: "File, Licence" }).isValid).toBeTruthy;
+        expect(validateId({ id: "LICENCE.md", type: ["File", "Licence"] }).isValid).toBeTruthy;
+    });
+    test(`/path/to/file should be valid`, () => {
+        expect(validateId({ id: "/path/to/file", type: "Dataset" }).isValid).toBeTruthy;
+    });
+    test(`./ should be valid`, () => {
+        expect(validateId({ id: "./", type: "Dataset" }).isValid).toBeTruthy;
+    });
+    test(`../ should be valid`, () => {
+        expect(validateId({ id: "../", type: "Dataset" }).isValid).toBeTruthy;
+    });
+    test(`_:xxx should be valid`, () => {
+        expect(validateId({ id: "_:xxx", type: "Dataset" }).isValid).toBeTruthy;
+    });
+    test(`#xxx should be valid`, () => {
+        expect(validateId({ id: "#xxx", type: "Dataset" }).isValid).toBeTruthy;
+    });
+    test(`http://schema.org/name should be valid`, () => {
+        expect(validateId({ id: "http://schema.org/name", type: "Dataset" }).isValid).toBeTruthy;
+    });
+    test(`https://schema.org/name should be valid`, () => {
+        expect(validateId({ id: "https://schema.org/name", type: "Dataset" }).isValid).toBeTruthy;
+    });
+    test(`ftp://schema.org/name should be valid`, () => {
+        expect(validateId({ id: "ftp://schema.org/name", type: "Dataset" }).isValid).toBeTruthy;
+    });
+    test(`ftps://schema.org/name should be valid`, () => {
+        expect(validateId({ id: "ftps://schema.org/name", type: "Dataset" }).isValid).toBeTruthy;
+    });
+    test(`arcp://uuid,32a423d6-52ab-47e3-a9cd-54f418a48571/doc.html`, () => {
+        expect(
+            validateId({
+                id: "arcp://uuid,32a423d6-52ab-47e3-a9cd-54f418a48571/doc.html",
+                type: "Dataset",
+            }).isValid
+        ).toBeTruthy;
+    });
+    test(`arcp://uuid,b7749d0b-0e47-5fc4-999d-f154abe68065/pics/`, () => {
+        expect(
+            validateId({
+                id: "arcp://uuid,b7749d0b-0e47-5fc4-999d-f154abe68065/pics/",
+                type: "Dataset",
+            }).isValid
+        ).toBeTruthy;
+    });
+    test(`arcp://ni,sha-256;F-34D4TUeOfG0selz7REKRDo4XePkewPeQYtjL3vQs0/`, () => {
+        expect(
+            validateId({
+                id: "arcp://ni,sha-256;F-34D4TUeOfG0selz7REKRDo4XePkewPeQYtjL3vQs0/",
+                type: "Dataset",
+            }).isValid
+        ).toBeTruthy;
+    });
+    test(`arcp://name,gallery.example.org/`, () => {
+        expect(validateId({ id: "arcp://name,gallery.example.org/a", type: "Dataset" }).isValid)
+            .toBeTruthy;
+    });
+});
+describe("Test @id's that should NOT be valid", () => {
+    test(`no id passed`, () => {
+        expect(validateId({ id: "", type: "Dataset" })).toEqual({ isValid: false, message: "No identifier was provided." });
+    });
+    test(`aaa should not be valid`, () => {
+        expect(validateId({ id: "aaa", type: "Person" }).message).toEqual(
+            "The identifier is not valid according to the RO Crate spec nor is it a valid IRI."
+        );
+    });
+    test(`32a423d6-52ab-47e3-a9cd-54f418a48571 should not be valid`, () => {
+        expect(
+            validateId({ id: "32a423d6-52ab-47e3-a9cd-54f418a48571", type: "Person" }).message
+        ).toEqual(
+            `The identifier is not valid according to the RO Crate spec nor is it a valid IRI.`
+        );
+    });
+});

package/src/crate-builder/CrateManager/validate-identifier.ts

@@ -0,0 +1,65 @@
+import * as validateIriPkg from "../lib/validate-iri";
+
+type ValidateIdParams = {
+    id: string | undefined;
+    type: string | string[];
+};
+
+type ValidateIdResponse = { isValid: boolean; message?: string };
+
+export function validateId({ id, type }: ValidateIdParams): ValidateIdResponse {
+    if (!id) {
+        return { isValid: false, message: "No identifier was provided." };
+    }
+
+    // if it's the root descriptor - it's valid
+    if (id === "ro-crate-metadata.json") {
+        return { isValid: true };
+    }
+
+    if (type) {
+        // if type matches File or Dataset then whatever is provided is valid
+        type = Array.isArray(type) ? type.join(", ") : type;
+        if (type.match(/file/i)) return { isValid: true };
+        if (type.match(/Dataset/i)) return { isValid: true };
+    }
+
+    // @id is relative
+    if (id.match(/^\/.*/)) return { isValid: true };
+
+    // @id starting with . is valid
+    if (id.match(/^\..*/)) return { isValid: true };
+
+    // @id starting with # is valid
+    if (id.match(/^\#.*/)) return { isValid: true };
+
+    // @id with blank node is valid
+    if (id.match(/^\_:.*/)) return { isValid: true };
+
+    // arcp URI's are valid
+    if (id.match(/arcp:\/\/name,.*/)) return { isValid: true };
+    if (id.match(/arcp:\/\/uuid,.*/)) return { isValid: true };
+    if (id.match(/arcp:\/\/ni,sha-256;,.*/)) return { isValid: true };
+    // return { isValid: true };
+
+    // otherwise check that the id is a valid IRI
+    try {
+        let result = validateIriPkg.validateIri(id, validateIriPkg.IriValidationStrategy.Strict);
+        if (!result) {
+            // it's valid
+            return { isValid: true };
+        }
+    } catch (error) {
+        return {
+            isValid: false,
+            message:
+                "The identifier is not valid according to the RO Crate spec nor is it a valid IRI.",
+        };
+    }
+
+    return {
+        isValid: false,
+        message:
+            "The identifier is not valid according to the RO Crate spec nor is it a valid IRI.",
+    };
+}

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

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

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

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