@ogc-maps/storybook-components 0.9.0 → 0.10.0

package/dist/{CollapsibleControl-CGRNPpCw.js → CollapsibleControl-qo9daiD8.js}

@@ -5,14 +5,14 @@ function x({
   icon: t,
   label: i,
   defaultCollapsed: l = !0,
-  collapsed: u,
-  onToggle: p,
+  collapsed: p,
+  onToggle: u,
   children: o,
   className: n = ""
 }) {
-  const [c, d] = h(l), m = u !== void 0 ? u : c, s = () => {
+  const [c, d] = h(l), m = p !== void 0 ? p : c, s = () => {
     const r = !m;
-    p ? p(r) : d(r);
+    u ? u(r) : d(r);
   };
   return /* @__PURE__ */ e("div", { className: `mapui:relative mapui:w-10 mapui:h-10 ${n}`, children: [
     /* @__PURE__ */ a(
@@ -44,7 +44,7 @@ function x({
           }
         )
       ] }),
-      /* @__PURE__ */ a("div", { children: o })
+      /* @__PURE__ */ a("div", { className: "mapui:p-2", children: o })
     ] })
   ] });
 }

package/dist/ExportButton-BsNrOvRE.js

@@ -0,0 +1,25 @@
+import { jsx as e } from "react/jsx-runtime";
+function m({
+  onExport: r,
+  loading: a = !1,
+  disabled: o = !1,
+  className: t = ""
+}) {
+  const i = o || a, p = [
+    "mapui:inline-flex mapui:items-center mapui:gap-1.5 mapui:rounded mapui:border mapui:border-gray-300",
+    "mapui:bg-white mapui:px-3 mapui:py-1.5 mapui:text-sm mapui:text-gray-700 mapui:transition-colors",
+    i ? "mapui:cursor-not-allowed mapui:opacity-50" : "mapui:cursor-pointer hover:mapui:bg-gray-50 hover:mapui:border-gray-400"
+  ].join(" ");
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      className: `${p} ${t}`.trim(),
+      disabled: i,
+      onClick: () => !i && r(),
+      children: a ? "Exporting..." : "Export"
+    }
+  );
+}
+export {
+  m as E
+};

package/dist/Legend-BLWBzD7Y.js

