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

package/src/theme/__tests__/index.spec.ts

@@ -0,0 +1,7 @@
+import theme from '..';
+
+describe('theme', () => {
+  it('returns correct theme object', () => {
+    expect(theme).toMatchSnapshot();
+  });
+});

package/src/theme/components/textInput.ts

@@ -0,0 +1,92 @@
+import type { Theme } from '@hero-design/rn';
+
+const getTextInputTheme = (theme: Theme) => {
+  const baseTextInputTheme = theme.__hd__.textInput;
+
+  // Override specific values here as needed
+  const colors = {
+    ...baseTextInputTheme.colors,
+    // Example: override specific colors
+    // text: theme.colors.customTextColor,
+    borders: {
+      default: theme.colors.secondaryOutline,
+      error: theme.colors.onErrorSurface,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.disabledOutline,
+      filled: theme.colors.secondaryOutline,
+      focused: theme.colors.primaryOutline,
+    },
+    labels: {
+      default: theme.colors.inactiveOnDefaultGlobalSurface,
+      error: theme.colors.onErrorSurface,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.inactiveOnDefaultGlobalSurface,
+      focused: theme.colors.onDefaultGlobalSurface,
+    },
+    maxLengthLabels: {
+      default: theme.colors.onDefaultGlobalSurface,
+      error: theme.colors.onErrorSurface,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.onDefaultGlobalSurface,
+      focused: theme.colors.onDefaultGlobalSurface,
+    },
+  };
+
+  const space = {
+    ...baseTextInputTheme.space,
+    // Example: override specific spacing
+    // containerPadding: theme.space.large,
+    inputWrapperMarginVertical: theme.space.small,
+    prefixAndInputContainerGap: theme.space.xsmall,
+  };
+
+  const fonts = {
+    ...baseTextInputTheme.fonts,
+    // Example: override fonts
+    // text: theme.fonts.custom.bold,
+  };
+
+  const fontSizes = {
+    ...baseTextInputTheme.fontSizes,
+    // Example: override font sizes
+    // text: theme.fontSizes.xlarge,
+  };
+
+  const borderWidths = {
+    ...baseTextInputTheme.borderWidths,
+    container: {
+      ...baseTextInputTheme.borderWidths.container,
+      normal: theme.borderWidths.medium,
+    },
+  };
+
+  const radii = {
+    ...baseTextInputTheme.radii,
+  };
+
+  const sizes = {
+    ...baseTextInputTheme.sizes,
+    containerMinHeight: theme.sizes.xxxxlarge,
+    errorAndHelpTextContainerHeight: 0,
+    textInputMinHeight: baseTextInputTheme.fontSizes.text + theme.space.small,
+  };
+
+  const lineHeights = {
+    ...baseTextInputTheme.lineHeights,
+  };
+
+  return {
+    colors,
+    space,
+    fonts,
+    fontSizes,
+    borderWidths,
+    radii,
+    sizes,
+    lineHeights,
+  };
+};
+
+export default getTextInputTheme;

package/src/theme/getTheme.ts

@@ -0,0 +1,32 @@
+import {
+  getTheme as getBaseTheme,
+  Theme as BaseTheme,
+  swagSystemPalette,
+} from '@hero-design/rn';
+import type { Scale, SystemPalette } from '@hero-design/rn';
+import getTextInputTheme from './components/textInput';
+
+// Work-specific theme type that includes textInput overrides
+type Theme = BaseTheme & {
+  __hd__: BaseTheme['__hd__'] & {
+    textInput: ReturnType<typeof getTextInputTheme>;
+  };
+};
+
+const getTheme = (
+  scale?: Scale,
+  systemPalette: SystemPalette = swagSystemPalette
+): Theme => {
+  const baseTheme = getBaseTheme(scale, systemPalette);
+
+  return {
+    ...baseTheme,
+    __hd__: {
+      ...baseTheme.__hd__,
+      textInput: getTextInputTheme(baseTheme),
+    },
+  };
+};
+
+export default getTheme;
+export type { Theme };

package/src/theme/index.ts

@@ -0,0 +1,17 @@
+import getTheme from './getTheme';
+import type { Theme } from './getTheme';
+import { WorkThemeProvider, useWorkTheme } from './ThemeProvider';
+import WorkThemeSwitcher, { withWorkTheme } from './ThemeSwitcher';
+
+const defaultTheme = getTheme();
+
+// Export with generic names to hide "Work" terminology from external consumers
+export type { Theme };
+export {
+  getTheme,
+  WorkThemeProvider as ThemeProvider,
+  WorkThemeSwitcher as ThemeSwitcher,
+  useWorkTheme as useTheme,
+  withWorkTheme as withTheme,
+};
+export default defaultTheme;

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;