jsdoc

src/App.tsx

@@ -38,7 +38,12 @@ import './theme/variables.css';
 
 setupIonicReact();
 
-const App: React.FC = () => (
+/**
+ * The application root module. The outermost component of the Ionic React
+ * application hierarchy. Declares application-wide providers.
+ * @returns JSX
+ */
+const App = (): JSX.Element => (
   <IonApp data-testid="app">
     <ConfigContextProvider>
       <QueryClientProvider client={queryClient}>

src/common/components/Block/Block.tsx

@@ -4,11 +4,23 @@ import classNames from 'classnames';
 import './Block.scss';
 import { BaseComponentProps } from '../types';
 
+/**
+ * Properties for the `Block`component.
+ * @param {ReactNode} [content] - The content of the block.
+ * @param {string} [title] - The title of the block.
+ * @see {@link BaseComponentProps}
+ */
 interface BlockProps extends BaseComponentProps {
   content?: ReactNode;
   title?: string;
 }
 
+/**
+ * The `Block` component renders a section of content. Similar to an `IonCard`
+ * but does not render the border and shadow.
+ * @param {BlockProps} props - Component properties.
+ * @returns JSX
+ */
 const Block = ({ className, content, testid = 'block', title }: BlockProps): JSX.Element => {
   return (
     <div className={classNames('block', className)} data-testid={testid}>

src/common/components/Header/Header.tsx

@@ -7,27 +7,35 @@ import {
   IonToolbar,
 } from '@ionic/react';
 
+/**
+ * Properties for the `Header` component.
+ * @param {boolean} [backButton] - Optional. Indicates the back button
+ * should be rendered.
+ * @param {string} [defaultHref] - Optional. The default back navigation
+ * href if there is no history in the route stack.
+ * @param {string} [title] - Optional. The header title.
+ */
 interface HeaderProps extends Pick<HTMLIonBackButtonElement, 'defaultHref'> {
   backButton?: boolean;
   title?: string;
 }
 
 const Header = ({ backButton = false, defaultHref, title }: HeaderProps): JSX.Element => {
   return (
-    <IonHeader>
+    <IonHeader data-testid="header-app">
       <IonToolbar>
         {backButton && (
           <IonButtons slot="start">
-            <IonBackButton defaultHref={defaultHref} />
+            <IonBackButton defaultHref={defaultHref} data-testid="header-app-button-back" />
           </IonButtons>
         )}
-        <IonTitle>{title}</IonTitle>
+        <IonTitle data-testid="header-app-title">{title}</IonTitle>
         <IonButtons slot="end">
           <IonMenuButton
             autoHide={false}
             menu="menu-app"
             className="ion-hide-md-down"
-            data-testid="menu-app"
+            data-testid="header-app-button-menu"
           ></IonMenuButton>
         </IonButtons>
       </IonToolbar>

src/common/components/Menu/AppMenu.tsx

@@ -10,32 +10,46 @@ import {
   IonToolbar,
 } from '@ionic/react';
 import { home, people } from 'ionicons/icons';
+import classNames from 'classnames';
 
 import './AppMenu.scss';
+import { BaseComponentProps } from '../types';
 
-const AppMenu = (): JSX.Element => {
+/**
+ * Properties for the `AppMenu` component.
+ * @see {@link BaseComponentProps}
+ */
+interface AppMenuProps extends BaseComponentProps {}
+
+/**
+ * The `AppMenu` component renders the main application menu. Facilitates
+ * navigation throughout the major sections of the application.
+ * @param {AppMenuProps} props - Component properties.
+ * @returns JSX
+ */
+const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element => {
   return (
     <IonMenu
-      className="menu-app"
+      className={classNames('menu-app', className)}
       contentId="content-main"
-      data-testid="menu-app"
+      data-testid={testid}
       menuId="menu-app"
       side="end"
     >
       <IonHeader>
         <IonToolbar>
-          <IonTitle>Menu</IonTitle>
+          <IonTitle data-testid={`${testid}-title`}>Menu</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent>
         <IonMenuToggle>
-          <IonItem routerLink="/tabs/home" lines="full">
+          <IonItem routerLink="/tabs/home" lines="full" data-testid={`${testid}-item-home`}>
             <IonIcon icon={home} className="icon" />
             <IonLabel>Home</IonLabel>
           </IonItem>
         </IonMenuToggle>
         <IonMenuToggle>
-          <IonItem routerLink="/tabs/users" lines="full">
+          <IonItem routerLink="/tabs/users" lines="full" data-testid={`${testid}-item-users`}>
             <IonIcon icon={people} className="icon" />
             <IonLabel>Users</IonLabel>
           </IonItem>

src/common/components/Router/AppRouter.tsx

@@ -4,6 +4,15 @@ import { Redirect, Route } from 'react-router';
 
 import TabNavigation from './TabNavigation';
 
+/**
+ * The application router.  This is the main router for the Ionic React
+ * application.
+ *
+ * This application uses Ionic tab navigation, therefore, the main
+ * router redirect users to the `TabNavigation` component.
+ * @returns JSX
+ * @see {@link TabNavigation}
+ */
 const AppRouter = (): JSX.Element => {
   return (
     <IonReactRouter>

src/common/components/Router/TabNavigation.tsx

@@ -7,6 +7,21 @@ import HomePage from 'pages/Home/HomePage';
 import UserDetailPage from 'pages/Users/components/UserDetail/UserDetailPage';
 import UserListPage from 'pages/Users/components/UserList/UserListPage';
 
+/**
+ * The `TabNavigation` component provides a router outlet for all of the
+ * application routes. The component renders two main application
+ * navigation controls.
+ *
+ * On smaller viewport sizes, Ionic mobile tab navigation is rendered at
+ * the bottom of the page.
+ *
+ * On larger viewport sizes, the Ionic [side] menu is rendered. The menu
+ * may be toggled using the hamburger (three lines) icon in the top
+ * toolbar.
+ *
+ * @returns JSX
+ * @see {@link AppMenu}
+ */
 const TabNavigation = (): JSX.Element => {
   return (
     <>

src/common/providers/ConfigProvider.tsx

@@ -48,7 +48,7 @@ export const ConfigContext = React.createContext<Config | undefined>(undefined);
  * @param {PropsWithChildren} props - Component properties, `PropsWithChildren`.
  * @returns {JSX.Element} JSX
  */
-const ConfigContextProvider = ({ children }: PropsWithChildren) => {
+const ConfigContextProvider = ({ children }: PropsWithChildren): JSX.Element => {
   const [isReady, setIsReady] = useState<boolean>(false);
   const [config, setConfig] = useState<Config>();
 

src/common/utils/constants.ts

@@ -1,3 +1,6 @@
+/**
+ * React Query cache keys.
+ */
 export enum QueryKey {
   Users = 'Users',
 }