@@ -0,0 +1,275 @@
+import { jsxs as o, jsx as a, Fragment as b } from "react/jsx-runtime";
+import { useState as N } from "react";
+import { BsArrowsAngleContract as C, BsArrowsAngleExpand as A } from "react-icons/bs";
+import { MdOutlineKeyboardArrowDown as k, MdOutlineKeyboardArrowRight as v } from "react-icons/md";
+const E = {
+  fill: "fill-opacity",
+  line: "line-opacity",
+  circle: "circle-opacity",
+  symbol: "icon-opacity"
+};
+function I(i) {
+  var s, p;
+  const e = (s = i.styles) == null ? void 0 : s[0];
+  if (!e) return 1;
+  const n = E[e.type];
+  if (!n) return 1;
+  const t = (p = e.paint) == null ? void 0 : p[n];
+  return typeof t == "number" ? t : 1;
+}
+function w({ color: i, shape: e }) {
+  const n = e ?? "square";
+  let t;
+  return n === "circle" ? t = /* @__PURE__ */ a(
+    "span",
+    {
+      className: "mapui:inline-block mapui:h-3 mapui:w-3 mapui:rounded-full",
+      style: { backgroundColor: i }
+    }
+  ) : n === "line" ? t = /* @__PURE__ */ a(
+    "span",
+    {
+      className: "mapui:inline-block mapui:h-0.5 mapui:w-4 mapui:rounded-full",
+      style: { backgroundColor: i }
+    }
+  ) : t = /* @__PURE__ */ a(
+    "span",
+    {
+      className: "mapui:inline-block mapui:h-3 mapui:w-3 mapui:rounded-sm",
+      style: { backgroundColor: i }
+    }
+  ), /* @__PURE__ */ a("span", { className: "mapui:inline-flex mapui:items-center mapui:justify-center mapui:w-5 mapui:shrink-0", children: t });
+}
+function L(i) {
+  return `linear-gradient(to right, ${i.map((e, n) => `${e.color} ${n / i.length * 100}% ${(n + 1) / i.length * 100}%`).join(", ")})`;
+}
+function B(i) {
+  return `linear-gradient(to right, ${i.map((e) => e.color).join(", ")})`;
+}
+function y(i) {
+  const e = i.trim();
+  let n, t, s;
+  if (/^#[0-9a-f]{3}$/i.test(e))
+    n = parseInt(e[1] + e[1], 16), t = parseInt(e[2] + e[2], 16), s = parseInt(e[3] + e[3], 16);
+  else if (/^#[0-9a-f]{6}$/i.test(e))
+    n = parseInt(e.slice(1, 3), 16), t = parseInt(e.slice(3, 5), 16), s = parseInt(e.slice(5, 7), 16);
+  else
+    return null;
+  const p = n / 255, r = t / 255, d = s / 255, h = Math.max(p, r, d), g = Math.min(p, r, d), f = h - g;
+  if (f === 0) return 0;
+  let l = 0;
+  return h === p ? l = ((r - d) / f + 6) % 6 : h === r ? l = (d - p) / f + 2 : l = (p - r) / f + 4, l * 60;
+}
+function j(i) {
+  return [...i].sort((e, n) => {
+    const t = y(e.color), s = y(n.color);
+    return t === null && s === null ? 0 : t === null ? 1 : s === null ? -1 : t - s;
+  });
+}
+function S({ legend: i, label: e, hasArrowColumn: n }) {
+  const { entries: t } = i, s = n ? /* @__PURE__ */ a("span", { className: "mapui:w-5 mapui:shrink-0" }) : null;
+  return t.length === 1 ? /* @__PURE__ */ o("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:min-w-0", children: [
+    s,
+    /* @__PURE__ */ a(w, { color: t[0].color, shape: t[0].shape }),
+    /* @__PURE__ */ a("span", { className: "mapui:text-gray-700 mapui:truncate", children: t[0].label || e })
+  ] }) : /* @__PURE__ */ o("div", { children: [
+    /* @__PURE__ */ a("div", { className: "mapui:mb-1 mapui:text-xs mapui:font-medium mapui:text-gray-600", children: e }),
+    /* @__PURE__ */ a("ul", { className: "mapui:m-0 mapui:list-none mapui:space-y-1 mapui:p-0 mapui:pl-1", children: t.map((p, r) => /* @__PURE__ */ o(
+      "li",
+      {
+        className: "mapui:flex mapui:items-center mapui:gap-2 mapui:min-w-0",
+        children: [
+          s,
+          /* @__PURE__ */ a(w, { color: p.color, shape: p.shape }),
+          /* @__PURE__ */ a("span", { className: "mapui:text-gray-700 mapui:truncate", children: p.label })
+        ]
+      },
+      `${p.label}-${r}`
+    )) })
+  ] });
+}
+function M({
+  legend: i,
+  label: e,
+  expanded: n,
+  onToggle: t,
+  hasArrowColumn: s
+}) {
+  const { entries: p } = i, r = i.showColorBar !== !1, d = i.showDisclosureArrow !== !1, h = i.showLabelsCollapsed ?? !1, g = p.filter((u, c, x) => x.findIndex(($) => $.color === u.color) === c), f = j(g), l = /* @__PURE__ */ a("span", { className: "mapui:inline-flex mapui:items-center mapui:justify-center mapui:w-5 mapui:shrink-0", children: /* @__PURE__ */ a("span", { className: "mapui:text-gray-400", children: n ? /* @__PURE__ */ a(k, {}) : /* @__PURE__ */ a(v, {}) }) }), m = /* @__PURE__ */ o(b, { children: [
+    s && (d ? l : /* @__PURE__ */ a("span", { className: "mapui:w-5 mapui:shrink-0" })),
+    r ? /* @__PURE__ */ a(
+      "div",
+      {
+        className: "mapui:h-3 mapui:w-5 mapui:rounded-sm mapui:shrink-0",
+        style: { background: L(f) }
+      }
+    ) : !s && d ? l : /* @__PURE__ */ a("span", { className: "mapui:w-5 mapui:shrink-0" }),
+    /* @__PURE__ */ a("span", { className: "mapui:truncate", children: e })
+  ] });
+  return /* @__PURE__ */ o("div", { children: [
+    d ? /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: "mapui:flex mapui:items-center mapui:gap-2 mapui:bg-transparent mapui:border-none mapui:p-0 mapui:cursor-pointer mapui:text-left mapui:text-gray-700 mapui:text-sm mapui:font-medium mapui:min-w-0",
+        onClick: t,
+        "aria-expanded": n,
+        children: m
+      }
+    ) : /* @__PURE__ */ a("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:text-gray-700 mapui:text-sm mapui:font-medium mapui:min-w-0", children: m }),
+    (n || h) && /* @__PURE__ */ a("ul", { className: `mapui:m-0 mapui:mt-1 mapui:list-none mapui:space-y-1 mapui:p-0 mapui:max-h-48 mapui:overflow-y-auto${d ? " mapui:ml-7" : ""}`, children: p.map((u, c) => /* @__PURE__ */ o(
+      "li",
+      {
+        className: "mapui:flex mapui:items-center mapui:gap-2 mapui:min-w-0",
+        children: [
+          /* @__PURE__ */ a(w, { color: u.color, shape: u.shape }),
+          /* @__PURE__ */ a("span", { className: "mapui:text-gray-700 mapui:truncate mapui:text-xs", children: u.label })
+        ]
+      },
+      `${u.label}-${c}`
+    )) })
+  ] });
+}
+function D({
+  legend: i,
+  label: e,
+  expanded: n,
+  onToggle: t,
+  hasArrowColumn: s
+}) {
+  const { entries: p, gradientProperty: r } = i, d = i.showColorBar !== !1, h = i.showDisclosureArrow !== !1, g = /* @__PURE__ */ a("span", { className: "mapui:inline-flex mapui:items-center mapui:justify-center mapui:w-5 mapui:shrink-0", children: /* @__PURE__ */ a("span", { className: "mapui:text-gray-400", children: n ? /* @__PURE__ */ a(k, {}) : /* @__PURE__ */ a(v, {}) }) }), f = /* @__PURE__ */ o(b, { children: [
+    s && (h ? g : /* @__PURE__ */ a("span", { className: "mapui:w-5 mapui:shrink-0" })),
+    d ? /* @__PURE__ */ a(
+      "div",
+      {
+        className: "mapui:h-3 mapui:w-5 mapui:rounded-sm mapui:shrink-0",
+        style: { background: B(p) }
+      }
+    ) : !s && h ? g : /* @__PURE__ */ a("span", { className: "mapui:w-5 mapui:shrink-0" }),
+    /* @__PURE__ */ a("span", { className: "mapui:truncate", children: e })
+  ] });
+  return /* @__PURE__ */ o("div", { children: [
+    h ? /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: "mapui:flex mapui:items-center mapui:gap-2 mapui:bg-transparent mapui:border-none mapui:p-0 mapui:cursor-pointer mapui:text-left mapui:text-gray-700 mapui:text-sm mapui:font-medium",
+        onClick: t,
+        "aria-expanded": n,
+        children: f
+      }
+    ) : /* @__PURE__ */ a("div", { className: "mapui:flex mapui:items-center mapui:gap-2 mapui:text-gray-700 mapui:text-sm mapui:font-medium", children: f }),
+    n && /* @__PURE__ */ o(b, { children: [
+      r && /* @__PURE__ */ a("div", { className: `mapui:mt-1 mapui:text-xs mapui:font-medium mapui:text-gray-600${h ? " mapui:ml-7" : ""}`, children: r }),
+      /* @__PURE__ */ a("ul", { className: `mapui:m-0 mapui:mt-1 mapui:list-none mapui:space-y-1 mapui:p-0${h ? " mapui:ml-7" : ""}`, children: p.map((l, m) => /* @__PURE__ */ o(
+        "li",
+        {
+          className: "mapui:flex mapui:items-center mapui:gap-2 mapui:min-w-0",
+          children: [
+            /* @__PURE__ */ a(w, { color: l.color, shape: l.shape }),
+            /* @__PURE__ */ a("span", { className: "mapui:text-gray-700 mapui:truncate mapui:text-xs", children: l.label })
+          ]
+        },
+        `${l.label}-${m}`
+      )) })
+    ] })
+  ] });
+}
+function T({
+  layerId: i,
+  opacity: e,
+  onChange: n,
+  hasArrowColumn: t
+}) {
+  return /* @__PURE__ */ o("div", { className: `mapui:flex mapui:items-center mapui:gap-1.5 mapui:mt-0.5 ${t ? "mapui:ml-14" : "mapui:ml-7"}`, children: [
+    /* @__PURE__ */ a(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        value: e,
+        onChange: (s) => n(i, parseFloat(s.target.value)),
+        className: "range-sm mapui:w-14"
+      }
+    ),
+    /* @__PURE__ */ o("span", { className: "mapui:text-[9px] mapui:text-gray-400 mapui:w-6 mapui:text-right mapui:tabular-nums", children: [
+      Math.round(e * 100),
+      "%"
+    ] })
+  ] });
+}
+function F({ layers: i, visibleLayerIds: e, onOpacityChange: n, className: t }) {
+  const [s, p] = N(/* @__PURE__ */ new Set()), [r, d] = N(!1), h = i.filter((m) => e.includes(m.id));
+  function g(m) {
+    p((u) => {
+      const c = new Set(u);
+      return c.has(m) ? c.delete(m) : c.add(m), c;
+    });
+  }
+  const f = h.filter((m) => m.legend !== void 0);
+  if (f.length === 0)
+    return null;
+  const l = f.some((m) => {
+    const u = m.legend, c = u.displayMode ?? "simple", x = u.showDisclosureArrow !== !1;
+    return c === "gradient" || c === "categorical" ? x && u.showColorBar !== !1 : !1;
+  });
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: `mapui:rounded-lg mapui:bg-white mapui:p-3 mapui:shadow-md mapui:text-sm${t ? ` ${t}` : ""}`,
+      children: [
+        /* @__PURE__ */ o("div", { className: "mapui:flex mapui:items-center mapui:justify-between mapui:mb-2", children: [
+          /* @__PURE__ */ a("h3", { className: "mapui:m-0 mapui:text-xs mapui:font-semibold mapui:uppercase mapui:tracking-wide mapui:text-gray-500", children: "Legend" }),
+          n && /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              className: "mapui:bg-transparent mapui:border-none mapui:p-0 mapui:cursor-pointer mapui:text-gray-400 hover:mapui:text-gray-600 mapui:text-sm",
+              onClick: () => d((m) => !m),
+              "aria-label": r ? "Collapse legend" : "Expand legend",
+              children: r ? /* @__PURE__ */ a(C, {}) : /* @__PURE__ */ a(A, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("ul", { className: `mapui:m-0 mapui:list-none mapui:p-0 ${r ? "mapui:space-y-1.5" : "mapui:space-y-2"}`, children: f.map((m) => {
+          const u = m.legend, c = u.displayMode ?? "simple", x = r || s.has(m.id);
+          return /* @__PURE__ */ o("li", { children: [
+            c === "categorical" ? /* @__PURE__ */ a(
+              M,
+              {
+                legend: u,
+                label: m.label,
+                expanded: x,
+                onToggle: () => g(m.id),
+                hasArrowColumn: l
+              }
+            ) : c === "gradient" ? /* @__PURE__ */ a(
+              D,
+              {
+                legend: u,
+                label: m.label,
+                expanded: x,
+                onToggle: () => g(m.id),
+                hasArrowColumn: l
+              }
+            ) : /* @__PURE__ */ a(S, { legend: u, label: m.label, hasArrowColumn: l }),
+            r && n && /* @__PURE__ */ a(
+              T,
+              {
+                layerId: m.id,
+                opacity: I(m),
+                onChange: n,
+                hasArrowColumn: l
+              }
+            )
+          ] }, m.id);
+        }) })
+      ]
+    }
+  );
+}
+export {
+  F as L
+};