@intranefr/superbackend 1.5.2 → 1.6.3

package/plugins/ui-components-seeder/components/suiAlert.js

@@ -0,0 +1,212 @@
+module.exports = {
+  code: 'sui_alert',
+  name: 'SUI Alert',
+  html: `<div class="sui-alert-overlay" data-sui-alert-overlay>
+  <div class="sui-alert" data-sui-alert>
+    <div class="sui-alert-header">
+      <span class="sui-alert-title" data-sui-alert-title></span>
+      <button class="sui-alert-close" data-sui-alert-close aria-label="Close">&times;</button>
+    </div>
+    <div class="sui-alert-body" data-sui-alert-body></div>
+    <div class="sui-alert-footer">
+      <button class="sui-alert-btn sui-alert-btn-primary" data-sui-alert-confirm>OK</button>
+    </div>
+  </div>
+</div>`,
+  css: `.sui-alert-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.sui-alert-overlay.sui-alert-show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.sui-alert {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  max-width: 400px;
+  width: 90%;
+  transform: scale(0.9);
+  transition: transform 0.3s ease;
+}
+
+.sui-alert-overlay.sui-alert-show .sui-alert {
+  transform: scale(1);
+}
+
+.sui-alert-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.sui-alert-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #111827;
+}
+
+.sui-alert-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.sui-alert-close:hover {
+  background-color: #f3f4f6;
+}
+
+.sui-alert-body {
+  padding: 20px;
+  color: #374151;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.sui-alert-footer {
+  padding: 12px 20px 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.sui-alert-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.sui-alert-btn-primary {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.sui-alert-btn-primary:hover {
+  background-color: #2563eb;
+}
+
+.sui-alert-overlay.sui-alert-success .sui-alert-title { color: #059669; }
+.sui-alert-overlay.sui-alert-warning .sui-alert-title { color: #d97706; }
+.sui-alert-overlay.sui-alert-error .sui-alert-title { color: #dc2626; }`,
+  js: `let currentAlert = null;
+let autoDismissTimer = null;
+
+function showAlert(options = {}) {
+  const {
+    title = 'Alert',
+    message = '',
+    type = 'info',
+    confirmText = 'OK',
+    onConfirm = null,
+    autoDismiss = 0,
+  } = options;
+
+  if (currentAlert) hideAlert();
+
+  const overlay = templateRootEl.querySelector('[data-sui-alert-overlay]');
+  const titleEl = templateRootEl.querySelector('[data-sui-alert-title]');
+  const bodyEl = templateRootEl.querySelector('[data-sui-alert-body]');
+  const closeEl = templateRootEl.querySelector('[data-sui-alert-close]');
+  const confirmEl = templateRootEl.querySelector('[data-sui-alert-confirm]');
+
+  titleEl.textContent = title;
+  bodyEl.textContent = message;
+  confirmEl.textContent = confirmText;
+
+  overlay.className = 'sui-alert-overlay';
+  overlay.classList.add('sui-alert-' + type);
+
+  function hide() {
+    overlay.classList.remove('sui-alert-show');
+    setTimeout(() => {
+      overlay.style.display = 'none';
+      if (autoDismissTimer) {
+        clearTimeout(autoDismissTimer);
+        autoDismissTimer = null;
+      }
+      currentAlert = null;
+    }, 300);
+  }
+
+  closeEl.onclick = hide;
+  confirmEl.onclick = () => {
+    if (typeof onConfirm === 'function') onConfirm();
+    hide();
+  };
+
+  if (autoDismiss > 0) autoDismissTimer = setTimeout(hide, autoDismiss);
+
+  overlay.style.display = 'flex';
+  currentAlert = overlay;
+  requestAnimationFrame(() => overlay.classList.add('sui-alert-show'));
+  return hide;
+}
+
+function hideAlert() {
+  if (!currentAlert) return;
+  currentAlert.classList.remove('sui-alert-show');
+  currentAlert.style.display = 'none';
+  currentAlert = null;
+}
+
+return {
+  show: showAlert,
+  hide: hideAlert,
+  info: (title, message, options) => showAlert({ ...options, title, message, type: 'info' }),
+  success: (title, message, options) => showAlert({ ...options, title, message, type: 'success' }),
+  warning: (title, message, options) => showAlert({ ...options, title, message, type: 'warning' }),
+  error: (title, message, options) => showAlert({ ...options, title, message, type: 'error' }),
+};`,
+  usageMarkdown: `# SUI Alert Component
+
+Non-blocking customizable alert.
+
+## SDK Usage
+
+\`\`\`javascript
+await uiCmp.load('sui_alert');
+const alertCmp = await uiCmp.sui_alert.create();
+alertCmp.success('Done', 'Operation completed');
+\`\`\`
+
+## Methods
+- \`show(options)\`
+- \`hide()\`
+- \`info(title, message, options)\`
+- \`success(title, message, options)\`
+- \`warning(title, message, options)\`
+- \`error(title, message, options)\``,
+  api: 'show(options), hide(), info(title,message,options), success(title,message,options), warning(title,message,options), error(title,message,options)',
+  previewExample: `const i = await uiCmp.create({});\ni.warning("ATTENTION");`,
+  version: '1.0.0',
+  isActive: true,
+};

