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

package/src/components/TextInput/index.tsx

@@ -0,0 +1,327 @@
+import React, { forwardRef, useCallback } from 'react';
+import { StyleSheet, TextInput as RNTextInput } from 'react-native';
+import type {
+  TextInputProps as NativeTextInputProps,
+  StyleProp,
+  ViewStyle,
+  NativeSyntheticEvent,
+  TextInputFocusEventData,
+} from 'react-native';
+import {
+  StyledInputWrapper,
+  StyledContainer,
+  StyledBorder,
+  StyledBottomContainer,
+  StyledSuffixContainer,
+} from './StyledTextInput';
+import { useTheme } from '../../theme';
+import type { State } from './StyledTextInput';
+import ErrorOrHelpText from './ErrorOrHelpText';
+import SuffixComponent from './SuffixComponent';
+import MaxLengthMessage from './MaxLengthMessage';
+import FloatingLabel from './FloatingLabel';
+import InputRow from './InputRow';
+import type { TextInputHandles, TextInputProps } from './types';
+
+export type {
+  TextInputHandles,
+  TextInputVariant,
+  TextInputProps,
+} from './types';
+
+export const getState = ({
+  disabled,
+  error,
+  editable,
+  loading,
+  isEmptyValue,
+}: {
+  disabled?: boolean;
+  error?: string;
+  editable?: boolean;
+  loading: boolean;
+  isEmptyValue?: boolean;
+}): State => {
+  if (disabled) {
+    return 'disabled';
+  }
+  if (error) {
+    return 'error';
+  }
+  if (!editable || loading) {
+    return 'readonly';
+  }
+  if (!isEmptyValue) {
+    return 'filled';
+  }
+
+  return 'default';
+};
+
+// Fix issue: Placeholder is not shown on iOS when multiline is true
+// https://github.com/callstack/react-native-paper/pull/3331
+const EMPTY_PLACEHOLDER_VALUE = ' ';
+
+// Simplified style extraction functions
+const extractBackgroundColor = (style: StyleProp<ViewStyle>) => {
+  const flattened = StyleSheet.flatten(style);
+  return flattened?.backgroundColor;
+};
+
+const extractBorderStyles = (style: StyleProp<ViewStyle>) => {
+  const flattened = StyleSheet.flatten(style);
+  if (!flattened) return {};
+
+  const borderKeys = Object.keys(flattened).filter((key) =>
+    key.startsWith('border')
+  );
+  const borderStyles: Record<string, unknown> = {};
+
+  borderKeys.forEach((key) => {
+    borderStyles[key] = flattened[key as keyof typeof flattened];
+  });
+
+  return borderStyles;
+};
+
+/**
+ * TextInput Layout Structure:
+ *
+ * ┌─────────────────────────────────────────────────────────────────────────┐
+ * │                    StyledContainer (with StyledBorder overlay)          │
+ * │  ┌─────────────────────────────────────────────────────────┐             │
+ * │  │                StyledInputWrapper                       │             │
+ * │  │  ┌─────────────────────────────────────────────────┐    │             │
+ * │  │  │          FloatingLabel (Optional)               │    │             │
+ * │  │  │         "Label" or animated position            │    │  ┌──────┐   │
+ * │  │  └─────────────────────────────────────────────────┘    │  │Suffix│   │
+ * │  │                                                         │  │ Icon │   │
+ * │  │  ┌─────────────────────────────────────────────────┐    │  │ or   │   │
+ * │  │  │              InputRow Component                 │    │  │Custom│   │
+ * │  │  │  ┌──────────┐  ┌─────────────────────────────┐  │    │  │(V-   │   │
+ * │  │  │  │  Prefix  │  │       Input Field           │  │    │  │Center│   │
+ * │  │  │  │(Animated)│  │   (Animated TextInput)      │  │    │  │ ed)  │   │
+ * │  │  │  └──────────┘  └─────────────────────────────┘  │    │  └──────┘   │
+ * │  │  └─────────────────────────────────────────────────┘    │             │
+ * │  │                                                         │             │
+ * │  │  ┌─────────────────────────────────────────────────┐    │             │
+ * │  │  │            StyledBottomContainer                │    │             │
+ * │  │  │  ┌─────────────────┐  ┌─────────────────────┐   │    │             │
+ * │  │  │  │ Error/Help Text │  │   Character Count   │   │    │             │
+ * │  │  │  │   (flex: 4)     │  │     (flex: 1)       │   │    │             │
+ * │  │  │  └─────────────────┘  └─────────────────────┘   │    │             │
+ * │  │  └─────────────────────────────────────────────────┘    │             │
+ * │  └─────────────────────────────────────────────────────────┘             │
+ * └─────────────────────────────────────────────────────────────────────────┘
+ *
+ * Note: StyledBorder uses StyleSheet.absoluteFillObject to overlay the entire
+ * StyledContainer, providing the border and background styling.
+ */
+const TextInput = forwardRef<TextInputHandles, TextInputProps>(
+  (
+    {
+      label,
+      prefix,
+      suffix,
+      style,
+      textStyle,
+      testID,
+      accessibilityLabelledBy,
+      error,
+      required,
+      editable = true,
+      disabled = false,
+      loading = false,
+      maxLength,
+      hideCharacterCount = false,
+      helpText,
+      value,
+      defaultValue,
+      renderInputValue,
+      allowFontScaling = false,
+      variant = 'text',
+      ...nativeProps
+    }: TextInputProps,
+    ref?: React.Ref<TextInputHandles>
+  ) => {
+    // Inline the simple getDisplayText function
+    const displayText = (value !== undefined ? value : defaultValue) ?? '';
+    const isEmptyValue = displayText.length === 0;
+
+    const [isFocused, setIsFocused] = React.useState(false);
+
+    const state = getState({
+      disabled,
+      error,
+      editable,
+      loading,
+      isEmptyValue,
+    });
+
+    const theme = useTheme();
+
+    const innerTextInput = React.useRef<RNTextInput | null>(null);
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+        getNativeTextInputRef: () => innerTextInput.current,
+        focus: () => {
+          innerTextInput.current?.focus();
+        },
+        clear: () => innerTextInput.current?.clear(),
+        setNativeProps: (args: NativeTextInputProps) =>
+          innerTextInput.current?.setNativeProps(args),
+        isFocused: () => innerTextInput.current?.isFocused() || false,
+        blur: () => innerTextInput.current?.blur(),
+      }),
+      [innerTextInput]
+    );
+
+    // Simplified style extraction
+    const borderStyles = extractBorderStyles(textStyle);
+    const customBackgroundColor = extractBackgroundColor(style);
+    const backgroundColor =
+      customBackgroundColor ??
+      theme.__hd__.textInput.colors.containerBackground;
+
+    // Simplified callback functions (removed unnecessary memoization for simple cases)
+    const handleFocus = useCallback(
+      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        setIsFocused(true);
+        nativeProps.onFocus?.(event);
+      },
+      [nativeProps]
+    );
+
+    const handleBlur = useCallback(
+      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        setIsFocused(false);
+        nativeProps.onBlur?.(event);
+      },
+      [nativeProps]
+    );
+
+    const handleChangeText = useCallback(
+      (text: string) => {
+        nativeProps.onChangeText?.(text);
+      },
+      [nativeProps]
+    );
+
+    // Simplified callbacks - these don't need memoization as they're stable
+    const handleContainerPress = () => {
+      innerTextInput.current?.focus();
+    };
+
+    // Create text input style without border properties
+    const textInputStyle = textStyle
+      ? { ...StyleSheet.flatten(textStyle) }
+      : {};
+    Object.keys(borderStyles).forEach((key) => {
+      delete textInputStyle[key as keyof typeof textInputStyle];
+    });
+
+    const nativeInputProps: NativeTextInputProps = {
+      style: StyleSheet.flatten([
+        {
+          backgroundColor,
+          color: theme.__hd__.textInput.colors.text,
+        },
+        textInputStyle,
+      ]),
+      testID: 'text-input',
+      accessibilityState: {
+        disabled: state === 'disabled' || state === 'readonly',
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      accessibilityLabelledBy,
+      allowFontScaling,
+      ...nativeProps,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onChangeText: handleChangeText,
+      editable,
+      maxLength,
+      value,
+      defaultValue,
+      placeholder:
+        isFocused || label === undefined
+          ? nativeProps.placeholder
+          : EMPTY_PLACEHOLDER_VALUE,
+    };
+
+    // Create container style without background color
+    const containerStyle = style ? { ...StyleSheet.flatten(style) } : {};
+    if (customBackgroundColor) {
+      delete containerStyle.backgroundColor;
+    }
+
+    const isDisabledOrReadonly = state === 'disabled' || state === 'readonly';
+
+    return (
+      <StyledContainer
+        style={containerStyle}
+        onPress={handleContainerPress}
+        disabled={isDisabledOrReadonly}
+        accessibilityState={{
+          disabled: isDisabledOrReadonly,
+        }}
+        testID={testID}
+      >
+        {/*
+          StyledBorder: Absolute positioned overlay covering entire container
+          - Uses StyleSheet.absoluteFillObject to cover full StyledContainer
+          - Provides border styling and background color
+          - pointerEvents="none" to allow interaction with underlying components
+        */}
+        <StyledBorder
+          themeFocused={isFocused}
+          themeState={state}
+          testID="text-input-border"
+          pointerEvents="none"
+          style={[{ backgroundColor }, borderStyles]}
+        />
+        <StyledInputWrapper>
+          {!!label && (
+            <FloatingLabel
+              label={label}
+              variant={variant}
+              state={state}
+              isFocused={isFocused}
+              required={required}
+              accessibilityLabelledBy={accessibilityLabelledBy}
+              isEmptyValue={isEmptyValue}
+            />
+          )}
+          <InputRow
+            state={state}
+            isFocused={isFocused}
+            prefix={prefix}
+            variant={variant}
+            nativeInputProps={nativeInputProps}
+            renderInputValue={renderInputValue}
+            ref={innerTextInput}
+            isEmptyValue={isEmptyValue}
+          />
+
+          <StyledBottomContainer>
+            <ErrorOrHelpText error={error} helpText={helpText} />
+            <MaxLengthMessage
+              state={state}
+              currentLength={displayText.length}
+              maxLength={maxLength}
+              hideCharacterCount={hideCharacterCount}
+            />
+          </StyledBottomContainer>
+        </StyledInputWrapper>
+        <StyledSuffixContainer>
+          <SuffixComponent state={state} loading={loading} suffix={suffix} />
+        </StyledSuffixContainer>
+      </StyledContainer>
+    );
+  }
+);
+
+export default TextInput;

