@guardian/interactive-component-library 0.2.0-rc3 → 0.2.0

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

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

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

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

package/dist/index.js

@@ -1,128 +0,0 @@
-/* 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/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 } 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 { 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 { bboxFeature } from "./components/molecules/canvas-map/lib/util/bboxFeature.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,
-  Feature,
-  FeatureCollection,
-  Fill,
-  FirstPastThePostWaffle,
-  GeoJSON,
-  GradientIcon,
-  GridType,
-  InfoButton,
-  LabelOverlapConfig,
-  LabelType,
-  LegendItem,
-  Map,
-  MapConfiguration,
-  MapEvent,
-  index as MapLayers,
-  Modal,
-  PageSection,
-  PartyProfile,
-  Projection,
-  RefreshIndicator,
-  RelativeTimeSentence,
-  ResponsiveGrid,
-  ResultSummary,
-  SVGMap,
-  SearchInput,
-  SectionLayout,
-  SlopeChart,
-  SquareCutCornerIcon,
-  SquareIcon,
-  StackedBar,
-  StackedGrid,
-  Stroke,
-  Style,
-  Table,
-  Text,
-  TextLayer,
-  Ticker,
-  Tooltip,
-  ToplineResult,
-  VectorLayer,
-  VectorSource,
-  Waffle,
-  WaffleType,
-  ZoomControl,
-  _Projection,
-  bboxFeature,
-  interpolateFeatures,
-  interpolateFill,
-  interpolateStroke,
-  interpolateStyles,
-  useContainerSize,
-  useTouchOrHover,
-  useWindowSize
-};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/shared/hooks/useContainerSize.js

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

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

package/dist/shared/hooks/useTouchOrHover.js

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

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

package/dist/shared/hooks/useWindowSize.js

@@ -1,27 +0,0 @@
-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/styles/helpers/mergeStyles.d.ts

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

package/dist/styles/helpers/mergeStyles.js

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

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