refactor(snackbar): review and enhance

Co-authored-by: arashagp <[email protected]>

Author: njfamirm

packages/snackbar/src/lib/handler.ts

@@ -9,12 +9,10 @@ const logger = createLogger(`${__package_name__}/handler`);
 
 /**
  * @property content - Content to be displayed in the snackbar.
- * @property {action} - The action button configuration.
+ * @property [action] - The action button configuration.
  * @property action.label - The label for the action button.
  * @property action.handler - The handler function for the action button.
- * @property duration - Duration for which the snackbar is displayed. `-1` for infinite duration.
- * Duration for which the snackbar is displayed.
- * `-1` for infinite duration.
+ * @property duration - Duration for which the snackbar is displayed. `infinite` for infinite duration.
  * @property addCloseButton - Whether to add a close button to the snackbar.
  */
 export type SnackbarOptions = {
@@ -28,7 +26,16 @@ export type SnackbarOptions = {
 };
 
 /**
- * Signal for when the snackbar action button is clicked.
+ * Signal triggered when the snackbar action button is clicked.
+ *
+ * This signal is used to notify listeners that the action button
+ * on the snackbar component has been clicked. It can be used to
+ * perform any necessary actions in response to the button click.
+ *
+ * @example
+ * snackbarActionButtonClickedSignal.addListener(() => {
+ *   console.log('Snackbar action button was clicked!');
+ * });
  */
 export const snackbarActionButtonClickedSignal = new AlwatrTrigger({
   name: 'snackbar-action-button-clicked',
@@ -42,14 +49,13 @@ export const snackbarActionButtonClickedSignal = new AlwatrTrigger({
  *
  * snackbarSignal.notify({
  *   content: 'This is a snackbar message',
- *   // The following properties are optional.
  *   action: {
  *     label: 'Undo',
  *     handler: () => {
  *       console.log('Action button clicked');
  *     },
  *   },
- *   duration: '4s',
+ *   duration: '5s',
  *   addCloseButton: true,
  * });
  */
@@ -65,16 +71,14 @@ let unsubscribeActionButtonHandler: (() => void) | null = null;
 
 /**
  * Displays the snackbar with the given options.
+ *
  * @param options - Options for configuring the snackbar.
  */
 async function showSnackbar(options: SnackbarOptions): Promise<void> {
   logger.logMethodArgs?.('showSnackbar', {options});
 
-  // Parse the duration
-  if (options.duration != null) options.duration = parseDuration(options.duration);
-
   // Set default duration if not provided
-  options.duration = parseDuration('4s');
+  options.duration ??= '5s';
 
   const element = document.createElement('snack-bar') as SnackbarComponent;
 
@@ -89,14 +93,16 @@ async function showSnackbar(options: SnackbarOptions): Promise<void> {
 
     // Subscribe to the action button click
     unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(() => {
+      logger.logOther?.('Snackbar action button clicked.');
+
       options.action!.handler();
 
-      return closeSnackbar_();
+      return closeSnackbar();
     }).unsubscribe;
   }
 
   let closed = false;
-  const closeSnackbar_ = async () => {
+  const closeSnackbar = async () => {
     if (closed === true) return;
     logger.logMethodArgs?.('closeSnackbar', {options});
 
@@ -107,11 +113,11 @@ async function showSnackbar(options: SnackbarOptions): Promise<void> {
 
   // Close the last snackbar if it exists
   await closeLastSnackbar?.();
-  closeLastSnackbar = closeSnackbar_;
+  closeLastSnackbar = closeSnackbar;
   document.body.appendChild(element);
 
   // Set a timeout to close the snackbar if duration is not infinite
-  if (options.duration !== -1) {
-    waitForTimeout(parseDuration(options.duration)).then(closeSnackbar_);
+  if (options.duration !== 'infinite') {
+    waitForTimeout(parseDuration(options.duration)).then(closeSnackbar);
   }
 }