@kiva/kv-components 4.8.6 → 5.1.0

package/utils/mapUtils.js

@@ -1,360 +0,0 @@
-/**
- * Code to generate random coordinates
- * */
-function getRandomInRange(from, to, fixed) {
-	return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
-	// .toFixed() returns string, so ' * 1' is a trick to convert to number
-}
-const randomCoordinates = Array.from(
-	{ length: 20 },
-	() => [getRandomInRange(-180, 180, 3), getRandomInRange(-90, 90, 3)],
-);
-
-/**
- * Color indexes for the map
- * */
-const mapColors = [
-	100,
-	300,
-	500,
-	650,
-	800,
-	1000,
-];
-
-/**
- * Given 2 coordinates and the number of steps return an array of coordinates in between
- * @param {Array} startCoordinates - starting coordinates in the format [latitude, longitude]
- * @param {Array} endCoordinates - ending coordinates in the format [latitude, longitude]
- * @param {Number} numberOfSteps - number of steps to take between the start and end coordinates
- * @returns {Array} - array of coordinates in the format [[latitude, longitude], [latitude, longitude]]
-*/
-export function getCoordinatesBetween(startCoordinates, endCoordinates, numberOfSteps) {
-	// All invalid inputs should return an empty array
-	if (!startCoordinates
-		|| !endCoordinates
-		|| !numberOfSteps
-		|| numberOfSteps < 1
-		|| !Array.isArray(startCoordinates)
-		|| !Array.isArray(endCoordinates)
-		|| startCoordinates.length !== 2 || endCoordinates.length !== 2) {
-		return [];
-	}
-	const diffX = endCoordinates[0] - startCoordinates[0];
-	const diffY = endCoordinates[1] - startCoordinates[1];
-
-	const sfX = diffX / numberOfSteps;
-	const sfY = diffY / numberOfSteps;
-
-	let i = 0;
-	let j = 0;
-
-	const lineCoordinates = [];
-
-	while (Math.abs(i) < Math.abs(diffX) || Math.abs(j) < Math.abs(diffY)) {
-		lineCoordinates.push([startCoordinates[0] + i, startCoordinates[1] + j]);
-
-		if (Math.abs(i) < Math.abs(diffX)) {
-			i += sfX;
-		}
-
-		if (Math.abs(j) < Math.abs(diffY)) {
-			j += sfY;
-		}
-	}
-	// Because of rounding errors, lets push the exact end coordinates
-	// as the last item in the array to make sure the line ends precisely
-	lineCoordinates[lineCoordinates.length - 1] = [endCoordinates[0], endCoordinates[1]];
-	return lineCoordinates;
-}
-
-/**
- * This function animates a series of lines from an array of starting coordinates to a single end point
- * then animates removing the line from the origin to the end point
- * returns a promise when the animation is complete
- * @param {Map Instance} mapInstance - the map instance
- * @param {Array} originPoints - array of starting coordinates in the format [[latitude, longitude], [latitude, longitude]]
- * @param {Array} endPoint - single end point in the format [latitude, longitude]
- * @returns {Promise} - promise that resolves when the animation is complete
-*/
-function animateLines(mapInstance, originPoints, endPoint) {
-	const speedFactor = 100; // number of frames per degree, controls animation speed
-	return new Promise((resolve) => {
-		// EndPoint
-		mapInstance.addSource('endpoint', {
-			type: 'geojson',
-			data: {
-				type: 'Point',
-				coordinates: [
-					endPoint[0], endPoint[1],
-				],
-			},
-		});
-
-		const lineFlight = (startCoordinates, endCoordinates, index, lastLine = false) => {
-			const lineCoordinates = getCoordinatesBetween(startCoordinates, endCoordinates, speedFactor);
-			let animationCounter = 0;
-
-			// Create a GeoJSON source with an empty lineString.
-			const geojson = {
-				type: 'FeatureCollection',
-				features: [{
-					type: 'Feature',
-					geometry: {
-						type: 'LineString',
-						coordinates: [],
-					},
-				}],
-			};
-
-			// Start Point
-			mapInstance.addSource(`startPoint${index}`, {
-				type: 'geojson',
-				data: {
-					type: 'Point',
-					coordinates: [
-						startCoordinates[0], startCoordinates[1],
-					],
-				},
-			});
-
-			// Line
-			mapInstance.addLayer({
-				id: `line-animation${index}`,
-				type: 'line',
-				source: {
-					type: 'geojson',
-					data: geojson,
-				},
-				layout: {
-					'line-cap': 'round',
-					'line-join': 'round',
-				},
-				paint: {
-					'line-color': '#277056',
-					'line-width': 2,
-				},
-			});
-
-			const animateLine = () => {
-				if (animationCounter < lineCoordinates.length) {
-					geojson.features[0].geometry.coordinates.push(lineCoordinates[animationCounter]);
-					mapInstance.getSource(`line-animation${index}`).setData(geojson);
-
-					requestAnimationFrame(animateLine);
-					animationCounter += 1;
-				} else {
-					// This else block is for animating line removal from start to end
-					const coord = geojson.features[0].geometry.coordinates;
-					// remove 2 points at a time so the removal is twice as fast as the line creation
-					coord.shift();
-					coord.shift();
-
-					if (coord.length > 0) {
-						geojson.features[0].geometry.coordinates = coord;
-						mapInstance.getSource(`line-animation${index}`).setData(geojson);
-						requestAnimationFrame(animateLine);
-					} else {
-						// remove all sources to allow for new animation
-						mapInstance.removeLayer(`line-animation${index}`);
-						mapInstance.removeSource(`line-animation${index}`);
-						mapInstance.removeSource(`startPoint${index}`);
-
-						if (lastLine) {
-							mapInstance.removeSource('endpoint');
-							resolve();
-						}
-					}
-				}
-			};
-
-			animateLine();
-		};
-
-		originPoints.forEach((coordinate, index) => {
-			lineFlight(coordinate, endPoint, index, index === originPoints.length - 1);
-		});
-	});
-}
-
-/**
- * This function generates a map marker for each borrowerPoint
- * @param {Map Instance} mapInstance - the map instance
- * @param {Array} borrowerPoints - array of borrower objects
- * @returns {void}
- * */
-export function generateMapMarkers(mapInstance, borrowerPoints) {
-	const geojson = {
-		type: 'FeatureCollection',
-	};
-
-	geojson.features = borrowerPoints.map((borrower) => ({
-		type: 'Feature',
-		properties: {
-			message: 'test',
-			image: borrower.image,
-			iconSize: [80, 80],
-		},
-		geometry: {
-			type: 'Point',
-			coordinates: borrower.location,
-		},
-	}));
-	// add markers to map
-	geojson.features.forEach((marker) => {
-		// create a DOM element for the marker
-		const el = document.createElement('div');
-		el.className = 'map-marker';
-		el.style.backgroundImage = `url(${marker.properties.image})`;
-		el.style.width = `${marker.properties.iconSize[0]}px`;
-		el.style.height = `${marker.properties.iconSize[1]}px`;
-
-		// Possible place to add an event listener
-		// el.addEventListener('click', () => {
-		// 	window.alert(marker.properties.message);
-		// });
-
-		// add marker to map
-		// maplibregl should be defined in the KvMap component
-		// eslint-disable-next-line no-undef
-		new maplibregl.Marker({ element: el })
-			.setLngLat(marker.geometry.coordinates)
-			.addTo(mapInstance);
-	});
-}
-
-/**
- * This function animates a series of lines from an array of starting coordinates to a single end point
- * then animates removing the line from the origin to the end point
- * then flies to the next point in the array and repeats the animation
- * returns a promise when the animation is complete
- * @param {Map Instance} mapInstance - the map instance
- * @param {Array} borrowerPoints - array of borrower objects
- * @returns {Promise} - promise that resolves when the animation is complete
- * */
-export function animationCoordinator(mapInstance, borrowerPoints) {
-	return new Promise((resolve) => {
-		const destinationPoints = borrowerPoints.map((borrower) => borrower.location);
-		const totalNumberOfPoints = destinationPoints.length;
-		let currentPointIndex = 0;
-
-		const flyToPoint = (index) => {
-			mapInstance.flyTo({
-				// These options control the ending camera position: centered at
-				// the target, at zoom level 9, and north up.
-				center: destinationPoints[index],
-				zoom: 4,
-				bearing: 0,
-
-				// These options control the flight curve, making it move
-				// slowly and zoom out almost completely before starting
-				// to pan.
-				speed: 0.9, // make the flying slow
-				curve: 1, // change the speed at which it zooms out
-
-				// This can be any easing function: it takes a number between
-				// 0 and 1 and returns another number between 0 and 1.
-				easing(t) {
-					return t;
-				},
-
-				// this animation is considered essential with respect to prefers-reduced-motion
-				essential: true,
-			}, { flyEnd: true });
-		};
-
-		// This will trigger the next steps in the animation chain
-		mapInstance.on('moveend', (event) => {
-			if (event.flyEnd === true) {
-				animateLines(mapInstance, randomCoordinates, destinationPoints[currentPointIndex])
-					.then(() => {
-						if (currentPointIndex < totalNumberOfPoints - 1) {
-							currentPointIndex += 1;
-							flyToPoint(currentPointIndex);
-						} else {
-							resolve();
-						}
-					});
-			}
-		});
-
-		// fly to point 1
-		flyToPoint(currentPointIndex);
-	});
-}
-
-/**
- * This function returns an array of not overlapped intervals between min and max
- * @param {Integer} min - min number of the interval
- * @param {Integer} max - max number of the interval
- * @param {Integer} nbIntervals - number of intervals
- * @returns {Array} - array with intervals
- * */
-export const getLoansIntervals = (min, max, nbIntervals) => {
-	const size = Math.floor((max - min) / nbIntervals);
-	const result = [];
-
-	if (size <= 0) return [[min, max]];
-
-	for (let i = 0; i < nbIntervals; i += 1) {
-		let inf = min + (i * size);
-		let sup = ((inf + size) < max) ? inf + size : max;
-
-		if (i > 0) {
-			inf += (1 * i);
-			sup += (1 * i);
-		}
-
-		if (i > 0 && sup > max) {
-			sup = max;
-		}
-
-		if (i === (nbIntervals - 1)) {
-			if (sup < max || sup > max) sup = max;
-		}
-
-		result.push([inf, sup]);
-
-		if (sup >= max) break;
-	}
-
-	return result;
-};
-
-/**
- * This function returns the color of the country based on the number of loans
- * @param {Integer} lenderLoans - number of loans per country
- * @param {Array} countriesData - data of countries
- * @param {Object} kvTokensPrimitives - kv tokens for colors
- * @returns {String} - color of the country
- * */
-export const getCountryColor = (lenderLoans, countriesData, kvTokensPrimitives) => {
-	const loanCountsArray = [];
-	countriesData.forEach((country) => {
-		loanCountsArray.push(country.value);
-	});
-
-	const maxNumLoansToOneCountry = Math.max(...loanCountsArray);
-	const intervals = getLoansIntervals(1, maxNumLoansToOneCountry, 6);
-
-	if (intervals.length === 1) {
-		const [inf, sup] = intervals[0]; // eslint-disable-line no-unused-vars
-
-		for (let i = 0; i < sup; i += 1) {
-			const loansNumber = i + 1;
-
-			if (lenderLoans && lenderLoans >= loansNumber && lenderLoans < loansNumber + 1) {
-				return kvTokensPrimitives.colors.brand[mapColors[i]];
-			}
-		}
-	} else {
-		for (let i = 0; i < intervals.length; i += 1) {
-			const [inf, sup] = intervals[i];
-			if (lenderLoans && lenderLoans >= inf && lenderLoans <= sup) {
-				return kvTokensPrimitives.colors.brand[mapColors[i]];
-			}
-		}
-	}
-
-	return kvTokensPrimitives.colors.gray[300];
-};

