@arpproject/recrate 0.1.7 → 0.1.8

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

@@ -1,67 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Switch, Form} from 'antd'
-import { useTranslation } from 'react-i18next';
-import { debounce } from 'lodash';
-
-export interface BooleanProps {
-  property: string;
-  value?: boolean;
-  onSaveProperty: (data: { property: string; value: boolean }) => void;
-}
-
-const Boolean: React.FC<BooleanProps> = ({ property, value = false, onSaveProperty }) => {
-  // Add try-catch to handle the case when i18n is not available (like in Storybook)
-  let t: (key: string) => string;
-  try {
-    const i18n = useTranslation();
-    t = i18n.t;
-  } catch (e) {
-    // Fallback translation function if i18n is not available
-    t = (key: string) => key === 'true_label' ? 'True' : 'False';
-  }
-
-  const [internalValue, setInternalValue] = useState<boolean>(value);
-
-  // Update internal value when prop value changes
-  useEffect(() => {
-    setInternalValue(value);
-  }, [value]);
-
-  // Create debounced save function
-  const debouncedSave = React.useCallback(
-    debounce((newValue: boolean) => {
-      onSaveProperty({
-        property,
-        value: newValue
-      });
-    }, 200),
-    [property, onSaveProperty]
-  );
-
-  // Handle change
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = event.target.checked;
-    setInternalValue(newValue);
-    debouncedSave(newValue);
-  };
-
-  return (
-    <div className="flex flex-col describo-property-type-boolean">
-      <div className="flex flex-row space-x-2">
-        <Form.Item  
-          label={internalValue ? t('true_label') : t('false_label')}
-        >
-          <Switch
-              checked={internalValue}
-              onChange={(checked: boolean) => {
-                handleChange({ target: { checked } } as React.ChangeEvent<HTMLInputElement>);
-               }}
-              size="default"
-            />
-        </Form.Item>
-      </div>
-    </div>
-  );
-};
-
-export default Boolean; 

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import DateComponent from './Date';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
-export default {
-  title: 'Primitives/Date',
-  component: DateComponent,
-  argTypes: {
-    value: {
-      options: ['2022-03-02', '2022-09-28T02:20:56.521', new Date().toISOString()],
-      control: { type: 'radio' }
-    },
-    onSaveProperty: { action: 'saveProperty' }
-  },
-  decorators: [
-    (Story) => (
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <Story />
-      </LocalizationProvider>
-    )
-  ]
-} as Meta<typeof DateComponent>;
-
-const Template: StoryFn<typeof DateComponent> = (args) => <DateComponent {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  property: 'date',
-  value: '2022-03-02'
-};

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

@@ -1,58 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { DatePicker } from 'antd';
-import dayjs from 'dayjs';
-import { useTranslation } from 'react-i18next';
-import { checkDateIsValid } from './date-libs';
-
-export interface DateProps {
-  property: string;
-  value?: string;
-  onSaveProperty: (data: { property: string; value: string }) => void;
-}
-
-const DateComponent: React.FC<DateProps> = ({
-  property,
-  value,
-  onSaveProperty
-}) => {
-  const { t } = useTranslation();
-  const [internalValue, setInternalValue] = useState<dayjs.Dayjs | null>(
-    value ? dayjs(value) : null
-  );
-  const [isValidDate, setIsValidDate] = useState<boolean>(checkDateIsValid(value));
-
-  useEffect(() => {
-    setInternalValue(value ? dayjs(value) : null);
-    setIsValidDate(checkDateIsValid(value));
-  }, [value]);
-
-  const handleDateChange = (newValue: dayjs.Dayjs | null, dateString: string | string[]) => {
-    setInternalValue(newValue);
-    if (newValue && checkDateIsValid(newValue.toString())) {
-      onSaveProperty({
-        property,
-        value: newValue.startOf('day').toISOString()
-      });
-    }
-  };
-
-  return (
-    <div className="flex flex-col describo-property-type-date">
-        <DatePicker
-          value={internalValue}
-          onChange={handleDateChange}
-          format="YYYY-MM-DD"
-          placeholder={t('pick_a_date') || 'Pick a date'}
-          size="middle"
-          allowClear={true}
-        />
-      {!isValidDate && (
-        <span style={{ color: 'red', fontSize: '0.875rem' }}>
-          {t('invalid_date_value', { value })}
-        </span>
-      )}
-    </div>
-  );
-};
-
-export default DateComponent;

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import DateTimeComponent from './DateTime';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
-export default {
-  title: 'Primitives/DateTime',
-  component: DateTimeComponent,
-  argTypes: {
-    value: {
-      options: ['2022-03-02', '2022-09-28T02:20:56.521', new Date().toISOString()],
-      control: { type: 'radio' }
-    },
-    onSaveProperty: { action: 'saveProperty' }
-  },
-  decorators: [
-    (Story) => (
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <Story />
-      </LocalizationProvider>
-    )
-  ]
-} as Meta<typeof DateTimeComponent>;
-
-const Template: StoryFn<typeof DateTimeComponent> = (args) => <DateTimeComponent {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  property: 'date',
-  value: '2022-03-02'
-};

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

