@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/utils/layer-utils.js

@@ -0,0 +1,205 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {OVERLAY_TYPE} from 'layers/base-layer';
+import {GEOCODER_LAYER_ID, MASK_LAYER_ID} from 'constants/default-settings';
+import {MaskExtension} from '@deck.gl/extensions';
+
+/**
+ * Find default layers from fields
+ * @type {typeof import('./layer-utils').findDefaultLayer}
+ */
+export function findDefaultLayer(dataset, layerClasses) {
+  if (!dataset) {
+    return [];
+  }
+  const layerProps = Object.keys(layerClasses).reduce((previous, lc) => {
+    const result =
+      typeof layerClasses[lc].findDefaultLayerProps === 'function'
+        ? layerClasses[lc].findDefaultLayerProps(dataset, previous)
+        : {props: []};
+
+    const props = Array.isArray(result) ? result : result.props || [];
+    const foundLayers = result.foundLayers || previous;
+
+    return foundLayers.concat(
+      props.map(p => ({
+        ...p,
+        type: lc,
+        dataId: dataset.id
+      }))
+    );
+  }, []);
+
+  // go through all layerProps to create layer
+  return layerProps.map(props => {
+    const layer = new layerClasses[props.type](props);
+    return typeof layer.setInitialLayerConfig === 'function' && dataset.dataContainer
+      ? layer.setInitialLayerConfig(dataset)
+      : layer;
+  });
+}
+
+/**
+ * calculate layer data based on layer type, col Config,
+ * return updated layer if colorDomain, dataMap has changed
+ * @type {typeof import('./layer-utils').calculateLayerData}
+ */
+export function calculateLayerData(layer, state, oldLayerData) {
+  const {type} = layer;
+
+  if (!type || !layer.hasAllColumns() || !layer.config.dataId) {
+    return {layer, layerData: {}};
+  }
+
+  const layerData = layer.formatLayerData(state.datasets, oldLayerData);
+  return {layerData, layer};
+}
+
+/**
+ * Calculate props passed to LayerHoverInfo
+ * @type {typeof import('./layer-utils').getLayerHoverProp}
+ */
+export function getLayerHoverProp({
+  interactionConfig,
+  hoverInfo,
+  layers,
+  layersToRender,
+  datasets
+}) {
+  if (interactionConfig.tooltip.enabled && hoverInfo && hoverInfo.picked) {
+    // if anything hovered
+    const {object, layer: overlay} = hoverInfo;
+
+    // deckgl layer to kepler-gl layer
+    const layer = layers[overlay.props.idx];
+
+    if (object && layer && layer.getHoverData && layersToRender[layer.id]) {
+      // if layer is visible and have hovered data
+      const {
+        config: {dataId}
+      } = layer;
+      if (!dataId) {
+        return null;
+      }
+      const {dataContainer, fields} = datasets[dataId];
+      const data = layer.getHoverData(object, dataContainer, fields);
+      const fieldsToShow = interactionConfig.tooltip.config.fieldsToShow[dataId];
+
+      return {
+        data,
+        fields,
+        fieldsToShow,
+        layer
+      };
+    }
+  }
+
+  return null;
+}
+
+export function renderDeckGlLayer(props, layerCallbacks, idx) {
+  const {
+    datasets,
+    layers,
+    layerData,
+    hoverInfo,
+    clicked,
+    mapState,
+    interactionConfig,
+    animationConfig,
+    mapLayers,
+    maskPolygon,
+    popupSettings
+  } = props;
+  const layer = layers[idx];
+  const data = layerData[idx];
+  const {gpuFilter} = datasets[layer.config.dataId] || {};
+  const objectHovered = clicked || hoverInfo;
+  const visible = !mapLayers || (mapLayers && mapLayers[layer.id]);
+
+  layer.interactivitySettings = popupSettings?.layers[layer.id];
+  // Layer is Layer class
+  return layer.renderLayer({
+    data,
+    gpuFilter,
+    idx,
+    interactionConfig,
+    layerCallbacks,
+    mapState,
+    animationConfig,
+    objectHovered,
+    visible,
+    maskPolygon,
+    popupSettings
+  });
+}
+
+export function isLayerRenderable(layer, layerData) {
+  return layer.id !== GEOCODER_LAYER_ID && layer.shouldRenderLayer(layerData);
+}
+
+export function isLayerVisible(layer, mapLayers) {
+  return (
+    layer.config.isVisible &&
+    // if layer.id is not in mapLayers, don't render it
+    (!mapLayers || (mapLayers && mapLayers[layer.id]))
+  );
+}
+
+// Prepare a dict of layers rendered by the deck.gl
+// Note, isVisible: false layer is passed to deck.gl here
+// return {[id]: true \ false}
+export function prepareLayersForDeck(layers, layerData) {
+  return layers.reduce(
+    (accu, layer, idx) => ({
+      ...accu,
+      [layer.id]:
+        isLayerRenderable(layer, layerData[idx]) && layer.overlayType === OVERLAY_TYPE.deckgl
+    }),
+    {}
+  );
+}
+
+// Prepare a dict of rendered layers rendered in the map
+// This includes only the visibile layers for single map view and split map view
+// return {[id]: true \ false}
+export function prepareLayersToRender(layers, layerData, mapLayers) {
+  return layers.reduce(
+    (accu, layer, idx) => ({
+      ...accu,
+      [layer.id]: isLayerRenderable(layer, layerData[idx]) && isLayerVisible(layer, mapLayers)
+    }),
+    {}
+  );
+}
+
+const maskExtension = new MaskExtension();
+
+export function getMaskExtensionProps(maskPolygon) {
+  return {
+    maskId: Boolean(maskPolygon && maskPolygon.length) && MASK_LAYER_ID,
+    extensions: [maskExtension]
+  };
+}
+
+export function negateAccessor(accessor) {
+  return typeof accessor === 'function' ? (d, i) => -accessor(d, i) : -accessor;
+}

