From 9bc9db1972d4c31a47fc8d2567531e9e658521b1 Mon Sep 17 00:00:00 2001
From: param-param <kaurparam.can@gmail.com>
Date: Mon, 17 Jun 2024 12:23:19 +0530
Subject: [PATCH] Started documenting the code in app module.

---
 .../main/java/com/guru/composecookbook/App.kt | 12 ++++
 .../com/guru/composecookbook/BottomNavType.kt | 18 +++++
 .../com/guru/composecookbook/MainActivity.kt  | 51 ++++++++++++++
 .../composecookbook/ui/home/HomeScreen.kt     | 59 ++++++++++++++++-
 .../ui/home/lists/GridListItem.kt             |  9 +++
 .../ui/home/lists/HorizontalListItem.kt       |  9 +++
 .../ui/learnwidgets/AllButtons.kt             | 15 +++++
 .../ui/learnwidgets/AppBars.kt                | 29 ++++++++
 .../composecookbook/ui/learnwidgets/Chips.kt  | 27 +++++++-
 .../ui/learnwidgets/Layouts.kt                | 66 ++++++++++++++++++-
 .../ui/learnwidgets/Loaders.kt                |  8 ++-
 .../ui/learnwidgets/Snackbars.kt              | 13 ++++
 .../ui/learnwidgets/SwipeButton.kt            | 46 ++++++++++++-
 .../ui/learnwidgets/TextInputs.kt             | 21 ++++++
 .../composecookbook/ui/learnwidgets/Texts.kt  | 10 +++
 .../ui/learnwidgets/Toggles.kt                | 15 +++++
 .../ui/learnwidgets/UICards.kt                |  7 ++
 .../ui/learnwidgets/WidgetScreen.kt           | 14 ++++
 .../ui/templates/TemplateScreen.kt            |  9 +++
 .../ui/templates/TemplatesActivity.kt         | 30 +++++++++
 .../ui/utils/CommomComponents.kt              | 36 +++++++++-
 21 files changed, 493 insertions(+), 11 deletions(-)

diff --git a/app/src/main/java/com/guru/composecookbook/App.kt b/app/src/main/java/com/guru/composecookbook/App.kt
index 632ef9c4..b4b28c02 100644
--- a/app/src/main/java/com/guru/composecookbook/App.kt
+++ b/app/src/main/java/com/guru/composecookbook/App.kt
@@ -3,15 +3,27 @@ package com.guru.composecookbook
 import android.app.Application
 import android.content.Context
 
