@silexlabs/silex 3.7.0 → 3.9.0-canary.2

package/grapesjs-plugins/grapesjs-notifications/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@silexlabs/grapesjs-notifications",
+  "version": "0.3.0",
+  "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",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/silexlabs/grapesjs-notifications.git"
+  },
+  "scripts": {
+    "start": "grapesjs-cli serve",
+    "test-build-no-grapes": "rm -rf dist && tsc",
+    "build": "grapesjs-cli build --patch=false --dts skip"
+  },
+  "devDependencies": {
+    "grapesjs-cli": "^4.1.3"
+  },
+  "peerDependencies": {
+    "grapesjs": ">=0.19.0 <0.23.0",
+    "lit": "*"
+  },
+  "author": {
+    "name": "Alex Hoyau",
+    "url": "https://lexoyo.me/"
+  },
+  "license": "AGPL-3.0",
+  "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"
+  ]
+}

package/grapesjs-plugins/grapesjs-notifications/src/Notification.ts

@@ -0,0 +1,117 @@
+import { Component, Page, Editor } from 'grapesjs'
+
+export interface NotificationOptions {
+  id?: string
+  message: string
+  group?: string
+  timeout?: number
+  componentId?: string
+  type: 'info' | 'warning' | 'error' | 'success'
+  icons: {
+    info: string
+    warning: string
+    error: string
+    success: string
+  }
+}
+
+export class Notification {
+  id: string | null = null
+  componentId: string | null = null
+  group: string | null = null
+  timeoutRef
+  message: string
+  type: 'info' | 'warning' | 'error' | 'success'
+  options: NotificationOptions
+  public model: any // For compatibility
+  private removeCallback?: (notification: Notification) => void
+
+  constructor(protected editor: Editor, options: NotificationOptions | any, removeCallback?: (notification: Notification) => void) {
+    this.options = this.getDefaultOptions(options)
+    this.removeCallback = removeCallback
+    if (this.options.timeout) {
+      this.timeoutRef = setTimeout(() => this.remove(), this.options.timeout)
+    }
+    this.id = options.id || null
+    this.message = this.options.message!
+    this.type = this.options.type!
+    this.componentId = options.componentId || null
+    this.group = options.group || null
+    this.model = { attributes: options } // For compatibility with existing code
+  }
+
+  select() {
+    if (this.options.componentId) {
+      // This operation is heavy
+      const found = this.getAllComponents(this.editor)
+        .find(({component, page}) => component.getId() === this.options.componentId) || null
+      if (found) {
+        const {component, page} = found
+        this.editor.Pages.select(page)
+        this.editor.select(component)
+        this.editor.Canvas.scrollTo(component)
+      } else {
+        console.error(`Component with ID ${this.options.componentId} not found`)
+        this.editor.runCommand('notifications:add', {
+          message: `Component with ID ${this.options.componentId} not found`,
+          type: 'error',
+        })
+      }
+    }
+  }
+
+  remove() {
+    if (this.removeCallback) {
+      this.removeCallback(this)
+    } else {
+      // Fallback to command if no callback provided
+      this.editor.runCommand('notifications:remove', {
+        notification: this
+      })
+    }
+    this.timeoutRef && clearTimeout(this.timeoutRef)
+  }
+
+  getSvgIcon(type: string): string {
+    return this.options.icons?.[type as keyof NotificationOptions['icons']]!
+  }
+
+  private getDefaultOptions(opts: Partial<NotificationOptions>): NotificationOptions {
+    return {
+      ...{
+        icons: {
+          info: '\u{1F6A7}',
+          warning: '\u{26A0}',
+          error: '\u{1F6AB}',
+          success: '\u{2705}',
+          group: '\u{1F4CC}',
+          ...opts.icons,
+        },
+      }, ...opts
+    } as NotificationOptions
+  }
+
+  /**
+   * Get all components in the editor
+   * This is a heavy operation
+   */
+  private getAllComponents(editor: Editor) {
+    return editor.Pages.getAll().map(page => this.getAllComponentInPage(page)).flat()
+  }
+
+  private getAllComponentInPage(page: Page): {component: Component, page: Page}[] {
+    const body = page.getMainComponent() as Component
+    return [{
+      component: body,
+      page,
+    }].concat(
+      this.getAllChildrenComponent(body)
+      .map(component => ({component, page}))
+    )
+  }
+
+  private getAllChildrenComponent(component: Component): Component[] {
+    const children = Array.from(component.components().models)
+    return children.concat(children.map(child => this.getAllChildrenComponent(child)).flat())
+  }
+}