package/plugins/ui-components-seeder/components/suiToast.js

@@ -0,0 +1,186 @@
+  module.exports = {
+  code: 'sui_toast',
+  name: 'SUI Toast',
+  html: `<div class="sui-toast-container" data-sui-toast-container>
+  <div class="sui-toast" data-sui-toast-template>
+    <div class="sui-toast-icon" data-sui-toast-icon></div>
+    <div class="sui-toast-content">
+      <div class="sui-toast-title" data-sui-toast-title></div>
+      <div class="sui-toast-message" data-sui-toast-message></div>
+    </div>
+    <button class="sui-toast-close" data-sui-toast-close aria-label="Close">&times;</button>
+  </div>
+</div>`,
+  css: `.sui-toast-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 10000;
+  pointer-events: none;
+}
+
+.sui-toast {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 16px;
+  margin-bottom: 12px;
+  min-width: 300px;
+  max-width: 400px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  pointer-events: auto;
+  transform: translateX(100%);
+  opacity: 0;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.sui-toast.sui-toast-show { transform: translateX(0); opacity: 1; }
+.sui-toast.sui-toast-hide { transform: translateX(100%); opacity: 0; }
+
+.sui-toast-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
+.sui-toast-icon::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; }
+.sui-toast.sui-toast-info .sui-toast-icon::before { background-color: #3b82f6; }
+.sui-toast.sui-toast-success .sui-toast-icon::before { background-color: #059669; }
+.sui-toast.sui-toast-warning .sui-toast-icon::before { background-color: #d97706; }
+.sui-toast.sui-toast-error .sui-toast-icon::before { background-color: #dc2626; }
+
+.sui-toast-content { flex: 1; min-width: 0; }
+.sui-toast-title { font-weight: 600; font-size: 14px; color: #111827; margin-bottom: 4px; line-height: 1.4; }
+.sui-toast-message { font-size: 13px; color: #6b7280; line-height: 1.4; }
+
+.sui-toast-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  flex-shrink: 0;
+}
+.sui-toast-close:hover { background-color: #f3f4f6; color: #6b7280; }
+
+.sui-toast-container.sui-toast-top-left { top: 20px; left: 20px; right: auto; }
+.sui-toast-container.sui-toast-top-right { top: 20px; right: 20px; }
+.sui-toast-container.sui-toast-bottom-left { bottom: 20px; left: 20px; right: auto; top: auto; }
+.sui-toast-container.sui-toast-bottom-right { bottom: 20px; right: 20px; top: auto; }
+.sui-toast-container.sui-toast-top-center { top: 20px; left: 50%; right: auto; transform: translateX(-50%); }
+.sui-toast-container.sui-toast-bottom-center { bottom: 20px; left: 50%; right: auto; top: auto; transform: translateX(-50%); }`,
+  js: `let toastContainer = null;
+let toastQueue = [];
+let activeToasts = new Map();
+
+function getContainer() {
+  if (!toastContainer) {
+    toastContainer = templateRootEl.querySelector('[data-sui-toast-container]');
+  }
+  return toastContainer;
+}
+
+function createToast(options = {}) {
+  const {
+    title = '',
+    message = '',
+    type = 'info',
+    duration = 5000,
+    position = 'top-right',
+  } = options;
+
+  const container = getContainer();
+  const template = container.querySelector('[data-sui-toast-template]');
+  const toastEl = template.cloneNode(true);
+  toastEl.removeAttribute('data-sui-toast-template');
+
+  const titleEl = toastEl.querySelector('[data-sui-toast-title]');
+  const messageEl = toastEl.querySelector('[data-sui-toast-message]');
+  const closeEl = toastEl.querySelector('[data-sui-toast-close]');
+
+  titleEl.textContent = title;
+  messageEl.textContent = message;
+
+  toastEl.className = 'sui-toast sui-toast-' + type;
+  container.className = 'sui-toast-container sui-toast-' + position;
+
+  function hide() {
+    toastEl.classList.add('sui-toast-hide');
+    setTimeout(() => {
+      if (container.contains(toastEl)) container.removeChild(toastEl);
+      activeToasts.delete(toastEl);
+      if (toastQueue.length > 0) {
+        const next = toastQueue.shift();
+        showToast(next);
+      }
+    }, 300);
+  }
+
+  closeEl.onclick = hide;
+
+  let timer = null;
+  if (duration > 0) timer = setTimeout(hide, duration);
+
+  return { element: toastEl, hide, timer };
+}
+
+function showToast(options = {}) {
+  if (activeToasts.size >= 5) {
+    toastQueue.push(options);
+    return null;
+  }
+
+  const toast = createToast(options);
+  const container = getContainer();
+  container.appendChild(toast.element);
+  activeToasts.set(toast.element, toast);
+
+  requestAnimationFrame(() => toast.element.classList.add('sui-toast-show'));
+  return toast.hide;
+}
+
+function clearAll() {
+  activeToasts.forEach((toast) => {
+    if (toast.timer) clearTimeout(toast.timer);
+    toast.hide();
+  });
+  toastQueue = [];
+}
+
+return {
+  show: showToast,
+  clear: clearAll,
+  info: (title, message, options) => showToast({ ...options, title, message, type: 'info' }),
+  success: (title, message, options) => showToast({ ...options, title, message, type: 'success' }),
+  warning: (title, message, options) => showToast({ ...options, title, message, type: 'warning' }),
+  error: (title, message, options) => showToast({ ...options, title, message, type: 'error' }),
+};`,
+  usageMarkdown: `# SUI Toast Component
+
+Non-blocking toast notification system.
+
+## SDK Usage
+
+\`\`\`javascript
+await uiCmp.load('sui_toast');
+const toastCmp = await uiCmp.sui_toast.create();
+toastCmp.success('Success', 'Toast works', { duration: 2500 });
+\`\`\`
+
+## Methods
+- \`show(options)\`
+- \`clear()\`
+- \`info(title, message, options)\`
+- \`success(title, message, options)\`
+- \`warning(title, message, options)\`
+- \`error(title, message, options)\``,
+  api: 'show(options), clear(), info(title,message,options), success(title,message,options), warning(title,message,options), error(title,message,options)',
+  previewExample: `const i = await uiCmp.create({});\nawait i.success("All good");`,
+  version: '1.0.0',
+  isActive: true,
+};

