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

package/src/components/TextInput/Group/__tests__/index.spec.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import { within } from '@testing-library/react-native';
+import TextInputGroup from '..';
+import renderWithTheme from '../../../../../testUtils/renderWithTheme';
+import TextInput from '../..';
+import { theme } from '../../../..';
+
+describe('TextInputGroup', () => {
+  it('should render', () => {
+    const { getByText, getByTestId, toJSON } = renderWithTheme(
+      <TextInputGroup>
+        <TextInput label="Text Input 1" value="Text Input 1" required />
+        <TextInput
+          label="Text Input 2"
+          value="Text Input 2"
+          error="This is an error"
+          testID="text-input-2"
+        />
+        <TextInput label="Text Input 3" value="Text Input 3" required />
+      </TextInputGroup>
+    );
+
+    expect(toJSON()).toMatchSnapshot('xxx');
+
+    expect(getByText('Text Input 1')).toBeVisible();
+    expect(getByText('Text Input 2', { exact: false })).toBeVisible();
+    expect(
+      within(getByTestId('text-input-2')).getByText('(Optional)', {
+        exact: false,
+      })
+    ).toBeVisible();
+    expect(getByText('This is an error')).toBeVisible();
+    expect(getByText('Text Input 3')).toBeVisible();
+  });
+
+  it('renders with correct border styling', () => {
+    const { getByTestId } = renderWithTheme(
+      <TextInputGroup>
+        <TextInput value="Text Input 1" testID="text-input-1" />
+        <TextInput value="Text Input 2" testID="text-input-2" />
+        <TextInput value="Text Input 3" testID="text-input-3" />
+      </TextInputGroup>
+    );
+
+    expect(
+      within(getByTestId('text-input-1'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+        }),
+      ])
+    );
+
+    expect(
+      within(getByTestId('text-input-2'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderRadius: 0,
+        }),
+      ])
+    );
+
+    expect(
+      within(getByTestId('text-input-3'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+        }),
+      ])
+    );
+  });
+
+  it('merges with the children styles in correct order', () => {
+    const { getByTestId } = renderWithTheme(
+      <TextInputGroup>
+        <TextInput
+          value="Text Input 1"
+          testID="text-input-1"
+          textStyle={{
+            borderColor: '#ffffff',
+            borderWidth: 1,
+          }}
+        />
+        <TextInput
+          value="Text Input 2"
+          testID="text-input-2"
+          style={{ width: 300 }}
+        />
+      </TextInputGroup>
+    );
+
+    // Merging text styles
+    expect(
+      within(getByTestId('text-input-1'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          // Passed style
+          borderWidth: 1,
+          borderColor: '#ffffff',
+          // Injected style
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+        }),
+      ])
+    );
+
+    // Merging container styles
+    expect(getByTestId('text-input-2').props.style.flat()).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          // Passed style
+          width: 300,
+          // Injected style
+          marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
+        }),
+      ])
+    );
+
+    expect(
+      within(getByTestId('text-input-2'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          // Injected style
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+        }),
+      ])
+    );
+  });
+
+  it('does not alter the children styles if there is only one child', () => {
+    const { getByTestId } = renderWithTheme(
+      <TextInputGroup>
+        <TextInput
+          value="Text Input 1"
+          testID="text-input-1"
+          style={{
+            marginTop: theme.space.medium,
+          }}
+        />
+      </TextInputGroup>
+    );
+
+    // Container style is not injected
+    expect(getByTestId('text-input-1').props.style.flat()).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          // Passed style instead of injected style
+          marginTop: theme.space.medium,
+        }),
+      ])
+    );
+
+    // Border style is not injected
+    const internalBorderStyle =
+      getByTestId('text-input-border').props.style.flat();
+    const borderKeys = Object.keys(internalBorderStyle).filter((key) =>
+      key.startsWith('border')
+    );
+    expect(borderKeys).toHaveLength(0);
+  });
+});

package/src/components/TextInput/Group/__tests__/utils.spec.ts

