refactor: snackbar (#20)

README.md

@@ -4,11 +4,7 @@ This repository contains numerous small utility packages. These packages serve v
 
 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.
+1. [`snackbar`](./packages/snackbar): Snackbar component, It includes utilities for managing the snackbar's state and animations.
 
 For more detailed information and guidelines on how to use each package, please refer to each package's README.
 

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "nanolib-monorepo",
+  "name": "design-system-monorepo",
   "private": true,
   "description": "Necessary library for all ECMAScript (JavaScript/TypeScript) projects.",
-  "repository": "https://github.com/the-nexim/nanolib",
+  "repository": "https://github.com/the-nexim/design-system",
   "license": "AGPL-3.0-only",
   "author": "S. Amir Mohammad Najafi <[email protected]> (https://www.njfamirm.ir)",
   "contributors": [
@@ -42,9 +42,9 @@
     "@lerna-lite/publish": "^3.10.1",
     "@lerna-lite/run": "^3.10.1",
     "@lerna-lite/version": "^3.10.1",
-    "@nexim/eslint-config": "workspace:^",
-    "@nexim/prettier-config": "workspace:^",
-    "@nexim/typescript-config": "workspace:^",
+    "@nexim/eslint-config": "^1.0.1",
+    "@nexim/prettier-config": "^1.0.1",
+    "@nexim/typescript-config": "^1.0.1",
     "@types/node": "^22.10.2",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",

packages/snackbar/README.md

@@ -1,16 +1,14 @@
 # @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)
+![Build & Lint & Test](https://github.com/the-nexim/design-system/actions/workflows/build-lint-test.yaml/badge.svg)
 ![NPM Downloads](https://img.shields.io/npm/dm/%40nexim%2Fsnackbar)
 ![NPM License](https://img.shields.io/npm/l/%40nexim%2Fsnackbar)
 
 ## 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,14 +32,11 @@ import {snackbarSignal} from '@nexim/snackbar';
 
 snackbarSignal.notify({
   content: 'This is a snackbar message',
-  // The following properties are optional.
   action: {
     label: 'Undo',
-    handler: () => {
-      console.log('Action button clicked');
-    },
+    signalId: 'undo-handler',
   },
-  duration: '4s',
+  duration: '5s',
   addCloseButton: true,
 });
 ```

packages/snackbar/package.json

@@ -1,21 +1,21 @@
 {
   "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",
     "web-component",
     "typescript",
     "nexim"
   ],
-  "homepage": "https://github.com/the-nexim/nanolib/tree/next/packages/snackbar#readme",
+  "homepage": "https://github.com/the-nexim/design-system/tree/next/packages/snackbar#readme",
   "bugs": {
-    "url": "https://github.com/the-nexim/nanolib/issues"
+    "url": "https://github.com/the-nexim/design-system/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/the-nexim/nanolib",
+    "url": "https://github.com/the-nexim/design-system",
     "directory": "packages/snackbar"
   },
   "license": "AGPL-3.0-only",
@@ -62,13 +62,13 @@
     "@alwatr/package-tracer": "^5.0.0",
     "@alwatr/parse-duration": "^5.0.0",
     "@alwatr/wait": "^1.1.16",
-    "@nexim/element": "workspace:^",
+    "@nexim/element": "^1.0.6",
     "lit": "^3.2.1"
   },
   "devDependencies": {
     "@alwatr/nano-build": "^5.0.0",
     "@alwatr/type-helper": "^5.0.0",
-    "@nexim/typescript-config": "workspace:^",
+    "@nexim/typescript-config": "^1.0.1",
     "ava": "^6.2.0",
     "typescript": "^5.6.3"
   },

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();
   }