@@ -1,64 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { DatePicker } from 'antd';
-import dayjs from 'dayjs';
-import { useTranslation } from 'react-i18next';
-import { checkDateIsValid } from './date-libs';
-
-export interface DateTimeProps {
-  property: string;
-  value?: string;
-  onSaveProperty: (data: { property: string; value: string }) => void;
-}
-
-const DateTimeComponent: React.FC<DateTimeProps> = ({
-  property,
-  value,
-  onSaveProperty
-}) => {
-  const { t } = useTranslation();
-  const [internalValue, setInternalValue] = useState<dayjs.Dayjs | null>(
-    value ? dayjs(value) : null
-  );
-  const [isValidDate, setIsValidDate] = useState<boolean>(checkDateIsValid(value));
-
-  useEffect(() => {
-    setInternalValue(value ? dayjs(value) : null);
-    setIsValidDate(checkDateIsValid(value));
-  }, [value]);
-
-  const handleDateTimeChange = (newValue: dayjs.Dayjs | null, dateString: string | string[]) => {
-    setInternalValue(newValue);
-    try {
-      if (newValue && checkDateIsValid(newValue.toString())) {
-        onSaveProperty({
-          property,
-          value: newValue.toISOString()
-        });
-        setIsValidDate(true);
-      }
-    } catch (error) {
-      setIsValidDate(false);
-    }
-  };
-
-  return (
-    <div className="flex flex-col w-full describo-property-type-datetime">
-      <DatePicker
-        showTime
-        value={internalValue}
-        onChange={handleDateTimeChange}
-        format="YYYY-MM-DD HH:mm:ss"
-        placeholder={t('pick_a_datetime') || 'Pick a date and time'}
-        style={{ width: '100%' }}
-        size="middle"
-      />
-      {!isValidDate && (
-        <span style={{ color: 'red', fontSize: '12px' }}>
-          {t('invalid_datetime_value', { value })}
-        </span>
-      )}
-    </div>
-  );
-};
-
-export default DateTimeComponent;

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

