@silexlabs/grapesjs-notifications 0.1.0 → 0.1.1-0

package/README.md

@@ -28,6 +28,8 @@ Features
 * [x] Group notifications
 * [x] Support pages
 
+## Usage
+
 ### HTML
 ```html
 <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
@@ -46,6 +48,17 @@ const editor = grapesjs.init({
   storageManager: false,
   plugins: ['@silexlabs/grapesjs-notifications'],
 });
+
+// Add notifications using commands
+editor.runCommand('notifications:add', {
+  type: 'info',
+  message: 'Hello world!',
+})
+
+// Listen to events
+editor.on('notifications:changed', (notifications) => {
+  console.log('Notifications have changed', notifications)
+})
 ```
 
 ### CSS
@@ -60,26 +73,87 @@ body, html {
 
 Plugin name: `@silexlabs/grapesjs-notifications`
 
-API:
-
-* Notification object:
-  * `type`: `error`, `warning`, `success`, `info`
-  * `message`: `string`
-  * `timeout`: `number` (ms)
-  * `componentId`: `string`
-* `editor.Notifications` methods:
-  * `add(notification)`
-  * `remove(notification)` 
-  * `clear()`
-* Commands: `editor.runCommand('notifications:add', notification)`
-  * `notifications:add` - Add a notification
-  * `notifications:remove` - Remove a notification
-  * `notifications:clear` - Clear all notifications
-* Events:
-  * `notifications:changed` - When any change to the notifications occurs
-  * `notifications:added` - When a notification is added
-  * `notifications:removed` - When a notification is removed
-  * `notifications:cleared` - When all notifications are cleared
+## API
+
+### Commands
+
+```js
+// Add a notification
+editor.runCommand('notifications:add', {
+  type: 'error' | 'warning' | 'success' | 'info',
+  message: 'string',
+  timeout: 5000, // optional timeout in ms
+  componentId: 'comp-123', // optional component to select
+  group: 'validation' // optional group name
+})
+
+// Remove a notification
+editor.runCommand('notifications:remove', notification)
+
+// Clear all notifications
+editor.runCommand('notifications:clear')
+```
+
+### Events
+
+Listen to notification events:
+
+```js
+editor.on('notifications:changed', (notifications) => {
+  // Triggered when any notification change occurs
+  // notifications parameter contains all current notifications
+})
+
+editor.on('notifications:added', (notification) => {
+  // Triggered when a notification is added
+})
+
+editor.on('notifications:removed', (notification) => {
+  // Triggered when a notification is removed
+})
+
+editor.on('notifications:cleared', () => {
+  // Triggered when all notifications are cleared
+})
+```
+
+### Constants
+
+```js
+import {
+  NOTIFICATION_ADD,
+  NOTIFICATION_REMOVE,
+  NOTIFICATION_CLEAR,
+  NOTIFICATION_CHANGED,
+  NOTIFICATION_ADDED,
+  NOTIFICATION_REMOVED,
+  NOTIFICATION_CLEARED
+} from '@silexlabs/grapesjs-notifications'
+
+// Use with commands
+editor.runCommand(NOTIFICATION_ADD, { /* ... */ })
+
+// Use with events
+editor.on(NOTIFICATION_CHANGED, () => { /* ... */ })
+```
+
+### NotificationOptions Interface
+
+```ts
+export interface NotificationOptions {
+  message: string
+  group?: string
+  timeout?: number
+  componentId?: string
+  type: 'info' | 'warning' | 'error' | 'success'
+  icons?: {
+    info?: string
+    warning?: string
+    error?: string
+    success?: string
+  }
+}
+```
 
 ## Options
 
@@ -92,6 +166,7 @@ API:
 | `i18n` | Internationalization | `object` | Check the values in locale/en.js |
 | `maxNotifications` | Maximum number of notifications to display | `number` | 50 |
 | `reverse` | Reverse the order of the notifications | `boolean` | `false` |
+| `style` | Optional styles to add to the component | `string` | `''` |
 
 ## Styling
 

package/dist/Notification.d.ts

@@ -0,0 +1,38 @@
+import { Editor } from 'grapesjs';
+export interface NotificationOptions {
+    message: string;
+    group?: string;
+    timeout?: number;
+    componentId?: string;
+    type: 'info' | 'warning' | 'error' | 'success';
+    icons: {
+        info: string;
+        warning: string;
+        error: string;
+        success: string;
+    };
+}
+export declare class Notification {
+    protected editor: Editor;
+    componentId: string | null;
+    group: string | null;
+    timeoutRef: NodeJS.Timeout | undefined;
+    message: string;
+    type: 'info' | 'warning' | 'error' | 'success';
+    options: NotificationOptions;
+    model: any;
+    private removeCallback?;
+    constructor(editor: Editor, options: NotificationOptions | any, removeCallback?: (notification: Notification) => void);
+    select(): void;
+    remove(): void;
+    getSvgIcon(type: string): string;
+    private getDefaultOptions;
+    /**
+     * Get all components in the editor
+     * This is a heavy operation
+     */
+    private getAllComponents;
+    private getAllComponentInPage;
+    private getAllChildrenComponent;
+}
+//# sourceMappingURL=Notification.d.ts.map

package/dist/Notification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../src/Notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,MAAM,EAAE,MAAM,UAAU,CAAA;AAElD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;IAC9C,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAA;QACZ,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;CACF;AAED,qBAAa,YAAY;IAUX,SAAS,CAAC,MAAM,EAAE,MAAM;IATpC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAO;IACjC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAO;IAC3B,UAAU,6BAAA;IACV,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;IAC9C,OAAO,EAAE,mBAAmB,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACjB,OAAO,CAAC,cAAc,CAAC,CAAsC;gBAEvC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,mBAAmB,GAAG,GAAG,EAAE,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI;IAa/H,MAAM;IAoBN,MAAM;IAYN,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAIhC,OAAO,CAAC,iBAAiB;IAezB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,uBAAuB;CAIhC"}

package/dist/NotificationManager.d.ts

@@ -0,0 +1,48 @@
+import { Editor } from "grapesjs";
+import { Notification, NotificationOptions } from "./Notification";
+import { StyleInfo } from "lit/directives/style-map";
+export declare const NOTIFICATION_CHANGED = "notifications:changed";
+export declare const NOTIFICATION_ADDED = "notifications:added";
+export declare const NOTIFICATION_REMOVED = "notifications:removed";
+export declare const NOTIFICATION_CLEARED = "notifications:cleared";
+export interface NotificationManagerOptions {
+    style?: Readonly<StyleInfo>;
+    container: HTMLElement;
+    maxNotifications?: number;
+    reverse?: boolean;
+    timeout?: number;
+    storeKey?: string;
+    i18n?: any;
+    icons?: {
+        info?: string;
+        warning?: string;
+        error?: string;
+        success?: string;
+    };
+}
+/**
+ * GrapesJs plugin to manage notifications
+ */
+export declare class NotificationManager {
+    protected editor: Editor;
+    protected options: NotificationManagerOptions;
+    private notifications;
+    constructor(initialNotifications: any[], editor: Editor, options: NotificationManagerOptions);
+    /**
+     * Get all notifications
+     */
+    getAll(): Notification[];
+    /**
+     * Add a notification
+     */
+    add(options: NotificationOptions): void;
+    /**
+     * Remove a notification
+     */
+    remove(notification: Notification | any): void;
+    /**
+     * Clear all notifications
+     */
+    reset(): void;
+}
+//# sourceMappingURL=NotificationManager.d.ts.map

package/dist/NotificationManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationManager.d.ts","sourceRoot":"","sources":["../src/NotificationManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGpD,eAAO,MAAM,oBAAoB,0BAA0B,CAAA;AAC3D,eAAO,MAAM,kBAAkB,wBAAwB,CAAA;AACvD,eAAO,MAAM,oBAAoB,0BAA0B,CAAA;AAC3D,eAAO,MAAM,oBAAoB,0BAA0B,CAAA;AAE3D,MAAM,WAAW,0BAA0B;IACzC,KAAK,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC3B,SAAS,EAAE,WAAW,CAAA;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,KAAK,CAAC,EAAE;QACN,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,CAAA;CACF;AAED;;GAEG;AACH,qBAAa,mBAAmB;IAGW,SAAS,CAAC,MAAM,EAAE,MAAM;IAAE,SAAS,CAAC,OAAO,EAAE,0BAA0B;IAFhH,OAAO,CAAC,aAAa,CAAqB;gBAE9B,oBAAoB,EAAE,GAAG,EAAE,EAAY,MAAM,EAAE,MAAM,EAAY,OAAO,EAAE,0BAA0B;IAWhH;;OAEG;IACH,MAAM,IAAI,YAAY,EAAE;IAIxB;;OAEG;IACH,GAAG,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI;IAQvC;;OAEG;IACH,MAAM,CAAC,YAAY,EAAE,YAAY,GAAG,GAAG,GAAG,IAAI;IAS9C;;OAEG;IACH,KAAK,IAAI,IAAI;CAKd"}

package/dist/Storage.d.ts

@@ -0,0 +1,12 @@
+import { Notification } from './Notification';
+/**
+ * @fileoverview Storage class
+ * Stores the notifications in the local storage
+ */
+export declare class Storage {
+    private storeKey?;
+    constructor(storeKey?: string | undefined);
+    getAll(): any[];
+    save(data: Notification[]): void;
+}
+//# sourceMappingURL=Storage.d.ts.map

package/dist/Storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Storage.d.ts","sourceRoot":"","sources":["../src/Storage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C;;;GAGG;AAEH,qBAAa,OAAO;IACN,OAAO,CAAC,QAAQ,CAAC;gBAAT,QAAQ,CAAC,EAAE,MAAM,YAAA;IAErC,MAAM,IAAI,GAAG,EAAE;IAKf,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE;CAU1B"}

package/dist/index.d.ts

@@ -1,82 +1,17 @@
-import Backbone from 'backbone';
 import { Editor } from 'grapesjs';
-import { StyleInfo } from 'lit/directives/style-map';
-
-export interface NotificationOptions {
-	message: string;
-	group?: string;
-	timeout?: number;
-	componentId?: string;
-	type: "info" | "warning" | "error" | "success";
-	icons: {
-		info: string;
-		warning: string;
-		error: string;
-		success: string;
-	};
-}
-declare class NotificationModel extends Backbone.Model<any, Backbone.ModelSetOptions, any> {
-}
-declare class Notification {
-	protected editor: NotificationEditor;
-	protected model: NotificationModel;
-	componentId: string | null;
-	group: string | null;
-	timeoutRef: NodeJS.Timeout | undefined;
-	message: string;
-	type: "info" | "warning" | "error" | "success";
-	protected options: NotificationOptions;
-	constructor(editor: NotificationEditor, model: NotificationModel);
-	select(): void;
-	remove(): void;
-	getSvgIcon(type: string): string;
-	private getDefaultOptions;
-	/**
-	 * Get all components in the editor
-	 * This is a heavy operation
-	 */
-	private getAllComponents;
-	private getAllComponentInPage;
-	private getAllChildrenComponent;
-}
-export interface NotificationEditor extends Editor {
-	NotificationManager: NotificationManager;
-}
-export interface NotificationManagerOptions {
-	style: Readonly<StyleInfo>;
-	container: HTMLElement;
-	maxNotifications?: number;
-	reverse?: boolean;
-	timeout?: number;
-	storeKey?: string;
-	icons?: {
-		info?: string;
-		warning?: string;
-		error?: string;
-		success?: string;
-	};
-}
-declare class NotificationManager extends Backbone.Collection<NotificationModel> {
-	protected editor: NotificationEditor;
-	protected options: NotificationManagerOptions;
-	constructor(models: Notification[], editor: NotificationEditor, options: NotificationManagerOptions);
-	/**
-	 * Get all models
-	 */
-	getAll(): Notification[];
-	/**
-	 * Listen to model changes
-	 */
-	modelChanged(e?: CustomEvent): void;
-	/**
-	 * Listen to model individual changes
-	 */
-	modelInit(): void;
-}
-declare const _default: (editor: NotificationEditor, opts?: Partial<NotificationManagerOptions>) => void;
-
-export {
-	_default as default,
+import { NotificationManagerOptions, NOTIFICATION_CHANGED, NOTIFICATION_ADDED, NOTIFICATION_REMOVED, NOTIFICATION_CLEARED } from './NotificationManager';
+export declare const NOTIFICATION_ADD = "notifications:add";
+export declare const NOTIFICATION_REMOVE = "notifications:remove";
+export declare const NOTIFICATION_CLEAR = "notifications:clear";
+export { NOTIFICATION_CHANGED, NOTIFICATION_ADDED, NOTIFICATION_REMOVED, NOTIFICATION_CLEARED };
+export type { NotificationManagerOptions } from './NotificationManager';
+export type { NotificationOptions } from './Notification';
+export { Notification } from './Notification';
+declare const _default: (editor: Editor, opts?: Partial<NotificationManagerOptions>) => {
+    getAll: () => import("./Notification").Notification[];
+    add: (notification: any) => any;
+    remove: (notification: any) => any;
+    clear: () => any;
 };
-
-export {};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAEL,0BAA0B,EAC1B,oBAAoB,EACpB,kBAAkB,EAClB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,uBAAuB,CAAA;AAK9B,eAAO,MAAM,gBAAgB,sBAAsB,CAAA;AACnD,eAAO,MAAM,mBAAmB,yBAAyB,CAAA;AACzD,eAAO,MAAM,kBAAkB,wBAAwB,CAAA;AAGvD,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,oBAAoB,EACpB,oBAAoB,EACrB,CAAA;AAGD,YAAY,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAA;AACvE,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;yBAiB7B,QAAQ,MAAM,EAAE,OAAM,OAAO,CAAC,0BAA0B,CAAM;;wBAwDtD,GAAG;2BACA,GAAG;;;AAzD9B,wBA4DC"}