@nnkogift/dhis2-form-utils-dhis2-ui 0.1.0-alpha.7 → 0.1.0-alpha.9

package/dist/index.d.ts

@@ -6,34 +6,46 @@ import { ReactNode } from 'react';
 type D2FieldProps = {
     field: FieldControlInput;
 };
+declare function D2Field({ field }: D2FieldProps): react_jsx_runtime.JSX.Element | null;
+
 type D2FieldWidgetProps = WidgetProps;
 /** Dispatches an already-resolved `FieldControlReturn` to its widget component, without re-deriving field control state. Reused by consumers that build their own chrome (labels, badges, ghost placeholders) around a field. */
 declare function D2FieldWidget({ control }: D2FieldWidgetProps): react_jsx_runtime.JSX.Element;
-declare function D2Field({ field }: D2FieldProps): react_jsx_runtime.JSX.Element | null;
 
 declare function D2TextField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
 
 declare function D2LongTextField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
 
 declare function D2EmailField(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
 declare function D2PhoneField(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
 declare function D2NumberField(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
 declare function D2IntegerField(props: WidgetProps): react_jsx_runtime.JSX.Element;
+
 declare function D2PercentageField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
 
 declare function D2DateField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
+
+declare function D2AgeField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
+
 declare function D2TimeField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
+
 declare function D2DateTimeField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
-declare function D2AgeField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
 
 declare function D2BooleanField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
+
 declare function D2TrueOnlyField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
+
 declare function D2SelectField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
+
 declare function D2MultiSelectField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
 
 declare function D2OrgUnitField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
 
 declare function D2FileField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
+
 declare function D2ImageField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;
 
 declare function D2CoordinateField({ control }: WidgetProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { resolveFieldValidation, computeAgeFromDob, parseMultiTextValue, joinMultiTextValue, useOrgUnitPickerContext, useOrganisationUnitsQuery, useFieldControl, useSectionState, useFormFeedback, useFileResourceUpload } from '@nnkogift/dhis2-form-utils-hooks';
-import { colors, InputField, TextAreaField, CalendarInput, Field, Radio, CheckboxField, SingleSelectField, SingleSelectOption, MultiSelectField, MultiSelectOption, Button, OrganisationUnitTree, FileInputField, Modal, ModalTitle, ModalContent, ModalActions, Chip, NoticeBox } from '@dhis2/ui';
+import { InputField, TextAreaField, CalendarInput, Field, Radio, CheckboxField, SingleSelectField, SingleSelectOption, MultiSelectField, MultiSelectOption, Button, OrganisationUnitTree, FileInputField, Modal, ModalTitle, ModalContent, ModalActions, Chip, 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';
@@ -53,7 +53,10 @@ function D2LongTextField({ control }) {
     }
   );
 }
-function D2TypedTextField({ control, type }) {
+function TypedTextField({
+  control,
+  type
+}) {
   const { fieldConfig, field, isMandatory, isDisabled } = control;
   const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
   return /* @__PURE__ */ jsx(
@@ -77,16 +80,16 @@ function D2TypedTextField({ control, type }) {
   );
 }
 function D2EmailField(props) {
-  return /* @__PURE__ */ jsx(D2TypedTextField, { ...props, type: "email" });
+  return /* @__PURE__ */ jsx(TypedTextField, { ...props, type: "email" });
 }
 function D2PhoneField(props) {
-  return /* @__PURE__ */ jsx(D2TypedTextField, { ...props, type: "tel" });
+  return /* @__PURE__ */ jsx(TypedTextField, { ...props, type: "tel" });
 }
 function D2NumberField(props) {
-  return /* @__PURE__ */ jsx(D2TypedTextField, { ...props, type: "number" });
+  return /* @__PURE__ */ jsx(TypedTextField, { ...props, type: "number" });
 }
 function D2IntegerField(props) {
-  return /* @__PURE__ */ jsx(D2TypedTextField, { ...props, type: "number" });
+  return /* @__PURE__ */ jsx(TypedTextField, { ...props, type: "number" });
 }
 function D2PercentageField({ control }) {
   return /* @__PURE__ */ jsx(
@@ -103,14 +106,6 @@ function D2PercentageField({ control }) {
   );
 }
 var todayIso = () => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
-var readDatePart = (value) => {
-  if (!value) return "";
-  return value.includes("T") ? value.slice(0, 10) : value;
-};
-var readTimePart = (value) => {
-  if (!value.includes("T")) return "";
-  return value.slice(11, 16);
-};
 function D2DateField({ control }) {
   const { fieldConfig, field, isMandatory, isDisabled } = control;
   const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
@@ -139,6 +134,22 @@ function D2DateField({ control }) {
     }
   );
 }
+function D2AgeField({ control }) {
+  const age = computeAgeFromDob(control.field.value);
+  const helpText = [control.fieldConfig.description, age ? `Age: ${age} years` : void 0].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsx(
+    D2DateField,
+    {
+      control: {
+        ...control,
+        fieldConfig: {
+          ...control.fieldConfig,
+          description: helpText || control.fieldConfig.description
+        }
+      }
+    }
+  );
+}
 function D2TimeField({ control }) {
   const { fieldConfig, field, isMandatory, isDisabled } = control;
   const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
@@ -162,6 +173,14 @@ function D2TimeField({ control }) {
     }
   );
 }
+var readDatePart = (value) => {
+  if (!value) return "";
+  return value.includes("T") ? value.slice(0, 10) : value;
+};
+var readTimePart = (value) => {
+  if (!value.includes("T")) return "";
+  return value.slice(11, 16);
+};
 function D2DateTimeField({ control }) {
   const { fieldConfig, field, isMandatory, isDisabled } = control;
   const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
@@ -218,27 +237,10 @@ function D2DateTimeField({ control }) {
     )
   ] });
 }
-function D2AgeField({ control }) {
-  const age = computeAgeFromDob(control.field.value);
-  const helpText = [control.fieldConfig.description, age ? `Age: ${age} years` : void 0].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsx(
-    D2DateField,
-    {
-      control: {
-        ...control,
-        fieldConfig: {
-          ...control.fieldConfig,
-          description: helpText || control.fieldConfig.description
-        }
-      }
-    }
-  );
-}
 var BOOLEAN_OPTIONS = [
   { label: "Yes", value: "true" },
   { label: "No", value: "false" }
 ];
-var RADIO_RENDER_HINTS = /* @__PURE__ */ new Set(["RADIO", "VERTICAL_RADIOBUTTONS", "HORIZONTAL_RADIOBUTTONS"]);
 function D2BooleanField({ control }) {
   const { fieldConfig, field, isMandatory, isDisabled } = useMemo(() => control, [control]);
   const { validationText, hasError, hasWarning } = useMemo(
@@ -255,30 +257,21 @@ function D2BooleanField({ control }) {
       required: isMandatory,
       disabled: isDisabled,
       validationText,
-      children: /* @__PURE__ */ jsx(
-        "div",
+      children: /* @__PURE__ */ jsx("div", { className: "d2-boolean-options", children: BOOLEAN_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+        Radio,
         {
-          style: {
-            display: "flex",
-            gap: 16
+          name: field.name,
+          label: option.label,
+          value: option.value,
+          checked: field.value === option.value,
+          disabled: isDisabled,
+          onChange: ({ value }) => {
+            field.onChange(value ?? "");
           },
-          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
-          ))
-        }
-      )
+          onBlur: field.onBlur
+        },
+        option.label
+      )) })
     }
   );
 }