+/**
+ * Custom Application class for initializing global application state.
+ */
 class App : Application() {
 
+    /**
+     * Initializes the singleton instance of the App class and ensuring it is non-null.
+     */
     init {
         instance = requireNotNull(this)
     }
 
     companion object {
+        // Singleton instance of the App class
         private lateinit var instance: App
 
+        /**
+         * Provides the application context.
+         *
+         * @return Context of the application.
+         */
         fun applicationContext(): Context {
             return instance
         }
diff --git a/app/src/main/java/com/guru/composecookbook/BottomNavType.kt b/app/src/main/java/com/guru/composecookbook/BottomNavType.kt
index a7d18dad..042e6a14 100644
--- a/app/src/main/java/com/guru/composecookbook/BottomNavType.kt
+++ b/app/src/main/java/com/guru/composecookbook/BottomNavType.kt
@@ -1,9 +1,27 @@
 package com.guru.composecookbook
 
+/**
+ * Enum class representing the different types of bottom navigation items.
+ */
 enum class BottomNavType {
+    /**
+     * Represents the Home screen in the bottom navigation.
+     */
     HOME,
+    /**
+     * Represents the Widgets screen in the bottom navigation.
+     */
     WIDGETS,
+    /**
+     * Represents the Animation screen in the bottom navigation.
+     */
     ANIMATION,
+    /**
+     * Represents the Demo UI screen in the bottom navigation.
+     */
     DEMOUI,
+    /**
+     * Represents the Template screen in the bottom navigation.
+     */
     TEMPLATE
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/guru/composecookbook/MainActivity.kt b/app/src/main/java/com/guru/composecookbook/MainActivity.kt
index 96088ae4..1739df35 100644
--- a/app/src/main/java/com/guru/composecookbook/MainActivity.kt
+++ b/app/src/main/java/com/guru/composecookbook/MainActivity.kt
@@ -68,7 +68,17 @@ import com.guru.composecookbook.ui.utils.TestTags
 import com.guru.fontawesomecomposelib.FaIcon
 import kotlinx.coroutines.launch
 
+/**
+ * Main activity of the application.
+ */
 class MainActivity : ComponentActivity() {
+
+    /**
+     * Sets up the main activity. Initializes the mobile ads and sets the content view.
+     *
+     * @param savedInstanceState Saved instance state.
+     */
+
     @OptIn(ExperimentalAnimationApi::class,
     ExperimentalFoundationApi::class,
     ExperimentalMaterialApi::class)
@@ -86,6 +96,14 @@ class MainActivity : ComponentActivity() {
     }
 }
 
+
+/**
+ * Composable function for the base view of the app.
+ *
+ * @param appThemeState Current app theme state.
+ * @param systemUiController Controller for system UI.
+ * @param content Composable content to be displayed.
+ */
 @Composable
 fun BaseView(
     appThemeState: AppThemeState,
@@ -108,6 +126,15 @@ fun BaseView(
     }
 }
 
+
+/**
+ * Composable function for the home screen content.
+ *
+ * @param homeScreen Current home screen type.
+ * @param appThemeState Current app theme state.
+ * @param chooseColorBottomModalState State of the bottom modal sheet for color selection.
+ * @param modifier Modifier to be applied to the layout.
+ */
 @OptIn(ExperimentalAnimationApi::class,
 ExperimentalFoundationApi::class,
 ExperimentalMaterialApi::class)
@@ -134,6 +161,12 @@ fun HomeScreenContent(
     }
 }
 
+
+/**
+ * Composable function for the main app content.
+ *
+ * @param appThemeState Current app theme state.
+ */
 @OptIn(ExperimentalAnimationApi::class,
 ExperimentalFoundationApi::class,
 ExperimentalMaterialApi::class)
@@ -197,6 +230,13 @@ fun MainAppContent(appThemeState: MutableState<AppThemeState>) {
 
 }
 
+
+/**
+ * Composable function for the bottom navigation content.
+ *
+ * @param modifier Modifier to be applied to the layout.
+ * @param homeScreenState Current home screen state.
+ */
 @Composable
 fun BottomNavigationContent(
     modifier: Modifier = Modifier,
@@ -321,6 +361,13 @@ fun BottomNavigationContent(
     }
 }
 
+
+/**
+ * Composable function for the navigation rail content.
+ *
+ * @param modifier Modifier to be applied to the layout.
+ * @param homeScreenState Current home screen state.
+ */
 @Composable
 private fun NavigationRailContent(
     modifier: Modifier,
@@ -445,6 +492,10 @@ private fun NavigationRailContent(
     }
 }
 
+
+/**
+ * Preview function for the main app content.
+ */
 @OptIn(ExperimentalAnimationApi::class,
 ExperimentalFoundationApi::class,
 ExperimentalMaterialApi::class)
diff --git a/app/src/main/java/com/guru/composecookbook/ui/home/HomeScreen.kt b/app/src/main/java/com/guru/composecookbook/ui/home/HomeScreen.kt
index 1d25299b..f9429f3b 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/home/HomeScreen.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/home/HomeScreen.kt
@@ -71,7 +71,14 @@ import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 import java.util.*
 
-
+/**
+ * Sets up the home screen UI with a top bar and content area.
+ * The top bar includes buttons for toggling the dark theme and opening a color selection menu.
+ * The content area displays the home screen content, including a list of items and a color palette menu.
+ *
+ * @param appThemeState: A mutable state holding the current theme state (light or dark) and color palette.
+ * @param chooseColorBottomModalState: State for controlling the bottom modal sheet used for choosing colors.
+ */
 @OptIn(
     ExperimentalMaterialApi::class,
     ExperimentalMaterial3Api::class
@@ -119,7 +126,14 @@ fun HomeScreen(
     )
 }
 
-
+/**
+ * Adds an icon button that, when clicked, toggles the visibility of the color palette menu or
+ * shows the modal bottom sheet for color selection if accessibility settings are enabled.
+ *
+ * @param coroutineScope: Scope for launching coroutines.
+ * @param chooseColorBottomModalState: State for controlling the color selection modal bottom sheet.
+ * @param showMenu: Mutable state to control the visibility of the color palette menu.
+ */
 @SuppressLint("ServiceCast")
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
@@ -148,6 +162,15 @@ private fun ChangeColorIconButton(
     }
 }
 
+/**
+ * Displays a list of home screen items, adapting the layout based on screen width.
+ * Shows a color palette menu if showMenu is true.
+ *
+ * @param isDarkTheme: Boolean indicating whether the dark theme is active.
+ * @param showMenu: Mutable state to control the visibility of the color palette menu.
+ * @param onPalletChange: Callback invoked when a new color palette is selected.
+ * @param modifier: Modifier for styling the composable.
+ */
 @Composable
 fun HomeScreenContent(
     isDarkTheme: Boolean,
@@ -191,6 +214,12 @@ fun HomeScreenContent(
     }
 }
 
+/**
+ * Displays a list of color options for the user to choose from, invoking onPalletChange when a selection is made.
+ *
+ * @param modifier: Modifier for styling the composable.
+ * @param onPalletChange: Callback invoked when a new color palette is selected.
+ */
 @Composable
 fun PalletMenu(
     modifier: Modifier,
@@ -224,6 +253,13 @@ fun PalletMenu(
     }
 }
 
+/**
+ * Displays a row with an icon and text, triggering the onPalletChange callback when clicked.
+ *
+ * @param color: Color of the icon representing the palette.
+ * @param name: Name of the color palette.
+ * @param onPalletChange: Callback invoked when the menu item is clicked.
+ */
 @Composable
 fun MenuItem(color: Color, name: String, onPalletChange: () -> Unit) {
     Row(
@@ -241,7 +277,14 @@ fun MenuItem(color: Color, name: String, onPalletChange: () -> Unit) {
     }
 }
 
-
+/**
+ * Displays a card or button for each home screen item, adjusting the layout based on screen width.
+ *
+ * @param homeScreenItems: Item to display in the list.
+ * @param context: Context for starting activities.
+ * @param isDarkTheme: Boolean indicating whether the dark theme is active.
+ * @param isWiderScreen: Boolean indicating if the screen width is wider than a certain threshold.
+ */
 @Composable
 fun HomeScreenListView(
     homeScreenItems: HomeScreenItems, context: Context, isDarkTheme: Boolean,
@@ -281,6 +324,13 @@ fun HomeScreenListView(
     }
 }
 
+/**
+ * Starts a new activity based on the clicked home screen item, passing the theme state to the new activity.
+ *
+ * @param homeScreenItems: Item that was clicked.
+ * @param context: Context for starting activities.
+ * @param isDarkTheme: Boolean indicating whether the dark theme is active.
+ */
 fun homeItemClicked(homeScreenItems: HomeScreenItems, context: Context, isDarkTheme: Boolean) {
     //TODO pass theme to following screens
     val intent = when (homeScreenItems) {
@@ -340,6 +390,9 @@ fun homeItemClicked(homeScreenItems: HomeScreenItems, context: Context, isDarkTh
     context.startActivity(intent)
 }
 
+/**
+ * Provides a preview of the HomeScreen composable with default theme state and modal bottom sheet state.
+ */
 @OptIn(ExperimentalMaterialApi::class)
 @Preview
 @Composable
diff --git a/app/src/main/java/com/guru/composecookbook/ui/home/lists/GridListItem.kt b/app/src/main/java/com/guru/composecookbook/ui/home/lists/GridListItem.kt
index 6016c409..4a5465cf 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/home/lists/GridListItem.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/home/lists/GridListItem.kt
@@ -20,6 +20,12 @@ import com.guru.composecookbook.theme.ComposeCookBookTheme
 import com.guru.composecookbook.theme.components.Material3Card
 import com.guru.composecookbook.ui.utils.TestTags
 
+/**
+ * Composable function to display a grid list item.
+ *
+ * @param item The item to display, which contains information such as title, subtitle, source, and image.
+ * @param modifier The modifier to be applied to the layout of the grid list item.
+ */
 @Composable
 fun GridListItem(
     item: Item,
@@ -66,6 +72,9 @@ fun GridListItem(
     }
 }
 
+/**
+ * Preview function for GridListItem composable.
+ */
 @Preview
 @Composable
 fun PreviewGridListItem() {
diff --git a/app/src/main/java/com/guru/composecookbook/ui/home/lists/HorizontalListItem.kt b/app/src/main/java/com/guru/composecookbook/ui/home/lists/HorizontalListItem.kt
index 82d82df5..f33830f3 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/home/lists/HorizontalListItem.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/home/lists/HorizontalListItem.kt
@@ -19,6 +19,12 @@ import com.guru.composecookbook.theme.ComposeCookBookTheme
 import com.guru.composecookbook.theme.components.Material3Card
 import com.guru.composecookbook.ui.utils.TestTags
 
+/**
+ * Composable function to display a horizontal list item.
+ *
+ * @param item The item to display, which contains information such as title, subtitle, source, and image.
+ * @param modifier The modifier to be applied to the layout of the grid list item.
+ */
 @Composable
 fun HorizontalListItem(
     item: Item,
@@ -63,6 +69,9 @@ fun HorizontalListItem(
     }
 }
 
+/**
+ * Preview function for HorizontalListItem composable.
+ */
 @Preview
 @Composable
 fun PreviewHorizontalListItem() {
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/AllButtons.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/AllButtons.kt
index 036a7c51..ae944b46 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/AllButtons.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/AllButtons.kt
@@ -27,12 +27,16 @@ import com.guru.composecookbook.theme.typography
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
+/**
+ * Composable function demonstrating various types of buttons and their customization options.
+ */
 @OptIn(ExperimentalMaterialApi::class,
 ExperimentalAnimationApi::class)
 @Composable
 fun AllButtons() {
     Text(text = "Buttons", style = typography.h5, modifier = Modifier.padding(8.dp))
 
+    // Row 1: Basic Buttons
     Row {
         Button(onClick = {}, modifier = Modifier.padding(8.dp)) {
             Text(text = "Main Button")
@@ -44,6 +48,8 @@ fun AllButtons() {
             Text(text = "Text Disabled")
         }
     }
+
+    // Row 2: More Button Variations
     Row {
         Button(onClick = {}, modifier = Modifier.padding(8.dp), enabled = false) {
             Text(text = "Disabled")
@@ -63,6 +69,8 @@ fun AllButtons() {
             Text(text = "Rounded")
         }
     }
+
+    // Row 3: Other Button Types
     Row {
         OutlinedButton(onClick = {}, modifier = Modifier.padding(8.dp)) {
             Text(text = "Outline")
@@ -106,6 +114,8 @@ fun AllButtons() {
             Text(text = "Custom colors")
         }
     }
+
+    // Gradient Background Buttons
     Row {
         val horizontalGradient = Brush.horizontalGradient(
             colors = listOf(MaterialTheme.colorScheme.primary, MaterialTheme.colorScheme.inversePrimary),
@@ -139,6 +149,7 @@ fun AllButtons() {
         )
     }
 
+    // Swipe Button Examples
     val swipeButtonState = remember {
         mutableStateOf(SwipeButtonState.INITIAL)
     }
@@ -175,6 +186,10 @@ fun AllButtons() {
     }
 }
 
+
+/**
+ * A Composable function to preview the AllButtons Composable.
+ */
 @OptIn(ExperimentalAnimationApi::class,
 ExperimentalMaterialApi::class)
 @Preview
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/AppBars.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/AppBars.kt
index 8cc992da..5c7e728b 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/AppBars.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/AppBars.kt
@@ -43,6 +43,10 @@ import com.guru.composecookbook.theme.typography
 import com.guru.composecookbook.ui.utils.SubtitleText
 import com.guru.composecookbook.ui.utils.TitleText
 
+
+/**
+ * Composable function demonstrating various types of app bars and navigation bars.
+ */
 @Composable
 fun AppBars() {
     Text(text = "App Bars", style = typography.h5, modifier = Modifier.padding(8.dp))
@@ -52,11 +56,17 @@ fun AppBars() {
     NavigationBarDemo()
 }
 
+
+/**
+ * Composable function demonstrating different configurations of top app bars.
+ */
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TopAppBarsDemo() {
+    // Subtitle for top app bar section
     SubtitleText(subtitle = "Top App bar")
 
+    // Small top app bar with back navigation icon
     SmallTopAppBar(
         title = { Text(text = "Home") },
         navigationIcon = {
@@ -71,6 +81,7 @@ fun TopAppBarsDemo() {
 
     Spacer(modifier = Modifier.height(8.dp))
 
+    // Top app bar with title "Instagram" and custom navigation and action icons
     TopAppBar(
         title = { Text(text = "Instagram") },
         backgroundColor = MaterialTheme.colorScheme.surface,
@@ -93,6 +104,7 @@ fun TopAppBarsDemo() {
 
     Spacer(modifier = Modifier.height(8.dp))
 
+    // Top app bar with Twitter icon, custom navigation icon, and action icon
     TopAppBar(
         title = {
             Icon(
@@ -126,11 +138,16 @@ fun TopAppBarsDemo() {
     Spacer(modifier = Modifier.height(8.dp))
 }
 
+
+/**
+ * Composable function demonstrating usage of Bottom App Bar.
+ */
 @Composable
 fun BottomAppBarDemo() {
     Spacer(modifier = Modifier.height(16.dp))
     SubtitleText("Bottom app bars: Note bottom app bar support FAB cutouts when used with scafolds see demoUI crypto app")
 
+    // Bottom app bar with an IconButton and a TitleText
     BottomAppBar(
         cutoutShape = CircleShape
     ) {
@@ -141,11 +158,19 @@ fun BottomAppBarDemo() {
     }
 }
 
+
+/**
+ * Composable function demonstrating usage of Bottom Navigation Bar.
+ */
 @Composable
 fun NavigationBarDemo() {
     Spacer(modifier = Modifier.height(16.dp))
     SubtitleText(subtitle = "Bottom Navigation Bars")
+
+    // State to manage selected navigation item in Bottom Navigation Bar
     val spotifyNavItemState = remember { mutableStateOf(SpotifyNavType.HOME) }
+
+    // Bottom Navigation Bar with three items: Home, Search, and Library
     BottomNavigation(backgroundColor = MaterialTheme.colorScheme.surface) {
         BottomNavigationItem(
             icon = { Icon(imageVector = Icons.Outlined.Home, contentDescription = null) },
@@ -169,6 +194,7 @@ fun NavigationBarDemo() {
 
     Spacer(modifier = Modifier.height(16.dp))
 
+    // Bottom Navigation Bar without labels, showcasing more icons
     BottomNavigation {
         BottomNavigationItem(
             icon = { Icon(imageVector = Icons.Outlined.ReadMore, contentDescription = null) },
@@ -189,6 +215,9 @@ fun NavigationBarDemo() {
 }
 
 
+/**
+ * Preview function for AppBars composable.
+ */
 @Preview
 @Composable
 fun PreviewAppBars() {
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Chips.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Chips.kt
index 0f644a3c..91e2f67c 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Chips.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Chips.kt
@@ -23,11 +23,17 @@ import com.guru.composecookbook.theme.typography
 import com.guru.composecookbook.ui.utils.SubtitleText
 import com.guru.composecookbook.youtube.components.YoutubeChip
 
+/**
+ * Composable function demonstrating custom chips and chip-like buttons.
+ */
 @Composable
 fun Chips() {
     // There is no in-built chips but you can make yours like below
     Text(text = "Custom Chips", style = typography.h6, modifier = Modifier.padding(8.dp))
+
     SubtitleText(subtitle = "Custom chips with surface")
+
+    // Row displaying custom chips with different configurations
     Row(modifier = Modifier.padding(8.dp)) {
         YoutubeChip(selected = true, text = "Chip", modifier = Modifier.padding(horizontal = 8.dp))
         YoutubeChip(
@@ -39,7 +45,10 @@ fun Chips() {
         Spacer(modifier = Modifier.padding(8.dp))
         CustomImageChip(text = "custom2", imageId = R.drawable.p6, selected = false)
     }
+
     SubtitleText(subtitle = "Buttons with circle clipping.")
+
+    // Row displaying chip-like buttons with circular clipping
     Row(modifier = Modifier.padding(8.dp)) {
         Button(
             onClick = {},
@@ -62,8 +71,18 @@ fun Chips() {
 }
 
 
-//Inspired from jetcaster sample. I hope compose can add simple Chip UI element that can
-// support images or icons with multiple states.
+/**
+ * Private composable function representing a custom image chip.
+ *
+ * Inspired from jetcaster sample. I hope compose can add simple Chip UI element that can
+ * support images or icons with multiple states.
+ *
+ * @param text The text content of the chip.
+ * @param imageId The resource ID of the image/icon to be displayed in the chip.
+ * @param selected The selected state of the chip.
+ * @param modifier Modifier for styling and layout customization.
+ */
+
 @Composable
 private fun CustomImageChip(
     text: String,
@@ -91,6 +110,8 @@ private fun CustomImageChip(
         modifier = modifier
     ) {
         Row(modifier = Modifier) {
+
+            // Image/icon displayed in the chip, clipped with CircleShape
             Image(
                 painter = painterResource(imageId),
                 contentDescription = null,
@@ -99,6 +120,8 @@ private fun CustomImageChip(
                     .size(20.dp)
                     .clip(CircleShape)
             )
+
+            // Text content of the chip
             Text(
                 text = text,
                 style = MaterialTheme.typography.bodyMedium,
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Layouts.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Layouts.kt
index f67fcf2d..6116657f 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Layouts.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Layouts.kt
@@ -23,6 +23,11 @@ import com.guru.composecookbook.theme.green700
 import com.guru.composecookbook.theme.typography
 import com.guru.composecookbook.ui.utils.TestTags
 
+
+/**
+ * Composable function demonstrating different types of layouts including Rows, Columns, Boxes,
+ * and ConstraintLayout.
+ */
 @Composable
 fun Layouts() {
     Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
@@ -33,6 +38,9 @@ fun Layouts() {
     }
 }
 
+/**
+ * Composable function demonstrating different horizontal arrangements in Rows.
+ */
 @Composable
 fun TypesOfRows() {
     Text(text = "Rows", style = typography.h6, modifier = Modifier.padding(8.dp))
@@ -40,6 +48,7 @@ fun TypesOfRows() {
         text = "Arrangement.Start ", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Row with Arrangement.Start
     Row(
         horizontalArrangement = Arrangement.Start,
         modifier = Modifier
@@ -53,6 +62,7 @@ fun TypesOfRows() {
         text = "Arrangement.End ", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Row with Arrangement.End
     Row(
         horizontalArrangement = Arrangement.End, modifier = Modifier
             .padding(8.dp)
@@ -65,6 +75,7 @@ fun TypesOfRows() {
         text = "Arrangement.Center ", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Row with Arrangement.Center
     Row(
         horizontalArrangement = Arrangement.Center,
         modifier = Modifier
@@ -78,6 +89,7 @@ fun TypesOfRows() {
         text = "Arrangement.SpaceAround ", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Row with Arrangement.SpaceAround
     Row(
         horizontalArrangement = Arrangement.SpaceAround,
         modifier = Modifier
@@ -91,6 +103,7 @@ fun TypesOfRows() {
         text = "Arrangement.SpaceBetween ", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Row with Arrangement.SpaceBetween
     Row(
         horizontalArrangement = Arrangement.SpaceBetween,
         modifier = Modifier
@@ -104,6 +117,7 @@ fun TypesOfRows() {
         text = "Arrangement.SpaceEvenly ", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Row with Arrangement.SpaceEvenly
     Row(
         horizontalArrangement = Arrangement.SpaceEvenly,
         modifier = Modifier
@@ -115,6 +129,9 @@ fun TypesOfRows() {
     }
 }
 
+/**
+ * Composable function demonstrating different vertical arrangements in Columns.
+ */
 @Composable
 fun TypeOfColumns() {
     val columnModifier = Modifier
@@ -123,20 +140,25 @@ fun TypeOfColumns() {
         .height(150.dp)
         .background(MaterialTheme.colorScheme.surfaceVariant)
     Text(text = "Column", style = typography.h6, modifier = Modifier.padding(8.dp))
+
     Text(
         text = "Arrangement.Top", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Column with Arrangement.Top
     Column(
         verticalArrangement = Arrangement.Top, modifier = columnModifier
             .testTag(TestTags.HOME_LAYOUTS_COLUMN_TOP)
     ) {
         MultipleTexts()
     }
+
+
     Text(
         text = "Arrangement.Bottom", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Column with Arrangement.Bottom
     Column(
         verticalArrangement = Arrangement.Bottom,
         modifier = columnModifier
@@ -145,10 +167,13 @@ fun TypeOfColumns() {
     ) {
         MultipleTexts()
     }
+
+
     Text(
         text = "Arrangement.Center + Alignment.CenterHorizontally", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Column with Arrangement.Center + Alignment.CenterHorizontally
     Column(
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
@@ -157,10 +182,13 @@ fun TypeOfColumns() {
     ) {
         MultipleTexts()
     }
+
+
     Text(
         text = "Arrangement.SpaceAround", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Column with Arrangement.SpaceAround
     Column(
         verticalArrangement = Arrangement.SpaceAround,
         modifier = columnModifier
@@ -168,10 +196,13 @@ fun TypeOfColumns() {
     ) {
         MultipleTexts()
     }
+
+
     Text(
         text = "Arrangement.SpaceEvenly", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Column with Arrangement.SpaceEvenly
     Column(
         verticalArrangement = Arrangement.SpaceEvenly,
         modifier = columnModifier
@@ -179,10 +210,13 @@ fun TypeOfColumns() {
     ) {
         MultipleTexts()
     }
+
+
     Text(
         text = "Arrangement.SpaceBetween", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Column with Arrangement.SpaceBetween
     Column(
         verticalArrangement = Arrangement.SpaceBetween,
         modifier = columnModifier
@@ -192,6 +226,10 @@ fun TypeOfColumns() {
     }
 }
 
+
+/**
+ * Composable function demonstrating usage of Box layout with different alignments.
+ */
 @Composable
 fun TypeOfBoxs() {
     Text(text = "Box", style = typography.h6, modifier = Modifier.padding(8.dp))
@@ -200,14 +238,18 @@ fun TypeOfBoxs() {
         .background(MaterialTheme.colorScheme.surfaceVariant)
         .fillMaxWidth()
         .height(250.dp)
+
     Text(
         text = "Children with no align", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+
+    // Box with children having no alignment specified
     Box(
         modifier = boxModifier
             .testTag(TestTags.HOME_LAYOUTS_BOX_NO_ALIGN)
     ) {
+        // Nested Material3Card elements inside the Box
         Material3Card(
             backgroundColor = green700,
             elevation = 4.dp,
@@ -224,10 +266,13 @@ fun TypeOfBoxs() {
             modifier = Modifier.size(100.dp)
         ) {}
     }
+
+
     Text(
         text = "Children with Topstart, center & bottomEnd align", style = typography.caption,
         modifier = Modifier.padding(8.dp)
     )
+    // Box with children aligned to TopStart, Center, and BottomEnd respectively
     Box(
         modifier =
         boxModifier
@@ -251,10 +296,15 @@ fun TypeOfBoxs() {
     }
 }
 
+
+/**
+ * Composable function demonstrating usage of ConstraintLayout.
+ */
 @Composable
 fun ConstraintLayouts() {
     Text(text = "ConstraintLayouts", style = typography.h6, modifier = Modifier.padding(8.dp))
 
+    // ConstraintLayout with multiple elements constrained to each other
     ConstraintLayout(
         modifier = Modifier
             .background(MaterialTheme.colorScheme.surfaceVariant)
@@ -262,9 +312,10 @@ fun ConstraintLayouts() {
             .height(150.dp)
             .testTag(TestTags.HOME_LAYOUTS_CONSTRAINT_LAYOUT)
     ) {
-        //refs creations
+        // References for ConstraintLayout elements
         val (mainButton, mainText, seconderyText, outlineButton) = createRefs()
 
+        // Main button constrained to parent top
         Button(
             onClick = { },
             modifier = Modifier.constrainAs(mainButton) {
@@ -274,15 +325,19 @@ fun ConstraintLayouts() {
             Text("Main button")
         }
 
+        // Main text constrained below main button and to the start of main button
         Text("Main Text", Modifier.constrainAs(mainText) {
             top.linkTo(parent.top, margin = 16.dp)
             absoluteLeft.linkTo(mainButton.end, margin = 16.dp)
         })
+
+        // Secondary text constrained below main text and to the start of main button
         Text("Secondary Text", Modifier.constrainAs(seconderyText) {
             top.linkTo(mainText.bottom, margin = 16.dp)
             absoluteLeft.linkTo(mainButton.end, margin = 16.dp)
         })
 
+        // Outline button constrained below secondary text and to the start of secondary text
         OutlinedButton(
             onClick = { /* Do something */ },
             modifier = Modifier.constrainAs(outlineButton) {
@@ -295,14 +350,21 @@ fun ConstraintLayouts() {
     }
 }
 
+
+/**
+ * Composable function used for showing sample data.
+ */
 @Composable
 fun MultipleTexts() {
     Text(text = "First", modifier = Modifier.padding(8.dp))
     Text(text = "Second", modifier = Modifier.padding(8.dp))
     Text(text = "Third", modifier = Modifier.padding(8.dp))
-
 }
 
+
+/**
+ * Preview function for the Layouts content.
+ */
 @Preview
 @Composable
 fun PreviewLayouts() {
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Loaders.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Loaders.kt
index 0ed79b2d..db5abc93 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Loaders.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Loaders.kt
@@ -13,23 +13,29 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.guru.composecookbook.theme.typography
 
+
+/**
+ * Composable function demonstrating various types of progress indicators.
+ */
 @Composable
 fun Loaders() {
     Text(text = "Progress bars", style = typography.h6, modifier = Modifier.padding(8.dp))
 
+    // Row displaying LinearProgressIndicator and two CircularProgressIndicators
     Row(modifier = Modifier.padding(8.dp)) {
         LinearProgressIndicator()
         CircularProgressIndicator()
         CircularProgressIndicator(strokeWidth = 8.dp)
     }
 
+    // Column displaying LinearProgressIndicator and text with loading message
     Column(
         modifier = Modifier
             .fillMaxWidth()
             .padding(16.dp),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        LinearProgressIndicator()
+        LinearProgressIndicator()      // Default LinearProgressIndicator
         Text(text = "Loading with text...", modifier = Modifier.padding(8.dp))
     }
 
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Snackbars.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Snackbars.kt
index eea418c0..bba46bd7 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Snackbars.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Snackbars.kt
@@ -11,12 +11,19 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.guru.composecookbook.theme.typography
 
+/**
+ * Composable function demonstrating usage of Snackbar in Jetpack Compose.
+ */
 @Composable
 fun SnackBars() {
     Text(text = "Snackbars", style = typography.h6, modifier = Modifier.padding(8.dp))
+
+    // Basic Snackbar without an action
     Snackbar(modifier = Modifier.padding(4.dp)) {
         Text(text = "This is a basic snackbar")
     }
+
+    // Snackbar with an action item
     Snackbar(
         modifier = Modifier.padding(4.dp),
         action = {
@@ -27,6 +34,8 @@ fun SnackBars() {
     ) {
         Text(text = "This is a basic Snackbar with action item")
     }
+
+    // Snackbar with action item placed below text
     Snackbar(
         modifier = Modifier.padding(4.dp),
         actionOnNewLine = true,
@@ -40,6 +49,10 @@ fun SnackBars() {
     }
 }
 
+
+/**
+ * Preview function for the SnackBars content.
+ */
 @Preview
 @Composable
 fun ShowSnackbars() {
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/SwipeButton.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/SwipeButton.kt
index 1ad03b63..712590b1 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/SwipeButton.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/SwipeButton.kt
@@ -35,6 +35,25 @@ import androidx.compose.ui.unit.dp
 import com.guru.composecookbook.login.HorizontalDottedProgressBar
 import kotlin.math.roundToInt
 
+
+/**
+ * A customizable swipe button that supports dragging and swiping gestures.
+ *
+ * @param onSwiped Callback invoked when the button is fully swiped.
+ * @param modifier The modifier to be applied to the button.
+ * @param swipeButtonState The current state of the swipe button.
+ * @param enabled Whether the button is enabled for user interaction.
+ * @param interactionSource The [MutableInteractionSource] that collects interaction events.
+ * @param elevation The elevation of the button.
+ * @param shape The shape of the button.
+ * @param border The border stroke of the button.
+ * @param colors The colors used for the button's background and content.
+ * @param contentPadding The padding around the button's content.
+ * @param icon The icon to display on the button.
+ * @param rotateIcon Whether to rotate the icon based on drag position.
+ * @param iconPadding The padding around the icon.
+ * @param content The content of the button composed with [RowScope].
+ */
 @OptIn(ExperimentalAnimationApi::class,
 ExperimentalMaterialApi::class)
 @Composable
@@ -76,8 +95,11 @@ fun SwipeButton(
             // Content
             val maxWidth = this.constraints.maxWidth.toFloat()
 
+            // Display different components based on the button state
             when {
                 collapsed -> {
+
+                    // Animated IconButton when collapsed
                     val animatedProgress = remember { Animatable(initialValue = 0f) }
                     LaunchedEffect(Unit) {
                         animatedProgress.animateTo(
@@ -105,9 +127,11 @@ fun SwipeButton(
                     }
                 }
                 swiped -> {
+                    // Display horizontal progress bar when fully swiped
                     HorizontalDottedProgressBar()
                 }
                 else -> {
+                    // Default state with draggable IconButton
                     dragOffset.value = 0f // when button goes to inital state
                     CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
                         ProvideTextStyle(
@@ -125,7 +149,8 @@ fun SwipeButton(
                     }
                 }
             }
-            // Swipe Component
+
+            // IconButton that supports dragging for swiping action
             AnimatedVisibility(visible = !swiped) {
                 IconButton(onClick = { }, enabled = enabled, modifier = Modifier
                     .padding(iconPadding)
@@ -165,6 +190,23 @@ fun SwipeButton(
     }
 }
 
+
+/**
+ * Represents the state of the SwipeButton.
+ */
 enum class SwipeButtonState {
-    INITIAL, SWIPED, COLLAPSED
+    /**
+     * Initial state of the SwipeButton.
+     */
+    INITIAL,
+
+    /**
+     * Swipe action completed state.
+     */
+    SWIPED,
+
+    /**
+     * Collapsed state of the SwipeButton.
+     */
+    COLLAPSED
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/TextInputs.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/TextInputs.kt
index 82acad26..06ed4e5b 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/TextInputs.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/TextInputs.kt
@@ -20,10 +20,17 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.guru.composecookbook.theme.typography
 
+/**
+ * A collection of text input fields including TextField and OutlinedTextField examples.
+ *
+ * @see TextField
+ * @see OutlinedTextField
+ */
 @Composable
 fun TextInputs() {
     Text(text = "Text Inputs", style = typography.h6, modifier = Modifier.padding(8.dp))
 
+    // Mutable state for text input
     var text by remember { mutableStateOf(TextFieldValue("")) }
 
     // TODO Explore CoreTextField
@@ -33,6 +40,9 @@ fun TextInputs() {
 //        modifier = Modifier.padding(8.dp).size(0.dp),
 //        cursorColor = Color.Magenta
 //    )
+
+
+    // Basic TextField example
     TextField(
         value = text,
         onValueChange = { newValue -> text = newValue },
@@ -43,6 +53,7 @@ fun TextInputs() {
         placeholder = { Text("placeholder") },
     )
 
+    // OutlinedTextField example with password input
     OutlinedTextField(
         value = text,
         modifier = Modifier
@@ -57,6 +68,7 @@ fun TextInputs() {
         keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
     )
 
+    // OutlinedTextField example with leading icon
     OutlinedTextField(
         value = text,
         leadingIcon = { Icon(imageVector = Icons.Default.Email, contentDescription = null) },
@@ -70,6 +82,8 @@ fun TextInputs() {
             text = it
         }
     )
+
+    // OutlinedTextField example with leading and trailing icons
     OutlinedTextField(
         value = text,
         leadingIcon = { Icon(imageVector = Icons.Default.Email, contentDescription = null) },
@@ -85,7 +99,10 @@ fun TextInputs() {
         }
     )
 
+    // Mutable state for number input
     var numberText by remember { mutableStateOf(TextFieldValue("")) }
+
+    // OutlinedTextField example for numeric input (phone number)
     OutlinedTextField(value = numberText,
         modifier = Modifier
             .padding(8.dp)
@@ -99,6 +116,10 @@ fun TextInputs() {
     )
 }
 
+
+/**
+ * Preview function for the TextInputs content.
+ */
 @InternalTextApi
 @Preview
 @Composable
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Texts.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Texts.kt
index 3678feaf..2357662e 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Texts.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Texts.kt
@@ -15,6 +15,12 @@ import androidx.compose.ui.unit.dp
 import com.guru.composecookbook.theme.typography
 import com.guru.composecookbook.ui.utils.SubtitleText
 
+/**
+ * Demonstrates various configurations and styles of Text composable in Jetpack Compose.
+ *
+ * @see Text
+ * @see SubtitleText
+ */
 @Composable
 fun TextDemo() {
     Text(text = "Text Views", style = typography.h5, modifier = Modifier.padding(8.dp))
@@ -100,6 +106,10 @@ fun TextDemo() {
 
 }
 
+
+/**
+ * Preview function for the TextDemo content.
+ */
 @Preview
 @Composable
 fun PreviewTextDemo() {
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Toggles.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Toggles.kt
index 275b111e..2761dc12 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Toggles.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/Toggles.kt
@@ -22,21 +22,31 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.guru.composecookbook.theme.typography
 
+/**
+ * Composable function `Toggles` demonstrates various UI elements such as Checkbox, Switch, RadioButtons, and Sliders.
+ */
 @Composable
 fun Toggles() {
+
+    // Display header text with custom style and padding
     Text(
         text = "Toggles, Switch, Sliders",
         style = typography.h6,
         modifier = Modifier.padding(8.dp)
     )
 
+    // Checkbox with mutable state
     var checked by remember { mutableStateOf(true) }
     var switched by remember { mutableStateOf(true) }
     Row {
+
+        // Checkbox with mutable state
         Checkbox(
             checked = checked,
             modifier = Modifier.padding(8.dp),
             onCheckedChange = { checked = !checked })
+
+        // Switch with mutable state and custom color for checked state
         Switch(
             checked = switched,
             colors = SwitchDefaults.colors(checkedThumbColor = MaterialTheme.colorScheme.primary),
@@ -45,6 +55,7 @@ fun Toggles() {
         )
     }
 
+    // RadioButtons example with selectable options
     var selected by remember { mutableStateOf("Kotlin") }
     Row {
         RadioButton(selected = selected == "Kotlin", onClick = { selected = "Kotlin" })
@@ -73,8 +84,10 @@ fun Toggles() {
     }
 
 
+    // Sliders examples with different configurations
     var sliderState by remember { mutableStateOf(0f) }
 
+    // Basic Slider with continuous range from 0 to 1
     Slider(value = sliderState, modifier = Modifier
         .fillMaxWidth()
         .padding(8.dp),
@@ -84,6 +97,8 @@ fun Toggles() {
     )
 
     var sliderState2 by remember { mutableStateOf(20f) }
+
+    // Slider with defined value range (0 to 100) and 5 discrete steps
     Slider(value = sliderState2, modifier = Modifier
         .fillMaxWidth()
         .padding(8.dp),
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/UICards.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/UICards.kt
index 2c567bf9..a9e8738f 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/UICards.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/UICards.kt
@@ -25,6 +25,10 @@ import com.guru.composecookbook.data.DemoDataProvider
 import com.guru.composecookbook.theme.components.Material3Card
 import com.guru.composecookbook.theme.typography
 
+/**
+ * Composable function `UICards` demonstrates the usage of UI Cards, Boxes, and ListItems with Jetpack Compose.
+ * Utilizes experimental Material3 components.
+ */
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun UICards() {
@@ -34,8 +38,10 @@ fun UICards() {
         modifier = Modifier.padding(8.dp)
     )
 
+    // Accessing demo item data from DemoDataProvider
     val item = remember { DemoDataProvider.item }
 
+    // Section demonstrating Material3Card as a container
     Text(
         text = "Inbuilt box as container for any Clipping/Alignment controls",
         style = typography.subtitle1,
@@ -63,6 +69,7 @@ fun UICards() {
     }
     Divider()
 
+    // Section demonstrating an Inbuilt Card
     Text(text = "Inbuilt Card", style = typography.subtitle1, modifier = Modifier.padding(8.dp))
     Material3Card(
         modifier = Modifier
diff --git a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/WidgetScreen.kt b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/WidgetScreen.kt
index 3f33ebbb..8b20c2f1 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/WidgetScreen.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/learnwidgets/WidgetScreen.kt
@@ -13,9 +13,14 @@ import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.tooling.preview.Preview
 import com.guru.composecookbook.ui.utils.TestTags
 
+/**
+ * Composable function `WidgetScreen` displays a screen scaffolded with a top app bar and a scrollable list of material widgets.
+ * Uses ExperimentalMaterial3Api for experimental Material3 components.
+ */
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun WidgetScreen() {
+    // Scaffold with a top app bar and content
     Scaffold(
         modifier = Modifier.testTag(TestTags.WIDGET_SCREEN_ROOT),
         topBar = {
@@ -31,10 +36,16 @@ fun WidgetScreen() {
     )
 }
 
+
+/**
+ * Composable function `WidgetScreenContent` displays a lazy column containing various material widgets.
+ * @param modifier Modifier for layout customization.
+ */
 @Composable
 fun WidgetScreenContent(
     modifier: Modifier = Modifier,
 ) {
+    // LazyColumn for displaying a scrollable list of widgets
     LazyColumn(
         state = rememberLazyListState(),
         modifier = modifier,
@@ -52,6 +63,9 @@ fun WidgetScreenContent(
 }
 
 
+/**
+ * Preview function for the WidgetScreen content.
+ */
 @Preview
 @Composable
 fun PreviewScreen() {
diff --git a/app/src/main/java/com/guru/composecookbook/ui/templates/TemplateScreen.kt b/app/src/main/java/com/guru/composecookbook/ui/templates/TemplateScreen.kt
index 26f47711..bab9a9ab 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/templates/TemplateScreen.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/templates/TemplateScreen.kt
@@ -14,6 +14,12 @@ import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.dp
 import com.guru.composecookbook.ui.utils.TestTags
 
+/**
+ * A Composable function that displays a screen with a list of templates in a LazyColumn.
+ * Each item in the list is a button that, when clicked, starts the corresponding template activity.
+ *
+ * @param darkTheme A Boolean indicating whether the dark theme is enabled.
+ */
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun TemplateScreen(darkTheme: Boolean) {
@@ -41,6 +47,9 @@ fun TemplateScreen(darkTheme: Boolean) {
 }
 
 
+/**
+ * A list of template names to be displayed in the TemplateScreen.
+ */
 val templates = listOf(
     "Login",
     "Profiles",
diff --git a/app/src/main/java/com/guru/composecookbook/ui/templates/TemplatesActivity.kt b/app/src/main/java/com/guru/composecookbook/ui/templates/TemplatesActivity.kt
index 87760c3c..0db6ee06 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/templates/TemplatesActivity.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/templates/TemplatesActivity.kt
@@ -26,12 +26,21 @@ import com.guru.composecookbook.ui.home.clock.ClockDemo
 import com.guru.composecookbook.ui.home.timer.TimerDemo
 import com.guru.pinlock.PinLockView
 
+/**
+ * Activity responsible for displaying different templates based on the provided template type and dark theme setting.
+ *
+ * @property templateType The type of template to display, defaults to "Profiles" if not provided.
+ * @property darkTheme Boolean indicating whether to use dark theme for the templates.
+ */
 @OptIn(ExperimentalFoundationApi::class)
 class TemplatesActivity : ComponentActivity() {
 
     private val templateType: String by lazy { intent.getStringExtra(TYPE) ?: "Profiles" }
     private val darkTheme: Boolean by lazy { intent.getBooleanExtra(DARK_THEME, true) }
 
+    /**
+     * Creates the activity UI and sets up the necessary configurations and theme.
+     */
     @OptIn(ExperimentalMaterial3Api::class,
     ExperimentalAnimationApi::class,
     ExperimentalMaterialApi::class)
@@ -52,6 +61,14 @@ class TemplatesActivity : ComponentActivity() {
         private const val TYPE = "type"
         private const val DARK_THEME = "darkTheme"
 
+        /**
+         * Creates an intent to launch TemplatesActivity with the specified parameters.
+         *
+         * @param context The context from which the activity is launched.
+         * @param templateType The type of template to display.
+         * @param isDarkTheme Boolean indicating whether to use dark theme.
+         * @return Intent to launch TemplatesActivity.
+         */
         fun newIntent(context: Context, templateType: String, isDarkTheme: Boolean) =
             Intent(context, TemplatesActivity::class.java).apply {
                 putExtra(TYPE, templateType)
@@ -60,6 +77,12 @@ class TemplatesActivity : ComponentActivity() {
     }
 }
 
+
+/**
+ * Composable function that displays a specific template based on the provided template type.
+ *
+ * @param templateType The type of template to display.
+ */
 @OptIn(ExperimentalMaterial3Api::class,
 ExperimentalFoundationApi::class,
 ExperimentalAnimationApi::class,
@@ -80,6 +103,13 @@ fun TemplateApp(templateType: String) {
     }
 }
 
+
+/**
+ * Creates and returns a BiometricPrompt instance for biometric authentication.
+ *
+ * @param activity The FragmentActivity context to create BiometricPrompt.
+ * @return BiometricPrompt instance.
+ */
 private fun createBiometricPrompt(activity: FragmentActivity): BiometricPrompt {
     val executor = ContextCompat.getMainExecutor(activity)
 
diff --git a/app/src/main/java/com/guru/composecookbook/ui/utils/CommomComponents.kt b/app/src/main/java/com/guru/composecookbook/ui/utils/CommomComponents.kt
index b6b70729..05eaf4a7 100644
--- a/app/src/main/java/com/guru/composecookbook/ui/utils/CommomComponents.kt
+++ b/app/src/main/java/com/guru/composecookbook/ui/utils/CommomComponents.kt
@@ -24,7 +24,13 @@ import androidx.compose.ui.unit.sp
 import com.guru.composecookbook.theme.typography
 import com.guru.fontawesomecomposelib.FaIcon
 
-
+/**
+ * A Composable function that displays a heading section with a title, subtitle, and a divider.
+ *
+ * @param modifier Modifier to apply to the Column layout.
+ * @param title The title text to display.
+ * @param subtitle The subtitle text to display.
+ */
 @Composable
 fun HeadingSection(modifier: Modifier = Modifier, title: String = "", subtitle: String = "") {
     Column(
@@ -42,6 +48,13 @@ fun HeadingSection(modifier: Modifier = Modifier, title: String = "", subtitle:
     }
 }
 
+
+/**
+ * A Composable function that displays a title text with a specific style.
+ *
+ * @param modifier Modifier to apply to the Text component.
+ * @param title The title text to display.
+ */
 @Composable
 fun TitleText(modifier: Modifier = Modifier, title: String) {
     androidx.compose.material3.Text(
@@ -51,11 +64,28 @@ fun TitleText(modifier: Modifier = Modifier, title: String) {
     )
 }
 
+
+/**
+ * A Composable function that displays a subtitle text with a specific style.
+ *
+ * @param subtitle The subtitle text to display.
+ * @param modifier Modifier to apply to the Text component.
+ */
 @Composable
 fun SubtitleText(subtitle: String, modifier: Modifier = Modifier) {
     androidx.compose.material3.Text(text = subtitle, style = typography.subtitle2, modifier = modifier.padding(8.dp))
 }
 
+
+/**
+ * A Composable function that displays a rotating icon.
+ *
+ * @param state A Boolean to control the rotation state of the icon.
+ * @param asset The ImageVector asset to use as the icon.
+ * @param angle The angle in degrees to rotate the icon.
+ * @param duration The duration of the rotation animation in milliseconds.
+ * @param modifier Modifier to apply to the icon.
+ */
 @Composable
 fun RotateIcon(
     state: Boolean,
@@ -81,6 +111,10 @@ fun RotateIcon(
     )
 }
 
+
+/**
+ * A Composable function to preview the HeadingSection Composable.
+ */
 @Preview
 @Composable
 fun PreviewHeading() {