@snack-uikit/color-picker 0.0.1-preview-364c0f5c.0

package/src/utils/convert.ts

@@ -0,0 +1,229 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { HslaColor, HslColor, HsvaColor, HsvColor, RgbaColor, RgbColor } from 'react-colorful';
+
+import { HSVA_REGEX, RGBA_REGEX } from '../constants';
+import { Color, RawColor } from '../types';
+import { round } from './round';
+import {
+  isHslaColor,
+  isHslaString,
+  isHslColor,
+  isHsvaColor,
+  isHsvaString,
+  isHsvColor,
+  isRbgaString,
+  isRbgColor,
+  isRgbaColor,
+} from './typeGuards';
+
+/**
+ * Valid CSS <angle> units.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/angle
+ */
+const angleUnits: Record<string, number> = {
+  grad: 360 / 400,
+  turn: 360,
+  rad: 360 / (Math.PI * 2),
+};
+
+const hexToHsva = (hex: string): HsvaColor => rgbaToHsva(hexToRgba(hex));
+export const hexToRgba = (hex: string): RgbaColor => {
+  if (hex[0] === '#') hex = hex.substring(1);
+
+  if (hex.length < 6) {
+    return {
+      r: parseInt(hex[0] + hex[0], 16),
+      g: parseInt(hex[1] + hex[1], 16),
+      b: parseInt(hex[2] + hex[2], 16),
+      a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1,
+    };
+  }
+
+  return {
+    r: parseInt(hex.substring(0, 2), 16),
+    g: parseInt(hex.substring(2, 4), 16),
+    b: parseInt(hex.substring(4, 6), 16),
+    a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1,
+  };
+};
+
+const parseHue = (value: string, unit = 'deg'): number => Number(value) * (angleUnits[unit] || 1);
+
+const hslaStringToHsva = (hslString: string): HsvaColor => {
+  const matcher =
+    /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+  const match = matcher.exec(hslString);
+
+  if (!match) return { h: 0, s: 0, v: 0, a: 1 };
+
+  return hslaToHsva({
+    h: parseHue(match[1], match[2]),
+    s: Number(match[3]),
+    l: Number(match[4]),
+    a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
+  });
+};
+
+const hslaToHsva = ({ h, s, l, a }: HslaColor): HsvaColor => {
+  s *= (l < 50 ? l : 100 - l) / 100;
+
+  return {
+    h: h,
+    s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,
+    v: l + s,
+    a,
+  };
+};
+
+const hsvaToHex = (hsva: HsvaColor): string => rgbaToHex(hsvaToRgba(hsva));
+
+export const hsvaToHsla = ({ h, s, v, a }: HsvaColor): HslaColor => {
+  const hh = ((200 - s) * v) / 100;
+
+  return {
+    h: round(h),
+    s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),
+    l: round(hh / 2),
+    a: round(a, 2),
+  };
+};
+
+const hsvaToRgba = ({ h, s, v, a }: HsvaColor): RgbaColor => {
+  h = (h / 360) * 6;
+  s = s / 100;
+  v = v / 100;
+
+  const hh = Math.floor(h),
+    b = v * (1 - s),
+    c = v * (1 - (h - hh) * s),
+    d = v * (1 - (1 - h + hh) * s),
+    module = hh % 6;
+
+  return {
+    r: round([v, c, b, b, d, v][module] * 255),
+    g: round([d, v, v, c, b, b][module] * 255),
+    b: round([b, b, d, v, v, c][module] * 255),
+    a: round(a, 2),
+  };
+};
+
+const hsvaStringToHsva = (hsvString: string): HsvaColor => {
+  const matcher = HSVA_REGEX;
+  const match = matcher.exec(hsvString);
+
+  if (!match) return { h: 0, s: 0, v: 0, a: 1 };
+
+  return roundHsva({
+    h: parseHue(match[1], match[2]),
+    s: Number(match[3]),
+    v: Number(match[4]),
+    a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
+  });
+};
+
+const rgbaStringToHsva = (rgbaString: string): HsvaColor => {
+  const matcher = RGBA_REGEX;
+  const match = matcher.exec(rgbaString);
+
+  if (!match) return { h: 0, s: 0, v: 0, a: 1 };
+
+  return rgbaToHsva({
+    r: Number(match[1]) / (match[2] ? 100 / 255 : 1),
+    g: Number(match[3]) / (match[4] ? 100 / 255 : 1),
+    b: Number(match[5]) / (match[6] ? 100 / 255 : 1),
+    a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1),
+  });
+};
+
+const format = (number: number) => {
+  const hex = number.toString(16);
+  return hex.length < 2 ? '0' + hex : hex;
+};
+
+export const rgbaToHex = ({ r, g, b, a }: RgbaColor): string => {
+  const alphaHex = a < 1 ? format(round(a * 255)) : '';
+  return '#' + format(r) + format(g) + format(b) + alphaHex;
+};
+
+export const rgbaToHsva = ({ r, g, b, a }: RgbaColor): HsvaColor => {
+  const max = Math.max(r, g, b);
+  const delta = max - Math.min(r, g, b);
+
+  // prettier-ignore
+  // eslint-disable-next-line no-nested-ternary
+  const hh = delta
+    // eslint-disable-next-line no-nested-ternary
+    ? max === r
+      ? (g - b) / delta
+      : max === g
+        ? 2 + (b - r) / delta
+        : 4 + (r - g) / delta
+    : 0;
+
+  return {
+    h: round(60 * (hh < 0 ? hh + 6 : hh)),
+    s: round(max ? (delta / max) * 100 : 0),
+    v: round((max / 255) * 100),
+    a,
+  };
+};
+
+export const roundHsva = (hsva: HsvaColor): HsvaColor => ({
+  h: round(hsva.h),
+  s: round(hsva.s),
+  v: round(hsva.v),
+  a: round(hsva.a, 2),
+});
+
+export const rgbaToRgb = ({ r, g, b }: RgbaColor): RgbColor => ({ r, g, b });
+
+export const hslaToHsl = ({ h, s, l }: HslaColor): HslColor => ({ h, s, l });
+
+export const hsvaToHsv = (hsva: HsvaColor): HsvColor => {
+  const { h, s, v } = roundHsva(hsva);
+  return { h, s, v };
+};
+
+export function colorToHex(value: Color): string {
+  if (isHslColor(value) || isHslaColor(value)) {
+    return hsvaToHex(hslaToHsva({ a: 1, ...value }));
+  }
+
+  if (isRbgColor(value) || isRgbaColor(value)) {
+    return rgbaToHex({ a: 1, ...value });
+  }
+
+  if (isHsvColor(value) || isHsvaColor(value)) {
+    return hsvaToHex({ a: 1, ...value });
+  }
+
+  if (isHslaString(value)) {
+    return hsvaToHex(hslaStringToHsva(value));
+  }
+
+  if (isRbgaString(value)) {
+    return hsvaToHex(rgbaStringToHsva(value));
+  }
+
+  if (isHsvaString(value)) {
+    return hsvaToHex(hsvaStringToHsva(value));
+  }
+
+  return value;
+}
+
+export function colorToRawValue(value: Color): RawColor {
+  const hexColor = colorToHex(value);
+
+  return {
+    hex: hexColor,
+    rgb: rgbaToRgb(hexToRgba(hexColor)),
+    rgba: hexToRgba(hexColor),
+    hsv: hsvaToHsv(hexToHsva(hexColor)),
+    hsva: hexToHsva(hexColor),
+    hsl: hslaToHsl(hsvaToHsla(hexToHsva(hexColor))),
+    hsla: hsvaToHsla(hexToHsva(hexColor)),
+  };
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './convert';

package/src/utils/round.ts

@@ -0,0 +1,2 @@
+export const round = (number: number, digits = 0, base = Math.pow(10, digits)): number =>
+  Math.round(base * number) / base;

package/src/utils/typeGuards.ts

@@ -0,0 +1,47 @@
+import { HSLA_REGEX, HSVA_REGEX, RGBA_REGEX } from '../constants';
+import { Color, HslaColor, HslColor, HsvaColor, HsvColor, RgbaColor, RgbColor } from '../types';
+
+export function isRbgColor(value: Color): value is RgbColor {
+  return typeof value === 'object' && 'r' in value && 'g' in value && 'b' in value;
+}
+
+export function isRgbaColor(value: Color): value is RgbaColor {
+  return typeof value === 'object' && isRbgColor(value) && 'a' in value;
+}
+
+export function isHslColor(value: Color): value is HslColor {
+  return typeof value === 'object' && 'h' in value && 's' in value && 'l' in value;
+}
+
+export function isHslaColor(value: Color): value is HslaColor {
+  return typeof value === 'object' && isHslColor(value) && 'a' in value;
+}
+
+export function isHsvColor(value: Color): value is HsvColor {
+  return typeof value === 'object' && 'h' in value && 's' in value && 'v' in value;
+}
+
+export function isHsvaColor(value: Color): value is HsvaColor {
+  return typeof value === 'object' && isHsvColor(value) && 'a' in value;
+}
+
+export function isHslaString(value: string) {
+  const matcher = HSLA_REGEX;
+  const match = matcher.exec(value);
+
+  return Boolean(match);
+}
+
+export function isHsvaString(value: string) {
+  const matcher = HSVA_REGEX;
+  const match = matcher.exec(value);
+
+  return Boolean(match);
+}
+
+export function isRbgaString(value: string) {
+  const matcher = RGBA_REGEX;
+  const match = matcher.exec(value);
+
+  return Boolean(match);
+}

package/src/utils/validate.ts

@@ -0,0 +1,13 @@
+const matcher = /^#?([0-9A-F]{3,8})$/i;
+
+export const validHex = (value: string, alpha?: boolean): boolean => {
+  const match = matcher.exec(value);
+  const length = match ? match[1].length : 0;
+
+  return (
+    length === 3 || // '#rgb' format
+    length === 6 || // '#rrggbb' format
+    (Boolean(alpha) && length === 4) || // '#rgba' format
+    (Boolean(alpha) && length === 8) // '#rrggbbaa' format
+  );
+};