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

package/src/components/TextInput/MaxLengthMessage.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { StyledCharacterCount } from './StyledTextInput';
+import type { State } from './StyledTextInput';
+
+export interface MaxLengthMessageProps {
+  /** Maximum allowed characters (undefined = no limit) */
+  maxLength?: number;
+  /** Current input state for styling */
+  state: State;
+  /** Current number of characters entered */
+  currentLength: number;
+  /** Whether to hide the counter display */
+  hideCharacterCount: boolean;
+}
+
+/**
+ * MaxLengthMessage Component
+ *
+ * Displays character count information for TextInput fields with maximum length restrictions.
+ * Shows current/max character count with state-aware styling.
+ *
+ * Key Features:
+ * - Character count display: Shows "currentLength/maxLength" format
+ * - Conditional rendering: Only shows when maxLength is set and not hidden
+ * - State-aware styling: Colors change based on input state (error, disabled, etc.)
+ * - Real-time updates: Updates as user types to show current progress
+ * - Hide capability: Can be hidden via hideCharacterCount prop
+ *
+ * Display Logic:
+ * - Shows only when: maxLength is defined AND hideCharacterCount is false
+ * - Format: "currentLength/maxLength" (e.g., "25/100")
+ * - Hidden when: maxLength is undefined OR hideCharacterCount is true
+ *
+ * State-based Styling:
+ * - Uses themeState to apply appropriate colors from theme
+ * - Error state: Shows error color to indicate validation issues
+ * - Disabled state: Shows muted color for disabled inputs
+ * - Normal states: Shows standard text colors
+ *
+ * Usage Example:
+ * - Input with 25 characters and 100 max: displays "25/100"
+ * - Input approaching limit: color may change based on theme
+ * - Input over limit: error state styling applied
+ *
+ * @param props - The component props (see MaxLengthMessageProps interface for details)
+ */
+const MaxLengthMessage: React.FC<MaxLengthMessageProps> = ({
+  maxLength,
+  state,
+  currentLength,
+  hideCharacterCount,
+}) => {
+  if (!maxLength || hideCharacterCount) {
+    return null;
+  }
+
+  return (
+    <StyledCharacterCount themeState={state}>
+      {currentLength}/{maxLength}
+    </StyledCharacterCount>
+  );
+};
+
+MaxLengthMessage.displayName = 'MaxLengthMessage';
+
+export default React.memo(MaxLengthMessage);

package/src/components/TextInput/PrefixComponent.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Icon, IconName } from '@hero-design/rn';
+import { View, ViewProps } from 'react-native';
+import type { State } from './StyledTextInput';
+
+export interface PrefixComponentProps extends ViewProps {
+  /** Current input state for styling decisions */
+  state: State;
+  /** Icon name string or custom React element to display */
+  prefix?: IconName | React.ReactElement;
+}
+
+/**
+ * PrefixComponent
+ *
+ * Renders prefix content (icons or custom elements) on the left side of the TextInput,
+ * before the user's input cursor.
+ *
+ * Key Features:
+ * - Icon rendering: supports string icon names from the design system
+ * - Custom element support: can render any React element as prefix
+ * - State-aware styling: adjusts icon intent based on input state
+ * - Consistent sizing: uses 'xsmall' size for visual balance
+ * - Proper test IDs for automated testing
+ *
+ * Rendering Logic:
+ * 1. String icon name: Renders Icon component with state-based intent
+ * 2. Custom element: Renders the provided React element as-is
+ * 3. No prefix: Renders null
+ *
+ * Icon Intent Logic:
+ * - Disabled state: Uses 'disabled-text' intent for muted appearance
+ * - All other states: Uses 'text' intent for normal appearance
+ *
+ * Visual Positioning:
+ * - Positioned before the text input cursor
+ * - Uses smaller 'xsmall' size to avoid overwhelming the input
+ * - Maintains proper spacing via parent container
+ *
+ * @param props - The component props (see PrefixComponentProps interface for details)
+ */
+const PrefixComponent: React.FC<PrefixComponentProps> = ({
+  state,
+  prefix,
+  ...rest
+}) => {
+  const actualPrefix = typeof prefix === 'string' ? prefix : '';
+
+  if (typeof prefix === 'string' && actualPrefix) {
+    return (
+      <View testID="input-prefix" {...rest}>
+        <Icon
+          intent={state === 'disabled' ? 'disabled-text' : 'text'}
+          icon={actualPrefix}
+          size="xsmall"
+          testID="input-prefix-icon"
+          accessibilityLabel={`Prefix icon: ${actualPrefix}`}
+          accessibilityRole="image"
+        />
+      </View>
+    );
+  }
+
+  if (React.isValidElement(prefix)) {
+    return (
+      <View testID="input-prefix" {...rest}>
+        {prefix}
+      </View>
+    );
+  }
+
+  return null;
+};
+
+PrefixComponent.displayName = 'PrefixComponent';
+
+export default React.memo(PrefixComponent);