@@ -1,57 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import Geo from './Geo';
-import { CrateManagerContext } from '../Shell';
-
-export default {
-  title: 'Primitives/Geo',
-  component: Geo,
-  parameters: {
-    layout: 'centered',
-  },
-} as Meta<typeof Geo>;
-
-const mockEntities = [
-  {
-    '@id': 'geo_1',
-    '@type': 'GeoCoordinates',
-    name: 'Test Location',
-    geojson: {
-      type: 'Feature',
-      geometry: {
-        type: 'Point',
-        coordinates: [144.9631, -37.8136],
-      },
-    },
-  },
-];
-
-const mockCrateManager = {
-  getEntities: ({ limit, type }: { limit?: number; type?: string }) => {
-    // Only return mockEntities if type matches
-    if (!type || type === 'GeoCoordinates') return mockEntities;
-    return [];
-  },
-  addBlankNode: (type: string) => ({ '@id': 'blank_node', '@type': type }),
-  deleteEntity: ({ id }: { id: string }) => {},
-};
-
-const Template: StoryFn<typeof Geo> = (args) => (
-  <CrateManagerContext.Provider value={mockCrateManager}>
-    <Geo {...args} />
-  </CrateManagerContext.Provider>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  property: 'location',
-  onCreateEntity: (data) => console.log('Create entity:', data),
-  onLinkEntity: (data) => console.log('Link entity:', data),
-};
-
-export const WithExistingEntities = Template.bind({});
-WithExistingEntities.args = {
-  property: 'location',
-  onCreateEntity: (data) => console.log('Create entity:', data),
-  onLinkEntity: (data) => console.log('Link entity:', data),
-};

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

