@hero-design/rn-work-uikit 1.9.5 → 1.10.0

package/src/components/Select/__tests__/index.spec.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import Select from '..';
-import renderWithTheme from '../../../../testUtils/renderWithTheme';
-import { noop } from '../../../utils/functions';
-
-const options = [
-  { text: 'Monday', value: 'mon' },
-  { text: 'Tuesday', value: 'tue' },
-  { text: 'Wednesday', value: 'wed' },
-  { text: 'Thursday', value: 'thu' },
-  { text: 'Friday', value: 'fri' },
-  { text: 'Saturday', value: 'sat' },
-  { text: 'Sunday', value: 'sun', disabled: true },
-];
-
-describe('Select', () => {
-  it('renders correctly (snapshot)', () => {
-    const { toJSON } = renderWithTheme(
-      <Select
-        value="mon"
-        onConfirm={noop}
-        options={options}
-        label="Select Label"
-      />
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
-describe('MultiSelect', () => {
-  it('renders correctly (snapshot)', () => {
-    const { toJSON } = renderWithTheme(
-      <Select.Multi
-        value={['tue', 'wed']}
-        onConfirm={noop}
-        options={options}
-        label="Select Label"
-        footerLabel="Confirm"
-      />
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

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

@@ -1,20 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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 | label      | expectedText
-      ${true}  | ${'Email'} | ${'Email'}
-      ${false} | ${'Phone'} | ${'Phone (Optional)'}
-    `(
-      'should display "$expectedText" with "$optionalText" when required is $required',
-      ({ required, expectedText, label }) => {
-        const { getByTestId } = renderWithTheme(
-          <FloatingLabel
-            label={label}
-            variant="text"
-            state="default"
-            isFocused={false}
-            required={required}
-            isEmptyValue
-          />
-        );
-
-        const labelComponent = getByTestId('input-label');
-
-        expect(labelComponent).toHaveTextContent(expectedText);
-      }
-    );
-  });
-
-  describe('label behavior based on focus and content state', () => {
-    it.each`
-      state        | isEmptyValue | required | expectedText  | description
-      ${'focused'} | ${true}      | ${true}  | ${'Password'} | ${'user focuses empty input'}
-      ${'filled'}  | ${false}     | ${true}  | ${'Message'}  | ${'user enters text in input'}
-    `(
-      'should show correct label when $description',
-      ({ state, isEmptyValue, required, expectedText }) => {
-        const { getByTestId, queryByText } = renderWithTheme(
-          <FloatingLabel
-            label={expectedText}
-            variant="text"
-            state={state}
-            isFocused={state === 'focused'}
-            required={required}
-            isEmptyValue={isEmptyValue}
-          />
-        );
-
-        // User should see the label behaving appropriately
-        const label = getByTestId('input-label');
-        expect(label).toHaveTextContent(expectedText);
-
-        const optionalLabel = queryByText(' (Optional)');
-        if (!required) {
-          expect(optionalLabel).not.toBeNull();
-        } else {
-          expect(optionalLabel).toBeNull();
-        }
-      }
-    );
-  });
-
-  describe('variant-specific positioning', () => {
-    it.each`
-      variant       | required | expectedText                | description
-      ${'textarea'} | ${false} | ${'Description (Optional)'} | ${'multiline input with optional label'}
-      ${'textarea'} | ${true}  | ${'Description'}            | ${'multiline input with required 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).toHaveTextContent(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).toHaveTextContent(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-text');
-      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-text');
-        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-text');
-        expect(label).toBeTruthy();
-        expect(label).toHaveProp('nativeID', 'fullname-label');
-        expect(label).toHaveTextContent('Full Name');
-      });
-    });
-  });
-});

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

@@ -1,41 +0,0 @@
-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}
-        state="default"
-      />
-    );
-    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}
-        state="default"
-      />
-    );
-    expect(wrapper.queryAllByTestId('text-input')).toHaveLength(1);
-    expect(wrapper.queryAllByDisplayValue('text input value')).toHaveLength(1);
-  });
-});

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