@@ -306,6 +299,7 @@ function D2TrueOnlyField({ control }) {
     }
   );
 }
+var RADIO_RENDER_HINTS = /* @__PURE__ */ new Set(["RADIO", "VERTICAL_RADIOBUTTONS", "HORIZONTAL_RADIOBUTTONS"]);
 function D2SelectField({ control }) {
   const { fieldConfig, field, isMandatory, isDisabled } = control;
   const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
@@ -502,13 +496,13 @@ function D2ImageField({ control }) {
       {
         src: `${baseUrl}/api/fileResources/${value}/data`,
         alt: fieldConfig.label,
-        style: { maxWidth: "200px", maxHeight: "200px", marginTop: "8px" }
+        className: "d2-image-preview"
       }
     ) : null
   ] });
 }
 
-// ../../packages/map/src/coordinateValue.ts
+// ../../packages/map/src/utils/coordinateValue.ts
 var LNG_MIN = -180;
 var LNG_MAX = 180;
 var LAT_MIN = -90;
@@ -533,7 +527,7 @@ function joinCoordinateValue(lng, lat) {
   return JSON.stringify([lng, lat]);
 }
 
-// ../../packages/map/src/geojsonValue.ts
+// ../../packages/map/src/utils/geojsonValue.ts
 var GEOMETRY_TYPES = /* @__PURE__ */ new Set([
   "Point",
   "MultiPoint",
@@ -564,7 +558,7 @@ function stringifyGeojsonGeometry(geometry) {
   return JSON.stringify(geometry);
 }
 
-// ../../packages/map/src/defaultMapStyle.ts
+// ../../packages/map/src/utils/defaultMapStyle.ts
 var defaultMapStyle = {
   version: 8,
   sources: {
@@ -822,33 +816,19 @@ function CoordinateLocationModal({
     ] })
   ] });
 }
