@hero-design/rn-work-uikit 1.1.0 → 1.2.0-alpha.1

package/src/utils/__tests__/helpers.spec.ts

@@ -0,0 +1,92 @@
+import { deepCompareValue, omit, pick } from '../helpers';
+
+describe('pick', () => {
+  it('works', () => {
+    const props = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
+
+    expect(pick(['a', 'b', 'f'], props)).toEqual({
+      a: 1,
+      b: true,
+      f: 'whatever',
+    });
+  });
+
+  it('work with unknown object type', () => {
+    const props: Record<string, unknown> = {
+      a: 1,
+      b: true,
+      c: 'outline',
+      d: null,
+      f: 'whatever',
+    };
+
+    expect(pick(['a', 'b', 'f'], props)).toEqual({
+      a: 1,
+      b: true,
+      f: 'whatever',
+    });
+  });
+});
+
+describe('omit', () => {
+  it('works', () => {
+    const props = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
+
+    expect(omit(['a', 'b'], props)).toEqual({
+      c: 'outline',
+      d: null,
+      f: 'whatever',
+    });
+  });
+
+  it('work with unknown object type', () => {
+    const props: Record<string, unknown> = {
+      a: 1,
+      b: true,
+      c: 'outline',
+      d: null,
+      f: 'whatever',
+    };
+
+    expect(omit(['a', 'b'], props)).toEqual({
+      c: 'outline',
+      d: null,
+      f: 'whatever',
+    });
+  });
+});
+
+describe('deepCompareValue', () => {
+  it.each`
+    a                  | b                  | expected
+    ${1}               | ${1}               | ${true}
+    ${'test'}          | ${'test'}          | ${true}
+    ${true}            | ${true}            | ${true}
+    ${null}            | ${null}            | ${true}
+    ${undefined}       | ${undefined}       | ${true}
+    ${1}               | ${2}               | ${false}
+    ${'test'}          | ${'other'}         | ${false}
+    ${true}            | ${false}           | ${false}
+    ${null}            | ${undefined}       | ${false}
+    ${NaN}             | ${NaN}             | ${false}
+    ${1}               | ${NaN}             | ${false}
+    ${[1, 2, 3]}       | ${[1, 2, 3]}       | ${true}
+    ${['a', 'b']}      | ${['a', 'b']}      | ${true}
+    ${[]}              | ${[]}              | ${true}
+    ${[1, 2]}          | ${[1, 2, 3]}       | ${false}
+    ${[1, 2]}          | ${[2, 1]}          | ${false}
+    ${[1, [2, 3]]}     | ${[1, [2, 3]]}     | ${true}
+    ${[1, [2, 3]]}     | ${[1, [2, 4]]}     | ${false}
+    ${{ a: 1, b: 2 }}  | ${{ a: 1, b: 2 }}  | ${true}
+    ${{}}              | ${{}}              | ${true}
+    ${{ a: 1 }}        | ${{ a: 2 }}        | ${false}
+    ${{ a: 1 }}        | ${{ b: 1 }}        | ${false}
+    ${{ a: 1 }}        | ${{ a: 1, b: 2 }}  | ${false}
+    ${{ a: { b: 1 } }} | ${{ a: { b: 1 } }} | ${true}
+    ${{ a: { b: 1 } }} | ${{ a: { b: 2 } }} | ${false}
+    ${1}               | ${'1'}             | ${false}
+    ${[]}              | ${{}}              | ${false}
+  `('should compare $a and $b correctly', ({ a, b, expected }) => {
+    expect(deepCompareValue(a, b)).toBe(expected);
+  });
+});

package/src/utils/helpers.ts

@@ -0,0 +1,113 @@
+import { Platform, Keyboard } from 'react-native';
+
+import { useEffect, useState } from 'react';
+
+export const isIOS = Platform.OS === 'ios';
+export const isAndroid = Platform.OS === 'android';
+
+export function pick<O extends object, T extends keyof O>(
+  keys: T[],
+  obj: O
+): Pick<O, T> {
+  return keys
+    .filter((key) => key in obj)
+    .reduce<Partial<O>>(
+      (result, cur) => ({
+        ...result,
+        [cur]: obj[cur],
+      }),
+      {}
+    ) as Pick<O, T>;
+}
+
+export function omit<O, T extends keyof O>(keys: T[], obj: O): Omit<O, T> {
+  const result = { ...obj };
+
+  keys.forEach((key) => {
+    delete result[key];
+  });
+
+  return result;
+}
+
+export function hexToRgba(hex: string, a: number) {
+  const arrBuff = new ArrayBuffer(4);
+  const vw = new DataView(arrBuff);
+  vw.setUint32(0, parseInt(hex, 16), false);
+  const arrByte = new Uint8Array(arrBuff);
+  const [r, g, b] = arrByte;
+  return `rgba(${r},${g},${b},${a})`;
+}
+
+export const deepCompareValue = <V>(a: V, b: V): boolean => {
+  // Handle strict equality first (handles primitives, null, undefined)
+  if (a === b) return true;
+
+  // Special handling for NaN (NaN !== NaN in JS)
+  if (
+    typeof a === 'number' &&
+    typeof b === 'number' &&
+    Number.isNaN(a) &&
+    Number.isNaN(b)
+  ) {
+    return false;
+  }
+
+  // If either is null or undefined (but they are not strictly equal), return false
+  if (a == null || b == null) return false;
+
+  // If types don't match, they can't be equal
+  if (typeof a !== typeof b) return false;
+
+  // Handle array comparison
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    return a.every((val, index) => deepCompareValue(val, b[index]));
+  }
+
+  // If one is array and the other isn't, return false
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+
+  // Handle object comparison
+  if (typeof a === 'object' && typeof b === 'object') {
+    const keysA = Object.keys(a) as (keyof V)[];
+    const keysB = Object.keys(b) as (keyof V)[];
+
+    if (keysA.length !== keysB.length) return false;
+
+    return keysA.every(
+      (key) => keysB.includes(key) && deepCompareValue(a[key], b[key])
+    );
+  }
+
+  // If none of the above conditions matched, they're not equal
+  return false;
+};
+
+export const useKeyboard = () => {
+  const [isKeyboardVisible, setKeyboardVisible] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useEffect(() => {
+    const keyboardWillShowListener = Keyboard.addListener(
+      'keyboardWillShow',
+      (e) => {
+        setKeyboardVisible(true);
+        setKeyboardHeight(e.endCoordinates.height);
+      }
+    );
+    const keyboardWillHideListener = Keyboard.addListener(
+      'keyboardWillHide',
+      () => {
+        setKeyboardVisible(false);
+      }
+    );
+
+    return () => {
+      keyboardWillShowListener.remove();
+      keyboardWillHideListener.remove();
+    };
+  }, []);
+
+  return { isKeyboardVisible, keyboardHeight };
+};

package/testUtils/renderWithTheme.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { render } from '@testing-library/react-native'; // eslint-disable-line import/no-extraneous-dependencies
 import type { RenderOptions } from '@testing-library/react-native';
-import { HeroDesignProvider, theme } from '../src';
+import { getTheme, ThemeProvider } from '../src';
 
-const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) =>
-  render(<HeroDesignProvider theme={theme}>{ui}</HeroDesignProvider>, options);
+const theme = getTheme();
+
+const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) => {
+  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>, options);
+};
 
 export default renderWithTheme;