@arpproject/recrate 0.1.2

package/src/crate-builder/primitives/Text.stories.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import Text from './Text';
+
+const meta: Meta<typeof Text> = {
+  component: Text,
+  title: 'Primitives/Text',
+  argTypes: {
+    type: { 
+      options: ['text', 'textarea', 'url'], 
+      control: { type: 'radio' } 
+    },
+    property: { 
+      control: { type: 'text' } 
+    },
+    value: {
+      control: { type: 'text' }
+    },
+    placeholder: { 
+      control: { type: 'text' } 
+    },
+    onSaveProperty: { action: 'saveProperty' },
+    definition: { control: 'object' }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Text>;
+
+export const SimpleText: Story = {
+  args: {
+    type: 'text',
+    property: 'text',
+    value: 'http://schema.org/name'
+  }
+};
+
+export const TextWithPlaceholder: Story = {
+  args: {
+    type: 'text',
+    property: 'text',
+    value: '',
+    placeholder: 'Enter some text...'
+  }
+};
+
+export const TextWithSpaces: Story = {
+  args: {
+    type: 'text',
+    property: '@id',
+    value: 'http://schema.org/name of person'
+  }
+};
+
+export const TextArea: Story = {
+  args: {
+    type: 'textarea',
+    property: 'description',
+    value: 'This is a longer text that would be better displayed in a textarea.\n\nIt supports multiple paragraphs.'
+  }
+};
+
+export const WithMinLengthConstraint: Story = {
+  args: {
+    type: 'text',
+    property: 'constraint',
+    value: 'short',
+    definition: {
+      minLength: 10
+    }
+  }
+};
+
+export const WithMaxLengthConstraint: Story = {
+  args: {
+    type: 'text',
+    property: 'constraint',
+    value: 'This text is too long for the constraint',
+    definition: {
+      maxLength: 10
+    }
+  }
+};
+
+export const WithRegexConstraint: Story = {
+  args: {
+    type: 'text',
+    property: 'constraint',
+    value: 'abc',
+    definition: {
+      regex: '^[0-9]+$'  // Only numbers are allowed
+    }
+  }
+};
+
+export const WithDateFormatConstraint: Story = {
+  args: {
+    type: 'text',
+    property: 'date',
+    value: 'not a date',
+    definition: {
+      dateFormat: ['YYYY-MM-DD', 'MM/DD/YYYY']
+    }
+  }
+}; 

package/src/crate-builder/primitives/Text.tsx

@@ -0,0 +1,197 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Input, Button, Form, Typography } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { debounce, isBoolean } from 'lodash';
+import dayjs from 'dayjs';
+
+export interface TextProps {
+  type?: 'text' | 'textarea' | 'url';
+  property: string;
+  definition?: {
+    minLength?: number;
+    maxLength?: number;
+    regex?: string;
+    dateFormat?: string[];
+  };
+  value?: string;
+  placeholder?: string;
+  onSaveProperty: (data: { property: string; value: string }) => void;
+}
+
+const Text: React.FC<TextProps> = ({
+  type = 'text',
+  property,
+  definition,
+  value = '',
+  placeholder,
+  onSaveProperty
+}) => {
+  const { t } = useTranslation();
+  const [displayValue, setDisplayValue] = useState<string>(decodeValue(value));
+  const [isValidTextValue, setIsValidTextValue] = useState<boolean>(true);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const saveButtonRef = useRef<HTMLButtonElement>(null);
+
+  // Update internal value when prop value changes
+  useEffect(() => {
+    setDisplayValue(decodeValue(value));
+    // Add validation call here to validate on value changes
+    validateTextConstraints(decodeValue(value));
+  }, [value]);
+
+  // Add initial validation on mount
+  useEffect(() => {
+    validateTextConstraints(displayValue);
+  }, []);
+
+  // Create debounced save function
+  const debouncedSave = useCallback(
+    debounce(() => {
+      save();
+    }, 200, { leading: false, trailing: true }),
+    [property, displayValue, type]
+  );
+
+  // Constraints from definition
+  const constraints = {
+    minLength: definition?.minLength,
+    maxLength: definition?.maxLength,
+    regex: definition?.regex,
+    dateFormat: definition?.dateFormat,
+  };
+
+  function validateTextConstraints(valueToCheck?: string) {
+    const valueToValidate = (valueToCheck ?? displayValue) ?? '';
+    
+    if (constraints.minLength !== undefined && constraints.minLength > valueToValidate.length) {
+      setIsValidTextValue(false);
+    } else if (
+      constraints.maxLength !== undefined && 
+      constraints.maxLength < valueToValidate.length
+    ) {
+      setIsValidTextValue(false);
+    } else if (
+      constraints.regex !== undefined && 
+      !new RegExp(constraints.regex).test(valueToValidate)
+    ) {
+      setIsValidTextValue(false);
+    } else if (
+      constraints.dateFormat !== undefined && 
+      !validateDateFormat(valueToValidate, constraints.dateFormat)
+    ) {
+      setIsValidTextValue(false);
+    } else {
+      setIsValidTextValue(true);
+    }
+  }
+
+  function validateDateFormat(inputString: string, granularity: string[]) {
+    let dateString = inputString;
+    if (inputString.startsWith("-")) {
+      dateString = dateString.substr(1);
+    }
+    return (
+      Array.isArray(granularity) && 
+      granularity.some(g => dayjs(dateString, g, true).isValid())
+    );
+  }
+
+  function save() {
+    if (isValidTextValue) {
+      onSaveProperty({
+        property,
+        value: displayValue.trim()
+      });
+    }
+  }
+
+  function decodeValue(value?: string): string {
+    if (isBoolean(value)) {
+      return String(value);
+    } else if (value) {
+      try {
+        return decodeURI(value) === 'undefined' ? '' : decodeURI(value);
+      } catch (error) {
+        return value;
+      }
+    }
+    return '';
+  }
+
+  function getConstraintsString(): string {
+    const message: string[] = [];
+    
+    Object.entries(constraints).forEach(([name, value]) => {
+      if (name && value) {
+        message.push(`${name}: ${value}`);
+      }
+    });
+    
+    return message.join(', ');
+  }
+
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    setDisplayValue(newValue);
+    validateTextConstraints(newValue);
+  };
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setDisplayValue(newValue);
+    validateTextConstraints(newValue);
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    if (e.relatedTarget !== saveButtonRef.current) {
+      debouncedSave();
+    }
+  };
+
+  return (
+    <div className="flex flex-col w-full space-y-2 describo-property-type-text">
+      <div className="flex flex-row space-x-2">
+        {type !== 'textarea' ? (
+          <Input
+            size='middle'
+            type={type}
+            value={displayValue}
+            onChange={handleTextChange}
+            onBlur={handleBlur}
+            placeholder={placeholder}
+            status={!isValidTextValue ? 'error' : ''}
+          />
+        ) : (
+          <Input.TextArea
+            ref={textareaRef}
+            value={displayValue}
+            onChange={handleTextareaChange}
+            onBlur={handleBlur}
+            placeholder={placeholder}
+            status={!isValidTextValue ? 'error' : ''}
+            autoSize={{ minRows: 3, maxRows: 6 }}
+          />
+        )}
+        
+        <Button
+          ref={saveButtonRef}
+          onClick={save}
+          variant='solid'
+          color="green"
+          size="middle"
+          danger={!isValidTextValue}
+          icon={<CheckOutlined />}
+        />
+      </div>
+      
+      {!isValidTextValue && getConstraintsString() && (
+        <Typography.Text type="danger">
+          {t('text_constraints_error_message', { value: getConstraintsString() })}
+        </Typography.Text>
+      )}
+    </div>
+  );
+};
+
+export default Text;