package/plugins/ui-components-seeder/index.js

@@ -0,0 +1,31 @@
+const alertComponent = require('./components/suiAlert');
+const toastComponent = require('./components/suiToast');
+
+module.exports = {
+  meta: {
+    id: 'sui-ui-components',
+    name: 'SUI - UI Components',
+    version: '1.1.0',
+    description: 'Simple UI Components - non-blocking alert and toast components',
+    tags: ['ui', 'components', 'alert', 'toast', 'sui'],
+  },
+  hooks: {
+    async install(ctx) {
+      const service = ctx?.services?.uiComponents || null;
+      if (!service) {
+        console.log('[sui-ui-components] uiComponents service not found, skipping seeding');
+        return;
+      }
+
+      console.log('[sui-ui-components] Installing SUI components...');
+
+      try {
+        await service.upsertComponent(alertComponent);
+        await service.upsertComponent(toastComponent);
+        console.log('[sui-ui-components] Successfully installed sui_alert and sui_toast components');
+      } catch (error) {
+        console.error('[sui-ui-components] Failed to install components:', error);
+      }
+    },
+  },
+};

package/public/js/admin-ui-components-preview.js

@@ -0,0 +1,281 @@
+(() => {
+  function createManager(opts) {
+    const {
+      nextTick,
+      previewMode,
+      previewCssIsolation,
+      previewPropsJson,
+      previewStatus,
+      previewLogs,
+      previewContainerRef,
+      previewTopMountRef,
+      previewIframeRef,
+      componentEditor,
+      showToast,
+    } = opts;
+
+    let runtime = null;
+    let topHost = null;
+
+    function pushLog(...parts) {
+      const line = parts.map((p) => (typeof p === 'string' ? p : JSON.stringify(p, null, 2))).join(' ');
+      previewLogs.value = [...previewLogs.value, line].slice(-200);
+    }
+
+    function clearLogs() {
+      previewLogs.value = [];
+    }
+
+    function parseProps() {
+      const raw = String(previewPropsJson.value || '').trim();
+      if (!raw) return {};
+      return JSON.parse(raw);
+    }
+
+    function getEditorComponent() {
+      const code = String(componentEditor.value.code || '').trim().toLowerCase() || 'preview_component';
+      return {
+        code,
+        html: String(componentEditor.value.html || ''),
+        css: String(componentEditor.value.css || ''),
+        js: String(componentEditor.value.js || ''),
+      };
+    }
+
+    function buildRuntime(targetWindow, mountEl, cssIsolation, code, html, css, js) {
+      let instance = null;
+      let styleEl = null;
+      let localStyles = [];
+
+      const created = {
+        async create(props, options) {
+          created.destroy();
+          const doc = targetWindow.document;
+          const root = (options && options.mountEl) || mountEl;
+          const tpl = doc.createElement('template');
+          tpl.innerHTML = String(html || '');
+
+          const host = doc.createElement('div');
+          host.dataset.previewCode = code;
+          host.appendChild(tpl.content.cloneNode(true));
+
+          // Check if we're already inside a shadow DOM (top-frame mode)
+          const existingShadowRoot = mountEl.getRootNode?.();
+          const isInShadow = existingShadowRoot instanceof targetWindow.ShadowRoot;
+          
+          if (css && ((options && options.cssIsolation) === 'shadow' || cssIsolation === 'shadow')) {
+            if (isInShadow) {
+              // We're already in a shadow DOM (top-frame mode), inject CSS there
+              const style = doc.createElement('style');
+              style.textContent = String(css || '');
+              existingShadowRoot.appendChild(style);
+              localStyles.push(style);
+              root.appendChild(host);
+              instance = { rootEl: host, templateRootEl: host };
+            } else {
+              // Create new shadow DOM (iframe mode)
+              const shadowHost = doc.createElement('div');
+              const shadow = shadowHost.attachShadow({ mode: 'open' });
+              const style = doc.createElement('style');
+              style.textContent = String(css || '');
+              shadow.appendChild(style);
+              shadow.appendChild(host);
+              root.appendChild(shadowHost);
+              instance = { rootEl: shadowHost, templateRootEl: shadow };
+            }
+          } else {
+            if (css) {
+              if (isInShadow) {
+                // Inject CSS into existing shadow DOM for top-frame non-shadow mode
+                const style = doc.createElement('style');
+                style.textContent = String(css || '');
+                existingShadowRoot.appendChild(style);
+                localStyles.push(style);
+              } else {
+                // Inject into document head for iframe mode
+                styleEl = doc.createElement('style');
+                styleEl.textContent = String(css || '');
+                doc.head.appendChild(styleEl);
+              }
+            }
+            root.appendChild(host);
+            instance = { rootEl: host, templateRootEl: host };
+          }
+
+          const api = {
+            unmount: created.destroy,
+            mountEl: root,
+            hostEl: instance.rootEl,
+            shadowRoot: instance.templateRootEl instanceof targetWindow.ShadowRoot ? instance.templateRootEl : null,
+          };
+
+          const fn = new targetWindow.Function('api', 'templateRootEl', 'props', String(js || ''));
+          const exported = fn(api, instance.templateRootEl, props || {}) || {};
+          instance.api = api;
+          instance.exported = exported;
+          return Object.assign({ api }, exported);
+        },
+        destroy() {
+          if (instance && instance.rootEl && instance.rootEl.remove) instance.rootEl.remove();
+          if (styleEl && styleEl.remove) styleEl.remove();
+          localStyles.forEach((s) => {
+            if (s && s.remove) s.remove();
+          });
+          localStyles = [];
+          instance = null;
+          styleEl = null;
+        },
+        get instance() {
+          return instance;
+        },
+      };
+
+      return created;
+    }
+
+    function cleanup() {
+      if (runtime) runtime.destroy();
+      runtime = null;
+      if (previewTopMountRef.value) previewTopMountRef.value.innerHTML = '';
+      if (previewIframeRef.value && previewMode.value === 'iframe') {
+        const doc = previewIframeRef.value.contentDocument;
+        if (doc && doc.body) doc.body.innerHTML = '';
+      }
+      topHost = null;
+    }
+
+    async function buildTopRuntime() {
+      await nextTick();
+      if (!previewTopMountRef.value) throw new Error('Top preview mount not ready');
+
+      previewTopMountRef.value.innerHTML = '';
+      topHost = document.createElement('div');
+      topHost.className = 'h-full w-full';
+      const shadow = topHost.attachShadow({ mode: 'open' });
+      const wrapper = document.createElement('div');
+      wrapper.style.height = '100%';
+      wrapper.style.padding = '12px';
+      wrapper.style.overflow = 'auto';
+      const mount = document.createElement('div');
+      wrapper.appendChild(mount);
+      shadow.appendChild(wrapper);
+      previewTopMountRef.value.appendChild(topHost);
+
+      const c = getEditorComponent();
+      runtime = buildRuntime(window, mount, previewCssIsolation.value, c.code, c.html, c.css, c.js);
+    }
+
+    async function buildTopNoIsolationRuntime() {
+      await nextTick();
+      if (!previewTopMountRef.value) throw new Error('Top preview mount not ready');
+
+      previewTopMountRef.value.innerHTML = '';
+      const mount = document.createElement('div');
+      mount.className = 'h-full w-full p-3 overflow-auto';
+      previewTopMountRef.value.appendChild(mount);
+
+      const c = getEditorComponent();
+      runtime = buildRuntime(window, mount, previewCssIsolation.value, c.code, c.html, c.css, c.js);
+    }
+
+    async function buildIframeRuntime() {
+      await nextTick();
+      const iframe = previewIframeRef.value;
+      if (!iframe) throw new Error('Iframe preview not ready');
+
+      iframe.srcdoc = '<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head><body style="margin:0;padding:12px;background:#f9fafb;"><div id="preview-root"></div></body></html>';
+      await new Promise((resolve) => { iframe.onload = () => resolve(); });
+
+      const win = iframe.contentWindow;
+      const doc = iframe.contentDocument;
+      const mount = doc.getElementById('preview-root');
+      const c = getEditorComponent();
+      runtime = buildRuntime(win, mount, previewCssIsolation.value, c.code, c.html, c.css, c.js);
+    }
+
+    async function run() {
+      try {
+        previewStatus.value = 'running';
+        cleanup();
+
+        if (!String(componentEditor.value.html || '').trim() && !String(componentEditor.value.js || '').trim()) {
+          previewStatus.value = 'idle';
+          pushLog('[preview] editor empty');
+          return;
+        }
+
+        if (previewMode.value === 'top') {
+          await buildTopRuntime();
+        } else if (previewMode.value === 'top-no-isolation') {
+          await buildTopNoIsolationRuntime();
+        } else {
+          await buildIframeRuntime();
+        }
+
+        const instance = await runtime.create(parseProps(), { cssIsolation: previewCssIsolation.value });
+        pushLog('[preview] mounted', { mode: previewMode.value, code: getEditorComponent().code, methods: Object.keys(instance || {}) });
+        previewStatus.value = 'ready';
+      } catch (e) {
+        previewStatus.value = 'error';
+        pushLog('[preview:error]', e.message);
+        showToast(e.message, 'error');
+      }
+    }
+
+    function reset() {
+      cleanup();
+      previewStatus.value = 'idle';
+      pushLog('[preview] reset');
+    }
+
+    function apiFacade() {
+      return {
+        create: async (props, options) => {
+          if (!runtime) throw new Error('Preview runtime not initialized. Click Run Preview first.');
+          return runtime.create(props || {}, options || { cssIsolation: previewCssIsolation.value });
+        },
+        destroy: () => {
+          if (runtime) runtime.destroy();
+          return true;
+        },
+        getInstance: () => (runtime ? runtime.instance : null),
+        mode: previewMode.value,
+      };
+    }
+
+    async function runCommand(commandText) {
+      if (!runtime) await run();
+      const cmd = String(commandText || '').trim();
+      if (!cmd) return undefined;
+      const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
+      const runner = new AsyncFunction('uiCmp', 'log', 'state', cmd);
+      const result = await runner(apiFacade(), (...args) => pushLog('[cmd]', ...args), {
+        mode: previewMode.value,
+        cssIsolation: previewCssIsolation.value,
+      });
+      if (result !== undefined) pushLog('[result]', result);
+      return result;
+    }
+
+    async function toggleFullscreen() {
+      const el = previewContainerRef.value;
+      if (!el) return;
+      if (!document.fullscreenElement) await el.requestFullscreen();
+      else await document.exitFullscreen();
+    }
+
+    return {
+      run,
+      reset,
+      cleanup,
+      clearLogs,
+      pushLog,
+      runCommand,
+      toggleFullscreen,
+    };
+  }
+
+  window.AdminUiComponentsPreview = {
+    createManager,
+  };
+})();