-var labelStyle = {
-  margin: 0,
-  fontSize: 11,
-  fontWeight: 600,
-  textTransform: "uppercase",
-  letterSpacing: 0.4,
-  color: colors.grey700
-};
-var valueStyle = {
-  margin: 0,
-  fontSize: 14,
-  fontWeight: 500,
-  fontVariantNumeric: "tabular-nums"
-};
 function CoordinateSummary({ value }) {
   const parsed = parseCoordinateValue(value);
   if (!parsed) {
-    return /* @__PURE__ */ jsx("span", { style: { color: colors.grey700 }, children: "No location set" });
+    return /* @__PURE__ */ jsx("span", { className: "d2-field-muted", children: "No location set" });
   }
-  return /* @__PURE__ */ jsxs("dl", { style: { display: "flex", gap: 16, margin: 0 }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4, alignItems: "baseline" }, children: [
-      /* @__PURE__ */ jsx("dt", { style: labelStyle, children: "Lat" }),
-      /* @__PURE__ */ jsx("dd", { style: valueStyle, children: parsed.lat.toFixed(5) })
+  return /* @__PURE__ */ jsxs("dl", { className: "d2-coordinate-summary", children: [
+    /* @__PURE__ */ jsxs("div", { className: "d2-coordinate-axis", children: [
+      /* @__PURE__ */ jsx("dt", { className: "d2-coordinate-label", children: "Lat" }),
+      /* @__PURE__ */ jsx("dd", { className: "d2-coordinate-value", children: parsed.lat.toFixed(5) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4, alignItems: "baseline" }, children: [
-      /* @__PURE__ */ jsx("dt", { style: labelStyle, children: "Lng" }),
-      /* @__PURE__ */ jsx("dd", { style: valueStyle, children: parsed.lng.toFixed(5) })
+    /* @__PURE__ */ jsxs("div", { className: "d2-coordinate-axis", children: [
+      /* @__PURE__ */ jsx("dt", { className: "d2-coordinate-label", children: "Lng" }),
+      /* @__PURE__ */ jsx("dd", { className: "d2-coordinate-value", children: parsed.lng.toFixed(5) })
     ] })
   ] });
 }
@@ -868,7 +848,7 @@ function D2CoordinateField({ control }) {
       disabled: isDisabled,
       validationText,
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+        /* @__PURE__ */ jsxs("div", { className: "d2-field-row", children: [
           /* @__PURE__ */ jsx(CoordinateSummary, { value }),
           /* @__PURE__ */ jsx(
             Button,
@@ -1004,16 +984,16 @@ function countPositions(geometry) {
 function GeometrySummary({ value }) {
   const geometry = parseGeojsonGeometry(value);
   if (!geometry) {
-    return /* @__PURE__ */ jsx("span", { style: { color: colors.grey700 }, children: "No geometry set" });
+    return /* @__PURE__ */ jsx("span", { className: "d2-field-muted", children: "No geometry set" });
   }
   if (geometry.type === "Point") {
     return /* @__PURE__ */ jsx(Chip, { dense: true, children: geometry.type });
   }
   const count = geometry.type === "GeometryCollection" ? geometry.geometries.length : countPositions(geometry);
   const noun = geometry.type === "GeometryCollection" ? count === 1 ? "geometry" : "geometries" : "points";
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "d2-geojson-summary", children: [
     /* @__PURE__ */ jsx(Chip, { dense: true, children: geometry.type }),
-    /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: colors.grey700 }, children: [
+    /* @__PURE__ */ jsxs("span", { className: "d2-geojson-meta", children: [
       count,
       " ",
       noun
@@ -1036,7 +1016,7 @@ function D2GeoJsonField({ control }) {
       disabled: isDisabled,
       validationText,
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+        /* @__PURE__ */ jsxs("div", { className: "d2-field-row", children: [
           /* @__PURE__ */ jsx(GeometrySummary, { value }),
           /* @__PURE__ */ jsx(
             Button,
@@ -1136,8 +1116,8 @@ function FeedbackPanel({ title, items }) {
   if (!items.length) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "var(--spacers-dp16)" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 var(--spacers-dp8)" }, children: title }),
+  return /* @__PURE__ */ jsxs("div", { className: "d2-feedback-panel", children: [
+    /* @__PURE__ */ jsx("h3", { className: "d2-feedback-panel-title", children: title }),
     items.map((item) => /* @__PURE__ */ jsx(NoticeBox, { title: item.content, children: item.value ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("strong", { children: item.content }),
       ": ",