added docblocks for drawer component

addon/components/drawer.js

@@ -4,21 +4,62 @@ import { action } from '@ember/object';
 import { later } from '@ember/runloop';
 import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
+/**
+ * DrawerComponent provides a UI drawer element with several features such as
+ * open, close, toggle, and resize capabilities.
+ */
 export default class DrawerComponent extends Component {
+    /** Node of the drawer element. */
     @tracked drawerNode;
+
+    /** Node of the drawer container element. */
     @tracked drawerContainerNode;
+
+    /** Node of the drawer panel element. */
     @tracked drawerPanelNode;
+
+    /** Node of the gutter element. */
     @tracked gutterNode;
+
+    /** Indicates if the backdrop is not present. */
     @tracked noBackdrop = true;
+
+    /** Indicates if the drawer is open. */
     @tracked isOpen = true;
+
+    /** Indicates if the drawer is resizable. */
     @tracked isResizable = true;
+
+    /** Indicates if the drawer is currently being resized. */
     @tracked isResizing = false;
+
+    /** Indicates if the drawer is minimized. */
     @tracked isMinimized = false;
+
+    /** Current X position of the mouse. */
     @tracked mouseX = 0;
+
+    /** Current Y position of the mouse. */
     @tracked mouseY = 0;
+
+    /** Height of the drawer. */
     @tracked height = 300;
+
+    /** Indicates if the drawer has been rendered. */
     @tracked _rendered = false;
 
+    /** Context object providing drawer control functions and state. */
+    context = {
+        toggle: this.toggle,
+        open: this.open,
+        close: this.close,
+        toggleMinimize: this.toggleMinimize,
+        minimize: this.minimize,
+        maximize: this.maximize,
+        isOpen: this.isOpen,
+    };
+
+    /** Context object providing drawer control functions and state. */
     context = {
         toggle: this.toggle,
         open: this.open,
@@ -29,6 +70,10 @@ export default class DrawerComponent extends Component {
         isOpen: this.isOpen,
     };
 
+    /**
+     * Sets up the component, establishes default properties, and calls the onLoad callback if provided.
+     * @param {HTMLElement} element - The element to be used as the drawer node.
+     */
     @action setupComponent(element) {
         this.drawerNode = element;
         this.height = getWithDefault(this.args, 'height', this.height);
@@ -51,34 +96,49 @@ export default class DrawerComponent extends Component {
         );
     }
 
+    /**
+     * Assigns a DOM node to a tracked property.
+     * @param {string} property - The property name to which the node will be assigned.
+     * @param {HTMLElement} node - The DOM node to be tracked.
+     */
     @action setupNode(property, node) {
         this[`${property}Node`] = node;
     }
 
+    /** Toggles the open state of the drawer. */
     @action toggle() {
         this.isOpen = !this.isOpen;
     }
 
+    /** Opens the drawer. */
     @action open() {
         this.isOpen = true;
     }
 
+    /** Closes the drawer. */
     @action close() {
         this.isOpen = false;
     }
 
+    /** Toggles the minimized state of the drawer. */
     @action toggleMinimize() {
         this.isMinimized = !this.isMinimized;
     }
 
+    /** Minimizes the drawer. */
     @action minimize() {
         this.isMinimized = true;
     }
 
+    /** Maximizes the drawer. */
     @action maximize() {
         this.isMinimized = false;
     }
 
+    /**
+     * Starts the resize process for the drawer.
+     * @param {MouseEvent} event - The mouse event that initiates the resize.
+     */
     @action startResize(event) {
         const disableResize = getWithDefault(this.args, 'disableResize', false);
         const onResizeStart = getWithDefault(this.args, 'onResizeStart', null);
@@ -116,6 +176,10 @@ export default class DrawerComponent extends Component {
         }
     }
 
+    /**
+     * Resizes the drawer during a mousemove event.
+     * @param {MouseEvent} event - The mouse event that triggers the resize.
+     */
     @action resize(event) {
         const disableResize = getWithDefault(this.args, 'disableResize', false);
         const onResize = getWithDefault(this.args, 'onResize', null);
@@ -154,6 +218,10 @@ export default class DrawerComponent extends Component {
         }
     }
 
+    /**
+     * Stops the resizing process and cleans up event listeners.
+     * @param {MouseEvent} event - The mouse event that ends the resize.
+     */
     @action stopResize(event) {
         const onResizeEnd = getWithDefault(this.args, 'onResizeEnd', null);
         const { drawerPanelNode } = this;