package/utils/printing.js

@@ -1,13 +0,0 @@
-export function lockPrintSingleEl(domNode) {
-	if (typeof window !== 'undefined' && domNode) {
-		document.body.classList.add('print:tw-invisible', 'print:tw-overflow-hidden');
-		domNode.classList.add('print:tw-visible', 'print:tw-overflow-auto');
-	}
-}
-
-export function unlockPrintSingleEl(domNode) {
-	if (typeof window !== 'undefined' && domNode) {
-		document.body.classList.remove('print:tw-invisible', 'print:tw-overflow-hidden');
-		domNode.classList.remove('print:tw-visible', 'print:tw-overflow-auto');
-	}
-}

package/utils/scrollLock.js

@@ -1,25 +0,0 @@
-export function lockScroll() {
-	if (typeof window !== 'undefined') {
-		document.body.style.overflow = 'hidden'; // kludge until we are not prefixing tailwind classes in UI
-		// document.body.classList.add('tw-overflow-hidden');
-	}
-}
-
-export function unlockScroll() {
-	if (typeof window !== 'undefined') {
-		document.body.style.overflow = null; // kludge until we are not prefixing tailwind classes in UI
-		// document.body.classList.remove('tw-overflow-hidden');
-	}
-}
-
-export function lockScrollSmallOnly() {
-	if (typeof window !== 'undefined') {
-		document.body.classList.add('tw-overflow-hidden', 'md:tw-overflow-auto');
-	}
-}
-
-export function unlockScrollSmallOnly() {
-	if (typeof window !== 'undefined') {
-		document.body.classList.remove('tw-overflow-hidden', 'md:tw-overflow-auto');
-	}
-}