package/src/crate-builder/primitives/Time.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import Time from './Time';
+
+export default {
+  title: 'Primitives/Time',
+  component: Time,
+  argTypes: {
+    property: {
+      control: { type: 'text' }
+    },
+    value: {
+      options: ['09:30', '11:00:03', '15:58', '18:34:21', 'time now'],
+      control: { type: 'radio' }
+    },
+    onSaveProperty: { action: 'saveProperty' }
+  }
+} as Meta<typeof Time>;
+
+const Template: StoryFn<typeof Time> = (args) => <Time {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  property: 'currentTime',
+  value: '09:30'
+};
+
+export const WithSeconds = Template.bind({});
+WithSeconds.args = {
+  property: 'currentTime',
+  value: '11:00:03'
+};
+
+export const InvalidTime = Template.bind({});
+InvalidTime.args = {
+  property: 'currentTime',
+  value: 'time now'
+};

package/src/crate-builder/primitives/Time.tsx

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { throttle } from 'lodash';
+
+export interface TimeProps {
+  property: string;
+  value?: string;
+  onSaveProperty: (data: { property: string; value: string }) => void;
+}
+
+const Time: React.FC<TimeProps> = ({
+  property,
+  value,
+  onSaveProperty
+}) => {
+  const { t } = useTranslation();
+  const [internalValue, setInternalValue] = useState(value);
+  const [isValidTime, setIsValidTime] = useState(checkTimeIsValid(value));
+
+  useEffect(() => {
+    setInternalValue(value);
+    setIsValidTime(checkTimeIsValid(value));
+  }, [value]);
+
+  const throttledSave = throttle((newValue: string) => {
+    const isValid = checkTimeIsValid(newValue);
+    setIsValidTime(isValid);
+    if (!isValid) return;
+    onSaveProperty({
+      property,
+      value: newValue,
+    });
+  }, 1000);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInternalValue(newValue);
+    throttledSave(newValue);
+  };
+
+  function checkTimeIsValid(string?: string): boolean {
+    try {
+      if (!string) return true;
+      if (string.match(/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/)) return true;
+      if (string.match(/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/)) return true;
+    }
+    catch (error) { }
+    return false;
+  }
+
+  return (
+    <div className="flex flex-col w-full describo-property-type-time">
+      <Input
+        size='middle'
+        value={internalValue || ''}
+        onChange={handleChange}
+        onBlur={(e) => throttledSave(e.target.value)}
+        placeholder={t('provide_time') || ''}
+        status={!isValidTime ? 'error' : ''}
+      />
+      {!isValidTime && (
+        <Typography.Text type="danger">
+          {t('invalid_time_value', { value: internalValue })}
+        </Typography.Text>
+      )}
+    </div>
+  );
+};
+
+export default Time;

