From f73ae46eb7f40fdcadbf2ac475b4a6b0c6dd8af4 Mon Sep 17 00:00:00 2001 From: "S. Amir Mohammad Najafi" Date: Tue, 17 Dec 2024 10:00:16 +0330 Subject: [PATCH 1/6] docs: same style for all --- README.md | 8 +++++--- packages/eslint-config/README.md | 2 ++ packages/prettier-config/README.md | 2 ++ packages/snackbar/README.md | 5 +---- packages/snackbar/package.json | 2 +- packages/typescript-config/README.md | 2 ++ 6 files changed, 13 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index d43421b..6c1842b 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,11 @@ Here is a brief overview of the included libraries: 1. [`element`](./packages/element): Utility functions and mixins for building high-performance web components with Lit. 2. [`alpine`](./packages/alpine): Utility functions to enhance Alpine.js usage with backup support. -3. [`typescript-config`](./packages/typescript-config): Base TypeScript configuration for Nexim projects. -4. [`prettier-config`](./packages/prettier-config): Base Prettier configuration for Nexim projects. -5. [`eslint-config`](./packages/eslint-config): Base Eslint configuration for Nexim projects. +3. [`snackbar`](./packages/snackbar): Snackbar component, It includes utilities for managing the snackbar's state and animations. +4. [`service-worker`](./packages/service-worker): Utilities to simplify the usage of service workers in your web applications. +5. [`typescript-config`](./packages/typescript-config): Base TypeScript configuration for Nexim projects. +6. [`prettier-config`](./packages/prettier-config): Base Prettier configuration for Nexim projects. +7. [`eslint-config`](./packages/eslint-config): Base Eslint configuration for Nexim projects. For more detailed information and guidelines on how to use each package, please refer to each package's README. diff --git a/packages/eslint-config/README.md b/packages/eslint-config/README.md index 3b7fb64..fdce608 100644 --- a/packages/eslint-config/README.md +++ b/packages/eslint-config/README.md @@ -6,6 +6,8 @@ ![NPM Downloads](https://img.shields.io/npm/dm/%40nexim%2Feslint-config) ![NPM License](https://img.shields.io/npm/l/%40nexim%2Feslint-config) +## Overview + Alwatr ECMAScript Style Guide as a ESLint [shareable configurations](http://eslint.org/docs/developer-guide/shareable-configs.html). ## Installation diff --git a/packages/prettier-config/README.md b/packages/prettier-config/README.md index 0902b8d..1bf300d 100644 --- a/packages/prettier-config/README.md +++ b/packages/prettier-config/README.md @@ -6,6 +6,8 @@ ![NPM Downloads](https://img.shields.io/npm/dm/%40nexim%2Fprettier-config) ![NPM License](https://img.shields.io/npm/l/%40nexim%2Fprettier-config) +## Overview + Nexim's [shareable configurations](https://prettier.io/docs/en/configuration.html#sharing-configurations) for [Prettier](https://prettier.io/). ## Installation diff --git a/packages/snackbar/README.md b/packages/snackbar/README.md index 4119cee..fe8e9af 100644 --- a/packages/snackbar/README.md +++ b/packages/snackbar/README.md @@ -1,7 +1,5 @@ # @nexim/snackbar -This package provides a customizable snackbar component for displaying brief messages to users. It includes utilities for managing the snackbar's state and animations. - ![NPM Version](https://img.shields.io/npm/v/%40nexim%2Fsnackbar) ![npm bundle size](https://img.shields.io/bundlephobia/min/%40nexim%2Fsnackbar) ![Build & Lint & Test](https://github.com/the-nexim/nanolib/actions/workflows/build-lint-test.yaml/badge.svg) @@ -10,7 +8,7 @@ This package provides a customizable snackbar component for displaying brief mes ## Overview -`@nexim/snackbar` is a versatile library designed to provide a customizable snackbar component for displaying brief messages to users. It includes utilities for managing the snackbar's state and animations, ensuring efficiency and scalability in high-performance projects. +Snackbar component, It includes utilities for managing the snackbar's state and animations. ## Installation @@ -34,7 +32,6 @@ import {snackbarSignal} from '@nexim/snackbar'; snackbarSignal.notify({ content: 'This is a snackbar message', - // The following properties are optional. action: { label: 'Undo', handler: () => { diff --git a/packages/snackbar/package.json b/packages/snackbar/package.json index 136f84b..fc9738a 100644 --- a/packages/snackbar/package.json +++ b/packages/snackbar/package.json @@ -1,7 +1,7 @@ { "name": "@nexim/snackbar", "version": "0.0.0", - "description": "A customizable snackbar component for displaying brief messages to users, with state management and animation utilities.", + "description": "Snackbar component, It includes utilities for managing the snackbar's state and animations.", "keywords": [ "snackbar", "notification", diff --git a/packages/typescript-config/README.md b/packages/typescript-config/README.md index 812d632..a7e5d31 100644 --- a/packages/typescript-config/README.md +++ b/packages/typescript-config/README.md @@ -6,6 +6,8 @@ ![NPM Downloads](https://img.shields.io/npm/dm/%40nexim%2Ftypescript-config) ![NPM License](https://img.shields.io/npm/l/%40nexim%2Ftypescript-config) +## Overview + This is a base TypeScript configuration for Nexim projects. ## installation From 9de596e12f8c65c84891a5d0fd12c898342b5338 Mon Sep 17 00:00:00 2001 From: "S. Amir Mohammad Najafi" Date: Tue, 17 Dec 2024 10:11:48 +0330 Subject: [PATCH 2/6] refactor(snackbar): review and enhance Co-authored-by: arashagp --- packages/snackbar/src/lib/handler.ts | 33 +++++++++++++++++----------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/packages/snackbar/src/lib/handler.ts b/packages/snackbar/src/lib/handler.ts index 07581e6..020a15b 100644 --- a/packages/snackbar/src/lib/handler.ts +++ b/packages/snackbar/src/lib/handler.ts @@ -9,12 +9,10 @@ const logger = /* @__PURE__ */ 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. `infinite` for infinite 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,15 +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 { logger.logMethodArgs?.('showSnackbar', {options}); - // Parse the duration - // Set default duration if not provided - options.duration ??= '4s'; + options.duration ??= '5s'; const element = document.createElement('snack-bar') as SnackbarComponent; @@ -88,14 +93,16 @@ async function showSnackbar(options: SnackbarOptions): Promise { // 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}); @@ -106,11 +113,11 @@ async function showSnackbar(options: SnackbarOptions): Promise { // 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 !== 'infinite') { - waitForTimeout(parseDuration(options.duration)).then(closeSnackbar_); + waitForTimeout(parseDuration(options.duration)).then(closeSnackbar); } } From 2d5fdf7fe84a18bec8d1ff711e611da56dbbcc35 Mon Sep 17 00:00:00 2001 From: "S. Amir Mohammad Najafi" Date: Tue, 17 Dec 2024 10:35:50 +0330 Subject: [PATCH 3/6] refactor(snackbar): separation files and remove function action button handler params Co-authored-by: arashagp --- packages/snackbar/src/lib/handler.ts | 85 +++++++--------------------- packages/snackbar/src/lib/signal.ts | 39 +++++++++++++ packages/snackbar/src/lib/type.ts | 19 +++++++ 3 files changed, 79 insertions(+), 64 deletions(-) create mode 100644 packages/snackbar/src/lib/signal.ts create mode 100644 packages/snackbar/src/lib/type.ts diff --git a/packages/snackbar/src/lib/handler.ts b/packages/snackbar/src/lib/handler.ts index 020a15b..2663eec 100644 --- a/packages/snackbar/src/lib/handler.ts +++ b/packages/snackbar/src/lib/handler.ts @@ -1,72 +1,21 @@ -import {AlwatrSignal, AlwatrTrigger} from '@alwatr/flux'; import {createLogger} from '@alwatr/logger'; -import {parseDuration, type Duration} from '@alwatr/parse-duration'; +import {parseDuration} from '@alwatr/parse-duration'; import {waitForTimeout} from '@alwatr/wait'; -import type {SnackbarComponent} from './element.js'; +import {snackbarActionButtonClickedSignal, snackbarSignal} from './signal.js'; -const logger = /* @__PURE__ */ createLogger(`${__package_name__}/handler`); +import type {SnackbarOptions} from './type.js'; -/** - * @property content - Content to be displayed in the snackbar. - * @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. `infinite` for infinite duration. - * @property addCloseButton - Whether to add a close button to the snackbar. - */ -export type SnackbarOptions = { - content: string; - action?: { - label: string; - handler: () => void; - }; - duration?: Duration | 'infinite'; - addCloseButton?: boolean; -}; +const logger = /* @__PURE__ */ createLogger(`${__package_name__}/handler`); /** - * 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!'); - * }); + * Store the function to close the last snackbar. */ -export const snackbarActionButtonClickedSignal = new AlwatrTrigger({ - name: 'snackbar-action-button-clicked', -}); +let closeLastSnackbar: (() => Promise) | null = null; /** - * Signal for displaying the snackbar. - * - * @example - * import {snackbarSignal} from '@nexim/snackbar'; - * - * snackbarSignal.notify({ - * content: 'This is a snackbar message', - * action: { - * label: 'Undo', - * handler: () => { - * console.log('Action button clicked'); - * }, - * }, - * duration: '5s', - * addCloseButton: true, - * }); + * Store the function to unsubscribe the action button handler after close or action button clicked. */ -export const snackbarSignal = /* @__PURE__ */ new AlwatrSignal({name: 'snackbar'}); - -// Subscribe to the snackbar signal to show the snackbar when the signal is emitted. -snackbarSignal.subscribe((options) => { - showSnackbar(options); -}); - -let closeLastSnackbar: (() => Promise) | null = null; let unsubscribeActionButtonHandler: (() => void) | null = null; /** @@ -80,7 +29,7 @@ async function showSnackbar(options: SnackbarOptions): Promise { // Set default duration if not provided options.duration ??= '5s'; - const element = document.createElement('snack-bar') as SnackbarComponent; + const element = document.createElement('snack-bar'); element.setAttribute('content', options.content); @@ -91,13 +40,16 @@ async function showSnackbar(options: SnackbarOptions): Promise { if (options.action != null) { element.setAttribute('action-button-label', options.action.label); - // Subscribe to the action button click - unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(() => { - logger.logOther?.('Snackbar action button clicked.'); - - options.action!.handler(); + const actionButtonClickHandler = (event: {id: string}) => { + if (event.id !== options.action!.id) return; + logger.logOther?.('Snackbar action button clicked.', event); return closeSnackbar(); + }; + + // Subscribe to the action button click + unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(actionButtonClickHandler.bind(null), { + once: true, }).unsubscribe; } @@ -121,3 +73,8 @@ async function showSnackbar(options: SnackbarOptions): Promise { waitForTimeout(parseDuration(options.duration)).then(closeSnackbar); } } + +// Subscribe to the snackbar signal to show the snackbar when the signal is emitted. +snackbarSignal.subscribe((options) => { + showSnackbar(options); +}); diff --git a/packages/snackbar/src/lib/signal.ts b/packages/snackbar/src/lib/signal.ts new file mode 100644 index 0000000..d2e3fd3 --- /dev/null +++ b/packages/snackbar/src/lib/signal.ts @@ -0,0 +1,39 @@ +import {AlwatrSignal} from '@alwatr/flux'; + +import type {SnackbarOptions} from './type.js'; + +/** + * 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 = /* @__PURE__ */ new AlwatrSignal<{id: string}>({ + name: 'snackbar-action-button-clicked', +}); + +/** + * Signal for displaying the snackbar. + * + * @example + * import {snackbarSignal} from '@nexim/snackbar'; + * + * snackbarSignal.notify({ + * content: 'This is a snackbar message', + * action: { + * label: 'Undo', + * handler: () => { + * console.log('Action button clicked'); + * }, + * }, + * duration: '5s', + * addCloseButton: true, + * }); + */ +export const snackbarSignal = /* @__PURE__ */ new AlwatrSignal({name: 'snackbar'}); diff --git a/packages/snackbar/src/lib/type.ts b/packages/snackbar/src/lib/type.ts new file mode 100644 index 0000000..35e0a90 --- /dev/null +++ b/packages/snackbar/src/lib/type.ts @@ -0,0 +1,19 @@ +import type {Duration} from '@alwatr/parse-duration'; + +/** + * @property content - Content to be displayed in the snackbar. + * @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. `infinite` for infinite duration. + * @property addCloseButton - Whether to add a close button to the snackbar. + */ +export type SnackbarOptions = { + content: string; + action?: { + id: string; + label: string; + }; + duration?: Duration | 'infinite'; + addCloseButton?: boolean; +}; From 76b980a21ed2ee83111d3a9ef4f8c44f868320aa Mon Sep 17 00:00:00 2001 From: "S. Amir Mohammad Najafi" Date: Tue, 17 Dec 2024 10:39:36 +0330 Subject: [PATCH 4/6] refactor(snackbar): separation of concern Co-authored-by: arashagp --- packages/snackbar/src/lib/element.ts | 8 ++-- packages/snackbar/src/lib/handler.ts | 60 +++++++++++++++++++--------- 2 files changed, 46 insertions(+), 22 deletions(-) diff --git a/packages/snackbar/src/lib/element.ts b/packages/snackbar/src/lib/element.ts index a6b1df5..aea6e2a 100644 --- a/packages/snackbar/src/lib/element.ts +++ b/packages/snackbar/src/lib/element.ts @@ -3,17 +3,17 @@ import {LightDomMixin, LoggerMixin} from '@nexim/element'; import {html, LitElement, nothing, type PropertyValues, type TemplateResult} from 'lit'; import {customElement, property} from 'lit/decorators.js'; -import {snackbarActionButtonClickedSignal} from './handler.js'; +import {snackbarActionButtonClickedSignal} from './signal.js'; import {waitForNextFrame} from './utils.js'; declare global { interface HTMLElementTagNameMap { - 'snack-bar': SnackbarComponent; + 'snack-bar': SnackbarElement; } } @customElement('snack-bar') -export class SnackbarComponent extends LightDomMixin(LoggerMixin(LitElement)) { +export class SnackbarElement extends LightDomMixin(LoggerMixin(LitElement)) { /** * The content to be displayed inside the snackbar. */ @@ -52,7 +52,7 @@ export class SnackbarComponent extends LightDomMixin(LoggerMixin(LitElement)) { this.removeAttribute('open'); - await waitForTimeout(SnackbarComponent.openAndCloseAnimationDuration__); + await waitForTimeout(SnackbarElement.openAndCloseAnimationDuration__); this.remove(); } diff --git a/packages/snackbar/src/lib/handler.ts b/packages/snackbar/src/lib/handler.ts index 2663eec..629813d 100644 --- a/packages/snackbar/src/lib/handler.ts +++ b/packages/snackbar/src/lib/handler.ts @@ -4,6 +4,7 @@ import {waitForTimeout} from '@alwatr/wait'; import {snackbarActionButtonClickedSignal, snackbarSignal} from './signal.js'; +import type {SnackbarElement} from './element.js'; import type {SnackbarOptions} from './type.js'; const logger = /* @__PURE__ */ createLogger(`${__package_name__}/handler`); @@ -19,18 +20,13 @@ let closeLastSnackbar: (() => Promise) | null = null; let unsubscribeActionButtonHandler: (() => void) | null = null; /** - * Displays the snackbar with the given options. + * Create snackbar element with given options. * * @param options - Options for configuring the snackbar. + * @returns The created snackbar element. */ -async function showSnackbar(options: SnackbarOptions): Promise { - logger.logMethodArgs?.('showSnackbar', {options}); - - // Set default duration if not provided - options.duration ??= '5s'; - +function createSnackbarElement(options: SnackbarOptions): SnackbarElement { const element = document.createElement('snack-bar'); - element.setAttribute('content', options.content); if (options.addCloseButton === true) { @@ -39,19 +35,43 @@ async function showSnackbar(options: SnackbarOptions): Promise { if (options.action != null) { element.setAttribute('action-button-label', options.action.label); + } - const actionButtonClickHandler = (event: {id: string}) => { - if (event.id !== options.action!.id) return; - logger.logOther?.('Snackbar action button clicked.', event); + return element; +} - return closeSnackbar(); - }; +/** + * Handle action button click. + * + * @param options - Options for configuring the snackbar. + * @param closeSnackbar - Function to close the snackbar. + */ +function handleActionButtonClick(options: SnackbarOptions, closeSnackbar: () => Promise): void { + const actionButtonClickHandler = (event: {id: string}) => { + if (event.id !== options.action!.id) return; + logger.logOther?.('Snackbar action button clicked.', event); - // Subscribe to the action button click - unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(actionButtonClickHandler.bind(null), { - once: true, - }).unsubscribe; - } + return closeSnackbar(); + }; + + // Subscribe to the action button click + unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(actionButtonClickHandler.bind(null), { + once: true, + }).unsubscribe; +} + +/** + * Displays the snackbar with the given options. + * + * @param options - Options for configuring the snackbar. + */ +async function showSnackbar(options: SnackbarOptions): Promise { + logger.logMethodArgs?.('showSnackbar', {options}); + + // Set default duration if not provided + options.duration ??= '5s'; + + const element = createSnackbarElement(options); let closed = false; const closeSnackbar = async () => { @@ -63,6 +83,10 @@ async function showSnackbar(options: SnackbarOptions): Promise { closed = true; }; + if (options.action != null) { + handleActionButtonClick(options, closeSnackbar); + } + // Close the last snackbar if it exists await closeLastSnackbar?.(); closeLastSnackbar = closeSnackbar; From f6767719340b70d70c9700fe1beb1a4cb3f095f9 Mon Sep 17 00:00:00 2001 From: "S. Amir Mohammad Najafi" Date: Tue, 17 Dec 2024 11:31:01 +0330 Subject: [PATCH 5/6] refactor(snackbar): remove click signal handler Co-authored-by: arashagp --- packages/snackbar/src/lib/handler.ts | 7 +++---- packages/snackbar/src/lib/signal.ts | 15 +++------------ packages/snackbar/src/lib/type.ts | 4 ++-- packages/snackbar/src/main.ts | 2 +- 4 files changed, 9 insertions(+), 19 deletions(-) diff --git a/packages/snackbar/src/lib/handler.ts b/packages/snackbar/src/lib/handler.ts index 629813d..c1c018a 100644 --- a/packages/snackbar/src/lib/handler.ts +++ b/packages/snackbar/src/lib/handler.ts @@ -46,9 +46,8 @@ function createSnackbarElement(options: SnackbarOptions): SnackbarElement { * @param options - Options for configuring the snackbar. * @param closeSnackbar - Function to close the snackbar. */ -function handleActionButtonClick(options: SnackbarOptions, closeSnackbar: () => Promise): void { - const actionButtonClickHandler = (event: {id: string}) => { - if (event.id !== options.action!.id) return; +function handleActionButtonClick(closeSnackbar: () => Promise): void { + const actionButtonClickHandler = () => { logger.logOther?.('Snackbar action button clicked.', event); return closeSnackbar(); @@ -84,7 +83,7 @@ async function showSnackbar(options: SnackbarOptions): Promise { }; if (options.action != null) { - handleActionButtonClick(options, closeSnackbar); + handleActionButtonClick(closeSnackbar); } // Close the last snackbar if it exists diff --git a/packages/snackbar/src/lib/signal.ts b/packages/snackbar/src/lib/signal.ts index d2e3fd3..6d939f9 100644 --- a/packages/snackbar/src/lib/signal.ts +++ b/packages/snackbar/src/lib/signal.ts @@ -1,20 +1,11 @@ -import {AlwatrSignal} from '@alwatr/flux'; +import {AlwatrSignal, AlwatrTrigger} from '@alwatr/flux'; import type {SnackbarOptions} from './type.js'; /** - * 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!'); - * }); + * Signal triggered when the snackbar action button is clicked to close snackbar. */ -export const snackbarActionButtonClickedSignal = /* @__PURE__ */ new AlwatrSignal<{id: string}>({ +export const snackbarActionButtonClickedSignal = /* @__PURE__ */ new AlwatrTrigger({ name: 'snackbar-action-button-clicked', }); diff --git a/packages/snackbar/src/lib/type.ts b/packages/snackbar/src/lib/type.ts index 35e0a90..f93f200 100644 --- a/packages/snackbar/src/lib/type.ts +++ b/packages/snackbar/src/lib/type.ts @@ -4,14 +4,14 @@ import type {Duration} from '@alwatr/parse-duration'; * @property content - Content to be displayed in the snackbar. * @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 action.signalId - The signal ID to be emitted when the action button is clicked. * @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 = { content: string; action?: { - id: string; + signalId: string; label: string; }; duration?: Duration | 'infinite'; diff --git a/packages/snackbar/src/main.ts b/packages/snackbar/src/main.ts index 919be66..c9d70e9 100644 --- a/packages/snackbar/src/main.ts +++ b/packages/snackbar/src/main.ts @@ -3,4 +3,4 @@ import {packageTracer} from '@alwatr/package-tracer'; __dev_mode__: packageTracer.add(__package_name__, __package_version__); export * from './lib/element.js'; -export * from './lib/handler.js'; +export {snackbarSignal} from './lib/signal.js'; From de36218e6e694f876e8b12df569a9d43cb66091c Mon Sep 17 00:00:00 2001 From: "S. Amir Mohammad Najafi" Date: Tue, 17 Dec 2024 11:43:49 +0330 Subject: [PATCH 6/6] fix(snackbar): handle issues --- packages/snackbar/README.md | 8 +++----- packages/snackbar/src/lib/handler.ts | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/snackbar/README.md b/packages/snackbar/README.md index fe8e9af..73372e9 100644 --- a/packages/snackbar/README.md +++ b/packages/snackbar/README.md @@ -8,7 +8,7 @@ ## Overview -Snackbar component, It includes utilities for managing the snackbar's state and animations. +Snackbar component. It includes utilities for managing the snackbar's state and animations. ## Installation @@ -34,11 +34,9 @@ snackbarSignal.notify({ content: 'This is a snackbar message', action: { label: 'Undo', - handler: () => { - console.log('Action button clicked'); - }, + signalId: 'undo-handler', }, - duration: '4s', + duration: '5s', addCloseButton: true, }); ``` diff --git a/packages/snackbar/src/lib/handler.ts b/packages/snackbar/src/lib/handler.ts index c1c018a..6e9b7a6 100644 --- a/packages/snackbar/src/lib/handler.ts +++ b/packages/snackbar/src/lib/handler.ts @@ -48,7 +48,7 @@ function createSnackbarElement(options: SnackbarOptions): SnackbarElement { */ function handleActionButtonClick(closeSnackbar: () => Promise): void { const actionButtonClickHandler = () => { - logger.logOther?.('Snackbar action button clicked.', event); + logger.logOther?.('Snackbar action button clicked.'); return closeSnackbar(); };