package/src/components/TextInput/types.ts

@@ -0,0 +1,95 @@
+import type {
+  TextInputProps as NativeTextInputProps,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  TextInput as RNTextInput,
+} from 'react-native';
+import type { IconName } from '@hero-design/rn';
+
+export type TextInputHandles = Pick<
+  RNTextInput,
+  'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'
+>;
+
+export type TextInputVariant = 'text' | 'textarea';
+
+export interface TextInputProps extends NativeTextInputProps {
+  /**
+   * Field label.
+   */
+  label?: string;
+  /**
+   * Name of Icon or ReactElement to render on the left side of the input, before the user's cursor.
+   */
+  prefix?: IconName | React.ReactElement;
+  /**
+   * Name of Icon or ReactElement to render on the right side of the input.
+   */
+  suffix?: IconName | React.ReactElement;
+  /**
+   * Additional wrapper style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Input text style.
+   */
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Accessibility label for the input (Android).
+   */
+  accessibilityLabelledBy?: string;
+  /**
+   * Error message to display.
+   */
+  error?: string;
+  /**
+   *  Whether the input is required. When false, "(Optional)" will be appended to the label.
+   */
+  required?: boolean;
+  /**
+   *  Placeholder text to display.
+   * */
+  placeholder?: string;
+  /**
+   * Whether the input is editable.
+   * */
+  editable?: boolean;
+  /**
+   * Whether the input is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Whether the input is loading.
+   */
+  loading?: boolean;
+  /**
+   * The max length of the input.
+   * If the max length is set, the input will display the current length and the max length.
+   * */
+  maxLength?: number;
+  /**
+   * Whether to hide the character count.
+   * */
+  hideCharacterCount?: boolean;
+  /**
+   * The helper text to display.
+   */
+  helpText?: string;
+  /**
+   * Customise input value renderer
+   */
+  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  /**
+   * Component ref.
+   */
+  ref?: React.Ref<TextInputHandles>;
+  /**
+   * Component variant.
+   */
+  variant?: TextInputVariant;
+}

