@arpproject/recrate 0.1.7 → 0.1.8

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

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

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

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

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

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

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

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

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

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