@hero-design/rn-work-uikit 1.1.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,4 +1,6 @@
 // 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
@@ -12,3 +14,4 @@ export {
 } 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/__tests__/__snapshots__/index.spec.ts.snap

@@ -1317,7 +1317,7 @@ exports[`theme returns correct theme object 1`] = `
       "borderWidths": {
         "container": {
           "focused": 2,
-          "normal": 1,
+          "normal": 2,
         },
       },
       "colors": {
@@ -1329,20 +1329,22 @@ exports[`theme returns correct theme object 1`] = `
           "readonly": "#808f91",
         },
         "borders": {
-          "default": "#001f23",
+          "default": "#e8e9ea",
           "disabled": "#bfc1c5",
           "error": "#cb300a",
-          "filled": "#001f23",
-          "readonly": "#808f91",
+          "filled": "#e8e9ea",
+          "focused": "#001f23",
+          "readonly": "#bfc1c5",
         },
         "containerBackground": "#ffffff",
         "error": "#cb300a",
         "labelBackground": "#ffffff",
         "labels": {
-          "default": "#001f23",
+          "default": "#808f91",
           "disabled": "#bfc1c5",
-          "error": "#001f23",
-          "filled": "#001f23",
+          "error": "#cb300a",
+          "filled": "#808f91",
+          "focused": "#001f23",
           "readonly": "#808f91",
         },
         "labelsInsideTextInput": {
@@ -1357,6 +1359,7 @@ exports[`theme returns correct theme object 1`] = `
           "disabled": "#bfc1c5",
           "error": "#cb300a",
           "filled": "#001f23",
+          "focused": "#001f23",
           "readonly": "#808f91",
         },
         "placeholder": "#4d6265",
@@ -1380,8 +1383,10 @@ exports[`theme returns correct theme object 1`] = `
         "container": 8,
       },
       "sizes": {
-        "errorAndHelpTextContainerHeight": 15.692307692307693,
+        "containerMinHeight": 54.92307692307692,
+        "errorAndHelpTextContainerHeight": 0,
         "textInputMaxHeight": 141.23076923076923,
+        "textInputMinHeight": 23.53846153846154,
         "textareaHeight": 141.23076923076923,
       },
       "space": {
@@ -1392,11 +1397,13 @@ exports[`theme returns correct theme object 1`] = `
         "errorContainerMarginRight": 3.9230769230769234,
         "errorMarginLeft": 3.9230769230769234,
         "inputHorizontalMargin": 7.846153846153847,
+        "inputWrapperMarginVertical": 7.846153846153847,
         "labelHorizontalPadding": 3.9230769230769234,
         "labelInsideTextInputMarginTop": -1.9615384615384617,
         "labelLeft": 31.384615384615387,
         "labelPaddingBottom": 7.846153846153847,
         "labelTop": 10.461538461538462,
+        "prefixAndInputContainerGap": 3.9230769230769234,
       },
     },
     "timePicker": {

package/src/theme/components/textInput.ts

@@ -8,12 +8,38 @@ const getTextInputTheme = (theme: Theme) => {
     ...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 = {
@@ -30,6 +56,10 @@ const getTextInputTheme = (theme: Theme) => {
 
   const borderWidths = {
     ...baseTextInputTheme.borderWidths,
+    container: {
+      ...baseTextInputTheme.borderWidths.container,
+      normal: theme.borderWidths.medium,
+    },
   };
 
   const radii = {
@@ -38,6 +68,9 @@ const getTextInputTheme = (theme: Theme) => {
 
   const sizes = {
     ...baseTextInputTheme.sizes,
+    containerMinHeight: theme.sizes.xxxxlarge,
+    errorAndHelpTextContainerHeight: 0,
+    textInputMinHeight: baseTextInputTheme.fontSizes.text + theme.space.small,
   };
 
   const lineHeights = {