@arpproject/recrate 0.1.2

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

@@ -0,0 +1,166 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { InputNumber, Button, Typography, Input } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { debounce } from 'lodash';
+
+export interface NumberProps {
+  property: string;
+  definition?: {
+    minValue?: number;
+    maxValue?: number;
+    numberType?: string[];
+  };
+  value?: string | number;
+  onSaveProperty: (data: { property: string; value: number }) => void;
+}
+
+const NumberComponent: React.FC<NumberProps> = ({
+  property,
+  definition,
+  value,
+  onSaveProperty
+}) => {
+  const { t } = useTranslation();
+  const [internalValue, setInternalValue] = useState<string>(value?.toString() || '');
+  const [isValidNumber, setIsValidNumber] = useState<boolean>(checkIsNumeric(value));
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // Constraints from definition
+  const constraints = {
+    minValue: definition?.minValue,
+    maxValue: definition?.maxValue,
+    numberType: definition?.numberType,
+  };
+
+  // Update when props change
+  useEffect(() => {
+    if (!isDeleting) {
+      setInternalValue(value?.toString() || '');
+      setIsValidNumber(checkIsNumeric(value));
+    }
+  }, [value, isDeleting]);
+
+  function save(): void {
+    if (isDeleting) return;
+    
+    const isValid = checkIsNumeric(internalValue);
+    setIsValidNumber(isValid);
+    
+    if (isValid) {
+      const normalizedValue = internalValue.replace(',', '.');
+      const numValue = parseFloat(normalizedValue);
+      if (validateNumberConstraints(numValue)) {
+        onSaveProperty({
+          property,
+          value: numValue
+        });
+      }
+    }
+  }
+
+  function handleDelete(): void {
+    setIsDeleting(true);
+    // Your delete logic here
+  }
+
+  // Create debounced save function
+  const debouncedSave = useCallback(
+    debounce(() => {
+      save();
+    }, 200),
+    [internalValue, property]
+  );
+
+  function checkIsNumeric(value?: string | number): boolean {
+    if (value === undefined || value === null) return false;
+    const stringValue = String(value);
+    // Simple numeric check: matches integers and decimals (with either . or ,), positive and negative
+    return /^-?\d+([.,]\d+)?$/.test(stringValue);
+  }
+
+  function isNumberType(value: number, numberTypes: string[]): boolean {
+    const stringValue = String(value).toLowerCase();
+
+    const typeMap: Record<string, boolean> = {
+      any: true,
+      long: Number.isSafeInteger(value),
+      int: Number.isInteger(value),
+      float: stringValue.includes(".") && !Number.isNaN(parseFloat(stringValue)),
+      double: !Number.isNaN(parseFloat(stringValue)),
+    };
+
+    return Array.isArray(numberTypes) && 
+      numberTypes.some((type) => typeMap[type.toLowerCase()]);
+  }
+
+  function validateNumberConstraints(value: number): boolean {
+    if (constraints.minValue !== undefined && constraints.minValue > value) return false;
+    if (constraints.maxValue !== undefined && constraints.maxValue < value) return false;
+    if (constraints.numberType && !isNumberType(value, constraints.numberType)) return false;
+    return true;
+  }
+
+  function getConstraintsString(): string {
+    const message: string[] = [];
+    
+    Object.entries(constraints).forEach(([name, value]) => {
+      if (name && value) {
+        message.push(`${name}: ${value}`);
+      }
+    });
+    
+    return message.join(', ');
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
+    const newValue = e.target.value;
+    setInternalValue(newValue);
+    setIsValidNumber(checkIsNumeric(newValue));
+  }
+
+  const isValidConstraints = isValidNumber && 
+    validateNumberConstraints(parseFloat(internalValue));
+
+  return (
+    <div className="flex flex-col w-full describo-property-type-number">
+      <div className="flex flex-row space-x-2">
+        <Input
+          size='middle'
+          type="number"
+          value={internalValue}
+          onChange={handleChange}
+          onBlur={debouncedSave}
+          style={{ width: '100%' }}
+          status={(!isValidNumber || !isValidConstraints) ? 'error' : ''}
+        />
+        <Button
+          onClick={() => {
+            // Cancel any pending debounced save
+            debouncedSave.cancel();
+            save();
+          }}
+          variant='solid'
+          color="green"
+          size="middle"
+          disabled={!isValidNumber || !isValidConstraints}
+          icon={<CheckOutlined />}
+        />
+      </div>
+      
+      {!isValidNumber && internalValue && (
+        <Typography.Text type="danger">
+          {t('invalid_number_value', { value: internalValue })}
+        </Typography.Text>
+      )}
+      
+      {isValidNumber && !isValidConstraints && getConstraintsString() && (
+        <Typography.Text type="danger">
+          {t('number_constraints_error_message', { value: getConstraintsString() })}
+        </Typography.Text>
+      )}
+    </div>
+  );
+};
+
+export default NumberComponent;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import Select from './Select';
+
+export default {
+  title: 'Primitives/Select',
+  component: Select,
+  argTypes: {
+    value: {
+      options: ['a', 'b', 'c'],
+      control: { type: 'select' }
+    },
+    onSaveProperty: { action: 'saveProperty' }
+  }
+} as Meta<typeof Select>;
+
+const Template: StoryFn<typeof Select> = (args) => <Select {...args} />;
+
+export const DefaultSelect = Template.bind({});
+DefaultSelect.args = {
+  property: 'select',
+  value: 'a',
+  definition: {
+    values: ['a', 'b', 'c']
+    // no style, defaults to dropdown
+  }
+};
+
+export const DropdownSelect = Template.bind({});
+DropdownSelect.args = {
+  property: 'select',
+  value: 'a',
+  definition: {
+    values: ['a', 'b', 'c'],
+    style: 'dropdown'
+  }
+};
+
+export const RadioSelect = Template.bind({});
+RadioSelect.args = {
+  property: 'select',
+  value: 'a',
+  definition: {
+    values: ['a', 'b', 'c'],
+    style: 'radio'
+  }
+};
+
+export const CheckboxSelect = Template.bind({});
+CheckboxSelect.args = {
+  property: 'select',
+  value: ['a'],
+  definition: {
+    values: ['a', 'b', 'c'],
+    style: 'checkbox'
+  }
+};
+
+export const InvalidSelect = Template.bind({});
+InvalidSelect.args = {
+  property: 'select',
+  value: 'a',
+  definition: {
+    values: ['a', 'b', 'c']
+  }
+};

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

