@silexlabs/grapesjs-notifications 0.0.1

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024-current @silexlabs/grapesjs-notifications
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,175 @@
+# GrapesJs Notifications Plugin
+
+This GrapesJs plugin is designed to enhance the user experience within the editor by providing a robust notification system. This plugin captures and displays various types of notifications including errors, warnings, and activities, thereby facilitating a more interactive and responsive interface.
+
+> This code is part of a larger project: [about Silex v3](https://www.silexlabs.org/silex-v3-kickoff/)
+
+[DEMO](https://codepen.io/lexoyo/full/mdgzKQb)
+
+Features
+
+* [x] Notification types with corresponding icons
+* [x] Select component attached to the notification
+* [x] Customizable notification style
+* [x] Internationalization
+* [x] Local storage for persistent notifications
+* [x] Maximum number of notifications to display
+* [x] Notification timeout
+* [x] Custom notification container
+* [x] Notification events
+* [x] Notification commands
+* [x] editor.NotificationManager API
+* [ ] Group notifications
+
+### HTML
+```html
+<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
+<script src="https://unpkg.com/grapesjs"></script>
+<script src="https://unpkg.com/@silexlabs/grapesjs-notifications"></script>
+
+<div id="gjs"></div>
+```
+
+### JS
+```js
+const editor = grapesjs.init({
+	container: '#gjs',
+  height: '100%',
+  fromElement: true,
+  storageManager: false,
+  plugins: ['@silexlabs/grapesjs-notifications'],
+});
+```
+
+### CSS
+```css
+body, html {
+  margin: 0;
+  height: 100%;
+}
+```
+
+## Summary
+
+Plugin name: `@silexlabs/grapesjs-notifications`
+
+API:
+
+* Notification object:
+  * `type`: `error`, `warning`, `success`, `info`
+  * `message`: `string`
+  * `timeout`: `number` (ms)
+  * `component`: `string` or GrapesJs `Component` (optional)
+* `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
+
+## Options
+
+| Option | Description | Type | Default |
+|-|-|-|-
+| `style` | Custom style for the notification | `object` | `{}` |
+| `timeout` | Default timeout for the notification in ms | `number` | No timeout |
+| `container` | Container for the notifications | `HTMLElement` | `document.body` |
+| `storeKey` | Store notifications in local storage under this key | `string` | No storage |
+| `icons` | Icons for the notification types | `object` | `{error: '\u2716', warning: '\u26A0', success: '\u2714', info: '\u2139'}` |
+| `i18n` | Internationalization | `object` | Check the values in locale/en.js |
+| `maxNotifications` | Maximum number of notifications to display | `number` | `5` |
+
+## Download
+
+* CDN
+  * `https://unpkg.com/@silexlabs/grapesjs-notifications`
+* NPM
+  * `npm i @silexlabs/grapesjs-notifications`
+* GIT
+  * `git clone https://github.com/silexlabs/grapesjs-notifications.git`
+
+
+
+## Usage
+
+Directly in the browser
+```html
+<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
+<script src="https://unpkg.com/grapesjs"></script>
+<script src="path/to/grapesjs-notifications.min.js"></script>
+
+<div id="gjs"></div>
+
+<script type="text/javascript">
+  var editor = grapesjs.init({
+      container: '#gjs',
+      // ...
+      plugins: ['@silexlabs/grapesjs-notifications'],
+      pluginsOpts: {
+        '@silexlabs/grapesjs-notifications': { /* options */ }
+      }
+  });
+</script>
+```
+
+Modern javascript
+```js
+import grapesjs from 'grapesjs';
+import plugin from '@silexlabs/grapesjs-notifications';
+import 'grapesjs/dist/css/grapes.min.css';
+
+const editor = grapesjs.init({
+  container : '#gjs',
+  // ...
+  plugins: [plugin],
+  pluginsOpts: {
+    [plugin]: { /* options */ }
+  }
+  // or
+  plugins: [
+    editor => plugin(editor, { /* options */ }),
+  ],
+});
+```
+
+
+
+## Development
+
+Clone the repository
+
+```sh
+$ git clone https://github.com/silexlabs/grapesjs-notifications.git
+$ cd @silexlabs/grapesjs-notifications
+```
+
+Install dependencies
+
+```sh
+$ npm i
+```
+
+Start the dev server
+
+```sh
+$ npm start
+```
+
+Build the source
+
+```sh
+$ npm run build
+```
+
+
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,71 @@
+import Backbone from 'backbone';
+import { Component, Editor } from 'grapesjs';
+import { StyleInfo } from 'lit/directives/style-map';
+
+export interface NotificationOptions {
+	message: string;
+	timeout?: number;
+	component?: string | Component;
+	type: "info" | "warning" | "error" | "success";
+	icons: {
+		info: string;
+		warning: string;
+		error: string;
+		success: string;
+	};
+}
+export interface NotificationModel extends Backbone.Model<NotificationOptions> {
+}
+declare class Notification {
+	protected editor: NotificationEditor;
+	protected model: NotificationModel;
+	component: Component | 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;
+}
+export interface NotificationEditor extends Editor {
+	NotificationManager: NotificationManager;
+}
+export interface NotificationManagerOptions {
+	style: Readonly<StyleInfo>;
+	container: HTMLElement;
+	maxNotifications?: number;
+	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,
+};
+
+export {};

package/locale/en.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  '@silexlabs/grapesjs-notifications': {
+    'Close': 'Dismiss',
+    'Select': 'Select component {componentName}'
+  }
+};

package/locale/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "en", {
+  enumerable: true,
+  get: function () {
+    return _en.default;
+  }
+});
+var _en = _interopRequireDefault(require("./en"));

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@silexlabs/grapesjs-notifications",
+  "version": "0.0.1",
+  "description": "This GrapesJs plugin is designed to enhance the user experience within the editor by providing a robust notification system. This plugin captures and displays various types of notifications including errors, warnings, and activities, thereby facilitating a more interactive and responsive interface.",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/silexlabs/grapesjs-notifications.git"
+  },
+  "scripts": {
+    "start": "grapesjs-cli serve",
+    "build": "grapesjs-cli build --patch=false"
+  },
+  "devDependencies": {
+    "grapesjs-cli": "^4.1.3"
+  },
+  "peerDependencies": {
+    "grapesjs": "^0.21.10",
+    "lit": "^3.1.2"
+  },
+  "author": "@lexoyo",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/silexlabs/Silex/issues"
+  },
+  "homepage": "https://github.com/silexlabs/grapesjs-notifications#readme",
+  "keywords": [
+    "grapesjs",
+    "plugin",
+    "grapesjs-plugin",
+    "notifications",
+    "web-design",
+    "web-development",
+    "UI",
+    "UX",
+    "error-handling",
+    "warning-system",
+    "activity-tracker",
+    "silex",
+    "silexlabs",
+    "no-code",
+    "editor",
+    "web-editor",
+    "frontend",
+    "website-builder"
+  ]
+}