package/src/utils/locale-utils.js

@@ -0,0 +1,59 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {isObject} from './utils';
+import {console as Console} from 'global/console';
+
+// Flat messages since react-intl does not seem to support nested structures
+// Adapted from https://medium.com/siren-apparel-press/internationalization-and-localization-of-sirenapparel-eu-sirenapparel-us-and-sirenapparel-asia-ddee266066a2
+export const flattenMessages = (nestedMessages, prefix = '') => {
+  return Object.keys(nestedMessages).reduce((messages, key) => {
+    const value = nestedMessages[key];
+    const prefixedKey = prefix ? `${prefix}.${key}` : key;
+    if (typeof value === 'string') {
+      messages[prefixedKey] = value;
+    } else {
+      Object.assign(messages, flattenMessages(value, prefixedKey));
+    }
+    return messages;
+  }, {});
+};
+
+export const mergeMessages = (defaultMessages, userMessages) => {
+  if (!isObject(userMessages) || !isObject(userMessages.en)) {
+    Console.error(
+      'message should be an object and contain at least the `en` translation. Read more at https://docs.kepler.gl/docs/api-reference/localization'
+    );
+
+    return defaultMessages;
+  }
+
+  const userEnFlat = flattenMessages(userMessages.en);
+  return Object.keys(defaultMessages).reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]:
+        key === 'en'
+          ? {...defaultMessages.en, ...userEnFlat}
+          : {...defaultMessages[key], ...userEnFlat, ...flattenMessages(userMessages[key] || {})}
+    }),
+    {}
+  );
+};

package/src/utils/map-info-utils.js

@@ -0,0 +1,29 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {MAP_INFO_CHARACTER} from 'constants/default-settings';
+
+export function isValidMapInfo(mapInfo) {
+  return (
+    mapInfo.title.length &&
+    mapInfo.title.length <= MAP_INFO_CHARACTER.title &&
+    (!mapInfo.description.length || mapInfo.description.length <= MAP_INFO_CHARACTER.description)
+  );
+}

package/src/utils/map-style-utils/mapbox-gl-style-editor.js

