@youcan/celeste 0.6.3

package/src/utils/color.ts

@@ -0,0 +1,131 @@
+// TYPES
+export type ArrowDirection = 'up' | 'down' | 'left' | 'right';
+
+export type RGBKey = 'r' | 'g' | 'b';
+export type HSLKey = 'h' | 's' | 'l';
+export type HSBKey = 'h' | 's' | 'v';
+export type AlphaKey = 'a';
+export type ColorKey = RGBKey | HSLKey | HSBKey | AlphaKey;
+
+export interface Coordinates {
+  x: number;
+  y: number;
+}
+
+// VALIDATION
+export const COLOR_NUMBER_VALIDATION_PATTERN = /^\d*\s?[%°]?$/;
+export const HEX_VALIDATION_PATTERN = /^#?[0-9a-f]{0,6}$/i;
+
+// VALUES
+export const DEFAULT_SWATCH = [
+  '#717784ff',
+  '#335cffff',
+  '#ff8547ff',
+  '#fb3747ff',
+  '#1fc16bff',
+  '#f6b51eff',
+  '#7e52f4ff',
+  '#47c2ffff',
+];
+
+// MATH
+export function getFractionDigit(data: number | string): number {
+  const str = data.toString();
+
+  if (str.includes('.')) {
+    return str.split('.')[1].length;
+  }
+
+  return 0;
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function truncColorValue(value: string): number {
+  return Math.trunc(Number(value.replace(/[%°]/g, '').trim()));
+}
+
+export function getColorConstraints(key: ColorKey): { min: number; max: number } {
+  const min = 0;
+  let max = 0;
+
+  if (key === 'r' || key === 'g' || key === 'b') {
+    max = 255;
+  }
+
+  if (key === 'h') {
+    max = 359;
+  }
+
+  if (['s', 'l', 'v', 'a'].includes(key)) {
+    max = 100;
+  }
+
+  return {
+    min,
+    max,
+  };
+}
+
+export function bumpColorValue(value: number, direction: Omit<ArrowDirection, 'left' | 'right'> | null): number {
+  let multiplier = 0;
+
+  switch (direction) {
+    case 'down':
+      multiplier = -1;
+      break;
+    case 'up':
+      multiplier = 1;
+      break;
+  }
+
+  return value + multiplier;
+}
+
+// DOM
+export function getPageXYFromEvent(e: MouseEvent | TouchEvent): Coordinates {
+  const coordinates: Coordinates = { x: 0, y: 0 };
+  if (e instanceof MouseEvent) {
+    coordinates.x = e.pageX;
+    coordinates.y = e.pageY;
+  }
+
+  if (typeof TouchEvent !== 'undefined' && e instanceof TouchEvent) {
+    coordinates.x = (e.touches ? e.touches[0].pageX : e.changedTouches ? e.changedTouches[0].pageX : 0);
+    coordinates.y = (e.touches ? e.touches[0].pageY : e.changedTouches ? e.changedTouches[0].pageY : 0);
+  }
+
+  return coordinates;
+}
+
+export function getScrollXY(): Coordinates {
+  const x = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft || 0;
+  const y = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || 0;
+
+  return { x, y };
+}
+
+/** get the position of the container relative to the document’s edge, regardless of any scrolling that has occurred */
+export function getAbsolutePosition(container: HTMLElement): Coordinates {
+  const { x: scrollX, y: scrollY } = getScrollXY();
+
+  const rect = container.getBoundingClientRect();
+
+  return {
+    x: rect.left + scrollX,
+    y: rect.top + scrollY,
+  };
+}
+
+export function resolveArrowDirection(e: KeyboardEvent): ArrowDirection {
+  const arrowMap: Record<string, ArrowDirection> = {
+    ArrowUp: 'up',
+    ArrowDown: 'down',
+    ArrowLeft: 'left',
+    ArrowRight: 'right',
+  };
+
+  return arrowMap[e.code];
+}

package/src/utils/crypto.ts

@@ -0,0 +1,6 @@
+export function uid(prefix = '', random = false): string {
+  const sec = Date.now() * 1000 + Math.random() * 1000;
+  const id = sec.toString(16).replace(/\./g, '').padEnd(14, '0');
+
+  return `${prefix}${id}${random ? `.${Math.trunc(Math.random() * 100000000)}` : ''}`;
+};