react-native-color-picker-palette 1.0.0

package/src/core/services/ColorService.ts

@@ -0,0 +1,338 @@
+import type { IColor, IRGB, IHSV, ColorModel } from '../types';
+import { clamp, toHexString } from '../utils';
+
+/**
+ * ColorService - Handles all color conversions between HEX, RGB, and HSV
+ *
+ * @example
+ * // Convert from hex
+ * const color = ColorService.fromHex('#FF5500');
+ *
+ * // Convert from RGB
+ * const color = ColorService.fromRgb({ r: 255, g: 85, b: 0, a: 1 });
+ *
+ * // Convert from HSV
+ * const color = ColorService.fromHsv({ h: 20, s: 100, v: 100, a: 1 });
+ *
+ * // Get string representations
+ * ColorService.toRgbString(color.rgb);  // "rgb(255, 85, 0)"
+ * ColorService.toRgbaString(color.rgb); // "rgba(255, 85, 0, 1)"
+ */
+export const ColorService = {
+  /**
+   * Convert from any color model to IColor (all formats)
+   *
+   * @param model - The color model type ('hex', 'rgb', or 'hsv')
+   * @param value - The color value in the specified model
+   * @returns Complete color object with all formats
+   */
+  convert<T extends ColorModel>(
+    model: T,
+    value: T extends 'hex' ? string : T extends 'rgb' ? IRGB : IHSV
+  ): IColor {
+    switch (model) {
+      case 'hex':
+        return ColorService.fromHex(value as string);
+      case 'rgb':
+        return ColorService.fromRgb(value as IRGB);
+      case 'hsv':
+        return ColorService.fromHsv(value as IHSV);
+      default:
+        throw new Error(`Unknown color model: ${model}`);
+    }
+  },
+
+  /**
+   * Create IColor from hex string
+   *
+   * @param hex - Hex color string (e.g., "#FF0000", "#F00", "#FF0000FF")
+   * @returns Complete color object
+   */
+  fromHex(hex: string): IColor {
+    const normalizedHex = ColorService.normalizeHex(hex);
+    const rgb = ColorService.hex2rgb(normalizedHex);
+    const hsv = ColorService.rgb2hsv(rgb);
+
+    return {
+      hex: normalizedHex,
+      rgb,
+      hsv,
+    };
+  },
+
+  /**
+   * Create IColor from RGB
+   *
+   * @param rgb - RGB color object
+   * @returns Complete color object
+   */
+  fromRgb(rgb: IRGB): IColor {
+    const normalizedRgb = ColorService.normalizeRgb(rgb);
+    const hex = ColorService.rgb2hex(normalizedRgb);
+    const hsv = ColorService.rgb2hsv(normalizedRgb);
+
+    return {
+      hex,
+      rgb: normalizedRgb,
+      hsv,
+    };
+  },
+
+  /**
+   * Create IColor from HSV
+   *
+   * @param hsv - HSV color object
+   * @returns Complete color object
+   */
+  fromHsv(hsv: IHSV): IColor {
+    const normalizedHsv = ColorService.normalizeHsv(hsv);
+    const rgb = ColorService.hsv2rgb(normalizedHsv);
+    const hex = ColorService.rgb2hex(rgb);
+
+    return {
+      hex,
+      rgb,
+      hsv: normalizedHsv,
+    };
+  },
+
+  /**
+   * Normalize hex string to #RRGGBB or #RRGGBBAA format
+   *
+   * @param hex - Raw hex string
+   * @returns Normalized hex string
+   */
+  normalizeHex(hex: string): string {
+    let h = hex.replace('#', '').toUpperCase();
+
+    // Handle short formats
+    if (h.length === 3) {
+      // #RGB -> #RRGGBB
+      h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    } else if (h.length === 4) {
+      // #RGBA -> #RRGGBBAA
+      h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2] + h[3] + h[3];
+    }
+
+    // Ensure minimum 6 characters
+    h = h.padEnd(6, '0');
+
+    return '#' + h.slice(0, 8); // Max 8 chars (RRGGBBAA)
+  },
+
+  /**
+   * Normalize RGB values to valid ranges
+   *
+   * @param rgb - Raw RGB object
+   * @returns Normalized RGB object
+   */
+  normalizeRgb(rgb: IRGB): IRGB {
+    return {
+      r: clamp(Math.round(rgb.r), 0, 255),
+      g: clamp(Math.round(rgb.g), 0, 255),
+      b: clamp(Math.round(rgb.b), 0, 255),
+      a: clamp(rgb.a ?? 1, 0, 1),
+    };
+  },
+
+  /**
+   * Normalize HSV values to valid ranges
+   *
+   * @param hsv - Raw HSV object
+   * @returns Normalized HSV object
+   */
+  normalizeHsv(hsv: IHSV): IHSV {
+    return {
+      h: clamp(hsv.h, 0, 360) % 360,
+      s: clamp(hsv.s, 0, 100),
+      v: clamp(hsv.v, 0, 100),
+      a: clamp(hsv.a ?? 1, 0, 1),
+    };
+  },
+
+  /**
+   * Convert HEX to RGB
+   *
+   * @param hex - Hex color string
+   * @returns RGB object
+   */
+  hex2rgb(hex: string): IRGB {
+    const h = hex.replace('#', '');
+
+    const r = parseInt(h.slice(0, 2), 16) || 0;
+    const g = parseInt(h.slice(2, 4), 16) || 0;
+    const b = parseInt(h.slice(4, 6), 16) || 0;
+    const a = h.length >= 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
+
+    return { r, g, b, a };
+  },
+
+  /**
+   * Convert RGB to HEX
+   *
+   * @param rgb - RGB object
+   * @returns Hex string
+   */
+  rgb2hex(rgb: IRGB): string {
+    const r = toHexString(rgb.r);
+    const g = toHexString(rgb.g);
+    const b = toHexString(rgb.b);
+
+    let hex = `#${r}${g}${b}`.toUpperCase();
+
+    // Add alpha if not fully opaque
+    if (rgb.a !== undefined && rgb.a < 1) {
+      const a = toHexString(Math.round(rgb.a * 255));
+      hex += a.toUpperCase();
+    }
+
+    return hex;
+  },
+
+  /**
+   * Convert RGB to HSV
+   *
+   * @param rgb - RGB object
+   * @returns HSV object
+   */
+  rgb2hsv(rgb: IRGB): IHSV {
+    const r = rgb.r / 255;
+    const g = rgb.g / 255;
+    const b = rgb.b / 255;
+
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const delta = max - min;
+
+    let h = 0;
+    let s = 0;
+    const v = max * 100;
+
+    if (delta !== 0) {
+      s = (delta / max) * 100;
+
+      switch (max) {
+        case r:
+          h = ((g - b) / delta + (g < b ? 6 : 0)) * 60;
+          break;
+        case g:
+          h = ((b - r) / delta + 2) * 60;
+          break;
+        case b:
+          h = ((r - g) / delta + 4) * 60;
+          break;
+      }
+    }
+
+    return {
+      h: Math.round(h),
+      s: Math.round(s),
+      v: Math.round(v),
+      a: rgb.a ?? 1,
+    };
+  },
+
+  /**
+   * Convert HSV to RGB
+   *
+   * @param hsv - HSV object
+   * @returns RGB object
+   */
+  hsv2rgb(hsv: IHSV): IRGB {
+    const h = hsv.h / 360;
+    const s = hsv.s / 100;
+    const v = hsv.v / 100;
+
+    let r = 0;
+    let g = 0;
+    let b = 0;
+
+    if (s === 0) {
+      r = g = b = v;
+    } else {
+      const i = Math.floor(h * 6);
+      const f = h * 6 - i;
+      const p = v * (1 - s);
+      const q = v * (1 - f * s);
+      const t = v * (1 - (1 - f) * s);
+
+      switch (i % 6) {
+        case 0:
+          r = v;
+          g = t;
+          b = p;
+          break;
+        case 1:
+          r = q;
+          g = v;
+          b = p;
+          break;
+        case 2:
+          r = p;
+          g = v;
+          b = t;
+          break;
+        case 3:
+          r = p;
+          g = q;
+          b = v;
+          break;
+        case 4:
+          r = t;
+          g = p;
+          b = v;
+          break;
+        case 5:
+          r = v;
+          g = p;
+          b = q;
+          break;
+      }
+    }
+
+    return {
+      r: Math.round(r * 255),
+      g: Math.round(g * 255),
+      b: Math.round(b * 255),
+      a: hsv.a ?? 1,
+    };
+  },
+
+  /**
+   * Get RGB string for styling
+   *
+   * @param rgb - RGB object
+   * @returns CSS rgb() string
+   */
+  toRgbString(rgb: IRGB): string {
+    return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+  },
+
+  /**
+   * Get RGBA string for styling
+   *
+   * @param rgb - RGB object
+   * @returns CSS rgba() string
+   */
+  toRgbaString(rgb: IRGB): string {
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;
+  },
+
+  /**
+   * Get HSL string from HSV (for gradients)
+   *
+   * @param hsv - HSV object
+   * @returns CSS hsl() string
+   */
+  toHslString(hsv: IHSV): string {
+    // Convert HSV to HSL
+    const h = hsv.h;
+    const s = hsv.s / 100;
+    const v = hsv.v / 100;
+
+    const l = v * (1 - s / 2);
+    const sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
+
+    return `hsl(${h}, ${Math.round(sl * 100)}%, ${Math.round(l * 100)}%)`;
+  },
+};

