geoiq-frontend-ui-kit 2.0.0 → 2.0.2

package/dist/index.es115.js

@@ -1,17 +1,19 @@
-import { cva as s } from "class-variance-authority";
-const o = s("", {
-  variants: {
-    bgColor: {
-      success: "bg-success-2",
-      danger: "bg-danger-2",
-      stroke: "bg-light-4"
+import _ from "react-dom";
+var r, t = _;
+if (process.env.NODE_ENV === "production")
+  r = t.createRoot, t.hydrateRoot;
+else {
+  var e = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  r = function(o, n) {
+    e.usingClientEntryPoint = !0;
+    try {
+      return t.createRoot(o, n);
+    } finally {
+      e.usingClientEntryPoint = !1;
     }
-  },
-  defaultVariants: {
-    bgColor: "success"
-  }
-});
+  };
+}
 export {
-  o as SliderBgColorVariants
+  r as createRoot
 };
 //# sourceMappingURL=index.es115.js.map

package/dist/index.es115.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es115.js","sources":["../src/components/molecules/polar-slider/polar-slider.styles.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const SliderBgColorVariants = cva('', {\n  variants: {\n    bgColor: {\n      success: 'bg-success-2',\n      danger: 'bg-danger-2',\n      stroke: 'bg-light-4',\n    },\n  },\n  defaultVariants: {\n    bgColor: 'success',\n  },\n})\n"],"names":["SliderBgColorVariants","cva"],"mappings":";AAEO,MAAMA,IAAwBC,EAAI,IAAI;AAAA,EAC3C,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC;"}
+{"version":3,"file":"index.es115.js","sources":["../node_modules/react-dom/client.js"],"sourcesContent":["'use strict';\n\nvar m = require('react-dom');\nif (process.env.NODE_ENV === 'production') {\n  exports.createRoot = m.createRoot;\n  exports.hydrateRoot = m.hydrateRoot;\n} else {\n  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;\n  exports.createRoot = function(c, o) {\n    i.usingClientEntryPoint = true;\n    try {\n      return m.createRoot(c, o);\n    } finally {\n      i.usingClientEntryPoint = false;\n    }\n  };\n  exports.hydrateRoot = function(c, h, o) {\n    i.usingClientEntryPoint = true;\n    try {\n      return m.hydrateRoot(c, h, o);\n    } finally {\n      i.usingClientEntryPoint = false;\n    }\n  };\n}\n"],"names":["m","require$$0","createRoot","i","c","o"],"mappings":";OAEIA,IAAIC;AACR,IAAI,QAAQ,IAAI,aAAa;AAC3B,EAAAC,IAAqBF,EAAE,YACDA,EAAE;AAAA,KACnB;AACL,MAAIG,IAAIH,EAAE;AACV,EAAAE,IAAqB,SAASE,GAAGC,GAAG;AAClC,IAAAF,EAAE,wBAAwB;AAC1B,QAAI;AACF,aAAOH,EAAE,WAAWI,GAAGC,CAAC;AAAA,IAC9B,UAAK;AACC,MAAAF,EAAE,wBAAwB;AAAA,IAChC;AAAA,EACA;AASA;","x_google_ignoreList":[0]}

package/dist/index.es116.js

@@ -1,276 +1,103 @@
-import e from "react";
-import { _Dialog as v } from "./index.es37.js";
-import { X as N, ChevronLeft as w, ChevronRight as S } from "lucide-react";
-import { Typography as i } from "./index.es17.js";
-import { ResponsiveContainer as d, BarChart as u, CartesianGrid as f, XAxis as g, YAxis as h, Tooltip as p, Bar as E } from "recharts";
-import { trendBoxStyles as C, trendValueStyles as k } from "./index.es132.js";
-const O = ({
-  data: r,
-  onToggle: t,
-  isOpen: n,
-  galleryActiveIndex: a,
-  setgalleryActiveIndex: l
-}) => {
-  const o = r && r.length, b = () => {
-    r && l((s) => (s + 1) % r?.length);
-  }, y = () => {
-    r && l(
-      (s) => (s - 1 + r.length) % r.length
+import { Loader2 as g, Save as v, X as E } from "lucide-react";
+import t, { useRef as n, useState as x, useEffect as s } from "react";
+import { Button as b } from "./index.es9.js";
+import { ImageEditorPortalContext as h } from "./index.es140.js";
+import { Panel as y } from "./index.es141.js";
+import { Ribbon as w } from "./index.es142.js";
+import { Stage as S } from "./index.es143.js";
+import { StatusBar as N } from "./index.es144.js";
+function j({
+  engine: a,
+  ui: r,
+  isOpen: l,
+  saveLabel: u
+}) {
+  const o = n(null), [d, p] = x(null), i = n(null), c = n(null), m = n(!1);
+  return s(() => {
+    if (m.current) return;
+    const e = i.current;
+    !e?.canvas || !e.overlay || !e.textEditor || !e.stage || (a.mount({
+      canvas: e.canvas,
+      overlay: e.overlay,
+      textEditor: e.textEditor,
+      stage: e.stage
+    }), m.current = !0);
+  }, [r != null]), s(() => {
+    if (!l || !o.current) return;
+    o.current.hasAttribute("tabindex") || o.current.setAttribute("tabindex", "-1");
+    const e = setTimeout(
+      () => o.current?.focus({ preventScroll: !0 }),
+      0
     );
-  }, x = (s) => {
-    l(s);
-  }, m = () => {
-    t();
-  };
-  return /* @__PURE__ */ e.createElement(
-    v,
+    return () => clearTimeout(e);
+  }, [l]), s(() => {
+    l && a.refitStage();
+  }, [l, a]), r ? /* @__PURE__ */ t.createElement(
+    "div",
     {
-      open: n,
-      trigger: null,
-      contentClassName: "bg-transparent w-fit  border-0",
-      onInteractOutside: m,
-      body: /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center justify-center w-full h-full max-w-3xl mx-auto" }, /* @__PURE__ */ e.createElement(
-        N,
-        {
-          size: 24,
-          color: "white",
-          className: "absolute z-50 cursor-pointer -right-10 -top-10",
-          onClick: m
-        }
-      ), /* @__PURE__ */ e.createElement("div", { className: "relative" }, /* @__PURE__ */ e.createElement("div", { className: "relative " }, o && /* @__PURE__ */ e.createElement(
-        "img",
-        {
-          key: r[a].image_url,
-          src: r[a].image_url,
-          alt: `Street ${a + 1}`,
-          className: "w-[500px] max-h-[80vh] object-contain flex-shrink-0"
-        }
-      )), /* @__PURE__ */ e.createElement("div", { className: "relative top-[-50%]  left-[-10%] flex row  w-[120%] justify-between" }, /* @__PURE__ */ e.createElement("div", { role: "button", tabIndex: 0, onClick: y }, /* @__PURE__ */ e.createElement(w, { size: 30, color: "white" })), /* @__PURE__ */ e.createElement("div", { role: "button", tabIndex: 0, onClick: b }, /* @__PURE__ */ e.createElement(S, { size: 30, color: "white" })))), /* @__PURE__ */ e.createElement("div", { className: "flex justify-center p-2 mt-4 space-x-2 rounded-lg" }, o && r.map((s, c) => /* @__PURE__ */ e.createElement(
-        "img",
-        {
-          key: c,
-          src: s.image_url,
-          alt: `Thumbnail ${c + 1}`,
-          onClick: () => x(c),
-          className: `w-20 h-auto rounded-lg cursor-pointer ${c === a ? "ring-2 ring-primary-1" : "ring-2 ring-transparent"} hover:ring-gray-300`
-        }
-      ))))
-    }
-  );
-}, $ = ({ active: r, payload: t, label: n, year: a }) => {
-  if (r && t && t.length) {
-    const l = t[0]?.payload?.year, o = t[0]?.value;
-    return /* @__PURE__ */ e.createElement("div", { className: "flex flex-col bg-light-1 p-4 rounded-lg shadow-md min-w-[200px] gap-1" }, /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-primary" }, `${n}'${l}`), /* @__PURE__ */ e.createElement("div", { className: "my-2 w-full h-px border border-stroke-1" }), /* @__PURE__ */ e.createElement("div", { className: "flex" }, /* @__PURE__ */ e.createElement(
-      "div",
-      {
-        className: "h-4 w-1 rounded-lg",
-        style: { backgroundColor: "#6D48EF" }
-      }
-    ), /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-secondary mx-1" }, "Visits"), /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-secondary ml-auto" }, ` ${o}`)));
-  }
-  return null;
-}, z = ({ active: r, payload: t, label: n }) => {
-  if (r && t && t.length) {
-    const a = t[0]?.payload?.distance, l = t[0]?.value;
-    return /* @__PURE__ */ e.createElement("div", { className: "flex bg-light-1 items-center justify-between rounded-lg shadow-md min-w-45 max-w-80 gap-2 p-2" }, /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-primary" }, /* @__PURE__ */ e.createElement("div", { className: "flex h-full justify-between items-center p-2 gap-4" }, /* @__PURE__ */ e.createElement("div", null, n), /* @__PURE__ */ e.createElement("div", null, " ", a + "km"))), /* @__PURE__ */ e.createElement(
-      i,
-      {
-        variant: "body4",
-        className: "text-normal text-danger-1 ml-auto p-2"
+      ref: (e) => {
+        o.current = e, p(e);
       },
-      `${l}%`
-    ));
-  }
-  return null;
-}, D = ({ insights: r }) => /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", { className: "flex flex-row mb-4 justify-between" }, /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-light-2" }, "Store Insight:")), /* @__PURE__ */ e.createElement("div", { className: "bg-light-2 p-3 border border-neutral-1 rounded-lg" }, /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-light-2 mb-2" }, "Presence of other brands in catchment:"), /* @__PURE__ */ e.createElement("div", { className: "flex gap-1 flex-wrap" }, r.map((t) => /* @__PURE__ */ e.createElement(
-  "div",
-  {
-    key: t.type,
-    className: "flex items-center gap-1 bg-light-1 px-2 py-1 rounded-full border border-neutral-1"
-  },
-  /* @__PURE__ */ e.createElement(
-    "img",
-    {
-      src: t.iconUrl,
-      alt: `${t.type} Icon`,
-      className: "w-4 h-4"
-    }
-  ),
-  /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-light-2" }, t.count),
-  /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-light-2" }, t.type === "competitor" ? "Competitors" : "Complementary"))
-))))), K = ({
-  highlights: r
-}) => /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-light-2 mb-2" }, "Store Overview:"), /* @__PURE__ */ e.createElement("div", { className: "bg-light-2 p-1 border border-neutral-1 rounded-lg" }, /* @__PURE__ */ e.createElement("div", { className: "flex justify-evenly items-center" }, r.map((t, n) => /* @__PURE__ */ e.createElement(e.Fragment, { key: n }, /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center justify-center text-center gap-1 p-" }, /* @__PURE__ */ e.createElement(
-  "div",
-  {
-    className: C({
-      trend: t.trend?.toString()
-    })
-  },
-  t.trend === 1 && /* @__PURE__ */ e.createElement(
-    "img",
-    {
-      src: "https://frontend-static-files.geoiq.io/strapi/trending_up_9d73d6fac5.svg",
-      alt: "High Trend",
-      className: "w-3 h-3"
-    }
-  ),
-  t.trend === -1 && /* @__PURE__ */ e.createElement(
-    "img",
-    {
-      src: "https://frontend-static-files.geoiq.io/strapi/trending_down_87adc7f3a6.svg",
-      alt: "Low Trend",
-      className: "w-3 h-3"
-    }
-  ),
-  t.value && t.trend ? /* @__PURE__ */ e.createElement(
-    i,
-    {
-      variant: "body5",
-      className: k({
-        trend: t.trend?.toString()
-      })
-    },
-    `${t.value}%`
-  ) : /* @__PURE__ */ e.createElement(i, { variant: "body5", className: "text-sm" }, "-")
-), t.name && /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-light-2" }, t.name)), n < r.length - 1 && /* @__PURE__ */ e.createElement("div", { className: "border-l border-stroke-light-1 h-20 mx-1" })))))), I = ({ data: r }) => !r || r.every((t) => t.footfall === null) ? null : /* @__PURE__ */ e.createElement("div", { className: "w-full h-full bg-light-2 border border-neutral-1 p-3 rounded-lg" }, /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-light-2 mb-4" }, "Footfall trends"), /* @__PURE__ */ e.createElement(d, { width: "100%", height: 300 }, /* @__PURE__ */ e.createElement(
-  u,
-  {
-    data: r,
-    margin: {
-      top: 3,
-      right: 3,
-      bottom: -10,
-      left: 3
-    },
-    barSize: 24
-  },
-  /* @__PURE__ */ e.createElement(f, { strokeDasharray: "10 10" }),
-  /* @__PURE__ */ e.createElement(
-    g,
-    {
-      dataKey: "month",
+      className: "fixed inset-0 z-[2147483000] flex items-center justify-center bg-[rgba(24,22,18,.55)] backdrop-blur-sm",
       style: {
-        font: "Kumbh Sans",
-        fontSize: "12px",
-        fontWeight: "500",
-        color: "#4A4A4A"
-      }
-    }
-  ),
-  /* @__PURE__ */ e.createElement(
-    h,
-    {
-      className: "text-4-grey",
-      style: { fontSize: "12px", fontWeight: "500" },
-      tickFormatter: (t) => t > 1e6 ? `${t / 1e6}M` : t > 1e3 ? `${t / 1e3}K` : t,
-      label: {
-        value: "AVG FOOTFALL FOR A 3-MONTH PERIOD",
-        angle: -90,
-        position: "insideLeft",
-        dy: -5,
-        style: {
-          textAnchor: "middle",
-          fontSize: "12px",
-          fontWeight: "500"
-        }
-      }
-    }
-  ),
-  /* @__PURE__ */ e.createElement(p, { content: /* @__PURE__ */ e.createElement($, null) }),
-  /* @__PURE__ */ e.createElement(
-    E,
-    {
-      dataKey: "footfall",
-      fill: "#6D48EF",
-      radius: [4, 4, 4, 4],
-      style: { cursor: "pointer" }
-    }
-  )
-))), R = ({
-  data: r
-}) => {
-  if (!r || r.every((n) => n.cannibalisation === null))
-    return null;
-  const t = (n) => {
-    const a = r.length;
-    let l;
-    return a <= 1 ? l = 50 : a <= 6 ? l = 22 - (a - 1) * 4 : l = 6, n.length > l ? `${n.slice(0, l)}...` : n;
-  };
-  return /* @__PURE__ */ e.createElement("div", { className: "w-full h-full bg-light-2 border border-neutral-1 p-3 rounded-lg" }, /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-light-2 mb-4" }, "Cannibalisation effects"), /* @__PURE__ */ e.createElement(d, { width: "100%", height: 300 }, /* @__PURE__ */ e.createElement(
-    u,
-    {
-      data: r,
-      margin: {
-        top: 3,
-        right: 3,
-        bottom: 5,
-        left: 3
+        display: l ? "flex" : "none",
+        pointerEvents: "auto"
       },
-      barSize: 24
+      onMouseDown: (e) => {
+        e.target === e.currentTarget && r.closeOnBackdrop && a.close();
+      }
     },
-    /* @__PURE__ */ e.createElement(f, { strokeDasharray: "10 10" }),
-    /* @__PURE__ */ e.createElement(
-      g,
+    /* @__PURE__ */ t.createElement(h.Provider, { value: d }, /* @__PURE__ */ t.createElement("div", { className: "image-editor-modal-panel flex flex-col overflow-hidden bg-light-2 shadow-2xl" }, /* @__PURE__ */ t.createElement("div", { className: "flex items-center gap-3 border-b border-neutral-1 bg-light-3 px-4 py-3" }, /* @__PURE__ */ t.createElement(
+      b,
       {
-        dataKey: "store_name",
-        tickFormatter: t,
-        tickMargin: 10,
-        tick: (n) => {
-          const { x: a, y: l, payload: o } = n;
-          return /* @__PURE__ */ e.createElement("text", { x: a, y: l, textAnchor: "end", fill: "#666" }, /* @__PURE__ */ e.createElement("tspan", { x: a, style: { fontSize: 12 } }, t(o.value)), /* @__PURE__ */ e.createElement(
-            "tspan",
-            {
-              x: a,
-              dy: "1.5em",
-              style: {
-                fontSize: 10,
-                whiteSpace: "nowrap",
-                paddingTop: "2px"
-              }
-            },
-            r[o.index].distance + " kms"
-          ));
-        }
+        variant: "primary",
+        size: "sm",
+        disabled: !r.hasImage || r.isLoadingImage || r.isSaving,
+        onClick: a.save,
+        className: "w-auto",
+        prefixIcon: r.isSaving ? /* @__PURE__ */ t.createElement(g, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ t.createElement(v, { className: "h-4 w-4" })
+      },
+      r.isSaving ? "Saving…" : u
+    ), /* @__PURE__ */ t.createElement(
+      "button",
+      {
+        type: "button",
+        title: "Close",
+        onClick: () => a.close(),
+        className: "ml-auto flex h-[30px] w-[30px] items-center justify-center rounded-lg border border-neutral-1 bg-white text-light-4 hover:bg-light-3 hover:text-light-2"
+      },
+      /* @__PURE__ */ t.createElement(E, { className: "h-4 w-4" })
+    )), /* @__PURE__ */ t.createElement(
+      w,
+      {
+        ui: r,
+        engine: a,
+        onOpenFile: () => c.current?.click()
       }
-    ),
-    /* @__PURE__ */ e.createElement(
-      h,
+    ), /* @__PURE__ */ t.createElement(
+      "input",
       {
-        className: "text-4-grey",
-        style: { fontSize: "12px", fontWeight: "500" },
-        tickFormatter: (n) => n > 1e6 ? `${n / 1e6}M` : n > 1e3 ? `${n / 1e3}K` : n,
-        label: {
-          value: "CANNIBALISATION IN %",
-          angle: -90,
-          position: "insideLeft",
-          dy: -5,
-          style: {
-            textAnchor: "middle",
-            fontSize: "12px",
-            fontWeight: "500"
-          }
-        },
-        domain: [0, 100]
+        ref: c,
+        type: "file",
+        accept: "image/*",
+        hidden: !0,
+        onChange: (e) => {
+          const f = e.target.files?.[0];
+          f && a.openFile(f), e.target.value = "";
+        }
       }
-    ),
-    /* @__PURE__ */ e.createElement(p, { content: /* @__PURE__ */ e.createElement(z, null) }),
-    /* @__PURE__ */ e.createElement(
-      E,
+    ), /* @__PURE__ */ t.createElement("div", { className: "image-editor-stage-panel-wrap flex min-h-0 flex-1" }, /* @__PURE__ */ t.createElement(
+      S,
       {
-        dataKey: "cannibalisation",
-        fill: "#F93232",
-        radius: [4, 4, 4, 4],
-        style: { cursor: "pointer" }
+        ref: i,
+        ui: r,
+        onChooseImage: () => c.current?.click(),
+        onDropFile: (e) => a.openFile(e)
       }
-    )
-  )));
-};
+    ), /* @__PURE__ */ t.createElement(y, { ui: r, engine: a })), /* @__PURE__ */ t.createElement(N, { ui: r })))
+  ) : null;
+}
 export {
-  R as CannibalisationChartSection,
-  I as FootfallChartSection,
-  O as ReportSnippetGalleryView,
-  D as StoreInsightsSection,
-  K as StoreOverviewSection
+  j as ImageEditorModal
 };
 //# sourceMappingURL=index.es116.js.map