package/src/components/TextInput/StyledTextInput.tsx

@@ -0,0 +1,134 @@
+import { TextInput, View, StyleSheet, Animated, Pressable } from 'react-native';
+import { Typography, styled } from '@hero-design/rn';
+
+export type State = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
+
+type Variant = 'text' | 'textarea';
+
+const StyledContainer = styled(Pressable)(({ theme }) => ({
+  width: '100%',
+  flexDirection: 'row',
+  paddingHorizontal: theme.__hd__.textInput.space.containerPadding,
+  minHeight: theme.__hd__.textInput.sizes.containerMinHeight,
+  marginTop: theme.__hd__.textInput.space.containerMarginTop,
+}));
+
+const StyledFloatingLabelContainer = styled(Animated.View)<{
+  themeVariant: Variant;
+}>(({ themeVariant }) => ({
+  flexDirection: 'row',
+  flex: 1,
+  alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
+  backgroundColor: 'transparent',
+}));
+
+const StyledLabel = styled(Typography.Caption)<{
+  themeState: State;
+}>(({ theme, themeState }) => ({
+  color: theme.__hd__.textInput.colors.labels[themeState],
+}));
+
+const StyledErrorRow = styled(View)(({ theme }) => ({
+  marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
+  flexDirection: 'row',
+  alignItems: 'center',
+  flex: 1,
+  flexGrow: 4,
+}));
+
+const StyledError = styled(Typography.Caption)(({ theme }) => ({
+  color: theme.__hd__.textInput.colors.error,
+  marginLeft: theme.__hd__.textInput.space.errorMarginLeft,
+}));
+
+const StyledCharacterCount = styled(Typography.Caption)<{
+  themeState: State;
+}>(({ theme, themeState }) => ({
+  color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
+  flex: 1,
+  flexGrow: 1,
+  textAlign: 'right',
+}));
+
+const StyledHelperText = Typography.Caption;
+const StyledTextInput = styled(TextInput)<{ themeVariant: Variant }>(
+  ({ theme, themeVariant }) => ({
+    textAlignVertical: themeVariant === 'text' ? 'center' : 'top',
+    fontSize: theme.__hd__.textInput.fontSizes.text,
+    flexGrow: 2,
+    paddingVertical: 0,
+    maxHeight: theme.__hd__.textInput.sizes.textInputMaxHeight,
+    minHeight: theme.__hd__.textInput.sizes.textInputMinHeight,
+    height:
+      themeVariant === 'text'
+        ? undefined
+        : theme.__hd__.textInput.sizes.textareaHeight,
+    fontFamily: theme.__hd__.textInput.fonts.text,
+  })
+);
+
+const StyledBorder = styled(View)<{
+  themeState: State;
+  themeFocused: boolean;
+}>(({ theme, themeFocused, themeState }) => ({
+  ...StyleSheet.absoluteFillObject,
+  borderWidth: theme.__hd__.textInput.borderWidths.container.normal,
+  borderRadius: theme.__hd__.textInput.radii.container,
+  borderColor: themeFocused
+    ? theme.__hd__.textInput.colors.borders.focused
+    : theme.__hd__.textInput.colors.borders[themeState],
+}));
+
+const StyledInputWrapper = styled(View)(({ theme }) => ({
+  flexDirection: 'column',
+  flex: 1,
+  backgroundColor: 'transparent',
+  borderRadius: theme.__hd__.textInput.radii.container,
+  marginBottom: theme.__hd__.textInput.space.inputWrapperMarginVertical,
+  marginTop: theme.__hd__.textInput.space.inputWrapperMarginVertical,
+  overflow: 'hidden',
+}));
+
+const StyledInputRow = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  flexGrow: 2,
+  flexShrink: 1,
+  gap: theme.__hd__.textInput.space.prefixAndInputContainerGap,
+}));
+
+const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
+  paddingHorizontal:
+    theme.__hd__.textInput.space.errorAndHelpTextContainerHorizontalPadding,
+  minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,
+  paddingTop: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop,
+}));
+
+const StyledBottomContainer = styled(View)(() => ({
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+}));
+
+const StyledSuffixContainer = styled(View)(() => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+}));
+
+export {
+  StyledInputWrapper,
+  StyledTextInput,
+  StyledError,
+  StyledCharacterCount,
+  StyledContainer,
+  StyledErrorRow,
+  StyledHelperText,
+  StyledInputRow,
+  StyledFloatingLabelContainer,
+  StyledErrorAndHelpTextContainer,
+  StyledBorder,
+  StyledBottomContainer,
+  StyledSuffixContainer,
+  StyledLabel,
+};