package/src/emotion.d.ts

@@ -0,0 +1,15 @@
+import '@emotion/react';
+import '@emotion/native';
+import type { Theme as WorkTheme } from './theme';
+
+// Augment the emotion theme for both @emotion/react and @emotion/native
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends WorkTheme {}
+}
+
+// This should make styled components automatically get the Theme type
+declare module '@emotion/native' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends WorkTheme {}
+}

package/src/index.ts

@@ -1,2 +1,17 @@
-// Re-export all components from @hero-design/rn
+// Re-export everything from @hero-design/rn except theme exports we want to override
+import TextInput from './components/TextInput';
+
 export * from '@hero-design/rn';
+
+// Override theme exports with work-specific versions
+export {
+  getTheme,
+  type Theme,
+  ThemeProvider,
+  ThemeSwitcher,
+  useTheme,
+  withTheme,
+} from './theme';
+
+export { default as theme } from './theme';
+export { TextInput };

package/src/jest.d.ts

@@ -0,0 +1,24 @@
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toHaveProp(prop: string, value?: unknown): R;
+      toHaveStyle(style: Record<string, unknown>): R;
+      toBeDisabled(): R;
+      toBeEnabled(): R;
+      toBeVisible(): R;
+      toBeEmptyElement(): R;
+      toHaveTextContent(text: string | RegExp): R;
+      toHaveDisplayValue(value: string | RegExp): R;
+      toBeSelected(): R;
+      toBePartiallyChecked(): R;
+      toBeChecked(): R;
+      toHaveA11yLabel(label: string | RegExp): R;
+      toHaveA11yHint(hint: string | RegExp): R;
+      toHaveA11yRole(role: string): R;
+      toHaveA11yState(state: Record<string, boolean | string>): R;
+      toHaveA11yValue(value: Record<string, unknown>): R;
+    }
+  }
+}
+
+export {};

