@ogc-maps/storybook-components 0.14.0 → 0.16.0

package/dist/Legend-CvBd-v0n.js

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

package/dist/PropertyList-0EonV_BQ.js

@@ -0,0 +1,33 @@
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+function p(i) {
+  return i == null ? "--" : typeof i == "boolean" ? i ? "Yes" : "No" : Array.isArray(i) ? i.map(p).join(", ") : typeof i == "object" ? JSON.stringify(i) : String(i);
+}
+function f({
+  properties: i,
+  fields: d,
+  labels: m,
+  maxItems: n,
+  density: e = "default",
+  className: u = ""
+}) {
+  const s = d ?? Object.keys(i), c = n != null ? s.slice(0, n) : s;
+  return e === "compact" ? /* @__PURE__ */ a("dl", { className: `mapui:m-0 mapui:text-xs ${u}`.trim(), children: c.map((t) => /* @__PURE__ */ r("div", { className: "mapui:flex mapui:gap-1 mapui:py-0.5", children: [
+    /* @__PURE__ */ r("dt", { className: "mapui:shrink-0 mapui:font-medium mapui:text-slate-500", children: [
+      (m == null ? void 0 : m[t]) ?? t,
+      ":"
+    ] }),
+    /* @__PURE__ */ a("dd", { className: "mapui:m-0 mapui:truncate mapui:text-slate-800", children: p(i[t]) })
+  ] }, t)) }) : /* @__PURE__ */ a(
+    "dl",
+    {
+      className: `mapui:m-0 mapui:grid mapui:grid-cols-2 mapui:gap-x-4 mapui:gap-y-2 mapui:text-sm ${u}`.trim(),
+      children: c.map((t) => /* @__PURE__ */ r("div", { className: "mapui:contents", children: [
+        /* @__PURE__ */ a("dt", { className: "mapui:break-words mapui:font-medium mapui:text-slate-500", children: (m == null ? void 0 : m[t]) ?? t }),
+        /* @__PURE__ */ a("dd", { className: "mapui:m-0 mapui:break-words mapui:text-slate-800", children: p(i[t]) })
+      ] }, t))
+    }
+  );
+}
+export {
+  f as P
+};