@@ -0,0 +1,73 @@
+import { theme } from '../../../..';
+import { generateBorderStyle, generateMarginStyle } from '../utils';
+
+describe('utils', () => {
+  describe('generateBorderStyle', () => {
+    it('should generate the correct border style for the first child', () => {
+      const borderStyle = generateBorderStyle({ index: 0, length: 3 });
+      expect(borderStyle).toEqual({
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+      });
+    });
+
+    it('should generate the correct border style for the last child', () => {
+      const borderStyle = generateBorderStyle({ index: 2, length: 3 });
+      expect(borderStyle).toEqual({
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+      });
+    });
+
+    it('should generate the correct border style for the middle child', () => {
+      const borderStyle = generateBorderStyle({ index: 1, length: 3 });
+      expect(borderStyle).toEqual({
+        borderRadius: 0,
+      });
+    });
+  });
+
+  describe('generateMarginStyle', () => {
+    it('should generate the correct margin style for the first child', () => {
+      const marginStyle = generateMarginStyle({
+        index: 0,
+        length: 3,
+        theme,
+      });
+      expect(marginStyle).toEqual({
+        marginTop: 0,
+      });
+    });
+
+    it('should generate the correct margin style for the last child', () => {
+      const marginStyle = generateMarginStyle({
+        index: 2,
+        length: 3,
+        theme,
+      });
+      expect(marginStyle).toEqual({
+        marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
+      });
+    });
+
+    it('should generate the correct margin style for the middle child', () => {
+      const marginStyle = generateMarginStyle({
+        index: 1,
+        length: 3,
+        theme,
+      });
+      expect(marginStyle).toEqual({
+        marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
+      });
+    });
+
+    it('should generate the correct margin style for a single child', () => {
+      const marginStyle = generateMarginStyle({
+        index: 0,
+        length: 1,
+        theme,
+      });
+      expect(marginStyle).toEqual({});
+    });
+  });
+});

package/src/components/TextInput/Group/index.tsx

@@ -0,0 +1,102 @@
+import React, { ReactNode, useMemo } from 'react';
+import { StyleProp, StyleSheet, ViewProps, ViewStyle } from 'react-native';
+import { Box, useTheme } from '@hero-design/rn';
+import { generateBorderStyle, generateMarginStyle } from './utils';
+
+export interface TextInputGroupProps extends ViewProps {
+  /**
+   * The children of the TextInputGroup. In order for the group styling to work,
+   * they must be either HD TextInput components or enhanced TextInput components
+   * that supports TextInput interface.
+   *
+   * Example:
+   * const EnhancedTextInput = (props: TextInputProps) => {
+   *   return <TextInput {...props} />;
+   * };
+   *
+   * <TextInput.Group>
+   *   <TextInput ... />
+   *   <EnhancedTextInput ... />
+   * </TextInput.Group>
+   */
+  children: ReactNode;
+  /**
+   * The style of the TextInputGroup.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * The testID of the TextInputGroup.
+   */
+  testID?: string;
+}
+
+const TextInputGroup = ({
+  children,
+  style,
+  testID,
+  ...props
+}: TextInputGroupProps) => {
+  const theme = useTheme();
+  const childrenArray = React.Children.toArray(children).filter(
+    React.isValidElement
+  );
+
+  // If there are multiple children, inject styles to group them together.
+  const groupedChildren = useMemo(
+    () =>
+      childrenArray.map((child, index) => {
+        const rawChildStyle = (child as React.ReactElement).props.style;
+        const rawChildTextStyle = (child as React.ReactElement).props.textStyle;
+
+        // Handle array styles by flattening them first
+        const childStyle = StyleSheet.flatten(rawChildStyle);
+        const childTextStyle = StyleSheet.flatten(rawChildTextStyle);
+
+        /**
+         * Merge the child style with the group injected style.
+         * Order of precedence:
+         * 1. Child style.
+         * 2. Group injected style.
+         */
+        const mergedStyle = {
+          ...childStyle,
+          ...generateMarginStyle({
+            index,
+            length: childrenArray.length,
+            theme,
+          }),
+        };
+
+        /**
+         * Merge the child text style with the group text style.
+         * Order of precedence:
+         * 1. Group text style through textStyle prop.
+         * 2. Child text style.
+         * 3. Group injected border style.
+         */
+        const mergedTextStyle = {
+          ...childTextStyle,
+          ...generateBorderStyle({
+            index,
+            length: childrenArray.length,
+          }),
+        };
+
+        return React.cloneElement(child as React.ReactElement, {
+          style: mergedStyle,
+          textStyle: mergedTextStyle,
+          // Internal text input prop to allow for different styling
+          enableGroupStyle: true,
+        });
+      }),
+    [childrenArray, theme]
+  );
+
+  return (
+    <Box style={style} testID={testID} {...props}>
+      {groupedChildren}
+    </Box>
+  );
+};
+
+export default TextInputGroup;

