@ttoss/geovis-workspace 0.1.0

package/dist/index.mjs

@@ -0,0 +1,674 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { GeoVisCanvas, GeoVisProvider } from "@ttoss/geovis";
+import { Box, Flex, Heading, IconButton, Link, Text } from "@ttoss/ui";
+import { defineMessages, useI18n } from "@ttoss/react-i18n";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/context/GeovisWorkspaceContext.ts
+var GeovisWorkspaceContext = React.createContext(void 0);
+
+//#endregion
+//#region src/hooks/useGeovisWorkspace.ts
+/**
+* Consumes the GeovisWorkspace context.
+* Must be used inside a GeovisWorkspaceProvider.
+*/
+var useGeovisWorkspace = () => {
+  const context = React.useContext(GeovisWorkspaceContext);
+  if (!context) throw new Error("useGeovisWorkspace must be used within a GeovisWorkspaceProvider");
+  return context;
+};
+
+//#endregion
+//#region src/messages.ts
+var messages = defineMessages({
+  detailsTitle: {
+    id: "35Dt1p",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Details"
+    }]
+  },
+  noSelection: {
+    id: "cculTE",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Select an item to view details."
+    }]
+  },
+  openMenu: {
+    id: "ebJRt+",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Open menu"
+    }]
+  },
+  closeMenu: {
+    id: "ncOMIu",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Close menu"
+    }]
+  },
+  openDetails: {
+    id: "IU+fm9",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Open details"
+    }]
+  },
+  closeDetails: {
+    id: "j3dtho",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Close details"
+    }]
+  }
+});
+
+//#endregion
+//#region src/components/MenuButton.tsx
+/**
+* Internal full-width menu item used inside the left sidebar groups.
+* Highlights itself when `active` is true.
+*/
+var MenuButton = ({
+  label,
+  active,
+  onClick
+}) => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "button",
+    type: "button",
+    "aria-pressed": active,
+    "data-active": active ? "" : void 0,
+    onClick,
+    sx: {
+      display: "block",
+      width: "100%",
+      marginBottom: "2px",
+      paddingBlock: "7px",
+      paddingInline: "10px",
+      border: "none",
+      borderRadius: "6px",
+      cursor: "pointer",
+      textAlign: "left",
+      fontFamily: "body",
+      fontSize: "14px",
+      lineHeight: "1.4",
+      letterSpacing: "0.01em",
+      fontWeight: active ? 600 : 500,
+      color: active ? "#4338ca" : "#374151",
+      backgroundColor: active ? "#eef2ff" : "transparent",
+      transition: "background-color 0.15s ease, color 0.15s ease",
+      "&:hover": {
+        backgroundColor: active ? "#e0e7ff" : "#f3f4f6",
+        color: "#4338ca"
+      },
+      "&:focus-visible": {
+        outline: "2px solid #6366f1",
+        outlineOffset: "1px"
+      }
+    },
+    children: label
+  });
+};
+
+//#endregion
+//#region src/components/LeftSidebar.tsx
+/**
+* Internal left sidebar that renders the menu groups defined in the config.
+* Reads and writes the per-group selection via GeovisWorkspaceContext.
+*/
+var LeftSidebar = () => {
+  const {
+    intl: {
+      formatMessage
+    }
+  } = useI18n();
+  const {
+    config,
+    selection,
+    setSelection,
+    setLeftSidebarOpen
+  } = useGeovisWorkspace();
+  const menus = config.leftSidebar?.menus ?? [];
+  return /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      position: "relative",
+      flexDirection: "column",
+      gap: "5",
+      width: "256px",
+      height: "100%",
+      flexShrink: 0,
+      paddingX: "4",
+      paddingTop: "5",
+      paddingBottom: "4",
+      backgroundColor: "#ffffff",
+      borderRight: "1px solid #e5e7eb",
+      overflowY: "auto"
+    },
+    children: [/* @__PURE__ */jsx(IconButton, {
+      icon: "lucide:chevron-left",
+      "aria-label": formatMessage(messages.closeMenu),
+      onClick: event => {
+        event.currentTarget.blur();
+        setLeftSidebarOpen({
+          open: false
+        });
+      },
+      sx: {
+        position: "absolute",
+        top: "3",
+        right: "3",
+        color: "#6b7280",
+        backgroundColor: "transparent",
+        borderRadius: "md",
+        "&:hover": {
+          color: "#4338ca"
+        }
+      }
+    }), menus.map(menu => {
+      return /* @__PURE__ */jsxs(Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [/* @__PURE__ */jsx(Text, {
+          sx: {
+            fontSize: "xs",
+            fontWeight: "semibold",
+            color: "#6b7280",
+            textTransform: "uppercase",
+            letterSpacing: "0.08em",
+            marginBottom: "2"
+          },
+          children: menu.title
+        }), menu.items.map(item => {
+          return /* @__PURE__ */jsx(MenuButton, {
+            label: item.label,
+            active: selection[menu.id] === item.value,
+            onClick: () => {
+              setSelection({
+                menuId: menu.id,
+                value: item.value
+              });
+            }
+          }, item.value);
+        })]
+      }, menu.id);
+    })]
+  });
+};
+
+//#endregion
+//#region src/components/RightSidebar.tsx
+/** Renders one data-source entry, as an external link when `href` is set. */
+var SourceItem = ({
+  label,
+  href
+}) => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "li",
+    sx: {
+      fontSize: "xs",
+      color: "#6b7280",
+      lineHeight: "base"
+    },
+    children: href ? /* @__PURE__ */jsx(Link, {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        color: "#4338ca",
+        textDecoration: "underline"
+      },
+      children: label
+    }) : label
+  });
+};
+/**
+* Color legend panel driven by `rightSidebar.legendWithColor`: an optional
+* description, a swatch-per-class legend and a list of data sources. Each block
+* renders only when present in the spec.
+*/
+var LegendWithColorPanel = ({
+  description,
+  legend,
+  sources
+}) => {
+  return /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      flexDirection: "column",
+      gap: "4"
+    },
+    children: [description && /* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "sm",
+        color: "#374151",
+        lineHeight: "base"
+      },
+      children: description
+    }), legend && /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        flexDirection: "column",
+        gap: "2"
+      },
+      children: [legend.title && /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "xs",
+          fontWeight: "semibold",
+          textTransform: "uppercase",
+          letterSpacing: "0.08em",
+          color: "#6b7280"
+        },
+        children: legend.title
+      }), /* @__PURE__ */jsx(Flex, {
+        sx: {
+          flexDirection: "column",
+          gap: "1"
+        },
+        children: legend.items.map(item => {
+          return /* @__PURE__ */jsxs(Flex, {
+            sx: {
+              alignItems: "center",
+              gap: "2"
+            },
+            children: [/* @__PURE__ */jsx(Box, {
+              sx: {
+                width: "20px",
+                height: "14px",
+                borderRadius: "2px",
+                flexShrink: 0,
+                backgroundColor: item.color
+              }
+            }), /* @__PURE__ */jsx(Text, {
+              sx: {
+                fontSize: "xs",
+                color: "#374151"
+              },
+              children: item.label
+            })]
+          }, item.label);
+        })
+      })]
+    }), sources && /* @__PURE__ */jsxs(Box, {
+      children: [sources.title && /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "sm",
+          fontWeight: "semibold",
+          color: "#6b7280"
+        },
+        children: sources.title
+      }), /* @__PURE__ */jsx(Box, {
+        as: "ul",
+        sx: {
+          paddingLeft: "4",
+          marginTop: "1",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1"
+        },
+        children: sources.items.map(source => {
+          return /* @__PURE__ */jsx(SourceItem, {
+            ...source
+          }, source.label);
+        })
+      })]
+    })]
+  });
+};
+/**
+* Internal right sidebar. Shows the config-defined title and an optional color
+* legend panel. Rendered only when the config defines a rightSidebar.
+*/
+var RightSidebar = () => {
+  const {
+    intl: {
+      formatMessage
+    }
+  } = useI18n();
+  const {
+    config,
+    setRightSidebarOpen
+  } = useGeovisWorkspace();
+  const legendWithColor = config.rightSidebar?.legendWithColor;
+  return /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      position: "relative",
+      flexDirection: "column",
+      gap: "4",
+      width: "256px",
+      height: "100%",
+      flexShrink: 0,
+      paddingX: "4",
+      paddingTop: "5",
+      paddingBottom: "4",
+      backgroundColor: "#ffffff",
+      borderLeft: "1px solid #e5e7eb",
+      overflowY: "auto"
+    },
+    children: [/* @__PURE__ */jsx(IconButton, {
+      icon: "lucide:chevron-right",
+      "aria-label": formatMessage(messages.closeDetails),
+      onClick: event => {
+        event.currentTarget.blur();
+        setRightSidebarOpen({
+          open: false
+        });
+      },
+      sx: {
+        position: "absolute",
+        top: "3",
+        right: "3",
+        color: "#6b7280",
+        backgroundColor: "transparent",
+        borderRadius: "md",
+        "&:hover": {
+          color: "#4338ca"
+        }
+      }
+    }), /* @__PURE__ */jsx(Heading, {
+      as: "h3",
+      sx: {
+        margin: 0,
+        fontSize: "xs",
+        fontWeight: "semibold",
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        color: "#6b7280"
+      },
+      children: config.rightSidebar?.title ?? formatMessage(messages.detailsTitle)
+    }), legendWithColor && /* @__PURE__ */jsx(LegendWithColorPanel, {
+      ...legendWithColor
+    })]
+  });
+};
+
+//#endregion
+//#region src/components/Layout.tsx
+/**
+* Slide-in overlay that hosts a sidebar on the given side. The sidebar fills
+* the height and is positioned absolutely so it does not push the children.
+*/
+var SidebarOverlay = ({
+  side,
+  open,
+  children
+}) => {
+  const hiddenTransform = side === "left" ? "translateX(-100%)" : "translateX(100%)";
+  return /* @__PURE__ */jsx(Box, {
+    "aria-hidden": !open,
+    sx: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      [side]: 0,
+      zIndex: 2,
+      transform: open ? "translateX(0)" : hiddenTransform,
+      opacity: open ? 1 : 0,
+      visibility: open ? "visible" : "hidden",
+      boxShadow: open ? "lg" : "none",
+      transition: "transform 0.25s ease-in-out, opacity 0.2s ease-in-out, visibility 0.25s ease-in-out, box-shadow 0.25s ease-in-out"
+    },
+    children
+  });
+};
+/**
+* Floating button that opens the left sidebar. Hidden while it is open.
+*/
+var OpenLeftSidebarButton = () => {
+  const {
+    intl: {
+      formatMessage
+    }
+  } = useI18n();
+  const {
+    isLeftSidebarOpen,
+    setLeftSidebarOpen
+  } = useGeovisWorkspace();
+  return /* @__PURE__ */jsx(IconButton, {
+    icon: "lucide:sliders-horizontal",
+    "aria-label": formatMessage(messages.openMenu),
+    onClick: event => {
+      event.currentTarget.blur();
+      setLeftSidebarOpen({
+        open: true
+      });
+    },
+    "aria-hidden": isLeftSidebarOpen,
+    tabIndex: isLeftSidebarOpen ? -1 : 0,
+    sx: {
+      position: "absolute",
+      top: "4",
+      left: "4",
+      zIndex: 1,
+      color: "display.text.primary.default",
+      backgroundColor: "display.background.primary.default",
+      border: "sm",
+      borderColor: "display.border.muted.default",
+      boxShadow: "md",
+      opacity: isLeftSidebarOpen ? 0 : 1,
+      visibility: isLeftSidebarOpen ? "hidden" : "visible",
+      pointerEvents: isLeftSidebarOpen ? "none" : "auto",
+      transition: "opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",
+      "&:hover": {
+        backgroundColor: "display.background.secondary.default"
+      }
+    }
+  });
+};
+/**
+* Floating button that opens the right sidebar. Sits vertically centered on
+* the right edge and is hidden while the sidebar is open.
+*/
+var OpenRightSidebarButton = () => {
+  const {
+    intl: {
+      formatMessage
+    }
+  } = useI18n();
+  const {
+    isRightSidebarOpen,
+    setRightSidebarOpen
+  } = useGeovisWorkspace();
+  return /* @__PURE__ */jsx(IconButton, {
+    icon: "lucide:chevrons-left",
+    "aria-label": formatMessage(messages.openDetails),
+    onClick: event => {
+      event.currentTarget.blur();
+      setRightSidebarOpen({
+        open: true
+      });
+    },
+    "aria-hidden": isRightSidebarOpen,
+    tabIndex: isRightSidebarOpen ? -1 : 0,
+    sx: {
+      position: "absolute",
+      top: "50%",
+      right: 0,
+      transform: "translateY(-50%)",
+      zIndex: 1,
+      borderTopLeftRadius: "md",
+      borderBottomLeftRadius: "md",
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      color: "display.text.primary.default",
+      backgroundColor: "display.background.primary.default",
+      border: "sm",
+      borderColor: "display.border.muted.default",
+      boxShadow: "md",
+      opacity: isRightSidebarOpen ? 0 : 1,
+      visibility: isRightSidebarOpen ? "hidden" : "visible",
+      pointerEvents: isRightSidebarOpen ? "none" : "auto",
+      transition: "opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",
+      "&:hover": {
+        backgroundColor: "display.background.secondary.default"
+      }
+    }
+  });
+};
+/**
+* Internal layout shell. The children fill the whole area, and each sidebar
+* (and its floating reopen button) is rendered only when the corresponding
+* section is defined in the spec.
+*/
+var Layout = ({
+  children
+}) => {
+  const {
+    config,
+    isLeftSidebarOpen,
+    isRightSidebarOpen
+  } = useGeovisWorkspace();
+  const hasLeftSidebar = config.leftSidebar !== void 0;
+  const hasRightSidebar = config.rightSidebar !== void 0;
+  return /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      position: "relative",
+      overflow: "hidden",
+      minHeight: "440px",
+      border: "sm",
+      borderColor: "display.border.muted.default",
+      borderRadius: "lg",
+      backgroundColor: "display.background.primary.default"
+    },
+    children: [/* @__PURE__ */jsx(Flex, {
+      sx: {
+        flex: 1
+      },
+      children
+    }), hasLeftSidebar && /* @__PURE__ */jsx(SidebarOverlay, {
+      side: "left",
+      open: isLeftSidebarOpen,
+      children: /* @__PURE__ */jsx(LeftSidebar, {})
+    }), hasRightSidebar && /* @__PURE__ */jsx(SidebarOverlay, {
+      side: "right",
+      open: isRightSidebarOpen,
+      children: /* @__PURE__ */jsx(RightSidebar, {})
+    }), hasLeftSidebar && /* @__PURE__ */jsx(OpenLeftSidebarButton, {}), hasRightSidebar && /* @__PURE__ */jsx(OpenRightSidebarButton, {})]
+  });
+};
+
+//#endregion
+//#region src/GeovisWorkspaceProvider.tsx
+/**
+* Builds the initial selection by reading the `defaultValue` of every menu
+* group in the config. Use it to seed the parent's selection state when
+* controlling the workspace.
+*/
+var getInitialSelection = ({
+  config
+}) => {
+  const selection = {};
+  const menus = config.leftSidebar?.menus ?? [];
+  for (const menu of menus) selection[menu.id] = menu.defaultValue;
+  return selection;
+};
+/**
+* Provides shared state for GeovisWorkspace and all internal components.
+* Manages the per-group selection (controlled or uncontrolled) and the sidebar
+* open state, exposing them via useGeovisWorkspace.
+*/
+var GeovisWorkspaceProvider = ({
+  children,
+  config,
+  selection,
+  onSelectionChange
+}) => {
+  const isControlled = selection !== void 0;
+  const [internalSelection, setInternalSelection] = React.useState(() => {
+    return getInitialSelection({
+      config
+    });
+  });
+  const currentSelection = isControlled ? selection : internalSelection;
+  const [isLeftSidebarOpen, setIsLeftSidebarOpen] = React.useState(false);
+  const [isRightSidebarOpen, setIsRightSidebarOpen] = React.useState(false);
+  const setSelection = React.useCallback(({
+    menuId,
+    value
+  }) => {
+    const next = {
+      ...currentSelection,
+      [menuId]: value
+    };
+    if (!isControlled) setInternalSelection(next);
+    onSelectionChange?.(next);
+  }, [currentSelection, isControlled, onSelectionChange]);
+  const setLeftSidebarOpen = React.useCallback(({
+    open
+  }) => {
+    setIsLeftSidebarOpen(open);
+  }, []);
+  const setRightSidebarOpen = React.useCallback(({
+    open
+  }) => {
+    setIsRightSidebarOpen(open);
+  }, []);
+  const value = React.useMemo(() => {
+    return {
+      config,
+      selection: currentSelection,
+      setSelection,
+      isLeftSidebarOpen,
+      setLeftSidebarOpen,
+      isRightSidebarOpen,
+      setRightSidebarOpen
+    };
+  }, [config, currentSelection, setSelection, isLeftSidebarOpen, setLeftSidebarOpen, isRightSidebarOpen, setRightSidebarOpen]);
+  return /* @__PURE__ */jsx(GeovisWorkspaceContext.Provider, {
+    value,
+    children
+  });
+};
+
+//#endregion
+//#region src/GeovisWorkspace.tsx
+/**
+* Renders the GeoVis map for the workspace inside the main content area. Kept
+* as an internal component so the map fills the layout's main slot and mounts
+* inside the provider tree.
+*/
+var GeovisWorkspaceMap = ({
+  visualizationSpec
+}) => {
+  return /* @__PURE__ */jsx(Box, {
+    sx: {
+      position: "relative",
+      flex: 1,
+      display: "flex",
+      minHeight: "440px"
+    },
+    children: /* @__PURE__ */jsx(GeoVisProvider, {
+      spec: visualizationSpec,
+      children: /* @__PURE__ */jsx(GeoVisCanvas, {
+        style: {
+          width: "100%",
+          height: "100%"
+        }
+      })
+    })
+  });
+};
+var GeovisWorkspace = ({
+  config,
+  visualizationSpec,
+  variables,
+  onVariableChange
+}) => {
+  return /* @__PURE__ */jsx(GeovisWorkspaceProvider, {
+    config,
+    selection: variables,
+    onSelectionChange: onVariableChange,
+    children: /* @__PURE__ */jsx(Layout, {
+      children: /* @__PURE__ */jsx(GeovisWorkspaceMap, {
+        visualizationSpec
+      })
+    })
+  });
+};
+
+//#endregion
+export { GeovisWorkspace, GeovisWorkspaceProvider, getInitialSelection, useGeovisWorkspace };