@@ -0,0 +1,201 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import memoize from 'lodash.memoize';
+import clondDeep from 'lodash.clonedeep';
+import {DEFAULT_LAYER_GROUPS, DEFAULT_MAPBOX_API_URL} from 'constants/default-settings';
+
+const mapUrlRg = /^mapbox:\/\/styles\/[-a-z0-9]{2,256}\/[-a-z0-9]{2,256}/;
+const httpRg = /^(?=(http:|https:))/;
+
+export function getDefaultLayerGroupVisibility({layerGroups = []}) {
+  return layerGroups.reduce(
+    (accu, layer) => ({
+      ...accu,
+      [layer.slug]: layer.defaultVisibility
+    }),
+    {}
+  );
+}
+
+const resolver = ({id, mapStyle, visibleLayerGroups = {}}) =>
+  `${id}:${Object.keys(visibleLayerGroups)
+    .filter(d => visibleLayerGroups[d])
+    .sort()
+    .join('-')}`;
+
+/**
+ * Edit preset map style to keep only visible layers
+ *
+ * @param {Object} mapStyle - preset map style
+ * @param {Object} visibleLayerGroups - visible layers of top map
+ * @returns {Object} top map style
+ */
+export const editTopMapStyle = memoize(({id, mapStyle, visibleLayerGroups}) => {
+  const visibleFilters = (mapStyle.layerGroups || [])
+    .filter(lg => visibleLayerGroups[lg.slug])
+    .map(lg => lg.filter);
+
+  // if top map
+  // keep only visible layers
+  const filteredLayers = mapStyle.style.layers.filter(layer =>
+    visibleFilters.some(match => match(layer))
+  );
+
+  return {
+    ...mapStyle.style,
+    layers: filteredLayers
+  };
+}, resolver);
+
+/**
+ * Edit preset map style to filter out invisible layers
+ *
+ * @param {Object} mapStyle - preset map style
+ * @param {Object} visibleLayerGroups - visible layers of bottom map
+ * @returns {Object} bottom map style
+ */
+export const editBottomMapStyle = memoize(({id, mapStyle, visibleLayerGroups}) => {
+  const invisibleFilters = (mapStyle.layerGroups || [])
+    .filter(lg => !visibleLayerGroups[lg.slug])
+    .map(lg => lg.filter);
+
+  // if bottom map
+  // filter out invisible layers
+  const filteredLayers = mapStyle.style.layers.filter(layer =>
+    invisibleFilters.every(match => !match(layer))
+  );
+
+  return {
+    ...mapStyle.style,
+    layers: filteredLayers
+  };
+}, resolver);
+
+// valid style url
+// mapbox://styles/uberdata/cjfyl03kp1tul2smf5v2tbdd4
+// lowercase letters, numbers and dashes only.
+export function isValidStyleUrl(url) {
+  return typeof url === 'string' && Boolean(url.match(mapUrlRg) || url.match(httpRg));
+}
+
+export function getStyleDownloadUrl(styleUrl, accessToken, mapboxApiUrl) {
+  if (styleUrl.startsWith('http')) {
+    return styleUrl;
+  }
+
+  // mapbox://styles/jckr/cjhcl0lxv13di2rpfoytdbdyj
+  if (styleUrl.startsWith('mapbox://styles')) {
+    const styleId = styleUrl.replace('mapbox://styles/', '');
+
+    // https://api.mapbox.com/styles/v1/heshan0131/cjg1bfumo1cwm2rlrjxkinfgw?pluginName=Keplergl&access_token=<token>
+    return `${mapboxApiUrl ||
+      DEFAULT_MAPBOX_API_URL}/styles/v1/${styleId}?pluginName=Keplergl&access_token=${accessToken}`;
+  }
+
+  // style url not recognized
+  return null;
+}
+
+/**
+ * Generate static map image from style Url to be used as icon
+ * @param {Object} param
+ * @param {string} param.styleUrl
+ * @param {string} param.mapboxApiAccessToken
+ * @param {string} param.mapboxApiUrl
+ * @param {Object} param.mapState
+ * @param {number} param.mapW
+ * @param {number} param.mapH
+ */
+export function getStyleImageIcon({
+  styleUrl,
+  mapboxApiAccessToken,
+  mapboxApiUrl = DEFAULT_MAPBOX_API_URL,
+  mapState = {
+    longitude: -122.3391,
+    latitude: 37.7922,
+    zoom: 9
+  },
+  mapW = 400,
+  mapH = 300
+}) {
+  const styleId = styleUrl.replace('mapbox://styles/', '');
+
+  return (
+    `${mapboxApiUrl}/styles/v1/${styleId}/static/` +
+    `${mapState.longitude},${mapState.latitude},${mapState.zoom},0,0/` +
+    `${mapW}x${mapH}` +
+    `?access_token=${mapboxApiAccessToken}&logo=false&attribution=false`
+  );
+}
+
+export function scaleMapStyleByResolution(mapboxStyle, scale) {
+  if (scale !== 1 && mapboxStyle) {
+    const labelLayerGroup = DEFAULT_LAYER_GROUPS.find(lg => lg.slug === 'label');
+    // @ts-ignore
+    const {filter: labelLayerFilter} = labelLayerGroup;
+    const zoomOffset = Math.log2(scale);
+
+    const copyStyle = clondDeep(mapboxStyle);
+    (copyStyle.layers || []).forEach(d => {
+      // edit minzoom and maxzoom
+      if (d.maxzoom) {
+        d.maxzoom = Math.max(d.maxzoom + zoomOffset, 1);
+      }
+
+      if (d.minzoom) {
+        d.minzoom = Math.max(d.minzoom + zoomOffset, 1);
+      }
+
+      // edit text size
+      if (labelLayerFilter(d)) {
+        if (d.layout && d.layout['text-size'] && Array.isArray(d.layout['text-size'].stops)) {
+          d.layout['text-size'].stops.forEach(stop => {
+            // zoom
+            stop[0] = Math.max(stop[0] + zoomOffset, 1);
+            // size
+            stop[1] *= scale;
+          });
+        }
+      }
+    });
+
+    return copyStyle;
+  }
+
+  return mapboxStyle;
+}
+
+/**
+ * When switch to a new style, try to keep current layer group visibility
+ * by merging default and current
+ * @param {Object} defaultLayerGroup
+ * @param {Object} currentLayerGroup
+ * @return {Object} mergedLayerGroups
+ */
+export function mergeLayerGroupVisibility(defaultLayerGroup, currentLayerGroup) {
+  return Object.keys(defaultLayerGroup).reduce(
+    (accu, key) => ({
+      ...accu,
+      ...(currentLayerGroup.hasOwnProperty(key) ? {[key]: currentLayerGroup[key]} : {})
+    }),
+    defaultLayerGroup
+  );
+}

