@aws-amplify/ui-react-core 2.1.33 → 3.0.0

package/src/Authenticator/hooks/useAuthenticatorRoute/types.ts

@@ -0,0 +1,111 @@
+import {
+  AuthenticatorMachineContext,
+  AuthenticatorMachineContextKey,
+  AuthenticatorRouteComponentName,
+  CommonRouteProps,
+  ConfirmResetPasswordBaseProps,
+  ConfirmSignInBaseProps,
+  ConfirmSignUpBaseProps,
+  Defaults,
+  DefaultProps,
+  ForceResetPasswordBaseProps,
+  ResetPasswordBaseProps,
+  SetupTotpBaseProps,
+  SignInBaseProps,
+  SignUpBaseProps,
+  VerifyUserProps,
+  ConfirmVerifyUserProps,
+} from '../types';
+
+export type UseAuthenticatorRouteParams<FieldType> = {
+  components: Defaults<FieldType>;
+};
+export type UseAuthenticatorRoute<
+  ComponentName extends AuthenticatorRouteComponentName,
+  FieldType = {},
+> = {
+  Component: Defaults<FieldType>[ComponentName];
+  props: DefaultProps<FieldType>[ComponentName];
+};
+
+export type UseAuthenticatorRouteDefault<FieldType> = {
+  Component: Defaults<FieldType>[AuthenticatorRouteComponentName];
+  props: DefaultProps<FieldType>[AuthenticatorRouteComponentName];
+};
+
+// extract machine prop keys required for a sub-component route
+type ExtractMachineKey<RouteProps> = Extract<
+  AuthenticatorMachineContextKey,
+  keyof RouteProps
+>;
+
+// map to `handleBlur`, `handleChange`, and `handleSubmit` props
+export type FormEventHandlerMachineKey =
+  | 'updateBlur'
+  | 'updateForm'
+  | 'submitForm';
+
+export type FormEventHandlerPropKey =
+  | `handleBlur`
+  | `handleChange`
+  | `handleSubmit`;
+
+// common route keys shared by all routes
+export type CommonRouteMachineKey =
+  | ExtractMachineKey<CommonRouteProps>
+  | FormEventHandlerMachineKey;
+
+/**
+ * `route` sub-component machine selector key types
+ */
+export type ConfirmResetPasswordMachineKey =
+  | ExtractMachineKey<ConfirmResetPasswordBaseProps>
+  | CommonRouteMachineKey;
+
+export type ConfirmSignInMachineKey =
+  | ExtractMachineKey<ConfirmSignInBaseProps>
+  | CommonRouteMachineKey;
+
+export type ConfirmSignUpMachineKey =
+  | ExtractMachineKey<ConfirmSignUpBaseProps>
+  | CommonRouteMachineKey;
+
+export type ConfirmVerifyUserMachineKey =
+  | ExtractMachineKey<ConfirmVerifyUserProps>
+  | CommonRouteMachineKey;
+
+export type ForceNewPasswordMachineKey =
+  | ExtractMachineKey<ForceResetPasswordBaseProps>
+  | CommonRouteMachineKey;
+
+export type ResetPasswordMachineKey =
+  | ExtractMachineKey<ResetPasswordBaseProps>
+  | CommonRouteMachineKey;
+
+export type SetupTotpMachineKey =
+  | ExtractMachineKey<SetupTotpBaseProps>
+  | CommonRouteMachineKey;
+
+export type SignInMachineKey =
+  | ExtractMachineKey<SignInBaseProps>
+  | CommonRouteMachineKey;
+
+export type SignUpMachineKey =
+  | ExtractMachineKey<SignUpBaseProps>
+  | CommonRouteMachineKey;
+
+export type VerifyUserMachineKey =
+  | ExtractMachineKey<VerifyUserProps>
+  | CommonRouteMachineKey;
+
+/**
+ * machine values with machine form event handlers keys mapped to UI form event handlers
+ */
+export type ConvertedMachineProps = Omit<
+  AuthenticatorMachineContext,
+  FormEventHandlerMachineKey
+> & {
+  handleBlur: AuthenticatorMachineContext['updateBlur'];
+  handleChange: AuthenticatorMachineContext['updateForm'];
+  handleSubmit: AuthenticatorMachineContext['submitForm'];
+};

package/src/Authenticator/hooks/useAuthenticatorRoute/useAuthenticatorRoute.ts

