scriptable-testlab/src/mocks/ui/color.ts

A lightweight, efficient tool designed to manage and update scripts for Scriptable.

import {AbsColor} from 'scriptable-abstract';

interface ColorMockState {
  hex: string;
  red: number;
  green: number;
  blue: number;
  alpha: number;
}

const DEFAULT_STATE: ColorMockState = {
  hex: '#000000',
  red: 0,
  green: 0,
  blue: 0,
  alpha: 1,
};

export class MockColor extends AbsColor<ColorMockState> {
  constructor(hex: string = '#000000', alpha: number = 1) {
    super(DEFAULT_STATE);
    this.hex = hex;
    if (alpha !== undefined) {
      this.alpha = alpha;
    }
  }

  get hex(): string {
    const r = Math.round(this.state.red).toString(16).padStart(2, '0');
    const g = Math.round(this.state.green).toString(16).padStart(2, '0');
    const b = Math.round(this.state.blue).toString(16).padStart(2, '0');
    return `#${r}${g}${b}`.toUpperCase();
  }

  set hex(value: string) {
    const normalizedHex = value.startsWith('#') ? value : `#${value}`;
    if (!/^#[0-9A-Fa-f]{6}$/i.test(normalizedHex)) {
      throw new Error('Invalid hex color format. Expected format: #RRGGBB');
    }

    const r = parseInt(normalizedHex.slice(1, 3), 16);
    const g = parseInt(normalizedHex.slice(3, 5), 16);
    const b = parseInt(normalizedHex.slice(5, 7), 16);

    this.setState({
      hex: normalizedHex.toUpperCase(),
      red: r,
      green: g,
      blue: b,
      alpha: this.alpha,
    });
  }

  get red(): number {
    return this.state.red;
  }

  set red(value: number) {
    if (value < 0 || value > 255) {
      throw new Error('Red value must be between 0 and 255');
    }
    const hex = this.hex;
    this.setState({red: value, hex});
  }

  get green(): number {
    return this.state.green;
  }

  set green(value: number) {
    if (value < 0 || value > 255) {
      throw new Error('Green value must be between 0 and 255');
    }
    const hex = this.hex;
    this.setState({green: value, hex});
  }

  get blue(): number {
    return this.state.blue;
  }

  set blue(value: number) {
    if (value < 0 || value > 255) {
      throw new Error('Blue value must be between 0 and 255');
    }
    const hex = this.hex;
    this.setState({blue: value, hex});
  }

  get alpha(): number {
    return this.state.alpha;
  }

  set alpha(value: number) {
    if (value < 0 || value > 1) {
      throw new Error('Alpha value must be between 0 and 1');
    }
    const hex = this.hex;
    this.setState({alpha: value, hex});
  }

  // Static factory methods
  static black(): Color {
    return new MockColor('#000000');
  }

  static darkGray(): Color {
    return new MockColor('#555555');
  }

  static lightGray(): Color {
    return new MockColor('#AAAAAA');
  }

  static white(): Color {
    return new MockColor('#FFFFFF');
  }

  static gray(): Color {
    return new MockColor('#808080');
  }

  static red(): Color {
    return new MockColor('#FF0000');
  }

  static green(): Color {
    return new MockColor('#00FF00');
  }

  static blue(): Color {
    return new MockColor('#0000FF');
  }

  static cyan(): Color {
    return new MockColor('#00FFFF');
  }

  static yellow(): Color {
    return new MockColor('#FFFF00');
  }

  static magenta(): Color {
    return new MockColor('#FF00FF');
  }

  static orange(): Color {
    return new MockColor('#FFA500');
  }

  static purple(): Color {
    return new MockColor('#800080');
  }

  static brown(): Color {
    return new MockColor('#A52A2A');
  }

  static clear(): Color {
    const color = new MockColor('#000000');
    color.alpha = 0;
    return color;
  }

  static dynamic(dark: Color, _light: Color): Color {
    return dark;
  }
}