@react-native-ama/forms 1.0.0

package/dist/react-native/src/hooks/usePressable.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePressable = void 0;
+const useButtonChecks_1 = require("@react-native-ama/core/src/hooks/useButtonChecks");
+const internal_1 = require("@react-native-ama/internal");
+const react_native_1 = require("react-native");
+const usePressable = (props, children) => {
+    const accessibilityRole = react_native_1.Platform.OS === 'ios' &&
+        IOS_BUTTON_ACCESSIBILITY_ROLES.includes(props.accessibilityRole)
+        ? 'button'
+        : props.accessibilityRole;
+    const accessibilityState = (0, internal_1.generateAccessibilityStateFromProp)(Object.assign(Object.assign({}, props), { accessibilityRole }));
+    const ignoreContrastCheck = __DEV__
+        ? // @ts-ignore
+            props.disabled && (0, internal_1.shouldIgnoreContrastCheckForDisabledElement)()
+        : null;
+    const checks = __DEV__
+        ? useButtonChecks_1.useButtonChecks === null || useButtonChecks_1.useButtonChecks === void 0 ? void 0 : (0, useButtonChecks_1.useButtonChecks)(Object.assign(Object.assign({}, props), { accessibilityRole, accessibilityState }), children, !ignoreContrastCheck)
+        : null;
+    return __DEV__
+        ? {
+            accessibilityState,
+            // @ts-ignore
+            onLayout: evt => {
+                if (props.onLayout) {
+                    props.onLayout(evt);
+                }
+                checks === null || checks === void 0 ? void 0 : checks.onLayout(evt);
+            },
+            // @ts-ignore
+            style: checks.debugStyle,
+            accessibilityRole,
+        }
+        : {
+            accessibilityState,
+            accessibilityRole,
+        };
+};
+exports.usePressable = usePressable;
+const IOS_BUTTON_ACCESSIBILITY_ROLES = [
+    'checkbox',
+    'togglebutton',
+    'radio',
+];

package/dist/react-native/src/hooks/useSwitch.d.ts

@@ -0,0 +1,10 @@
+import type { ViewProps } from 'react-native';
+type UseSwitch = Omit<ViewProps, 'children' | 'accessibilityRole' | 'accessibilityLabel'> & {
+    accessibilityLabel: string;
+};
+type UseSwitchReturn = Omit<ViewProps, 'children' | 'accessibilityRole' | 'accessibilityLabel'> & {
+    accessibilityLabel: string;
+    accessibilityRole: 'switch';
+};
+export declare const useSwitch: (props: UseSwitch) => UseSwitchReturn;
+export {};

package/dist/react-native/src/hooks/useSwitch.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSwitch = void 0;
+const core_1 = require("@react-native-ama/core");
+const internal_1 = require("@react-native-ama/internal");
+const react_1 = __importDefault(require("react"));
+const useSwitch = (props) => {
+    const accessibilityState = react_1.default.useMemo(() => (0, internal_1.generateAccessibilityStateFromProp)(props), [props]);
+    const checks = __DEV__
+        ? core_1.useButtonChecks === null || core_1.useButtonChecks === void 0 ? void 0 : (0, core_1.useButtonChecks)(Object.assign(Object.assign({}, props), { accessibilityRole: 'switch' }))
+        : undefined;
+    return __DEV__
+        ? Object.assign(Object.assign({ accessibilityRole: 'switch', accessibilityState }, props), { 
+            // @ts-ignore
+            onLayout: checks.onLayout, style: internal_1.applyStyle === null || internal_1.applyStyle === void 0 ? void 0 : (0, internal_1.applyStyle)({
+                // @ts-ignore
+                style: props.style,
+                // @ts-ignore
+                debugStyle: checks.debugStyle,
+            }) }) : Object.assign({ accessibilityRole: 'switch', accessibilityState }, props);
+};
+exports.useSwitch = useSwitch;

package/dist/react-native/src/index.d.ts

@@ -0,0 +1,10 @@
+export { ExpandablePressable } from './components/ExpandablePressable';
+export { SwitchListItem, type SwitchListItemProps, } from './components/SwitchListItem';
+export { SwitchWrapper } from './components/SwitchWrapper';
+export { Text } from './components/Text';
+export { TouchableOpacity, type TouchableOpacityProps, } from './components/TouchableOpacity';
+export { TouchableWithoutFeedback, type TouchableWithoutFeedbackProps, } from './components/TouchableWithoutFeedback';
+export { Pressable, type PressableProps } from './components/Pressable';
+export { useExpandable } from './hooks/useExpandable';
+export { usePressable, type UsePressable } from './hooks/usePressable';
+export { useSwitch } from './hooks/useSwitch';