package/dist/index.es116.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es116.js","sources":["../src/components/ui/report-snippet-view/report-snippet-view-components.tsx"],"sourcesContent":["import React, { FC } from 'react'\nimport { ReportSnippetViewNS } from './report-snippet-view.types'\n\nimport { Dialog } from '@/components/organisms/dialog'\nimport { ChevronLeft, ChevronRight, X } from 'lucide-react'\nimport { Typography } from '@/components/atoms/typography'\nimport {\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n} from 'recharts'\nimport { trendBoxStyles, trendValueStyles } from './report-snippet-view-style'\n\nconst ReportSnippetGalleryView: FC<{\n  onToggle: () => void\n  isOpen: boolean\n  data?: ReportSnippetViewNS.StreetViewData\n  galleryActiveIndex: number\n  setgalleryActiveIndex: React.Dispatch<React.SetStateAction<number>>\n}> = ({\n  data,\n  onToggle,\n  isOpen,\n  galleryActiveIndex,\n  setgalleryActiveIndex,\n}) => {\n  // Current active item\n\n  const isDataAvailable = data && data.length\n\n  // Handle next click\n  const handleNext = () => {\n    if (!data) return\n    setgalleryActiveIndex((prevIndex) => (prevIndex + 1) % data?.length)\n  }\n\n  // Handle previous click\n  const handlePrev = () => {\n    if (!data) return\n    setgalleryActiveIndex(\n      (prevIndex) => (prevIndex - 1 + data.length) % data.length\n    )\n  }\n\n  const handleThumbnailClick = (index: number) => {\n    setgalleryActiveIndex(index)\n  }\n\n  const toggleGallery = () => {\n    onToggle()\n  }\n\n  return (\n    <Dialog\n      open={isOpen}\n      trigger={null}\n      contentClassName=\"bg-transparent w-fit  border-0\"\n      onInteractOutside={toggleGallery}\n      body={\n        <div className=\"flex flex-col items-center justify-center w-full h-full max-w-3xl mx-auto\">\n          <X\n            size={24}\n            color=\"white\"\n            className=\"absolute z-50 cursor-pointer -right-10 -top-10\"\n            onClick={toggleGallery}\n          />\n\n          {/* Main Carousel */}\n          <div className=\"relative\">\n            <div className=\"relative \">\n              {isDataAvailable && (\n                <img\n                  key={data[galleryActiveIndex].image_url}\n                  src={data[galleryActiveIndex].image_url}\n                  alt={`Street ${galleryActiveIndex + 1}`}\n                  className=\"w-[500px] max-h-[80vh] object-contain flex-shrink-0\"\n                />\n              )}\n            </div>\n\n            {/* Navigation Buttons */}\n            <div className=\"relative top-[-50%]  left-[-10%] flex row  w-[120%] justify-between\">\n              <div role=\"button\" tabIndex={0} onClick={handlePrev}>\n                <ChevronLeft size={30} color=\"white\" />\n              </div>\n              <div role=\"button\" tabIndex={0} onClick={handleNext}>\n                <ChevronRight size={30} color=\"white\" />\n              </div>\n            </div>\n          </div>\n\n          {/* Thumbnails */}\n          <div className=\"flex justify-center p-2 mt-4 space-x-2 rounded-lg\">\n            {isDataAvailable &&\n              data.map((item, index) => (\n                <img\n                  key={index}\n                  src={item.image_url}\n                  alt={`Thumbnail ${index + 1}`}\n                  onClick={() => handleThumbnailClick(index)}\n                  className={`w-20 h-auto rounded-lg cursor-pointer ${\n                    index === galleryActiveIndex\n                      ? 'ring-2 ring-primary-1'\n                      : 'ring-2 ring-transparent'\n                  } hover:ring-gray-300`}\n                />\n              ))}\n          </div>\n        </div>\n      }\n    />\n  )\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars\nconst CustomTooltipFootfall = ({ active, payload, label, year }: any) => {\n  if (active && payload && payload.length) {\n    const year = payload[0]?.payload?.year\n    const footfall = payload[0]?.value\n    return (\n      <div className=\"flex flex-col bg-light-1 p-4 rounded-lg shadow-md min-w-[200px] gap-1\">\n        {/* Month Information */}\n        <Typography variant={'body6'} className=\"text-primary\">\n          {`${label}'${year}`}\n        </Typography>\n\n        {/* Separator */}\n        <div className=\"my-2 w-full h-px border border-stroke-1\" />\n\n        {/* Footfall/Visits Information */}\n        <div className=\"flex\">\n          <div\n            className=\"h-4 w-1 rounded-lg\"\n            style={{ backgroundColor: '#6D48EF' }}\n          />\n          <Typography variant={'body6'} className=\"text-secondary mx-1\">\n            Visits\n          </Typography>\n          <Typography variant={'body4'} className=\"text-secondary ml-auto\">\n            {` ${footfall}`}\n          </Typography>\n        </div>\n      </div>\n    )\n  }\n  return null\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst CustomTooltipCannibalisation = ({ active, payload, label }: any) => {\n  if (active && payload && payload.length) {\n    const distance = payload[0]?.payload?.distance\n    const cannibalisation = payload[0]?.value\n    return (\n      <div className=\"flex bg-light-1 items-center justify-between rounded-lg shadow-md min-w-45 max-w-80 gap-2 p-2\">\n        {/* Month Information */}\n        <Typography variant={'body6'} className=\"text-primary\">\n          {\n            <div className=\"flex h-full justify-between items-center p-2 gap-4\">\n              <div>{label}</div>\n              <div> {distance + 'km'}</div>\n            </div>\n          }\n        </Typography>\n        {/* Footfall/Visits Information */}\n        <Typography\n          variant={'body4'}\n          className=\"text-normal text-danger-1 ml-auto p-2\"\n        >\n          {`${cannibalisation}%`}\n        </Typography>\n      </div>\n    )\n  }\n  return null\n}\n\n{\n  /*--------- Store insights ----------*/\n}\ninterface StoreInsightsSectionProps {\n  insights: ReportSnippetViewNS.CatchmentInsights[]\n  // customButton?: React.ReactNode\n}\n\nconst StoreInsightsSection: FC<StoreInsightsSectionProps> = ({ insights }) => {\n  return (\n    <div>\n      <div className=\"flex flex-row mb-4 justify-between\">\n        <Typography variant=\"body4\" className=\"text-light-2\">\n          Store Insight:\n        </Typography>\n      </div>\n\n      <div className=\"bg-light-2 p-3 border border-neutral-1 rounded-lg\">\n        <Typography variant=\"body4\" className=\"text-light-2 mb-2\">\n          Presence of other brands in catchment:\n        </Typography>\n\n        {/* Render store insights data */}\n        <div className=\"flex gap-1 flex-wrap\">\n          {insights.map((item) => (\n            <div\n              key={item.type}\n              className=\"flex items-center gap-1 bg-light-1 px-2 py-1 rounded-full border border-neutral-1\"\n            >\n              {/* Icon */}\n              <img\n                src={item.iconUrl}\n                alt={`${item.type} Icon`}\n                className=\"w-4 h-4\"\n              />\n\n              {/* Name and Count */}\n              <Typography variant=\"body6\" className=\"text-light-2\">\n                {item.count}\n              </Typography>\n              <div className=\"flex items-center gap-1\">\n                <Typography variant=\"body6\" className=\"text-light-2\">\n                  {item.type === 'competitor' ? 'Competitors' : 'Complementary'}\n                </Typography>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\n{\n  /*--------- Store Overview ----------*/\n}\ninterface StoreOverviewSectionProps {\n  highlights: ReportSnippetViewNS.StoreHighlights[]\n}\n\nconst StoreOverviewSection: FC<StoreOverviewSectionProps> = ({\n  highlights,\n}) => {\n  return (\n    <div>\n      <Typography variant={'body4'} className=\"text-light-2 mb-2\">\n        Store Overview:\n      </Typography>\n      <div className=\"bg-light-2 p-1 border border-neutral-1 rounded-lg\">\n        <div className=\"flex justify-evenly items-center\">\n          {highlights.map((item, index) => (\n            <React.Fragment key={index}>\n              <div className=\"flex flex-col items-center justify-center text-center gap-1 p-\">\n                {/* Trend Box */}\n                <div\n                  className={trendBoxStyles({\n                    trend: item.trend?.toString() as '1' | '-1' | '0' | null,\n                  })}\n                >\n                  {item.trend === 1 && (\n                    <img\n                      src=\"https://frontend-static-files.geoiq.io/strapi/trending_up_9d73d6fac5.svg\"\n                      alt=\"High Trend\"\n                      className={'w-3 h-3'}\n                    />\n                  )}\n                  {item.trend === -1 && (\n                    <img\n                      src=\"https://frontend-static-files.geoiq.io/strapi/trending_down_87adc7f3a6.svg\"\n                      alt=\"Low Trend\"\n                      className={'w-3 h-3'}\n                    />\n                  )}\n                  {item.value && item.trend ? (\n                    <Typography\n                      variant=\"body5\"\n                      className={trendValueStyles({\n                        trend: item.trend?.toString() as\n                          | '1'\n                          | '-1'\n                          | '0'\n                          | null,\n                      })}\n                    >\n                      {`${item.value}%`}\n                    </Typography>\n                  ) : (\n                    <Typography variant=\"body5\" className=\"text-sm\">\n                      -\n                    </Typography>\n                  )}\n                </div>\n\n                {/* Name */}\n                {item.name && (\n                  <Typography variant={'body6'} className=\"text-light-2\">\n                    {item.name}\n                  </Typography>\n                )}\n              </div>\n\n              {/* Separator */}\n              {index < highlights.length - 1 && (\n                <div className=\"border-l border-stroke-light-1 h-20 mx-1\" />\n              )}\n            </React.Fragment>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\n{\n  /*----------------- Footfall Trends ------------------*/\n}\ninterface FootfallChartSectionProps {\n  data: ReportSnippetViewNS.FootfallChartData[]\n}\n\nconst FootfallChartSection: FC<FootfallChartSectionProps> = ({ data }) => {\n  if (!data || data.every((item) => item.footfall === null)) {\n    return null\n  }\n  return (\n    <div className=\"w-full h-full bg-light-2 border border-neutral-1 p-3 rounded-lg\">\n      {/* Section heading */}\n      <Typography variant={'body4'} className=\"text-light-2 mb-4\">\n        Footfall trends\n      </Typography>\n\n      {/* Bar Chart */}\n      <ResponsiveContainer width=\"100%\" height={300}>\n        <BarChart\n          data={data}\n          margin={{\n            top: 3,\n            right: 3,\n            bottom: -10,\n            left: 3,\n          }}\n          barSize={24}\n        >\n          <CartesianGrid strokeDasharray=\"10 10\" />\n          <XAxis\n            dataKey=\"month\"\n            style={{\n              font: 'Kumbh Sans',\n              fontSize: '12px',\n              fontWeight: '500',\n              color: '#4A4A4A',\n            }}\n          />\n          <YAxis\n            className=\"text-4-grey\"\n            style={{ fontSize: '12px', fontWeight: '500' }}\n            tickFormatter={(val) => {\n              if (val > 1000000) {\n                return `${val / 1000000}M`\n              }\n              if (val > 1000) {\n                return `${val / 1000}K`\n              }\n              return val\n            }}\n            label={{\n              value: 'AVG FOOTFALL FOR A 3-MONTH PERIOD',\n              angle: -90,\n              position: 'insideLeft',\n              dy: -5,\n              style: {\n                textAnchor: 'middle',\n                fontSize: '12px',\n                fontWeight: '500',\n              },\n            }}\n          />\n          <Tooltip content={<CustomTooltipFootfall />} />\n          <Bar\n            dataKey=\"footfall\"\n            fill=\"#6D48EF\"\n            radius={[4, 4, 4, 4]}\n            style={{ cursor: 'pointer' }}\n          />\n        </BarChart>\n      </ResponsiveContainer>\n    </div>\n  )\n}\n\n{\n  /* -----------------Cannibalisation Effect------------------ */\n}\ninterface CannibalisationChartSectionProps {\n  data: ReportSnippetViewNS.CannibalisationChartData[]\n}\n\nconst CannibalisationChartSection: FC<CannibalisationChartSectionProps> = ({\n  data,\n}) => {\n  if (!data || data.every((item) => item.cannibalisation === null)) {\n    return null\n  }\n  const formatXAxisLabel = (label: string) => {\n    const barCount = data.length\n    let maxLength\n\n    if (barCount <= 1) {\n      maxLength = 50\n    } else if (barCount <= 6) {\n      maxLength = 22 - (barCount - 1) * 4\n    } else {\n      maxLength = 6\n    }\n\n    return label.length > maxLength ? `${label.slice(0, maxLength)}...` : label\n  }\n  return (\n    <div className=\"w-full h-full bg-light-2 border border-neutral-1 p-3 rounded-lg\">\n      {/* Section heading */}\n      <Typography variant={'body4'} className=\"text-light-2 mb-4\">\n        Cannibalisation effects\n      </Typography>\n\n      {/* Bar Chart */}\n      <ResponsiveContainer width=\"100%\" height={300}>\n        <BarChart\n          data={data}\n          margin={{\n            top: 3,\n            right: 3,\n            bottom: 5,\n            left: 3,\n          }}\n          barSize={24}\n        >\n          <CartesianGrid strokeDasharray=\"10 10\" />\n          <XAxis\n            dataKey=\"store_name\"\n            tickFormatter={formatXAxisLabel}\n            tickMargin={10}\n            tick={(props) => {\n              const { x, y, payload } = props\n              return (\n                <text x={x} y={y} textAnchor={'end'} fill=\"#666\">\n                  <tspan x={x} style={{ fontSize: 12 }}>\n                    {formatXAxisLabel(payload.value)}\n                  </tspan>\n                  <tspan\n                    x={x}\n                    dy=\"1.5em\"\n                    style={{\n                      fontSize: 10,\n                      whiteSpace: 'nowrap',\n                      paddingTop: '2px',\n                    }}\n                  >\n                    {data[payload.index].distance + ' kms'}\n                  </tspan>\n                </text>\n              )\n            }}\n          />\n          <YAxis\n            className=\"text-4-grey\"\n            style={{ fontSize: '12px', fontWeight: '500' }}\n            tickFormatter={(val) => {\n              if (val > 1000000) {\n                return `${val / 1000000}M`\n              }\n              if (val > 1000) {\n                return `${val / 1000}K`\n              }\n              return val\n            }}\n            label={{\n              value: 'CANNIBALISATION IN %',\n              angle: -90,\n              position: 'insideLeft',\n              dy: -5,\n              style: {\n                textAnchor: 'middle',\n                fontSize: '12px',\n                fontWeight: '500',\n              },\n            }}\n            domain={[0, 100]}\n          />\n          <Tooltip content={<CustomTooltipCannibalisation />} />\n          <Bar\n            dataKey=\"cannibalisation\"\n            fill=\"#F93232\"\n            radius={[4, 4, 4, 4]}\n            style={{ cursor: 'pointer' }}\n          />\n        </BarChart>\n      </ResponsiveContainer>\n    </div>\n  )\n}\n\nexport {\n  ReportSnippetGalleryView,\n  StoreInsightsSection,\n  StoreOverviewSection,\n  FootfallChartSection,\n  CannibalisationChartSection,\n}\n"],"names":["ReportSnippetGalleryView","data","onToggle","isOpen","galleryActiveIndex","setgalleryActiveIndex","isDataAvailable","handleNext","prevIndex","handlePrev","handleThumbnailClick","index","toggleGallery","React","Dialog","X","ChevronLeft","ChevronRight","item","CustomTooltipFootfall","active","payload","label","year","footfall","Typography","CustomTooltipCannibalisation","distance","cannibalisation","StoreInsightsSection","insights","StoreOverviewSection","highlights","trendBoxStyles","trendValueStyles","FootfallChartSection","ResponsiveContainer","BarChart","CartesianGrid","XAxis","YAxis","val","Tooltip","Bar","CannibalisationChartSection","formatXAxisLabel","barCount","maxLength","props","x","y"],"mappings":"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"}
+{"version":3,"file":"index.es116.js","sources":["../src/components/organisms/image-editor/image-editor-modal.tsx"],"sourcesContent":["import { Loader2, Save, X } from 'lucide-react'\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport { Button } from '@/components/atoms/button'\n\nimport { ImageEditorEngine, ImageEditorUiState } from './image-editor.types'\nimport { ImageEditorPortalContext } from './components/portal-context'\nimport { Panel } from './components/panel'\nimport { Ribbon } from './components/ribbon'\nimport { Stage, StageHandle } from './components/stage'\nimport { StatusBar } from './components/status-bar'\n\nexport interface ImageEditorModalProps {\n  engine: ImageEditorEngine\n  ui: ImageEditorUiState | null\n  isOpen: boolean\n  saveLabel: string\n}\n\nexport function ImageEditorModal({\n  engine,\n  ui,\n  isOpen,\n  saveLabel,\n}: ImageEditorModalProps) {\n  const rootRef = useRef<HTMLDivElement | null>(null)\n  const [rootEl, setRootEl] = useState<HTMLDivElement | null>(null)\n  const stageRef = useRef<StageHandle>(null)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const mountedRef = useRef(false)\n\n  useEffect(() => {\n    if (mountedRef.current) return\n    const s = stageRef.current\n    if (!s?.canvas || !s.overlay || !s.textEditor || !s.stage) return\n    engine.mount({\n      canvas: s.canvas,\n      overlay: s.overlay,\n      textEditor: s.textEditor,\n      stage: s.stage,\n    })\n    mountedRef.current = true\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ui != null])\n\n  useEffect(() => {\n    if (!isOpen || !rootRef.current) return\n    if (!rootRef.current.hasAttribute('tabindex'))\n      rootRef.current.setAttribute('tabindex', '-1')\n    const t = setTimeout(\n      () => rootRef.current?.focus({ preventScroll: true }),\n      0\n    )\n    return () => clearTimeout(t)\n  }, [isOpen])\n\n  useEffect(() => {\n    if (!isOpen) return\n    engine.refitStage()\n  }, [isOpen, engine])\n\n  if (!ui) return null\n\n  return (\n    <div\n      ref={(node) => {\n        rootRef.current = node\n        setRootEl(node)\n      }}\n      className=\"fixed inset-0 z-[2147483000] flex items-center justify-center bg-[rgba(24,22,18,.55)] backdrop-blur-sm\"\n      style={{\n        display: isOpen ? 'flex' : 'none',\n        pointerEvents: 'auto',\n      }}\n      onMouseDown={(e) => {\n        if (e.target === e.currentTarget && ui.closeOnBackdrop) engine.close()\n      }}\n    >\n      <ImageEditorPortalContext.Provider value={rootEl}>\n        <div className=\"image-editor-modal-panel flex flex-col overflow-hidden bg-light-2 shadow-2xl\">\n          <div className=\"flex items-center gap-3 border-b border-neutral-1 bg-light-3 px-4 py-3\">\n            <Button\n              variant=\"primary\"\n              size=\"sm\"\n              disabled={!ui.hasImage || ui.isLoadingImage || ui.isSaving}\n              onClick={engine.save}\n              className=\"w-auto\"\n              prefixIcon={\n                ui.isSaving ? (\n                  <Loader2 className=\"h-4 w-4 animate-spin\" />\n                ) : (\n                  <Save className=\"h-4 w-4\" />\n                )\n              }\n            >\n              {ui.isSaving ? 'Saving…' : saveLabel}\n            </Button>\n            <button\n              type=\"button\"\n              title=\"Close\"\n              onClick={() => engine.close()}\n              className=\"ml-auto flex h-[30px] w-[30px] items-center justify-center rounded-lg border border-neutral-1 bg-white text-light-4 hover:bg-light-3 hover:text-light-2\"\n            >\n              <X className=\"h-4 w-4\" />\n            </button>\n          </div>\n\n          <Ribbon\n            ui={ui}\n            engine={engine}\n            onOpenFile={() => fileInputRef.current?.click()}\n          />\n          <input\n            ref={fileInputRef}\n            type=\"file\"\n            accept=\"image/*\"\n            hidden\n            onChange={(e) => {\n              const file = e.target.files?.[0]\n              if (file) engine.openFile(file)\n              e.target.value = ''\n            }}\n          />\n\n          <div className=\"image-editor-stage-panel-wrap flex min-h-0 flex-1\">\n            <Stage\n              ref={stageRef}\n              ui={ui}\n              onChooseImage={() => fileInputRef.current?.click()}\n              onDropFile={(file) => engine.openFile(file)}\n            />\n            <Panel ui={ui} engine={engine} />\n          </div>\n\n          <StatusBar ui={ui} />\n        </div>\n      </ImageEditorPortalContext.Provider>\n    </div>\n  )\n}\n"],"names":["ImageEditorModal","engine","ui","isOpen","saveLabel","rootRef","useRef","rootEl","setRootEl","useState","stageRef","fileInputRef","mountedRef","useEffect","s","t","React","node","ImageEditorPortalContext","Button","Loader2","Save","X","Ribbon","file","Stage","Panel","StatusBar"],"mappings":"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"}

package/dist/index.es117.js

@@ -1,12 +1,17 @@
-import e from "react";
-import { FormSection as m } from "./index.es128.js";
-import { Typography as o } from "./index.es17.js";
-import { useFormStructure as c } from "./index.es129.js";
-const f = () => {
-  const { currentStep: t, totalSteps: l, currentStepIndex: a } = c();
-  return /* @__PURE__ */ e.createElement("section", { className: "flex flex-col gap-4 flex-1 overflow-scroll pb-16  [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']" }, /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ e.createElement(o, { variant: "h2" }, t.name), /* @__PURE__ */ e.createElement(o, { variant: "h3", className: "text-light-3" }, "Step ", a + 1, " of ", l)), /* @__PURE__ */ e.createElement("div", { className: "border-b border-light-1" }), t.sections.map((r) => /* @__PURE__ */ e.createElement(m, { key: r.id, section: r })));
-};
+function i() {
+  return typeof window > "u" ? null : window.ReactNativeWebView ?? null;
+}
+function n(t) {
+  const e = i();
+  if (e)
+    try {
+      e.postMessage(
+        JSON.stringify({ type: "IMAGE_EDITOR", payload: { data: { open: t } } })
+      );
+    } catch {
+    }
+}
 export {
-  f as FormStep
+  n as notifyNativeImageEditorState
 };
 //# sourceMappingURL=index.es117.js.map