package/src/components/TextInput/Group/utils.ts

@@ -0,0 +1,67 @@
+import { CSSProperties } from 'react';
+import { Theme } from '@hero-design/rn';
+
+/**
+ * Generates the border style for the TextInputGroup.
+ * @param index - The index of the TextInput.
+ * @param length - The length of the TextInputGroup.
+ * @returns The border style for the TextInputGroup.
+ */
+const generateBorderStyle = ({
+  index,
+  length,
+}: {
+  index: number;
+  length: number;
+}): CSSProperties => {
+  const isFirst = index === 0;
+  const isLast = index === length - 1;
+
+  if (length === 1) {
+    return {};
+  }
+
+  if (isFirst) {
+    return {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+    };
+  }
+
+  if (isLast) {
+    return {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+    };
+  }
+
+  return {
+    borderRadius: 0,
+  };
+};
+
+const generateMarginStyle = ({
+  index,
+  length,
+  theme,
+}: {
+  index: number;
+  length: number;
+  theme: Theme;
+}) => {
+  if (length === 1) {
+    return {};
+  }
+
+  if (index === 0) {
+    return {
+      marginTop: 0,
+    };
+  }
+
+  return {
+    marginTop: -theme.__hd__.textInput.borderWidths.container.normal,
+  };
+};
+
+export { generateBorderStyle, generateMarginStyle };

package/src/components/TextInput/InputRow.tsx

@@ -1,19 +1,20 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, TextInput as RNTextInput } from 'react-native';
-import type { TextInputProps as NativeTextInputProps } from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { TextInput as RNTextInput, View } from 'react-native';
+import type {
+  NativeSyntheticEvent,
+  TextInputProps as NativeTextInputProps,
+  TextInputFocusEventData,
+} from 'react-native';
 import { IconName } from '@hero-design/rn';
 import { StyledInputRow } from './StyledTextInput';
 import PrefixComponent from './PrefixComponent';
 import InputComponent from './InputComponent';
 import type { State } from './StyledTextInput';
 import type { TextInputVariant } from './types';
-import { LABEL_ANIMATION_DURATION } from './constants';
 
 interface InputRowProps {
   /** Current state of the input (focused, error, disabled, etc.) */
   state: State;
-  /** Whether the input is focused */
-  isFocused: boolean;
   /** Optional prefix icon or component */
   prefix?: IconName | React.ReactElement;
   /** Input variant - 'text' or 'textarea' */
@@ -24,6 +25,10 @@ interface InputRowProps {
   renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
   /** Whether the input value is empty */
   isEmptyValue: boolean;
+  /** Whether the input should be visible when not focused and empty. Defaults to true. */
+  shouldShowWhenUnfocused?: boolean;
+  /** Test ID for testing purposes */
+  testID?: string;
 }
 
 /**
@@ -51,50 +56,63 @@ const InputRow = React.forwardRef<RNTextInput, InputRowProps>(
   (
     {
       state,
-      isFocused,
       prefix,
       variant,
       nativeInputProps,
       renderInputValue,
       isEmptyValue,
+      testID,
+      shouldShowWhenUnfocused = false,
     },
     ref
   ) => {
-    const shouldShow = isFocused || !isEmptyValue;
-    const opacity = useRef(new Animated.Value(shouldShow ? 1 : 0)).current;
+    // We need to track focus state locally because the native TextInput's onFocus/onBlur
+    // events are the source of truth for when the input is actually focused, and we need
+    // this state to control visibility aand accessibility behavior
+    const [isFocused, setIsFocused] = useState(false);
 
-    useEffect(() => {
-      Animated.timing(opacity, {
-        toValue: shouldShow ? 1 : 0,
-        duration: LABEL_ANIMATION_DURATION,
-        useNativeDriver: true,
-      }).start();
-    }, [shouldShow, opacity]);
+    const shouldShow = shouldShowWhenUnfocused || isFocused || !isEmptyValue;
+
+    // Simplified callback functions (removed unnecessary memoization for simple cases)
+    const handleFocus = useCallback(
+      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        setIsFocused(true);
+        nativeInputProps.onFocus?.(event);
+      },
+      [nativeInputProps]
+    );
+
+    const handleBlur = useCallback(
+      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        setIsFocused(false);
+        nativeInputProps.onBlur?.(event);
+      },
+      [nativeInputProps]
+    );
 
     return (
-      <StyledInputRow>
+      <StyledInputRow testID={testID} themeOpacity={shouldShow ? 1 : 0}>
         {/* Prefix animation */}
