From 279b3852cf579e10fab225536aa54850ab3a9424 Mon Sep 17 00:00:00 2001 From: Caleb Pollman Date: Tue, 11 Jul 2023 08:04:11 -0700 Subject: [PATCH] fix(rna): expose TS types of RNA static components (#4215) --- .changeset/four-items-count.md | 5 + examples/react-native/ios/Podfile.lock | 4 +- .../ConfirmResetPassword.tsx | 6 +- .../Defaults/ConfirmSignIn/ConfirmSignIn.tsx | 6 +- .../Defaults/ConfirmSignUp/ConfirmSignUp.tsx | 6 +- .../ConfirmVerifyUser/ConfirmVerifyUser.tsx | 6 +- .../ForceNewPassword/ForceNewPassword.tsx | 6 +- .../Defaults/ResetPassword/ResetPassword.tsx | 6 +- .../Defaults/SetupTOTP/SetupTOTP.tsx | 6 +- .../Authenticator/Defaults/SignIn/SignIn.tsx | 6 +- .../Authenticator/Defaults/SignUp/SignUp.tsx | 6 +- .../Defaults/VerifyUser/VerifyUser.tsx | 6 +- .../src/Authenticator/Defaults/types.ts | 112 ++++++++++-------- .../common/DefaultContent/types.ts | 5 +- .../DefaultRadioFormFields.tsx | 14 ++- .../DefaultTextFormFields.tsx | 17 +-- .../common/DefaultFormFields/types.ts | 20 +++- 17 files changed, 134 insertions(+), 103 deletions(-) create mode 100644 .changeset/four-items-count.md diff --git a/.changeset/four-items-count.md b/.changeset/four-items-count.md new file mode 100644 index 00000000000..8a993d4acd3 --- /dev/null +++ b/.changeset/four-items-count.md @@ -0,0 +1,5 @@ +--- +"@aws-amplify/ui-react-native": patch +--- + +fix(rna): expose TS types of RNA static components diff --git a/examples/react-native/ios/Podfile.lock b/examples/react-native/ios/Podfile.lock index 621ea4729d9..72c5d37333e 100644 --- a/examples/react-native/ios/Podfile.lock +++ b/examples/react-native/ios/Podfile.lock @@ -344,7 +344,7 @@ DEPENDENCIES: - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) - React-logger (from `../node_modules/react-native/ReactCommon/logger`) - - react-native-get-random-values (from `../../../node_modules/react-native-get-random-values`) + - react-native-get-random-values (from `../node_modules/react-native-get-random-values`) - react-native-launch-arguments (from `../node_modules/react-native-launch-arguments`) - "react-native-netinfo (from `../../../node_modules/@react-native-community/netinfo`)" - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) @@ -410,7 +410,7 @@ EXTERNAL SOURCES: React-logger: :path: "../node_modules/react-native/ReactCommon/logger" react-native-get-random-values: - :path: "../../../node_modules/react-native-get-random-values" + :path: "../node_modules/react-native-get-random-values" react-native-launch-arguments: :path: "../node_modules/react-native-launch-arguments" react-native-netinfo: diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx index c8941c0d83f..86a7ab382a0 100644 --- a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx +++ b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx @@ -9,7 +9,7 @@ import { } from '../../common'; import { useFieldValues } from '../../hooks'; -import { DefaultConfirmResetPasswordComponent } from '../types'; +import { DefaultConfirmResetPasswordProps } from '../types'; const COMPONENT_NAME = 'ConfirmResetPassword'; @@ -20,7 +20,7 @@ const { getResendCodeText, } = authenticatorTextUtil; -const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({ +const ConfirmResetPassword = ({ fields, handleBlur, handleChange, @@ -29,7 +29,7 @@ const ConfirmResetPassword: DefaultConfirmResetPasswordComponent = ({ isPending, resendCode, ...rest -}) => { +}: DefaultConfirmResetPasswordProps): JSX.Element => { const { disableFormSubmit, fields: fieldsWithHandlers, diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx index 6278c20cf1f..3b09d38cea4 100644 --- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx +++ b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx @@ -9,7 +9,7 @@ import { } from '../../common'; import { useFieldValues } from '../../hooks'; -import { DefaultConfirmSignInComponent } from '../types'; +import { DefaultConfirmSignInProps } from '../types'; const COMPONENT_NAME = 'ConfirmSignIn'; @@ -20,7 +20,7 @@ const { getConfirmingText, } = authenticatorTextUtil; -const ConfirmSignIn: DefaultConfirmSignInComponent = ({ +const ConfirmSignIn = ({ challengeName, fields, handleBlur, @@ -29,7 +29,7 @@ const ConfirmSignIn: DefaultConfirmSignInComponent = ({ isPending, toSignIn, ...rest -}) => { +}: DefaultConfirmSignInProps): JSX.Element => { const { disableFormSubmit: disabled, fields: fieldsWithHandlers, diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx index 31ebc0fd9e7..0f3085c05df 100644 --- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx +++ b/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx @@ -9,7 +9,7 @@ import { } from '../../common'; import { useFieldValues } from '../../hooks'; -import { DefaultConfirmSignUpComponent } from '../types'; +import { DefaultConfirmSignUpProps } from '../types'; const COMPONENT_NAME = 'ConfirmSignUp'; @@ -21,7 +21,7 @@ const { getResendCodeText, } = authenticatorTextUtil; -const ConfirmSignUp: DefaultConfirmSignUpComponent = ({ +const ConfirmSignUp = ({ codeDeliveryDetails, fields, handleBlur, @@ -30,7 +30,7 @@ const ConfirmSignUp: DefaultConfirmSignUpComponent = ({ isPending, resendCode, ...rest -}) => { +}: DefaultConfirmSignUpProps): JSX.Element => { const { disableFormSubmit: disabled, fields: fieldsWithHandlers, diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx index eac46cba65f..24a3d9bd4f6 100644 --- a/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx +++ b/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx @@ -9,7 +9,7 @@ import { } from '../../common'; import { useFieldValues } from '../../hooks'; -import { DefaultConfirmVerifyUserComponent } from '../types'; +import { DefaultConfirmVerifyUserProps } from '../types'; const COMPONENT_NAME = 'ConfirmVerifyUser'; @@ -20,7 +20,7 @@ const { getSubmittingText, } = authenticatorTextUtil; -const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({ +const ConfirmVerifyUser = ({ fields, handleBlur, handleChange, @@ -28,7 +28,7 @@ const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({ isPending, skipVerification, ...rest -}) => { +}: DefaultConfirmVerifyUserProps): JSX.Element => { const { disableFormSubmit: disabled, fields: fieldsWithHandlers, diff --git a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx index fc83bb3f019..0d37641d313 100644 --- a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx +++ b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx @@ -9,14 +9,14 @@ import { } from '../../common'; import { useFieldValues } from '../../hooks'; -import { DefaultForceNewPasswordComponent } from '../types'; +import { DefaultForceNewPasswordProps } from '../types'; const COMPONENT_NAME = 'ForceNewPassword'; const { getChangePasswordText, getChangingText, getBackToSignInText } = authenticatorTextUtil; -const ForceNewPassword: DefaultForceNewPasswordComponent = ({ +const ForceNewPassword = ({ fields, handleBlur, handleChange, @@ -25,7 +25,7 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({ isPending, toSignIn, ...rest -}) => { +}: DefaultForceNewPasswordProps): JSX.Element => { const { disableFormSubmit, fields: fieldsWithHandlers, diff --git a/packages/react-native/src/Authenticator/Defaults/ResetPassword/ResetPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ResetPassword/ResetPassword.tsx index af35d5a7ba0..cccbeab42f3 100644 --- a/packages/react-native/src/Authenticator/Defaults/ResetPassword/ResetPassword.tsx +++ b/packages/react-native/src/Authenticator/Defaults/ResetPassword/ResetPassword.tsx @@ -9,7 +9,7 @@ import { } from '../../common'; import { useFieldValues } from '../../hooks'; -import { DefaultResetPasswordComponent } from '../types'; +import { DefaultResetPasswordProps } from '../types'; const COMPONENT_NAME = 'ResetPassword'; const { @@ -19,7 +19,7 @@ const { getBackToSignInText, } = authenticatorTextUtil; -const ResetPassword: DefaultResetPasswordComponent = ({ +const ResetPassword = ({ fields, handleBlur, handleChange, @@ -27,7 +27,7 @@ const ResetPassword: DefaultResetPasswordComponent = ({ isPending, toSignIn, ...rest -}) => { +}: DefaultResetPasswordProps): JSX.Element => { const { disableFormSubmit: disabled, fields: fieldsWithHandlers, diff --git a/packages/react-native/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx b/packages/react-native/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx index fcbca7737dc..89d38d5c14a 100644 --- a/packages/react-native/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx +++ b/packages/react-native/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx @@ -12,7 +12,7 @@ import { } from '../../common'; import { useFieldValues } from '../../hooks'; -import { DefaultSetupTOTPComponent } from '../types'; +import { DefaultSetupTOTPProps } from '../types'; import { styles } from './styles'; const COMPONENT_NAME = 'SetupTOTP'; @@ -25,7 +25,7 @@ const { getSetupTOTPInstructionsText, } = authenticatorTextUtil; -const SetupTOTP: DefaultSetupTOTPComponent = ({ +const SetupTOTP = ({ fields, handleBlur, handleChange, @@ -34,7 +34,7 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({ toSignIn, totpSecretCode, ...rest -}) => { +}: DefaultSetupTOTPProps): JSX.Element => { const { disableFormSubmit: disabled, fields: fieldsWithHandlers, diff --git a/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx b/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx index 9a1052b87c3..850299b2c44 100644 --- a/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx +++ b/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx @@ -9,11 +9,11 @@ import { } from '../../common'; import { useFieldValues } from '../../hooks'; -import { DefaultSignInComponent } from '../types'; +import { DefaultSignInProps } from '../types'; const COMPONENT_NAME = 'SignIn'; -const SignIn: DefaultSignInComponent = ({ +const SignIn = ({ fields, handleBlur, handleChange, @@ -22,7 +22,7 @@ const SignIn: DefaultSignInComponent = ({ toResetPassword, toSignUp, ...rest -}) => { +}: DefaultSignInProps): JSX.Element => { const { getSignInTabText, getSignInText, diff --git a/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx b/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx index cdab451c9cb..5d75a181677 100644 --- a/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx +++ b/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx @@ -9,7 +9,7 @@ import { } from '../../common'; import { useFieldValues } from '../../hooks'; -import { DefaultSignUpComponent } from '../types'; +import { DefaultSignUpProps } from '../types'; const COMPONENT_NAME = 'SignUp'; @@ -20,7 +20,7 @@ const { getSignUpTabText, } = authenticatorTextUtil; -const SignUp: DefaultSignUpComponent = ({ +const SignUp = ({ fields, handleBlur, handleChange, @@ -30,7 +30,7 @@ const SignUp: DefaultSignUpComponent = ({ isPending, toSignIn, ...rest -}) => { +}: DefaultSignUpProps): JSX.Element => { const { disableFormSubmit, fields: fieldsWithHandlers, diff --git a/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx b/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx index 591ebd4caa4..f2c690f9757 100644 --- a/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx +++ b/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx @@ -8,7 +8,7 @@ import { DefaultRadioFormFields, } from '../../common'; import { useFieldValues } from '../../hooks'; -import { DefaultVerifyUserComponent } from '../types'; +import { DefaultVerifyUserProps } from '../types'; const COMPONENT_NAME = 'VerifyUser'; @@ -19,14 +19,14 @@ const { getAccountRecoveryInfoText, } = authenticatorTextUtil; -const VerifyUser: DefaultVerifyUserComponent = ({ +const VerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, skipVerification, ...rest -}) => { +}: DefaultVerifyUserProps): JSX.Element => { const { disableFormSubmit: disabled, fields: fieldsWithHandlers, diff --git a/packages/react-native/src/Authenticator/Defaults/types.ts b/packages/react-native/src/Authenticator/Defaults/types.ts index bf29d96ad93..0dfffab531c 100644 --- a/packages/react-native/src/Authenticator/Defaults/types.ts +++ b/packages/react-native/src/Authenticator/Defaults/types.ts @@ -21,55 +21,69 @@ export type DefaultComponents< Props = {} > = AuthenticatorComponentDefaults; -export type DefaultConfirmResetPasswordComponent = DefaultComponents< - TextFieldOptionsType, - { style?: ConfirmResetPasswordStyle } ->['ConfirmResetPassword']; - -export type DefaultConfirmSignInComponent = DefaultComponents< - TextFieldOptionsType, - { style?: ConfirmSignInStyle } ->['ConfirmSignIn']; - -export type DefaultConfirmSignUpComponent = DefaultComponents< - TextFieldOptionsType, - { style?: ConfirmSignUpStyle } ->['ConfirmSignUp']; - -export type DefaultConfirmVerifyUserComponent = DefaultComponents< - TextFieldOptionsType, - { style?: ConfirmVerifyUserStyle } ->['ConfirmVerifyUser']; - -export type DefaultForceNewPasswordComponent = DefaultComponents< - TextFieldOptionsType, - { style?: ForceNewPasswordStyle } ->['ForceNewPassword']; - -export type DefaultResetPasswordComponent = DefaultComponents< - TextFieldOptionsType, - { style?: ResetPasswordStyle } ->['ResetPassword']; - -export type DefaultSetupTOTPComponent = DefaultComponents< - TextFieldOptionsType, - { style?: SetupTOTPStyle } ->['SetupTOTP']; - -export type DefaultSignInComponent = DefaultComponents< - TextFieldOptionsType, - { style?: SignInStyle } ->['SignIn']; - -export type DefaultSignUpComponent = DefaultComponents< - TextFieldOptionsType, - { style?: SignUpStyle } ->['SignUp']; - -export type DefaultVerifyUserComponent = DefaultComponents< - RadioFieldOptions, - { style?: VerifyUserStyle } ->['VerifyUser']; +export type DefaultConfirmResetPasswordProps = React.ComponentPropsWithoutRef< + DefaultComponents< + TextFieldOptionsType, + { style?: ConfirmResetPasswordStyle } + >['ConfirmResetPassword'] +>; + +export type DefaultConfirmSignInProps = React.ComponentPropsWithoutRef< + DefaultComponents< + TextFieldOptionsType, + { style?: ConfirmSignInStyle } + >['ConfirmSignIn'] +>; + +export type DefaultConfirmSignUpProps = React.ComponentPropsWithoutRef< + DefaultComponents< + TextFieldOptionsType, + { style?: ConfirmSignUpStyle } + >['ConfirmSignUp'] +>; + +export type DefaultConfirmVerifyUserProps = React.ComponentPropsWithoutRef< + DefaultComponents< + TextFieldOptionsType, + { style?: ConfirmVerifyUserStyle } + >['ConfirmVerifyUser'] +>; + +export type DefaultForceNewPasswordProps = React.ComponentPropsWithoutRef< + DefaultComponents< + TextFieldOptionsType, + { style?: ForceNewPasswordStyle } + >['ForceNewPassword'] +>; + +export type DefaultResetPasswordProps = React.ComponentPropsWithoutRef< + DefaultComponents< + TextFieldOptionsType, + { style?: ResetPasswordStyle } + >['ResetPassword'] +>; + +export type DefaultSetupTOTPProps = React.ComponentPropsWithoutRef< + DefaultComponents< + TextFieldOptionsType, + { style?: SetupTOTPStyle } + >['SetupTOTP'] +>; + +export type DefaultSignInProps = React.ComponentPropsWithoutRef< + DefaultComponents['SignIn'] +>; + +export type DefaultSignUpProps = React.ComponentPropsWithoutRef< + DefaultComponents['SignUp'] +>; + +export type DefaultVerifyUserProps = React.ComponentPropsWithoutRef< + DefaultComponents< + RadioFieldOptions, + { style?: VerifyUserStyle } + >['VerifyUser'] +>; /** * Custom Authenticator components diff --git a/packages/react-native/src/Authenticator/common/DefaultContent/types.ts b/packages/react-native/src/Authenticator/common/DefaultContent/types.ts index 994488386e7..a71031b9390 100644 --- a/packages/react-native/src/Authenticator/common/DefaultContent/types.ts +++ b/packages/react-native/src/Authenticator/common/DefaultContent/types.ts @@ -60,10 +60,7 @@ export type DefaultContentProps< | TextFieldOptionsType | RadioFieldOptions | unknown = unknown -> = Pick< - DefaultComponentProps, - 'error' | 'Footer' | 'isPending' -> & { +> = Pick, 'error' | 'isPending'> & { buttons: DefaultButtons; body?: React.ReactNode; fields: FieldsType[]; diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx index e86bfdc8d2f..e91a671a4de 100644 --- a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx +++ b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { censorAllButFirstAndLast, censorPhoneNumber } from '@aws-amplify/ui'; import { Radio, RadioGroup } from '../../../primitives'; -import { DefaultRadioFormFieldsComponent } from './types'; +import { DefaultRadioFormFieldsProps } from './types'; const censorContactInformation = (name: string, value: string): string => { let censoredVal = value; @@ -17,16 +17,16 @@ const censorContactInformation = (name: string, value: string): string => { return censoredVal; }; -const DefaultFormFields: DefaultRadioFormFieldsComponent = ({ +const DefaultRadioFormFields = ({ fields, - isPending, fieldContainerStyle, fieldLabelStyle, + isPending, style, -}) => { +}: DefaultRadioFormFieldsProps): JSX.Element => { return ( - {fields.map(({ name, value, ...props }) => ( + {(fields ?? []).map(({ name, value, ...props }) => ( { - const formFields = fields.map(({ name, type, ...field }) => { +}: DefaultTextFormFieldsProps): JSX.Element => { + const formFields = (fields ?? []).map(({ name, type, ...field }) => { const errors = validationErrors ? getErrors(validationErrors?.[name]) : []; const hasError = errors?.length > 0; @@ -44,6 +47,6 @@ const DefaultTextFormFields: DefaultTextFormFieldsComponent = ({ return {formFields}; }; -DefaultTextFormFields.displayName = 'DefaultTextFormFields'; +DefaultTextFormFields.displayName = 'FormFields'; export default DefaultTextFormFields; diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/types.ts b/packages/react-native/src/Authenticator/common/DefaultFormFields/types.ts index 7ed7acf4809..4a506d5ac82 100644 --- a/packages/react-native/src/Authenticator/common/DefaultFormFields/types.ts +++ b/packages/react-native/src/Authenticator/common/DefaultFormFields/types.ts @@ -1,5 +1,8 @@ import { StyleProp, TextStyle, ViewStyle } from 'react-native'; -import { AuthenticatorFormFieldsComponent } from '@aws-amplify/ui-react-core'; +import { + AuthenticatorFormFieldsComponent, + UseAuthenticator, +} from '@aws-amplify/ui-react-core'; import { RadioFieldOptions, TextFieldOptionsType } from '../../hooks'; @@ -25,8 +28,15 @@ export interface DefaultFormFieldsStyle { export type DefaultFormFieldsComponent = AuthenticatorFormFieldsComponent; -export type DefaultTextFormFieldsComponent = - DefaultFormFieldsComponent; +interface FormFieldsProps extends DefaultFormFieldsStyle { + isPending?: UseAuthenticator['isPending']; + validationErrors?: UseAuthenticator['validationErrors']; +} + +export interface DefaultTextFormFieldsProps extends FormFieldsProps { + fields?: TextFieldOptionsType[]; +} -export type DefaultRadioFormFieldsComponent = - DefaultFormFieldsComponent; +export interface DefaultRadioFormFieldsProps extends FormFieldsProps { + fields?: RadioFieldOptions[]; +}