package/grapesjs-plugins/grapesjs-notifications/src/NotificationManager.ts

@@ -0,0 +1,93 @@
+import { Editor } from "grapesjs"
+import { Notification, NotificationOptions as BaseNotificationOptions } from "./Notification"
+import { StyleInfo } from "lit/directives/style-map.js"
+
+export interface NotificationOptions extends BaseNotificationOptions {
+  id?: string
+}
+
+// Events
+export const NOTIFICATION_CHANGED = 'notifications:changed'
+export const NOTIFICATION_ADDED = 'notifications:added'
+export const NOTIFICATION_REMOVED = 'notifications:removed'
+export 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 class NotificationManager {
+  private notifications: Notification[] = []
+
+  constructor(initialNotifications: any[], protected editor: Editor, protected options: NotificationManagerOptions) {
+    // Convert initial data to notification objects
+    this.notifications = initialNotifications.map(data => {
+      if (typeof data === 'object' && data.message) {
+        const removeCallback = (notification: Notification) => this.remove(notification)
+        return new Notification(this.editor, data, removeCallback)
+      }
+      return data
+    }).filter(Boolean)
+  }
+
+  /**
+   * Get all notifications
+   */
+  getAll(): Notification[] {
+    return [...this.notifications]
+  }
+
+  /**
+   * Add a notification
+   */
+  add(options: NotificationOptions): void {
+    if (options.id) {
+      // Remove any existing notification with the same id
+      const existing = this.notifications.find(n => n.options.id === options.id)
+      if (existing) {
+        this.remove(existing)
+      }
+    }
+    const removeCallback = (notification: Notification) => this.remove(notification)
+    const notification = new Notification(this.editor, options, removeCallback)
+    this.notifications.push(notification)
+    this.editor.trigger(NOTIFICATION_ADDED, notification)
+    this.editor.trigger(NOTIFICATION_CHANGED, this.getAll())
+  }
+
+  /**
+   * Remove a notification
+   */
+  remove(notification: Notification | any): void {
+    const index = this.notifications.findIndex(n => n === notification || n.model === notification)
+    if (index > -1) {
+      const removed = this.notifications.splice(index, 1)[0]
+      this.editor.trigger(NOTIFICATION_REMOVED, removed)
+      this.editor.trigger(NOTIFICATION_CHANGED, this.getAll())
+    }
+  }
+
+  /**
+   * Clear all notifications
+   */
+  reset(): void {
+    this.notifications = []
+    this.editor.trigger(NOTIFICATION_CLEARED)
+    this.editor.trigger(NOTIFICATION_CHANGED, this.getAll())
+  }
+}

package/grapesjs-plugins/grapesjs-notifications/src/Storage.ts

@@ -0,0 +1,26 @@
+import { Notification } from './Notification'
+
+/**
+ * @fileoverview Storage class
+ * Stores the notifications in the local storage
+ */
+
+export class Storage {
+  constructor(private storeKey?: string) {}
+  
+  getAll(): any[] {
+    if(!this.storeKey) return []
+    return JSON.parse(localStorage.getItem(this.storeKey) || '[]')
+  }
+  
+  save(data: Notification[]) {
+    if(!this.storeKey) return
+    localStorage.setItem(this.storeKey, JSON.stringify(data.map(n => ({
+      message: n.message,
+      type: n.type,
+      componentId: n.componentId,
+      group: n.group,
+      timeout: n.options?.timeout
+    }))))
+  }
+}

