@guardian/interactive-component-library 0.3.1 → 0.3.2-rc1

package/dist/components/particles/waffle/index.js

@@ -0,0 +1,76 @@
+import { jsx } from "preact/jsx-runtime";
+import defaultStyles from "./style.module.css.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import { useContainerSize } from "../../../shared/hooks/useContainerSize.js";
+import { useRef } from "preact/hooks";
+const WaffleType = {
+  circle: "circle",
+  square: "square"
+};
+const WaffleUnit = ({ type, attributes }) => type === WaffleType.square ? /* @__PURE__ */ jsx("rect", { ...attributes }) : /* @__PURE__ */ jsx("circle", { ...attributes });
+const Waffle = ({
+  units,
+  numberOfRows,
+  type = WaffleType.circle,
+  idAccessor,
+  onMouseOver = () => {
+  },
+  onClick = () => {
+  },
+  styles,
+  svgId
+}) => {
+  const containerRef = useRef();
+  const containerSize = useContainerSize(containerRef);
+  const width = containerSize ? containerSize.width : 0;
+  const total = units.length;
+  const columns = Math.ceil(total / numberOfRows);
+  const unitWidth = width / columns;
+  const unitHeight = unitWidth;
+  const height = numberOfRows * unitHeight;
+  styles = mergeStyles(defaultStyles, styles);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: styles.container, children: containerSize && /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      className: styles.svg,
+      id: svgId,
+      children: /* @__PURE__ */ jsx("g", { children: units.map((unit, j) => {
+        let attributes;
+        if (type === WaffleType.square) {
+          attributes = {
+            id: unit[idAccessor] || `w-${j}`,
+            onMouseOver: (e) => onMouseOver(unit, e),
+            onClick: (e) => onClick(unit, e),
+            class: `${styles.unit} ${unit.class}`,
+            height: unitHeight,
+            width: unitWidth,
+            x: unitWidth * Math.floor(j / numberOfRows),
+            y: unitHeight * (j % numberOfRows)
+          };
+        } else {
+          attributes = {
+            id: unit[idAccessor] || `w-${j}`,
+            onMouseOver: (e) => onMouseOver(unit, e),
+            onClick: (e) => onClick(unit, e),
+            class: `${styles.unit} ${unit.class}`,
+            r: unitWidth / 2,
+            transform: `translate(${unitWidth * Math.floor(j / numberOfRows) + unitWidth / 2}, ${unitHeight * (j % numberOfRows) + unitHeight / 2})`
+          };
+        }
+        return /* @__PURE__ */ jsx(
+          WaffleUnit,
+          {
+            type,
+            attributes
+          },
+          `wu-${j}`
+        );
+      }) })
+    }
+  ) });
+};
+export {
+  Waffle,
+  WaffleType
+};

package/dist/components/particles/waffle/style.module.css.js