package/src/utils/map-style-utils/mapbox-utils.js

@@ -0,0 +1,28 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+export const transformRequest = url => {
+  const isMapboxRequest =
+    url.slice(8, 22) === 'api.mapbox.com' || url.slice(10, 26) === 'tiles.mapbox.com';
+
+  return {
+    url: isMapboxRequest ? url.replace('?', '?pluginName=Keplergl&') : url
+  };
+};

package/src/utils/mapbox-utils.js

@@ -0,0 +1,27 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+/**
+ * This method validates mapbox token.
+ * This token provides a simple synchronous validation
+ * @param {string} token the Mapbox token to validate
+ * @return {boolean} true if token is valid, false otherwise
+ */
+export const validateToken = token => (token || '') !== '';

package/src/utils/notifications-utils.js

@@ -0,0 +1,83 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {generateHashId} from './utils';
+
+import {
+  DEFAULT_NOTIFICATION_MESSAGE,
+  DEFAULT_NOTIFICATION_TOPICS,
+  DEFAULT_NOTIFICATION_TYPES,
+  DEFAULT_UUID_COUNT
+} from 'constants/default-settings';
+
+import {BUG_REPORT_LINK} from 'constants/user-guides';
+
+/**
+ * Creates a notification
+ * @param {object} opt
+ * @param {string} opt.message - Message to display during the notification
+ * @param {string} opt.type - The type of message. One of DEFAULT_NOTIFICATION_TYPES
+ * @param {string} opt.topic - The topic the notification belongs to. One of DEFAULT_NOTIFICATION_TOPICS
+ * @param {string} opt.id optional id for notification. If not provided it will be generated by the method
+ * @param {object} opt.options - Extra parameters to store as part of hte notification
+ * @returns {object}
+ */
+export function createNotification({
+  message = DEFAULT_NOTIFICATION_MESSAGE,
+  type = DEFAULT_NOTIFICATION_TYPES.info,
+  topic = DEFAULT_NOTIFICATION_TOPICS.global,
+  id = generateHashId(DEFAULT_UUID_COUNT),
+  ...options
+}) {
+  return {
+    ...options,
+    id,
+    message,
+    type,
+    topic
+  };
+}
+
+/**
+ * Creates an error notification
+ * @param options
+ * @returns {{topic, id, message, type: (null|number)}}
+ */
+export const errorNotification = options => ({
+  ...createNotification(options),
+  type: DEFAULT_NOTIFICATION_TYPES.error
+});
+
+/**
+ * Creates a success notification
+ * @param options
+ * @returns {{topic, id, message, type: null}}
+ */
+export const successNotification = options => ({
+  ...createNotification(options),
+  type: DEFAULT_NOTIFICATION_TYPES.success
+});
+
+export const exportImageError = options =>
+  errorNotification({
+    ...options,
+    topic: DEFAULT_NOTIFICATION_TOPICS.global,
+    message: `Failed to export image, please take a screenshot of the javascript console, report the with [this link](${BUG_REPORT_LINK}) `
+  });

package/src/utils/observe-dimensions.d.ts

@@ -0,0 +1,18 @@
+import {RefObject} from 'react';
+
+export interface Dimensions {
+  readonly height: number;
+  readonly width: number;
+}
+
+export default function useDimensions<T extends Element>(
+  throttleDelay?: number
+): [RefObject<T>, Dimensions | undefined];
+
+export function observeDimensions(
+  target: Element,
+  handleResize: (size: Dimensions) => void,
+  throttleDelay?: number
+);
+
+export function unobserveDimensions(target: Element);