@@ -0,0 +1,126 @@
+import { useMemo } from 'react';
+import { useAuthenticator } from '../useAuthenticator';
+
+import {
+  UseAuthenticatorRoute,
+  UseAuthenticatorRouteDefault,
+  UseAuthenticatorRouteParams,
+} from './types';
+import {
+  getRouteMachineSelector,
+  routeSelector,
+  resolveConfirmResetPasswordRoute,
+  resolveConfirmSignInRoute,
+  resolveConfirmSignUpRoute,
+  resolveConfirmVerifyUserRoute,
+  resolveDefault,
+  resolveForceNewPasswordRoute,
+  resolveForgotPasswordRoute,
+  resolveSetupTotpRoute,
+  resolveSignInRoute,
+  resolveSignUpRoute,
+  resolveVerifyUserRoute,
+} from './utils';
+
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'ConfirmResetPassword'>;
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'ConfirmSignIn'>;
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'ConfirmSignUp'>;
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'ConfirmVerifyUser'>;
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'ForceNewPassword'>;
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'ForgotPassword'>;
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'SetupTotp'>;
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'SignIn'>;
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'SignUp'>;
+export default function useAuthenticatorRoute<FieldType>(
+  params: UseAuthenticatorRouteParams<FieldType>
+): UseAuthenticatorRoute<'VerifyUser'>;
+export default function useAuthenticatorRoute<FieldType>({
+  components,
+}: UseAuthenticatorRouteParams<FieldType>): UseAuthenticatorRouteDefault<FieldType> {
+  const { route } = useAuthenticator(routeSelector);
+
+  const routeMachineSelector = useMemo(
+    () => getRouteMachineSelector(route),
+    [route]
+  );
+
+  // `useAuthenticator` exposes both state machine (example: `toSignIn`) and non-state machine
+  // props (example: `getTotpSecretCode`). `routeSelector` specifies which state machine props
+  // should be returned for a specific route.
+  // Only state machine props specified by the current `routeSelector` will have their current value
+  // returned by `useAuthenticator`, non-machine props returned will always be the current value
+  const routeSelectorProps = useAuthenticator(routeMachineSelector);
+
+  const {
+    ConfirmResetPassword,
+    ConfirmSignIn,
+    ConfirmSignUp,
+    ConfirmVerifyUser,
+    ForceNewPassword,
+    ForgotPassword,
+    SetupTotp,
+    SignIn,
+    SignUp,
+    VerifyUser,
+  } = components;
+
+  switch (route) {
+    case 'confirmResetPassword': {
+      return resolveConfirmResetPasswordRoute(
+        ConfirmResetPassword,
+        routeSelectorProps
+      );
+    }
+    case 'confirmSignIn': {
+      return resolveConfirmSignInRoute(ConfirmSignIn, routeSelectorProps);
+    }
+    case 'confirmSignUp': {
+      return resolveConfirmSignUpRoute(ConfirmSignUp, routeSelectorProps);
+    }
+    case 'confirmVerifyUser': {
+      return resolveConfirmVerifyUserRoute(
+        ConfirmVerifyUser,
+        routeSelectorProps
+      );
+    }
+    case 'forceNewPassword': {
+      return resolveForceNewPasswordRoute(ForceNewPassword, routeSelectorProps);
+    }
+    case 'forgotPassword': {
+      return resolveForgotPasswordRoute(ForgotPassword, routeSelectorProps);
+    }
+    case 'setupTotp': {
+      return resolveSetupTotpRoute(SetupTotp, routeSelectorProps);
+    }
+    case 'signIn': {
+      return resolveSignInRoute(SignIn, routeSelectorProps);
+    }
+    case 'signUp': {
+      return resolveSignUpRoute(SignUp, routeSelectorProps);
+    }
+    case 'verifyUser': {
+      return resolveVerifyUserRoute(VerifyUser, routeSelectorProps);
+    }
+    default: {
+      return resolveDefault();
+    }
+  }
+}

package/src/Authenticator/hooks/useAuthenticatorRoute/utils.ts

