@brcarddev/frontend-commons 1.0.2

package/src/utils/array/array.test.ts

@@ -0,0 +1,160 @@
+import { describe, it, expect } from 'vitest';
+
+import { uniqueArrayElements, sortAscByKey, sortDescByKey, checkSubset } from './array';
+
+describe('Array Utils', () => {
+  describe('uniqueArrayElements', () => {
+    it('should remove duplicate primitive values', () => {
+      const input = [ 1, 2, 2, 3, 3, 4 ];
+      expect(uniqueArrayElements(input)).toEqual([ 1, 2, 3, 4 ]);
+    });
+
+    it('should remove duplicate objects', () => {
+      const input = [
+        { id: 1, name: 'John' },
+        { id: 1, name: 'John' },
+        { id: 2, name: 'Jane' },
+      ];
+      expect(uniqueArrayElements(input)).toEqual([
+        { id: 1, name: 'John' },
+        { id: 2, name: 'Jane' },
+      ]);
+    });
+
+    it('should handle empty array', () => {
+      expect(uniqueArrayElements([])).toEqual([]);
+    });
+
+    it('should handle array with null and undefined', () => {
+      const input = [ null, undefined, null, undefined ];
+      expect(uniqueArrayElements(input)).toEqual([ null, undefined ]);
+    });
+  });
+
+  describe('sortAscByKey', () => {
+    it('should sort numbers in ascending order', () => {
+      const input = [
+        { id: 3, name: 'Charlie' },
+        { id: 1, name: 'Alice' },
+        { id: 2, name: 'Bob' },
+      ];
+      const expected = [
+        { id: 1, name: 'Alice' },
+        { id: 2, name: 'Bob' },
+        { id: 3, name: 'Charlie' },
+      ];
+      expect(sortAscByKey(input, 'id')).toEqual(expected);
+    });
+
+    it('should sort strings in ascending order', () => {
+      const input = [
+        { name: 'Charlie', age: 30 },
+        { name: 'Alice', age: 25 },
+        { name: 'Bob', age: 35 },
+      ];
+      const expected = [
+        { name: 'Alice', age: 25 },
+        { name: 'Bob', age: 35 },
+        { name: 'Charlie', age: 30 },
+      ];
+      expect(sortAscByKey(input, 'name')).toEqual(expected);
+    });
+
+    it('should handle empty array', () => {
+      expect(sortAscByKey([], 'id')).toEqual([]);
+    });
+
+    it('should handle array with null values', () => {
+      const input = [
+        { id: 2, name: null },
+        { id: 1, name: 'Alice' },
+        { id: 3, name: null },
+      ];
+      const expected = [
+        { id: 1, name: 'Alice' },
+        { id: 2, name: null },
+        { id: 3, name: null },
+      ];
+      expect(sortAscByKey(input, 'id')).toEqual(expected);
+    });
+  });
+
+  describe('sortDescByKey', () => {
+    it('should sort numbers in descending order', () => {
+      const input = [
+        { id: 1, name: 'Alice' },
+        { id: 3, name: 'Charlie' },
+        { id: 2, name: 'Bob' },
+      ];
+      const expected = [
+        { id: 3, name: 'Charlie' },
+        { id: 2, name: 'Bob' },
+        { id: 1, name: 'Alice' },
+      ];
+      expect(sortDescByKey(input, 'id')).toEqual(expected);
+    });
+
+    it('should sort strings in descending order', () => {
+      const input = [
+        { name: 'Alice', age: 25 },
+        { name: 'Charlie', age: 30 },
+        { name: 'Bob', age: 35 },
+      ];
+      const expected = [
+        { name: 'Charlie', age: 30 },
+        { name: 'Bob', age: 35 },
+        { name: 'Alice', age: 25 },
+      ];
+      expect(sortDescByKey(input, 'name')).toEqual(expected);
+    });
+
+    it('should handle empty array', () => {
+      expect(sortDescByKey([], 'id')).toEqual([]);
+    });
+
+    it('should handle array with null values', () => {
+      const input = [
+        { id: 1, name: 'Alice' },
+        { id: 3, name: null },
+        { id: 2, name: null },
+      ];
+      const expected = [
+        { id: 3, name: null },
+        { id: 2, name: null },
+        { id: 1, name: 'Alice' },
+      ];
+      expect(sortDescByKey(input, 'id')).toEqual(expected);
+    });
+  });
+
+  describe('checkSubset', () => {
+    it('should return true when subset is contained in array', () => {
+      const array = [ 'a', 'b', 'c', 'd' ];
+      const subset = [ 'a', 'c' ];
+      expect(checkSubset(array, subset)).toBe(true);
+    });
+
+    it('should return false when subset is not contained in array', () => {
+      const array = [ 'a', 'b', 'c' ];
+      const subset = [ 'a', 'd' ];
+      expect(checkSubset(array, subset)).toBe(false);
+    });
+
+    it('should return true for empty subset', () => {
+      const array = [ 'a', 'b', 'c' ];
+      expect(checkSubset(array, [])).toBe(true);
+    });
+
+    it('should return false for empty array with non-empty subset', () => {
+      const array: string[] = [];
+      const subset = [ 'a' ];
+      expect(checkSubset(array, subset)).toBe(false);
+    });
+
+    it('should handle duplicate elements', () => {
+      const array = [ 'a', 'b', 'b', 'c' ];
+      const subset = [ 'b', 'b' ];
+      expect(checkSubset(array, subset)).toBe(true);
+    });
+  });
+});

