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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.1.0",
+  "version": "1.2.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,6 +20,9 @@
     "set-dev-env": "npm pkg set react-native=src/index.ts"
   },
   "dependencies": {
+    "@emotion/native": "^11.9.3",
+    "@emotion/primitives-core": "11.0.0",
+    "@emotion/react": "^11.9.3",
     "@hero-design/rn": "^8.101.1"
   },
   "peerDependencies": {

package/src/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,126 +1,120 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`first test to ensure configure correctly should render TextInput with props in snapshot 1`] = `
-<View
-  style={
+<Pressable
+  accessibilityState={
     {
-      "flex": 1,
+      "disabled": false,
     }
   }
+  disabled={false}
+  onPress={[Function]}
+  style={
+    [
+      [
+        {
+          "flexDirection": "row",
+          "marginTop": 7.846153846153847,
+          "minHeight": 54.92307692307692,
+          "paddingHorizontal": 15.692307692307693,
+          "width": "100%",
+        },
+      ],
+      {},
+    ]
+  }
+  testID="text-input"
 >
   <View
-    pointerEvents="auto"
+    pointerEvents="none"
+    style={
+      [
+        [
+          {
+            "borderColor": "#e8e9ea",
+            "borderRadius": 8,
+            "borderWidth": 2,
+          },
+        ],
+        [
+          {
+            "backgroundColor": "#ffffff",
+          },
+          {},
+        ],
+      ]
+    }
+    testID="text-input-border"
+    themeFocused={false}
+    themeState="filled"
+  />
+  <View
     style={
       [
         [
           {
+            "backgroundColor": "transparent",
+            "borderRadius": 8,
+            "flex": 1,
+            "flexDirection": "column",
+            "marginBottom": 7.846153846153847,
             "marginTop": 7.846153846153847,
-            "width": "100%",
+            "overflow": "hidden",
           },
         ],
         undefined,
       ]
     }
-    testID="text-input"
   >
     <View
-      onLayout={[Function]}
       style={
         [
           [
             {
               "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 8,
               "flexDirection": "row",
-              "padding": 15.692307692307693,
+              "flexGrow": 2,
+              "flexShrink": 1,
+              "gap": 3.9230769230769234,
             },
           ],
           undefined,
         ]
       }
     >
-      <View
-        style={
-          [
-            [
-              {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-              },
-            ],
-            [
-              {
-                "backgroundColor": "#ffffff",
-              },
-              undefined,
-            ],
-          ]
-        }
-        testID="text-input-border"
-        themeFocused={false}
-        themeState="filled"
-      />
-      <View />
       <AnimatedView
-        pointerEvents="none"
         style={
-          [
-            [
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "left": 23.53846153846154,
-                "position": "absolute",
-                "right": 15.692307692307693,
-                "top": -10.461538461538462,
-                "zIndex": 1,
-              },
-            ],
-            [
-              {
-                "transformOrigin": "left top",
-              },
-              {
-                "transform": [
-                  {
-                    "translateY": {
-                      "addListener": [MockFunction],
-                      "removeListener": [MockFunction],
-                      "setValue": [MockFunction],
-                    },
-                  },
-                  {
-                    "scale": {
-                      "addListener": [MockFunction],
-                      "removeListener": [MockFunction],
-                      "setValue": [MockFunction],
-                    },
-                  },
-                ],
-              },
-            ],
-          ]
+          {
+            "opacity": {
+              "_offset": 0,
+              "_value": 0,
+              "addListener": [MockFunction],
+              "interpolate": [MockFunction],
+              "removeAllListeners": [MockFunction],
+              "removeListener": [MockFunction],
+              "setValue": [MockFunction],
+            },
+          }
         }
-        themeHasPrefix={false}
-        themeVariant="text"
       />
-      <View
+      <AnimatedView
+        accessibilityElementsHidden={false}
+        accessibilityLabel="Text input field"
         style={
-          [
-            [
-              {
-                "alignItems": "center",
-                "alignSelf": "stretch",
-                "flexDirection": "row",
-                "flexGrow": 2,
-                "flexShrink": 1,
-              },
-            ],
-            undefined,
-          ]
+          {
+            "flex": 1,
+            "opacity": {
+              "_offset": 0,
+              "_value": 0,
+              "addListener": [MockFunction],
+              "interpolate": [MockFunction],
+              "removeAllListeners": [MockFunction],
+              "removeListener": [MockFunction],
+              "setValue": [MockFunction],
+            },
+          }
         }
+        testID="input-row-input-wrapper"
       >
         <TextInput
           accessibilityState={
@@ -139,13 +133,12 @@ exports[`first test to ensure configure correctly should render TextInput with p
             [
               [
                 {
-                  "alignSelf": "stretch",
                   "flexGrow": 2,
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 15.692307692307693,
                   "height": undefined,
-                  "marginHorizontal": 7.846153846153847,
                   "maxHeight": 141.23076923076923,
+                  "minHeight": 23.53846153846154,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -155,7 +148,7 @@ exports[`first test to ensure configure correctly should render TextInput with p
                   "backgroundColor": "#ffffff",
                   "color": "#001f23",
                 },
-                undefined,
+                {},
               ],
             ]
           }
@@ -163,54 +156,36 @@ exports[`first test to ensure configure correctly should render TextInput with p
           themeVariant="text"
           value="test value"
         />
-      </View>
+      </AnimatedView>
     </View>
     <View
       style={
         [
           [
             {
-              "minHeight": 15.692307692307693,
-              "paddingHorizontal": 15.692307692307693,
-              "paddingTop": 1.9615384615384617,
+              "alignItems": "flex-start",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
             },
           ],
           undefined,
         ]
       }
-    >
-      <View
-        style={
-          [
-            [
-              {
-                "alignItems": "flex-start",
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-              },
-            ],
-            undefined,
-          ]
-        }
-      />
-    </View>
+    />
   </View>
   <View
-    pointerEvents="box-none"
-    position="bottom"
     style={
       [
         [
           {
-            "elevation": 9999,
-            "flexDirection": "column-reverse",
-            "paddingHorizontal": 23.53846153846154,
-            "paddingVertical": 15.692307692307693,
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
           },
         ],
         undefined,
       ]
     }
   />
-</View>
+</Pressable>
 `;

package/src/__tests__/theme-export-override.spec.ts

@@ -44,6 +44,12 @@ jest.mock('@hero-design/rn', () => ({
       },
     },
   })),
+  // Mock styled function
+  styled: jest.fn(() => jest.fn(() => 'MockStyledComponent')),
+  // Mock Typography component
+  Typography: {
+    Caption: 'MockCaption',
+  },
   // Re-export everything else as is
   Button: 'MockButton',
   TextInput: 'MockTextInput',

package/src/components/TextInput/ErrorOrHelpText.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Icon } from '@hero-design/rn';
+import {
+  StyledErrorRow,
+  StyledError,
+  StyledHelperText,
+} from './StyledTextInput';
+
+export interface ErrorOrHelpTextProps {
+  /** Error message to display (takes priority) */
+  error?: string;
+  /** Helper text to display when no error */
+  helpText?: string;
+}
+
+/**
+ * ErrorOrHelpText Component
+ *
+ * Displays either error messages or help text below the TextInput.
+ * Shows error messages with a danger icon when present, otherwise displays help text.
+ *
+ * Key Features:
+ * - Conditional rendering: error takes priority over help text
+ * - Error messages include a danger icon for visual clarity
+ * - Uses styled components for consistent theming
+ * - Includes proper test IDs for testing
+ *
+ * Rendering Logic:
+ * 1. If error exists: Show error message with danger icon
+ * 2. If no error but helpText exists: Show help text
+ * 3. If neither exists: Render nothing
+ *
+ * @param props - The component props (see ErrorOrHelpTextProps interface for details)
+ */
+const ErrorOrHelpText: React.FC<ErrorOrHelpTextProps> = ({
+  error,
+  helpText,
+}) => {
+  return error ? (
+    // Error state: Show error message with danger icon
+    <StyledErrorRow>
+      <Icon
+        testID="input-error-icon"
+        icon="circle-info"
+        size="xsmall"
+        intent="danger"
+      />
+      <StyledError testID="input-error-message">{error}</StyledError>
+    </StyledErrorRow>
+  ) : (
+    // Help text state: Show help text if provided
+    !!helpText && <StyledHelperText>{helpText}</StyledHelperText>
+  );
+};
+
+ErrorOrHelpText.displayName = 'ErrorOrHelpText';
+
+export default React.memo(ErrorOrHelpText);

package/src/components/TextInput/FloatingLabel.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import { StyledFloatingLabelContainer, StyledLabel } from './StyledTextInput';
+import type { State } from './StyledTextInput';
+import type { TextInputVariant } from './types';
+import { useTheme } from '../../theme';
+import { LABEL_ANIMATION_DURATION } from './constants';
+
+export interface FloatingLabelProps {
+  /** The text to display in the label */
+  label: string;
+  /** Input variant that affects animation positioning */
+  variant: TextInputVariant;
+  /** Current input state for styling */
+  state: State;
+  /** Whether the input is focused */
+  isFocused: boolean;
+  /** Whether field is required (affects optional text) */
+  required?: boolean;
+  /** Accessibility ID for screen readers */
+  accessibilityLabelledBy?: string;
+  /** Whether the input value is empty */
+  isEmptyValue: boolean;
+}
+
+/**
+ * FloatingLabel Component
+ *
+ * Handles the animated floating label behavior for TextInput.
+ * The label starts positioned over the input and animates to a smaller size above the input
+ * when the field is focused or has content.
+ *
+ * Key Features:
+ * - Smooth scale and translate animations using React Native Animated API
+ * - Responds to focus state and content presence
+ * - Automatically appends "(Optional)" text for non-required fields
+ * - Supports different variants (text/textarea) with appropriate positioning
+ * - Maintains accessibility features with proper IDs and test IDs
+ * - Self-contained animation management
+ *
+ * Animation Behavior:
+ * - Scale: 1.5 → 1 (label shrinks when floating)
+ * - TranslateY: Variable based on variant → 0 (moves up)
+ * - Uses bezier easing for smooth transitions
+ *
+ * @param props - The component props (see FloatingLabelProps for details)
+ */
+const FloatingLabel: React.FC<FloatingLabelProps> = ({
+  label,
+  variant,
+  state,
+  isFocused,
+  required,
+  accessibilityLabelledBy,
+  isEmptyValue,
+}) => {
+  const theme = useTheme();
+  const shouldFloat = isFocused || !isEmptyValue;
+  const focusAnimation = useRef(
+    new Animated.Value(shouldFloat ? 1 : 0)
+  ).current;
+
+  useEffect(() => {
+    Animated.timing(focusAnimation, {
+      toValue: shouldFloat ? 1 : 0,
+      duration: LABEL_ANIMATION_DURATION,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: true,
+    }).start();
+  }, [shouldFloat, focusAnimation]);
+
+  return (
+    <StyledFloatingLabelContainer
+      themeVariant={variant}
+      style={[
+        {
+          transformOrigin: 'left center',
+        },
+        {
+          transform: [
+            {
+              translateY: focusAnimation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [
+                  variant !== 'textarea' ? 12 : theme.space.small,
+                  0,
+                ],
+              }),
+            },
+            {
+              scale: focusAnimation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [1.333, 1],
+              }),
+            },
+          ],
+        },
+      ]}
+    >
+      <Animated.View>
+        <StyledLabel
+          nativeID={accessibilityLabelledBy}
+          testID="input-label"
+          themeState={state}
+          numberOfLines={1}
+          style={{
+            backgroundColor: 'transparent',
+          }}
+        >
+          {label}
+          {!required && ' (Optional)'}
+        </StyledLabel>
+      </Animated.View>
+    </StyledFloatingLabelContainer>
+  );
+};
+
+FloatingLabel.displayName = 'FloatingLabel';
+
+export default React.memo(FloatingLabel);

package/src/components/TextInput/InputComponent.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+import type { TextInputProps as NativeTextInputProps } from 'react-native';
+import { StyledTextInput } from './StyledTextInput';
+import { useTheme } from '../../theme';
+import type { TextInputVariant } from './types';
+
+export interface InputComponentProps {
+  /** Input type ('text' or 'textarea') */
+  variant: TextInputVariant;
+  /** All props passed to the underlying TextInput */
+  nativeInputProps: NativeTextInputProps;
+  /** Optional custom input renderer function */
+  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+}
+
+/**
+ * InputComponent
+ *
+ * Renders the actual text input element. Supports custom input rendering or uses the default StyledTextInput.
+ *
+ * Key Features:
+ * - Flexible rendering: supports custom input renderers via renderInputValue prop
+ * - Variant support: handles both 'text' and 'textarea' input types
+ * - Multiline handling: automatically enables multiline for textarea variant
+ * - Theme integration: applies theme colors for placeholder text
+ * - Ref forwarding: properly forwards refs to the underlying TextInput
+ *
+ * Rendering Logic:
+ * 1. If renderInputValue provided: Use custom renderer
+ * 2. Otherwise: Use default StyledTextInput with theme and variant support
+ *
+ * Multiline Behavior:
+ * - 'textarea' variant: Always multiline
+ * - 'text' variant: Single line unless explicitly set via nativeInputProps
+ *
+ * @param props - The component props (see InputComponentProps interface for details)
+ */
+const InputComponent = React.forwardRef<RNTextInput, InputComponentProps>(
+  ({ variant, nativeInputProps, renderInputValue }, ref) => {
+    const theme = useTheme();
+
+    return renderInputValue ? (
+      // Custom input renderer provided
+      <>{renderInputValue(nativeInputProps)}</>
+    ) : (
+      // Default styled input with theme and variant support
+      <StyledTextInput
+        {...nativeInputProps}
+        themeVariant={variant}
+        multiline={variant === 'textarea' || nativeInputProps.multiline}
+        ref={ref}
+        placeholderTextColor={theme.__hd__.textInput.colors.placeholder}
+      />
+    );
+  }
+);
+
+InputComponent.displayName = 'InputComponent';
+
+export default React.memo(InputComponent);

package/src/components/TextInput/InputRow.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, TextInput as RNTextInput } from 'react-native';
+import type { TextInputProps as NativeTextInputProps } 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' */
+  variant: TextInputVariant;
+  /** Native TextInput props passed to the input component */
+  nativeInputProps: NativeTextInputProps;
+  /** Optional custom render function for input value */
+  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  /** Whether the input value is empty */
+  isEmptyValue: boolean;
+}
+
+/**
+ * InputRow Component
+ *
+ * Layout Structure:
+ * ┌─────────────────────────────────────────────────────────┐
+ * │                    StyledInputRow                       │
+ * │  ┌──────────┐  ┌─────────────────────────────────────┐  │
+ * │  │  Prefix  │  │           Input Field               │  │
+ * │  │ (Icon or │  │      (TextInput or Custom)          │  │
+ * │  │ Custom)  │  │          flex: 1                    │  │
+ * │  └──────────┘  └─────────────────────────────────────┘  │
+ * └─────────────────────────────────────────────────────────┘
+ *
+ * Rendering Behavior:
+ * - Components are always rendered but hidden with opacity in idle state
+ * - Uses accessibility props to hide components from screen readers when not visible
+ *
+ * Renders the main input row containing:
+ * 1. Conditionally visible prefix component (icon or custom element)
+ * 2. Conditionally visible input component (TextInput or custom rendered input)
+ */
+const InputRow = React.forwardRef<RNTextInput, InputRowProps>(
+  (
+    {
+      state,
+      isFocused,
+      prefix,
+      variant,
+      nativeInputProps,
+      renderInputValue,
+      isEmptyValue,
+    },
+    ref
+  ) => {
+    const shouldShow = isFocused || !isEmptyValue;
+    const opacity = useRef(new Animated.Value(shouldShow ? 1 : 0)).current;
+
+    useEffect(() => {
+      Animated.timing(opacity, {
+        toValue: shouldShow ? 1 : 0,
+        duration: LABEL_ANIMATION_DURATION,
+        useNativeDriver: true,
+      }).start();
+    }, [shouldShow, opacity]);
+
+    return (
+      <StyledInputRow>
+        {/* Prefix animation */}
+        <Animated.View style={{ opacity }}>
+          <PrefixComponent
+            state={state}
+            prefix={prefix}
+            accessibilityElementsHidden={!shouldShow}
+          />
+        </Animated.View>
+        {/* Input animation */}
+        <Animated.View
+          style={{ flex: 1, opacity }}
+          testID="input-row-input-wrapper"
+          accessibilityLabel="Text input field"
+          accessibilityElementsHidden={!shouldShow}
+        >
+          <InputComponent
+            variant={variant}
+            nativeInputProps={nativeInputProps}
+            renderInputValue={renderInputValue}
+            ref={ref}
+          />
+        </Animated.View>
+      </StyledInputRow>
+    );
+  }
+);
+
+export default InputRow;