package/grapesjs-plugins/grapesjs-notifications/src/capabilities.ts

@@ -0,0 +1,33 @@
+import { NOTIFICATION_ADD, NOTIFICATION_CLEAR, NOTIFICATION_LIST } from './commands'
+
+export function registerCapabilities(addCapability: (def: Record<string, unknown>) => void) {
+  addCapability({
+    id: NOTIFICATION_ADD,
+    command: NOTIFICATION_ADD,
+    description: 'Show notification to user',
+    inputSchema: {
+      type: 'object',
+      required: ['type', 'message'],
+      properties: {
+        type: { type: 'string', enum: ['info', 'warning', 'error', 'success'] },
+        message: { type: 'string' },
+        group: { type: 'string' },
+      },
+    },
+    tags: ['notifications'],
+  })
+  addCapability({
+    id: NOTIFICATION_CLEAR,
+    command: NOTIFICATION_CLEAR,
+    description: 'Clear all notifications',
+    destructive: true,
+    tags: ['notifications'],
+  })
+  addCapability({
+    id: NOTIFICATION_LIST,
+    command: NOTIFICATION_LIST,
+    description: 'List all notifications',
+    readOnly: true,
+    tags: ['notifications'],
+  })
+}

package/grapesjs-plugins/grapesjs-notifications/src/commands.ts

@@ -0,0 +1,5 @@
+// Command IDs for notifications
+export const NOTIFICATION_ADD = 'notifications:add'
+export const NOTIFICATION_REMOVE = 'notifications:remove'
+export const NOTIFICATION_CLEAR = 'notifications:clear'
+export const NOTIFICATION_LIST = 'notifications:list'

package/grapesjs-plugins/grapesjs-notifications/src/index.ts