@@ -0,0 +1,11 @@
+const unit = "_unit_1jxth_1";
+const container = "_container_1jxth_6";
+const defaultStyles = {
+  unit,
+  container
+};
+export {
+  container,
+  defaultStyles as default,
+  unit
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './shared/hooks';

package/dist/index.js

@@ -0,0 +1,147 @@
+/* empty css                 */
+import { Chevron } from "./components/particles/chevron/index.js";
+import { LegendItem } from "./components/particles/legend-item/index.js";
+import { LabelOverlapConfig, LabelType, StackedBar } from "./components/particles/stacked-bar/index.js";
+import { GradientIcon } from "./components/particles/gradient-icon/index.js";
+import { Waffle, WaffleType } from "./components/particles/waffle/index.js";
+import { InfoButton } from "./components/particles/info-button/index.js";
+import { CircleIcon } from "./components/particles/circle-icon/index.js";
+import { RelativeTimeSentence } from "./components/particles/relative-time-sentence/index.js";
+import { Container } from "./components/particles/container/index.js";
+import { ChangeBar } from "./components/particles/change-bar/index.js";
+import { SquareCutCornerIcon } from "./components/particles/square-cut-corner-icon/index.js";
+import { StackedGrid } from "./components/particles/stacked-grid/index.js";
+import { SquareIcon } from "./components/particles/square-icon/index.js";
+import { ArrowButton } from "./components/particles/arrow-button/index.js";
+import { Button } from "./components/particles/button/index.js";
+import { CloseButton } from "./components/particles/close-button/index.js";
+import { AdSlot } from "./components/particles/ad-slot/index.js";
+import { AspectRatioBox } from "./components/particles/aspect-ratio-box/index.js";
+import { Table } from "./components/molecules/table/index.js";
+import { SlopeChart } from "./components/molecules/slope-chart/index.js";
+import { Tooltip } from "./components/molecules/tooltip/index.js";
+import { ControlChange } from "./components/molecules/control-change/index.js";
+import { FirstPastThePostWaffle } from "./components/molecules/first-past-the-post-waffle/index.js";
+import { ToplineResult } from "./components/molecules/topline-result/index.js";
+import { PageSection, SectionLayout } from "./components/molecules/page-section/index.js";
+import { ColumnChart } from "./components/molecules/column-chart/index.js";
+import { PartyProfile } from "./components/molecules/party-profile/index.js";
+import { ResultSummary } from "./components/molecules/result-summary/index.js";
+import { SearchInput } from "./components/molecules/search-input/index.js";
+import { RefreshIndicator } from "./components/molecules/refresh-indicator/index.js";
+import { GridType, ResponsiveGrid } from "./components/molecules/responsive-grid/index.js";
+import { Modal } from "./components/molecules/modal/index.js";
+import { Dropdown } from "./components/molecules/dropdown/index.js";
+import { MapConfiguration, SVGMap, _Projection } from "./components/molecules/svg-map/index.js";
+import { Map } from "./components/molecules/canvas-map/lib/Map.js";
+import { ZoomControl } from "./components/molecules/canvas-map/controls/ZoomControl.js";
+import { Feature } from "./components/molecules/canvas-map/lib/Feature.js";
+import { FeatureCollection } from "./components/molecules/canvas-map/lib/FeatureCollection.js";
+import { Dispatcher } from "./components/molecules/canvas-map/lib/events/Dispatcher.js";
+import { MapEvent } from "./components/molecules/canvas-map/lib/events/MapEvent.js";
+import { Projection } from "./components/molecules/canvas-map/lib/projection/index.js";
+import { TextLayer } from "./components/molecules/canvas-map/lib/layers/TextLayer.js";
+import { VectorLayer } from "./components/molecules/canvas-map/lib/layers/VectorLayer.js";
+import { Style } from "./components/molecules/canvas-map/lib/styles/Style.js";
+import { Stroke, StrokePosition } from "./components/molecules/canvas-map/lib/styles/Stroke.js";
+import { Fill } from "./components/molecules/canvas-map/lib/styles/Fill.js";
+import { Text } from "./components/molecules/canvas-map/lib/styles/Text.js";
+import { GeoCoordinate } from "./components/molecules/canvas-map/lib/util/coordinate.js";
+import { GeoBounds } from "./components/molecules/canvas-map/lib/util/bounds.js";
+import { Extent, combineExtents, containsCoordinate, containsXY, extentForCoordinates } from "./components/molecules/canvas-map/lib/util/extent.js";
+import { bboxFeature } from "./components/molecules/canvas-map/lib/util/bboxFeature.js";
+import { resolutionForExtent } from "./components/molecules/canvas-map/lib/util/resolution.js";
+import { zoomLevelForResolution, zoomLevelToZoomScale } from "./components/molecules/canvas-map/lib/util/zoomLevel.js";
+import { interpolateFeatures } from "./components/molecules/canvas-map/lib/interpolators/interpolateFeatures.js";
+import { interpolateFill, interpolateStroke, interpolateStyles } from "./components/molecules/canvas-map/lib/interpolators/interpolateStyles.js";
+import { VectorSource } from "./components/molecules/canvas-map/lib/sources/VectorSource.js";
+import { GeoJSON } from "./components/molecules/canvas-map/lib/formats/GeoJSON.js";
+import "./components/molecules/canvas-map/Map.js";
+import { OptionPicker } from "./components/molecules/option-picker/index.js";
+import { CoalitionsTracker } from "./components/organisms/coalitions-tracker/index.js";
+import { Ticker } from "./components/organisms/ticker/index.js";
+import { useContainerSize } from "./shared/hooks/useContainerSize.js";
+import { useTouchOrHover } from "./shared/hooks/useTouchOrHover.js";
+import { useWindowSize } from "./shared/hooks/useWindowSize.js";
+import * as index from "./components/molecules/svg-map/layers/index.js";
+export {
+  AdSlot,
+  ArrowButton,
+  AspectRatioBox,
+  Button,
+  ChangeBar,
+  Chevron,
+  CircleIcon,
+  CloseButton,
+  CoalitionsTracker,
+  ColumnChart,
+  Container,
+  ControlChange,
+  Dispatcher,
+  Dropdown,
+  Extent,
+  Feature,
+  FeatureCollection,
+  Fill,
+  FirstPastThePostWaffle,
+  GeoBounds,
+  GeoCoordinate,
+  GeoJSON,
+  GradientIcon,
+  GridType,
+  InfoButton,
+  LabelOverlapConfig,
+  LabelType,
+  LegendItem,
+  Map,
+  MapConfiguration,
+  MapEvent,
+  index as MapLayers,
+  Modal,
+  OptionPicker,
+  PageSection,
+  PartyProfile,
+  Projection,
+  RefreshIndicator,
+  RelativeTimeSentence,
+  ResponsiveGrid,
+  ResultSummary,
+  SVGMap,
+  SearchInput,
+  SectionLayout,
+  SlopeChart,
+  SquareCutCornerIcon,
+  SquareIcon,
+  StackedBar,
+  StackedGrid,
+  Stroke,
+  StrokePosition,
+  Style,
+  Table,
+  Text,
+  TextLayer,
+  Ticker,
+  Tooltip,
+  ToplineResult,
+  VectorLayer,
+  VectorSource,
+  Waffle,
+  WaffleType,
+  ZoomControl,
+  _Projection,
+  bboxFeature,
+  combineExtents,
+  containsCoordinate,
+  containsXY,
+  extentForCoordinates,
+  interpolateFeatures,
+  interpolateFill,
+  interpolateStroke,
+  interpolateStyles,
+  resolutionForExtent,
+  useContainerSize,
+  useTouchOrHover,
+  useWindowSize,
+  zoomLevelForResolution,
+  zoomLevelToZoomScale
+};

package/dist/shared/colors/index.d.ts

@@ -0,0 +1,2 @@
+export function isDarkColor(color: any): boolean;
+export function isLightColor(color: any): boolean;

package/dist/shared/helpers/createStore.d.ts

@@ -0,0 +1 @@
+export default function createStore(initialStore: any): ((selectorFn?: (store: any) => any) => any)[];

package/dist/shared/helpers/geometry.d.ts

@@ -0,0 +1,3 @@
+export function rectsIntersect(rect1: any, rect2: any): boolean;
+export function pointInsideRect(point: any, rect: any): boolean;
+export function rectInsideRect(rect1: any, rect2: any): boolean;

package/dist/shared/helpers/geometry.js

@@ -0,0 +1,16 @@
+function rectsIntersect(rect1, rect2) {
+  if (rect1.width === 0 || rect1.height === 0 || rect2.width === 0 || rect2.height === 0) {
+    return false;
+  }
+  if (rect1.x + rect1.width <= rect2.x || rect2.x + rect2.width <= rect1.x || rect1.y + rect1.height <= rect2.y || rect2.y + rect2.height <= rect1.y) {
+    return false;
+  }
+  return true;
+}
+function pointInsideRect(point, rect) {
+  return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+}
+export {
+  pointInsideRect,
+  rectsIntersect
+};

package/dist/shared/helpers/geometry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/helpers/labelsUtil.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @template {Record<string, unknown>} T
+ * @param {T[]} labelPositions
+ * @param {number} iteration
+ * @param {number} labelSize
+ * @param {string} coordinate
+ * @param {boolean} moveBothLabels
+ * @returns
+ */
+export function preventOverlap<T extends Record<string, unknown>>(labelPositions: T[], iteration?: number, labelSize?: number, coordinate?: string, moveBothLabels?: boolean): T[];
+/**
+ * Unique objects for a given key’s value;
+ *
+ * @example
+ * ```
+ * const labels = [
+ *  {key: 'alpha', value: 1 },
+ *  {key: 'alpha', value: 9 },
+ *  {key: 'delta', value: 4 },
+ *];
+ * console.log(uniqueBy(labels, 'key'));
+ * // [
+ * //  {key: 'alpha', value: 1 },
+ * //  {key: 'delta', value: 4 },
+ * // ]
+ * ```
+ *
+ * @template T extends Record<string, unknown>
+ * @param {T[]} array
+ * @param {keyof T} key
+ * @returns {T[]}
+ */
+export function uniqueBy<T>(array: T[], key: keyof T): T[];
+/**
+ * @template {{ value: string }} T
+ * @param {T[]} labels
+ * @param {number} labelSize
+ * @param {string} coordinate
+ * @param {boolean} moveBothLabels
+ * @returns {T[]}
+ */
+export function positionLabels<T extends {
+    value: string;
+}>(labels: T[], labelSize?: number, coordinate?: string, moveBothLabels?: boolean): T[];
+/**
+ * Create a function that maps a value from a source domain to a target range.
+ *
+ * same as this one https://gist.github.com/vectorsize/7031902
+ *
+ * @param {[number, number]} domain
+ * @param {[number, number]} range
+ * @returns {(x: number) => number}
+ */
+export function scaleLinear(domain: [number, number], range: [number, number]): (x: number) => number;

package/dist/shared/helpers/labelsUtil.js

@@ -0,0 +1,58 @@
+function preventOverlap(labelPositions, iteration = 0, labelSize = 12, coordinate = "y", moveBothLabels = true) {
+  const maxIterations = 10;
+  let totalOverlap = 0;
+  if (!isArrayWithCoordinates(labelPositions, coordinate)) return labelPositions;
+  for (let index = 1; index < labelPositions.length; index++) {
+    const previousElement = labelPositions[index - 1];
+    const element = labelPositions[index];
+    const overlap = previousElement[coordinate] - (element[coordinate] - labelSize);
+    if (overlap < 0) {
+      continue;
+    }
+    if (moveBothLabels) {
+      previousElement[coordinate] -= overlap / 2;
+      element[coordinate] += overlap / 2;
+    } else {
+      previousElement[coordinate] -= overlap;
+    }
+    totalOverlap += overlap;
+  }
+  if (totalOverlap > 0 && iteration < maxIterations) {
+    return preventOverlap(
+      labelPositions,
+      iteration + 1,
+      labelSize,
+      coordinate,
+      moveBothLabels
+    );
+  }
+  return labelPositions;
+}
+function uniqueBy(array, key) {
+  return [...array.reduce((map, d) => map.set(d[key], d), /* @__PURE__ */ new Map()).values()];
+}
+function positionLabels(labels, labelSize = 12, coordinate = "y", moveBothLabels = true) {
+  labels = uniqueBy(labels, "value");
+  labels.sort((a, b) => a[coordinate] - b[coordinate]);
+  return preventOverlap(labels, 0, labelSize, coordinate, moveBothLabels);
+}
+function scaleLinear(domain, range) {
+  const [domainMin, domainMax] = domain;
+  const [rangeMin, rangeMax] = range;
+  const slope = (rangeMax - rangeMin) / (domainMax - domainMin);
+  const intercept = rangeMin - slope * domainMin;
+  return function(x) {
+    return slope * x + intercept;
+  };
+}
+function isArrayWithCoordinates(labelPositions, coordinate) {
+  return labelPositions.every(
+    (position) => typeof position[coordinate] === "number"
+  );
+}
+export {
+  positionLabels,
+  preventOverlap,
+  scaleLinear,
+  uniqueBy
+};

package/dist/shared/helpers/labelsUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/helpers/shouldUpdate.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @template T
+ * @param {T} oldState
+ * @param {T} newState
+ * @returns {boolean}
+ */
+export default function shouldUpdate<T>(oldState: T, newState: T): boolean;

package/dist/shared/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useContainerSize';
+export * from './useTouchOrHover';
+export * from './useWindowSize';

package/dist/shared/hooks/useContainerSize.d.ts

@@ -0,0 +1 @@
+export function useContainerSize(containerRef: any): undefined;

package/dist/shared/hooks/useContainerSize.js

@@ -0,0 +1,24 @@
+import { useState, useLayoutEffect } from "preact/hooks";
+function useContainerSize(containerRef) {
+  const [containerSize, setContainerSize] = useState();
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        setContainerSize({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        });
+      }
+    });
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef]);
+  return containerSize;
+}
+export {
+  useContainerSize
+};

