@guardian/interactive-component-library 0.2.0-rc1 → 0.2.0-rc2

package/dist/components/molecules/svg-map/layers/Polygon.d.ts

@@ -0,0 +1,9 @@
+export function Polygon({ id, features, fill, stroke, strokeWidth, zIndex, styles, }: {
+    id: any;
+    features: any;
+    fill?: any;
+    stroke?: any;
+    strokeWidth?: number;
+    zIndex?: number;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/svg-map/layers/Polygon.js

@@ -0,0 +1,75 @@
+import { jsx, Fragment } from "preact/jsx-runtime";
+import { useContext, useState, useEffect, useCallback } from "preact/hooks";
+import { MapContext } from "../context/MapContext.js";
+import { dynamicPropValue } from "../helpers/dynamicPropValue.js";
+import { geoContains } from "d3-geo";
+import Flatbush from "../../../../node_modules/.pnpm/flatbush@4.4.0/node_modules/flatbush/index.js";
+function Polygon({
+  id,
+  features,
+  fill = null,
+  stroke = null,
+  strokeWidth = 1,
+  zIndex = 0,
+  styles
+}) {
+  const context = useContext(MapContext);
+  const [searchIndex, setSearchIndex] = useState();
+  useEffect(() => {
+    if (!context.path) return;
+    let index = new Flatbush(features.length);
+    for (const feature of features) {
+      const bounds = context.path.bounds(feature);
+      index.add(
+        Math.floor(bounds[0][0]),
+        Math.floor(bounds[0][1]),
+        Math.ceil(bounds[1][0]),
+        Math.ceil(bounds[1][1])
+      );
+    }
+    index.finish();
+    setSearchIndex(index);
+  }, [context.path, features]);
+  const findFeatureAtPoint = useCallback(
+    ([x, y]) => {
+      const projectedPoint = context.projection.invert([x, y]);
+      const results = searchIndex.search(x, y, x, y);
+      let found = results[0];
+      results.forEach((idx) => {
+        const feature = features[idx];
+        if (geoContains(feature, projectedPoint)) {
+          found = idx;
+        }
+      });
+      return features[found];
+    },
+    [context, searchIndex, features]
+  );
+  useEffect(() => {
+    const layer = {
+      zIndex,
+      findFeatureAtPoint
+    };
+    context.registerLayer(layer);
+    return () => {
+      context.unregisterLayer(layer);
+    };
+  }, [context, zIndex, findFeatureAtPoint]);
+  return /* @__PURE__ */ jsx(Fragment, { children: features.map((d, index) => {
+    return /* @__PURE__ */ jsx(
+      "path",
+      {
+        id: dynamicPropValue(id, d, index),
+        className: dynamicPropValue(styles, d, index),
+        fill: dynamicPropValue(fill, d, index),
+        stroke: dynamicPropValue(stroke, d, index),
+        strokeWidth: dynamicPropValue(strokeWidth, d, index),
+        d: context.path(d)
+      },
+      index
+    );
+  }) });
+}
+export {
+  Polygon
+};

package/dist/components/molecules/svg-map/layers/Prerendered.d.ts

@@ -0,0 +1,3 @@
+export function Prerendered({ url }: {
+    url: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/svg-map/layers/Prerendered.js

@@ -0,0 +1,11 @@
+import { jsx } from "preact/jsx-runtime";
+import { useContext } from "preact/hooks";
+import { MapContext } from "../context/MapContext.js";
+function Prerendered({ url }) {
+  const context = useContext(MapContext);
+  const { width, height } = context.contentSize;
+  return /* @__PURE__ */ jsx("image", { width, height, href: url });
+}
+export {
+  Prerendered
+};

package/dist/components/molecules/svg-map/layers/compositionBorders.module.scss.js

@@ -0,0 +1,8 @@
+const path = "_path_1cwd5_9";
+const defaultStyles = {
+  path
+};
+export {
+  defaultStyles as default,
+  path
+};

package/dist/components/molecules/svg-map/layers/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Polygon';
+export * from './Line';
+export * from './CompositionBorders';
+export * from './Prerendered';
+export * from './Point';

package/dist/components/molecules/svg-map/layers/index.js

@@ -0,0 +1,12 @@
+import { Polygon } from "./Polygon.js";
+import { Line } from "./Line.js";
+import { CompositionBorders } from "./CompositionBorders.js";
+import { Prerendered } from "./Prerendered.js";
+import { Point } from "./Point.js";
+export {
+  CompositionBorders,
+  Line,
+  Point,
+  Polygon,
+  Prerendered
+};

package/dist/components/molecules/svg-map/renderers/SVGRenderer.d.ts

@@ -0,0 +1,3 @@
+export function SVGRenderer({ children }: {
+    children: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/svg-map/renderers/SVGRenderer.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { useContext } from "preact/hooks";
+import { MapContext } from "../context/MapContext.js";
+import { CompositionBorders } from "../layers/CompositionBorders.js";
+function SVGRenderer({ children }) {
+  const { id, config, size, selectedFeature, padding } = useContext(MapContext);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      id,
+      width: size.width,
+      height: size.height,
+      viewBox: `0 0 ${size.width} ${size.height}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      onClick: () => {
+        if (selectedFeature) {
+          selectedFeature.value = null;
+        }
+      },
+      children: /* @__PURE__ */ jsxs("g", { transform: `translate(${padding.left} ${padding.top})`, children: [
+        /* @__PURE__ */ jsx("g", { children }),
+        config.drawCompositionBorders && Object.prototype.hasOwnProperty.call(
+          config.projection,
+          "getCompositionBorders"
+        ) && /* @__PURE__ */ jsx(CompositionBorders, {})
+      ] })
+    }
+  );
+}
+export {
+  SVGRenderer
+};

package/dist/components/molecules/svg-map/style.module.css.js

@@ -0,0 +1,11 @@
+const container = "_container_9pdyv_1";
+const svg = "_svg_9pdyv_7";
+const styles = {
+  container,
+  svg
+};
+export {
+  container,
+  styles as default,
+  svg
+};

package/dist/components/molecules/table/index.d.ts

@@ -0,0 +1,7 @@
+export function Table({ columns, data, hideHeader, stickyHeader, styles, }: {
+    columns: any;
+    data: any;
+    hideHeader?: boolean;
+    stickyHeader?: boolean;
+    styles: any;
+}): import("preact").JSX.Element;

package/dist/components/molecules/table/index.js

@@ -0,0 +1,90 @@
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { useState } from "preact/hooks";
+import { useTable } from "./useTable.js";
+import { Chevron } from "../../particles/chevron/index.js";
+import defaultStyles from "./style.module.scss.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+function Table({
+  columns,
+  data,
+  hideHeader = false,
+  stickyHeader = false,
+  styles
+}) {
+  const [sortState, setSortState] = useState(() => {
+    const columnIndex = columns.findIndex((column) => {
+      if ("sort" in column) {
+        return true;
+      }
+      return false;
+    });
+    const ascending = columnIndex >= 0 ? columns[columnIndex].sort.ascending : false;
+    return {
+      columnIndex,
+      ascending
+    };
+  });
+  const table = useTable({ columns, data, sortState });
+  const sortByColumn = (index) => {
+    setSortState((currentState) => {
+      return {
+        columnIndex: index,
+        ascending: index === currentState.columnIndex ? !currentState.ascending : false
+      };
+    });
+  };
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsxs("table", { className: styles.table, cellSpacing: 0, cellPadding: 0, children: [
+    /* @__PURE__ */ jsx("thead", { className: hideHeader && styles.hideHeader, children: /* @__PURE__ */ jsx("tr", { children: table.columns.map((column, index) => {
+      var _a;
+      let columnStyle = mergeStyles(
+        styles.headerCell,
+        (_a = column.styles) == null ? void 0 : _a.headerCell
+      );
+      if (stickyHeader) {
+        columnStyle = mergeStyles(columnStyle, styles.stickyHeader);
+      }
+      return /* @__PURE__ */ jsx("th", { scope: "col", className: columnStyle, children: /* @__PURE__ */ jsx(
+        HeaderCell,
+        {
+          styles: mergeStyles(styles, column.styles),
+          onClick: () => sortByColumn(index),
+          ...column.headerProps
+        },
+        index
+      ) }, column.id);
+    }) }) }),
+    /* @__PURE__ */ jsx("tbody", { className: hideHeader && styles.hideHeaderNoBorder, children: table.rows.map((row) => {
+      return /* @__PURE__ */ jsx("tr", { className: styles.bodyRow, children: row.cells.map((cell) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: mergeStyles(
+              styles.bodyCell,
+              (_a = cell.column.styles) == null ? void 0 : _a.bodyCell
+            ),
+            children: cell.displayValue
+          },
+          cell.id
+        );
+      }) }, row.id);
+    }) })
+  ] });
+}
+function HeaderCell({ text, sortable, isSorted, styles, onClick }) {
+  if (!sortable) {
+    return text;
+  }
+  let direction = "down";
+  if ((isSorted == null ? void 0 : isSorted.ascending) === false) {
+    direction = "up";
+  }
+  return /* @__PURE__ */ jsxs("button", { onClick, className: styles.headerCellButton, children: [
+    /* @__PURE__ */ jsx("span", { children: text }),
+    /* @__PURE__ */ jsx(Chevron, { active: !!isSorted, direction })
+  ] });
+}
+export {
+  Table
+};

package/dist/components/molecules/table/style.module.scss.js

@@ -0,0 +1,29 @@
+const table = "_table_fhbur_9";
+const hideHeader = "_hideHeader_fhbur_20";
+const hideHeaderNoBorder = "_hideHeaderNoBorder_fhbur_29";
+const headerCell = "_headerCell_fhbur_33";
+const stickyHeader = "_stickyHeader_fhbur_42";
+const headerCellButton = "_headerCellButton_fhbur_49";
+const bodyRow = "_bodyRow_fhbur_58";
+const bodyCell = "_bodyCell_fhbur_62";
+const defaultStyles = {
+  table,
+  hideHeader,
+  hideHeaderNoBorder,
+  headerCell,
+  stickyHeader,
+  headerCellButton,
+  bodyRow,
+  bodyCell
+};
+export {
+  bodyCell,
+  bodyRow,
+  defaultStyles as default,
+  headerCell,
+  headerCellButton,
+  hideHeader,
+  hideHeaderNoBorder,
+  stickyHeader,
+  table
+};

package/dist/components/molecules/table/useTable.d.ts

@@ -0,0 +1,8 @@
+export function useTable({ columns, data, sortState }: {
+    columns: any;
+    data: any;
+    sortState: any;
+}): {
+    columns: any;
+    rows: any;
+};

package/dist/components/molecules/table/useTable.js

@@ -0,0 +1,128 @@
+import { useMemo } from "preact/hooks";
+const sortAscending = (accessor) => {
+  return (a, b) => {
+    const valueA = a[accessor];
+    const valueB = b[accessor];
+    if (valueA === null) {
+      return -1;
+    } else if (valueB === null) {
+      return 1;
+    }
+    if (valueA < valueB) return -1;
+    if (valueA > valueB) return 1;
+    return 0;
+  };
+};
+const sortDescending = (accessor) => {
+  return (a, b) => {
+    const valueA = a[accessor];
+    const valueB = b[accessor];
+    if (valueA === null) {
+      return 1;
+    } else if (valueB === null) {
+      return -1;
+    }
+    if (valueA > valueB) return -1;
+    if (valueA < valueB) return 1;
+    return 0;
+  };
+};
+function useTable({ columns, data, sortState }) {
+  const sortedData = useMemo(() => {
+    if (sortState.columnIndex < 0) {
+      return data;
+    }
+    const dataCopy = new Array(...data);
+    const column = columns[sortState.columnIndex];
+    const sortFunction = sortState.ascending ? sortAscending(column.accessor) : sortDescending(column.accessor);
+    dataCopy.sort(sortFunction);
+    return dataCopy;
+  }, [columns, data, sortState]);
+  const columnModels = useMemo(() => {
+    return columns.map((column, columnIndex) => {
+      const isSorted = sortState.columnIndex === columnIndex && sortState;
+      return new ColumnModel(columnIndex, column, isSorted);
+    });
+  }, [columns, sortState]);
+  const rowModels = useMemo(() => {
+    return sortedData.map((d, rowIndex) => {
+      const cells = columnModels.map((column, columnIndex) => {
+        return new CellModel(column, columnIndex, d, column.cell);
+      });
+      return new RowModel(rowIndex, cells);
+    });
+  }, [columnModels, sortedData]);
+  return {
+    columns: columnModels,
+    rows: rowModels
+  };
+}
+class ColumnModel {
+  constructor(index, definition, isSorted) {
+    this.index = index;
+    this.definition = definition;
+    this.isSorted = isSorted;
+    this.defaultValue = definition.defaultValue;
+  }
+  get id() {
+    return this.definition.id || this.header;
+  }
+  get accessor() {
+    return this.definition.accessor;
+  }
+  get header() {
+    return this.definition.header;
+  }
+  get headerProps() {
+    return {
+      text: this.header,
+      sortable: this.definition.sortable,
+      isSorted: this.isSorted,
+      ...this.headerCellStyle
+    };
+  }
+  get cell() {
+    return this.definition.cell;
+  }
+  get styles() {
+    return this.definition.styles;
+  }
+}
+class RowModel {
+  constructor(index, cells) {
+    this.index = index;
+    this.cells = cells;
+  }
+  get id() {
+    return this.index;
+  }
+}
+class CellModel {
+  constructor(column, columnIndex, row, cell) {
+    this.column = column;
+    this.columnIndex = columnIndex;
+    this.row = row;
+    this.cell = cell;
+  }
+  get id() {
+    return this.columnIndex;
+  }
+  get displayValue() {
+    if (this.cell) {
+      return this.cell(this.row);
+    }
+    if (!Object.prototype.hasOwnProperty.call(this.row, this.column.accessor)) {
+      if (this.column.defaultValue) {
+        return this.column.defaultValue.toString();
+      }
+      const rowData = JSON.stringify(this.row, null, 2);
+      throw new Error(
+        `Missing value for key ${this.column.accessor} in ${rowData}`
+      );
+    }
+    return this.row[this.column.accessor] !== null ? this.row[this.column.accessor].toString() : "null";
+  }
+}
+export {
+  useTable
+};

package/dist/components/molecules/tooltip/index.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @typedef {Object} Point
+ * @property {number} x
+ * @property {number} y
+ */
+/**
+ * @typedef {Object} Rect
+ * @property {number} x
+ * @property {number} y
+ * @property {number} width
+ * @property {number} height
+ */
+/**
+ * @typedef {Object} TooltipProps
+ * @property {Element} for - The element to which the tooltip should be positioned.
+ * @property {Point} [positionInTarget] - The position of the tooltip within the target element.
+ * @property {Rect} [touchRect] - The position of the touch event that triggered the tooltip.
+ * @property {boolean} [show] - Whether the tooltip should be shown or not.
+ * @property {Object} [styles] - Additional styles to be applied to the tooltip.
+ * @property {React.ReactNode} children - The content to be displayed inside the tooltip.
+ */
+/**
+ * A tooltip component that displays content at a specific position relative to a target element.
+ *
+ * @param {TooltipProps} props
+ * @returns {JSX.Element}
+ */
+export function Tooltip({ for: targetElement, touchRect, positionInTarget, show, styles, children, }: TooltipProps): JSX.Element;
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type TooltipProps = {
+    /**
+     * - The element to which the tooltip should be positioned.
+     */
+    /**
+     * - The element to which the tooltip should be positioned.
+     */
+    for: Element;
+    /**
+     * - The position of the tooltip within the target element.
+     */
+    /**
+     * - The position of the tooltip within the target element.
+     */
+    positionInTarget?: Point;
+    /**
+     * - The position of the touch event that triggered the tooltip.
+     */
+    /**
+     * - The position of the touch event that triggered the tooltip.
+     */
+    touchRect?: Rect;
+    /**
+     * - Whether the tooltip should be shown or not.
+     */
+    /**
+     * - Whether the tooltip should be shown or not.
+     */
+    show?: boolean;
+    /**
+     * - Additional styles to be applied to the tooltip.
+     */
+    /**
+     * - Additional styles to be applied to the tooltip.
+     */
+    styles?: any;
+    /**
+     * - The content to be displayed inside the tooltip.
+     */
+    /**
+     * - The content to be displayed inside the tooltip.
+     */
+    children: React.ReactNode;
+};

package/dist/components/molecules/tooltip/index.js

@@ -0,0 +1,117 @@
+import { jsx } from "preact/jsx-runtime";
+import { useState, useRef, useEffect, useLayoutEffect } from "preact/hooks";
+import { createPortal } from "preact/compat";
+import { rectsIntersect } from "../../../shared/helpers/geometry.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import defaultStyles from "./style.module.css.js";
+function Tooltip({
+  for: targetElement,
+  touchRect,
+  positionInTarget,
+  show = true,
+  styles,
+  children
+}) {
+  if (!targetElement) throw new Error("Target for tooltip cannot be undefined");
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [displayElement, setDisplayElement] = useState(null);
+  const tooltipRef = useRef();
+  styles = mergeStyles(defaultStyles, styles);
+  useEffect(() => {
+    setDisplayElement(document.querySelector("body"));
+    return () => {
+      setDisplayElement(null);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!tooltipRef.current) return;
+    const targetRect = targetElement.getBoundingClientRect();
+    if (positionInTarget) {
+      const newPosition = tooltipPositionForPoint({
+        targetRect,
+        positionInTarget,
+        tooltip: tooltipRef.current,
+        displayElement
+      });
+      setTooltipPosition(newPosition);
+    } else if (!positionInTarget) {
+      const newPosition = tooltipPositionForRect({
+        targetRect,
+        touchRect,
+        tooltip: tooltipRef.current,
+        displayElement
+      });
+      setTooltipPosition(newPosition);
+    }
+  }, [targetElement, positionInTarget, displayElement, tooltipRef, touchRect]);
+  if (!displayElement) return;
+  const fixedStyle = {
+    display: show ? "block" : "none",
+    position: "fixed",
+    left: tooltipPosition.x,
+    top: tooltipPosition.y,
+    zIndex: 100
+  };
+  const tooltip = /* @__PURE__ */ jsx("div", { ref: tooltipRef, className: styles.tooltip, style: fixedStyle, children });
+  return createPortal(tooltip, displayElement);
+}
+function tooltipPositionForPoint({
+  targetRect,
+  positionInTarget,
+  tooltip,
+  displayElement
+}) {
+  const newPosition = {
+    x: positionInTarget.x + targetRect.x,
+    y: positionInTarget.y + targetRect.y
+  };
+  const tooltipWidth = tooltip.offsetWidth;
+  const tooltipHeight = tooltip.offsetHeight;
+  const displayElementRect = displayElement.getBoundingClientRect();
+  if (newPosition.x + tooltipWidth > displayElementRect.right) {
+    newPosition.x -= tooltipWidth;
+  }
+  if (newPosition.y + tooltipHeight > displayElementRect.bottom) {
+    newPosition.y -= tooltipHeight;
+  }
+  if (newPosition.x <= displayElementRect.left) {
+    newPosition.x = displayElementRect.left + displayElementRect.width / 2 - tooltipWidth / 2;
+  }
+  return newPosition;
+}
+function tooltipPositionForRect({
+  targetRect,
+  touchRect = { x: 0, y: 0, width: 0, height: 0 },
+  tooltip,
+  displayElement
+}) {
+  const newPosition = {
+    x: targetRect.right,
+    y: targetRect.top
+  };
+  const tooltipWidth = tooltip.offsetWidth;
+  const tooltipHeight = tooltip.offsetHeight;
+  const tooltipRect = {
+    ...newPosition,
+    width: tooltipWidth,
+    height: tooltipHeight
+  };
+  if (rectsIntersect(tooltipRect, touchRect)) {
+    newPosition.x = touchRect.x + touchRect.width / 2;
+    newPosition.y = touchRect.y - tooltipHeight;
+  }
+  const displayElementRect = displayElement.getBoundingClientRect();
+  if (newPosition.x + tooltipWidth > displayElementRect.right) {
+    newPosition.x = targetRect.left - tooltipWidth;
+  }
+  if (newPosition.y - tooltipHeight < displayElementRect.top) {
+    newPosition.y = targetRect.bottom;
+  }
+  if (newPosition.x <= displayElementRect.left) {
+    newPosition.x = displayElementRect.left + displayElementRect.width / 2 - tooltipWidth / 2;
+  }
+  return newPosition;
+}
+export {
+  Tooltip
+};

package/dist/components/molecules/tooltip/style.module.css.js

@@ -0,0 +1,8 @@
+const tooltip = "_tooltip_11t5d_1";
+const defaultStyles = {
+  tooltip
+};
+export {
+  defaultStyles as default,
+  tooltip
+};

package/dist/components/molecules/topline-result/index.d.ts

@@ -0,0 +1,3 @@
+export const ToplineResult: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<{}> & {
+    ref?: import('preact').Ref<any>;
+}>;