package/utils/themeUtils.cjs

@@ -1,29 +0,0 @@
-const headerNumberCase = (str) => str
-	.replace('h-1', 'h1')
-	.replace('h-2', 'h2')
-	.replace('h-3', 'h3')
-	.replace('h-4', 'h4')
-	.replace('h-5', 'h5');
-
-const buildTailwindClassName = (prefix, value) => {
-	let name = `${prefix}-${value}`;
-	name = name.replace('-DEFAULT', '');
-	return name;
-};
-
-const kebabCase = (str) => str.split('').map((letter, idx) => (letter.toUpperCase() === letter
-	? `${idx !== 0 ? '-' : ''}${letter.toLowerCase()}`
-	: letter)).join('');
-
-const removeObjectProperty = (object, key) => {
-	const ret = { ...object };
-	delete ret[key];
-	return ret;
-};
-
-module.exports = {
-	buildTailwindClassName,
-	headerNumberCase,
-	kebabCase,
-	removeObjectProperty,
-};

package/utils/throttle.js

@@ -1,11 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export function throttle(func, timeFrame) {
-	let lastTime = 0;
-	return function t(...args) {
-		const now = new Date();
-		if (now - lastTime >= timeFrame) {
-			func(...args);
-			lastTime = now;
-		}
-	};
-}