package/dist/shared/hooks/useTouchOrHover.d.ts

@@ -0,0 +1,7 @@
+export function useTouchOrHover(): {
+    touchOrHoverRef: import('preact/hooks').MutableRef<undefined>;
+    touchOrHoverIsActive: boolean;
+    touchRect: undefined;
+    positionInTarget: undefined;
+    activeEvent: undefined;
+};

package/dist/shared/hooks/useTouchOrHover.js

@@ -0,0 +1,103 @@
+import { useRef, useState, useEffect } from "preact/hooks";
+import { pointInsideRect } from "../helpers/geometry.js";
+function useTouchOrHover() {
+  const ref = useRef();
+  const [activeEvent, setActiveEvent] = useState();
+  const [position, setPosition] = useState();
+  const [isActive, setIsActive] = useState(false);
+  const [touchRect, setTouchRect] = useState();
+  useEffect(() => {
+    const element = ref.current;
+    let touchCancelled = false;
+    const touchStarted = (event) => {
+      if (event.touches.length > 1) return;
+      touchCancelled = false;
+      const touch = event.touches[0];
+      const { clientX, clientY } = touch;
+      const rect = element.getBoundingClientRect();
+      const point = { x: clientX - rect.left, y: clientY - rect.top };
+      setPosition(point);
+      const touchRect2 = {
+        x: clientX - touch.radiusX,
+        y: clientY - touch.radiusY,
+        width: touch.radiusX * 2,
+        height: touch.radiusY * 2
+      };
+      setTouchRect(touchRect2);
+      setActiveEvent(event);
+      setIsActive(true);
+      event.stopPropagation();
+    };
+    const touchMoved = (event) => {
+      if (touchCancelled || event.targetTouches.length !== 1) return;
+      setActiveEvent(event);
+      const touch = event.targetTouches[0];
+      const { clientX, clientY } = touch;
+      const rect = element.getBoundingClientRect();
+      const point = { x: clientX - rect.left, y: clientY - rect.top };
+      if (!event.cancelable || !pointInsideRect(point, rect)) {
+        setIsActive(false);
+        touchCancelled = true;
+      } else {
+        setPosition(point);
+        setIsActive(true);
+      }
+    };
+    const touchEnded = (event) => {
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+      setActiveEvent(null);
+      setIsActive(false);
+      setPosition(null);
+    };
+    const mouseOver = (event) => {
+      const { clientX, clientY } = event;
+      const rect = element.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      setPosition({ x, y });
+      setActiveEvent(event);
+      setIsActive(true);
+    };
+    const mouseMoved = (event) => {
+      const { clientX, clientY } = event;
+      const rect = element.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      setActiveEvent(event);
+      setPosition({ x, y });
+    };
+    const mouseOut = () => {
+      setPosition(null);
+      setActiveEvent(null);
+      setIsActive(false);
+    };
+    element.addEventListener("touchstart", touchStarted);
+    element.addEventListener("touchmove", touchMoved);
+    element.addEventListener("touchend", touchEnded);
+    element.addEventListener("touchcancel", touchEnded);
+    element.addEventListener("mouseover", mouseOver);
+    element.addEventListener("mousemove", mouseMoved);
+    element.addEventListener("mouseout", mouseOut);
+    return () => {
+      element.removeEventListener("touchstart", touchStarted);
+      element.removeEventListener("touchmove", touchMoved);
+      element.removeEventListener("touchend", mouseOut);
+      element.removeEventListener("touchcancel", mouseOut);
+      element.removeEventListener("mouseover", touchStarted);
+      element.removeEventListener("mousemove", mouseMoved);
+      element.removeEventListener("mouseout", mouseOut);
+    };
+  }, []);
+  return {
+    touchOrHoverRef: ref,
+    touchOrHoverIsActive: isActive,
+    touchRect,
+    positionInTarget: position,
+    activeEvent
+  };
+}
+export {
+  useTouchOrHover
+};

package/dist/shared/hooks/useWindowSize.d.ts

@@ -0,0 +1,4 @@
+export function useWindowSize(): {
+    width: number;
+    height: number;
+};

package/dist/shared/hooks/useWindowSize.js

@@ -0,0 +1,27 @@
+import { useState, useLayoutEffect } from "preact/hooks";
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState(() => {
+    if (typeof window === "undefined") return { width: 0, height: 0 };
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  });
+  useLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return windowSize;
+}
+export {
+  useWindowSize
+};