@nnkogift/dhis2-form-utils-devtools 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/traceStore.js

@@ -0,0 +1,39 @@
+import { DEFAULT_TRACE_MAX_ENTRIES } from './constants.js';
+
+function createRuleTraceStore(maxEntries = DEFAULT_TRACE_MAX_ENTRIES) {
+  let entries = [];
+  const listeners = /* @__PURE__ */ new Set();
+  let disposeTraceSubscription = null;
+  const notify = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+  return {
+    record(entry) {
+      entries = [...entries, entry].slice(-maxEntries);
+      notify();
+    },
+    getSnapshot() {
+      return entries;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    dispose() {
+      disposeTraceSubscription?.();
+      disposeTraceSubscription = null;
+      listeners.clear();
+    },
+    bindTraceSubscription(unsubscribe) {
+      disposeTraceSubscription = unsubscribe;
+    }
+  };
+}
+
+export { createRuleTraceStore };
+//# sourceMappingURL=traceStore.js.map
+//# sourceMappingURL=traceStore.js.map

package/dist/traceStore.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/traceStore.ts"],"names":[],"mappings":";;AAYO,SAAS,oBAAA,CAAqB,aAAa,yBAAA,EAA2C;AACzF,EAAA,IAAI,UAA4B,EAAC;AACjC,EAAA,MAAM,SAAA,uBAAgB,GAAA,EAAc;AACpC,EAAA,IAAI,wBAAA,GAAgD,IAAA;AAEpD,EAAA,MAAM,SAAS,MAAM;AACjB,IAAA,KAAA,MAAW,YAAY,SAAA,EAAW;AAC9B,MAAA,QAAA,EAAS;AAAA,IACb;AAAA,EACJ,CAAA;AAEA,EAAA,OAAO;AAAA,IACH,OAAO,KAAA,EAAO;AACV,MAAA,OAAA,GAAU,CAAC,GAAG,OAAA,EAAS,KAAK,CAAA,CAAE,KAAA,CAAM,CAAC,UAAU,CAAA;AAC/C,MAAA,MAAA,EAAO;AAAA,IACX,CAAA;AAAA,IACA,WAAA,GAAc;AACV,MAAA,OAAO,OAAA;AAAA,IACX,CAAA;AAAA,IACA,UAAU,QAAA,EAAU;AAChB,MAAA,SAAA,CAAU,IAAI,QAAQ,CAAA;AACtB,MAAA,OAAO,MAAM;AACT,QAAA,SAAA,CAAU,OAAO,QAAQ,CAAA;AAAA,MAC7B,CAAA;AAAA,IACJ,CAAA;AAAA,IACA,OAAA,GAAU;AACN,MAAA,wBAAA,IAA2B;AAC3B,MAAA,wBAAA,GAA2B,IAAA;AAC3B,MAAA,SAAA,CAAU,KAAA,EAAM;AAAA,IACpB,CAAA;AAAA,IACA,sBAAsB,WAAA,EAAyB;AAC3C,MAAA,wBAAA,GAA2B,WAAA;AAAA,IAC/B;AAAA,GACJ;AAGJ","file":"traceStore.js","sourcesContent":["import type { RuleTraceEntry } from '@nnkogift/dhis2-form-utils-hooks';\nimport { DEFAULT_TRACE_MAX_ENTRIES } from './constants.js';\n\ntype Listener = () => void;\n\nexport type RuleTraceStore = {\n    record: (entry: RuleTraceEntry) => void;\n    getSnapshot: () => readonly RuleTraceEntry[];\n    subscribe: (listener: Listener) => () => void;\n    dispose: () => void;\n};\n\nexport function createRuleTraceStore(maxEntries = DEFAULT_TRACE_MAX_ENTRIES): RuleTraceStore {\n    let entries: RuleTraceEntry[] = [];\n    const listeners = new Set<Listener>();\n    let disposeTraceSubscription: (() => void) | null = null;\n\n    const notify = () => {\n        for (const listener of listeners) {\n            listener();\n        }\n    };\n\n    return {\n        record(entry) {\n            entries = [...entries, entry].slice(-maxEntries);\n            notify();\n        },\n        getSnapshot() {\n            return entries;\n        },\n        subscribe(listener) {\n            listeners.add(listener);\n            return () => {\n                listeners.delete(listener);\n            };\n        },\n        dispose() {\n            disposeTraceSubscription?.();\n            disposeTraceSubscription = null;\n            listeners.clear();\n        },\n        bindTraceSubscription(unsubscribe: () => void) {\n            disposeTraceSubscription = unsubscribe;\n        },\n    } as RuleTraceStore & {\n        bindTraceSubscription: (unsubscribe: () => void) => void;\n    };\n}\n"]}

package/dist/useFlipReorder.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Animates list-item reordering via the FLIP technique (First-Last-Invert-Play):
+ * captures each item's position before the order changes, then on the next
+ * paint inverts the delta with a transform and plays it out to zero.
+ */
+declare function useFlipReorder(orderedIds: readonly string[], containerRef: React.RefObject<HTMLElement | null>): void;
+
+export { useFlipReorder };

package/dist/useFlipReorder.js

@@ -0,0 +1,52 @@
+import { useRef, useLayoutEffect } from 'react';
+
+const REORDER_DURATION_MS = 220;
+const REORDER_EASING = "ease-out";
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useFlipReorder(orderedIds, containerRef) {
+  const positionsRef = useRef(/* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const previousPositions = positionsRef.current;
+    const items = container.querySelectorAll("[data-rule-id]");
+    if (!prefersReducedMotion()) {
+      items.forEach((item) => {
+        const id = item.dataset.ruleId;
+        if (!id) {
+          return;
+        }
+        const previousRect = previousPositions.get(id);
+        if (!previousRect) {
+          return;
+        }
+        const currentRect = item.getBoundingClientRect();
+        const deltaY = previousRect.top - currentRect.top;
+        if (deltaY === 0) {
+          return;
+        }
+        item.style.transition = "none";
+        item.style.transform = `translateY(${String(deltaY)}px)`;
+        item.getBoundingClientRect();
+        item.style.transition = `transform ${String(REORDER_DURATION_MS)}ms ${REORDER_EASING}`;
+        item.style.transform = "";
+      });
+    }
+    const nextPositions = /* @__PURE__ */ new Map();
+    items.forEach((item) => {
+      const id = item.dataset.ruleId;
+      if (id) {
+        nextPositions.set(id, item.getBoundingClientRect());
+      }
+    });
+    positionsRef.current = nextPositions;
+  }, [orderedIds.join("|")]);
+}
+
+export { useFlipReorder };
+//# sourceMappingURL=useFlipReorder.js.map
+//# sourceMappingURL=useFlipReorder.js.map