@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react';
+import { Select, Radio, Checkbox, Form } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { isArray, isString, uniq } from 'lodash';
+
+export interface SelectProps {
+  property: string;
+  value?: string | string[];
+  definition: {
+    values: string[];
+    style?: 'dropdown' | 'radio' | 'checkbox';
+  };
+  onSaveProperty: (data: { property: string; value: string | string[] }) => void;
+}
+
+const SelectComponent: React.FC<SelectProps> = ({
+  property,
+  value,
+  definition,
+  onSaveProperty
+}) => {
+  const { t } = useTranslation();
+  const [internalValue, setInternalValue] = useState<string | string[] | undefined>(value === '' ? undefined : value);
+  const [hasValidValues, setHasValidValues] = useState<boolean>(false);
+
+  useEffect(() => {
+    // setInternalValue(value);
+    setHasValidValues(verifySelectValuesAreStrings(definition.values));
+  }, [value]);
+
+  useEffect(() => {
+    setHasValidValues(verifySelectValuesAreStrings(definition.values));
+  }, [definition.values]);
+
+  const save = (newValue: string | string[]) => {
+    let valueToSave = newValue;
+    if (definition.style === 'checkbox' && !isArray(valueToSave)) {
+      valueToSave = [valueToSave as string];
+    }
+    setInternalValue(valueToSave);
+    onSaveProperty({
+      property,
+      value: valueToSave
+    });
+  };
+
+  const verifySelectValuesAreStrings = (values: any[]): boolean => {
+    if (!isArray(values)) return false;
+    const stringChecks = values.map(v => isString(v));
+    const uniqueChecks = uniq(stringChecks);
+    return uniqueChecks.length === 1 && uniqueChecks[0] === true;
+  };
+
+  if (!hasValidValues) {
+    return (
+      <div className="text-xs text-gray-700">
+        {t('invalid_select_value')}
+      </div>
+    );
+  }
+
+  if (definition.style === 'radio') {
+    return (
+      <div className="flex flex-col w-full describo-property-type-select">
+        <Radio.Group
+          value={internalValue as string}
+          onChange={(e) => save(e.target.value)}
+        >
+          {definition.values.map((value, idx) => (
+            <div key={idx} className="flex flex-col">
+              <Radio value={value}>
+                {value}
+              </Radio>
+            </div>
+          ))}
+        </Radio.Group>
+      </div>
+    );
+  }
+
+  if (definition.style === 'checkbox') {
+    return (
+      <div className="flex flex-col w-full describo-property-type-select">
+        <Checkbox.Group
+          className="block"
+          value={isArray(internalValue) ? internalValue : []}
+          onChange={(checkedValues) => save(checkedValues as string[])}
+        >
+          {definition.values.map((value, idx) => (
+            <div key={idx} className="flex flex-col">
+              <Checkbox value={value}>
+                {value}
+              </Checkbox>
+            </div>
+          ))}
+        </Checkbox.Group>
+      </div>
+    );
+  }
+
+  // Default dropdown style
+  return (
+    <div className="flex flex-col w-full describo-property-type-select">
+      <Form.Item>
+        <Select
+          value={internalValue}
+          onChange={(value) => save(value as string | string[])}
+          style={{ width: '100%' }}
+          placeholder={t('select')}
+        >
+          {definition.values.map((value, idx) => (
+            <Select.Option key={idx} value={value}>
+              {value}
+            </Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+    </div>
+  );
+};
+
+export default SelectComponent;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import SelectObject from './SelectObject';
+
+export default {
+  title: 'Primitives/SelectObject',
+  component: SelectObject,
+  argTypes: {
+    property: {
+      control: { type: 'text' }
+    },
+    onCreateEntity: { action: 'createEntity' }
+  }
+} as Meta<typeof SelectObject>;
+
+const Template: StoryFn<typeof SelectObject> = (args) => <SelectObject {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  property: 'select',
+  definition: {
+    values: [
+      { '@id': '#a', '@type': 'Thing', name: 'a' },
+      { '@id': '#b', '@type': 'Thing', name: 'b' },
+      { '@id': '#c', '@type': 'Thing', name: 'c' },
+      { '@id': '#d', '@type': 'Thing', name: 'd' }
+    ]
+  }
+};

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

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import { Select, Form } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { isPlainObject } from 'lodash';
+import { validateId } from '../CrateManager/validate-identifier';
+
+export interface SelectObjectProps {
+  property: string;
+  definition: {
+    values: any[];
+  };
+  onCreateEntity: (data: { property: string; json: any }) => void;
+}
+
+const SelectObject: React.FC<SelectObjectProps> = ({
+  property,
+  definition,
+  onCreateEntity
+}) => {
+  const { t } = useTranslation();
+  const [items, setItems] = useState(definition.values);
+  const [internalValue, setInternalValue] = useState<any | undefined>(undefined);
+  const [hasValidValues, setHasValidValues] = useState(verifySelectValuesAreValidPlainObjects(definition.values));
+
+  useEffect(() => {
+    setItems(definition.values);
+    setHasValidValues(verifySelectValuesAreValidPlainObjects(definition.values));
+  }, [definition.values]);
+
+  const save = (selectedItem: any) => {
+    setInternalValue(selectedItem);
+    onCreateEntity({ property, json: selectedItem });
+  };
+
+  const filter = (searchText: string) => {
+    const filteredItems = definition.values.filter((v) => {
+      const re = new RegExp(searchText, 'i');
+      const data = `${v['@id']} ${v['@type']} ${v.name}`;
+      return data.match(re);
+    });
+    setItems(filteredItems);
+  };
+
+  const reset = () => {
+    setItems(definition.values);
+  };
+
+  function verifySelectValuesAreValidPlainObjects(values: any[]) {
+    let valid = true;
+    if (!Array.isArray(values)) return false;
+    
+    values.forEach((v) => {
+        if (!isPlainObject(v)) {
+            valid = false;
+            return;
+        }
+        if (!('@id' in v) || !('@type' in v) || !('name' in v)) {
+            valid = false;
+            return;
+        }
+        const { isValid } = validateId({ id: v['@id'], type: v['@type'] });
+        if (!isValid) valid = false;
+    });
+    return valid;
+}
+
+  if (!hasValidValues) {
+    return (
+      <div className="text-xs text-gray-700">
+        {t('invalid_selectobject_values')}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col">
+      <Form.Item>
+        <Select
+          size='middle'
+          showSearch
+          placeholder={t('select')}
+          value={internalValue ? internalValue['@id'] : undefined}
+          onChange={(value: string) => {
+            const selectedItem = items.find(item => item['@id'] === value);
+            if (selectedItem) {
+              save(selectedItem);
+            }
+          }}
+          onSearch={filter}
+          onBlur={reset}
+          filterOption={false}
+          notFoundContent={t('no_data')}
+        >
+          {items.map((item, idx) => (
+            <Select.Option key={idx} value={item['@id']}>
+              {item.name} ({item['@id']})
+            </Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+    </div>
+  );
+};
+
+export default SelectObject;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import SelectUrl from './SelectUrl';
+
+export default {
+  title: 'Primitives/SelectUrl',
+  component: SelectUrl,
+  argTypes: {
+    property: {
+      control: { type: 'text' }
+    },
+    onCreateEntity: { action: 'createEntity' }
+  }
+} as Meta<typeof SelectUrl>;
+
+const Template: StoryFn<typeof SelectUrl> = (args) => <SelectUrl {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  property: 'select',
+  value: 'http://schema.org/name',
+  definition: {
+    values: ['http://schema.org/name', 'https://schema.org/Country']
+  }
+};
+
+export const InvalidValue = Template.bind({});
+InvalidValue.args = {
+  property: 'select',
+  value: 'not-a-url',
+  definition: {
+    values: ['http://schema.org/name', 'https://schema.org/Country']
+  }
+};
+
+export const InvalidValues = Template.bind({});
+InvalidValues.args = {
+  property: 'select',
+  definition: {
+    values: ['not-a-url', 'also-not-a-url']
+  }
+};

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

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from 'react';
+import { Select, Form } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { isArray, isString, uniq } from 'lodash';
+import { isURL } from '../CrateManager/lib';
+
+export interface SelectUrlProps {
+  property: string;
+  value?: string;
+  definition: {
+    values: string[];
+  };
+  onCreateEntity: (data: { property: string; json: any }) => void;
+}
+
+const SelectUrl: React.FC<SelectUrlProps> = ({
+  property,
+  value,
+  definition,
+  onCreateEntity
+}) => {
+  const { t } = useTranslation();
+  const [items, setItems] = useState(definition.values);
+  const [internalValue, setInternalValue] = useState<string | undefined>(value);
+  const [isValidValue, setIsValidValue] = useState(value ? isURL(value) : true);
+  const [hasValidValues, setHasValidValues] = useState(verifySelectValuesAreUrls(definition.values));
+
+  useEffect(() => {
+    setInternalValue(value);
+    setIsValidValue(value ? isURL(value) : true);
+  }, [value]);
+
+  useEffect(() => {
+    setItems(definition.values);
+    setHasValidValues(verifySelectValuesAreUrls(definition.values));
+  }, [definition.values]);
+
+  const save = (selectedValue: string) => {
+    setInternalValue(selectedValue);
+    onCreateEntity({
+      property,
+      json: {
+        '@id': selectedValue,
+        '@type': 'URL',
+        name: selectedValue,
+      },
+    });
+  };
+
+  const filter = (searchText: string) => {
+    const filteredItems = definition.values.filter((v) => {
+      const re = new RegExp(searchText, 'i');
+      return v.toLowerCase().match(re);
+    });
+    setItems(filteredItems);
+  };
+
+  const reset = () => {
+    setItems(definition.values);
+  };
+
+  function verifySelectValuesAreUrls(values: any[]): boolean {
+    if (!isArray(values)) return false;
+    const validatedValues = values.map((v) => isString(v) && isURL(v));
+    const uniqueValues = uniq(validatedValues);
+    return uniqueValues.length === 1 && uniqueValues[0] === true;
+  }
+
+  if (!isValidValue) {
+    return (
+      <div className="text-xs text-gray-700">
+        {t('invalid_selecturl_value', { value })}
+      </div>
+    );
+  }
+
+  if (!hasValidValues) {
+    return (
+      <div className="text-xs text-gray-700">
+        {t('invalid_selecturl_values')}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Form.Item>
+        <Select
+          size='middle'
+          showSearch
+          placeholder={t('select')}
+          value={internalValue || undefined}
+          onChange={(value: string) => save(value)}
+          onSearch={filter}
+          onBlur={reset}
+          filterOption={false}
+          notFoundContent={t('no_data')}
+        >
+          {items.map((item, idx) => (
+            <Select.Option key={idx} value={item}>
+              {item}
+            </Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+    </div>
+  );
+};
+
+export default SelectUrl;