@arpproject/recrate 0.1.7 → 0.1.8

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

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

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

@@ -1,121 +0,0 @@
-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="flex flex-col gap-1"
-          value={isArray(internalValue) ? internalValue : []}
-          onChange={(checkedValues) => save(checkedValues as string[])}
-        >
-          {definition.values.map((value, idx) => (
-            <Checkbox key={idx} value={value} className="block">
-              {value}
-            </Checkbox>
-          ))}
-        </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

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

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

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

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