jsdoc

src/pages/Home/HomePage.tsx

@@ -5,6 +5,11 @@ import Header from 'common/components/Header/Header';
 import UserSummaryCard from 'pages/Users/components/UserSummaryCard/UserSummaryCard';
 import WelcomeBlock from './components/WelcomeBlock/WelcomeBlock';
 
+/**
+ * The `HomePage` component renders the layout for the home page. It displays
+ * blocks and cards containing information in a responsive grid.
+ * @returns JSX
+ */
 const HomePage = (): JSX.Element => {
   return (
     <IonPage data-testid="page-home">

src/pages/Home/components/WelcomeBlock/WelcomeBlock.tsx

@@ -1,8 +1,18 @@
 import Block from 'common/components/Block/Block';
 import { BaseComponentProps } from 'common/components/types';
 
+/**
+ * Properties for the `WelcomeBlock` component.
+ * @see {@link BaseComponentProps}
+ */
 interface WelcomeBlockProps extends BaseComponentProps {}
 
+/**
+ * The `WelcomeBlock` component renders a `Block` of information about the
+ * application.
+ * @param {WelcomeBlockProps} props - Component properties.
+ * @returns JSX
+ */
 const WelcomeBlock = ({ className, testid = 'block-welcome' }: WelcomeBlockProps): JSX.Element => {
   return (
     <Block

src/pages/Users/components/UserDetail/UserDetailPage.tsx

@@ -4,10 +4,18 @@ import { useParams } from 'react-router';
 import Header from 'common/components/Header/Header';
 import { useGetUser } from 'pages/Users/api/useGetUser';
 
+/**
+ * Router path parameters for the `UserDetailPage`.
+ * @param {string} userId - A user identifier.
+ */
 interface UserDetailPageRouteParams {
   userId: string;
 }
 
+/**
+ * The `UserDetailPage` component renders information about a single `User`.
+ * @returns JSX
+ */
 export const UserDetailPage = (): JSX.Element => {
   const { userId } = useParams<UserDetailPageRouteParams>();
   const { data: user } = useGetUser({ userId });

src/pages/Users/components/UserList/UserList.tsx

@@ -2,23 +2,35 @@ import { IonList, IonListHeader } from '@ionic/react';
 
 import { useGetUsers } from 'pages/Users/api/useGetUsers';
 import UserListItem from './UserListItem';
+import { BaseComponentProps } from 'common/components/types';
 
-interface UserListProps {
-  className?: string;
+/**
+ * Properties for the `UserList` component.
+ * @param {string} [header] - Optional. The list header title. Default: `Users`.
+ * @param {boolean} [showHeader] - Optional. Indicates if the header is shown. Default: `false`.
+ */
+interface UserListProps extends BaseComponentProps {
   header?: string;
   showHeader?: boolean;
 }
 
+/**
+ * The `UserList` component renders a list of `User` objects. Uses the `IonList`
+ * component to provide base functionality.
+ * @param {UserListProps} props - Component properties.
+ * @returns JSX
+ */
 const UserList = ({
   className,
   header = 'Users',
   showHeader = false,
+  testid = 'list-user',
 }: UserListProps): JSX.Element => {
   const { data: users } = useGetUsers();
 
   return (
-    <IonList className={className} data-testid="list-user">
-      {showHeader && <IonListHeader>{header}</IonListHeader>}
+    <IonList className={className} data-testid={testid}>
+      {showHeader && <IonListHeader data-testid={`${testid}-header`}>{header}</IonListHeader>}
       {users &&
         users.map((user, index) => (
           <UserListItem

src/pages/Users/components/UserList/UserListItem.tsx

@@ -3,10 +3,24 @@ import { IonItem, IonLabel, IonNote } from '@ionic/react';
 import './UserListItem.scss';
 import { User } from 'common/models/user';
 
+/**
+ * Properties for the `UserListItem` component.
+ * @param {string} [lines] - See `lines` from `IonItem`.
+ * @param {User} user - A `User` object.
+ * @see {@link HTMLIonItemElement}
+ */
 interface UserListItemProps extends Pick<HTMLIonItemElement, 'lines'> {
   user: User;
 }
 
+/**
+ * The `UserListItem` component renders a single item in the list of
+ * `User` objects. Uses `IonItem` to provide base functionality.
+ *
+ * When clicked, navigates to the user detail page.
+ * @param {UserListItemProps} props - Component properties.
+ * @returns JSX
+ */
 const UserListItem = ({ lines, user }: UserListItemProps): JSX.Element => {
   return (
     <IonItem

src/pages/Users/components/UserList/UserListPage.tsx

@@ -4,6 +4,10 @@ import './UserListPage.scss';
 import Header from 'common/components/Header/Header';
 import UserList from './UserList';
 
+/**
+ * The `UserListPage` component renders a list of all `User` objects.
+ * @returns JSX
+ */
 export const UserListPage = (): JSX.Element => {
   return (
     <IonPage>

src/pages/Users/components/UserSummaryCard/UserSummaryCard.tsx

@@ -10,8 +10,18 @@ import {
 import './UserSummaryCard.scss';
 import { useGetUsers } from 'pages/Users/api/useGetUsers';
 
+/**
+ * Properties for the `UserSummaryCard` component.
+ */
 interface UserSummaryCardProps {}
 
+/**
+ * The `UserSummaryCard` component renders an `IonCard` containing summary
+ * information about the `User` data. Facilitates navigation to the user
+ * list  page.
+ * @param {UserSummaryCardProps} props - Component properties.
+ * @returns JSX
+ */
 const UserSummaryCard = ({}: UserSummaryCardProps): JSX.Element => {
   const { data: users } = useGetUsers();