package/src/utils/array/array.ts

@@ -0,0 +1,43 @@
+export const checkSubset = (array: string[], subset: string[]): boolean => {
+  return subset.every((item) => array.includes(item));
+};
+
+export const sortAscByKey = <T extends Record<string, unknown>>(array: T[], key: keyof T): T[] => {
+  return array.sort((a, b) => {
+    if (a[key] < b[key]) return -1;
+
+    if (a[key] > b[key]) return 1;
+
+    return 0;
+  });
+};
+
+export const sortDescByKey = <T extends Record<string, unknown>>(array: T[], key: keyof T): T[] => {
+  return array.sort((a, b) => {
+    if (a[key] < b[key]) return 1;
+
+    if (a[key] > b[key]) return -1;
+
+    return 0;
+  });
+};
+
+export function uniqueArrayElements<T>(arr: T[]): T[] {
+  return Array.from(
+    new Set(
+      arr.map((o) => {
+        if (o === undefined) return 'undefined';
+
+        if (o === null) return 'null';
+
+        return JSON.stringify(o);
+      })
+    )
+  ).map((o) => {
+    if (o === 'undefined') return undefined;
+
+    if (o === 'null') return null;
+
+    return JSON.parse(o);
+  });
+}

package/src/utils/array/index.ts

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

package/src/utils/clipboard/clipboard.test.ts

