@guardian/interactive-component-library 0.3.1 → 0.3.2

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

@@ -0,0 +1,121 @@
+import { jsx } from "preact/jsx-runtime";
+import { geoAlbers, geoMercator } from "d3-geo";
+import { geoAlbersUk } from "d3-composite-projections";
+import { SVGMapProvider } from "./context/SVGMapProvider.js";
+import { SVGRenderer } from "./renderers/SVGRenderer.js";
+import { cloneElement } from "preact";
+import { useRef, useState, useLayoutEffect, useImperativeHandle, useMemo } from "preact/hooks";
+import { forwardRef } from "preact/compat";
+import { useThrowIfNonLayerChildren } from "./hooks/useThrowIfNonLayerChildren.js";
+import { useContainerSize } from "../../../shared/hooks/useContainerSize.js";
+import styles from "./style.module.css.js";
+import "./context/MapContext.js";
+import "flatbush";
+const _Projection = {
+  geoAlbersUKComposite: geoAlbersUk(),
+  geoAlbersEngland: geoAlbers().center([0, 52.7]).rotate([1.1743, 0]).parallels([50, 54]),
+  geoMercator: geoMercator()
+};
+const MapConfiguration = {
+  UKComposite: {
+    projection: _Projection.geoAlbersUKComposite,
+    bounds: [
+      [-8.642194417322951, 49.88234469492934],
+      [1.7683086664999994, 60.8456995072]
+    ],
+    drawCompositionBorders: true,
+    drawToCanvas: false
+  },
+  England: {
+    projection: _Projection.geoAlbersEngland,
+    bounds: [
+      [-6.41866730264044, 49.8647926027119],
+      [1.76370537625026, 55.8111151140706]
+    ],
+    drawCompositionBorders: false,
+    drawToCanvas: false
+  },
+  London: {
+    projection: geoMercator(),
+    bounds: [
+      [-0.510356073504132, 51.2867586289553],
+      [0.334043866981608, 51.6918768002741]
+    ],
+    drawCompositionBorders: false,
+    drawToCanvas: false
+  }
+};
+const ZERO_PADDING = { top: 0, right: 0, bottom: 0, left: 0 };
+const SVGMap = forwardRef(
+  ({
+    id,
+    width,
+    height,
+    config,
+    children,
+    padding = { top: 20, right: 20, bottom: 20, left: 20 },
+    selectedFeature
+  }, ref) => {
+    useThrowIfNonLayerChildren(children);
+    padding = padding || ZERO_PADDING;
+    const containerRef = useRef();
+    const [isReady, setIsReady] = useState(false);
+    useLayoutEffect(() => {
+      if (!isReady) {
+        setIsReady(true);
+      }
+      return () => {
+        if (isReady) {
+          setIsReady(false);
+        }
+      };
+    }, [isReady]);
+    const mapRef = useRef();
+    useImperativeHandle(
+      ref,
+      () => ({
+        isReady,
+        getContainer: () => containerRef.current,
+        getContext: () => mapRef.current
+      }),
+      [isReady]
+    );
+    const containerSize = useContainerSize(containerRef);
+    const containerStyle = useMemo(() => {
+      const style = {};
+      if (width > 0) style["width"] = width;
+      if (height > 0) style["height"] = height;
+      return style;
+    }, [width, height]);
+    const renderSVG = containerSize && !config.drawToCanvas;
+    const childrenArray = Array.isArray(children) ? children : [children];
+    return /* @__PURE__ */ jsx(
+      "figure",
+      {
+        ref: containerRef,
+        className: styles.container,
+        style: containerStyle,
+        children: renderSVG && /* @__PURE__ */ jsx(
+          SVGMapProvider,
+          {
+            id,
+            width: containerSize.width,
+            height: containerSize.height,
+            padding,
+            config,
+            mapRef,
+            selectedFeature,
+            children: /* @__PURE__ */ jsx(SVGRenderer, { children: childrenArray.map(
+              (child, index) => cloneElement(child, { zIndex: index })
+            ) })
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  MapConfiguration,
+  SVGMap,
+  _Projection
+};

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

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

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

@@ -0,0 +1,14 @@
+import { jsx } from "preact/jsx-runtime";
+import { useContext } from "preact/hooks";
+import { MapContext } from "../context/MapContext.js";
+import defaultStyles from "./compositionBorders.module.scss.js";
+import { mergeStyles } from "../../../../styles/helpers/mergeStyles.js";
+function CompositionBorders({ styles }) {
+  const context = useContext(MapContext);
+  const { projection } = context;
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsx("path", { className: styles.path, d: projection.getCompositionBorders() });
+}
+export {
+  CompositionBorders
+};

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

@@ -0,0 +1,7 @@
+export function Line({ id, features, stroke, strokeWidth, styles }: {
+    id: any;
+    features: any;
+    stroke?: any;
+    strokeWidth?: number;
+    styles: any;
+}): import("preact").JSX.Element | "<!--Line layer-->";

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

@@ -0,0 +1,48 @@
+import { jsx, Fragment } from "preact/jsx-runtime";
+import { useContext, useEffect } from "preact/hooks";
+import { MapContext } from "../context/MapContext.js";
+import { dynamicPropValue } from "../helpers/dynamicPropValue.js";
+function Line({ id, features, stroke = null, strokeWidth = 1, styles }) {
+  const context = useContext(MapContext);
+  const draw = (ctx, path) => {
+    for (const feature of features) {
+      ctx.beginPath();
+      ctx.lineWidth = strokeWidth / context.pixelRatio;
+      ctx.strokeStyle = stroke;
+      path(feature);
+      ctx.stroke();
+    }
+  };
+  useEffect(() => {
+    if (context.config.drawToCanvas) {
+      context.register(draw);
+    }
+    return () => {
+      if (context.config.drawToCanvas) {
+        context.unregister(draw);
+      }
+    };
+  }, []);
+  if (context.config.drawToCanvas) {
+    return "<!--Line layer-->";
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: features.map((d, index) => {
+    const resolvedStrokeWidth = dynamicPropValue(strokeWidth, d, index);
+    return /* @__PURE__ */ jsx(
+      "path",
+      {
+        id: dynamicPropValue(id, d, index),
+        stroke: dynamicPropValue(stroke, d, index),
+        strokeLinejoin: "round",
+        strokeWidth: resolvedStrokeWidth,
+        fill: "none",
+        className: dynamicPropValue(styles, d, index),
+        d: context.path(d)
+      },
+      index
+    );
+  }) });
+}
+export {
+  Line
+};

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

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

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

@@ -0,0 +1,59 @@
+import { jsx, Fragment } from "preact/jsx-runtime";
+import { useContext, useEffect } from "preact/hooks";
+import { MapContext } from "../context/MapContext.js";
+import { dynamicPropValue } from "../helpers/dynamicPropValue.js";
+function Point({
+  id,
+  features,
+  radius = 4,
+  fill = null,
+  stroke = null,
+  strokeWidth = 1,
+  zIndex = 0,
+  styles
+}) {
+  const context = useContext(MapContext);
+  useEffect(() => {
+    function findFeatureAtPoint(point) {
+      for (const [index, feature] of features.entries()) {
+        const resolvedRadius = dynamicPropValue(radius, feature, index);
+        if (isNaN(resolvedRadius)) return;
+        const [cx, cy] = context.projection(feature.geometry.coordinates);
+        const distanceSquared = (point[0] - cx) ** 2 + (point[1] - cy) ** 2;
+        const radiusSquared = resolvedRadius ** 2;
+        if (distanceSquared <= radiusSquared) {
+          return feature;
+        }
+      }
+      return null;
+    }
+    const layer = {
+      zIndex,
+      findFeatureAtPoint
+    };
+    context.registerLayer(layer);
+    return () => {
+      context.unregisterLayer(layer);
+    };
+  }, [context, features, radius, zIndex]);
+  return /* @__PURE__ */ jsx(Fragment, { children: features.map((d, index) => {
+    const [cx, cy] = context.projection(d.geometry.coordinates);
+    return /* @__PURE__ */ jsx(
+      "circle",
+      {
+        id: dynamicPropValue(id, d, index),
+        cx,
+        cy,
+        r: dynamicPropValue(radius, d, index),
+        className: dynamicPropValue(styles, d, index),
+        fill: dynamicPropValue(fill, d, index),
+        stroke: dynamicPropValue(stroke, d, index),
+        strokeWidth: dynamicPropValue(strokeWidth, d, index)
+      },
+      index
+    );
+  }) });
+}
+export {
+  Point
+};

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 "flatbush";
+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;
+};