@@ -0,0 +1,126 @@
+import { Editor } from 'grapesjs'
+import { registerCapabilities } from './capabilities'
+import en from './locale/en'
+import {
+  NotificationManager,
+  NotificationManagerOptions,
+  NOTIFICATION_CHANGED,
+  NOTIFICATION_ADDED,
+  NOTIFICATION_REMOVED,
+  NOTIFICATION_CLEARED
+} from './NotificationManager'
+import view from './view'
+import { Storage } from './Storage'
+import { NOTIFICATION_ADD, NOTIFICATION_REMOVE, NOTIFICATION_CLEAR, NOTIFICATION_LIST } from './commands'
+
+// Re-export command IDs
+export { NOTIFICATION_ADD, NOTIFICATION_REMOVE, NOTIFICATION_CLEAR, NOTIFICATION_LIST } from './commands'
+
+// Events (re-exported from NotificationManager)
+export {
+  NOTIFICATION_CHANGED,
+  NOTIFICATION_ADDED,
+  NOTIFICATION_REMOVED,
+  NOTIFICATION_CLEARED
+}
+
+// Types
+export type { NotificationManagerOptions } from './NotificationManager'
+export type { NotificationOptions } from './Notification'
+export { Notification } from './Notification'
+
+/**
+ * Create a container if needed, make it sticky and append it to the body
+ */
+function createDefaultContainer(container?: HTMLElement): HTMLElement {
+  if (container) return container
+  
+  const el = document.createElement('ul')
+  el.style.position = 'fixed'
+  el.style.bottom = '10px'
+  el.style.zIndex = '9999'
+  document.body.appendChild(el)
+  return el
+}
+
+// GrapesJS Plugin
+export default (editor: Editor, opts: Partial<NotificationManagerOptions> = {}) => {
+  const options = {
+    i18n: {},
+    container: createDefaultContainer(opts.container),
+    storeKey: undefined,
+    maxNotifications: 50,
+    reverse: false,
+    ...opts
+  } as NotificationManagerOptions
+
+  // Load i18n files
+  editor.I18n && editor.I18n.addMessages({
+    en,
+    ...options.i18n,
+  })
+
+  // Create storage if needed
+  const storage = options.storeKey ? new Storage(options.storeKey) : null
+
+  // Create notification manager
+  const notificationManager = new NotificationManager(storage?.getAll() || [], editor, options)
+
+  // Add commands
+  editor.Commands.add(NOTIFICATION_ADD, {
+    run(editor: Editor, sender: any, options: any) {
+      if (!options?.type) throw new Error('Required: type (one of: info, warning, error, success)')
+      if (!options?.message) throw new Error('Required: message (notification text)')
+      if (!['info', 'warning', 'error', 'success'].includes(options.type)) {
+        throw new Error(`Invalid type "${options.type}". Must be one of: info, warning, error, success`)
+      }
+      notificationManager.add(options)
+    }
+  })
+
+  editor.Commands.add(NOTIFICATION_REMOVE, {
+    run(editor: Editor, sender: any, data: any) {
+      const notification = data?.notification || data
+      notificationManager.remove(notification)
+    }
+  })
+
+  editor.Commands.add(NOTIFICATION_CLEAR, {
+    run(editor: Editor) {
+      notificationManager.reset()
+    }
+  })
+
+  editor.Commands.add(NOTIFICATION_LIST, {
+    run() {
+      return notificationManager.getAll().map(n => ({
+        type: n.type,
+        message: n.message,
+        group: n.group,
+      }))
+    }
+  })
+
+  // Handle notification changes
+  editor.on(NOTIFICATION_CHANGED, (notifications) => {
+    // Use the passed notifications array or get all as fallback
+    const allNotifications = notifications || notificationManager.getAll()
+    // Update storage
+    storage?.save(allNotifications)
+    // Render notifications
+    view(editor, options.container, allNotifications, options)
+  })
+
+  // Register AI capabilities if grapesjs-ai-capabilities is loaded
+  editor.on('ai-capabilities:ready', (addCapability: (def: Record<string, unknown>) => void) => {
+    registerCapabilities(addCapability)
+  })
+
+  // Public API accessible via commands and events only
+  return {
+    getAll: () => notificationManager.getAll(),
+    add: (notification: any) => editor.runCommand(NOTIFICATION_ADD, notification),
+    remove: (notification: any) => editor.runCommand(NOTIFICATION_REMOVE, notification),
+    clear: () => editor.runCommand(NOTIFICATION_CLEAR)
+  }
+}

package/grapesjs-plugins/grapesjs-notifications/src/locale/en.js

@@ -0,0 +1,8 @@
+export default {
+    '@silexlabs/grapesjs-notifications': {
+        'Close': '\u2716 Dismiss',
+        'CloseAll': '\u2716 Dismiss all',
+        'Select': '\u2713 Select element',
+        'Show': '\u2193 Show',
+    },
+};

package/grapesjs-plugins/grapesjs-notifications/src/view.ts

