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

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,6 @@
+export function useTouchOrHover(): {
+    touchOrHoverRef: import('preact/hooks').MutableRef<undefined>;
+    touchOrHoverIsActive: boolean;
+    touchRect: undefined;
+    positionInTarget: undefined;
+};

package/dist/shared/hooks/useTouchOrHover.js

@@ -0,0 +1,95 @@
+import { useRef, useState, useEffect } from "preact/hooks";
+import { pointInsideRect } from "../helpers/geometry.js";
+function useTouchOrHover() {
+  const ref = useRef();
+  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);
+      setIsActive(true);
+      event.stopPropagation();
+    };
+    const touchMoved = (event) => {
+      if (touchCancelled || event.targetTouches.length !== 1) return;
+      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();
+      }
+      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 });
+      setIsActive(true);
+    };
+    const mouseMoved = (event) => {
+      const { clientX, clientY } = event;
+      const rect = element.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      setPosition({ x, y });
+    };
+    const mouseOut = () => {
+      setIsActive(false);
+      setPosition(null);
+    };
+    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
+  };
+}
+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
+};

package/dist/style.css

@@ -2372,7 +2372,79 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   line-height: var(--sans-line-height);
   color: var(--primary-text-color);
 }
-._svg_1dms8_1 {
+body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
+._path_1cwd5_9 {
+  stroke: var(--secondary-line-color);
+  fill: none;
+}._container_9pdyv_1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+._svg_9pdyv_7 {
+  fill: none;
+  stroke: #121212;
+  stroke-width: 1;
+}
+body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
+._mapContainer_1ogf3_9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+._helpTextContainer_1ogf3_15 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+  background-color: rgba(18, 18, 18, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.2s linear;
+}
+
+._helpText_1ogf3_15 {
+  margin-top: var(--space-5);
+  font-family: var(--text-sans);
+  font-weight: 700;
+  font-size: var(--sans-large);
+  line-height: var(--sans-line-height);
+  color: #fff !important;
+  margin-bottom: var(--space-3);
+}
+
+._desktopHelpText_1ogf3_40 {
+  display: none;
+}
+
+@media (any-hover: hover) {
+  ._desktopHelpText_1ogf3_40 {
+    display: block;
+  }
+  ._mobileHelpText_1ogf3_48 {
+    display: none;
+  }
+}._svg_1dms8_1 {
   width: 100%;
   height: 100%;
   fill: var(--primary-text-color);
@@ -2817,79 +2889,7 @@ body.android {
 ._checkmarkPath_6u92g_120 {
   fill: var(--primary-text-color);
 }
-body {
-  --top-inset: 0;
-}
-
-body.android {
-  --top-inset: 58px;
-}
-
-._path_1cwd5_9 {
-  stroke: var(--secondary-line-color);
-  fill: none;
-}._container_9pdyv_1 {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-._svg_9pdyv_7 {
-  fill: none;
-  stroke: #121212;
-  stroke-width: 1;
-}
-body {
-  --top-inset: 0;
-}
-
-body.android {
-  --top-inset: 58px;
-}
-
-._mapContainer_1ogf3_9 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-._helpTextContainer_1ogf3_15 {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  pointer-events: none;
-  background-color: rgba(18, 18, 18, 0.4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: opacity 0.2s linear;
-}
-
-._helpText_1ogf3_15 {
-  margin-top: var(--space-5);
-  font-family: var(--text-sans);
-  font-weight: 700;
-  font-size: var(--sans-large);
-  line-height: var(--sans-line-height);
-  color: #fff !important;
-  margin-bottom: var(--space-3);
-}
-
-._desktopHelpText_1ogf3_40 {
-  display: none;
-}
-
-@media (any-hover: hover) {
-  ._desktopHelpText_1ogf3_40 {
-    display: block;
-  }
-  ._mobileHelpText_1ogf3_48 {
-    display: none;
-  }
-}._zoomControl_13wd1_1 {
+._zoomControl_13wd1_1 {
   display: inline-flex;
   flex-direction: column;
   gap: var(--space-2);

package/dist/styles/helpers/mergeStyles.d.ts

@@ -0,0 +1 @@
+export function mergeStyles(firstStyle: any, secondStyle: any): any;

package/dist/styles/helpers/mergeStyles.js

@@ -0,0 +1,22 @@
+function mergeStyles(firstStyle, secondStyle) {
+  if (!firstStyle) return secondStyle;
+  if (!secondStyle) return firstStyle;
+  if (typeof firstStyle === "string") {
+    if (typeof secondStyle !== "string") {
+      throw new Error("Styles to merge must be of the same type");
+    }
+    return firstStyle.concat(" ", secondStyle);
+  }
+  const allKeys = /* @__PURE__ */ new Set([
+    ...Object.keys(firstStyle),
+    ...Object.keys(secondStyle)
+  ]);
+  const merged = Array.from(allKeys).reduce((result, key) => {
+    result[key] = mergeStyles(firstStyle[key], secondStyle[key]);
+    return result;
+  }, {});
+  return merged;
+}
+export {
+  mergeStyles
+};

package/dist/styles/helpers/mergeStyles.test.d.ts

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

package/dist/styles/theme.config.d.ts

@@ -0,0 +1,124 @@
+declare namespace _default {
+    let resets: string;
+    let breakpoints: {
+        readonly mobile: 320;
+        readonly mobileMedium: 375;
+        readonly mobileLandscape: 480;
+        readonly phablet: 660;
+        readonly tablet: 740;
+        readonly desktop: 980;
+        readonly leftCol: 1140;
+        readonly wide: 1300;
+    };
+    let space: {
+        readonly 0: 2;
+        readonly 1: 4;
+        readonly 2: 8;
+        readonly 3: 12;
+        readonly 4: 16;
+        readonly 5: 20;
+        readonly 6: 24;
+        readonly 8: 32;
+        readonly 9: 36;
+        readonly 10: 40;
+        readonly 12: 48;
+        readonly 14: 56;
+        readonly 16: 64;
+        readonly 18: 72;
+        readonly 24: 96;
+    };
+    namespace fontFamily {
+        let sans: string[];
+        let serif: string[];
+        let headline: string[];
+        let titlepiece: string[];
+    }
+    namespace textSizes {
+        let headline_1: {
+            readonly xxxsmall: 17;
+            readonly xxsmall: 20;
+            readonly xsmall: 24;
+            readonly small: 28;
+            readonly medium: 34;
+            readonly large: 42;
+            readonly xlarge: 50;
+        };
+        export { headline_1 as headline };
+        let sans_1: {
+            readonly xxsmall: 12;
+            readonly xsmall: 14;
+            readonly small: 15;
+            readonly medium: 17;
+            readonly large: 20;
+            readonly xlarge: 24;
+            readonly xxlarge: 28;
+            readonly xxxlarge: 34;
+        };
+        export { sans_1 as sans };
+        let titlepiece_1: {
+            readonly small: 42;
+            readonly medium: 50;
+            readonly large: 70;
+        };
+        export { titlepiece_1 as titlepiece };
+        export let body: {
+            readonly xsmall: 14;
+            readonly small: 15;
+            readonly medium: 17;
+        };
+    }
+    namespace lineHeights {
+        let tight: number;
+        let regular: number;
+        let loose: number;
+    }
+    namespace defaultLineHeights {
+        let headline_2: string;
+        export { headline_2 as headline };
+        let sans_2: string;
+        export { sans_2 as sans };
+        let titlepiece_2: string;
+        export { titlepiece_2 as titlepiece };
+        let body_1: string;
+        export { body_1 as body };
+    }
+    namespace colors {
+        let transparent: string;
+        let current: string;
+        let white: string;
+        let neutral: {
+            7: string;
+            10: string;
+            20: string;
+            38: string;
+            46: string;
+            60: string;
+            86: string;
+            93: string;
+            97: string;
+            100: string;
+        };
+        namespace party {
+            let con: string;
+            let lab: string;
+            let ld: string;
+            let ukip: string;
+            let ind: string;
+            let snp: string;
+            let sdlp: string;
+            let pc: string;
+            let sf: string;
+            let dup: string;
+            let green: string;
+            let alliance: string;
+            let uup: string;
+            let reform: string;
+            let other: string;
+        }
+        namespace elex {
+            let nocontrol: string;
+            let undeclared: string;
+        }
+    }
+}
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.2.0-rc1",
+  "version": "0.2.0-rc2",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",
@@ -11,13 +11,10 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/interactive-component-library.umd.cjs",
-  "module": "./dist/interactive-component-library.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "import": "./dist/interactive-component-library.js",
-      "require": "./dist/interactive-component-library.umd.cjs"
-    },
+    ".": "./dist/index.js",
     "./dist/style.css": "./dist/style.css"
   },
   "engines": {
@@ -27,8 +24,8 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "storybook build",
-    "build:lib": "vite build",
-    "build:lib:watch": "vite build --watch",
+    "build:lib": "vite build --mode lib",
+    "build:lib:watch": "vite build --mode lib --watch",
     "lint": "eslint .",
     "format": "prettier . --write",
     "format:check": "prettier . --check",