Merge pull request #581 from etn-ccis/bug/5466_updateJSdocs

Bug/5466 Update JSDocs in React Login Workflow

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
  */

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 base component
  *
  * @category Component
  */

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;
 };
 

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<DialogProps, 'open'> & {
     /**
      * The title for the screen
@@ -47,6 +35,14 @@ export type BasicDialogProps = Omit<DialogProps, 'open'> & {
     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<React.PropsWithChildren<React.PropsWithChildren<BasicDialogProps>>> = (props) => {
     const { title, body, dismissButtonText, open = false, sx, ...dialogProps } = props;
 

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';

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<Theme>;
-    };
-    messageBoxConfig?: {
-        title?: string;
-        dismissible?: boolean;
-        position?: 'top' | 'bottom';
-        fontColor?: string;
-        backgroundColor?: string;
-        sx?: SxProps<Theme>;
-    };
-    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
  */

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<Theme>;
-};
+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
  */