@@ -0,0 +1,127 @@
+import { html, render as litRender, TemplateResult } from 'lit'
+import { classMap } from 'lit-html/directives/class-map.js'
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
+import { Editor } from 'grapesjs'
+import { Notification } from './Notification'
+import { NotificationManagerOptions } from './NotificationManager'
+
+export default function(editor: Editor, container: HTMLElement, notifs: Notification[], options: NotificationManagerOptions): void {
+  const notifications = [...notifs]
+
+  // Reverse if options.reverse is true
+  if (options.reverse) {
+    notifications.reverse()
+  }
+  
+  const organizedNotifications = organizeNotifications(notifications)
+    .slice(0, options.maxNotifications || notifications.length)
+
+  litRender(html`
+    <style>
+    .gjs-notification {
+      top: 10px;
+      right: 10px;
+      max-width: 300px;
+      z-index: 9999;
+      list-style: none;
+      padding: 10px;
+      margin: 10px;
+      font-family: var(--gjs-main-font);
+      font-size: var(--gjs-font-size);
+      max-height: 80vh;
+      overflow-y: auto;
+    }
+    .gjs-notification details summary {
+      list-style: none;
+    }
+    .gjs-notification li {
+      border-radius: 5px;
+      margin: 10px 0;
+      padding: 10px;
+      list-style: none;
+    }
+    .gjs-notification ul {
+      padding: 0;
+    }
+    </style>
+    <ul class="gjs-notification">
+      ${
+        organizedNotifications
+        .map(item => typeof item === 'string' ? renderGroup(editor, options, item, notifications.filter(n => n.group === item)) : renderNotification(editor, item))
+      }
+    </ul>
+  `, getContainer(container))
+}
+
+function getContainer(container: HTMLElement | string): HTMLElement {
+  if (typeof container === 'string') {
+    return document.querySelector(container) as HTMLElement
+  }
+  return container
+}
+
+function organizeNotifications(notifications: Notification[]): (Notification | string)[] {
+  const groups: {[key: string]: boolean} = {}
+  const organized: (Notification | string)[] = []
+
+  notifications.forEach(notification => {
+    if (notification.group && !groups[notification.group]) {
+      groups[notification.group] = true
+      organized.push(notification.group)
+    } else if (!notification.group) {
+      organized.push(notification)
+    }
+  })
+
+  return organized
+}
+
+function renderGroup(editor: Editor, options: NotificationManagerOptions, groupName: string, groupedNotifications: Notification[]): TemplateResult {
+  return html`
+    <li class="gjs-sm gjs-one-bg gjs-two-color gjs-notification__group">
+    <details class="gjs-sm gjs-one-bg gjs-two-color">
+      <summary class="gjs-sm-header gjs-label">
+        <div>\u{1F4CC} ${groupName}</div>
+        <button @click=${() => groupedNotifications.forEach(notification => notification.remove())} class="gjs-btn-prim">${editor.I18n.t('@silexlabs/grapesjs-notifications.CloseAll')}</button>
+        <button
+          @click=${(e: any) => e.currentTarget.closest('details').toggleAttribute('open')}
+          class="gjs-btn-prim"
+        >${ editor.I18n.t('@silexlabs/grapesjs-notifications.Show') }</button>
+      </summary>
+      <ul>
+        ${groupedNotifications
+          .slice(0, options.maxNotifications || groupedNotifications.length)
+          .map(notification => html`
+          ${renderNotification(editor, notification)}
+        `)}
+      </ul>
+    </details>
+    </li>
+  `
+}
+
+function renderNotification(editor: Editor, notification: Notification): TemplateResult {
+  return html`
+    <li class=${classMap({
+      'gjs-sm': true,
+      'gjs-one-bg': true,
+      'gjs-two-color': true,
+      'gjs-notification__item': true,
+      'gjs-notification__info': notification.type === 'info',
+      'gjs-notification__warning': notification.type === 'warning',
+      'gjs-notification__error': notification.type === 'error',
+      'gjs-notification__success': notification.type === 'success',
+    })}>
+      <header class="gjs-sm-header gjs-label">
+        <span>${notification.getSvgIcon(notification.type)}</span>
+        <span class="gjs-sm-header">${unsafeHTML(notification.message)}</span>
+      </header>
+      <footer class="gjs-sm-footer">
+        <button @click=${() => notification.remove()} class="gjs-btn-prim">${editor.I18n.t('@silexlabs/grapesjs-notifications.Close')}</button>
+        ${notification.componentId ? html`
+          <button @click=${() => notification.select()} class="gjs-btn-prim">${editor.I18n.t('@silexlabs/grapesjs-notifications.Select')}</button>
+        ` : ''}
+      </footer>
+    </li>
+  `
+}

package/grapesjs-plugins/grapesjs-notifications/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es2019",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "rootDir": "./src",
+    "outDir": "dist"
+  },
+  "include": [
+    "src"
+  ]
+}