@react-native-ama/forms 1.2.0 → 2.0.0-beta.0

package/src/hooks/useFormField.ts

@@ -1,9 +1,27 @@
-import { useChecks } from '@react-native-ama/core';
-import { applyStyle } from '@react-native-ama/internal';
 import React from 'react';
 import { Keyboard, ViewStyle } from 'react-native';
-
 import { useForm } from '../components/Form';
+import { checkFocusTrap } from '../utils/checkFocusTrap';
+
+let _useAMAContext:
+  | (() => {
+      trackError?: (rule: string, ref?: React.RefObject<any>) => void;
+    } | null)
+  | null = null;
+try {
+
+  _useAMAContext = require('@react-native-ama/core').useAMAContext;
+} catch {
+  // core is an optional peer — fall back to null
+}
+
+const getTrackError = () => {
+  try {
+    return _useAMAContext?.()?.trackError ?? null;
+  } catch {
+    return null;
+  }
+};
 
 export type UseFormField = {
   ref?: React.RefObject<any> | React.ForwardedRef<any> | null;
@@ -32,16 +50,14 @@ export const useFormField = ({
   errorMessage,
   editable = true,
   suppressError,
-  style = {},
 }: UseFormField) => {
   const { refs, submitForm, focusField } = useForm({ suppressError });
   const fieldRef = React.useRef(ref);
-
-  const checks = __DEV__ ? useChecks?.() : undefined;
+  const trackError = __DEV__ ? getTrackError() : null;
 
   const getMyIndex = () => {
     const allRefs = refs!;
-    const item = allRefs.find(r => r.ref === fieldRef);
+    const item = allRefs.find((r) => r.ref === fieldRef);
 
     return item ? allRefs.indexOf(item) : -1;
   };
@@ -57,16 +73,15 @@ export const useFormField = ({
       return;
     }
 
-    const currentField = refs![getMyIndex()];
-
-    focusField?.(getNextFieldRef());
-
     __DEV__ &&
-      currentField?.hasFocusCallback &&
-      checks?.checkFocusTrap({
-        ref: currentField?.ref?.current,
+      hasFocusCallback &&
+      checkFocusTrap?.({
+        ref: fieldRef.current as React.RefObject<any>,
         shouldHaveFocus: false,
+        trackError: trackError ?? null,
       });
+
+    focusField?.(getNextFieldRef());
   };
 
   const getNextFieldRef = () => {
@@ -77,7 +92,7 @@ export const useFormField = ({
         ref: nextFormFieldRef,
       };
     } else if (nextFieldId) {
-      return allRefs.find(item => item.id === nextFieldId);
+      return allRefs.find((item) => item.id === nextFieldId);
     }
 
     return allRefs[getMyIndex() + 1];
@@ -108,7 +123,7 @@ export const useFormField = ({
   }, []);
 
   React.useEffect(() => {
-    const myRefIndex = refs?.findIndex(item => item.ref === fieldRef);
+    const myRefIndex = refs?.findIndex((item) => item.ref === fieldRef);
 
     // @ts-ignore
     refs[myRefIndex].hasError = hasError;
@@ -120,16 +135,9 @@ export const useFormField = ({
     .filter(Boolean)
     .join(',');
 
-  return __DEV__
-    ? {
-        focusNextFormField,
-        isLastField,
-        style: applyStyle?.({ style, debugStyle: checks?.debugStyle }),
-        accessibilityHint: fullAccessibilityHint,
-      }
-    : {
-        focusNextFormField,
-        accessibilityHint: fullAccessibilityHint,
-        isLastField,
-      };
+  return {
+    focusNextFormField,
+    accessibilityHint: fullAccessibilityHint,
+    isLastField,
+  };
 };

package/src/hooks/useFormSubmit.test.tsx

@@ -0,0 +1,18 @@
+import { renderHook } from '@testing-library/react-native';
+import * as Form from '../components/Form';
+import { useFormSubmit } from './useFormSubmit';
+
+describe('useFormSubmit', () => {
+  it('returns a submitForm callback from form context', async () => {
+    const submitForm = jest.fn().mockResolvedValue(undefined);
+    jest.spyOn(Form, 'useForm').mockImplementation(
+      () => ({ submitForm }) as any,
+    );
+
+    const { result } = renderHook(() => useFormSubmit());
+
+    await result.current.submitForm();
+
+    expect(submitForm).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/useFormSubmit.ts

@@ -0,0 +1,17 @@
+import { useForm } from '../components/Form';
+
+export type UseFormSubmit = {
+  submitForm: () => Promise<void>;
+};
+
+export const useFormSubmit = (): UseFormSubmit => {
+  const { submitForm } = useForm();
+
+  const handleSubmit = () => {
+    return submitForm();
+  };
+
+  return {
+    submitForm: handleSubmit,
+  };
+};

package/src/hooks/useTextInput.ts

@@ -1,5 +1,3 @@
-import { useChecks } from '@react-native-ama/core';
-import { applyStyle } from '@react-native-ama/internal';
 import * as React from 'react';
 import type {
   LayoutChangeEvent,
@@ -10,7 +8,6 @@ import type {
   TextStyle,
   ViewStyle,
 } from 'react-native';
-
 import { TextInputProps } from '../components/TextInput';
 import { UseFormField, useFormField } from './useFormField';
 
@@ -18,9 +15,9 @@ export type UseTextInput = Omit<UseFormField, 'hasFocusCallback'> & {
   onLayout?: (event: LayoutChangeEvent) => void;
   returnKeyType?: ReturnKeyTypeOptions;
   onSubmitEditing?: (
-    event: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
+    event: NativeSyntheticEvent<TextInputSubmitEditingEventData>
   ) => void;
-  accessibilityLabel: string;
+  accessibilityLabel?: string;
   editable?: boolean;
   style?: ViewStyle | StyleProp<TextStyle> | null;
   required: boolean;
@@ -40,15 +37,15 @@ export const useTextInput = ({
   ...rest
 }: UseTextInput) => {
   const [theReturnKeyType, setTheReturnKeyType] = React.useState(
-    returnKeyType || 'next',
+    returnKeyType || 'next'
   );
-  const { style: formFieldStyle, ...formField } = useFormField({
+  const formField = useFormField({
     hasFocusCallback: true,
     ...rest,
   });
 
   const handleOnSubmitEditing = (
-    event: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
+    event: NativeSyntheticEvent<TextInputSubmitEditingEventData>
   ) => {
     onSubmitEditing?.(event);
 
@@ -66,37 +63,6 @@ export const useTextInput = ({
     onLayout?.(event);
   };
 
-  const checks = __DEV__ ? useChecks?.() : undefined;
-
-  __DEV__ &&
-    checks?.noUndefinedProperty({
-      properties: { accessibilityLabel },
-      property: 'accessibilityLabel',
-      rule: 'NO_FORM_LABEL',
-    });
-  __DEV__ &&
-    checks?.noUppercaseStringChecker({
-      text: accessibilityLabel,
-    });
-  __DEV__ &&
-    checks?.noUppercaseStringChecker({
-      text: rest.accessibilityHint,
-    });
-  __DEV__ &&
-    accessibilityLabel?.trim().slice(-1) === '*' &&
-    checks?.logResult('NO_FORM_LABEL_ENDING_WITH_ASTERISK', {
-      rule: 'NO_FORM_LABEL_ENDING_WITH_ASTERISK',
-      message:
-        'Form labels should not end with an asterisk. Please remove it and provide a required message instead.',
-    });
-  __DEV__ &&
-    required &&
-    checks?.noUndefinedProperty({
-      properties: { requiredMessage },
-      property: 'requiredMessage',
-      rule: 'NO_FORM_LABEL_ENDING_WITH_ASTERISK',
-    });
-
   const fullAccessibilityLabel = required
     ? `${accessibilityLabel}, ${requiredMessage}`
     : accessibilityLabel;
@@ -109,20 +75,9 @@ export const useTextInput = ({
     blurOnSubmit: theReturnKeyType === 'done',
   };
 
-  return __DEV__
-    ? {
-        ...rest,
-        ...formField,
-        ...advancedProps,
-        style: applyStyle?.({
-          // @ts-ignore
-          style: formFieldStyle,
-          debugStyle: checks?.debugStyle,
-        }) as any,
-      }
-    : {
-        ...rest,
-        ...formField,
-        ...advancedProps,
-      };
+  return {
+    ...rest,
+    ...formField,
+    ...advancedProps,
+  };
 };

package/src/index.ts

@@ -1,45 +1,40 @@
-// Components
-
-import { isFocused } from '@react-native-ama/internal';
-
+import React from 'react';
 import {
-  FormActions,
   Form as FormProvider,
+  type FormActions,
   type FormProps,
 } from './components/Form';
-import { FormField, FormFieldProps } from './components/FormField';
-import { FormSubmit, FormSubmitProps } from './components/FormSubmit';
-import { FormSwitch, FormSwitchProps } from './components/FormSwitch';
+import { FormField, type FormFieldProps } from './components/FormField';
+import {
+  FormSubmit,
+  type FormSubmitProps,
+  type FormSubmitRenderProps,
+} from './components/FormSubmit';
 
-type FormComponent = React.FunctionComponent<FormProps> & {
-  Submit: (props: FormSubmitProps) => JSX.Element;
-  Field: React.FunctionComponent<FormFieldProps>;
-  Switch: (props: FormSwitchProps) => JSX.Element;
+type FormComponent = typeof FormProvider & {
+  Submit: (props: FormSubmitProps) => React.ReactElement;
+  Field: typeof FormField;
 };
 
-// @ts-ignore
-const Form: FormComponent = FormProvider;
+const Form = FormProvider as unknown as FormComponent;
 Form.Submit = FormSubmit;
 Form.Field = FormField;
-Form.Switch = FormSwitch;
 
-export { Form, FormField, FormSubmit, FormSwitch };
+export { Form, FormField, FormSubmit };
 
 // Components
 export { TextInput, type TextInputProps } from './components/TextInput';
 
 // Hooks
 export { useFormField, type UseFormField } from './hooks/useFormField';
+export { useFormSubmit, type UseFormSubmit } from './hooks/useFormSubmit';
 export { useTextInput, type UseTextInput } from './hooks/useTextInput';
 
-// utils
-export { isFocused };
-
 // Types
 export {
   type FormProps,
   type FormActions,
   type FormFieldProps,
   type FormSubmitProps,
-  type FormSwitchProps,
+  type FormSubmitRenderProps,
 };

package/src/utils/checkFocusTrap.test.ts

@@ -0,0 +1,80 @@
+import { checkFocusTrap } from './checkFocusTrap';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  jest.useFakeTimers();
+  // @ts-ignore
+  global.__DEV__ = true;
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+  // @ts-ignore
+  global.__DEV__ = true;
+});
+
+describe('checkFocusTrap', () => {
+  it('calls trackError with NO_KEYBOARD_TRAP when ref is focused and shouldHaveFocus is false', async () => {
+    const trackError = jest.fn();
+    const ref = { current: { isFocused: () => true } } as any;
+
+    const promise = checkFocusTrap!({ ref, shouldHaveFocus: false, trackError });
+    jest.runAllTimers();
+    await promise;
+
+    expect(trackError).toHaveBeenCalledWith('NO_KEYBOARD_TRAP', ref);
+  });
+
+  it('calls trackError with NO_KEYBOARD_TRAP when ref is not focused and shouldHaveFocus is true', async () => {
+    const trackError = jest.fn();
+    const ref = { current: { isFocused: () => false } } as any;
+
+    const promise = checkFocusTrap!({ ref, shouldHaveFocus: true, trackError });
+    jest.runAllTimers();
+    await promise;
+
+    expect(trackError).toHaveBeenCalledWith('NO_KEYBOARD_TRAP', ref);
+  });
+
+  it('does not call trackError when no trap condition exists', async () => {
+    const trackError = jest.fn();
+    const ref = { current: { isFocused: () => false } } as any;
+
+    const promise = checkFocusTrap!({ ref, shouldHaveFocus: false, trackError });
+    jest.runAllTimers();
+    await promise;
+
+    expect(trackError).not.toHaveBeenCalled();
+  });
+
+  it('calls console.error when trackError is unavailable and trap is detected', async () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
+    const ref = { current: { isFocused: () => true } } as any;
+
+    const promise = checkFocusTrap!({ ref, shouldHaveFocus: false, trackError: null });
+    jest.runAllTimers();
+    await promise;
+
+    expect(errorSpy).toHaveBeenCalledWith('The component did trap the focus');
+    errorSpy.mockRestore();
+  });
+
+  it.each([null, undefined])('does not throw when ref.current is %s', async (currentValue) => {
+    const trackError = jest.fn();
+    const ref = { current: currentValue } as any;
+
+    const promise = checkFocusTrap!({ ref, shouldHaveFocus: false, trackError });
+    jest.runAllTimers();
+    await promise;
+
+    // No throw — test passes if we reach here
+  });
+});
+
+jest.mock('react-native', () => mockReactNative());
+
+function mockReactNative() {
+  return {
+    Platform: { OS: 'ios' },
+  };
+}

package/src/utils/checkFocusTrap.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { TextInput } from 'react-native';
+
+export type CheckFocusTrap = {
+  ref: React.RefObject<TextInput>;
+  shouldHaveFocus: boolean;
+  trackError?:
+    | ((rule: 'NO_KEYBOARD_TRAP', ref: React.RefObject<any>) => void)
+    | null;
+};
+
+const CHECK_FOCUS_TRAP_DELAY_MS = 100;
+
+const isFocused = (ref: TextInput | null): boolean => {
+  return ref?.isFocused?.() ?? false;
+};
+
+export const checkFocusTrap = __DEV__
+  ? ({ ref, shouldHaveFocus, trackError }: CheckFocusTrap): Promise<void> => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const hasFocus = isFocused(ref?.current ?? null) === shouldHaveFocus;
+
+          if (!hasFocus) {
+            const message = shouldHaveFocus
+              ? 'The component did not receive the focus'
+              : 'The component did trap the focus';
+
+            if (trackError) {
+              trackError('NO_KEYBOARD_TRAP', ref);
+            } else {
+              console.error(message);
+            }
+          }
+
+          resolve();
+        }, CHECK_FOCUS_TRAP_DELAY_MS);
+      });
+    }
+  : null;

package/dist/components/FormSwitch.d.ts

@@ -1,4 +0,0 @@
-import { type SwitchListItemProps } from '@react-native-ama/react-native';
-import React from 'react';
-export type FormSwitchProps = SwitchListItemProps;
-export declare const FormSwitch: (props: FormSwitchProps) => React.JSX.Element;

package/dist/components/FormSwitch.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormSwitch = void 0;
-const react_native_1 = require("@react-native-ama/react-native");
-const react_1 = __importDefault(require("react"));
-const FormField_1 = require("./FormField");
-const FormSwitch = (props) => {
-    return (<FormField_1.FormField hasValidation={false}>
-      <react_native_1.SwitchListItem {...props}/>
-    </FormField_1.FormField>);
-};
-exports.FormSwitch = FormSwitch;

package/src/components/FormSwitch.tsx

@@ -1,17 +0,0 @@
-import {
-  SwitchListItem,
-  type SwitchListItemProps,
-} from '@react-native-ama/react-native';
-import React from 'react';
-
-import { FormField } from './FormField';
-
-export type FormSwitchProps = SwitchListItemProps;
-
-export const FormSwitch = (props: FormSwitchProps) => {
-  return (
-    <FormField hasValidation={false}>
-      <SwitchListItem {...props} />
-    </FormField>
-  );
-};