package/src/components/TextInput/SuffixComponent.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Icon, IconName } from '@hero-design/rn';
+import type { State } from './StyledTextInput';
+
+export interface SuffixComponentProps {
+  /** Current input state for styling decisions */
+  state: State;
+  /** Whether to show loading spinner instead of suffix */
+  loading: boolean;
+  /** Icon name string or custom React element to display */
+  suffix?: IconName | React.ReactElement;
+}
+
+/**
+ * SuffixComponent
+ *
+ * Renders suffix content (icons or custom elements) on the right side of the TextInput.
+ * Handles loading states and custom elements.
+ *
+ * Key Features:
+ * - Loading state handling: shows spinner when loading is true
+ * - Icon rendering: supports string icon names from the design system
+ * - Custom element support: can render any React element as suffix
+ * - State-aware styling: adjusts icon intent based on input state
+ * - Spinning animation: loading icons automatically spin
+ * - Proper test IDs for automated testing
+ *
+ * Rendering Priority:
+ * 1. Loading state: Shows 'loading' icon with spin animation
+ * 2. String icon name: Renders Icon component with state-based intent
+ * 3. Custom element: Renders the provided React element as-is
+ * 4. No suffix: Renders null
+ *
+ * Icon Intent Logic:
+ * - Disabled state: Uses 'disabled-text' intent
+ * - All other states: Uses 'text' intent
+ *
+ * @param props - The component props (see SuffixComponentProps interface for details)
+ */
+const SuffixComponent: React.FC<SuffixComponentProps> = ({
+  state,
+  loading,
+  suffix,
+}) => {
+  // Loading state overrides suffix
+  const actualSuffix = loading ? 'loading' : suffix;
+
+  if (typeof actualSuffix === 'string') {
+    // Render icon from design system
+    return (
+      <Icon
+        intent={state === 'disabled' ? 'disabled-text' : 'text'}
+        testID="input-suffix"
+        accessibilityLabel={`Suffix icon: ${actualSuffix}`}
+        accessibilityRole="image"
+        icon={actualSuffix}
+        spin={actualSuffix === 'loading'} // Animate loading icon
+        size="medium"
+      />
+    );
+  }
+
+  if (actualSuffix) {
+    // Render custom element
+    return suffix as React.ReactElement;
+  }
+
+  return null;
+};
+
+SuffixComponent.displayName = 'SuffixComponent';
+
+export default React.memo(SuffixComponent);

package/src/components/TextInput/__tests__/ErrorOrHelpText.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import ErrorOrHelpText from '../ErrorOrHelpText';
+
+describe('ErrorOrHelpText', () => {
+  it('renders correctly with error', () => {
+    const { queryAllByText } = renderWithTheme(
+      <ErrorOrHelpText error="This is error" helpText="This is help text" />
+    );
+    expect(queryAllByText('This is error')).toHaveLength(1);
+    expect(queryAllByText('This is help text')).toHaveLength(0);
+  });
+
+  it('renders correctly with help text', () => {
+    const { queryAllByText } = renderWithTheme(
+      <ErrorOrHelpText error="" helpText="This is help text" />
+    );
+    expect(queryAllByText('This is help text')).toHaveLength(1);
+  });
+});

