@arpproject/recrate 0.1.2

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

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

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

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

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

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

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