@nnkogift/dhis2-form-utils-dhis2-ui 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/index.js

@@ -1,6 +1,12 @@
-import { useFieldControl, useSectionState, useFormFeedback, resolveFieldValidation, parseMultiTextValue, joinMultiTextValue, computeAgeFromDob } from '@nnkogift/dhis2-form-utils-hooks';
-import { InputField, CalendarInput, MultiSelectField, MultiSelectOption, Radio, SingleSelectField, SingleSelectOption, CheckboxField, TextAreaField, NoticeBox } from '@dhis2/ui';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { resolveFieldValidation, computeAgeFromDob, parseMultiTextValue, joinMultiTextValue, useOrgUnitPickerContext, useOrganisationUnitsQuery, useFieldControl, useSectionState, useFormFeedback, useFileResourceUpload } from '@nnkogift/dhis2-form-utils-hooks';
+import { InputField, TextAreaField, CalendarInput, Field, Radio, CheckboxField, SingleSelectField, SingleSelectOption, MultiSelectField, MultiSelectOption, Button, OrganisationUnitTree, FileInputField, NoticeBox } from '@dhis2/ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, useState, useEffect, useRef } from 'react';
+import { useConfig } from '@dhis2/app-runtime';
+import { Map, NavigationControl, Marker } from 'maplibre-gl';
+import { TerraDraw, TerraDrawPolygonMode, TerraDrawLineStringMode, TerraDrawPointMode } from 'terra-draw';
+import { TerraDrawMapLibreGLAdapter } from 'terra-draw-maplibre-gl-adapter';
+import 'maplibre-gl/dist/maplibre-gl.css';
 
 // src/fields/D2Field.tsx
 function D2TextField({ control }) {
@@ -234,36 +240,54 @@ var BOOLEAN_OPTIONS = [
 ];
 var RADIO_RENDER_HINTS = /* @__PURE__ */ new Set(["RADIO", "VERTICAL_RADIOBUTTONS", "HORIZONTAL_RADIOBUTTONS"]);
 function D2BooleanField({ control }) {
-  const { fieldConfig, field, isMandatory, isDisabled } = control;
-  const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
-  const options = isMandatory ? [...BOOLEAN_OPTIONS] : [...BOOLEAN_OPTIONS, { label: "\u2014", value: "" }];
-  return /* @__PURE__ */ jsxs("fieldset", { children: [
-    /* @__PURE__ */ jsxs("legend", { children: [
-      fieldConfig.label,
-      isMandatory ? " *" : ""
-    ] }),
-    fieldConfig.description ? /* @__PURE__ */ jsx("p", { children: fieldConfig.description }) : null,
-    options.map((option) => /* @__PURE__ */ jsx(
-      Radio,
-      {
-        name: field.name,
-        label: option.label,
-        value: option.value,
-        checked: field.value === option.value,
-        disabled: isDisabled,
-        onChange: ({ value }) => {
-          field.onChange(value ?? "");
-        },
-        onBlur: field.onBlur
-      },
-      option.label
-    )),
-    validationText ? /* @__PURE__ */ jsx("p", { "data-error": hasError || void 0, "data-warning": hasWarning || void 0, children: validationText }) : null
-  ] });
+  const { fieldConfig, field, isMandatory, isDisabled } = useMemo(() => control, [control]);
+  const { validationText, hasError, hasWarning } = useMemo(
+    () => resolveFieldValidation(control),
+    [control]
+  );
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      label: fieldConfig.label,
+      helpText: fieldConfig.description,
+      warning: hasWarning,
+      error: hasError,
+      required: isMandatory,
+      disabled: isDisabled,
+      validationText,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: 16
+          },
+          children: BOOLEAN_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+            Radio,
+            {
+              name: field.name,
+              label: option.label,
+              value: option.value,
+              checked: field.value === option.value,
+              disabled: isDisabled,
+              onChange: ({ value }) => {
+                field.onChange(value ?? "");
+              },
+              onBlur: field.onBlur
+            },
+            option.label
+          ))
+        }
+      )
+    }
+  );
 }
 function D2TrueOnlyField({ control }) {
-  const { fieldConfig, field, isMandatory, isDisabled } = control;
-  const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
+  const { fieldConfig, field, isMandatory, isDisabled } = useMemo(() => control, [control]);
+  const { validationText, hasError, hasWarning } = useMemo(
+    () => resolveFieldValidation(control),
+    [control]
+  );
   return /* @__PURE__ */ jsx(
     CheckboxField,
     {
@@ -333,11 +357,12 @@ function D2SelectField({ control }) {
 function D2MultiSelectField({ control }) {
   const { fieldConfig, field, isMandatory, isDisabled } = control;
   const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
-  const options = (control.visibleOptions ?? fieldConfig.optionSet?.options ?? []).map(
-    (option) => ({
+  const options = useMemo(
+    () => (control.visibleOptions ?? fieldConfig.optionSet?.options ?? []).map((option) => ({
       label: option.label,
       value: option.code
-    })
+    })),
+    [control.visibleOptions, fieldConfig.optionSet?.options]
   );
   const selected = parseMultiTextValue(field.value);
   return /* @__PURE__ */ jsx(
@@ -359,6 +384,482 @@ function D2MultiSelectField({ control }) {
     }
   );
 }
+function D2OrgUnitField({ control }) {
+  const { fieldConfig, field, isMandatory, isDisabled } = control;
+  const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
+  const pickerContext = useOrgUnitPickerContext();
+  const { organisationUnits, roots, loading, error } = useOrganisationUnitsQuery(
+    pickerContext?.roots
+  );
+  const value = field.value;
+  const selectedUnit = organisationUnits.find((ou) => ou.id === value);
+  const selectedLabel = selectedUnit?.displayName ?? value;
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsxs("legend", { children: [
+      fieldConfig.label,
+      isMandatory ? " *" : ""
+    ] }),
+    fieldConfig.description ? /* @__PURE__ */ jsx("p", { children: fieldConfig.description }) : null,
+    selectedLabel ? /* @__PURE__ */ jsxs("p", { children: [
+      "Selected: ",
+      selectedLabel,
+      " ",
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          small: true,
+          disabled: isDisabled,
+          onClick: () => {
+            field.onChange("");
+          },
+          children: "Clear"
+        }
+      )
+    ] }) : null,
+    roots.length > 0 ? /* @__PURE__ */ jsx(
+      OrganisationUnitTree,
+      {
+        roots,
+        singleSelection: true,
+        disableSelection: isDisabled,
+        initiallyExpanded: roots.map((id) => `/${id}`),
+        onChange: ({ id }) => {
+          field.onChange(id);
+        }
+      }
+    ) : loading ? /* @__PURE__ */ jsx("p", { children: "Loading organisation units\u2026" }) : error ? /* @__PURE__ */ jsx("p", { children: "Failed to load organisation units." }) : null,
+    validationText ? /* @__PURE__ */ jsx("p", { "data-error": hasError || void 0, "data-warning": hasWarning || void 0, children: validationText }) : null
+  ] });
+}
+function useFileFieldUpload(onChange) {
+  const { upload, uploading, error } = useFileResourceUpload();
+  const [uploadError, setUploadError] = useState(void 0);
+  const handleFiles = (files) => {
+    const file = files.item(0);
+    if (!file) return;
+    setUploadError(void 0);
+    upload(file).then((result) => {
+      onChange(result.id);
+    }).catch((uploadFailure) => {
+      setUploadError(
+        uploadFailure instanceof Error ? uploadFailure.message : "Upload failed"
+      );
+    });
+  };
+  return { handleFiles, uploading, uploadError: uploadError ?? error?.message };
+}
+function D2FileField({ control }) {
+  const { fieldConfig, field, isMandatory, isDisabled } = control;
+  const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
+  const { handleFiles, uploading, uploadError } = useFileFieldUpload(field.onChange);
+  return /* @__PURE__ */ jsx(
+    FileInputField,
+    {
+      name: field.name,
+      label: fieldConfig.label,
+      helpText: uploadError ?? fieldConfig.description ?? (uploading ? "Uploading\u2026" : "Max size depends on server configuration."),
+      required: isMandatory,
+      disabled: isDisabled || uploading,
+      warning: hasWarning,
+      error: hasError || Boolean(uploadError),
+      validationText,
+      buttonLabel: field.value ? "Replace file" : "Select file",
+      onChange: ({ files }) => {
+        handleFiles(files);
+      },
+      onBlur: field.onBlur
+    }
+  );
+}
+function D2ImageField({ control }) {
+  const { fieldConfig, field, isMandatory, isDisabled } = control;
+  const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
+  const { handleFiles, uploading, uploadError } = useFileFieldUpload(field.onChange);
+  const { baseUrl } = useConfig();
+  const value = field.value;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      FileInputField,
+      {
+        name: field.name,
+        label: fieldConfig.label,
+        accept: "image/*",
+        helpText: uploadError ?? fieldConfig.description ?? (uploading ? "Uploading\u2026" : "Max size depends on server configuration."),
+        required: isMandatory,
+        disabled: isDisabled || uploading,
+        warning: hasWarning,
+        error: hasError || Boolean(uploadError),
+        validationText,
+        buttonLabel: value ? "Replace image" : "Select image",
+        onChange: ({ files }) => {
+          handleFiles(files);
+        },
+        onBlur: field.onBlur
+      }
+    ),
+    value ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: `${baseUrl}/api/fileResources/${value}/data`,
+        alt: fieldConfig.label,
+        style: { maxWidth: "200px", maxHeight: "200px", marginTop: "8px" }
+      }
+    ) : null
+  ] });
+}
+
+// ../../packages/map/src/coordinateValue.ts
+var LNG_MIN = -180;
+var LNG_MAX = 180;
+var LAT_MIN = -90;
+var LAT_MAX = 90;
+function parseCoordinateValue(value) {
+  if (!value) return null;
+  let parsed;
+  try {
+    parsed = JSON.parse(value);
+  } catch {
+    return null;
+  }
+  if (!Array.isArray(parsed) || parsed.length !== 2) return null;
+  const lng = parsed[0];
+  const lat = parsed[1];
+  if (typeof lng !== "number" || typeof lat !== "number") return null;
+  if (!Number.isFinite(lng) || !Number.isFinite(lat)) return null;
+  if (lng < LNG_MIN || lng > LNG_MAX || lat < LAT_MIN || lat > LAT_MAX) return null;
+  return { lng, lat };
+}
+function joinCoordinateValue(lng, lat) {
+  return JSON.stringify([lng, lat]);
+}
+
+// ../../packages/map/src/geojsonValue.ts
+var GEOMETRY_TYPES = /* @__PURE__ */ new Set([
+  "Point",
+  "MultiPoint",
+  "LineString",
+  "MultiLineString",
+  "Polygon",
+  "MultiPolygon",
+  "GeometryCollection"
+]);
+function isGeometryShape(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const candidate = value;
+  if (typeof candidate.type !== "string" || !GEOMETRY_TYPES.has(candidate.type)) return false;
+  if (candidate.type === "GeometryCollection") return Array.isArray(candidate.geometries);
+  return Array.isArray(candidate.coordinates);
+}
+function parseGeojsonGeometry(value) {
+  if (!value) return null;
+  let parsed;
+  try {
+    parsed = JSON.parse(value);
+  } catch {
+    return null;
+  }
+  return isGeometryShape(parsed) ? parsed : null;
+}
+function stringifyGeojsonGeometry(geometry) {
+  return JSON.stringify(geometry);
+}
+
+// ../../packages/map/src/defaultMapStyle.ts
+var defaultMapStyle = {
+  version: 8,
+  sources: {
+    osm: {
+      type: "raster",
+      tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
+      tileSize: 256,
+      attribution: "&copy; OpenStreetMap contributors"
+    }
+  },
+  layers: [
+    {
+      id: "osm",
+      type: "raster",
+      source: "osm"
+    }
+  ]
+};
+function useMapLibreMap({ style }) {
+  const containerRef = useRef(null);
+  const [map, setMap] = useState(null);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const instance = new Map({
+      container: containerRef.current,
+      style,
+      center: [0, 0],
+      zoom: 1
+    });
+    instance.addControl(new NavigationControl(), "top-right");
+    instance.once("load", () => {
+      setMap(instance);
+    });
+    return () => {
+      instance.remove();
+      setMap(null);
+    };
+  }, []);
+  return { containerRef, map };
+}
+function CoordinateMapPicker({
+  value,
+  onChange,
+  mapStyle,
+  disabled,
+  className
+}) {
+  const { containerRef, map } = useMapLibreMap({ style: mapStyle ?? defaultMapStyle });
+  const markerRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    if (!map) return;
+    const ensureMarker = (lng, lat) => {
+      if (markerRef.current) {
+        markerRef.current.setLngLat([lng, lat]);
+        return markerRef.current;
+      }
+      const marker = new Marker({ draggable: !disabled }).setLngLat([lng, lat]).addTo(map);
+      marker.on("dragend", () => {
+        const lngLat = marker.getLngLat();
+        onChangeRef.current(joinCoordinateValue(lngLat.lng, lngLat.lat));
+      });
+      markerRef.current = marker;
+      return marker;
+    };
+    const handleClick = (event) => {
+      if (disabled) return;
+      ensureMarker(event.lngLat.lng, event.lngLat.lat);
+      onChangeRef.current(joinCoordinateValue(event.lngLat.lng, event.lngLat.lat));
+    };
+    map.on("click", handleClick);
+    const parsed = parseCoordinateValue(value);
+    if (parsed) {
+      ensureMarker(parsed.lng, parsed.lat);
+      map.setCenter([parsed.lng, parsed.lat]);
+    }
+    return () => {
+      map.off("click", handleClick);
+    };
+  }, [map, disabled]);
+  useEffect(() => {
+    if (!markerRef.current) return;
+    const parsed = parseCoordinateValue(value);
+    if (parsed) {
+      markerRef.current.setLngLat([parsed.lng, parsed.lat]);
+    }
+  }, [value]);
+  useEffect(() => {
+    markerRef.current?.setDraggable(!disabled);
+  }, [disabled]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: { width: "100%", height: "300px" },
+      "aria-hidden": "true"
+    }
+  );
+}
+var DEFAULT_MODES = ["point", "linestring", "polygon"];
+function createDrawMode(mode) {
+  switch (mode) {
+    case "point":
+      return new TerraDrawPointMode();
+    case "linestring":
+      return new TerraDrawLineStringMode();
+    case "polygon":
+      return new TerraDrawPolygonMode();
+  }
+}
+function GeoJsonMapEditor({
+  value,
+  onChange,
+  mapStyle,
+  disabled,
+  className,
+  modes = DEFAULT_MODES
+}) {
+  const { containerRef, map } = useMapLibreMap({ style: mapStyle ?? defaultMapStyle });
+  const drawRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    if (!map) return;
+    const draw = new TerraDraw({
+      adapter: new TerraDrawMapLibreGLAdapter({ map }),
+      modes: modes.map(createDrawMode)
+    });
+    drawRef.current = draw;
+    draw.start();
+    const initial = parseGeojsonGeometry(value);
+    if (initial) {
+      draw.addFeatures([
+        { type: "Feature", geometry: initial, properties: {} }
+      ]);
+    }
+    const handleFinish = (id) => {
+      const feature = draw.getSnapshotFeature(id);
+      if (feature) {
+        onChangeRef.current(stringifyGeojsonGeometry(feature.geometry));
+      }
+    };
+    draw.on("finish", handleFinish);
+    return () => {
+      draw.off("finish", handleFinish);
+      try {
+        draw.stop();
+      } catch {
+      }
+      drawRef.current = null;
+    };
+  }, [map]);
+  const startDrawing = (mode) => {
+    const draw = drawRef.current;
+    if (!draw || disabled) return;
+    draw.clear();
+    draw.setMode(mode);
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width: "100%", height: "300px" }, "aria-hidden": "true" }),
+    !disabled ? /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Draw geometry", children: modes.map((mode) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          startDrawing(mode);
+        },
+        children: [
+          "Draw ",
+          mode
+        ]
+      },
+      mode
+    )) }) : null
+  ] });
+}
+function D2CoordinateField({ control }) {
+  const { fieldConfig, field, isMandatory, isDisabled } = control;
+  const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
+  const value = field.value;
+  const [lngText, setLngText] = useState(() => parseCoordinateValue(value)?.lng.toString() ?? "");
+  const [latText, setLatText] = useState(() => parseCoordinateValue(value)?.lat.toString() ?? "");
+  useEffect(() => {
+    const parsed = parseCoordinateValue(value);
+    setLngText(parsed ? parsed.lng.toString() : "");
+    setLatText(parsed ? parsed.lat.toString() : "");
+  }, [value]);
+  const commit = (lngRaw, latRaw) => {
+    const lng = parseFloat(lngRaw);
+    const lat = parseFloat(latRaw);
+    if (Number.isFinite(lng) && Number.isFinite(lat)) {
+      field.onChange(joinCoordinateValue(lng, lat));
+    }
+  };
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsxs("legend", { children: [
+      fieldConfig.label,
+      isMandatory ? " *" : ""
+    ] }),
+    fieldConfig.description ? /* @__PURE__ */ jsx("p", { children: fieldConfig.description }) : null,
+    /* @__PURE__ */ jsx(CoordinateMapPicker, { value, onChange: field.onChange, disabled: isDisabled }),
+    /* @__PURE__ */ jsx(
+      InputField,
+      {
+        name: `${field.name}-lng`,
+        type: "number",
+        label: "Longitude",
+        value: lngText,
+        disabled: isDisabled,
+        onChange: ({ value: next }) => {
+          const text = next ?? "";
+          setLngText(text);
+          commit(text, latText);
+        },
+        onBlur: field.onBlur
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputField,
+      {
+        name: `${field.name}-lat`,
+        type: "number",
+        label: "Latitude",
+        value: latText,
+        disabled: isDisabled,
+        onChange: ({ value: next }) => {
+          const text = next ?? "";
+          setLatText(text);
+          commit(lngText, text);
+        },
+        onBlur: field.onBlur
+      }
+    ),
+    validationText ? /* @__PURE__ */ jsx("p", { "data-error": hasError || void 0, "data-warning": hasWarning || void 0, children: validationText }) : null
+  ] });
+}
+function D2GeoJsonField({ control }) {
+  const { fieldConfig, field, isMandatory, isDisabled } = control;
+  const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
+  const value = field.value;
+  const [textValue, setTextValue] = useState(value);
+  const [textError, setTextError] = useState(void 0);
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsxs("legend", { children: [
+      fieldConfig.label,
+      isMandatory ? " *" : ""
+    ] }),
+    fieldConfig.description ? /* @__PURE__ */ jsx("p", { children: fieldConfig.description }) : null,
+    /* @__PURE__ */ jsx(
+      GeoJsonMapEditor,
+      {
+        value,
+        onChange: (next) => {
+          field.onChange(next);
+          const geometry = parseGeojsonGeometry(next);
+          setTextValue(geometry ? JSON.stringify(geometry, null, 2) : next);
+          setTextError(void 0);
+        },
+        disabled: isDisabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextAreaField,
+      {
+        name: `${field.name}-geometry`,
+        label: "Geometry (JSON)",
+        value: textValue,
+        disabled: isDisabled,
+        warning: Boolean(textError),
+        validationText: textError,
+        onChange: ({ value: next }) => {
+          setTextValue(next ?? "");
+        },
+        onBlur: () => {
+          if (!textValue) {
+            field.onChange("");
+            setTextError(void 0);
+            return;
+          }
+          const geometry = parseGeojsonGeometry(textValue);
+          if (geometry) {
+            field.onChange(stringifyGeojsonGeometry(geometry));
+            setTextError(void 0);
+          } else {
+            setTextError("Not a valid GeoJSON geometry");
+          }
+          field.onBlur();
+        }
+      }
+    ),
+    validationText ? /* @__PURE__ */ jsx("p", { "data-error": hasError || void 0, "data-warning": hasWarning || void 0, children: validationText }) : null
+  ] });
+}
 function D2UnsupportedField({ control }) {
   const { fieldConfig, field, widgetKind, isMandatory } = control;
   const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
@@ -397,10 +898,11 @@ var WIDGET_BY_KIND = {
   select: D2SelectField,
   multiSelect: D2MultiSelectField,
   datetime: D2DateTimeField,
-  coordinate: D2UnsupportedField,
-  orgUnit: D2UnsupportedField,
-  file: D2UnsupportedField,
-  image: D2UnsupportedField,
+  coordinate: D2CoordinateField,
+  geojson: D2GeoJsonField,
+  orgUnit: D2OrgUnitField,
+  file: D2FileField,
+  image: D2ImageField,
   unsupported: D2UnsupportedField
 };
 function D2FieldWidget({ control }) {
@@ -446,6 +948,6 @@ function FormFeedback() {
   ] });
 }
 
-export { D2Field, D2FieldWidget, FormFeedback, FormSection };
+export { D2AgeField, D2BooleanField, D2CoordinateField, D2DateField, D2DateTimeField, D2EmailField, D2Field, D2FieldWidget, D2FileField, D2GeoJsonField, D2ImageField, D2IntegerField, D2LongTextField, D2MultiSelectField, D2NumberField, D2OrgUnitField, D2PercentageField, D2PhoneField, D2SelectField, D2TextField, D2TimeField, D2TrueOnlyField, D2UnsupportedField, FormFeedback, FormSection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map