@@ -0,0 +1,204 @@
+import { AuthenticatorRoute } from '@aws-amplify/ui';
+
+import { RenderNothing } from '../../../components';
+import {
+  AuthenticatorMachineContext,
+  AuthenticatorMachineContextKey,
+  AuthenticatorRouteComponentKey,
+  DefaultComponentType,
+  DefaultPropsType,
+  Defaults,
+} from '../types';
+
+import {
+  UseAuthenticator,
+  UseAuthenticatorSelector,
+} from '../useAuthenticator';
+import { isComponentRouteKey } from '../utils';
+import { MACHINE_PROP_KEYS, EVENT_HANDLER_KEY_MAP } from './constants';
+import {
+  ConvertedMachineProps,
+  FormEventHandlerMachineKey,
+  FormEventHandlerPropKey,
+  UseAuthenticatorRoute,
+  UseAuthenticatorRouteDefault,
+} from './types';
+
+// only select `route` from machine context
+export const routeSelector: UseAuthenticatorSelector = ({ route }) => [route];
+
+const createSelector =
+  (selectorKeys: AuthenticatorMachineContextKey[]): UseAuthenticatorSelector =>
+  (context) => {
+    const dependencies = selectorKeys.map((key) => context[key]);
+    // route should always be part of deps, so hook knows when route changes.
+    return [...dependencies, context.route];
+  };
+
+export const getRouteMachineSelector = (
+  route: AuthenticatorRoute
+): UseAuthenticatorSelector =>
+  isComponentRouteKey(route)
+    ? createSelector(MACHINE_PROP_KEYS[route])
+    : routeSelector;
+
+const isFormEventHandlerKey = (
+  key: AuthenticatorMachineContextKey
+): key is FormEventHandlerMachineKey =>
+  ['updateBlur', 'updateForm', 'submitForm'].includes(key);
+
+const convertEventHandlerKey = (
+  key: FormEventHandlerMachineKey
+): FormEventHandlerPropKey => EVENT_HANDLER_KEY_MAP[key];
+
+const getConvertedMachineProps = (
+  route: AuthenticatorRouteComponentKey,
+  context: AuthenticatorMachineContext
+): ConvertedMachineProps =>
+  MACHINE_PROP_KEYS[route].reduce(
+    (acc, key) => ({
+      ...acc,
+      [isFormEventHandlerKey(key) ? convertEventHandlerKey(key) : key]:
+        context[key],
+    }),
+    {} as ConvertedMachineProps
+  );
+
+export function resolveConfirmResetPasswordRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['ConfirmResetPassword'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'ConfirmResetPassword', FieldType> {
+  return {
+    Component,
+    props: {
+      ...Component,
+      ...getConvertedMachineProps('confirmResetPassword', props),
+    },
+  };
+}
+
+export function resolveConfirmSignInRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['ConfirmSignIn'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'ConfirmSignIn', FieldType> {
+  const { challengeName, ...machineProps } = getConvertedMachineProps(
+    'confirmSignIn',
+    props
+  );
+
+  return { Component, props: { ...Component, ...machineProps, challengeName } };
+}
+
+export function resolveConfirmSignUpRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['ConfirmSignUp'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'ConfirmSignUp', FieldType> {
+  return {
+    Component,
+    props: {
+      ...Component,
+      ...getConvertedMachineProps('confirmSignUp', props),
+    },
+  };
+}
+
+export function resolveConfirmVerifyUserRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['ConfirmVerifyUser'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'ConfirmVerifyUser', FieldType> {
+  return {
+    Component,
+    props: {
+      ...Component,
+      ...getConvertedMachineProps('confirmVerifyUser', props),
+    },
+  };
+}
+
+export function resolveForceNewPasswordRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['ForceNewPassword'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'ForceNewPassword', FieldType> {
+  return {
+    Component,
+    props: {
+      ...Component,
+      ...getConvertedMachineProps('forceNewPassword', props),
+    },
+  };
+}
+
+export function resolveForgotPasswordRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['ForgotPassword'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'ForgotPassword', FieldType> {
+  return {
+    Component,
+    props: {
+      ...Component,
+      ...getConvertedMachineProps('forgotPassword', props),
+    },
+  };
+}
+
+export function resolveSetupTotpRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['SetupTotp'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'SetupTotp', FieldType> {
+  return {
+    Component,
+    props: {
+      ...Component,
+      ...getConvertedMachineProps('setupTotp', props),
+    },
+  };
+}
+
+export function resolveSignInRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['SignIn'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'SignIn', FieldType> {
+  // default `hideSignUp` to false
+  const hideSignUp = false;
+
+  return {
+    Component,
+    props: {
+      ...Component,
+      ...getConvertedMachineProps('signIn', props),
+      hideSignUp,
+    },
+  };
+}
+
+export function resolveSignUpRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['SignUp'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'SignUp', FieldType> {
+  return {
+    Component,
+    props: { ...Component, ...getConvertedMachineProps('signUp', props) },
+  };
+}
+
+export function resolveVerifyUserRoute<FieldType = {}>(
+  Component: Defaults<FieldType>['VerifyUser'],
+  props: UseAuthenticator
+): UseAuthenticatorRoute<'VerifyUser', FieldType> {
+  return {
+    Component,
+    props: {
+      ...Component,
+      ...getConvertedMachineProps('verifyUser', props),
+    },
+  };
+}
+
+export function resolveDefault<
+  FieldType = {},
+>(): UseAuthenticatorRouteDefault<FieldType> {
+  return {
+    Component: RenderNothing as DefaultComponentType<FieldType>,
+    props: {} as DefaultPropsType<FieldType>,
+  };
+}

package/src/Authenticator/hooks/utils.ts

@@ -0,0 +1,38 @@
+import { AuthenticatorRoute } from '@aws-amplify/ui';
+
+import { COMPONENT_ROUTE_KEYS, COMPONENT_ROUTE_NAMES } from './constants';
+import { AuthenticatorRouteComponentKey, Defaults, Overrides } from './types';
+
+export const isComponentRouteKey = (
+  route: AuthenticatorRoute
+): route is AuthenticatorRouteComponentKey =>
+  COMPONENT_ROUTE_KEYS.some((componentRoute) => componentRoute === route);
+
+export function resolveAuthenticatorComponents<FieldType>(
+  defaults: Defaults<FieldType>,
+  overrides?: Overrides<FieldType>
+): Defaults<FieldType> {
+  if (!overrides) {
+    return defaults;
+  }
+
+  return COMPONENT_ROUTE_NAMES.reduce((components, route) => {
+    const Default = defaults[route];
+    const Override = overrides[route];
+
+    if (typeof Override !== 'function') {
+      return { ...components, [route]: Default };
+    }
+
+    const { Footer, FormFields, Header } = Default;
+
+    // cast to allow assigning of component slots
+    const Component = Override as typeof Default;
+
+    Component.Footer = Footer;
+    Component.FormFields = FormFields;
+    Component.Header = Header;
+
+    return { ...components, [route]: Component };
+  }, {} as Defaults<FieldType>);
+}

package/src/Authenticator/index.ts

@@ -0,0 +1,23 @@
+export { AuthenticatorProvider, AuthenticatorContext } from './context';
+export {
+  resolveAuthenticatorComponents,
+  useAuthenticator,
+  useAuthenticatorRoute,
+  UseAuthenticator,
+  useAuthenticatorInitMachine,
+  UseAuthenticatorRoute,
+} from './hooks';
+export {
+  Overrides as AuthenticatorComponentOverrides,
+  Defaults as AuthenticatorComponentDefaults,
+  DefaultProps as AuthenticatorComponentDefaultProps,
+  FooterComponent as AuthenticatorFooterComponent,
+  FormFieldsComponent as AuthenticatorFormFieldsComponent,
+  HeaderComponent as AuthenticatorHeaderComponent,
+  isComponentRouteKey as isAuthenticatorComponentRouteKey,
+  AuthenticatorRouteComponentKey,
+  AuthenticatorRouteComponentName,
+  AuthenticatorLegacyField,
+  AuthenticatorMachineContext,
+  FormFieldsComponent,
+} from './hooks';

package/src/components/FormCore/FormProvider.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  useForm as useReactHookForm,
+  FormProvider as ReactHookFormProvider,
+} from 'react-hook-form';
+
+import { FormValues, FormHandle, FormProviderProps } from './types';
+
+const DEFAULT_MODE = 'onTouched';
+
+const FormProvider = React.forwardRef<
+  FormHandle,
+  FormProviderProps<FormValues>
+>(function FormProvider<Values extends FormValues>(
+  { children, defaultValues, mode = DEFAULT_MODE }: FormProviderProps<Values>,
+  ref: React.ForwardedRef<FormHandle<Values>>
+) {
+  const formProviderProps = useReactHookForm<Values>({
+    defaultValues,
+    mode,
+  });
+
+  const { getValues, reset } = formProviderProps;
+  React.useImperativeHandle(
+    ref,
+    () => ({ getValues, reset: () => reset(defaultValues) }),
+    [defaultValues, getValues, reset]
+  );
+
+  return (
+    <ReactHookFormProvider {...formProviderProps}>
+      {children}
+    </ReactHookFormProvider>
+  );
+});
+
+export default FormProvider;

package/src/components/FormCore/index.ts

@@ -0,0 +1,13 @@
+export {
+  FormProviderProps,
+  FormValues,
+  FormHandle,
+  SubmitHandler,
+  UseForm,
+  Validate,
+  Validator,
+} from './types';
+export { default as useField } from './useField';
+export { default as useForm } from './useForm';
+export { default as FormProvider } from './FormProvider';
+export { default as withFormProvider } from './withFormProvider';