package/dist/useFlipReorder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useFlipReorder.ts"],"names":[],"mappings":";;AAEA,MAAM,mBAAA,GAAsB,GAAA;AAC5B,MAAM,cAAA,GAAiB,UAAA;AAEvB,SAAS,oBAAA,GAAgC;AACrC,EAAA,OACI,OAAO,MAAA,KAAW,WAAA,IAClB,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AAE9D;AAOO,SAAS,cAAA,CACZ,YACA,YAAA,EACF;AACE,EAAA,MAAM,YAAA,GAAe,MAAA,iBAA6B,IAAI,GAAA,EAAK,CAAA;AAE3D,EAAA,eAAA,CAAgB,MAAM;AAClB,IAAA,MAAM,YAAY,YAAA,CAAa,OAAA;AAC/B,IAAA,IAAI,CAAC,SAAA,EAAW;AACZ,MAAA;AAAA,IACJ;AAEA,IAAA,MAAM,oBAAoB,YAAA,CAAa,OAAA;AACvC,IAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,gBAAA,CAA8B,gBAAgB,CAAA;AAEtE,IAAA,IAAI,CAAC,sBAAqB,EAAG;AACzB,MAAA,KAAA,CAAM,OAAA,CAAQ,CAAC,IAAA,KAAS;AACpB,QAAA,MAAM,EAAA,GAAK,KAAK,OAAA,CAAQ,MAAA;AACxB,QAAA,IAAI,CAAC,EAAA,EAAI;AACL,UAAA;AAAA,QACJ;AACA,QAAA,MAAM,YAAA,GAAe,iBAAA,CAAkB,GAAA,CAAI,EAAE,CAAA;AAC7C,QAAA,IAAI,CAAC,YAAA,EAAc;AACf,UAAA;AAAA,QACJ;AACA,QAAA,MAAM,WAAA,GAAc,KAAK,qBAAA,EAAsB;AAC/C,QAAA,MAAM,MAAA,GAAS,YAAA,CAAa,GAAA,GAAM,WAAA,CAAY,GAAA;AAC9C,QAAA,IAAI,WAAW,CAAA,EAAG;AACd,UAAA;AAAA,QACJ;AACA,QAAA,IAAA,CAAK,MAAM,UAAA,GAAa,MAAA;AACxB,QAAA,IAAA,CAAK,KAAA,CAAM,SAAA,GAAY,CAAA,WAAA,EAAc,MAAA,CAAO,MAAM,CAAC,CAAA,GAAA,CAAA;AAEnD,QAAA,IAAA,CAAK,qBAAA,EAAsB;AAC3B,QAAA,IAAA,CAAK,MAAM,UAAA,GAAa,CAAA,UAAA,EAAa,OAAO,mBAAmB,CAAC,MAAM,cAAc,CAAA,CAAA;AACpF,QAAA,IAAA,CAAK,MAAM,SAAA,GAAY,EAAA;AAAA,MAC3B,CAAC,CAAA;AAAA,IACL;AAEA,IAAA,MAAM,aAAA,uBAAoB,GAAA,EAAqB;AAC/C,IAAA,KAAA,CAAM,OAAA,CAAQ,CAAC,IAAA,KAAS;AACpB,MAAA,MAAM,EAAA,GAAK,KAAK,OAAA,CAAQ,MAAA;AACxB,MAAA,IAAI,EAAA,EAAI;AACJ,QAAA,aAAA,CAAc,GAAA,CAAI,EAAA,EAAI,IAAA,CAAK,qBAAA,EAAuB,CAAA;AAAA,MACtD;AAAA,IACJ,CAAC,CAAA;AACD,IAAA,YAAA,CAAa,OAAA,GAAU,aAAA;AAAA,EAE3B,GAAG,CAAC,UAAA,CAAW,IAAA,CAAK,GAAG,CAAC,CAAC,CAAA;AAC7B","file":"useFlipReorder.js","sourcesContent":["import { useLayoutEffect, useRef } from 'react';\n\nconst REORDER_DURATION_MS = 220;\nconst REORDER_EASING = 'ease-out';\n\nfunction prefersReducedMotion(): boolean {\n    return (\n        typeof window !== 'undefined' &&\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches\n    );\n}\n\n/**\n * Animates list-item reordering via the FLIP technique (First-Last-Invert-Play):\n * captures each item's position before the order changes, then on the next\n * paint inverts the delta with a transform and plays it out to zero.\n */\nexport function useFlipReorder(\n    orderedIds: readonly string[],\n    containerRef: React.RefObject<HTMLElement | null>\n) {\n    const positionsRef = useRef<Map<string, DOMRect>>(new Map());\n\n    useLayoutEffect(() => {\n        const container = containerRef.current;\n        if (!container) {\n            return;\n        }\n\n        const previousPositions = positionsRef.current;\n        const items = container.querySelectorAll<HTMLElement>('[data-rule-id]');\n\n        if (!prefersReducedMotion()) {\n            items.forEach((item) => {\n                const id = item.dataset.ruleId;\n                if (!id) {\n                    return;\n                }\n                const previousRect = previousPositions.get(id);\n                if (!previousRect) {\n                    return;\n                }\n                const currentRect = item.getBoundingClientRect();\n                const deltaY = previousRect.top - currentRect.top;\n                if (deltaY === 0) {\n                    return;\n                }\n                item.style.transition = 'none';\n                item.style.transform = `translateY(${String(deltaY)}px)`;\n                // Force reflow so the inverted transform applies before we animate it away.\n                item.getBoundingClientRect();\n                item.style.transition = `transform ${String(REORDER_DURATION_MS)}ms ${REORDER_EASING}`;\n                item.style.transform = '';\n            });\n        }\n\n        const nextPositions = new Map<string, DOMRect>();\n        items.forEach((item) => {\n            const id = item.dataset.ruleId;\n            if (id) {\n                nextPositions.set(id, item.getBoundingClientRect());\n            }\n        });\n        positionsRef.current = nextPositions;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [orderedIds.join('|')]);\n}\n"]}

package/dist/useProgramRuleDetail.d.ts

@@ -0,0 +1,17 @@
+import { ProgramRuleDetail } from './programRuleDetailQuery.js';
+import '@dhis2/data-engine';
+
+type UseProgramRuleDetailResult = {
+    detail: ProgramRuleDetail | undefined;
+    loading: boolean;
+    error: Error | undefined;
+};
+/**
+ * Lazily fetches a single program rule's full detail (actions with resolved target names,
+ * code/description/lastUpdated) when `ruleId` is set — the catalog list already has enough
+ * (id/name/condition/priority/scope) to render rule cards, so this only runs when the details
+ * modal opens.
+ */
+declare function useProgramRuleDetail(ruleId: string | null): UseProgramRuleDetailResult;
+
+export { type UseProgramRuleDetailResult, useProgramRuleDetail };

package/dist/useProgramRuleDetail.js

@@ -0,0 +1,30 @@
+import { useDataQuery } from '@dhis2/app-runtime';
+import { useEffect } from 'react';
+import { programRuleDetailQuery } from './programRuleDetailQuery.js';
+
+function isCurrentDetail(ruleId, detail) {
+  return ruleId != null && detail?.id === ruleId;
+}
+function resolveDetailState(ruleId, detail, hasError) {
+  const isCurrent = isCurrentDetail(ruleId, detail);
+  return {
+    detail: isCurrent ? detail : void 0,
+    loading: ruleId != null && !isCurrent && !hasError
+  };
+}
+function useProgramRuleDetail(ruleId) {
+  const { data, error, refetch } = useDataQuery(
+    programRuleDetailQuery,
+    { lazy: true }
+  );
+  useEffect(() => {
+    if (ruleId) {
+      void refetch({ ruleId });
+    }
+  }, [ruleId, refetch]);
+  return { ...resolveDetailState(ruleId, data?.programRule, Boolean(error)), error };
+}
+
+export { useProgramRuleDetail };
+//# sourceMappingURL=useProgramRuleDetail.js.map
+//# sourceMappingURL=useProgramRuleDetail.js.map

package/dist/useProgramRuleDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useProgramRuleDetail.ts"],"names":[],"mappings":";;;;AAcA,SAAS,eAAA,CAAgB,QAAuB,MAAA,EAAgD;AAC5F,EAAA,OAAO,MAAA,IAAU,IAAA,IAAQ,MAAA,EAAQ,EAAA,KAAO,MAAA;AAC5C;AAEA,SAAS,kBAAA,CACL,MAAA,EACA,MAAA,EACA,QAAA,EACsD;AACtD,EAAA,MAAM,SAAA,GAAY,eAAA,CAAgB,MAAA,EAAQ,MAAM,CAAA;AAChD,EAAA,OAAO;AAAA,IACH,MAAA,EAAQ,YAAY,MAAA,GAAS,MAAA;AAAA,IAC7B,OAAA,EAAS,MAAA,IAAU,IAAA,IAAQ,CAAC,aAAa,CAAC;AAAA,GAC9C;AACJ;AAQO,SAAS,qBAAqB,MAAA,EAAmD;AACpF,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,OAAA,EAAQ,GAAI,YAAA;AAAA,IAC7B,sBAAA;AAAA,IACA,EAAE,MAAM,IAAA;AAAK,GACjB;AAEA,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,IAAI,MAAA,EAAQ;AACR,MAAA,KAAK,OAAA,CAAQ,EAAE,MAAA,EAAQ,CAAA;AAAA,IAC3B;AAAA,EACJ,CAAA,EAAG,CAAC,MAAA,EAAQ,OAAO,CAAC,CAAA;AAEpB,EAAA,OAAO,EAAE,GAAG,kBAAA,CAAmB,MAAA,EAAQ,IAAA,EAAM,aAAa,OAAA,CAAQ,KAAK,CAAC,CAAA,EAAG,KAAA,EAAM;AACrF","file":"useProgramRuleDetail.js","sourcesContent":["import { useDataQuery } from '@dhis2/app-runtime';\nimport { useEffect } from 'react';\nimport {\n    programRuleDetailQuery,\n    type ProgramRuleDetail,\n    type ProgramRuleDetailQueryResult,\n} from './programRuleDetailQuery.js';\n\nexport type UseProgramRuleDetailResult = {\n    detail: ProgramRuleDetail | undefined;\n    loading: boolean;\n    error: Error | undefined;\n};\n\nfunction isCurrentDetail(ruleId: string | null, detail: ProgramRuleDetail | undefined): boolean {\n    return ruleId != null && detail?.id === ruleId;\n}\n\nfunction resolveDetailState(\n    ruleId: string | null,\n    detail: ProgramRuleDetail | undefined,\n    hasError: boolean\n): Pick<UseProgramRuleDetailResult, 'detail' | 'loading'> {\n    const isCurrent = isCurrentDetail(ruleId, detail);\n    return {\n        detail: isCurrent ? detail : undefined,\n        loading: ruleId != null && !isCurrent && !hasError,\n    };\n}\n\n/**\n * Lazily fetches a single program rule's full detail (actions with resolved target names,\n * code/description/lastUpdated) when `ruleId` is set — the catalog list already has enough\n * (id/name/condition/priority/scope) to render rule cards, so this only runs when the details\n * modal opens.\n */\nexport function useProgramRuleDetail(ruleId: string | null): UseProgramRuleDetailResult {\n    const { data, error, refetch } = useDataQuery<ProgramRuleDetailQueryResult>(\n        programRuleDetailQuery,\n        { lazy: true }\n    );\n\n    useEffect(() => {\n        if (ruleId) {\n            void refetch({ ruleId });\n        }\n    }, [ruleId, refetch]);\n\n    return { ...resolveDetailState(ruleId, data?.programRule, Boolean(error)), error };\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nnkogift/dhis2-form-utils-devtools",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.6",
   "description": "Developer tools for debugging DHIS2 program rules in dhis2-form-utils forms",
   "license": "MIT",
   "repository": {
@@ -27,6 +27,26 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./effect-styles": {
+      "import": {
+        "types": "./dist/effectStyles.d.ts",
+        "default": "./dist/effectStyles.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./scope": {
+      "import": {
+        "types": "./dist/RuleDevtoolsScope.d.ts",
+        "default": "./dist/RuleDevtoolsScope.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
     "./style.css": "./dist/index.css"
   },
   "files": [
@@ -38,17 +58,20 @@
   },
   "dependencies": {
     "@xyflow/react": "^12.11.1",
-    "@nnkogift/dhis2-form-utils-hooks": "0.1.0-alpha.4",
-    "@nnkogift/dhis2-form-utils-metadata": "0.1.0-alpha.4"
+    "@nnkogift/dhis2-form-utils-hooks": "0.1.0-alpha.6",
+    "@nnkogift/dhis2-form-utils-metadata": "0.1.0-alpha.6"
   },
   "peerDependencies": {
+    "@dhis2/app-runtime": ">=3.0.0",
     "@dhis2/d2-i18n": ">=1.0.0",
     "@dhis2/ui": ">=10.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@dhis2/app-runtime": "^3.17.0",
     "@dhis2/d2-i18n": "^1.2.0",
+    "@dhis2/data-engine": "^3.17.0",
     "@dhis2/ui": "^10.15.1",
     "@tailwindcss/cli": "^4.3.2",
     "@testing-library/react": "^16.3.2",
@@ -68,7 +91,7 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "tsup && tailwindcss -i ./src/tailwind.css -o ./dist/index.css --minify",
+    "build": "tsup && tailwindcss -i ./src/tailwind.css -o ./dist/index.css --minify && node ../../packages/config/copyEntryDtsCts.mjs",
     "dev": "concurrently -n tsup,css -c blue,magenta \"tsup --watch\" \"tailwindcss -i ./src/tailwind.css -o ./dist/index.css --watch\"",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"