package/dist/index.es117.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es117.js","sources":["../src/components/ui/form-renderer/components/form-step.tsx"],"sourcesContent":["// components/FormStep.tsx\nimport React from 'react'\nimport { FormSection } from './form-section'\nimport { useFormStructure } from '../context/form-structure'\nimport { Typography } from '@/components/atoms/typography'\n\nexport const FormStep: React.FC = () => {\n  const { currentStep, totalSteps, currentStepIndex } = useFormStructure()\n\n  return (\n    <section className=\"flex flex-col gap-4 flex-1 overflow-scroll pb-16  [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']\">\n      <div className=\"flex flex-col gap-1\">\n        <Typography variant=\"h2\">{currentStep.name}</Typography>\n        <Typography variant=\"h3\" className=\"text-light-3\">\n          Step {currentStepIndex + 1} of {totalSteps}\n        </Typography>\n      </div>\n      <div className=\"border-b border-light-1\" />\n      {currentStep.sections.map((section) => (\n        <FormSection key={section.id} section={section} />\n      ))}\n    </section>\n  )\n}\n"],"names":["FormStep","currentStep","totalSteps","currentStepIndex","useFormStructure","React","Typography","section","FormSection"],"mappings":";;;;AAMO,MAAMA,IAAqB,MAAM;AACtC,QAAM,EAAE,aAAAC,GAAa,YAAAC,GAAY,kBAAAC,EAAA,IAAqBC,EAAA;AAEtD,SACEC,gBAAAA,EAAA,cAAC,aAAQ,WAAU,uIAAA,mCAChB,OAAA,EAAI,WAAU,yBACbA,gBAAAA,EAAA,cAACC,GAAA,EAAW,SAAQ,KAAA,GAAML,EAAY,IAAK,GAC3CI,gBAAAA,EAAA,cAACC,KAAW,SAAQ,MAAK,WAAU,eAAA,GAAe,SAC1CH,IAAmB,GAAE,QAAKD,CAClC,CACF,mCACC,OAAA,EAAI,WAAU,2BAA0B,GACxCD,EAAY,SAAS,IAAI,CAACM,MACzBF,gBAAAA,EAAA,cAACG,GAAA,EAAY,KAAKD,EAAQ,IAAI,SAAAA,EAAA,CAAkB,CACjD,CACH;AAEJ;"}
+{"version":3,"file":"index.es117.js","sources":["../src/components/organisms/image-editor/native-bridge.ts"],"sourcesContent":["type ReactNativeWebViewBridge = { postMessage: (message: string) => void }\n\nfunction getNativeBridge(): ReactNativeWebViewBridge | null {\n  if (typeof window === 'undefined') return null\n  const host = window as unknown as {\n    ReactNativeWebView?: ReactNativeWebViewBridge\n  }\n  return host.ReactNativeWebView ?? null\n}\n\n/** No-op outside a React Native WebView. */\nexport function notifyNativeImageEditorState(open: boolean): void {\n  const bridge = getNativeBridge()\n  if (!bridge) return\n\n  try {\n    bridge.postMessage(\n      JSON.stringify({ type: 'IMAGE_EDITOR', payload: { data: { open } } })\n    )\n  } catch {\n    // noop\n  }\n}\n"],"names":["getNativeBridge","notifyNativeImageEditorState","open","bridge"],"mappings":"AAEA,SAASA,IAAmD;AAC1D,SAAI,OAAO,SAAW,MAAoB,OAC7B,OAGD,sBAAsB;AACpC;AAGO,SAASC,EAA6BC,GAAqB;AAChE,QAAMC,IAASH,EAAA;AACf,MAAKG;AAEL,QAAI;AACF,MAAAA,EAAO;AAAA,QACL,KAAK,UAAU,EAAE,MAAM,gBAAgB,SAAS,EAAE,MAAM,EAAE,MAAAD,EAAA,IAAO,CAAG;AAAA,MAAA;AAAA,IAExE,QAAQ;AAAA,IAER;AACF;"}