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

package/package.json

@@ -1,17 +1,41 @@
 {
   "name": "@react-native-ama/forms",
-  "version": "1.2.0",
-  "react-native": "src/index",
-  "types": "dist/index.d.ts",
-  "main": "dist/index.js",
+  "version": "2.0.0-beta.0",
+  "sideEffects": false,
   "exports": {
-    ".": [
-      {
-        "imports": "./dist/index.js",
-        "types": "./dist/index.d.ts"
-      },
-      "./dist/index.js"
-    ]
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./Form": {
+      "types": "./dist/components/Form.d.ts",
+      "default": "./dist/components/Form.js"
+    },
+    "./FormField": {
+      "types": "./dist/components/FormField.d.ts",
+      "default": "./dist/components/FormField.js"
+    },
+    "./FormSubmit": {
+      "types": "./dist/components/FormSubmit.d.ts",
+      "default": "./dist/components/FormSubmit.js"
+    },
+    "./TextInput": {
+      "types": "./dist/components/TextInput.d.ts",
+      "default": "./dist/components/TextInput.js"
+    },
+    "./useFormField": {
+      "types": "./dist/hooks/useFormField.d.ts",
+      "default": "./dist/hooks/useFormField.js"
+    },
+    "./useFormSubmit": {
+      "types": "./dist/hooks/useFormSubmit.d.ts",
+      "default": "./dist/hooks/useFormSubmit.js"
+    },
+    "./useTextInput": {
+      "types": "./dist/hooks/useTextInput.d.ts",
+      "default": "./dist/hooks/useTextInput.js"
+    }
   },
   "files": [
     "src",
@@ -22,15 +46,16 @@
     "typecheck": "tsc --noEmit",
     "test": "jest"
   },
-  "dependencies": {
-    "@react-native-ama/core": "~1.2.0",
-    "@react-native-ama/internal": "~1.2.0",
-    "@react-native-ama/react-native": "~1.2.0"
-  },
   "peerDependencies": {
+    "@react-native-ama/core": "~2.0.0-beta.0",
     "react": "*",
     "react-native": "*"
   },
+  "peerDependenciesMeta": {
+    "@react-native-ama/core": {
+      "optional": true
+    }
+  },
   "keywords": [
     "react-native",
     "a11y",
@@ -51,7 +76,10 @@
   "author": "",
   "license": "MIT",
   "jest": {
-    "preset": "jest-expo",
+    "preset": "react-native",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.js"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/node_modules",
       "<rootDir>/dist/"
@@ -68,11 +96,24 @@
       }
     },
     "transformIgnorePatterns": [
-      "node_modules/(?!(@react-native|react-native|react-native-reanimated/))"
+      "node_modules/(?!(react-native|react-native-reanimated|expo|@expo)/)"
     ],
     "transform": {
       "\\.[jt]sx?$": "babel-jest"
     },