package/utils/touchEvents.js

@@ -1,22 +0,0 @@
-// Attach a touchstart event handler to the immediate children of the body.
-// Useful for capturing the user tapping outside of a target element.
-export function onBodyTouchstart(handler) {
-	[...document.body.children].forEach((child) => child.addEventListener('touchstart', handler));
-}
-
-// Remove a touchstart event handler from the immediate children of the body
-export function offBodyTouchstart(handler) {
-	[...document.body.children].forEach((child) => child.removeEventListener('touchstart', handler));
-}
-
-// Returns true if the event target is any of the given elements or if the event target
-// is contained by any of the given elements.
-export function isTargetElement(event, elements) {
-	const els = Array.isArray(elements) ? elements : [elements];
-	for (let i = 0; i < els.length; i += 1) {
-		if (els[i] === event.target || els[i].contains(event.target)) {
-			return true;
-		}
-	}
-	return false;
-}

package/utils/treemap.js

@@ -1,138 +0,0 @@
-/* eslint-disable import/prefer-default-export, max-len, no-shadow */
-
-const getMaximum = (array) => Math.max(...array);
-
-const getMinimum = (array) => Math.min(...array);
-
-const sumReducer = (acc, cur) => acc + cur;
-
-const roundValue = (number) => Math.max(Math.round(number * 100) / 100, 0);
-
-const validateArguments = ({ data, width, height }) => {
-	if (!width || typeof width !== 'number' || width < 0) {
-		throw new Error('You need to specify the width of your treemap');
-	}
-	if (!height || typeof height !== 'number' || height < 0) {
-		throw new Error('You need to specify the height of your treemap');
-	}
-	if (!data || !Array.isArray(data) || data.length === 0 || !data.every((dataPoint) => Object.prototype.hasOwnProperty.call(dataPoint, 'value') && typeof dataPoint.value === 'number' && dataPoint.value >= 0 && !Number.isNaN(dataPoint.value))) {
-		throw new Error('You data must be in this format [{ value: 1 }, { value: 2 }], \'value\' being a positive number');
-	}
-};
-
-/**
- * Used to calculate the coordinates of a treemap representation following the "squarify" algorithm
- *
- * Clément Bataille, 2020
- * Licensed under the MIT license
- *
- * {@link https://github.com/clementbat/treemap}
- *
- * @param param0.data The coordinate data to use in the calculation
- * @param param0.width The width of the treemap
- * @param param0.height The height of the treemap
- * @returns The calculated coordinates
- */
-export function getTreemap({ data, width, height }) {
-	let Rectangle = {};
-	let initialData = [];
-
-	function worstRatio(row, width) {
-		const sum = row.reduce(sumReducer, 0);
-		const rowMax = getMaximum(row);
-		const rowMin = getMinimum(row);
-		return Math.max(((width ** 2) * rowMax) / (sum ** 2), (sum ** 2) / ((width ** 2) * rowMin));
-	}
-
-	const getMinWidth = () => {
-		if (Rectangle.totalHeight ** 2 > Rectangle.totalWidth ** 2) {
-			return { value: Rectangle.totalWidth, vertical: false };
-		}
-		return { value: Rectangle.totalHeight, vertical: true };
-	};
-
-	const layoutRow = (row, width, vertical) => {
-		const rowHeight = row.reduce(sumReducer, 0) / width;
-
-		row.forEach((rowItem) => {
-			const rowWidth = rowItem / rowHeight;
-			const { xBeginning } = Rectangle;
-			const { yBeginning } = Rectangle;
-
-			let data;
-			if (vertical) {
-				data = {
-					x: xBeginning,
-					y: yBeginning,
-					width: rowHeight,
-					height: rowWidth,
-					data: initialData[Rectangle.data.length],
-				};
-				Rectangle.yBeginning += rowWidth;
-			} else {
-				data = {
-					x: xBeginning,
-					y: yBeginning,
-					width: rowWidth,
-					height: rowHeight,
-					data: initialData[Rectangle.data.length],
-				};
-				Rectangle.xBeginning += rowWidth;
-			}
-
-			Rectangle.data.push(data);
-		});
-
-		if (vertical) {
-			Rectangle.xBeginning += rowHeight;
-			Rectangle.yBeginning -= width;
-			Rectangle.totalWidth -= rowHeight;
-		} else {
-			Rectangle.xBeginning -= width;
-			Rectangle.yBeginning += rowHeight;
-			Rectangle.totalHeight -= rowHeight;
-		}
-	};
-
-	const layoutLastRow = (rows, children, width) => {
-		const { vertical } = getMinWidth();
-		layoutRow(rows, width, vertical);
-		layoutRow(children, width, vertical);
-	};
-
-	const squarify = (children, row, width) => {
-		if (children.length === 1) {
-			return layoutLastRow(row, children, width);
-		}
-
-		const rowWithChild = [...row, children[0]];
-
-		if (row.length === 0 || worstRatio(row, width) >= worstRatio(rowWithChild, width)) {
-			children.shift();
-			return squarify(children, rowWithChild, width);
-		}
-		layoutRow(row, width, getMinWidth().vertical);
-		return squarify(children, [], getMinWidth().value);
-	};
-
-	validateArguments({ data, width, height });
-	Rectangle = {
-		data: [],
-		xBeginning: 0,
-		yBeginning: 0,
-		totalWidth: width,
-		totalHeight: height,
-	};
-	initialData = data;
-	const totalValue = data.map((dataPoint) => dataPoint.value).reduce(sumReducer, 0);
-	const dataScaled = data.map((dataPoint) => (dataPoint.value * height * width) / totalValue);
-
-	squarify(dataScaled, [], getMinWidth().value);
-	return Rectangle.data.map((dataPoint) => ({
-		...dataPoint,
-		x: roundValue(dataPoint.x),
-		y: roundValue(dataPoint.y),
-		width: roundValue(dataPoint.width),
-		height: roundValue(dataPoint.height),
-	}));
-}

