docs: update components JSDoc

src/components/base-component.js

@@ -7,6 +7,11 @@ import { setProperties } from './utilities/set-properties'
  * Utilizes the `sanitizeValue` function to validate inputs and the `setAttributes` function to set attributes on elements.
  */
 class BaseComponent {
+	/**
+	 * Initializes the base component instance with the provided configuration.
+	 *
+	 * @param {Object} config - The configuration object.
+	 */
 	constructor(config) {
 		this.config = sanitizeValue(config, 'object') || {}
 	}

src/components/button.js

@@ -6,12 +6,12 @@ import { removeEventListeners } from './utilities/remove-event-listeners'
 
 /**
  * @typedef {Object} ButtonConfig
- * @property {string} [id] - The ID of the button. If not provided, a default ID will be used.
- * @property {string} [className] - The class name(s) to be applied to the button.
+ * @property {string} id - The ID of the button. If not provided, a default ID will be used.
+ * @property {string} className - The class name(s) to be applied to the button.
  * @property {string} [icon] - The name of the icon to be displayed on the button.
  * @property {string} [text] - The text content of the button.
- * @property {string} [type='transparent'] - The type of the button, which affects its styling. Default is 'transparent'.
- * @property {Array<{type: string, func: Function}>} [events] - An array of event listener objects with `type` and `func` properties.
+ * @property {string} type='transparent' - The type of the button, which affects its styling. Default is 'transparent'.
+ * @property {Array<{type: string, func: Function}>} events - An array of event listener objects with `type` and `func` properties.
  */
 
 /**

src/components/checkbox.js

@@ -1,12 +1,34 @@
 import { sanitizeValue } from '@utilities/sanitize-value'
 import { BaseComponent } from './base-component'
 
+/**
+ * @typedef {Object} CheckboxConfig
+ * @property {string} id - The ID of the checkbox.
+ * @property {string} className - The class name(s) to be applied to the checkbox.
+ * @property {string} groupName - The group name of the checkbox.
+ * @property {boolean} hidden - The visibility of the checkbox.
+ * @property {string} targetId - The target ID of the checkbox.
+ */
+
+/**
+ * Represents a Checkbox component.
+ */
 class Checkbox extends BaseComponent {
+	/**
+	 * Initializes the checkbox instance with the provided configuration.
+	 *
+	 * @param {CheckboxConfig} config - The configuration object for the checkbox.
+	 */
 	constructor(config) {
 		super(config)
 		this.config = sanitizeValue(config, 'object')
 	}
 
+	/**
+	 * Creates a checkbox element based on the provided configuration.
+	 *
+	 * @returns {HTMLElement} The created checkbox element.
+	 */
 	create() {
 		const { id, className, targetId, groupName, hidden } = this.config
 
@@ -27,6 +49,11 @@ class Checkbox extends BaseComponent {
 		return checkbox
 	}
 
+	/**
+	 * Removes the checkbox element from the DOM based on the configuration ID.
+	 *
+	 * @returns {boolean} Returns true if the checkbox element is successfully removed, otherwise false.
+	 */
 	remove() {
 		const { id } = this.config
 		const elementId = `checkbox-${id}`

src/components/modal.js

@@ -1,14 +1,22 @@
 import { BaseComponent } from './base-component'
 import { sanitizeValue } from '@utilities/sanitize-value'
 
+/**
+ * @typedef {Object} ModalConfig
+ * @property {string} id - The ID of the modal.
+ * @property {string} icon - The name of the icon to be displayed on the modal.
+ * @property {string} title - The title of the modal.
+ * @property {Array<Instance>} buttonInstances - An array of button instances for modal.
+ */
+
 /**
  * Represents a Modal component.
  */
 class Modal extends BaseComponent {
 	/**
 	 * Initializes the modal instance with the provided configuration.
 	 *
-	 * @param {Object} config - The configuration object for the modal.
+	 * @param {ModalConfig} config - The configuration object for the modal.
 	 */
 	constructor(config) {
 		super(config)

src/components/page.js

@@ -2,12 +2,34 @@ import { BaseComponent } from './base-component'
 import { sanitizeValue } from '@utilities/sanitize-value'
 import { Button } from './button'
 
+/**
+ * @typedef {Object} PageConfig
+ * @property {string} id - The ID of the page.
+ * @property {object} elements - The object consist of elements for page.
+ * @property {number} zIndex - The z-index of the page.
+ */
+
+/**
+ * Represents a Page component.
+ */
 class Page extends BaseComponent {
+	/**
+	 * Initializes the page instance with the provided configuration.
+	 *
+	 * @param {PageConfig} config - The configuration object for the page.
+	 */
 	constructor(config) {
 		super(config)
 		this.config = sanitizeValue(config, 'object')
 	}
 
+	/**
+	 * Creates a page element based on the provided configuration.
+	 * Adds a header with an exit button if the z-index is greater than 10.
+	 * Appends header and body elements to the page based on the elements in the configuration.
+	 *
+	 * @returns {Element} The created page element.
+	 */
 	create() {
 		const { elements, zIndex, id } = this.config
 		const page = this._createContainer('div', {
@@ -60,6 +82,11 @@ class Page extends BaseComponent {
 		return page
 	}
 
+	/**
+	 * Removes the page element from the DOM along with its header and body elements if they exist.
+	 *
+	 * @returns {boolean} Returns true if the page element was successfully removed, otherwise false.
+	 */
 	remove() {
 		const { elements, id } = this.config
 

src/components/snackbar.js

@@ -1,23 +1,47 @@
 import { sanitizeValue } from '@utilities/sanitize-value'
 
+/**
+ * @typedef {Object} SnackbarConfig
+ * @property {string} message - The title of the snackbar.
+ */
+
+/**
+ * Represents a Snackbar component.
+ */
 class Snackbar {
 	static queue = []
 	static isDisplaying = false
 
+	/**
+	 * Initializes the snackbar instance with the provided configuration.
+	 *
+	 * @param {SnackbarConfig} config - The configuration object for the snackbar.
+	 */
 	constructor(config) {
 		this.config = sanitizeValue(config, 'object')
 	}
 
+	/**
+	 * Renders the snackbar message and removes it after displaying.
+	 */
 	renderThenRemove() {
 		const { message } = this.config
 		Snackbar.#enqueue(message)
 	}
 
+	/**
+	 * Adds a message to the snackbar queue and triggers the queue processing.
+	 *
+	 * @param {string} message - The message to be added to the queue.
+	 */
 	static #enqueue(message) {
 		Snackbar.queue.push(message)
 		Snackbar.#processQueue()
 	}
 
+	/**
+	 * Processes the snackbar queue by displaying the next message in the queue if not already displaying a message.
+	 */
 	static #processQueue() {
 		if (Snackbar.isDisplaying || Snackbar.queue.length === 0) {
 			return
@@ -28,6 +52,11 @@ class Snackbar {
 		Snackbar.#display(message)
 	}
 
+	/**
+	 * Displays a snackbar message on the screen.
+	 *
+	 * @param {string} message - The message to be displayed in the snackbar.
+	 */
 	static #display(message) {
 		const isSnackbar = document.getElementById('snackbar')
 
@@ -45,6 +74,11 @@ class Snackbar {
 		Snackbar.#remove(snackbar)
 	}
 
+	/**
+	 * Removes the snackbar element after a specified duration by animating its removal.
+	 *
+	 * @param {Element} snackbar - The snackbar element to be removed.
+	 */
 	static #remove(snackbar) {
 		let start
 		const duration = 3000

src/components/tab.js

@@ -3,7 +3,7 @@ import { sanitizeValue } from '@utilities/sanitize-value'
 
 /**
  * @typedef {Object} TabConfig
- * @property {BaseComponent[]} buttonInstances - An array of button instances that will be added to the tab.
+ * @property {Array<Instance>} buttonInstances - An array of button instances that will be added to the tab.
  */
 
 /**

src/components/textarea.js

@@ -1,12 +1,25 @@
 import { BaseComponent } from './base-component'
 import { sanitizeValue } from '@utilities/sanitize-value'
 
+/**
+ * Represents a Textarea component.
+ */
 class Textarea extends BaseComponent {
+	/**
+	 * Initializes the textarea instance with the provided configuration.
+	 *
+	 * @param {Object} config - The configuration object for the textarea.
+	 */
 	constructor(config) {
 		super(config)
 		this.config = sanitizeValue(config)
 	}
 
+	/**
+	 * Creates a textarea element based on the provided configuration.
+	 *
+	 * @returns {HTMLElement} The created textarea element.
+	 */
 	create() {
 		const { id, className, placeholder, text, readOnly, hidden } = this.config
 		const textarea = this._createContainer(
@@ -27,6 +40,11 @@ class Textarea extends BaseComponent {
 		return textarea
 	}
 
+	/**
+	 * Removes the textarea element from the DOM based on the configuration ID.
+	 *
+	 * @returns {boolean} Returns true if the textarea element was successfully removed, otherwise false.
+	 */
 	remove() {
 		const { id } = this.config
 		const elementId = `textarea-${id}`
@@ -40,6 +58,11 @@ class Textarea extends BaseComponent {
 		return false
 	}
 
+	/**
+	 * Locks the textarea element to make it read-only.
+	 *
+	 * @returns {boolean} Returns true if the textarea element was successfully locked, otherwise false.
+	 */
 	lock() {
 		const { id } = this.config
 		const elementId = `textarea-${id}`
@@ -53,6 +76,11 @@ class Textarea extends BaseComponent {
 		return false
 	}
 
+	/**
+	 * Unlocks the textarea element to make it editable.
+	 *
+	 * @returns {boolean} Returns true if the textarea element was successfully unlocked, otherwise false.
+	 */
 	unlock() {
 		const { id } = this.config
 		const elementId = `textarea-${id}`