+    "moduleDirectories": [
+      "node_modules",
+      "../../playground/node_modules"
+    ],
+    "moduleNameMapper": {
+      "@react-native/js-polyfills/error-guard": "<rootDir>/../../jest-mocks/error-guard.js",
+      "^(\\.{1,2}/)*ama\\.config\\.json$": "<rootDir>/../../jest-mocks/ama-config.js",
+      "^(\\.{1,2}/)*ReactNativeAmaModule$": "<rootDir>/../../jest-mocks/ReactNativeAmaModule.js",
+      "^@react-native-ama/core$": "<rootDir>/../../packages/core/src/index.ts",
+      "^@react-native-ama/core/(.*)$": "<rootDir>/../../packages/core/$1",
+      "^react-native$": "<rootDir>/../../node_modules/react-native",
+      "^react-native/(.*)$": "<rootDir>/../../node_modules/react-native/$1"
+    },
     "verbose": true
   },
   "devDependencies": {

package/src/components/Form.test.tsx

@@ -1,7 +1,5 @@
-import * as UseChecks from '@react-native-ama/core/src/hooks/useChecks';
 import { render, waitFor } from '@testing-library/react-native';
 import * as React from 'react';
-
 import { Form, FormContext } from './Form';
 
 beforeEach(() => {
@@ -9,56 +7,6 @@ beforeEach(() => {
 });
 
 describe('Form', () => {
-  let checkFocusTrap: jest.Mock;
-
-  beforeEach(function () {
-    checkFocusTrap = jest.fn().mockResolvedValue(null);
-
-    // @ts-ignore
-    jest.spyOn(UseChecks, 'useChecks').mockReturnValue({
-      checkFocusTrap,
-      hasErrors: true,
-    } as any);
-  });
-
-  it('checks that next field has the focus if it has the focus callback', async () => {
-    const focus = jest.fn();
-    const ref = { current: { focus, isFocused: jest.fn() } };
-    const secondField = {
-      ref,
-      hasFocusCallback: true,
-      hasValidation: false,
-      isEditable: true,
-      id: 'second',
-    };
-
-    let providerValues = customRender();
-
-    providerValues.refs?.push({
-      ref: { current: 'random ref' },
-      hasFocusCallback: false,
-      hasValidation: false,
-      id: 'first',
-    });
-
-    // next field
-    providerValues.refs?.push(secondField);
-
-    providerValues.focusField?.(secondField);
-
-    await waitFor(() =>
-      expect(checkFocusTrap).toHaveBeenCalledWith({
-        ref: {
-          current: {
-            focus: expect.any(Function),
-            isFocused: expect.any(Function),
-          },
-        },
-        shouldHaveFocus: true,
-      }),
-    );
-  });
-
   it('calls setFocus if the next field has no .focus callback', () => {
     const ref = { current: 'whatever' };
     const secondField = {
@@ -141,24 +89,11 @@ describe('Form', () => {
     providerValues.focusField?.(secondField);
 
     expect(focus).not.toHaveBeenCalled();
-    expect(checkFocusTrap).not.toHaveBeenCalled();
 
     jest.advanceTimersByTime(51);
 
     expect(focus).toHaveBeenCalledWith();
 
-    await waitFor(() =>
-      expect(checkFocusTrap).toHaveBeenCalledWith({
-        ref: {
-          current: {
-            focus: expect.any(Function),
-            isFocused: expect.any(Function),
-          },
-        },
-        shouldHaveFocus: true,
-      }),
-    );
-
     jest.useRealTimers();
   });
 
@@ -190,6 +125,35 @@ describe('Form', () => {
     expect(setFocus).toHaveBeenCalledWith(ref.current);
   });
 
+  it('focusFieldAt focuses the field at the given index', async () => {
+    const focus = jest.fn();
+    const ref = React.createRef<any>();
+    (ref as any).current = { focus, isFocused: jest.fn().mockReturnValue(false) };
+
+    let formRef = React.createRef<any>();
+
+    render(
+      <Form ref={formRef} onSubmit={jest.fn()}>
+        <FormContext.Consumer>
+          {value => {
+            value?.refs?.push({
+              ref: { current: ref } as any,
+              hasFocusCallback: true,
+              hasValidation: false,
+              isEditable: true,
+              id: 'field0',
+            });
+            return null;
+          }}
+        </FormContext.Consumer>
+      </Form>,
+    );
+
+    formRef.current?.focusFieldAt(0);
+
+    await waitFor(() => expect(focus).toHaveBeenCalled());
+  });
+
   it('focuses the first failed component when submitForm fails', async () => {
     const onSubmit = jest.fn().mockReturnValue(false);
 
@@ -222,7 +186,7 @@ describe('Form', () => {
   });
 });
 
-let setFocus: jest.Mock;
+var setFocus: jest.Mock;
 
 function mockUseFocus() {
   setFocus = jest.fn();
@@ -255,8 +219,37 @@ function customRender(onSubmit = jest.fn()) {
 }
 
 jest.mock('../hooks/useFocus', () => mockUseFocus());
-jest.mock('../internal/checks/checkFocusTrap', () => {
-  return {
-    checkFocusTrap: jest.fn().mockResolvedValue(null),
-  };
+
+describe('useForm', () => {
+  it('returns default context value when suppressError is true and no Form wrapper', () => {
+    const { useForm } = require('./Form');
+    const { renderHook } = require('@testing-library/react-native');
+
+    const { result } = renderHook(() => useForm({ suppressError: true }));
+    expect(result.current.refs).toEqual([]);
+    expect(typeof result.current.submitForm).toBe('function');
+  });
+
+  it('throws when called outside Form and suppressError is false', () => {
+    const { useForm } = require('./Form');
+    const { renderHook } = require('@testing-library/react-native');
+
+    expect(() => renderHook(() => useForm())).toThrow(
+      'useForm must be used within a FormContextProvider',
+    );
+  });
+
+  it('logs a console.error in __DEV__ when called outside Form', () => {
+    const { useForm } = require('./Form');
+    const { renderHook } = require('@testing-library/react-native');
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    // @ts-ignore
+    global.__DEV__ = true;
+
+    expect(() => renderHook(() => useForm())).toThrow();
+    expect(errorSpy).toHaveBeenCalled();
+    errorSpy.mockRestore();
+    // @ts-ignore
+    global.__DEV__ = true;
+  });
 });

package/src/components/Form.tsx

@@ -1,11 +1,9 @@
-import { useChecks, useFocus } from '@react-native-ama/core';
-import { isFocused } from '@react-native-ama/internal';
 import * as React from 'react';
-import { InteractionManager } from 'react-native';
+import { InteractionManager, TextInput } from 'react-native';
+import { useFocus } from '../hooks/useFocus';
 
 export type FormProps = React.PropsWithChildren<{
   onSubmit: () => boolean | Promise<boolean>;
-  ref?: React.RefObject<FormActions>; // need to explicitly type for inference in <Form /> component
 }>;
 
 export type FormActions = {
@@ -18,8 +16,6 @@ export const Form = React.forwardRef<FormActions, FormProps>(
     const refs = React.useRef<FormRef[]>([]);
     const { setFocus } = useFocus();
 
-    const checks = __DEV__ ? useChecks?.() : undefined;
-
     const focusField = React.useCallback(
       (nextField?: Partial<FormRef> | undefined) => {
         /**
@@ -35,14 +31,6 @@ export const Form = React.forwardRef<FormActions, FormProps>(
           nextField?.hasFocusCallback &&
           nextField?.isEditable;
 
-        __DEV__ &&
-          nextRefElement == null &&
-          checks?.logResult('nextRefElement', {
-            message:
-              'No next field found. Make sure you wrapped your form inside the <Form /> component',
-            rule: 'NO_UNDEFINED',
-          });
-
         if (callFocus) {
           /**
            * On some apps, if we call focus immediately and the field is already focused we lose the focus.
@@ -52,51 +40,33 @@ export const Form = React.forwardRef<FormActions, FormProps>(
 
           setTimeout(() => {
             nextRefElement?.current?.focus();
-
-            __DEV__ &&
-              nextRefElement &&
-              checks?.checkFocusTrap({
-                ref: nextRefElement,
-                shouldHaveFocus: true,
-              });
           }, timeoutValue);
         } else if (nextRefElement?.current) {
           setFocus(nextRefElement?.current);
         }
       },
-      [checks, setFocus],
+      [setFocus]
     );
 
-    const focusFieldAt = React.useCallback(
-      (position: number) => {
-        InteractionManager.runAfterInteractions(() => {
-          setTimeout(() => {
-            const fieldWithError = refs.current[position];
+    const focusFieldAt = (position: number) => {
+      InteractionManager.runAfterInteractions(() => {
+        setTimeout(() => {
+          const fieldWithError = refs.current[position];
 
-            focusField(fieldWithError);
-          }, 0);
-        });
-      },
-      [focusField],
-    );
+          focusField(fieldWithError);
+        }, 0);
+      });
+    };
 
-    const focusFirstInvalidField = React.useCallback(() => {
+    const focusFirstInvalidField = () => {
       const fieldWithError = (refs.current || []).findIndex(
-        fieldRef => fieldRef.hasValidation && fieldRef.hasError,
+        (fieldRef) => fieldRef.hasValidation && fieldRef.hasError
       );
 
-      __DEV__ &&
-        fieldWithError == null &&
-        checks?.logResult('Form', {
-          message:
-            'The form validation has failed, but no component with error was found',
-          rule: 'NO_UNDEFINED',
-        });
-
       focusFieldAt(fieldWithError);
-    }, [focusFieldAt, checks]);
+    };
 
-    const submitForm = React.useCallback(async () => {
+    const submitForm = async () => {
       const isValid = await onSubmit();
 
       if (isValid) {
@@ -104,7 +74,7 @@ export const Form = React.forwardRef<FormActions, FormProps>(
       }
 
       focusFirstInvalidField();
-    }, [focusFirstInvalidField, onSubmit]);
+    };
 
     React.useImperativeHandle(ref, () => ({
       focusFirstInvalidField,
@@ -113,11 +83,12 @@ export const Form = React.forwardRef<FormActions, FormProps>(
 
     return (
       <FormContext.Provider
-        value={{ refs: refs.current, submitForm, focusField }}>
+        value={{ refs: refs.current, submitForm, focusField }}
+      >
         {children}
       </FormContext.Provider>
     );
-  },
+  }
 );
 
 export type FormContextValue = {
@@ -140,11 +111,11 @@ export const FormContext = React.createContext<FormContextValue | null>(null);
 const DEFAULT_CONTEXT_VALUE: FormContextValue = {
   refs: [],
   submitForm: () => Promise.resolve(),
-  focusField: () => {},
+  focusField: () => { },
 };
 
 export const useForm = (
-  { suppressError }: { suppressError?: boolean } = { suppressError: false },
+  { suppressError }: { suppressError?: boolean } = { suppressError: false }
 ) => {
   const context = React.useContext(FormContext);
 
@@ -155,12 +126,17 @@ export const useForm = (
   if (!context) {
     __DEV__ &&
       console.error(
-        'Please wrap your form field inside the <Form /> component',
+        'Please wrap your form field inside the <Form /> component'
       );
     throw new Error(
-      'useForm must be used within a FormContextProvider, please wrap your form field inside the <Form /> component',
+      'useForm must be used within a FormContextProvider, please wrap your form field inside the <Form /> component'
     );
   }
 
   return context;
 };
+
+
+const isFocused = (input: TextInput | undefined | null) => {
+  return input?.isFocused();
+};

package/src/components/FormField.test.tsx

@@ -1,12 +1,16 @@
 import { render } from '@testing-library/react-native';
 import * as React from 'react';
 import { Text } from 'react-native';
-
 import * as UseFormField from '../hooks/useFormField';
 import { FormField } from './FormField';
 
+jest.mock('../hooks/useFormField', () => ({
+  useFormField: jest.fn(() => ({})),
+}));
+
 beforeEach(() => {
   jest.clearAllMocks();
+  (UseFormField.useFormField as jest.Mock).mockReturnValue({});
 });
 
 describe('FormField', () => {
@@ -25,6 +29,18 @@ describe('FormField', () => {
     });
   });
 
+  it('renders children without accessible View when wrapInsideAccessibleView is false', () => {
+    const { toJSON } = render(
+      <FormField hasValidation={false} wrapInsideAccessibleView={false}>
+        <Text>Test</Text>
+      </FormField>,
+    );
+
+    const json = toJSON() as any;
+    expect(json.type).toBe('TouchableWithoutFeedback');
+    expect(json.children[0].type).not.toBe('View');
+  });
+
   it('wraps the children in a focusable View', () => {
     const { toJSON } = render(
       <FormField hasValidation={false}>
@@ -33,22 +49,22 @@ describe('FormField', () => {
     );
 
     expect(toJSON()).toMatchInlineSnapshot(`
-      <View
-        accessibilityHint=""
-        accessible={true}
-        focusable={false}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+      <TouchableWithoutFeedback
+        hasValidation={false}
+        ref={
+          {
+            "current": null,
+          }
+        }
       >
-        <Text>
-          Test
-        </Text>
-      </View>
+        <View
+          accessible={true}
+        >
+          <Text>
+            Test
+          </Text>
+        </View>
+      </TouchableWithoutFeedback>
     `);
   });
 });

package/src/components/FormField.tsx

@@ -4,7 +4,6 @@ import {
   TouchableWithoutFeedbackProps,
   View,
 } from 'react-native';
-
 import { UseFormField, useFormField } from '../hooks/useFormField';
 
 export type FormFieldProps = React.PropsWithChildren<

package/src/components/FormSubmit.test.tsx

@@ -1,71 +1,33 @@
-import { render } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 import * as React from 'react';
-import { Pressable, View } from 'react-native';
-
+import { Pressable } from 'react-native';
 import { FormSubmit } from './FormSubmit';
+import * as Form from './Form';
 
 beforeEach(() => {
   jest.clearAllMocks();
 });
 
 describe('FormSubmit', () => {
-  it('wraps the children inside a Pressable component with the correct accessibility role and label', () => {
-    const { getByTestId, UNSAFE_getByType } = render(
-      <FormSubmit
-        accessibilityLabel="This is the label"
-        busy={false}
-        testID="test-me"
-      />,
+  it('provides onPress to its children render function', () => {
+    const submitForm = jest.fn().mockResolvedValue(undefined);
+    jest.spyOn(Form, 'useForm').mockImplementation(
+      () => ({ submitForm }) as any,
     );
 
-    expect(UNSAFE_getByType(Pressable)).toBeTruthy();
-    expect(getByTestId('test-me').props).toEqual(
-      expect.objectContaining({
-        accessibilityRole: 'button',
-        accessibilityLabel: 'This is the label',
-        accessibilityState: {
-          busy: false,
-        },
-        busy: false,
-        accessible: true,
-      }),
-    );
-  });
+    const renderChildren = jest.fn(({ onPress }) => (
+      <Pressable testID="submit" onPress={onPress} />
+    ));
 
-  it('hides the children from the accessibility tree', () => {
-    const { getByTestId } = render(
-      <FormSubmit
-        accessibilityLabel="This is the label"
-        busy={false}
-        testID="test-me">
-        <View testID="child" />
-      </FormSubmit>,
+    const { getByTestId, UNSAFE_getAllByType } = render(
+      <FormSubmit>{renderChildren}</FormSubmit>,
     );
 
-    expect(getByTestId('child').props).toEqual({
-      accessibilityElementsHidden: true,
-      children: null,
-      importantForAccessibility: 'no',
-      testID: 'child',
-    });
-  });
-});
-
-jest.mock('../hooks/useFormField', () => {
-  return {
-    useFormField: jest.fn().mockReturnValue({}),
-  };
-});
+    expect(renderChildren).toHaveBeenCalledTimes(1);
+    expect(UNSAFE_getAllByType(Pressable)).toHaveLength(1);
 
-jest.mock('@react-native-ama/core', () => {
-  const originalModule = jest.requireActual('@react-native-ama/core');
+    fireEvent.press(getByTestId('submit'));
 
-  return {
-    ...originalModule,
-    useAMAContext: () => {
-      return {
-        isScreenReaderEnabled: true,
-      };
-    },
-  };
+    expect(submitForm).toHaveBeenCalledTimes(1);
+  });
 });

package/src/components/FormSubmit.tsx

@@ -1,43 +1,16 @@
-import { useAMAContext } from '@react-native-ama/core';
-import { HideChildrenFromAccessibilityTree } from '@react-native-ama/core';
 import React from 'react';
-import { Pressable, PressableProps } from 'react-native';
-
 import { useForm } from '../components/Form';
 
-export type FormSubmitProps = React.PropsWithChildren<{
-  accessibilityLabel: string;
-  accessibilityHint?: string;
-  busy: boolean;
-  style?: PressableProps['style'];
-  testID?: string;
-}>;
-
-export const FormSubmit = (props: FormSubmitProps) => {
-  const { submitForm } = useForm();
-  const { isScreenReaderEnabled } = useAMAContext();
+export type FormSubmitRenderProps = {
+  onPress: () => Promise<void>;
+};
 
-  return (
-    <Pressable
-      accessibilityRole="button"
-      pointerEvents="box-only" // prevent event propagation to children eg Pressable
-      {...props}
-      onPress={submitForm}>
-      {isScreenReaderEnabled ? (
-        <FormSubmitForScreenReader children={props.children} />
-      ) : (
-        props.children
-      )}
-    </Pressable>
-  );
+export type FormSubmitProps = {
+  children: (props: FormSubmitRenderProps) => React.ReactNode;
 };
 
-const FormSubmitForScreenReader = ({
-  children,
-}: React.PropsWithChildren<{}>) => {
-  return (
-    <HideChildrenFromAccessibilityTree>
-      {children}
-    </HideChildrenFromAccessibilityTree>
-  );
+export const FormSubmit = ({ children }: FormSubmitProps) => {
+  const { submitForm } = useForm();
+
+  return <>{children({ onPress: submitForm })}</>;
 };