@guardian/interactive-component-library 0.2.0-rc4 → 0.3.0

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

@@ -1,38 +0,0 @@
-export * as MapLayers from './layers';
-export namespace _Projection {
-    let geoAlbersUKComposite: any;
-    let geoAlbersEngland: any;
-    let geoMercator: any;
-}
-export namespace MapConfiguration {
-    namespace UKComposite {
-        import projection = _Projection.geoAlbersUKComposite;
-        export { projection };
-        export let bounds: number[][];
-        export let drawCompositionBorders: boolean;
-        export let drawToCanvas: boolean;
-    }
-    namespace England {
-        import projection_1 = _Projection.geoAlbersEngland;
-        export { projection_1 as projection };
-        let bounds_1: number[][];
-        export { bounds_1 as bounds };
-        let drawCompositionBorders_1: boolean;
-        export { drawCompositionBorders_1 as drawCompositionBorders };
-        let drawToCanvas_1: boolean;
-        export { drawToCanvas_1 as drawToCanvas };
-    }
-    namespace London {
-        let projection_2: any;
-        export { projection_2 as projection };
-        let bounds_2: number[][];
-        export { bounds_2 as bounds };
-        let drawCompositionBorders_2: boolean;
-        export { drawCompositionBorders_2 as drawCompositionBorders };
-        let drawToCanvas_2: boolean;
-        export { drawToCanvas_2 as drawToCanvas };
-    }
-}
-export const SVGMap: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<{}> & {
-    ref?: import('preact').Ref<any>;
-}>;

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

@@ -1,121 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-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

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

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

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

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

@@ -1,12 +0,0 @@
-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

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

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

@@ -1,32 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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