@@ -0,0 +1,218 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import { copyToClipboard } from './clipboard';
+
+const mockClipboard = {
+  writeText: vi.fn(),
+};
+
+const mockExecCommand = vi.fn();
+
+const mockCreateElement = vi.fn();
+
+const mockConsoleError = vi.fn();
+
+describe('Clipboard Utils', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    Object.defineProperty(navigator, 'clipboard', {
+      value: mockClipboard,
+      writable: true,
+    });
+
+    Object.defineProperty(document, 'execCommand', {
+      value: mockExecCommand,
+      writable: true,
+    });
+
+    Object.defineProperty(document, 'createElement', {
+      value: mockCreateElement,
+      writable: true,
+    });
+
+    Object.defineProperty(console, 'error', {
+      value: mockConsoleError,
+      writable: true,
+    });
+
+    Object.defineProperty(window, 'isSecureContext', {
+      value: true,
+      writable: true,
+    });
+  });
+
+  describe('copyToClipboard', () => {
+    it('should copy text using Clipboard API when available and call onSuccess callback', async () => {
+      mockClipboard.writeText.mockResolvedValue(undefined);
+      const onSuccess = vi.fn();
+      const onError = vi.fn();
+
+      const result = await copyToClipboard('test text', { onSuccess, onError });
+
+      expect(result).toBe(true);
+      expect(mockClipboard.writeText).toHaveBeenCalledWith('test text');
+      expect(onSuccess).toHaveBeenCalledTimes(1);
+      expect(onError).not.toHaveBeenCalled();
+    });
+
+    it('should fallback to execCommand when Clipboard API is not available and call onSuccess callback', async () => {
+      Object.defineProperty(navigator, 'clipboard', {
+        value: undefined,
+        writable: true,
+      });
+
+      mockExecCommand.mockReturnValue(true);
+      const onSuccess = vi.fn();
+      const onError = vi.fn();
+
+      const mockTextArea = {
+        value: '',
+        style: {},
+        focus: vi.fn(),
+        select: vi.fn(),
+      };
+
+      mockCreateElement.mockReturnValue(mockTextArea);
+
+      const mockBody = {
+        appendChild: vi.fn(),
+        removeChild: vi.fn(),
+      };
+
+      Object.defineProperty(document, 'body', {
+        value: mockBody,
+        writable: true,
+      });
+
+      const result = await copyToClipboard('test text', { onSuccess, onError });
+
+      expect(result).toBe(true);
+      expect(mockExecCommand).toHaveBeenCalledWith('copy');
+      expect(mockTextArea.value).toBe('test text');
+      expect(onSuccess).toHaveBeenCalledTimes(1);
+      expect(onError).not.toHaveBeenCalled();
+    });
+
+    it('should return false and call onError callback when both methods fail', async () => {
+      Object.defineProperty(navigator, 'clipboard', {
+        value: undefined,
+        writable: true,
+      });
+
+      mockExecCommand.mockReturnValue(false);
+      const onSuccess = vi.fn();
+      const onError = vi.fn();
+
+      const mockTextArea = {
+        value: '',
+        style: {},
+        focus: vi.fn(),
+        select: vi.fn(),
+      };
+
+      mockCreateElement.mockReturnValue(mockTextArea);
+
+      const mockBody = {
+        appendChild: vi.fn(),
+        removeChild: vi.fn(),
+      };
+
+      Object.defineProperty(document, 'body', {
+        value: mockBody,
+        writable: true,
+      });
+
+      const result = await copyToClipboard('test text', { onSuccess, onError });
+
+      expect(result).toBe(false);
+      expect(onSuccess).not.toHaveBeenCalled();
+      expect(onError).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle Clipboard API errors gracefully and call onError callback', async () => {
+      mockClipboard.writeText.mockRejectedValue(new Error('Clipboard error'));
+      const onSuccess = vi.fn();
+      const onError = vi.fn();
+
+      const result = await copyToClipboard('test text', { onSuccess, onError });
+
+      expect(result).toBe(false);
+      expect(onSuccess).not.toHaveBeenCalled();
+      expect(onError).toHaveBeenCalledTimes(1);
+    });
+
+    it('should work without callback options', async () => {
+      mockClipboard.writeText.mockResolvedValue(undefined);
+
+      const result = await copyToClipboard('test text');
+
+      expect(result).toBe(true);
+      expect(mockClipboard.writeText).toHaveBeenCalledWith('test text');
+    });
+
+    it('should work with only onSuccess callback', async () => {
+      mockClipboard.writeText.mockResolvedValue(undefined);
+      const onSuccess = vi.fn();
+
+      const result = await copyToClipboard('test text', { onSuccess });
+
+      expect(result).toBe(true);
+      expect(onSuccess).toHaveBeenCalledTimes(1);
+    });
+
+    it('should work with only onError callback', async () => {
+      mockClipboard.writeText.mockResolvedValue(undefined);
+      const onError = vi.fn();
+
+      const result = await copyToClipboard('test text', { onError });
+
+      expect(result).toBe(true);
+      expect(onError).not.toHaveBeenCalled();
+    });
+
+    it('should call onError when Clipboard API throws error', async () => {
+      mockClipboard.writeText.mockRejectedValue(new Error('Permission denied'));
+      const onError = vi.fn();
+
+      const result = await copyToClipboard('test text', { onError });
+
+      expect(result).toBe(false);
+      expect(onError).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle execCommand failure and call onError', async () => {
+      Object.defineProperty(navigator, 'clipboard', {
+        value: undefined,
+        writable: true,
+      });
+
+      mockExecCommand.mockReturnValue(false);
+      const onError = vi.fn();
+
+      const mockTextArea = {
+        value: '',
+        style: {},
+        focus: vi.fn(),
+        select: vi.fn(),
+      };
+
+      mockCreateElement.mockReturnValue(mockTextArea);
+
+      const mockBody = {
+        appendChild: vi.fn(),
+        removeChild: vi.fn(),
+      };
+
+      Object.defineProperty(document, 'body', {
+        value: mockBody,
+        writable: true,
+      });
+
+      const result = await copyToClipboard('test text', { onError });
+
+      expect(result).toBe(false);
+      expect(onError).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/utils/clipboard/clipboard.ts

@@ -0,0 +1,40 @@
+export const copyToClipboard = async (text: string, callbackOptions?: {
+  onSuccess?: () => void;
+  onError?: () => void;
+}): Promise<boolean> => {
+  try {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+
+      callbackOptions?.onSuccess?.();
+      return true;
+    }
+
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    textArea.style.opacity = '0';
+
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    const successful = document.execCommand('copy');
+    document.body.removeChild(textArea);
+
+    if (successful) {
+      callbackOptions?.onSuccess?.();
+    } else {
+      callbackOptions?.onError?.();
+    }
+
+    return successful;
+  } catch {
+    callbackOptions?.onError?.();
+    return false;
+  }
+};
+

package/src/utils/clipboard/index.ts

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

package/src/utils/cn/cn.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest';
+
+import { cn } from './cn';
+
+describe('cn utility', () => {
+  it('should merge class names correctly', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar');
+    expect(cn('foo', { bar: true })).toBe('foo bar');
+    expect(cn('foo', { bar: false })).toBe('foo');
+  });
+
+  it('should handle Tailwind classes correctly', () => {
+    expect(cn('p-4 bg-red-500', 'p-6')).toBe('bg-red-500 p-6');
+    expect(cn('text-sm text-gray-500', 'text-base text-blue-500')).toBe('text-base text-blue-500');
+  });
+
+  it('should handle conditional classes', () => {
+    const isActive = true;
+    const isDisabled = false;
+
+    expect(cn('base', isActive && 'active', isDisabled && 'disabled')).toBe('base active');
+    expect(cn('base', { active: isActive, disabled: isDisabled })).toBe('base active');
+  });
+
+  it('should handle undefined and null values', () => {
+    expect(cn('base', undefined, null)).toBe('base');
+    expect(cn(undefined, 'base', null)).toBe('base');
+  });
+
+  it('should handle arrays of class names', () => {
+    expect(cn([ 'foo', 'bar' ], 'baz')).toBe('foo bar baz');
+    expect(cn([ 'foo', { bar: true } ], 'baz')).toBe('foo bar baz');
+  });
+
+  it('should handle complex Tailwind class combinations', () => {
+    expect(cn(
+      'flex items-center',
+      'p-4 bg-white',
+      'hover:bg-gray-100',
+      'dark:bg-gray-800 dark:hover:bg-gray-700'
+    )).toBe('flex items-center p-4 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700');
+  });
+});

package/src/utils/cn/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utils/cn/index.ts

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

package/src/utils/color-utils/color-utils.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+
+import { hexToHsl, hslToHex, generateScale } from './color-utils';
+
+describe('hexToHsl', () => {
+  it('converts #ffffff to HSL correctly', () => {
+    expect(hexToHsl('#ffffff')).toEqual([ 0, 0, 100 ]);
+  });
+
+  it('converts #000000 to HSL correctly', () => {
+    expect(hexToHsl('#000000')).toEqual([ 0, 0, 0 ]);
+  });
+
+  it('converts #ff0000 (red) to HSL correctly', () => {
+    expect(hexToHsl('#ff0000')).toEqual([ 0, 100, 50 ]);
+  });
+
+  it('supports shorthand hex (#0f0)', () => {
+    expect(hexToHsl('#0f0')).toEqual([ 120, 100, 50 ]);
+  });
+});
+
+describe('hslToHex', () => {
+  it('converts HSL(0, 0%, 100%) to #ffffff', () => {
+    expect(hslToHex(0, 0, 100)).toBe('#ffffff');
+  });
+
+  it('converts HSL(0, 0%, 0%) to #000000', () => {
+    expect(hslToHex(0, 0, 0)).toBe('#000000');
+  });
+
+  it('converts HSL(0, 100%, 50%) to #ff0000 (red)', () => {
+    expect(hslToHex(0, 100, 50)).toBe('#ff0000');
+  });
+
+  it('converts HSL(120, 100%, 50%) to #00ff00 (green)', () => {
+    expect(hslToHex(120, 100, 50)).toBe('#00ff00');
+  });
+});
+
+describe('generateScale', () => {
+  it('generates correct number of color steps', () => {
+    const scale = generateScale('#3366ff', 9);
+    expect(scale).toHaveLength(9);
+  });
+});

package/src/utils/color-utils/color-utils.ts

@@ -0,0 +1,97 @@
+/* eslint-disable prefer-const */
+export function generateScale(hex: string, steps: number, darkRange = 0.4, lightRange = 0.4): string[] {
+  const { r, g, b, a } = parseHex(hex);
+  const [ h, s, l ] = rgbToHsl(r, g, b);
+  const range: string[] = [];
+
+  for (let i = 0; i < steps; i++) {
+    const t = (i / (steps - 1)) * 2 - 1;
+
+    const lightnessAdjustment =
+      t < 0 ? l * (1 - darkRange * Math.abs(t)) : l + (100 - l) * lightRange * t;
+
+    range.push(hslToHex(h, s, Math.max(0, Math.min(100, lightnessAdjustment)), a));
+  }
+
+  return range;
+}
+
+export function hexToHsl(hex: string): [ number, number, number ] {
+  const { r, g, b } = parseHex(hex);
+  return rgbToHsl(r, g, b);
+}
+
+function parseHex(hex: string): { r: number; g: number; b: number; a: number } {
+  hex = hex.replace('#', '');
+  let r = 0, g = 0, b = 0, a = 255;
+
+  if (hex.length === 4) {
+    // #RGBA
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+    a = parseInt(hex[3] + hex[3], 16);
+  } else if (hex.length === 8) {
+    // #RRGGBBAA
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+    a = parseInt(hex.slice(6, 8), 16);
+  } else if (hex.length === 3) {
+    // #RGB
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else if (hex.length === 6) {
+    // #RRGGBB
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+  }
+
+  return { r, g, b, a };
+}
+
+function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  let h = 0, s = 0, l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+      case g: h = (b - r) / d + 2; break;
+      case b: h = (r - g) / d + 4; break;
+    }
+
+    h *= 60;
+  }
+
+  return [ Math.round(h), Math.round(s * 100), Math.round(l * 100) ];
+}
+
+export function hslToHex(h: number, s: number, l: number, alpha = 255): string {
+  s /= 100;
+  l /= 100;
+  const k = (n: number) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) =>
+    Math.round(
+      255 * (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))))
+    );
+
+  const hexRGB = [ f(0), f(8), f(4) ]
+    .map((x) => x.toString(16).padStart(2, '0'))
+    .join('');
+
+  const hexA = alpha.toString(16).padStart(2, '0');
+
+  return `#${hexRGB}${alpha < 255 ? hexA : ''}`;
+}

package/src/utils/color-utils/index.ts

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