package/dist/react-native/src/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSwitch = exports.usePressable = exports.useExpandable = exports.Pressable = exports.TouchableWithoutFeedback = exports.TouchableOpacity = exports.Text = exports.SwitchWrapper = exports.SwitchListItem = exports.ExpandablePressable = void 0;
+// Components
+var ExpandablePressable_1 = require("./components/ExpandablePressable");
+Object.defineProperty(exports, "ExpandablePressable", { enumerable: true, get: function () { return ExpandablePressable_1.ExpandablePressable; } });
+var SwitchListItem_1 = require("./components/SwitchListItem");
+Object.defineProperty(exports, "SwitchListItem", { enumerable: true, get: function () { return SwitchListItem_1.SwitchListItem; } });
+var SwitchWrapper_1 = require("./components/SwitchWrapper");
+Object.defineProperty(exports, "SwitchWrapper", { enumerable: true, get: function () { return SwitchWrapper_1.SwitchWrapper; } });
+var Text_1 = require("./components/Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
+var TouchableOpacity_1 = require("./components/TouchableOpacity");
+Object.defineProperty(exports, "TouchableOpacity", { enumerable: true, get: function () { return TouchableOpacity_1.TouchableOpacity; } });
+var TouchableWithoutFeedback_1 = require("./components/TouchableWithoutFeedback");
+Object.defineProperty(exports, "TouchableWithoutFeedback", { enumerable: true, get: function () { return TouchableWithoutFeedback_1.TouchableWithoutFeedback; } });
+var Pressable_1 = require("./components/Pressable");
+Object.defineProperty(exports, "Pressable", { enumerable: true, get: function () { return Pressable_1.Pressable; } });
+// Hooks
+var useExpandable_1 = require("./hooks/useExpandable");
+Object.defineProperty(exports, "useExpandable", { enumerable: true, get: function () { return useExpandable_1.useExpandable; } });
+var usePressable_1 = require("./hooks/usePressable");
+Object.defineProperty(exports, "usePressable", { enumerable: true, get: function () { return usePressable_1.usePressable; } });
+var useSwitch_1 = require("./hooks/useSwitch");
+Object.defineProperty(exports, "useSwitch", { enumerable: true, get: function () { return useSwitch_1.useSwitch; } });

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@react-native-ama/forms",
+  "version": "1.0.0",
+  "private": false,
+  "react-native": "src/index",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "exports": {
+    ".": [
+      {
+        "imports": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      },
+      "./dist/index.js"
+    ]
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p ./tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@react-native-ama/core": "*",
+    "@react-native-ama/internal": "*",
+    "@react-native-ama/react-native": "*"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "keywords": [
+    "react-native",
+    "a11y",
+    "accessibility"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FormidableLabs/react-native-ama",
+    "directory": "packages/forms"
+  },
+  "bugs": {
+    "url": "https://github.com/FormidableLabs/react-native-ama/issues"
+  },
+  "homepage": "https://github.com/FormidableLabs/react-native-ama#readme",
+  "publishConfig": {
+    "provenance": true
+  },
+  "author": "",
+  "license": "MIT",
+  "jest": {
+    "preset": "jest-expo",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/node_modules",
+      "<rootDir>/dist/"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{ts,tsx}"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "statements": 90,
+        "branches": 82,
+        "functions": 83,
+        "lines": 91
+      }
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!(@react-native|react-native|react-native-reanimated/))"
+    ],
+    "transform": {
+      "\\.[jt]sx?$": "babel-jest"
+    },
+    "verbose": true
+  },
+  "devDependencies": {
+    "jest-expo": "^49.0.0"
+  }
+}

package/src/components/Form.test.tsx

@@ -0,0 +1,262 @@
+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(() => {
+  jest.clearAllMocks();
+});
+
+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 = {
+      ref,
+      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);
+
+    expect(setFocus).toHaveBeenCalledWith('whatever');
+  });
+
+  it('calls the .focus callback if the next field has it and is editable', 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(focus).toHaveBeenCalledWith());
+  });
+
+  it('awaits 50ms before triggering again the `focus` event if the component already have the focus', async () => {
+    jest.useFakeTimers();
+
+    const focus = jest.fn();
+    const ref = {
+      current: { focus, isFocused: jest.fn().mockReturnValue(true) },
+    };
+    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);
+
+    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();
+  });
+
+  it('calls the setFocus callback if the next field is not editable', () => {
+    const focus = jest.fn();
+    const ref = { current: { focus, isFocused: jest.fn() } };
+    const secondField = {
+      ref,
+      hasFocusCallback: true,
+      hasValidation: false,
+      isEditable: false,
+      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);
+
+    expect(setFocus).toHaveBeenCalledWith(ref.current);
+  });
+
+  it('focuses the first failed component when submitForm fails', async () => {
+    const onSubmit = jest.fn().mockReturnValue(false);
+
+    const focus = jest.fn();
+    const ref = { current: { focus, isFocused: jest.fn() } };
+    const secondField = {
+      ref,
+      hasFocusCallback: true,
+      hasValidation: true,
+      hasError: true,
+      isEditable: false,
+      id: 'second',
+    };
+
+    let providerValues = customRender(onSubmit);
+
+    providerValues.refs?.push({
+      ref: { current: 'random ref' },
+      hasFocusCallback: false,
+      hasValidation: false,
+      id: 'first',
+    });
+
+    // next field
+    providerValues.refs?.push(secondField);
+
+    providerValues.submitForm?.();
+
+    await waitFor(() => expect(setFocus).toHaveBeenCalledWith(ref.current));
+  });
+});
+
+let setFocus: jest.Mock;
+
+function mockUseFocus() {
+  setFocus = jest.fn();
+
+  return {
+    useFocus: () => {
+      return {
+        setFocus,
+      };
+    },
+  };
+}
+
+function customRender(onSubmit = jest.fn()) {
+  let providerValues: any;
+
+  render(
+    <Form onSubmit={onSubmit}>
+      <FormContext.Consumer>
+        {value => {
+          providerValues = value;
+
+          return null;
+        }}
+      </FormContext.Consumer>
+    </Form>,
+  );
+
+  return providerValues;
+}
+
+jest.mock('../hooks/useFocus', () => mockUseFocus());
+jest.mock('../internal/checks/checkFocusTrap', () => {
+  return {
+    checkFocusTrap: jest.fn().mockResolvedValue(null),
+  };
+});