package/src/crate-builder/primitives/Url.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import Url from './Url';
+
+export default {
+  title: 'Primitives/Url',
+  component: Url,
+  argTypes: {
+    property: {
+      control: { type: 'text' }
+    },
+    value: {
+      options: [
+        'http://schema.org/name',
+        'https://schema.org/name',
+        'arcp://name,cooee-corpus/item/1-001',
+        'arcp://uuid,c6179148-3cde-4435-8e66-304453f89d59',
+        'something not url'
+      ],
+      control: { type: 'radio' }
+    },
+    onCreateEntity: { action: 'createEntity' }
+  }
+} as Meta<typeof Url>;
+
+const Template: StoryFn<typeof Url> = (args) => <Url {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  property: 'url',
+  value: 'http://schema.org/name'
+};
+
+export const InvalidUrl = Template.bind({});
+InvalidUrl.args = {
+  property: 'url',
+  value: 'something not url'
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  property: 'url'
+};

package/src/crate-builder/primitives/Url.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Button, Typography, Select } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { throttle } from 'lodash';
+import { isURL } from '../CrateManager/lib';
+
+export interface UrlProps {
+  property: string;
+  value?: string;
+  onCreateEntity: (data: { property: string; json: any }) => void;
+}
+
+const Url: React.FC<UrlProps> = ({
+  property,
+  value,
+  onCreateEntity
+}) => {
+  const { t } = useTranslation();
+  const [internalValue, setInternalValue] = useState(value || '');
+  const [isValidUrl, setIsValidUrl] = useState(value ? isURL(value) : true);
+
+  useEffect(() => {
+    setInternalValue(value || '');
+    setIsValidUrl(value ? isURL(value) : true);
+  }, [value]);
+
+  const throttledSave = throttle(() => {
+    if (isValidUrl) {
+      onCreateEntity({
+        property,
+        json: {
+          '@id': internalValue.trim(),
+          '@type': 'URL',
+          name: internalValue.trim(),
+        },
+      });
+    }
+  }, 1000);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    setInternalValue(newValue);
+    setIsValidUrl(isURL(newValue));
+  };
+
+  return (
+    <div className="flex flex-col describo-property-type-url">
+      <div className="flex flex-row flex-grow space-x-2">
+        <Input
+          size='middle'
+          value={internalValue}
+          onChange={handleChange}
+          onBlur={throttledSave}
+          status={!isValidUrl ? 'error' : ''}
+        />
+        <Button
+          onClick={throttledSave}
+          variant='solid'
+          color="green"
+          size="middle"
+          danger={!isValidUrl}
+          icon={<CheckOutlined />}
+        />
+      </div>
+      {!isValidUrl && (
+        <Typography.Text type="danger">
+          {t('invalid_url_value')}
+        </Typography.Text>
+      )}
+    </div>
+  );
+};
+
+export default Url;

package/src/crate-builder/primitives/Value.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import Value from './Value';
+
+export default {
+  title: 'Primitives/Value',
+  component: Value,
+  argTypes: {
+    property: {
+      control: { type: 'text' }
+    },
+    value: {
+      options: ['1', 'http://schema.org/name', '{ "key": "value" }'],
+      control: { type: 'select' }
+    }
+  }
+} as Meta<typeof Value>;
+
+const Template: StoryFn<typeof Value> = (args) => <Value {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  property: 'value',
+  value: '1'
+};
+
+export const ValidUrl = Template.bind({});
+ValidUrl.args = {
+  property: 'value',
+  value: 'http://schema.org/name'
+};
+
+export const InvalidValue = Template.bind({});
+InvalidValue.args = {
+  property: 'value',
+  value: '{ "key": "value" }' as any
+};

package/src/crate-builder/primitives/Value.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { isString } from 'lodash';
+import { useTranslation } from 'react-i18next';
+
+export interface ValueProps {
+  property: string;
+  value: string;
+}
+
+const Value: React.FC<ValueProps> = ({
+  property,
+  value
+}) => {
+  const { t } = useTranslation();
+  const isValidString = isString(value);
+
+  return (
+    <div className="flex flex-col describo-property-type-value">
+      {isValidString ? (
+        <div>{value}</div>
+      ) : (
+        <div>
+          {t('invalid_value_value', { type: value })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Value;

package/src/crate-builder/primitives/date-libs.ts

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+
+export function checkDateIsValid(date?: string): boolean {
+    if (!date) return false;
+    try {
+        const dateObj = dayjs(date);
+        return dateObj.isValid();
+    } catch (error) {
+        console.error(error);
+        return false;
+    }
+}