From b5918e4110f6298250cffe95433ee3c6a33ad85d Mon Sep 17 00:00:00 2001 From: priyankakmEaton Date: Tue, 23 Apr 2024 12:58:04 +0530 Subject: [PATCH 1/7] update js docs --- .../ChangePasswordDialog.tsx | 16 +---------- .../ChangePasswordDialogBase.tsx | 17 +----------- .../src/components/Dialog/BasicDialog.tsx | 20 ++++++-------- .../PasswordRequirements.tsx | 3 +-- .../PasswordRequirementsCheck.tsx | 3 +-- .../RegistrationWorkflow.tsx | 19 ++++++------- .../components/SetPassword/SetPassword.tsx | 13 +-------- .../src/components/Spinner/Spinner.tsx | 2 +- .../components/WorkflowCard/WorkflowCard.tsx | 17 ++++++------ .../WorkflowCard/WorkflowCardActions.tsx | 27 ++++++------------- .../WorkflowCard/WorkflowCardInstructions.tsx | 3 +-- .../AccountDetailsScreen.tsx | 14 +--------- .../AccountDetailsScreenBase.tsx | 14 +--------- 13 files changed, 41 insertions(+), 127 deletions(-) diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx index c5a95da6..84cfda08 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx @@ -10,21 +10,7 @@ import { useTranslation } from 'react-i18next'; * Component that renders a dialog with textField to enter current password and a change password form with a new password and confirm password inputs. * It includes callbacks so you can respond to changes in the inputs. * - * @param dialogTitle title to display in the dialog - * @param dialogDescription description to display in the dialog - * @param currentPasswordLabel label to display for the current password field - * @param previousLabel label to display for the previous button - * @param nextLabel label to display for the next button - * @param currentPasswordChange called when the current password field changes - * @param enableButton boolean to enable and disable the button - * @param onFinish function called when the button is clicked on success screen - * @param onSubmit Callback function to call when the form is submitted - * @param onPrevious called when the previous button is clicked - * @param loading boolean that indicates whether the loading spinner should be displayed - * @param currentPasswordTextFieldProps props to pass to the current password field. - * @param showSuccessScreen boolean that determines whether to show the success screen or not - * @param slots used for ChangePasswordDialog SuccessScreen props - * @param slotProps props that will be passed to the SuccessScreen component + * @param {ChangePasswordDialogProps} props - props of changePassword dailog * * @category Component */ diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx index 708a7664..8723227a 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx @@ -22,22 +22,7 @@ import { SuccessScreenBase, SuccessScreenProps } from '../../screens'; * Component that renders a dialog with textField to enter current password and a change password form with a new password and confirm password inputs. * It includes callbacks so you can respond to changes in the inputs. * - * @param dialogTitle title to display in the dialog - * @param dialogDescription description to display in the dialog - * @param currentPasswordLabel label to display for the current password field - * @param previousLabel label to display for the previous button - * @param nextLabel label to display for the next button - * @param currentPasswordChange called when the current password field changes - * @param enableButton boolean to enable and disable the button - * @param onFinish function called when the button is clicked on success screen - * @param onSubmit callback function to call when the form is submitted - * @param onPrevious called when the previous button is clicked - * @param sx styles passed to the underlying root component - * @param loading boolean that indicates whether the loading spinner should be displayed - * @param currentPasswordTextFieldProps props to pass to the current password field. - * @param showSuccessScreen boolean that determines whether to show the success screen or not - * @param slots used for ChangePasswordDialog SuccessScreen props - * @param slotProps props that will be passed to the SuccessScreen component + * @param {ChangePasswordDialogProps} props - props of changePassword dailog * * @category Component */ diff --git a/login-workflow/src/components/Dialog/BasicDialog.tsx b/login-workflow/src/components/Dialog/BasicDialog.tsx index 482a90eb..f7ce4fb5 100644 --- a/login-workflow/src/components/Dialog/BasicDialog.tsx +++ b/login-workflow/src/components/Dialog/BasicDialog.tsx @@ -6,18 +6,6 @@ import DialogTitle from '@mui/material/DialogTitle'; import DialogContent from '@mui/material/DialogContent'; import DialogActions from '@mui/material/DialogActions'; -/** - * Component that renders a basic dialog with a title, body description, and a close button. - * - * @param title to show text in the title - * @param body text to show in the body - * @param onClose function to call when the close button is clicked - * @param props all other props will be spread to the underlying Dialog component - * @param dismissButtonText text to show in the close button - * - * @category Component - */ - export type BasicDialogProps = Omit & { /** * The title for the screen @@ -47,6 +35,14 @@ export type BasicDialogProps = Omit & { open?: boolean; }; +/** + * Component that renders a basic dialog with a title, body description, and a close button. + * + * @param {BasicDialogProps} props - basic props of Dialog + * + * @category Component + */ + export const BasicDialog: React.FC>> = (props) => { const { title, body, dismissButtonText, open = false, sx, ...dialogProps } = props; diff --git a/login-workflow/src/components/PasswordRequirements/PasswordRequirements.tsx b/login-workflow/src/components/PasswordRequirements/PasswordRequirements.tsx index a64f1eb6..ecf82a9b 100644 --- a/login-workflow/src/components/PasswordRequirements/PasswordRequirements.tsx +++ b/login-workflow/src/components/PasswordRequirements/PasswordRequirements.tsx @@ -20,8 +20,7 @@ export type PasswordRequirementsProps = BoxProps & { /** * Component that renders all of the password requirement line items with check indicators. * - * @param passwordText The string to conduct the complexity checks against - * @param passwordRequirements Optional requirements to set password + * @param {PasswordRequirementsProps} props - props of passwordRequirement component * * @category Component */ diff --git a/login-workflow/src/components/PasswordRequirements/PasswordRequirementsCheck.tsx b/login-workflow/src/components/PasswordRequirements/PasswordRequirementsCheck.tsx index da969c75..2a87aa51 100644 --- a/login-workflow/src/components/PasswordRequirements/PasswordRequirementsCheck.tsx +++ b/login-workflow/src/components/PasswordRequirements/PasswordRequirementsCheck.tsx @@ -18,8 +18,7 @@ export type PasswordRequirementsCheckProps = { /** * Component that renders an individual password complexity line item with check indicator. * - * @param isChecked True if the line item should have a blue check (false for gray) - * @param label text to display beside the check icon + * @param {PasswordRequirementsCheckProps} props - props of PasswordRequirementsCheck component * * @category Component */ diff --git a/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx b/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx index 93f9e2f6..17afbd2c 100644 --- a/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx +++ b/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx @@ -13,17 +13,6 @@ import { parseQueryString } from '../../utils'; import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; import ErrorManager, { ErrorManagerProps } from '../Error/ErrorManager'; -/** - * Component that contain the registration workflow and index of screens. - * - * @param initialScreenIndex initial screen index to start the registration workflow from - * @param successScreen success screen to display upon successful registration - * @param isInviteRegistration boolean when true verifies validateUserRegistrationRequest for verifyCode - * @param existingAccountSuccessScreen component that displays the success screen - * - * @category Component - */ - export type RegistrationWorkflowProps = { /** * The initial screen index to start the registration workflow from @@ -53,6 +42,14 @@ export type RegistrationWorkflowProps = { errorDisplayConfig?: ErrorManagerProps; }; +/** + * Component that contain the registration workflow and index of screens. + * + * @param {RegistrationWorkflowProps} props - props of registrationworkflow component + * + * @category Component + */ + export const RegistrationWorkflow: React.FC> = (props) => { const { errorDisplayConfig: registrationWorkflowErrorConfig } = props; const [isAccountExist, setIsAccountExist] = useState(false); diff --git a/login-workflow/src/components/SetPassword/SetPassword.tsx b/login-workflow/src/components/SetPassword/SetPassword.tsx index e0d08b7d..4cc5f76a 100644 --- a/login-workflow/src/components/SetPassword/SetPassword.tsx +++ b/login-workflow/src/components/SetPassword/SetPassword.tsx @@ -8,18 +8,7 @@ import { PasswordRequirements } from '../PasswordRequirements'; * Component that renders a change password form with a new password and confirm password inputs. * It includes callbacks so you can respond to changes in the inputs. * - * @param onPasswordChange called when the new password or confirm new password fields value changes - * @param initialNewPasswordValue initial value for the new password field - * @param initialConfirmPasswordValue initial value for the confirm password field - * @param passwordRequirements requirements to set password - * @param newPasswordLabel label for the new password field (default = 'Password') - * @param confirmPasswordLabel label for the confirm password field (default = 'Confirm') - * @param passwordRef ref to forward to the password input. - * @param confirmRef ref to forward to the confirm password input. - * @param passwordNotMatchError text for showing message when passwords do not match. - * @param onSubmit function to call when the form is submitted - * @param passwordTextFieldProps props to pass to the password field. - * @param confirmPasswordTextFieldProps props to pass to the confirm password field. + * @param {SetPasswordProps} props - props of setPassword component * * @category Component */ diff --git a/login-workflow/src/components/Spinner/Spinner.tsx b/login-workflow/src/components/Spinner/Spinner.tsx index 7bd82f69..65132b8c 100644 --- a/login-workflow/src/components/Spinner/Spinner.tsx +++ b/login-workflow/src/components/Spinner/Spinner.tsx @@ -11,7 +11,7 @@ export type SpinnerProps = BoxProps & { /** * Component that renders a indeterminate circular progress spinner atop a semi-transparent white background. * - * @param visible True if the spinner should be displayed, false to render nothing + * @param {SpinnerProps} props - props of spinner component * * @category Component */ diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCard.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCard.tsx index 69cbab3e..20ab141c 100644 --- a/login-workflow/src/components/WorkflowCard/WorkflowCard.tsx +++ b/login-workflow/src/components/WorkflowCard/WorkflowCard.tsx @@ -7,15 +7,6 @@ import { WorkflowCardBaseProps } from './WorkflowCard.types'; import { getWorkflowCardUtilityClass, WorkflowCardClassKey } from './Utility'; import { unstable_composeClasses as composeClasses } from '@mui/base'; -/** - * Component that renders the workflow card that is used for all screen components. - * - * @param loading boolean value for isLoading - * @param backgroundImage to display card background - * - * @category Component - */ - const useUtilityClasses = (ownerState: WorkflowCardBaseProps): Record => { const { classes } = ownerState; @@ -27,6 +18,14 @@ const useUtilityClasses = (ownerState: WorkflowCardBaseProps): Record = (props) => { const { loading, backgroundImage, sx, children, ...otherBoxProps } = props; const defaultClasses = useUtilityClasses(props); diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCardActions.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCardActions.tsx index 059d4bc1..f7af3846 100644 --- a/login-workflow/src/components/WorkflowCard/WorkflowCardActions.tsx +++ b/login-workflow/src/components/WorkflowCard/WorkflowCardActions.tsx @@ -8,25 +8,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base'; import Divider from '@mui/material/Divider'; import Box from '@mui/material/Box'; -/** - * Component that renders the workflow card action elements used for all screen components. - * - * @param divider boolean value to display a divider above workflow card action buttons - * @param canGoNext boolean or function that indicates whether the next button should be enabled - * @param canGoPrevious boolean or function that indicates whether the previous button should be enabled - * @param showPrevious boolean that indicates whether the previous button should be displayed - * @param showNext boolean that indicates whether the next button should be displayed - * @param previousLabel label to display for the previous button - * @param nextLabel label to display for the next button - * @param onPrevious function called when the previous button is clicked - * @param onNext function that is called when the next button is clicked - * @param currentStep current step in the registration workflow - * @param totalSteps total number of steps in the registration workflow - * @param fullWidthButton boolean that indicates whether a button should be full width - * - * @category Component - */ - const useUtilityClasses = (ownerState: WorkflowCardActionsProps): Record => { const { classes } = ownerState; @@ -40,6 +21,14 @@ const useUtilityClasses = (ownerState: WorkflowCardActionsProps): Record = (props) => { const { divider = true, diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx index 195d1966..fc859ac7 100644 --- a/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx +++ b/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx @@ -6,8 +6,7 @@ import { WorkflowCardInstructionProps } from './WorkflowCard.types'; /** * Component that renders the instructions content for the workflow card. * - * @param instructions text to display as instructions - * @param divider whether or not to show a divider below the instructions + * @param {WorkflowCardInstructionProps} props - props of workflowCardInstruction * * @category Component */ diff --git a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx index b011c907..f2ebc02c 100644 --- a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx +++ b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx @@ -8,19 +8,7 @@ import { useTranslation } from 'react-i18next'; * Component renders a screen with account details information for support with the application. * Contact information is pulled from the context passed into the workflow. * - * @param firstNameLabel label for the first name text field - * @param initialFirstName initial value for the first name text field - * @param firstNameValidator function that validates the first name text field - * @param firstNameTextFieldProps props to pass to the first name field - * @param lastNameLabel label for the last name text field - * @param initialLastName initial value for the last name text field - * @param lastNameValidator function that validates the last name text field - * @param lastNameTextFieldProps props to pass to the last name field - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * @param errorDisplayConfig configuration for customizing how errors are displayed + * @param {AccountDetailsScreenProps} props - props of accountDetailsScreen * * @category Component */ diff --git a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx index 6a431a86..6ca7b35f 100644 --- a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx +++ b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx @@ -14,19 +14,7 @@ import ErrorManager from '../../components/Error/ErrorManager'; * Component renders a screen with account details information for support with the application. * Contact information is pulled from the context passed into the workflow. * - * @param firstNameLabel label for the first name text field - * @param initialFirstName initial value for the first name text field - * @param firstNameValidator function that validates the first name text field - * @param firstNameTextFieldProps props to pass to the first name field - * @param lastNameLabel label for the last name text field - * @param initialLastName initial value for the last name text field - * @param lastNameValidator function that validates the last name text field - * @param lastNameTextFieldProps props to pass to the last name field - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * @param errorDisplayConfig configuration for customizing how errors are displayed + * @param {AccountDetailsScreenProps} props - props of accountDetailsScreen * * @category Component */ From 78c97417e1fb9fd9487cb652ef92f167e4b265e9 Mon Sep 17 00:00:00 2001 From: priyankakmEaton Date: Tue, 23 Apr 2024 15:08:26 +0530 Subject: [PATCH 2/7] update js docs --- .../components/Error/ErrorManager.test.tsx | 3 +- .../src/components/Error/ErrorManager.tsx | 80 +------------------ login-workflow/src/components/Error/types.ts | 64 +++++++++++++++ .../RegistrationWorkflow.tsx | 3 +- .../src/contexts/AuthContext/provider.tsx | 2 +- .../src/contexts/ErrorContext/types.ts | 2 +- .../contexts/ErrorContext/useErrorManager.tsx | 2 +- .../contexts/RegistrationContext/provider.tsx | 2 +- .../src/screens/AccountDetailsScreen/types.ts | 2 +- .../src/screens/CreateAccountScreen/types.ts | 2 +- .../src/screens/CreatePasswordScreen/types.ts | 2 +- .../src/screens/EulaScreen/types.ts | 2 +- .../src/screens/ForgotPasswordScreen/types.ts | 2 +- .../src/screens/LoginScreen/types.ts | 2 +- .../src/screens/ResetPasswordScreen/types.ts | 2 +- .../src/screens/SuccessScreen/types.ts | 2 +- .../src/screens/VerifyCodeScreen/types.ts | 2 +- 17 files changed, 84 insertions(+), 92 deletions(-) create mode 100644 login-workflow/src/components/Error/types.ts diff --git a/login-workflow/src/components/Error/ErrorManager.test.tsx b/login-workflow/src/components/Error/ErrorManager.test.tsx index dd26a1c7..b488c827 100644 --- a/login-workflow/src/components/Error/ErrorManager.test.tsx +++ b/login-workflow/src/components/Error/ErrorManager.test.tsx @@ -1,7 +1,8 @@ import React from 'react'; import '@testing-library/jest-dom'; import { render, cleanup, screen, RenderResult } from '@testing-library/react'; -import ErrorManager, { ErrorManagerProps } from './ErrorManager'; +import ErrorManager from './ErrorManager'; +import { ErrorManagerProps } from './types'; import { RegistrationContextProvider } from '../../contexts'; import { RegistrationWorkflow } from '../../components'; import { registrationContextProviderProps } from '../../testUtils'; diff --git a/login-workflow/src/components/Error/ErrorManager.tsx b/login-workflow/src/components/Error/ErrorManager.tsx index ebdf55c4..4b01b63e 100644 --- a/login-workflow/src/components/Error/ErrorManager.tsx +++ b/login-workflow/src/components/Error/ErrorManager.tsx @@ -1,87 +1,13 @@ import React, { useCallback } from 'react'; import { BasicDialog } from '../Dialog/BasicDialog'; import ErrorMessageBox from './ErrorMessageBox'; -import { SxProps, Theme } from '@mui/material/styles'; -import { TFunction, TOptions } from 'i18next'; - -export type AuthError = { - cause: { title: string; errorMessage: string; errorOptions?: TOptions; titleOptions?: TOptions }; -}; - -export type ErrorManagerProps = { - /** - * Determines whether to display a dialog, a message box, or neither - */ - mode?: 'dialog' | 'message-box' | 'none'; - - /** - * Title to display in message box and dialog - */ - title?: string; - - /** - * The function to call when the close/dismiss button is clicked - * @returns void - */ - onClose?: () => void; - - /** - * The error text to display - */ - error?: string; - - /** - * Interpolate string with a dynamic value to pass values using t function for message - */ - errorOptions?: TOptions; - - /** - * Interpolate string with a dynamic value to pass values using t function for title - */ - titleOptions?: TOptions; - - /** - * Translate function to translate error related text - */ - t?: TFunction; - - /** - * Configuration options when using mode='dialog' - * @param {string} dialogConfig.title - The title used in the dialog header - * @param {string} dialogConfig.dismissLabel - The label on the dismiss button in dialog mode. - */ - dialogConfig?: { - dismissLabel?: string; - title?: string; - sx?: SxProps; - }; - messageBoxConfig?: { - title?: string; - dismissible?: boolean; - position?: 'top' | 'bottom'; - fontColor?: string; - backgroundColor?: string; - sx?: SxProps; - }; - children?: React.ReactNode; -}; +import { ErrorManagerProps } from './types'; +import { TOptions } from 'i18next'; /** * Component that manages the display of error messages. Can be configured to display a dialog, a message box, or neither. * - * @param mode determines whether to display a dialog, a message box, or neither - * @param onClose function to call when the close/dismiss button is clicked - * @param error error text to display - * @param dialogConfig configuration for the error dialog - * @param dialogConfig.title text to show in the title of the dialog - * @param dialogConfig.dismissLabel text to show in the close button - * @param dialogConfig.sx sx styles passed to the underlying root(Dialog) component - * @param messageBoxConfig configuration for the error message box - * @param messageBoxConfig.dismissible whether the message box can be dismissed - * @param messageBoxConfig.position determines whether the message box should be displayed at the top or bottom of the screen - * @param messageBoxConfig.fontColor the font color of the text inside the message box - * @param messageBoxConfig.backgroundColor the background color of the message box - * @param messageBoxConfig.sx sx styles passed to the underlying root(Box) component + * @param {ErrorManagerProps} props - props of errorManager component * * @category Component */ diff --git a/login-workflow/src/components/Error/types.ts b/login-workflow/src/components/Error/types.ts new file mode 100644 index 00000000..cc709f8e --- /dev/null +++ b/login-workflow/src/components/Error/types.ts @@ -0,0 +1,64 @@ +import { SxProps, Theme } from '@mui/material/styles'; +import { TFunction, TOptions } from 'i18next'; + +export type AuthError = { + cause: { title: string; errorMessage: string; errorOptions?: TOptions; titleOptions?: TOptions }; +}; + +export type ErrorManagerProps = { + /** + * Determines whether to display a dialog, a message box, or neither + */ + mode?: 'dialog' | 'message-box' | 'none'; + + /** + * Title to display in message box and dialog + */ + title?: string; + + /** + * The function to call when the close/dismiss button is clicked + * @returns void + */ + onClose?: () => void; + + /** + * The error text to display + */ + error?: string; + + /** + * Interpolate string with a dynamic value to pass values using t function for message + */ + errorOptions?: TOptions; + + /** + * Interpolate string with a dynamic value to pass values using t function for title + */ + titleOptions?: TOptions; + + /** + * Translate function to translate error related text + */ + t?: TFunction; + + /** + * Configuration options when using mode='dialog' + * @param {string} dialogConfig.title - The title used in the dialog header + * @param {string} dialogConfig.dismissLabel - The label on the dismiss button in dialog mode. + */ + dialogConfig?: { + dismissLabel?: string; + title?: string; + sx?: SxProps; + }; + messageBoxConfig?: { + title?: string; + dismissible?: boolean; + position?: 'top' | 'bottom'; + fontColor?: string; + backgroundColor?: string; + sx?: SxProps; + }; + children?: React.ReactNode; +}; diff --git a/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx b/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx index 17afbd2c..736d1444 100644 --- a/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx +++ b/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx @@ -11,7 +11,8 @@ import { } from '../../screens'; import { parseQueryString } from '../../utils'; import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; -import ErrorManager, { ErrorManagerProps } from '../Error/ErrorManager'; +import ErrorManager from '../Error/ErrorManager'; +import { ErrorManagerProps } from '../Error/types'; export type RegistrationWorkflowProps = { /** diff --git a/login-workflow/src/contexts/AuthContext/provider.tsx b/login-workflow/src/contexts/AuthContext/provider.tsx index dfa21e64..898f70e6 100644 --- a/login-workflow/src/contexts/AuthContext/provider.tsx +++ b/login-workflow/src/contexts/AuthContext/provider.tsx @@ -11,7 +11,7 @@ import { i18nAuthInstance } from './i18nAuthInstance'; import { ErrorContext } from '../ErrorContext'; import { AuthDictionaries } from './AuthDictionaries'; import { SharedDictionaries } from '../SharedDictionaries'; -import { ErrorManagerProps } from '../../components/Error'; +import { ErrorManagerProps } from '../../components/Error/types'; const AuthContextProviderContent: React.FC< React.PropsWithChildren & { PasswordDialog?: JSX.Element }> diff --git a/login-workflow/src/contexts/ErrorContext/types.ts b/login-workflow/src/contexts/ErrorContext/types.ts index 4df673e9..5369dbd9 100644 --- a/login-workflow/src/contexts/ErrorContext/types.ts +++ b/login-workflow/src/contexts/ErrorContext/types.ts @@ -3,6 +3,6 @@ * @module ErrorContext */ -import { ErrorManagerProps } from '../../components/Error/ErrorManager'; +import { ErrorManagerProps } from '../../components/Error/types'; export type ErrorContextProviderProps = Omit; diff --git a/login-workflow/src/contexts/ErrorContext/useErrorManager.tsx b/login-workflow/src/contexts/ErrorContext/useErrorManager.tsx index b53a8430..e559c26d 100644 --- a/login-workflow/src/contexts/ErrorContext/useErrorManager.tsx +++ b/login-workflow/src/contexts/ErrorContext/useErrorManager.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { AuthError, ErrorManagerProps } from '../../components/Error'; +import { AuthError, ErrorManagerProps } from '../../components/Error/types'; import { useErrorContext } from '.'; export const useErrorManager = (): { diff --git a/login-workflow/src/contexts/RegistrationContext/provider.tsx b/login-workflow/src/contexts/RegistrationContext/provider.tsx index 11a45783..8d9a7e21 100644 --- a/login-workflow/src/contexts/RegistrationContext/provider.tsx +++ b/login-workflow/src/contexts/RegistrationContext/provider.tsx @@ -11,7 +11,7 @@ import { i18nRegistrationInstance } from './i18nRegistrationInstance'; import { ErrorContext } from '../ErrorContext'; import { SharedDictionaries } from '../SharedDictionaries'; import { RegistrationDictionaries } from './RegistrationDictionaries'; -import { ErrorManagerProps } from '../../components/Error'; +import { ErrorManagerProps } from '../../components/Error/types'; const RegistrationContextProviderContent: React.FC< React.PropsWithChildren> diff --git a/login-workflow/src/screens/AccountDetailsScreen/types.ts b/login-workflow/src/screens/AccountDetailsScreen/types.ts index 988b4314..9bc9fb39 100644 --- a/login-workflow/src/screens/AccountDetailsScreen/types.ts +++ b/login-workflow/src/screens/AccountDetailsScreen/types.ts @@ -1,6 +1,6 @@ import { BoxProps, TextFieldProps } from '@mui/material'; import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types'; -import { ErrorManagerProps } from '../../components/Error'; +import { ErrorManagerProps } from '../../components/Error/types'; export type AccountDetailsScreenProps = WorkflowCardProps & BoxProps & { diff --git a/login-workflow/src/screens/CreateAccountScreen/types.ts b/login-workflow/src/screens/CreateAccountScreen/types.ts index 6875c7e9..eaa0a505 100644 --- a/login-workflow/src/screens/CreateAccountScreen/types.ts +++ b/login-workflow/src/screens/CreateAccountScreen/types.ts @@ -1,6 +1,6 @@ import { TextFieldProps } from '@mui/material'; import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types'; -import { ErrorManagerProps } from '../../components/Error'; +import { ErrorManagerProps } from '../../components/Error/types'; export type CreateAccountScreenProps = WorkflowCardProps & { /** diff --git a/login-workflow/src/screens/CreatePasswordScreen/types.ts b/login-workflow/src/screens/CreatePasswordScreen/types.ts index 2adede0f..da6dc83f 100644 --- a/login-workflow/src/screens/CreatePasswordScreen/types.ts +++ b/login-workflow/src/screens/CreatePasswordScreen/types.ts @@ -1,5 +1,5 @@ import { SetPasswordProps } from '../../components'; -import { ErrorManagerProps } from '../../components/Error'; +import { ErrorManagerProps } from '../../components/Error/types'; import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types'; export type CreatePasswordScreenProps = WorkflowCardProps & { diff --git a/login-workflow/src/screens/EulaScreen/types.ts b/login-workflow/src/screens/EulaScreen/types.ts index bfb73c63..46bd6e08 100644 --- a/login-workflow/src/screens/EulaScreen/types.ts +++ b/login-workflow/src/screens/EulaScreen/types.ts @@ -1,6 +1,6 @@ import { CheckboxProps } from '@mui/material'; import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types'; -import { ErrorManagerProps } from '../../components/Error'; +import { ErrorManagerProps } from '../../components/Error/types'; export type EulaScreenProps = WorkflowCardProps & { /** diff --git a/login-workflow/src/screens/ForgotPasswordScreen/types.ts b/login-workflow/src/screens/ForgotPasswordScreen/types.ts index cf0274b6..2f031983 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/types.ts +++ b/login-workflow/src/screens/ForgotPasswordScreen/types.ts @@ -1,5 +1,5 @@ import { TextFieldProps } from '@mui/material'; -import { ErrorManagerProps } from '../../components/Error'; +import { ErrorManagerProps } from '../../components/Error/types'; import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types'; import { SuccessScreenProps } from '../SuccessScreen'; diff --git a/login-workflow/src/screens/LoginScreen/types.ts b/login-workflow/src/screens/LoginScreen/types.ts index 02f0fe48..8472a1b7 100644 --- a/login-workflow/src/screens/LoginScreen/types.ts +++ b/login-workflow/src/screens/LoginScreen/types.ts @@ -1,6 +1,6 @@ import { TextFieldProps } from '@mui/material'; import { WorkflowCardBaseProps } from '../../components/WorkflowCard/WorkflowCard.types'; -import { ErrorManagerProps } from '../../components/Error'; +import { ErrorManagerProps } from '../../components/Error/types'; export type LoginScreenProps = WorkflowCardBaseProps & { // configure fields diff --git a/login-workflow/src/screens/ResetPasswordScreen/types.ts b/login-workflow/src/screens/ResetPasswordScreen/types.ts index 48c89660..8a36502e 100644 --- a/login-workflow/src/screens/ResetPasswordScreen/types.ts +++ b/login-workflow/src/screens/ResetPasswordScreen/types.ts @@ -1,4 +1,4 @@ -import { ErrorManagerProps } from '../../components/Error'; +import { ErrorManagerProps } from '../../components/Error/types'; import { SetPasswordProps } from '../../components/SetPassword/types'; import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types'; import { SuccessScreenProps } from '../SuccessScreen'; diff --git a/login-workflow/src/screens/SuccessScreen/types.ts b/login-workflow/src/screens/SuccessScreen/types.ts index ee477c3a..3cfcf5a1 100644 --- a/login-workflow/src/screens/SuccessScreen/types.ts +++ b/login-workflow/src/screens/SuccessScreen/types.ts @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import { ErrorManagerProps } from '../../components/Error'; +import { ErrorManagerProps } from '../../components/Error/types'; import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types'; export type SuccessScreenProps = WorkflowCardProps & { diff --git a/login-workflow/src/screens/VerifyCodeScreen/types.ts b/login-workflow/src/screens/VerifyCodeScreen/types.ts index c27f9154..2d2a9d37 100644 --- a/login-workflow/src/screens/VerifyCodeScreen/types.ts +++ b/login-workflow/src/screens/VerifyCodeScreen/types.ts @@ -1,5 +1,5 @@ import { TextFieldProps } from '@mui/material'; -import { ErrorManagerProps } from '../../components/Error'; +import { ErrorManagerProps } from '../../components/Error/types'; import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types'; export type VerifyCodeScreenProps = WorkflowCardProps & { From e6062943ea32c47361d4a7ea12d64ece2ea0dc1e Mon Sep 17 00:00:00 2001 From: priyankakmEaton Date: Tue, 23 Apr 2024 22:51:23 +0530 Subject: [PATCH 3/7] update js docs --- .../src/components/Error/ErrorMessageBox.tsx | 48 +--------- login-workflow/src/components/Error/types.ts | 92 +++++++++++++++++++ .../WorkflowCard/WorkflowCard.types.ts | 15 +++ 3 files changed, 109 insertions(+), 46 deletions(-) diff --git a/login-workflow/src/components/Error/ErrorMessageBox.tsx b/login-workflow/src/components/Error/ErrorMessageBox.tsx index 01b51be0..d75ec21d 100644 --- a/login-workflow/src/components/Error/ErrorMessageBox.tsx +++ b/login-workflow/src/components/Error/ErrorMessageBox.tsx @@ -1,57 +1,13 @@ import React from 'react'; import Box from '@mui/material/Box'; import Close from '@mui/icons-material/Close'; -import { SxProps, Theme } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; - -export type ErrorMessageBoxProps = { - /** - * The text to show in the title - */ - title: string; - /** - * The text to show in the message - */ - errorMessage: string; - - /** - * The background color of the message box - */ - backgroundColor?: string; - - /** - * Boolean whether the message box can be dismissed - * @default true - */ - dismissible?: boolean; - - /** - * The font color of the text inside the message box - */ - fontColor?: string; - - /** - * The function to call when the close button is clicked - * @returns void - */ - onClose?: () => void; - - /** - * Styles passed to the underlying root component - */ - sx?: SxProps; -}; +import { ErrorMessageBoxProps } from './types'; /** * Component that renders a basic message box with an error message and a configurable dismiss button. * - * @param text to show as the title - * @param errorMessage text to show in the message - * @param backgroundColor the background color of the message box - * @param dismissible whether the message box can be dismissed - * @param fontColor the font color of the text inside the message box - * @param onClose function to call when the close button is clicked - * @param sx styles passed to the underlying root component + * @param {ErrorMessageBoxProps} props - props of errorMessageBox component * * @category Component */ diff --git a/login-workflow/src/components/Error/types.ts b/login-workflow/src/components/Error/types.ts index cc709f8e..b2a254c0 100644 --- a/login-workflow/src/components/Error/types.ts +++ b/login-workflow/src/components/Error/types.ts @@ -1,10 +1,17 @@ import { SxProps, Theme } from '@mui/material/styles'; import { TFunction, TOptions } from 'i18next'; +/** + * Props of AuthError + */ export type AuthError = { cause: { title: string; errorMessage: string; errorOptions?: TOptions; titleOptions?: TOptions }; }; +/** + * Props of ErrorManager Component that manages the display of error messages. + * + */ export type ErrorManagerProps = { /** * Determines whether to display a dialog, a message box, or neither @@ -48,17 +55,102 @@ export type ErrorManagerProps = { * @param {string} dialogConfig.dismissLabel - The label on the dismiss button in dialog mode. */ dialogConfig?: { + /** + * Label to show in the close button + * @default t('bluiCommon:ACTIONS.CLOSE') + */ dismissLabel?: string; + /** + * Text to show in the title of the dialog + * @default t('bluiCommon:MESSAGES.ERROR') + */ title?: string; + /** + * Style overrides object + * + */ sx?: SxProps; }; + + /** + * Configuration options when using mode='message-box' + */ messageBoxConfig?: { + /** + * The title used in the dialog header + * @default t('bluiCommon:MESSAGES.ERROR') + */ title?: string; + /** + * The label on the dismiss button + * @default true + */ dismissible?: boolean; + /** + * Determines whether the message box should be displayed before or after children elements + * @default 'top' + */ position?: 'top' | 'bottom'; + /** + * The font color of the text inside the message box. + * @default error.contrastText + */ fontColor?: string; + /** + * The background color of the message box + * @default error.main + */ backgroundColor?: string; + /** + * Apply style to message box + */ sx?: SxProps; }; + + /** + * Message box errors will appear before or after content passed as children + */ children?: React.ReactNode; }; + +/** + * Props of ErrorMessageBox to error messages. + * + */ +export type ErrorMessageBoxProps = { + /** + * The text to show in the title + */ + title: string; + /** + * The text to show in the message + */ + errorMessage: string; + + /** + * The background color of the message box + */ + backgroundColor?: string; + + /** + * Boolean whether the message box can be dismissed + * @default true + */ + dismissible?: boolean; + + /** + * The font color of the text inside the message box + */ + fontColor?: string; + + /** + * The function to call when the close button is clicked + * @returns void + */ + onClose?: () => void; + + /** + * Styles passed to the underlying root component + */ + sx?: SxProps; +}; diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts b/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts index 51d5dc6d..7c4dc57e 100644 --- a/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts +++ b/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts @@ -103,9 +103,24 @@ export type WorkflowCardActionsProps = CardActionsProps & { fullWidthButton?: boolean; }; +/** + * Props for WorkflowCard component + */ export type WorkflowCardProps = { + /** + * Props for WorkflowCardBase component + */ WorkflowCardBaseProps?: WorkflowCardBaseProps; + /** + * Props for WorkflowCardHeader component + */ WorkflowCardHeaderProps?: WorkflowCardHeaderProps; + /** + * Props for WorkflowCardInstructions component + */ WorkflowCardInstructionProps?: WorkflowCardInstructionProps; + /** + * Props for WorkflowCardActions component + */ WorkflowCardActionsProps?: WorkflowCardActionsProps; }; From 6aad9da3d80005bd67abc3e0a82758d0dddf628d Mon Sep 17 00:00:00 2001 From: priyankakmEaton Date: Tue, 23 Apr 2024 23:32:52 +0530 Subject: [PATCH 4/7] update js docs --- .../RegistrationWorkflow.test.tsx | 3 +- .../RegistrationWorkflow.tsx | 30 +------------------ .../components/RegistrationWorkflow/types.ts | 30 +++++++++++++++++++ .../ContactScreen/ContactSupportScreen.tsx | 14 +-------- .../ContactSupportScreenBase.tsx | 30 ++++++------------- .../CreateAccountScreen.tsx | 10 +------ .../CreateAccountScreenBase.tsx | 10 +------ .../CreatePasswordScreen.tsx | 7 +---- .../CreatePasswordScreenBase.tsx | 7 +---- .../src/screens/EulaScreen/EulaScreen.tsx | 13 +------- .../src/screens/EulaScreen/EulaScreenBase.tsx | 13 +------- .../ExistingAccountSuccessScreen.tsx | 7 +---- 12 files changed, 50 insertions(+), 124 deletions(-) create mode 100644 login-workflow/src/components/RegistrationWorkflow/types.ts diff --git a/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.test.tsx b/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.test.tsx index 80a68509..8e34d819 100644 --- a/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.test.tsx +++ b/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.test.tsx @@ -1,7 +1,8 @@ import React from 'react'; import '@testing-library/jest-dom'; import { cleanup, fireEvent, render, screen, renderHook, act, RenderResult } from '@testing-library/react'; -import { RegistrationWorkflow, RegistrationWorkflowProps } from './RegistrationWorkflow'; +import { RegistrationWorkflow } from './RegistrationWorkflow'; +import { RegistrationWorkflowProps } from './types'; import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; import { RegistrationContextProvider, useRegistrationWorkflowContext } from '../../contexts'; diff --git a/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx b/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx index 736d1444..160b3e4f 100644 --- a/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx +++ b/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx @@ -13,35 +13,7 @@ import { parseQueryString } from '../../utils'; import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; import ErrorManager from '../Error/ErrorManager'; import { ErrorManagerProps } from '../Error/types'; - -export type RegistrationWorkflowProps = { - /** - * The initial screen index to start the registration workflow from - */ - initialScreenIndex?: number; - - /** - * The success screen to display upon successful registration - */ - successScreen?: JSX.Element; - - /** - * When true verifies validateUserRegistrationRequest for verifyCode and several of the default screens will be skipped - * not requiring user input for email and the validation code will be pulled from the url - * @default false - */ - isInviteRegistration?: boolean; - - /** - * Component to display for the success screen if the account already exists. - */ - existingAccountSuccessScreen?: JSX.Element; - - /** - * The configuration for customizing how errors are displayed - */ - errorDisplayConfig?: ErrorManagerProps; -}; +import { RegistrationWorkflowProps } from './types'; /** * Component that contain the registration workflow and index of screens. diff --git a/login-workflow/src/components/RegistrationWorkflow/types.ts b/login-workflow/src/components/RegistrationWorkflow/types.ts new file mode 100644 index 00000000..2b5a0b41 --- /dev/null +++ b/login-workflow/src/components/RegistrationWorkflow/types.ts @@ -0,0 +1,30 @@ +import { ErrorManagerProps } from '../Error/types'; + +export type RegistrationWorkflowProps = { + /** + * The initial screen index to start the registration workflow from + */ + initialScreenIndex?: number; + + /** + * The success screen to display upon successful registration + */ + successScreen?: JSX.Element; + + /** + * When true verifies validateUserRegistrationRequest for verifyCode and several of the default screens will be skipped + * not requiring user input for email and the validation code will be pulled from the url + * @default false + */ + isInviteRegistration?: boolean; + + /** + * Component to display for the success screen if the account already exists. + */ + existingAccountSuccessScreen?: JSX.Element; + + /** + * The configuration for customizing how errors are displayed + */ + errorDisplayConfig?: ErrorManagerProps; +}; diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx index 48e1a2a1..9795229e 100644 --- a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx +++ b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx @@ -11,19 +11,7 @@ import { Typography } from '@mui/material'; * Component renders a screen with contact information for support with the application. * Contact information is pulled from the context passed into the workflow. * - * @param icon the icon to display in the header - * @param emailSupportTitle text to display as the contact support title - * @param emailSupportContent content to display as the contact support content - * @param phoneSupportTitle text to display as the phone support title - * @param phoneSupportContent content to display as the phone support content - * @param contactEmail to display the contact email - * @param contactPhone to display contact phone number - * @param dismissButtonLabel to display label for the button - * @param onDismiss function to call when user clicks button - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component + * @param {ContactSupportScreenProps} props - props of contactSupportScreen * * @category Component */ diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx index ae302cdf..83beaddc 100644 --- a/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx +++ b/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx @@ -12,27 +12,6 @@ import Box, { BoxProps } from '@mui/material/Box'; import { ContactScreenClassKey, getContactScreenUtilityClass } from './utilityClasses'; import { unstable_composeClasses as composeClasses } from '@mui/base'; -/** - * Component renders a screen with contact information for support with the application. - * Contact information is pulled from the context passed into the workflow. - * - * @param icon the icon to display in the header - * @param emailSupportTitle text to display as the contact support title - * @param emailSupportContent content to display as the contact support content - * @param phoneSupportTitle text to display as the phone support title - * @param phoneSupportContent content to display as the phone support content - * @param contactEmail to display the contact email - * @param contactPhone to display contact phone number - * @param dismissButtonLabel to display label for the button - * @param onDismiss function to call when user clicks button - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * - * @category Component - */ - const useUtilityClasses = (ownerState: ContactSupportScreenProps & BoxProps): Record => { const { classes } = ownerState; @@ -52,6 +31,15 @@ const useUtilityClasses = (ownerState: ContactSupportScreenProps & BoxProps): Re return composeClasses(slots, getContactScreenUtilityClass, classes); }; +/** + * Component renders a screen with contact information for support with the application. + * Contact information is pulled from the context passed into the workflow. + * + * @param {ContactSupportScreenProps} props - props of contactSupportScreen + * + * @category Component + */ + export const ContactSupportScreenBase: React.FC = (props) => { const { icon, diff --git a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx index 8775642a..ac759cc0 100644 --- a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx +++ b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx @@ -10,15 +10,7 @@ import { useTranslation } from 'react-i18next'; * Component that renders a screen for the user to enter their email address to start the * account creation process. * - * @param emailLabel label for the email field - * @param initialValue initial value for the email text field - * @param emailValidator function used to test the input for valid formatting - * @param emailTextFieldProps props to pass to the email text field - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * @param errorDisplayConfig configuration for customizing how errors are displayed + * @param {CreateAccountScreenProps} props - props of createAccountScreen * * @category Component */ diff --git a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx index cd48a7d6..64e9558c 100644 --- a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx +++ b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx @@ -12,15 +12,7 @@ import ErrorManager from '../../components/Error/ErrorManager'; * Component that renders a screen for the user to enter their email address to start the * account creation process. * - * @param emailLabel label for the email field - * @param initialValue initial value for the email text field - * @param emailValidator function used to test the input for valid formatting - * @param emailTextFieldProps props to pass to the email text field - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * @param errorDisplayConfig configuration for customizing how errors are displayed + * @param {CreateAccountScreenProps} props - props of createAccountScreen * * @category Component */ diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx index 44ccdc4a..022e85d6 100644 --- a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx +++ b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx @@ -9,12 +9,7 @@ import { useTranslation } from 'react-i18next'; /** * The component renders a screen with the password and confirm password field for creating a new password. * - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param PasswordProps props passed from SetPassword component - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component + * @param {CreatePasswordScreenProps} props - props of createPasswordScreen * * @category Component */ diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx index 6e3c9916..8be20488 100644 --- a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx +++ b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx @@ -13,12 +13,7 @@ import ErrorManager from '../../components/Error/ErrorManager'; /** * The component renders a screen with the password and confirm password field for creating a new password. * - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param PasswordProps props passed from SetPassword component - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component + * @param {CreatePasswordScreenProps} props - props of createPasswordScreen * * @category Component */ diff --git a/login-workflow/src/screens/EulaScreen/EulaScreen.tsx b/login-workflow/src/screens/EulaScreen/EulaScreen.tsx index f4d734db..5da49bcc 100644 --- a/login-workflow/src/screens/EulaScreen/EulaScreen.tsx +++ b/login-workflow/src/screens/EulaScreen/EulaScreen.tsx @@ -8,18 +8,7 @@ import { useTranslation } from 'react-i18next'; /** * Component that renders a screen displaying the EULA and requests acceptance via a checkbox. * - * @param eulaContent the content to render for the EULA. Can be a plain string or HTML - * @param html true if the EULA should be rendered as HTML - * @param checkboxLabel label for the EULA checkbox - * @param initialCheckboxValue used to pre-populate the checked/unchecked checkbox when the screen loads - * @param checkboxProps used to set checkbox props - * @param onEulaAcceptedChange used to test eula checkbox accepted - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param refreshConfig used to refresh Eula content. + * @param {EulaScreenProps} props - props of eulaScreen * * @category Component */ diff --git a/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx b/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx index 56d49f2a..6ec34d08 100644 --- a/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx +++ b/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx @@ -19,18 +19,7 @@ import { useTranslation } from 'react-i18next'; /** * Component that renders a screen displaying the EULA and requests acceptance via a checkbox. * - * @param eulaContent the content to render for the EULA. Can be a plain string or HTML - * @param html true if the EULA should be rendered as HTML - * @param checkboxLabel label for the EULA checkbox - * @param initialCheckboxValue used to pre-populate the checked/unchecked checkbox when the screen loads - * @param checkboxProps used to set checkbox props - * @param onEulaAcceptedChange called when the checkbox clicked - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param onRefresh used to refresh Eula content. + * @param {EulaScreenProps} props - props of eulaScreen * * @category Component */ diff --git a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx index af89ba2b..5aa86d6d 100644 --- a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx +++ b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx @@ -7,12 +7,7 @@ import { useTranslation } from 'react-i18next'; /** * Full Screen component that renders a Success Screen for the accounts which are already exists in the records * - * @param icon the icon to be displayed on the screen - * @param messageTitle title of the success message - * @param message success message to be displayed on the screen - * @param dismissButtonLabel to display label for the button - * @param canDismiss boolean flag prop to dismiss the success screen or not - * @param onDismiss function to call when the dismiss button is clicked + * @param {SuccessScreenProps} props - props of successScreen * * @category Component */ From ed70767f8e6115a538c7d3670aed31c27628ae27 Mon Sep 17 00:00:00 2001 From: priyankakmEaton Date: Wed, 24 Apr 2024 11:59:30 +0530 Subject: [PATCH 5/7] update js docs --- .../ForgotPasswordScreen.tsx | 13 +----- .../ForgotPasswordScreenBase.tsx | 14 +----- .../src/screens/LoginScreen/LoginScreen.tsx | 30 +------------ .../screens/LoginScreen/LoginScreenBase.tsx | 44 ++++--------------- .../RegistrationSuccessScreen.tsx | 6 +-- .../ResetPasswordScreen.tsx | 11 +---- .../ResetPasswordScreenBase.tsx | 11 +---- .../SuccessScreen/SuccessScreenBase.tsx | 11 +---- .../VerifyCodeScreen/VerifyCodeScreen.tsx | 13 +----- .../VerifyCodeScreen/VerifyCodeScreenBase.tsx | 13 +----- 10 files changed, 17 insertions(+), 149 deletions(-) diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx index add83a7f..4015cfc8 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx @@ -12,18 +12,7 @@ import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; /** * Component renders a screen with forgot password for support with the application. * - * @param emailLabel label for the email field - * @param initialEmailValue initial value for the email text field - * @param emailValidator function used to test the input for valid formatting - * @param showSuccessScreen used to determine whether to show a success screen after the form is submitted - * @param slots used for ForgotPasswordScreen SuccessScreen - * @param slotProps applied to slot from SuccessScreen - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param emailTextFieldProps props to pass to the email field. + * @param {ForgotPasswordScreenProps} props - props of forgotPasswordScreen * * @category Component */ diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx index 9d821c3c..7456fca3 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx @@ -14,19 +14,7 @@ import ErrorManager from '../../components/Error/ErrorManager'; /** * Component renders a screen with forgot password for support with the application. * - * @param emailLabel label for the email field - * @param initialEmailValue initial value for the email text field - * @param emailValidator function used to test the input for valid formatting - * @param canGoNext boolean or function that indicates whether the next button should be enabled - * @param showSuccessScreen used to determine whether to show a success screen after the form is submitted - * @param slots used for ForgotPasswordScreen SuccessScreen - * @param slotProps applied to slot from SuccessScreen - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param emailTextFieldProps props to pass to the email field. + * @param {ForgotPasswordScreenProps} props - props of forgotPasswordScreen base component * * @category Component */ diff --git a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx index 49470ca9..6f7b233b 100644 --- a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx +++ b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx @@ -10,35 +10,7 @@ const EMAIL_REGEX = /^[A-Z0-9._%+'-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i; /** * Component that renders a login screen that prompts a user to enter a username and password to login. * - * @param usernameLabel label for the username field - * @param usernameTextFieldProps props to pass to the username text field - * @param usernameValidator function used to validate the username - * @param initialUsernameValue username used to pre-populate the field - * @param passwordLabel label for the password field - * @param passwordTextFieldProps props to pass to the password text field - * @param passwordValidator function used to validate the password - * @param showRememberMe whether or not to show the 'remember me' checkbox - * @param rememberMeLabel label for the 'remember me' checkbox - * @param rememberMeInitialValue whether or not the 'remember me' checkbox should be checked by default - * @param onRememberMeChanged callback function that is called when the 'remember me' checkbox is changed - * @param loginButtonLabel label for the login button - * @param onLogin callback function that is called when the login button is clicked - * @param showForgotPassword whether or not to show the 'forgot password' link - * @param forgotPasswordLabel label for the 'forgot password' link - * @param onForgotPassword callback function that is called when the 'forgot password' link is clicked - * @param showSelfRegistration whether or not to show the 'self registration' link - * @param selfRegisterButtonLabel label for the 'self registration' link - * @param selfRegisterInstructions instructions for the 'self registration' link - * @param onSelfRegister callback function that is called when the 'self registration' link is clicked - * @param showContactSupport whether or not to show the 'contact support' link - * @param contactSupportLabel label for the 'contact support' link - * @param onContactSupport callback function that is called when the 'contact support' link is clicked - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param showCyberSecurityBadge whether or not to show the cyber security badge - * @param projectImage image to display at the top of the screen - * @param header header to display at the top of the screen - * @param footer footer to display at the bottom of the screen - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component + * @param {LoginScreenProps} props - props of loginScreen * * @category Component */ diff --git a/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx b/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx index 0d63f3dd..9df105e1 100644 --- a/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx +++ b/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx @@ -16,42 +16,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base'; import ErrorManager from '../../components/Error/ErrorManager'; import { LinkStyles } from '../../styles'; -/** - * Component that renders a login screen that prompts a user to enter a username and password to login. - * - * @param usernameLabel label for the username field - * @param usernameTextFieldProps props to pass to the username text field - * @param usernameValidator function used to validate the username - * @param initialUsernameValue username used to pre-populate the field - * @param passwordLabel label for the password field - * @param passwordTextFieldProps props to pass to the password text field - * @param passwordValidator function used to validate the password - * @param showRememberMe whether or not to show the 'remember me' checkbox - * @param rememberMeLabel label for the 'remember me' checkbox - * @param rememberMeInitialValue whether or not the 'remember me' checkbox should be checked by default - * @param onRememberMeChanged callback function that is called when the 'remember me' checkbox is changed - * @param loginButtonLabel label for the login button - * @param onLogin callback function that is called when the login button is clicked - * @param showForgotPassword whether or not to show the 'forgot password' link - * @param forgotPasswordLabel label for the 'forgot password' link - * @param onForgotPassword callback function that is called when the 'forgot password' link is clicked - * @param showSelfRegistration whether or not to show the 'self registration' link - * @param selfRegisterButtonLabel label for the 'self registration' link - * @param selfRegisterInstructions instructions for the 'self registration' link - * @param onSelfRegister callback function that is called when the 'self registration' link is clicked - * @param showContactSupport whether or not to show the 'contact support' link - * @param contactSupportLabel label for the 'contact support' link - * @param onContactSupport callback function that is called when the 'contact support' link is clicked - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param showCyberSecurityBadge whether or not to show the cyber security badge - * @param projectImage image to display at the top of the screen - * @param header header to display at the top of the screen - * @param footer footer to display at the bottom of the screen - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * - * @category Component - */ - const useUtilityClasses = (ownerState: LoginScreenProps): Record => { const { classes } = ownerState; @@ -81,6 +45,14 @@ const useUtilityClasses = (ownerState: LoginScreenProps): Record> = (props) => { const { usernameLabel, diff --git a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx index edcff8c6..393bb236 100644 --- a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx +++ b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx @@ -8,11 +8,7 @@ import { useRegistrationWorkflowContext, useRegistrationContext } from '../../co /** * Component that renders a success screen for when registration completes. * - * @param icon the icon to be displayed on the screen - * @param messageTitle title of the success message - * @param message success message to be displayed on the screen - * @param onDismiss function to call when user clicks button - * @param canDismiss function to call when the dismiss button is clicked + * @param {SuccessScreenProps} props - props of successScreen * * @category Component */ diff --git a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx index 8c090682..c370727b 100644 --- a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx +++ b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx @@ -11,16 +11,7 @@ import { useTranslation } from 'react-i18next'; /** * Component that renders a ResetPassword screen that allows a user to reset their password and shows a success message upon a successful password reset.. * - * @param PasswordProps props that will be passed to the SetPassword component - * @param showSuccessScreen boolean that determines whether to show the success screen or not - * @param slots used for ResetPasswordScreen SuccessScreen props - * @param slotProps props that will be passed to the SuccessScreen component - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param SuccessScreen component that will be rendered when showSuccessScreen is true - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component + * @param {ResetPasswordScreenProps} props - props of resetPasswordScreen * @returns a React JSX Element that renders a ResetPassword screen * * @category Component diff --git a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreenBase.tsx b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreenBase.tsx index 59d559a4..23510b98 100644 --- a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreenBase.tsx +++ b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreenBase.tsx @@ -14,16 +14,7 @@ import { SuccessScreenBase, SuccessScreenProps } from '../SuccessScreen'; /** * Component that renders a ResetPassword screen that allows a user to reset their password and shows a success message upon a successful password reset.. * - * @param PasswordProps props that will be passed to the SetPassword component - * @param showSuccessScreen boolean that determines whether to show the success screen or not - * @param slots used for ResetPasswordScreen SuccessScreen props - * @param slotProps props that will be passed to the SuccessScreen component - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param SuccessScreen component that will be rendered when showSuccessScreen is true - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component + * @param {ResetPasswordScreenProps} props - props of resetPasswordScreen base component * @returns a React JSX Element that renders a ResetPassword screen * * @category Component diff --git a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx index 0c53d650..853400e5 100644 --- a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx +++ b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx @@ -12,16 +12,7 @@ import { WorkflowFinishState } from '../../components'; /** * Component that renders a success screen * - * @param icon the icon to be displayed on the screen - * @param messageTitle title of the success message - * @param message success message to be displayed on the screen - * @param dismissButtonLabel to display label for the button - * @param canDismiss function to call when the dismiss button is clicked - * @param onDismiss function to call when user clicks button - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component + * @param {SuccessScreenProps} props - props of successScreen base component * * @category Component */ diff --git a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx index 0f8c90ba..e97abde7 100644 --- a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx +++ b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreen.tsx @@ -9,18 +9,7 @@ import { useTranslation } from 'react-i18next'; * Component that renders a screen that prompts a user to enter the confirmation code * that was sent to the email address that they used to register. * - * @param codeValidator function that validates the code text field - * @param onResend function that is called when the resend link/button is clicked - * @param resendInstructions text to display ahead of the resend link/button - * @param resendLabel text to display for the resend link/button - * @param initialValue the initial value for the code text field - * @param verifyCodeInputLabel the label for the code text field - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * @param verifyCodeTextFieldProps props to pass to the verify code field. + * @param {VerifyCodeScreenProps} props - props of verifyCodeScreen * * @category Component */ diff --git a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx index 98e2d116..090872a5 100644 --- a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx +++ b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx @@ -14,18 +14,7 @@ import ErrorManager from '../../components/Error/ErrorManager'; * Component that renders a screen that prompts a user to enter the confirmation code * that was sent to the email address that they used to register. * - * @param codeValidator function that validates the code text field - * @param onResend function that is called when the resend link/button is clicked - * @param resendInstructions text to display ahead of the resend link/button - * @param resendLabel text to display for the resend link/button - * @param initialValue the initial value for the code text field - * @param verifyCodeInputLabel the label for the code text field - * @param errorDisplayConfig configuration for customizing how errors are displayed - * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component - * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component - * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component - * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component - * @param verifyCodeTextFieldProps props to pass to the verify code field. + * @param {VerifyCodeScreenProps} props - props of verifyCodeScreen base component * * @category Component */ From 3e83bd1d6e47c9cacb5191fd61e7e48167300913 Mon Sep 17 00:00:00 2001 From: priyankakmEaton Date: Wed, 24 Apr 2024 12:29:50 +0530 Subject: [PATCH 6/7] update js docs --- .../ChangePasswordDialogBase.tsx | 2 +- .../PasswordRequirements.tsx | 16 ++-------- .../PasswordRequirementsCheck.tsx | 13 +------- .../components/PasswordRequirements/types.ts | 32 +++++++++++++++++++ .../src/components/Spinner/Spinner.tsx | 9 ++---- .../src/components/Spinner/types.ts | 8 +++++ .../WorkflowCard/WorkflowCardHeader.tsx | 2 ++ .../WorkflowCard/WorkflowCardInstructions.tsx | 2 +- .../AccountDetailsScreen.tsx | 2 +- .../AccountDetailsScreenBase.tsx | 2 +- .../ContactScreen/ContactSupportScreen.tsx | 2 +- .../ContactSupportScreenBase.tsx | 2 +- .../CreateAccountScreen.tsx | 2 +- .../CreateAccountScreenBase.tsx | 2 +- .../CreatePasswordScreen.tsx | 2 +- .../CreatePasswordScreenBase.tsx | 2 +- .../src/screens/EulaScreen/EulaScreen.tsx | 2 +- .../src/screens/EulaScreen/EulaScreenBase.tsx | 2 +- .../ExistingAccountSuccessScreen.tsx | 2 +- .../ForgotPasswordScreen.tsx | 2 +- .../ForgotPasswordScreenBase.tsx | 2 +- .../src/screens/LoginScreen/LoginScreen.tsx | 2 +- .../screens/LoginScreen/LoginScreenBase.tsx | 2 +- .../RegistrationSuccessScreen.tsx | 2 +- .../ResetPasswordScreen.tsx | 2 +- .../ResetPasswordScreenBase.tsx | 2 +- .../SuccessScreen/SuccessScreenBase.tsx | 2 +- .../VerifyCodeScreen/VerifyCodeScreen.tsx | 2 +- .../VerifyCodeScreen/VerifyCodeScreenBase.tsx | 2 +- 29 files changed, 70 insertions(+), 56 deletions(-) create mode 100644 login-workflow/src/components/PasswordRequirements/types.ts create mode 100644 login-workflow/src/components/Spinner/types.ts diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx index 8723227a..70090b5c 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx @@ -22,7 +22,7 @@ import { SuccessScreenBase, SuccessScreenProps } from '../../screens'; * Component that renders a dialog with textField to enter current password and a change password form with a new password and confirm password inputs. * It includes callbacks so you can respond to changes in the inputs. * - * @param {ChangePasswordDialogProps} props - props of changePassword dailog + * @param {ChangePasswordDialogProps} props - props of changePassword dailog base component * * @category Component */ diff --git a/login-workflow/src/components/PasswordRequirements/PasswordRequirements.tsx b/login-workflow/src/components/PasswordRequirements/PasswordRequirements.tsx index ecf82a9b..a0245efb 100644 --- a/login-workflow/src/components/PasswordRequirements/PasswordRequirements.tsx +++ b/login-workflow/src/components/PasswordRequirements/PasswordRequirements.tsx @@ -1,21 +1,9 @@ import React from 'react'; import { PasswordRequirementsCheck } from './PasswordRequirementsCheck'; -import Box, { BoxProps } from '@mui/material/Box'; -import { PasswordRequirement } from '../SetPassword'; +import Box from '@mui/material/Box'; import { defaultPasswordRequirements } from '../../constants'; import { useTranslation } from 'react-i18next'; - -export type PasswordRequirementsProps = BoxProps & { - /** - * The string to conduct the complexity checks against - */ - passwordText: string; - - /** - * Optional requirements to set password - */ - passwordRequirements?: PasswordRequirement[]; -}; +import { PasswordRequirementsProps } from './types'; /** * Component that renders all of the password requirement line items with check indicators. diff --git a/login-workflow/src/components/PasswordRequirements/PasswordRequirementsCheck.tsx b/login-workflow/src/components/PasswordRequirements/PasswordRequirementsCheck.tsx index 2a87aa51..053b0d8c 100644 --- a/login-workflow/src/components/PasswordRequirements/PasswordRequirementsCheck.tsx +++ b/login-workflow/src/components/PasswordRequirements/PasswordRequirementsCheck.tsx @@ -2,18 +2,7 @@ import React from 'react'; import Typography from '@mui/material/Typography'; import Check from '@mui/icons-material/Check'; import Box from '@mui/material/Box'; - -export type PasswordRequirementsCheckProps = { - /** - * True if the line item should have a blue check (false for gray) - */ - isChecked: boolean; - - /** - * The text to display beside the check icon - */ - label: string; -}; +import { PasswordRequirementsCheckProps } from './types'; /** * Component that renders an individual password complexity line item with check indicator. diff --git a/login-workflow/src/components/PasswordRequirements/types.ts b/login-workflow/src/components/PasswordRequirements/types.ts new file mode 100644 index 00000000..56bc4838 --- /dev/null +++ b/login-workflow/src/components/PasswordRequirements/types.ts @@ -0,0 +1,32 @@ +import { BoxProps } from '@mui/material/Box'; +import { PasswordRequirement } from '../SetPassword'; + +/** + * Props for PasswordRequirements component. + */ +export type PasswordRequirementsProps = BoxProps & { + /** + * The string to conduct the complexity checks against + */ + passwordText: string; + + /** + * Optional requirements to set password + */ + passwordRequirements?: PasswordRequirement[]; +}; + +/** + * Props for PasswordRequirementsCheck component shows whether the status of the password matches the requirements. + */ +export type PasswordRequirementsCheckProps = { + /** + * True if the line item should have a blue check (false for gray) + */ + isChecked: boolean; + + /** + * The text to display beside the check icon + */ + label: string; +}; diff --git a/login-workflow/src/components/Spinner/Spinner.tsx b/login-workflow/src/components/Spinner/Spinner.tsx index 65132b8c..42590d33 100644 --- a/login-workflow/src/components/Spinner/Spinner.tsx +++ b/login-workflow/src/components/Spinner/Spinner.tsx @@ -1,13 +1,8 @@ import React from 'react'; import CircularProgress from '@mui/material/CircularProgress'; -import Box, { BoxProps } from '@mui/material/Box'; +import Box from '@mui/material/Box'; +import { SpinnerProps } from './types'; -export type SpinnerProps = BoxProps & { - /** - * True if the spinner should be displayed, false to render nothing - */ - visible?: boolean; -}; /** * Component that renders a indeterminate circular progress spinner atop a semi-transparent white background. * diff --git a/login-workflow/src/components/Spinner/types.ts b/login-workflow/src/components/Spinner/types.ts new file mode 100644 index 00000000..f4036308 --- /dev/null +++ b/login-workflow/src/components/Spinner/types.ts @@ -0,0 +1,8 @@ +import { BoxProps } from '@mui/material/Box'; + +export type SpinnerProps = BoxProps & { + /** + * True if the spinner should be displayed, false to render nothing + */ + visible?: boolean; +}; diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCardHeader.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCardHeader.tsx index 440ebac4..e7117458 100644 --- a/login-workflow/src/components/WorkflowCard/WorkflowCardHeader.tsx +++ b/login-workflow/src/components/WorkflowCard/WorkflowCardHeader.tsx @@ -6,6 +6,8 @@ import { WorkflowCardHeaderProps } from './WorkflowCard.types'; /** * Component that renders the header content for the workflow card. * + * @param {WorkflowCardHeaderProps} props - props of WorkflowCardHeader component + * * @category Component */ diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx index fc859ac7..eeb1cba0 100644 --- a/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx +++ b/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx @@ -6,7 +6,7 @@ import { WorkflowCardInstructionProps } from './WorkflowCard.types'; /** * Component that renders the instructions content for the workflow card. * - * @param {WorkflowCardInstructionProps} props - props of workflowCardInstruction + * @param {WorkflowCardInstructionProps} props - props of WorkflowCardInstruction * * @category Component */ diff --git a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx index f2ebc02c..7b756813 100644 --- a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx +++ b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx @@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next'; * Component renders a screen with account details information for support with the application. * Contact information is pulled from the context passed into the workflow. * - * @param {AccountDetailsScreenProps} props - props of accountDetailsScreen + * @param {AccountDetailsScreenProps} props - props of AccountDetailsScreen * * @category Component */ diff --git a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx index 6ca7b35f..ddc25b40 100644 --- a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx +++ b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx @@ -14,7 +14,7 @@ import ErrorManager from '../../components/Error/ErrorManager'; * Component renders a screen with account details information for support with the application. * Contact information is pulled from the context passed into the workflow. * - * @param {AccountDetailsScreenProps} props - props of accountDetailsScreen + * @param {AccountDetailsScreenProps} props - props of AccountDetailsScreen base component * * @category Component */ diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx index 9795229e..73eabce6 100644 --- a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx +++ b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx @@ -11,7 +11,7 @@ import { Typography } from '@mui/material'; * Component renders a screen with contact information for support with the application. * Contact information is pulled from the context passed into the workflow. * - * @param {ContactSupportScreenProps} props - props of contactSupportScreen + * @param {ContactSupportScreenProps} props - props of ContactSupportScreen * * @category Component */ diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx index 83beaddc..882d20ba 100644 --- a/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx +++ b/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx @@ -35,7 +35,7 @@ const useUtilityClasses = (ownerState: ContactSupportScreenProps & BoxProps): Re * Component renders a screen with contact information for support with the application. * Contact information is pulled from the context passed into the workflow. * - * @param {ContactSupportScreenProps} props - props of contactSupportScreen + * @param {ContactSupportScreenProps} props - props of ContactSupportScreen base component * * @category Component */ diff --git a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx index ac759cc0..18a62c1e 100644 --- a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx +++ b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx @@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'; * Component that renders a screen for the user to enter their email address to start the * account creation process. * - * @param {CreateAccountScreenProps} props - props of createAccountScreen + * @param {CreateAccountScreenProps} props - props of CreateAccountScreen * * @category Component */ diff --git a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx index 64e9558c..294c0176 100644 --- a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx +++ b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx @@ -12,7 +12,7 @@ import ErrorManager from '../../components/Error/ErrorManager'; * Component that renders a screen for the user to enter their email address to start the * account creation process. * - * @param {CreateAccountScreenProps} props - props of createAccountScreen + * @param {CreateAccountScreenProps} props - props of CreateAccountScreen base component * * @category Component */ diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx index 022e85d6..fcefcc58 100644 --- a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx +++ b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx @@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'; /** * The component renders a screen with the password and confirm password field for creating a new password. * - * @param {CreatePasswordScreenProps} props - props of createPasswordScreen + * @param {CreatePasswordScreenProps} props - props of CreatePasswordScreen * * @category Component */ diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx index 8be20488..58de4bb8 100644 --- a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx +++ b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx @@ -13,7 +13,7 @@ import ErrorManager from '../../components/Error/ErrorManager'; /** * The component renders a screen with the password and confirm password field for creating a new password. * - * @param {CreatePasswordScreenProps} props - props of createPasswordScreen + * @param {CreatePasswordScreenProps} props - props of CreatePasswordScreen base component * * @category Component */ diff --git a/login-workflow/src/screens/EulaScreen/EulaScreen.tsx b/login-workflow/src/screens/EulaScreen/EulaScreen.tsx index 5da49bcc..c40a1717 100644 --- a/login-workflow/src/screens/EulaScreen/EulaScreen.tsx +++ b/login-workflow/src/screens/EulaScreen/EulaScreen.tsx @@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next'; /** * Component that renders a screen displaying the EULA and requests acceptance via a checkbox. * - * @param {EulaScreenProps} props - props of eulaScreen + * @param {EulaScreenProps} props - props of EULA screen * * @category Component */ diff --git a/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx b/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx index 6ec34d08..51b89f94 100644 --- a/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx +++ b/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx @@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next'; /** * Component that renders a screen displaying the EULA and requests acceptance via a checkbox. * - * @param {EulaScreenProps} props - props of eulaScreen + * @param {EulaScreenProps} props - props of EUlA screen base component * * @category Component */ diff --git a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx index 5aa86d6d..19abb2d7 100644 --- a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx +++ b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx @@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'; /** * Full Screen component that renders a Success Screen for the accounts which are already exists in the records * - * @param {SuccessScreenProps} props - props of successScreen + * @param {SuccessScreenProps} props - props of SuccessScreen * * @category Component */ diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx index 4015cfc8..77fa8982 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx @@ -12,7 +12,7 @@ import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager'; /** * Component renders a screen with forgot password for support with the application. * - * @param {ForgotPasswordScreenProps} props - props of forgotPasswordScreen + * @param {ForgotPasswordScreenProps} props - props of ForgotPasswordScreen * * @category Component */ diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx index 7456fca3..6d193e06 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx @@ -14,7 +14,7 @@ import ErrorManager from '../../components/Error/ErrorManager'; /** * Component renders a screen with forgot password for support with the application. * - * @param {ForgotPasswordScreenProps} props - props of forgotPasswordScreen base component + * @param {ForgotPasswordScreenProps} props - props of ForgotPasswordScreen base component * * @category Component */ diff --git a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx index 6f7b233b..16dd1e63 100644 --- a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx +++ b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx @@ -10,7 +10,7 @@ const EMAIL_REGEX = /^[A-Z0-9._%+'-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i; /** * Component that renders a login screen that prompts a user to enter a username and password to login. * - * @param {LoginScreenProps} props - props of loginScreen + * @param {LoginScreenProps} props - props of LoginScreen * * @category Component */ diff --git a/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx b/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx index 9df105e1..40634971 100644 --- a/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx +++ b/login-workflow/src/screens/LoginScreen/LoginScreenBase.tsx @@ -48,7 +48,7 @@ const useUtilityClasses = (ownerState: LoginScreenProps): Record Date: Thu, 25 Apr 2024 12:39:55 +0530 Subject: [PATCH 7/7] update js docs --- .../components/ChangePasswordDialog/types.ts | 12 ++++++++++ .../components/WorkflowCard/ErrorState.tsx | 8 +++++++ .../src/components/WorkflowCard/Utility.ts | 22 +++++++++++++++++++ .../src/contexts/AuthContext/context.ts | 3 +++ .../src/contexts/ErrorContext/context.ts | 3 +++ .../src/contexts/ErrorContext/types.ts | 3 +++ .../RegistrationWorkflowContext/context.ts | 3 +++ 7 files changed, 54 insertions(+) diff --git a/login-workflow/src/components/ChangePasswordDialog/types.ts b/login-workflow/src/components/ChangePasswordDialog/types.ts index fb74d8a3..bbc5f363 100644 --- a/login-workflow/src/components/ChangePasswordDialog/types.ts +++ b/login-workflow/src/components/ChangePasswordDialog/types.ts @@ -3,11 +3,23 @@ import { SuccessScreenProps } from '../../screens'; import { BasicDialogProps } from '../Dialog'; import { SetPasswordProps } from '../SetPassword'; +/** + * Props of ChangePasswordDialogSlots + */ export type ChangePasswordDialogSlots = { + /** + * used to define a function that renders success screen + */ SuccessScreen?: (props?: SuccessScreenProps) => JSX.Element; }; +/** + * Props of ChangePasswordDialogSlotsProps + */ export type ChangePasswordDialogSlotsProps = { + /** + * The props that will be passed to the success screen + */ SuccessScreen?: SuccessScreenProps; }; diff --git a/login-workflow/src/components/WorkflowCard/ErrorState.tsx b/login-workflow/src/components/WorkflowCard/ErrorState.tsx index ce2fee38..5b44b87a 100644 --- a/login-workflow/src/components/WorkflowCard/ErrorState.tsx +++ b/login-workflow/src/components/WorkflowCard/ErrorState.tsx @@ -2,6 +2,14 @@ import React from 'react'; import { Typography } from '@mui/material'; import { ErrorStateProps } from './WorkflowCard.types'; +/** + * Component renders a screen with ErrorState to display error message for support with the application. + * + * @param {ErrorStateProps} props - props of ErrorStateProps component + * + * @category Component + */ + export const ErrorState: React.FC = (props) => { const { message, sx, ...otherTypographyProps } = props; diff --git a/login-workflow/src/components/WorkflowCard/Utility.ts b/login-workflow/src/components/WorkflowCard/Utility.ts index d8953da3..240f5fa6 100644 --- a/login-workflow/src/components/WorkflowCard/Utility.ts +++ b/login-workflow/src/components/WorkflowCard/Utility.ts @@ -1,7 +1,14 @@ import generateUtilityClass from '@mui/material/generateUtilityClass'; export type WorkflowCardClasses = { + /** + * The class name for the root element. + */ root?: string; + + /** + * The class name for the card element. + */ card?: string; }; @@ -13,9 +20,24 @@ export function getWorkflowCardUtilityClass(slot: string): string { // For WorkflowCardActions component export type workflowCardActionsClasses = { + /** + * The class name for the root element. + */ root?: string; + + /** + * The class name for the next button element. + */ nextButton?: string; + + /** + * The class name for the previous button element. + */ previousButton?: string; + + /** + * The class name for the stepper element. + */ stepper?: string; }; diff --git a/login-workflow/src/contexts/AuthContext/context.ts b/login-workflow/src/contexts/AuthContext/context.ts index 3e15e1cd..0c830fad 100644 --- a/login-workflow/src/contexts/AuthContext/context.ts +++ b/login-workflow/src/contexts/AuthContext/context.ts @@ -5,4 +5,7 @@ import { createContext } from 'react'; import { AuthContextProviderProps } from './types'; +/** + * Auth Context is used to access context in the authentication workflow + */ export const AuthContext = createContext(null); diff --git a/login-workflow/src/contexts/ErrorContext/context.ts b/login-workflow/src/contexts/ErrorContext/context.ts index c94e2cf3..ba21b762 100644 --- a/login-workflow/src/contexts/ErrorContext/context.ts +++ b/login-workflow/src/contexts/ErrorContext/context.ts @@ -5,4 +5,7 @@ import { createContext } from 'react'; import { ErrorContextProviderProps } from './types'; +/** + * An object that is used for error handling within the application + */ export const ErrorContext = createContext(null); diff --git a/login-workflow/src/contexts/ErrorContext/types.ts b/login-workflow/src/contexts/ErrorContext/types.ts index 5369dbd9..e27b5d65 100644 --- a/login-workflow/src/contexts/ErrorContext/types.ts +++ b/login-workflow/src/contexts/ErrorContext/types.ts @@ -5,4 +5,7 @@ import { ErrorManagerProps } from '../../components/Error/types'; +/** + * An object that is used as error handling context within the workflow. + */ export type ErrorContextProviderProps = Omit; diff --git a/login-workflow/src/contexts/RegistrationWorkflowContext/context.ts b/login-workflow/src/contexts/RegistrationWorkflowContext/context.ts index 5ec2f5a4..af9bbd59 100644 --- a/login-workflow/src/contexts/RegistrationWorkflowContext/context.ts +++ b/login-workflow/src/contexts/RegistrationWorkflowContext/context.ts @@ -6,4 +6,7 @@ import { createContext } from 'react'; import { RegistrationWorkflowContextProps } from './types'; +/** + * Registration Workflow Context is used to access context in the Registration Workflow component + */ export const RegistrationWorkflowContext = createContext(null);