package/src/components/Form.tsx

@@ -0,0 +1,138 @@
+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';
+
+export type FormProps = React.PropsWithChildren<{
+  onSubmit: () => boolean | Promise<boolean>;
+  ref?: React.RefObject<FormActions>;
+}>;
+
+export type FormActions = {
+  focusFirstInvalidField: () => void;
+};
+
+export const Form = React.forwardRef<FormActions, FormProps>(
+  ({ children, onSubmit }, ref) => {
+    const refs = React.useRef<FormRef[]>([]);
+    const { setFocus } = useFocus();
+
+    const checks = __DEV__ ? useChecks?.() : undefined;
+
+    const focusField = (nextField?: Partial<FormRef> | undefined) => {
+      /**
+       * Refs passed as prop have another ".current"
+       */
+      const nextRefElement = nextField?.ref?.current?.current
+        ? nextField?.ref.current
+        : nextField?.ref;
+
+      const callFocus =
+        // @ts-ignore
+        nextRefElement?.current?.focus &&
+        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.
+         * Same happens if we do not call `focus` if the field is already focused.
+         */
+        const timeoutValue = isFocused(nextRefElement.current) ? 50 : 0;
+
+        setTimeout(() => {
+          nextRefElement?.current?.focus();
+
+          __DEV__ &&
+            nextRefElement &&
+            checks?.checkFocusTrap({
+              ref: nextRefElement,
+              shouldHaveFocus: true,
+            });
+        }, timeoutValue);
+      } else if (nextRefElement?.current) {
+        setFocus(nextRefElement?.current);
+      }
+    };
+
+    const submitForm = async () => {
+      const isValid = await onSubmit();
+
+      if (isValid) {
+        return;
+      }
+
+      focusFirstInvalidField();
+    };
+
+    const focusFirstInvalidField = () => {
+      InteractionManager.runAfterInteractions(() => {
+        setTimeout(() => {
+          const fieldWithError = (refs.current || []).find(
+            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',
+            });
+
+          focusField(fieldWithError);
+        }, 0);
+      });
+    };
+
+    React.useImperativeHandle(ref, () => ({
+      focusFirstInvalidField,
+    }));
+
+    return (
+      <FormContext.Provider
+        value={{ refs: refs.current, submitForm, focusField }}>
+        {children}
+      </FormContext.Provider>
+    );
+  },
+);
+
+export type FormContextValue = {
+  refs?: FormRef[];
+  submitForm: () => Promise<void>;
+  focusField?: (nextField?: Partial<FormRef> | undefined) => void;
+};
+
+export type FormRef = {
+  ref: React.RefObject<any>;
+  hasFocusCallback: boolean;
+  id: string | undefined;
+  hasValidation: boolean;
+  hasError?: boolean;
+  isEditable?: boolean;
+};
+
+export const FormContext = React.createContext<FormContextValue | null>(null);
+
+export const useForm = () => {
+  const context = React.useContext(FormContext);
+  if (!context) {
+    __DEV__ &&
+      console.error(
+        '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',
+    );
+  }
+  return context;
+};

package/src/components/FormField.test.tsx

@@ -0,0 +1,54 @@
+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';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('FormField', () => {
+  it('register itself using useFormField', () => {
+    const useFormField = jest.spyOn(UseFormField, 'useFormField');
+
+    render(
+      <FormField hasValidation={false}>
+        <Text>Test</Text>
+      </FormField>,
+    );
+
+    expect(useFormField.mock.calls[0][0]).toMatchObject({
+      hasFocusCallback: false,
+      ref: expect.objectContaining({ current: expect.any(Object) }),
+    });
+  });
+
+  it('wraps the children in a focusable View', () => {
+    const { toJSON } = render(
+      <FormField hasValidation={false}>
+        <Text>Test</Text>
+      </FormField>,
+    );
+
+    expect(toJSON()).toMatchInlineSnapshot(`
+      <View
+        accessibilityHint=""
+        accessible={true}
+        focusable={false}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+      >
+        <Text>
+          Test
+        </Text>
+      </View>
+    `);
+  });
+});