package/src/components/TextInput/__tests__/FloatingLabel.spec.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import FloatingLabel from '../FloatingLabel';
+
+describe('FloatingLabel', () => {
+  describe('label text display based on required prop', () => {
+    it.each`
+      required | expectedText          | shouldShowOptional | description
+      ${true}  | ${'Email'}            | ${false}           | ${'required field without optional indicator'}
+      ${false} | ${'Phone (Optional)'} | ${true}            | ${'optional field with optional indicator'}
+    `(
+      'should display $expectedText for $description',
+      ({ required, expectedText, shouldShowOptional }) => {
+        const label = required ? 'Email' : 'Phone';
+        const { getByText, queryByText } = renderWithTheme(
+          <FloatingLabel
+            label={label}
+            variant="text"
+            state="default"
+            isFocused={false}
+            required={required}
+            isEmptyValue
+          />
+        );
+
+        // User should see the appropriate label text
+        expect(getByText(expectedText)).toBeTruthy();
+
+        if (!shouldShowOptional) {
+          expect(queryByText(`${label} (Optional)`)).toBeFalsy();
+          expect(queryByText('(Optional)')).toBeFalsy();
+        }
+      }
+    );
+  });
+
+  describe('label behavior based on focus and content state', () => {
+    it.each`
+      state        | isEmptyValue | expectedBehavior                        | description
+      ${'focused'} | ${true}      | ${'label in focused state'}             | ${'user focuses empty input'}
+      ${'filled'}  | ${false}     | ${'label remains in floating position'} | ${'user enters text in input'}
+    `(
+      'should show $expectedBehavior when $description',
+      ({ state, isEmptyValue }) => {
+        const { getByTestId } = renderWithTheme(
+          <FloatingLabel
+            label={state === 'focused' ? 'Password' : 'Message'}
+            variant="text"
+            state={state}
+            isFocused={state === 'focused'}
+            required
+            isEmptyValue={isEmptyValue}
+          />
+        );
+
+        // User should see the label behaving appropriately
+        const label = getByTestId('input-label');
+        expect(label).toBeTruthy();
+        const { children } = label.props;
+        const expectedText = state === 'focused' ? 'Password' : 'Message';
+        expect(
+          Array.isArray(children) ? children.filter(Boolean).join('') : children
+        ).toBe(expectedText);
+      }
+    );
+  });
+
+  describe('variant-specific positioning', () => {
+    it.each`
+      variant       | required | expectedText                | description
+      ${'textarea'} | ${false} | ${'Description (Optional)'} | ${'multiline input with optional label'}
+    `(
+      'should position label appropriately for $variant ($description)',
+      ({ variant, required, expectedText }) => {
+        const { getByTestId } = renderWithTheme(
+          <FloatingLabel
+            label="Description"
+            variant={variant}
+            state="default"
+            isFocused={false}
+            required={required}
+            isEmptyValue
+          />
+        );
+
+        // User should see the label with proper variant positioning
+        const label = getByTestId('input-label');
+        expect(label).toBeTruthy();
+        const { children } = label.props;
+        expect(Array.isArray(children) ? children.join('') : children).toBe(
+          expectedText
+        );
+      }
+    );
+  });
+
+  describe('when user encounters different input states', () => {
+    it.each`
+      state         | required | expectedText                   | description
+      ${'error'}    | ${true}  | ${'Email'}                     | ${'validation error with required field'}
+      ${'disabled'} | ${false} | ${'Disabled Field (Optional)'} | ${'non-interactive optional field'}
+    `(
+      'should display appropriate styling for $state state ($description)',
+      ({ state, required, expectedText }) => {
+        const { getByTestId } = renderWithTheme(
+          <FloatingLabel
+            label={state === 'error' ? 'Email' : 'Disabled Field'}
+            variant="text"
+            state={state}
+            isFocused={false}
+            required={required}
+            isEmptyValue
+          />
+        );
+
+        // User should see the label with appropriate state styling
+        const label = getByTestId('input-label');
+        expect(label).toBeTruthy();
+        const { children } = label.props;
+        expect(
+          Array.isArray(children) ? children.filter(Boolean).join('') : children
+        ).toBe(expectedText);
+      }
+    );
+  });
+
+  describe('when used with accessibility features', () => {
+    it('should provide proper accessibility labeling', () => {
+      const accessibilityId = 'email-input-label';
+      const { getByTestId } = renderWithTheme(
+        <FloatingLabel
+          label="Email Address"
+          variant="text"
+          state="default"
+          isFocused={false}
+          required
+          accessibilityLabelledBy={accessibilityId}
+          isEmptyValue
+        />
+      );
+
+      // User should have proper accessibility support
+      const label = getByTestId('input-label');
+      expect(label).toHaveProp('nativeID', accessibilityId);
+    });
+  });
+
+  describe('label color styling based on state', () => {
+    it.each`
+      state         | isFocused | expectedColor | description
+      ${'default'}  | ${false}  | ${'#808f91'}  | ${'inactive/empty field'}
+      ${'default'}  | ${true}   | ${'#001f23'}  | ${'user is typing'}
+      ${'filled'}   | ${false}  | ${'#001f23'}  | ${'field has content'}
+      ${'filled'}   | ${true}   | ${'#001f23'}  | ${'field has content and focused'}
+      ${'error'}    | ${false}  | ${'#cb300a'}  | ${'validation error'}
+      ${'error'}    | ${true}   | ${'#001f23'}  | ${'validation error but focused'}
+      ${'disabled'} | ${false}  | ${'#bfc1c5'}  | ${'non-interactive field'}
+      ${'readonly'} | ${false}  | ${'#808f91'}  | ${'read-only field'}
+    `(
+      'should apply $expectedColor color for $state state when focused=$isFocused ($description)',
+      ({ state, isFocused, expectedColor: _expectedColor }) => {
+        const { getByTestId } = renderWithTheme(
+          <FloatingLabel
+            label={`${state} Label`}
+            variant="text"
+            state={state}
+            isFocused={isFocused}
+            required
+            isEmptyValue={state !== 'filled'}
+          />
+        );
+
+        const label = getByTestId('input-label');
+        expect(label).toHaveProp('themeState', state);
+      }
+    );
+
+    describe('component behavior', () => {
+      it('should render correctly with all props', () => {
+        const { getByTestId } = renderWithTheme(
+          <FloatingLabel
+            label="Full Name"
+            variant="text"
+            state="filled"
+            isFocused
+            required={false}
+            accessibilityLabelledBy="fullname-label"
+            isEmptyValue={false}
+          />
+        );
+
+        // User should see a fully rendered floating label
+        const label = getByTestId('input-label');
+        expect(label).toBeTruthy();
+        expect(label).toHaveProp('nativeID', 'fullname-label');
+        const { children } = label.props;
+        expect(Array.isArray(children) ? children.join('') : children).toBe(
+          'Full Name (Optional)'
+        );
+      });
+    });
+  });
+});

package/src/components/TextInput/__tests__/InputComponent.spec.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import InputComponent from '../InputComponent';
+
+describe('InputComponent', () => {
+  it('renders correctly with renderInputValue', () => {
+    const ref = React.createRef<RNTextInput>();
+    const wrapper = renderWithTheme(
+      <InputComponent
+        variant="textarea"
+        nativeInputProps={{}}
+        renderInputValue={(props) => (
+          <RNTextInput
+            {...props}
+            value="customised text"
+            testID="custom-text-input"
+          />
+        )}
+        ref={ref}
+      />
+    );
+    expect(wrapper.queryAllByTestId('custom-text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByDisplayValue('customised text')).toHaveLength(1);
+  });
+
+  it('renders correctly without renderInputValue', () => {
+    const ref = React.createRef<RNTextInput>();
+    const wrapper = renderWithTheme(
+      <InputComponent
+        variant="textarea"
+        nativeInputProps={{ testID: 'text-input', value: 'text input value' }}
+        ref={ref}
+      />
+    );
+    expect(wrapper.queryAllByTestId('text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByDisplayValue('text input value')).toHaveLength(1);
+  });
+});