-        <Animated.View style={{ opacity }}>
-          <PrefixComponent
-            state={state}
-            prefix={prefix}
-            accessibilityElementsHidden={!shouldShow}
-          />
-        </Animated.View>
+        <View>
+          <PrefixComponent state={state} prefix={prefix} />
+        </View>
         {/* Input animation */}
-        <Animated.View
-          style={{ flex: 1, opacity }}
+        <View
+          style={{ flex: 1 }}
           testID="input-row-input-wrapper"
           accessibilityLabel="Text input field"
-          accessibilityElementsHidden={!shouldShow}
         >
           <InputComponent
             variant={variant}
-            nativeInputProps={nativeInputProps}
+            nativeInputProps={{
+              ...nativeInputProps,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+            }}
             renderInputValue={renderInputValue}
             ref={ref}
           />
-        </Animated.View>
+        </View>
       </StyledInputRow>
     );
   }

package/src/components/TextInput/MIGRATION.md

@@ -0,0 +1,133 @@
+# Migration Plan: `TextInput` from `@hero-design/rn` to `@hero-design/rn-work-uikit`
+
+This document outlines the steps and considerations for migrating the `TextInput` component from the `@hero-design/rn` package to the `@hero-design/rn-work-uikit` package.
+
+## 1. Overview of Changes
+
+While the component's props interface remains largely the same, the `@hero-design/rn-work-uikit` version introduces significant UI and behavioral changes. The new implementation is more modular and introduces a floating label for a more modern user experience.
+
+## 2. Key Changes to Be Aware Of
+
+### 2.1. Prefix Icon Visibility
+
+In the `@hero-design/rn-work-uikit` version, the prefix icon is not visible when the `TextInput` is in its default, idle state (i.e., not focused and with no value). The prefix only appears once the `TextInput` is focused or contains a value. This is different from the `@hero-design/rn` version, where the prefix was always visible.
+
+### 2.2. "Optional" Label Text
+
+The behavior of the `required` prop has changed:
+
+*   **Old Behavior (`@hero-design/rn`):** When `required={true}`, an asterisk (`*`) was appended to the label.
+*   **New Behavior (`@hero-design/rn-work-uikit`):** When `required={false}` (or it is not provided), the text `(Optional)` is appended to the label. When `required={true}`, nothing is appended.
+
+This is an inversion of how optionality is communicated to the user.
+
+### 2.3. Layout of Helper and Error Text
+
+The layout for displaying `helpText`, `error` messages, and the `maxLength` character count has been updated.
+
+*   **Old Behavior (`@hero-design/rn`):** These elements were typically displayed below the input.
+*   **New Behavior (`@hero-design/rn-work-uikit`):** The `error` or `helpText` is displayed on the left, and the `maxLength` count is on the right, within the same line under the input field. This makes for a more compact component.
+
+## 3. Migration Steps
+
+1.  **Update Imports:**
+    Change the import statement from `@hero-design/rn` to `@hero-design/rn-work-uikit`.
+
+    ```diff
+    - import { TextInput } from '@hero-design/rn';
+    + import { TextInput } from '@hero-design/rn-work-uikit';
+    ```
+
+2.  **Review existing `TextInput` implementations:**
+    Audit your app for all uses of the `TextInput` component. Pay close attention to forms and screens where the visual layout is critical.
+
+3.  **Perform Visual Regression Testing:**
+    Due to the floating label and other layout changes, existing screens may look different. It is crucial to perform visual regression testing on all screens that use `TextInput`.
+
+## 4. Updating Unit and Snapshot Tests
+
+The UI changes will likely break your existing snapshot tests and may affect other unit tests.
+
+### 4.1. Snapshot Tests
+
+Snapshot tests for components using `TextInput` will need to be updated. After you've confirmed the new look is correct, you can update the snapshots.
+
+```bash
+# For Jest users
+npm test -- -u
+# or
+yarn test -u
+```
+
+### 4.2. Unit Test Adjustments
+
+Here's what to look for in your unit tests:
+
+*   **Label Testing:**
+    *   Tests that checked for an asterisk (`*`) for required fields will now fail.
+    *   You should now check for the `(Optional)` text when the field is *not* required.
+
+    *Example Test Case (using React Native Testing Library):*
+
+    ```javascript
+    // Old test for required field
+    it('should display an asterisk for required fields', () => {
+      const { getByText } = render(<TextInput label="My Field" required />);
+      // This will now fail
+      expect(getByText('*')).toBeTruthy(); 
+    });
+
+    // New test for optional field
+    it('should display (Optional) for non-required fields', () => {
+      const { queryByText } = render(<TextInput label="My Field" required={false} />);
+      expect(queryByText(/\(Optional\)/)).toBeTruthy();
+    });
+    
+    // New test for required field
+    it('should not display (Optional) for required fields', () => {
+      const { queryByText } = render(<TextInput label="My Field" required={true} />);
+      expect(queryByText(/\(Optional\)/)).toBeNull();
+    });
+    ```
+
+*   **Finding Elements:**
+    *   Because of the new floating label animation, the way you query for elements might need to change, especially if you were targeting specific wrapper views for styling.
+    *   The internal structure of the component has changed significantly. Tests that rely on `Dive` in Enzyme or deep selectors will be brittle and will likely need to be rewritten. It's better to test based on what the user sees, e.g., using `getByTestId`, `getByText`, etc.
+
+*   **Interaction Tests:**
+    *   If you have tests that simulate user input, the floating label will animate. This shouldn't affect most tests, but if you have complex tests that check for element positions, they might need adjustment.
+
+### 4.3. Breaking Change: `testID` Handling
+
+The way `testID` is applied to the underlying native `TextInput` component has changed, which will break existing tests that query for the input field.
+
+*   **Old Behavior (`@hero-design/rn`):** The `testID` for the native input was dynamically created by appending `-text-input` to the `testID` prop (e.g., `my-test-id-text-input`).
+*   **New Behavior (`@hero-design/rn-work-uikit`):** The `testID` for the native input is now **hardcoded to `'text-input'`.**
+
+Your tests must be updated to reflect this change.
+
+**Example Test Update:**
+
+```javascript
+// Old test query
+const input = getByTestId('my-form-field-text-input');
+
+// New test query
+const input = getByTestId('text-input');
+```
+
+Because the native input `testID` is now static, if you have multiple `TextInput` components on one screen, you must first scope your query to the correct component container.
+
+**Example with multiple `TextInput`s:**
+
+```javascript
+import { render, within } from '@testing-library/react-native';
+
+// Get the container for a specific TextInput using its unique testID
+const textInputContainer = getByTestId('my-unique-test-id');
+
+// Find the native input within that container
+const nativeInput = within(textInputContainer).getByTestId('text-input');
+```
+
+This plan should provide a good starting point for the migration. The key is to be aware of the visual changes and to thoroughly test all instances of the `TextInput` component.