package/vue/.storybook/main.js

@@ -1,88 +0,0 @@
-const path = require('path');
-module.exports = {
-	stories: [
-		'../stories/Styleguide.stories.js', // show the base styleguide first
-		'../stories/**/*.stories.mdx',
-		'../stories/**/*.stories.@(js|jsx|ts|tsx)'
-	],
-
-	staticDirs: [
-		'../../../../dist',
-	],
-
-	addons: [
-		"@storybook/addon-links",
-		"@storybook/addon-essentials",
-		"@storybook/addon-a11y",
-		"@storybook/addon-storysource",
-		{
-			name: '@storybook/addon-styling-webpack',
-			options: {
-				rules: [
-					// Replaces existing CSS rules to support PostCSS
-					{
-						test: /\.css$/,
-						use: [
-							'style-loader',
-							{
-								loader: 'css-loader',
-								options: { importLoaders: 1, url: false }
-							},
-							{
-								// Gets options from `postcss.config.js` in your project root
-								loader: 'postcss-loader',
-								options: { implementation: require.resolve('postcss') }
-							}
-						],
-					}
-				]
-			}
-		}
-	],
-
-	webpackFinal: async (config) => {
-		config.module.rules.push({
-			test: /\.mjs$/,
-			include: /node_modules/,
-			type: 'javascript/auto'
-		});
-		config.module.rules.push({
-			test: /\.postcss$/,
-			use: [
-				'style-loader',
-				{
-					loader: 'css-loader',
-					options: { importLoaders: 1, sourceMap: false },
-				},
-				{
-					loader: 'postcss-loader',
-					options: {
-						postcssOptions: {
-							plugins: [
-								require('tailwindcss'),
-								require('autoprefixer'),
-							]
-						}
-					},
-				}
-			]
-		});
-		config.resolve.alias = {
-			...config.resolve.alias,
-			'~/node_modules': path.resolve(__dirname, '../../../../node_modules/'),
-		};
-		return config;
-	},
-
-	framework: {
-		name: '@storybook/vue3-webpack5',
-		options: {}
-	},
-	core: {
-		builder: '@storybook/builder-webpack5'
-	},
-	docs: {
-		autodocs: true,
-		defaultName: 'Kv Components',
-	}
-};

package/vue/.storybook/package.json

@@ -1,3 +0,0 @@
-{
-	"type": "commonjs"
-}