@@ -1,225 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
-import {
-  Divider,
-  Form,
-  Input,
-  Select,
-  Radio,
-  Typography
-} from "antd";
-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
-import AreaSelectInit from "./Map.SelectArea.js";
-import { geojsonToWKT } from "@terraformer/wkt";
-import flattenDeep from "lodash/flattenDeep";
-import { CrateManagerContext } from '../Shell';
-
-import icon from "leaflet/dist/images/marker-icon.png";
-import iconShadow from "leaflet/dist/images/marker-shadow.png";
-
-L.Marker.prototype.options.icon = L.icon({
-  iconUrl: icon,
-  shadowUrl: iconShadow,
-});
-
-AreaSelectInit(L);
-
-type LeafletMapWithSelectArea = L.Map & { selectArea?: any };
-
-const GeoInputComponent = ({
-  property,
-  onCreateEntity,
-  onLinkEntity,
-}: {
-  property: string;
-  onCreateEntity: (args: { property: string; json: any }) => void;
-  onLinkEntity: (args: { property: string; json: any }) => void;
-}) => {
-  const mapRef = useRef<LeafletMapWithSelectArea | null>(null);
-  const [mode, setMode] = useState("box");
-  const [locationName, setLocationName] = useState("");
-  const [feature, setFeature] = useState<any>(null);
-  const [existingEntities, setExistingEntities] = useState<any[]>([]);
-  const [selectValue, setSelectValue] = useState("");
-  const locationNameRef = useRef(locationName);
-
-  const crateManager = useContext(CrateManagerContext);
-
-  useEffect(() => {
-    mapRef.current = L.map("map", {
-      center: [0, 0],
-      zoom: 1,
-    });
-
-    init();
-
-    return () => {
-      mapRef.current?.off();
-      mapRef.current?.remove();
-    };
-  }, []);
-
-  useEffect(() => {
-    updateHandlers();
-  }, [mode]);
-
-  useEffect(() => {
-    locationNameRef.current = locationName;
-  }, [locationName]);
-
-  const init = async () => {
-    await loadGeoDataInCrate();
-
-    L.tileLayer(
-      "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
-      {
-        attribution:
-          "Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012",
-        minZoom: 1,
-        maxZoom: 16,
-      }
-    ).addTo(mapRef.current!);
-
-    // Let Leaflet fully mount and register `selectArea`
-    setTimeout(() => updateHandlers(), 200);
-  };
-
-  const loadGeoDataInCrate = () => {
-    const geometryClasses = ["Geo", "Geomtery", "GeoShape", "GeoCoordinates"];
-    let geos = geometryClasses.map((g) => [
-      ...crateManager.getEntities({ limit: 5, type: g }),
-    ]);
-    setExistingEntities(flattenDeep(geos));
-  };
-
-  const updateHandlers = () => {
-    if (!mapRef.current) return;
-    if (!(mapRef.current as LeafletMapWithSelectArea).selectArea) return;
-
-    if (mode === "box") {
-      mapRef.current.off("click");
-      (mapRef.current as LeafletMapWithSelectArea).selectArea.enable();
-      (mapRef.current as LeafletMapWithSelectArea).selectArea.setShiftKey(true);
-      mapRef.current.on("areaselected", handleAreaSelect);
-    } else {
-      (mapRef.current as LeafletMapWithSelectArea).selectArea.disable();
-      mapRef.current.off("areaselected");
-      mapRef.current.on("click", handlePointSelect);
-    }
-  };
-
-  const handleAreaSelect = (e: any) => {
-    const bounds = e.bounds;
-    const geoJSON = {
-      type: "Feature",
-      geometry: {
-        type: "Polygon",
-        coordinates: [[
-          [bounds.getNorthEast().lng, bounds.getNorthEast().lat],
-          [bounds.getSouthEast().lng, bounds.getSouthEast().lat],
-          [bounds.getSouthWest().lng, bounds.getSouthWest().lat],
-          [bounds.getNorthWest().lng, bounds.getNorthWest().lat],
-        ]],
-      },
-    };
-    const entity = { "@type": "GeoShape", geojson: geoJSON };
-    setFeature(entity);
-    emitFeature(entity);
-  };
-
-  const handlePointSelect = (e: any) => {
-    const latlng = e.latlng;
-    const geoJSON = {
-      type: "Feature",
-      geometry: {
-        type: "Point",
-        coordinates: [latlng.lng, latlng.lat],
-      },
-    };
-    const entity = { "@type": "GeoCoordinates", geojson: geoJSON };
-    setFeature(entity);
-    emitFeature(entity);
-  };
-
-  const emitFeature = (feat: any) => {
-    let node = crateManager.addBlankNode("Geometry");
-    let entity = {
-      ...node,
-      name: locationNameRef.current,
-      geojson: JSON.stringify(feat.geojson),
-      asWKT: geojsonToWKT(feat.geojson.geometry),
-    };
-    crateManager.deleteEntity({ id: node["@id"] });
-    onCreateEntity({ property, json: entity });
-  };
-
-  const handleSelectChange = (value: string) => {
-    setSelectValue(value);
-    const entity = existingEntities.find((e) => e["@id"] === value);
-    onLinkEntity({ property, json: entity });
-  };
-
-  return (
-    <div className="flex flex-col text-gray-600 describo-property-type-geo">
-      <div className="flex flex-col space-y-4">
-        {existingEntities.length > 0 && (
-          <>
-            <Typography.Title level={5}>Select Existing Location</Typography.Title>
-            <Form.Item label="Select">
-              <Select
-                value={selectValue}
-                onChange={handleSelectChange}
-                style={{ width: '100%' }}
-              >
-                {existingEntities.map((entity) => (
-                  <Select.Option key={entity["@id"]} value={entity["@id"]}>
-                    {entity.name}
-                  </Select.Option>
-                ))}
-              </Select>
-            </Form.Item>
-            <Divider className="border border-gray-400" />
-          </>
-        )}
-
-        <div className="flex flex-col space-y-2">
-          <Typography.Title level={5}>Define Location</Typography.Title>
-          <Input
-            size="middle"
-            placeholder="Provide name for location"
-            value={locationName}
-            onChange={(e) => setLocationName(e.target.value)}
-          />
-
-          <div className="flex flex-row space-x-4">
-            <Radio.Group
-              value={mode}
-              onChange={(e) => {
-                setMode(e.target.value);
-                updateHandlers();
-              }}
-            >
-              <Radio value="box">Select Region</Radio>
-              <Radio value="point">Select Point</Radio>
-            </Radio.Group>
-
-            {mode === "box" && (
-              <Typography.Text className="pt-1 text-gray-600">
-                Press Shift and drag to select region
-              </Typography.Text>
-            )}
-            {mode === "point" && (
-              <Typography.Text className="pt-1 text-gray-600">
-                Click on map to select point
-              </Typography.Text>
-            )}
-          </div>
-        </div>
-
-        <div id="map" className="map-style" style={{ width: 700, height: 500 }}></div>
-      </div>
-    </div>
-  );
-};
-
-export default GeoInputComponent;