package/src/theme/ThemeProvider.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ThemeProvider as BaseThemeProvider, useTheme } from '@hero-design/rn';
+import type { Theme } from './getTheme';
+
+export interface ThemeProviderProps {
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+  children: React.ReactNode;
+}
+
+interface ThemeProviderType {
+  (props: ThemeProviderProps): React.ReactElement;
+}
+
+const WorkThemeProvider = BaseThemeProvider as ThemeProviderType;
+
+const useWorkTheme = useTheme as () => Theme;
+
+export { WorkThemeProvider, useWorkTheme };
+
+export default WorkThemeProvider;

package/src/theme/ThemeSwitcher.tsx

@@ -0,0 +1,76 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+
+import {
+  eBensSystemPalette,
+  ehWorkDarkSystemPalette,
+  jobsSystemPalette,
+  swagDarkSystemPalette,
+  swagLightJobsSystemPalette,
+  swagLightSystemPalette,
+  swagSystemPalette,
+  walletSystemPalette,
+  workSystemPalette,
+} from '@hero-design/rn';
+import getWorkTheme from './getTheme';
+import { WorkThemeProvider } from './ThemeProvider';
+
+type ThemeName =
+  | 'swag'
+  | 'swagDark'
+  | 'swagLight'
+  | 'work'
+  | 'jobs'
+  | 'wallet'
+  | 'eBens'
+  | 'ehWorkDark'
+  | 'ehWork'
+  | 'ehJobs';
+
+const WorkThemeSwitcher = ({
+  name = 'work',
+  children,
+}: {
+  name?: ThemeName;
+  children: React.ReactNode;
+}) => {
+  const theme = useMemo(() => {
+    switch (name) {
+      case 'swag':
+        return getWorkTheme(undefined, swagSystemPalette);
+      case 'work':
+        return getWorkTheme(undefined, workSystemPalette);
+      case 'jobs':
+        return getWorkTheme(undefined, jobsSystemPalette);
+      case 'wallet':
+        return getWorkTheme(undefined, walletSystemPalette);
+      case 'eBens':
+        return getWorkTheme(undefined, eBensSystemPalette);
+      case 'swagDark':
+        return getWorkTheme(undefined, swagDarkSystemPalette);
+      case 'swagLight':
+      case 'ehWork':
+        return getWorkTheme(undefined, swagLightSystemPalette);
+      case 'ehWorkDark':
+        return getWorkTheme(undefined, ehWorkDarkSystemPalette);
+      case 'ehJobs':
+        return getWorkTheme(undefined, swagLightJobsSystemPalette);
+    }
+  }, [name]);
+
+  return <WorkThemeProvider theme={theme}>{children}</WorkThemeProvider>;
+};
+
+export const withWorkTheme =
+  <P extends Record<string, unknown>>(
+    C: React.ComponentType<P>,
+    themeName: ThemeName
+  ) =>
+  (props: PropsWithChildren<P>) => {
+    return (
+      <WorkThemeSwitcher name={themeName}>
+        <C {...props} />
+      </WorkThemeSwitcher>
+    );
+  };
+
+export default WorkThemeSwitcher;

package/src/theme/__tests__/ThemeProvider.spec.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { WorkThemeProvider, useWorkTheme } from '../ThemeProvider';
+import workTheme from '..';
+
+const TestComponent = () => {
+  const theme = useWorkTheme();
+  return <Text testID="test-text">Theme loaded: {theme ? 'Yes' : 'No'}</Text>;
+};
+
+describe('WorkThemeProvider', () => {
+  it('should provide theme to children', () => {
+    const { getByTestId } = render(
+      <WorkThemeProvider theme={workTheme}>
+        <TestComponent />
+      </WorkThemeProvider>
+    );
+
+    expect(getByTestId('test-text')).toBeTruthy();
+  });
+
+  it('should allow useWorkTheme hook to access theme', () => {
+    const { getByText } = render(
+      <WorkThemeProvider theme={workTheme}>
+        <TestComponent />
+      </WorkThemeProvider>
+    );
+
+    expect(getByText('Theme loaded: Yes')).toBeTruthy();
+  });
+});