docs: Added ui components section docs

Changelog: documentation

Author: bajrangCoder

docs/ui-components/dialogs/alert.md

@@ -1,17 +1,49 @@
 # Alert
 
-:::warning
-**Note:** Work is in progress 🚧
-:::
+The `alert` component in Acode is a dialog box for displaying messages, warnings, or errors to users within a modal window. Similar to the traditional JavaScript `alert()`.
 
-We are currently working on this section to provide you with detailed and comprehensive information about how Acode plugins work. Please check back soon for updates!
+## Usage
 
-## Contribute to the Documentation
+To use the `alert` component in your Acode plugin, you can require it using the following code:
 
-We welcome contributions from the community! If you would like to help improve this documentation, please visit our [GitHub repository](https://github.com/bajrangCoder/acode-plugin-docs) and follow the contribution guidelines.
+```javascript
+const alert = acode.require('alert');
+```
 
-:::tip
-You can suggest changes, add new content, or improve existing sections. Every bit of help is appreciated! 🤗
-:::
+Once you have the `alert` component, you can create an instance with the following syntax:
 
-For more information, see official [Guide](https://acode.app/plugin-docs).
+```js
+alert(
+  'Title of Alert',          // Title of the alert modal
+  'The alert body message..', // Message to display in the body of the alert modal
+  () => {
+    // Optional function to call when the alert modal is closed
+    window.toast('Alert modal closed', 4000);
+  }
+);
+```
+
+## Parameters
+
+- **titleText (string):**
+  - The text to display in the title of the alert modal.
+
+- **message (string):**
+  - The message to display in the body of the alert modal.
+
+- **onhide (Function):**
+  - An optional function to call when the alert modal is closed.
+
+## Example
+
+```javascript:line-numbers{1,7}
+const alert = acode.require('alert');
+
+const handleOnHide = () => {
+  window.toast('Alert modal closed', 4000);
+};
+
+alert('Title of Alert', 'The alert body message..', handleOnHide);
+```
+
+In this example, when the alert modal is closed, the `handleOnHide` function will be called, and a toast message **'Alert modal closed'** will be displayed for 4000 milliseconds. This allows you to perform additional actions or provide feedback when the user interacts with the alert dialog.

docs/ui-components/dialogs/color-picker.md

@@ -1,17 +1,42 @@
 # Color Picker
 
-:::warning
-**Note:** Work is in progress 🚧
-:::
+The `colorPicker` dialog box in Acode offers a way for users to choose colors within your plugins. This feature-rich color picker opens a dialog box showcasing a spectrum of color options, providing users with an intuitive and visually pleasing experience.
 
-We are currently working on this section to provide you with detailed and comprehensive information about how Acode plugins work. Please check back soon for updates!
+## Usage
 
-## Contribute to the Documentation
+To integrate the `colorPicker` component into your Acode plugin, you can require it using the following code:
 
-We welcome contributions from the community! If you would like to help improve this documentation, please visit our [GitHub repository](https://github.com/bajrangCoder/acode-plugin-docs) and follow the contribution guidelines.
+```javascript
+const colorPicker = acode.require('colorPicker');
+```
 
-:::tip
-You can suggest changes, add new content, or improve existing sections. Every bit of help is appreciated! 🤗
-:::
+Once you have the `colorPicker` component, you can utilize it by calling the function and passing in the desired default color as a string argument:
 
-For more information, see official [Guide](https://acode.app/plugin-docs).
+```javascript
+let selectedColor = await colorPicker('#ff0000');
+```
+
+In this example, the color picker dialog box will open with the default color set to red (`#ff0000`).
+
+## Parameters
+
+- **`defaultColor (string):`**
+  - The default color that the color picker will display initially. It should be a string representing a color in hexadecimal format or rgba or hsl.
+
+- **`onhide (Function):`**
+  - An optional callback function to be called when the color picker dialog box is closed.
+
+## Returns
+
+The `colorPicker` component returns a promise that resolves to a string representing the `selected color`. This color can then be used in your plugin based on user input.
+
+## Example
+
+```javascript:line-numbers{1,3}
+const colorPicker = acode.require('colorPicker');
+
+let selectedColor = await colorPicker('#ff0000');
+console.log(`Selected Color: ${selectedColor}`);
+```
+
+In this example, the `colorPicker` component is used to open a color picker dialog box with the default color set to red. The selected color is then logged to the console, demonstrating how to retrieve and utilize the user's color selection.

docs/ui-components/dialogs/confirm.md

@@ -1,17 +1,47 @@
 # Confirm
 
-:::warning
-**Note:** Work is in progress 🚧
-:::
+The `confirm` ui component in Acode is a dialog box for displaying confirmation message modals to users. Whether you're seeking user approval for a critical action or confirming a decision, this component is best suited for this process.
 
-We are currently working on this section to provide you with detailed and comprehensive information about how Acode plugins work. Please check back soon for updates!
+## Usage
 
-## Contribute to the Documentation
+To use the `confirm` component in your Acode plugin, you can require it using the following code:
 
-We welcome contributions from the community! If you would like to help improve this documentation, please visit our [GitHub repository](https://github.com/bajrangCoder/acode-plugin-docs) and follow the contribution guidelines.
+```javascript
+const confirm = acode.require('confirm');
+```
 
-:::tip
-You can suggest changes, add new content, or improve existing sections. Every bit of help is appreciated! 🤗
-:::
+Once you have the `confirm` component, you can create an instance with the following syntax:
 
-For more information, see official [Guide](https://acode.app/plugin-docs).
+```javascript
+const confirmation = await confirm(
+  'Warning',                   // Title of the confirmation message modal
+  'Are you sure?'              // Body of the confirmation message modal
+);
+```
+
+## Parameters
+
+- **titleText (string):**
+  - A string representing the title of the confirmation message modal. This title will be displayed at the top of the message modal.
+
+- **message (string):**
+  - A string representing the body of the confirmation message modal.
+
+## Returns
+
+The `confirm` component returns a promise that resolves to a `boolean` value. The boolean value represents whether the user confirmed or denied the message. A value of `true` represents confirmation, while `false` represents denial.
+
+## Example
+
+```javascript:line-numbers{1,3}
+const confirm = acode.require('confirm');
+
+let confirmation = await confirm('Warning', 'Are you sure?');
+if (confirmation) {
+  window.toast('File deleted...', 4000);
+} else {
+  window.toast('File not deleted...', 4000);
+}
+```
+
+In this example, the `confirm` component is utilized to ask the user if they want to delete a file. If the user confirms, the message "File deleted." will be toasted. If the user denies, the message "File not deleted." will be toasted.

docs/ui-components/dialogs/custom-dialog.md

@@ -1,17 +1,104 @@
 # Custom Dialog
 
-:::warning
-**Note:** Work is in progress 🚧
-:::
+The `dialogBox` API in Acode provides a way to create custom dialog boxes within your plugins. Basically it creates a dialog and gives you the freedom to display whatever you wish.
 
-We are currently working on this section to provide you with detailed and comprehensive information about how Acode plugins work. Please check back soon for updates!
+## Getting Started
 
-## Contribute to the Documentation
+To use the DialogBox ui component in your Acode plugin, you can require it using the following code:
 
-We welcome contributions from the community! If you would like to help improve this documentation, please visit our [GitHub repository](https://github.com/bajrangCoder/acode-plugin-docs) and follow the contribution guidelines.
+```javascript
+const DialogBox = acode.require('dialogBox');
+```
 
-:::tip
-You can suggest changes, add new content, or improve existing sections. Every bit of help is appreciated! 🤗
-:::
+Once you have the DialogBox component, you can create a new instance with the following syntax:
 
-For more information, see official [Guide](https://acode.app/plugin-docs).
+```javascript
+const myDialogBox = DialogBox(
+  'Title',                    // Title of the dialog box
+  '<h1>Dialog content</h1>',  // Content of the dialog box (HTML supported)
+  'hideButtonText',           // Text for the hide button
+  'cancelButtonText'          // Text for the cancel button
+);
+```
+
+### Forming a Dialog Box Instance
+
+```javascript
+/**
+ * Dialog Box Instance
+ * @param {string} titleText - Title text
+ * @param {string} html - HTML string
+ * @param {string} [hideButtonText] - Text for hide button
+ * @param {string} [cancelButtonText] - Text for cancel button
+ * @returns {PromiseLike} - A promise representing the Dialog Box instance
+ */
+```
+
+## Methods
+
+### 1. `hide()`
+
+The `hide` method is used to hide the dialog box.
+
+```javascript
+myDialogBox.hide();
+```
+
+### 2. `wait(time: number)`
+
+The `wait` method disables the OK button for the specified time (in milliseconds).
+
+```javascript
+myDialogBox.wait(1000);
+```
+
+### 3. `onhide(callback: Function)`
+
+The `onhide` method sets a callback function to be called when the dialog box is hidden.
+
+```javascript
+myDialogBox.onhide(() => {
+  console.log('Dialog box is hidden');
+});
+```
+
+### 4. `onclick(callback: Function)`
+
+The `onclick` method sets a callback function to be called when the content is clicked.
+
+```javascript
+myDialogBox.onclick((e) => {
+  const target = e.target;
+  console.log(target, 'is clicked');
+});
+```
+
+### 5. `then(callback: Function)`
+
+The `then` method sets a callback function to be called when the OK button is clicked.
+
+```javascript
+myDialogBox.then(() => {
+  console.log('OK button is clicked');
+});
+```
+
+### 6. `ok(callback: Function)`
+
+The `ok` method sets a callback function to be called when the OK button is clicked.
+
+```javascript
+myDialogBox.ok(() => {
+  console.log('OK button is clicked');
+});
+```
+
+### 7. `cancel(callback: Function)`
+
+The `cancel` method sets a callback function to be called when the Cancel button is clicked.
+
+```javascript
+myDialogBox.cancel(() => {
+  console.log('Cancel button is clicked');
+});
+```

docs/ui-components/dialogs/loader.md

@@ -1,17 +1,101 @@
 # Loader
 
-:::warning
-**Note:** Work is in progress 🚧
-:::
+The `loader` ui component in Acode is utility that help you to display loading dialogs with customizable titles and messages. These loading dialogs offer an informative and engaging experience for users while waiting for various processes to complete. The component also provides options for setting timeouts and callback functions for handling loading process cancellations.
+
+## Methods and Usage
+
+The `loader` component offers a variety of methods to control and manage the loading dialog:
+
+### `showTitleLoader()`
 
-We are currently working on this section to provide you with detailed and comprehensive information about how Acode plugins work. Please check back soon for updates!
+- **Usage:** Shows the title loader.
 
-## Contribute to the Documentation
+- **Parameters:**
+  - `immortal {boolean}` If true, the loader will not be removed automatically
+
+### `removeTitleLoader()`
+
+- **Usage:** Hides the title loader.
+
+- **Parameters:**
+  - `immortal {boolean}` If not true, the loader will not remove when immortal was true when it was created.
 
-We welcome contributions from the community! If you would like to help improve this documentation, please visit our [GitHub repository](https://github.com/bajrangCoder/acode-plugin-docs) and follow the contribution guidelines.
 
 :::tip
-You can suggest changes, add new content, or improve existing sections. Every bit of help is appreciated! 🤗
+`showTitleLoader()` & `removeTitleLoader()` are loader methods to create and destroy a small spinner from title. Its good while opening any file in editor or working inside editor
+:::
+
+### `create(options: LoaderOptions)`
+
+- **Usage:** Creates a new loading dialog with the specified options.
+- **Parameters:**
+  - `titleText (string)`: The title text to display on the loading dialog.
+  - `message (string)`: The message to display on the loading dialog.
+  - `cancel (object)`: An object containing the following properties:
+    - `timeout (number)`: The time (in milliseconds) after which the loading process will automatically be cancelled.
+    - `callback (Function)`: A function that will be called when the loading process is cancelled.
+
+### `destroy()`
+
+- **Usage:** Removes the loading dialog from the DOM permanently.
+
+### `hide()`
+
+- **Usage:** Hides the loading dialog temporarily. The dialog can be restored using the `show()` method.
+
+### `show()`
+
+- **Usage:** Shows a previously hidden loading dialog.
+
+:::info
+The `create()` method should be called before using other methods except `showTitleLoader()` & `removeTitleLoader()`.
 :::
 
-For more information, see official [Guide](https://acode.app/plugin-docs).
+## Example
+
+```javascript:line-numbers{1,4-7,11,16,21,25,29}
+const loader = acode.require("loader");
+
+// Create the loader with specified options
+loader.create("Title Text", "Message...", {
+  timeout: 5000,
+  callback: () => window.toast("Loading cancelled", 4000),
+});
+
+// Hide the loader after 2 seconds
+setTimeout(() => {
+  loader.hide();
+}, 2000);
+
+// Show the loader after 4 seconds
+setTimeout(() => {
+  loader.show();
+}, 4000);
+
+// Destroy the loader after 6 seconds
+setTimeout(() => {
+  loader.destroy();
+}, 6000);
+
+// example of `showTitleLoader()` & `removeTitleLoader()`
+loader.showTitleLoader();
+
+// remove the title loader after 4 seconds
+setTimeout(() => {
+  loader.removeTitleLoader();
+}, 4000);
+```
+
+In this example, the `create()` method is called with the specified options to create a loading dialog. The loader is then hidden after 2 seconds, shown after 4 seconds, and finally destroyed after 6 seconds.
+
+:::tip
+
+- Use the `loader` component to provide informative loading dialogs during time-consuming operations.
+- Utilize the `timeout` and `callback` options to handle cancellations gracefully.
+- Show and hide the loader as needed to keep users informed about the process.
+  :::
+
+:::danger
+
+- Be cautious with long timeouts, as it may affect the user experience.
+  :::