ashalfarhan/array-utils.ts

## array-utils.ts
function chunk(arr = [], size = 1) {
  const compact = arr.slice(0, arr.length - (arr.length % size));
  const chunks = [];
  for (let i = 0; i < compact.length/ size; i++) {
    let start = i === 0 ? 0 : i * size;
    let end = i === 0 ? size : i * size + size;
    chunks.push(arr.slice(start, end))
  }
  chunks.push(arr.slice(compact.length, arr.length));
  return chunks
}

## color-utils.js
function randomHex(length = 6) {
  let letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < length; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}


/**
 * Shade given color.
 * @param {string} color Color in hex format
 * @param {number} percent Shade percentage e.g. `40` for lighten, `-40` for darken.
 */
function shadeColor(color, percent) {
  let R = parseInt(color.substring(1, 3), 16);
  let G = parseInt(color.substring(3, 5), 16);
  let B = parseInt(color.substring(5, 7), 16);

  R = parseInt((R * (100 + percent)) / 100);
  G = parseInt((G * (100 + percent)) / 100);
  B = parseInt((B * (100 + percent)) / 100);

  R = R < 255 ? R : 255;
  G = G < 255 ? G : 255;
  B = B < 255 ? B : 255;

  R = Math.round(R);
  G = Math.round(G);
  B = Math.round(B);

  let RR = R.toString(16).length == 1 ? '0' + R.toString(16) : R.toString(16);
  let GG = G.toString(16).length == 1 ? '0' + G.toString(16) : G.toString(16);
  let BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16);

  return '#' + RR + GG + BB;
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

const rgbToHex = (r, g, b) => '#' + [r, g, b]
  .map(x => x.toString(16).padStart(2, '0')).join('')

## json-utils.ts
/**
 * Utility to safely parse JSON from `localStorage`.
 *
 * @param val Value from Web Storage API
 * @param _default Fallback value if the `val` cannot be parsed
 */
export function safeParse<T>(val: unknown, _default: T): T {
  try {
    if (typeof val === 'string') {
      return JSON.parse(val);
    }
  } catch {}
  return _default;
}

## theme-preload.js
// Utility to preload theme from `localStorage` and will prevent flashing screen.
// This should be placed in the fist child of the <head> element.

let preloadedTheme = localStorage.getItem("theme");

if (preloadedTheme == null) {
  const isPreferDark = window.matchMedia('(prefers-color-scheme:dark)').matches;
  preloadedTheme = isPreferDark ? 'dark' : 'light';
}

if (preloadedTheme === "dark") {
  document.documentElement.classList.add("dark");
}

document.documentElement.style['color-scheme'] = preloadedTheme;
	function chunk(arr = [], size = 1) {
	const compact = arr.slice(0, arr.length - (arr.length % size));
	const chunks = [];
	for (let i = 0; i < compact.length/ size; i++) {
	let start = i === 0 ? 0 : i * size;
	let end = i === 0 ? size : i * size + size;
	chunks.push(arr.slice(start, end))
	}
	chunks.push(arr.slice(compact.length, arr.length));
	return chunks
	}
	function randomHex(length = 6) {
	let letters = "0123456789ABCDEF";
	let color = "#";
	for (let i = 0; i < length; i++) {
	color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
	}


	/**
	* Shade given color.
	* @param {string} color Color in hex format
	* @param {number} percent Shade percentage e.g. `40` for lighten, `-40` for darken.
	*/
	function shadeColor(color, percent) {
	let R = parseInt(color.substring(1, 3), 16);
	let G = parseInt(color.substring(3, 5), 16);
	let B = parseInt(color.substring(5, 7), 16);

	R = parseInt((R * (100 + percent)) / 100);
	G = parseInt((G * (100 + percent)) / 100);
	B = parseInt((B * (100 + percent)) / 100);

	R = R < 255 ? R : 255;
	G = G < 255 ? G : 255;
	B = B < 255 ? B : 255;

	R = Math.round(R);
	G = Math.round(G);
	B = Math.round(B);

	let RR = R.toString(16).length == 1 ? '0' + R.toString(16) : R.toString(16);
	let GG = G.toString(16).length == 1 ? '0' + G.toString(16) : G.toString(16);
	let BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16);

	return '#' + RR + GG + BB;
	}

	function hexToRgb(hex) {
	// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
	let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
	hex = hex.replace(shorthandRegex, function(m, r, g, b) {
	return r + r + g + g + b + b;
	});

	let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	return result ? {
	r: parseInt(result[1], 16),
	g: parseInt(result[2], 16),
	b: parseInt(result[3], 16)
	} : null;
	}

	const rgbToHex = (r, g, b) => '#' + [r, g, b]
	.map(x => x.toString(16).padStart(2, '0')).join('')
	/**
	* Utility to safely parse JSON from `localStorage`.
	*
	* @param val Value from Web Storage API
	* @param _default Fallback value if the `val` cannot be parsed
	*/
	export function safeParse<T>(val: unknown, _default: T): T {
	try {
	if (typeof val === 'string') {
	return JSON.parse(val);
	}
	} catch {}
	return _default;
	}
	// Utility to preload theme from `localStorage` and will prevent flashing screen.
	// This should be placed in the fist child of the <head> element.

	let preloadedTheme = localStorage.getItem("theme");

	if (preloadedTheme == null) {
	const isPreferDark = window.matchMedia('(prefers-color-scheme:dark)').matches;
	preloadedTheme = isPreferDark ? 'dark' : 'light';
	}

	if (preloadedTheme === "dark") {
	document.documentElement.classList.add("dark");
	}

	document.documentElement.style['color-scheme'] = preloadedTheme;