package/src/core/services/index.ts

@@ -0,0 +1 @@
+export { ColorService } from './ColorService';

package/src/core/types/index.ts

@@ -0,0 +1,211 @@
+/**
+ * RGB color representation
+ *
+ * @property r - Red channel (0-255)
+ * @property g - Green channel (0-255)
+ * @property b - Blue channel (0-255)
+ * @property a - Alpha channel (0-1)
+ */
+export interface IRGB {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+/**
+ * HSV color representation
+ *
+ * @property h - Hue (0-360)
+ * @property s - Saturation (0-100)
+ * @property v - Value/Brightness (0-100)
+ * @property a - Alpha channel (0-1)
+ */
+export interface IHSV {
+  h: number;
+  s: number;
+  v: number;
+  a: number;
+}
+
+/**
+ * Complete color object with all formats
+ *
+ * @property hex - Hex string (e.g., "#FF0000" or "#FF0000FF" with alpha)
+ * @property rgb - RGB representation
+ * @property hsv - HSV representation
+ */
+export interface IColor {
+  hex: string;
+  rgb: IRGB;
+  hsv: IHSV;
+}
+
+/**
+ * Color model types for conversion
+ */
+export type ColorModel = 'hex' | 'rgb' | 'hsv';
+
+/**
+ * Props for the main ColorPicker component
+ */
+export interface IColorPickerProps {
+  /**
+   * Current color value
+   */
+  color: IColor;
+
+  /**
+   * Called on every color change during interaction
+   */
+  onChange: (color: IColor) => void;
+
+  /**
+   * Called when interaction ends (finger lifted)
+   */
+  onChangeComplete?: (color: IColor) => void;
+
+  /**
+   * Width of the picker (diameter for circle, width for rectangle)
+   * @default 250
+   */
+  width?: number;
+
+  /**
+   * Height of the hue and alpha bars
+   * @default 10
+   */
+  barHeight?: number;
+
+  /**
+   * Size of the thumb indicators
+   * @default 24
+   */
+  thumbSize?: number;
+
+  /**
+   * Hide the hue slider bar
+   * @default false
+   */
+  hideHue?: boolean;
+
+  /**
+   * Hide the alpha slider bar
+   * @default false
+   */
+  hideAlpha?: boolean;
+
+  /**
+   * Hide the color preview
+   * @default false
+   */
+  hidePreview?: boolean;
+
+  /**
+   * Hide the input fields
+   * @default false
+   */
+  hideInput?: boolean;
+
+  /**
+   * Disable all interactions
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Picker variant: 'circle' (color wheel) or 'rectangle' (SV rectangle)
+   * @default 'rectangle'
+   */
+  variant?: 'circle' | 'rectangle';
+}
+
+/**
+ * Props for the Saturation component (circular color wheel)
+ */
+export interface ISaturationProps {
+  color: IColor;
+  onChange: (color: IColor) => void;
+  onChangeComplete?: (color: IColor) => void;
+  size: number;
+  thumbSize: number;
+  disabled?: boolean;
+}
+
+/**
+ * Props for the RectangleSaturation component
+ */
+export interface IRectangleSaturationProps {
+  color: IColor;
+  onChange: (color: IColor) => void;
+  onChangeComplete?: (color: IColor) => void;
+  width: number;
+  height: number;
+  thumbSize: number;
+  disabled?: boolean;
+}
+
+/**
+ * Props for the Hue component
+ */
+export interface IHueProps {
+  color: IColor;
+  onChange: (color: IColor) => void;
+  onChangeComplete?: (color: IColor) => void;
+  barHeight: number;
+  thumbSize: number;
+  disabled?: boolean;
+}
+
+/**
+ * Props for the Alpha component
+ */
+export interface IAlphaProps {
+  color: IColor;
+  onChange: (color: IColor) => void;
+  onChangeComplete?: (color: IColor) => void;
+  barHeight: number;
+  thumbSize: number;
+  disabled?: boolean;
+}
+
+/**
+ * Props for the Value/Brightness component
+ */
+export interface IValueProps {
+  color: IColor;
+  onChange: (color: IColor) => void;
+  onChangeComplete?: (color: IColor) => void;
+  barHeight: number;
+  thumbSize: number;
+  disabled?: boolean;
+}
+
+/**
+ * Props for the Thumb component
+ */
+export interface IThumbProps {
+  size: number;
+  color?: string;
+  style?: object;
+}
+
+/**
+ * Props for input fields
+ */
+export interface IFieldsProps {
+  color: IColor;
+  onChange: (color: IColor) => void;
+  onChangeComplete?: (color: IColor) => void;
+  disabled?: boolean;
+}
+
+/**
+ * Layout information from onLayout event
+ */
+export interface ILayout {
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+}

package/src/core/utils/clamp.ts

@@ -0,0 +1,16 @@
+/**
+ * Clamps a value between a minimum and maximum
+ *
+ * @param value - The value to clamp
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns The clamped value
+ *
+ * @example
+ * clamp(150, 0, 100) // returns 100
+ * clamp(-10, 0, 100) // returns 0
+ * clamp(50, 0, 100)  // returns 50
+ */
+export const clamp = (value: number, min: number, max: number): number => {
+  return Math.min(Math.max(value, min), max);
+};

package/src/core/utils/format.ts

@@ -0,0 +1,59 @@
+/**
+ * Pads a string with leading zeros
+ *
+ * @param str - The string to pad
+ * @param len - The target length
+ * @returns The padded string
+ */
+export const padZero = (str: string, len: number = 2): string => {
+  return str.padStart(len, '0');
+};
+
+/**
+ * Converts a number to a two-digit hex string
+ *
+ * @param num - The number to convert (0-255)
+ * @returns Two-character hex string
+ *
+ * @example
+ * toHexString(255) // returns "FF"
+ * toHexString(0)   // returns "00"
+ * toHexString(15)  // returns "0F"
+ */
+export const toHexString = (num: number): string => {
+  return padZero(Math.round(num).toString(16), 2);
+};
+
+/**
+ * Rounds a number to specified decimal places
+ *
+ * @param num - The number to round
+ * @param decimals - Number of decimal places
+ * @returns The rounded number
+ */
+export const round = (num: number, decimals: number = 0): number => {
+  const factor = Math.pow(10, decimals);
+  return Math.round(num * factor) / factor;
+};
+
+/**
+ * Parses a float and returns 0 if NaN
+ *
+ * @param value - The string to parse
+ * @returns Parsed float or 0
+ */
+export const safeParseFloat = (value: string): number => {
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? 0 : parsed;
+};
+
+/**
+ * Parses an int and returns 0 if NaN
+ *
+ * @param value - The string to parse
+ * @returns Parsed int or 0
+ */
+export const safeParseInt = (value: string): number => {
+  const parsed = parseInt(value, 10);
+  return isNaN(parsed) ? 0 : parsed;
+};

package/src/core/utils/index.ts

@@ -0,0 +1,8 @@
+export { clamp } from './clamp';
+export {
+  padZero,
+  toHexString,
+  round,
+  safeParseFloat,
+  safeParseInt,
+} from './format';