@@ -1,233 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import type {
-  TextInputProps as NativeTextInputProps,
-  TextInput as RNTextInput,
-} from 'react-native';
-import { fireEvent, waitFor } from '@testing-library/react-native';
-// import { TextInput as RNTextInput } from 'react-native';
-import renderWithTheme from '../../../../testUtils/renderWithTheme';
-import InputRow from '../InputRow';
-
-describe('InputRow', () => {
-  const defaultProps = {
-    state: 'default' as const,
-    variant: 'text' as const,
-    testID: 'input-row',
-    nativeInputProps: {
-      value: '',
-      placeholder: 'Enter text',
-      testID: 'input-row-text-input',
-    },
-    isEmptyValue: true,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('visibility behavior', () => {
-    it('should be hidden when unfocused and empty by default', () => {
-      const { getByTestId } = renderWithTheme(<InputRow {...defaultProps} />);
-      expect(getByTestId('input-row')).toHaveProp('themeOpacity', 0);
-    });
-
-    it('should be visible when unfocused and empty if shouldShowWhenUnfocused is true', () => {
-      const { getByTestId } = renderWithTheme(
-        <InputRow {...defaultProps} shouldShowWhenUnfocused />
-      );
-      expect(getByTestId('input-row')).toHaveProp('themeOpacity', 1);
-    });
-
-    it('should become visible on focus', async () => {
-      const { getByTestId } = renderWithTheme(<InputRow {...defaultProps} />);
-
-      expect(getByTestId('input-row')).toHaveProp('themeOpacity', 0);
-      fireEvent(getByTestId('input-row-text-input'), 'focus');
-
-      await waitFor(() => {
-        expect(getByTestId('input-row')).toHaveProp('themeOpacity', 1);
-      });
-    });
-
-    it('should be visible when it has a value, even if unfocused', () => {
-      const { getByTestId } = renderWithTheme(
-        <InputRow
-          {...defaultProps}
-          isEmptyValue={false}
-          nativeInputProps={{
-            ...defaultProps.nativeInputProps,
-            value: 'user@example.com',
-          }}
-        />
-      );
-      expect(getByTestId('input-row')).toHaveProp('themeOpacity', 1);
-    });
-  });
-
-  describe('when user uses input with custom prefix', () => {
-    it('should render custom prefix element', () => {
-      const CustomPrefix = () => <Text testID="custom-prefix">Custom</Text>;
-      const ref = React.createRef<RNTextInput>();
-
-      const { getByTestId } = renderWithTheme(
-        <InputRow
-          {...defaultProps}
-          prefix={<CustomPrefix />}
-          isEmptyValue={false}
-          ref={ref}
-          shouldShowWhenUnfocused
-        />
-      );
-      // User should see the custom prefix
-      expect(getByTestId('custom-prefix')).toBeTruthy();
-    });
-  });
-
-  describe('when user uses textarea variant', () => {
-    it('should render input component with textarea variant', () => {
-      const ref = React.createRef<RNTextInput>();
-      const { getByTestId } = renderWithTheme(
-        <InputRow
-          {...defaultProps}
-          variant="textarea"
-          isEmptyValue={false}
-          nativeInputProps={{
-            ...defaultProps.nativeInputProps,
-            multiline: true,
-            numberOfLines: 4,
-          }}
-          ref={ref}
-          shouldShowWhenUnfocused
-        />
-      );
-      // User should see the textarea input
-      const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toBeTruthy();
-      expect(inputWrapper).toHaveProp('accessibilityLabel', 'Text input field');
-    });
-  });
-
-  describe('when user encounters different input states', () => {
-    it('should render input wrapper in error state', () => {
-      const { getByTestId } = renderWithTheme(
-        <InputRow
-          {...defaultProps}
-          state="error"
-          isEmptyValue={false}
-          shouldShowWhenUnfocused
-        />
-      );
-      // Components should render with error state
-      const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toBeTruthy();
-    });
-
-    it('should handle disabled state appropriately', () => {
-      const { getByTestId } = renderWithTheme(
-        <InputRow
-          {...defaultProps}
-          state="disabled"
-          isEmptyValue
-          shouldShowWhenUnfocused
-        />
-      );
-      // Even disabled inputs should render components
-      const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toBeTruthy();
-    });
-  });
-
-  describe('when user uses custom input renderer', () => {
-    it('should use custom render function for input value', () => {
-      const customRenderer = (inputProps: NativeTextInputProps) => (
-        <Text testID="custom-input-renderer">Custom: {inputProps.value}</Text>
-      );
-      const ref = React.createRef<RNTextInput>();
-
-      const { getByTestId } = renderWithTheme(
-        <InputRow
-          {...defaultProps}
-          renderInputValue={customRenderer}
-          isEmptyValue={false}
-          nativeInputProps={{
-            ...defaultProps.nativeInputProps,
-            value: 'test value',
-          }}
-          ref={ref}
-          shouldShowWhenUnfocused
-        />
-      );
-      // User should see the custom rendered input
-      expect(getByTestId('custom-input-renderer')).toBeTruthy();
-    });
-  });
-
-  describe('input reference handling', () => {
-    it('should properly handle input ref', () => {
-      const ref = React.createRef<RNTextInput>();
-      renderWithTheme(
-        <InputRow
-          {...defaultProps}
-          isEmptyValue={false}
-          ref={ref}
-          shouldShowWhenUnfocused
-        />
-      );
-      expect(ref.current).toBeDefined();
-    });
-  });
-
-  describe('accessibility features', () => {
-    it('should provide proper accessibility labels for input wrapper', () => {
-      const ref = React.createRef<RNTextInput>();
-      const { getByTestId } = renderWithTheme(
-        <InputRow
-          {...defaultProps}
-          isEmptyValue={false}
-          ref={ref}
-          shouldShowWhenUnfocused
-        />
-      );
-      // User should have proper accessibility support
-      const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toHaveProp('accessibilityLabel', 'Text input field');
-    });
-  });
-
-  describe('component behavior', () => {
-    it('should render correctly with all props', () => {
-      const ref = React.createRef<RNTextInput>();
-      const { getByTestId } = renderWithTheme(
-        <InputRow
-          {...defaultProps}
-          prefix="search"
-          isEmptyValue={false}
-          nativeInputProps={{
-            ...defaultProps.nativeInputProps,
-            value: 'test@example.com',
-            placeholder: 'Enter email',
-          }}
-          ref={ref}
-          shouldShowWhenUnfocused
-        />
-      );
-      const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toBeTruthy();
-    });
-
-    it('should render without prefix', () => {
-      const ref = React.createRef<RNTextInput>();
-      const { getByTestId } = renderWithTheme(
-        <InputRow
-          {...defaultProps}
-          isEmptyValue={false}
-          ref={ref}
-          shouldShowWhenUnfocused
-        />
-      );
-      const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toBeTruthy();
-    });
-  });
-});

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import renderWithTheme from '../../../../testUtils/renderWithTheme';
-import MaxLengthMessage from '../MaxLengthMessage';
-
-describe('MaxLengthMessage', () => {
-  it('renders correctly with maxLength', () => {
-    const { queryAllByText } = renderWithTheme(
-      <MaxLengthMessage
-        maxLength={10}
-        state="default"
-        currentLength={5}
-        hideCharacterCount={false}
-      />
-    );
-    expect(queryAllByText('5/10')).toHaveLength(1);
-  });
-});

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import renderWithTheme from '../../../../testUtils/renderWithTheme';
-import PrefixComponent from '../PrefixComponent';
-
-describe('PrefixComponent', () => {
-  it('renders prefix icon', () => {
-    const wrapper = renderWithTheme(
-      <PrefixComponent prefix="dollar-sign" state="default" />
-    );
-    expect(wrapper.getByLabelText('Prefix icon: dollar-sign')).toBeDefined();
-    // Optionally, keep testID fallback
-    expect(wrapper.getByTestId('input-prefix')).toBeDefined();
-  });
-});

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

@@ -1,114 +0,0 @@
-import React from 'react';
-import renderWithTheme from '../../../../testUtils/renderWithTheme';
-import {
-  StyledHelperText,
-  StyledTextInput,
-  StyledCharacterCount,
-  StyledError,
-  StyledErrorRow,
-  StyledLabel,
-  StyledBorder,
-} from '../StyledTextInput';
-
-describe('StyledLabel', () => {
-  it.each`
-    themeState
-    ${'default'}
-    ${'filled'}
-    ${'error'}
-    ${'disabled'}
-    ${'readonly'}
-  `('renders correctly with themeState $themeState', ({ themeState }): void => {
-    const { toJSON } = renderWithTheme(
-      <StyledLabel themeState={themeState}>Label</StyledLabel>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
-describe('StyledErrorRow', () => {
-  it('renders correctly', (): void => {
-    const { toJSON } = renderWithTheme(<StyledErrorRow />);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
-describe('StyledError', () => {
-  it('renders correctly', (): void => {
-    const { toJSON } = renderWithTheme(
-      <StyledError>must not exceed character limit</StyledError>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
-describe('StyledCharacterCount', () => {
-  it.each`
-    themeState
-    ${'default'}
-    ${'filled'}
-    ${'error'}
-    ${'disabled'}
-    ${'readonly'}
-  `('renders correctly with themeState $themeState', ({ themeState }): void => {
-    const { toJSON } = renderWithTheme(
-      <StyledCharacterCount themeState={themeState}>
-        100/255
-      </StyledCharacterCount>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
-describe('StyledHelperText', () => {
-  it('renders correctly', (): void => {
-    const { toJSON } = renderWithTheme(
-      <StyledHelperText>helper text</StyledHelperText>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
-describe('StyledBorder', () => {
-  it.each`
-    themeState
-    ${'default'}
-    ${'filled'}
-    ${'error'}
-    ${'disabled'}
-    ${'readonly'}
-  `('renders correctly with themeState $themeState', ({ themeState }): void => {
-    const { toJSON } = renderWithTheme(
-      <StyledBorder themeState={themeState} themeFocused={false} />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders correctly when focused', (): void => {
-    const { toJSON } = renderWithTheme(
-      <StyledBorder themeState="error" themeFocused />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
-describe('StyledTextInput', () => {
-  it.each`
-    themeVariant
-    ${'text'}
-    ${'textarea'}
-  `('renders correctly with $themeState state', ({ themeVariant }) => {
-    const { toJSON } = renderWithTheme(
-      <StyledTextInput themeVariant={themeVariant} />
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});