@peak-ai/canvas 1.4.21 → 1.4.22

package/src/helpers/filter-placeholder.ts

@@ -0,0 +1,18 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function filterPlaceholders(obj: any) {
+  if (!obj || typeof obj !== 'object') {
+    return obj;
+  }
+
+  const filtered = { ...obj };
+
+  Object.keys(filtered).forEach((key) => {
+    const value = filtered[key];
+
+    if (value && typeof value === 'object' && value.name === '__peak_placeholder') {
+      delete filtered[key];
+    }
+  });
+
+  return filtered;
+}

package/src/helpers/index.ts

@@ -0,0 +1,13 @@
+export function toKebabCase(str: string): string {
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+export function getAffectedComponentsWithLoader(
+  affectedComponents: Array<string>,
+  showLoader = true,
+) {
+  return affectedComponents.map((component) => ({
+    componentId: component,
+    showLoader,
+  }));
+}

package/src/helpers/merge-json.ts

@@ -0,0 +1,106 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function isPlaceholder(obj: Record<string, any>) {
+  return typeof obj === 'object' && obj !== null && obj.name === '__peak_placeholder';
+}
+
+function extractPlaceholders(
+  json: Record<string, any>,
+  mapping: Record<string, any>,
+  parentId: string | undefined = undefined,
+) {
+  let updatedParentId = parentId;
+
+  if (json === null) {
+    return;
+  } else if (Array.isArray(json)) {
+    json.forEach((item) => extractPlaceholders(item, mapping, updatedParentId));
+
+    return;
+  } else if (typeof json === 'object') {
+    if (json.id) {
+      updatedParentId = json.id;
+    }
+
+    for (const [key, value] of Object.entries(json)) {
+      if (isPlaceholder(value)) {
+        if (updatedParentId) {
+          mapping[updatedParentId] = mapping[updatedParentId] || {};
+          mapping[updatedParentId][key] = value;
+        }
+      } else if (typeof value === 'object') {
+        extractPlaceholders(value, mapping, updatedParentId);
+      }
+    }
+  }
+}
+
+function replacePlaceholders(
+  json: Record<string, any>,
+  mapping: Record<string, any>,
+): Record<string, any> {
+  if (json === null) {
+    return json;
+  }
+
+  if (Array.isArray(json)) {
+    return json.map((item) => replacePlaceholders(item, mapping));
+  }
+
+  if (typeof json === 'object') {
+    const newJson = { ...json };
+
+    if (newJson.id && mapping[newJson.id]) {
+      for (const [key, placeholderValue] of Object.entries(mapping[newJson.id])) {
+        if (key in newJson) {
+          newJson[key] = placeholderValue;
+        }
+      }
+    }
+
+    if (newJson.componentName?.toLowerCase() === 'filter') {
+      newJson.componentProps = {
+        ...newJson.componentProps,
+        value: null,
+      };
+    }
+
+    if (newJson.componentName?.toLowerCase() === 'search' && newJson.componentProps?.searchText) {
+      newJson.componentProps = {
+        ...newJson.componentProps,
+        searchText: null,
+      };
+    }
+
+    if (
+      newJson.componentName?.toLowerCase() === 'table' &&
+      (newJson.componentProps?.sortColumn || newJson.componentProps?.sortDirection)
+    ) {
+      newJson.componentProps = {
+        ...newJson.componentProps,
+        sortColumn: null,
+        sortDirection: null,
+      };
+    }
+
+    for (const [key, value] of Object.entries(newJson)) {
+      newJson[key] = replacePlaceholders(value, mapping);
+    }
+
+    return newJson;
+  }
+
+  return json;
+}
+
+export function getUpdatedUiJson(uiJson: Record<string, any>, finalJson: Record<string, any>) {
+  const placeholderMapping = {};
+  extractPlaceholders(uiJson, placeholderMapping);
+
+  const cloneJson = JSON.parse(JSON.stringify(finalJson));
+  const newFinalJson = replacePlaceholders(cloneJson, placeholderMapping);
+
+  return {
+    ...newFinalJson,
+    styles: uiJson.styles || [],
+  };
+}

package/src/index.styles.ts

@@ -0,0 +1,58 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const StyledEditor = createGlobalStyle`
+  /* Hide GrapesJS panels */
+  .gs-sidebar-left,
+  .gs-sidebar-top,
+  .gs-sidebar-right,
+  .gjs-pn-panels,
+  .gjs-pn-views,
+  .gjs-off-prv,
+  .gjs-pn-devices {
+    display: none !important;
+  }
+
+  .gjs-badge-label {
+    display: none !important;
+  }
+
+  .gjs-cv-canvas {
+    height: 100% !important;
+    width: 100% !important;
+    top: 0 !important;
+  }
+
+  .gjs-hovered, 
+  .gjs-selected,
+  [data-gjs-type],
+  [data-highlightable] {
+    outline: none !important;
+  }
+
+  .gjs-highlighter, 
+  .gjs-highlighter-sel,
+  .gjs-selected-parent,
+  .gjs-toolbar {
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+
+  .gjs-frame {
+    outline: none !important;
+    border: none !important;
+  }
+
+  .gjs-selected::before,
+  .gjs-selected::after,
+  .gjs-hovered::before,
+  .gjs-hovered::after {
+    display: none !important;
+    background: none !important;
+  }
+
+  .gjs-com-badge,
+  .gjs-badge {
+    display: none !important;
+  }
+`;

package/src/index.ts

@@ -0,0 +1,9 @@
+export { default as GrapejsCanvas } from './GrapesjsCanvas';
+export * from './index.styles';
+export { getUpdatedUiJson } from './helpers/merge-json';
+export { DataTable } from './plugins/helpers/data-table';
+export { StyledInfoButton } from './plugins/helpers/styled-info-button';
+export { AiAvatarIcon } from './shadcn/components/icons/AiAvatarIcon';
+export { CustomModal } from './plugins/helpers/custom-modal';
+export { QueryDetailsModal } from './plugins/helpers/query-details-modal';
+export { QueryLoadingModal } from './plugins/helpers/query-loading-modal';

package/src/plugins/grapejs-plugin.tsx

@@ -0,0 +1,196 @@
+/* eslint-disable import/no-named-as-default-member */
+/* eslint-disable func-names */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ReactDOM from 'react-dom';
+import { Editor, Component } from 'grapesjs';
+import { getRenderers } from './helpers/render-components';
+import { QueryCacheProvider } from './helpers/query-cache-context';
+
+export function createGrapesjsShadcnGenericPlugin(
+  mode: 'editor' | 'preview',
+  performInteraction: (payload: Record<string, any>) => void,
+  renderedComponents: Record<string, Component> = {},
+  setHasChanged: (hasChanged: boolean) => void,
+) {
+  return function grapesjsShadcnGenericPlugin(editor: Editor): void {
+    editor.DomComponents.addType('shadcn-generic', {
+      model: {
+        defaults: {
+          tagName: 'div',
+          droppable: false,
+          componentName: 'Card',
+          componentProps: {},
+          traits: [],
+        },
+      },
+      view: {
+        events: {
+          'input [data-slot]': 'handleSlotInput',
+        } as any,
+        handleSlotInput(e: Event) {
+          const target = e.target as HTMLElement;
+          const slot = target.dataset.slot;
+          const text = target.innerText;
+
+          const props = this.model.get('componentProps') || {};
+
+          if (!slot) {
+            return;
+          }
+
+          if (slot.startsWith('table-header-')) {
+            const idx = parseInt(slot.split('-')[2], 10);
+            const dataKeys = Object.keys(props.data?.[0] || {});
+
+            if (!props.headerMapper) {
+              props.headerMapper = {};
+            }
+
+            const key = dataKeys[idx];
+
+            if (key) {
+              props.headerMapper[key] = text;
+            }
+          } else {
+            props[slot] = text;
+          }
+
+          this.model.set('componentProps', {
+            ...props,
+          });
+
+          if (!['search-input'].includes(slot)) {
+            setHasChanged(true);
+          }
+        },
+        render: function () {
+          const compName: string = this.model.get('componentName');
+          let compProps: any = this.model.get('componentProps');
+
+          if (typeof compProps === 'string') {
+            try {
+              compProps = JSON.parse(compProps);
+            } catch (err) {
+              // eslint-disable-next-line no-console
+              console.error('Invalid JSON in componentProps', err);
+              compProps = {};
+            }
+          }
+
+          compProps.isEditable = mode === 'editor';
+          compProps.performInteraction = performInteraction;
+
+          compProps.onChange = (data: Record<string, any>) => {
+            this.model.set('componentProps', {
+              ...this.model.get('componentProps'),
+              ...data,
+            });
+          };
+
+          const renderers = getRenderers();
+          const Renderer = renderers[compName];
+
+          if (Renderer) {
+            if (compName === 'Tabs') {
+              ReactDOM.render(
+                <QueryCacheProvider maxCacheSize={100} maxCacheAge={5 * 60 * 1000}>
+                  <Renderer {...compProps} gjsModel={this.model} />
+                </QueryCacheProvider>,
+                this.el
+              );
+
+              const children = this.model.components();
+              const tabsContent = this.el.querySelectorAll('.tabs-content');
+
+              const tabAttributes = this.model.get('attributes') || {};
+              const hasTabsError = tabAttributes.error || compProps.error;
+              const hasTabsMissing = tabAttributes.isMissing || compProps.isMissing;
+              const isFallback = Array.from(tabsContent).some(
+                (el: Element) => (el as HTMLElement).dataset.fallback === 'true',
+              );
+
+              if (!isFallback && tabsContent.length > 0) {
+                // Helper function to sync child attributes
+                // eslint-disable-next-line no-inner-declarations
+                function syncChildAttributes(childModel: any) {
+                  const childAttributes = childModel.get('attributes') || {};
+                  const childProps = childModel.get('componentProps') || {};
+
+                  const hasError = hasTabsError || childAttributes.error || childProps.error;
+                  const hasMissing =
+                    hasTabsMissing || childAttributes.isMissing || childProps.isMissing;
+
+                  if (hasError || hasMissing) {
+                    const newAttributes = {
+                      ...childAttributes,
+                      loading: false,
+                      error: hasError,
+                      isMissing: hasMissing,
+                      inheritedFromParent: !!(hasTabsError || hasTabsMissing),
+                    };
+
+                    childModel.set('attributes', newAttributes, { silent: false });
+                  }
+                }
+
+                children.each((childModel, i) => {
+                  const childView = this.createView(childModel);
+
+                  if (childView && tabsContent[i]) {
+                    childView.render();
+                    tabsContent[i].appendChild(childView.el);
+
+                    setTimeout(() => {
+                      syncChildAttributes(childModel);
+                    }, 100);
+
+                    childModel.on('change:attributes', () => {
+                      syncChildAttributes(childModel);
+                    });
+                  }
+                });
+              }
+            } else {
+              ReactDOM.render(
+                <QueryCacheProvider maxCacheSize={100} maxCacheAge={5 * 60 * 1000}>
+                  <Renderer {...compProps} gjsModel={this.model} />
+                </QueryCacheProvider>,
+                this.el
+              );
+            }
+          } else {
+            this.el.innerHTML = `<div>Unsupported component: ${compName}</div>`;
+          }
+
+          renderedComponents[this.model.get('id')] = this.model;
+
+          return this;
+        },
+        createView(model: any) {
+          const ComponentView = this.em.get('DomComponents').getType(model.get('type'))?.view;
+
+          if (!ComponentView) {
+            // eslint-disable-next-line no-console
+            console.warn('No view found for component type:', model.get('type'));
+
+            return null;
+          }
+
+          const view = new ComponentView({
+            model,
+            config: this.config,
+            componentTypes: this.componentTypes,
+          });
+
+          return view;
+        },
+        remove: function () {
+          // eslint-disable-next-line import/no-named-as-default-member
+          ReactDOM.unmountComponentAtNode(this.el);
+
+          return this;
+        },
+      },
+    });
+  };
+}

package/src/plugins/helpers/custom-modal.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect } from 'react';
+import { X } from 'lucide-react';
+
+type CustomModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+  titleIcon?: React.ReactNode;
+}
+
+export function CustomModal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  className = '',
+  titleIcon
+}: CustomModalProps) {
+
+  useEffect(() => {
+    function handleEscapeKey(event: KeyboardEvent) {
+      if (event.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscapeKey);
+      const iframe = document.querySelector('.gjs-frame') as HTMLIFrameElement;
+      const iframeDocument = iframe?.contentDocument || iframe?.contentWindow?.document;
+      
+      if (iframeDocument) {
+        iframeDocument.documentElement?.style.setProperty('overflow', 'hidden', 'important');
+      }
+
+      return () => {
+        document.removeEventListener('keydown', handleEscapeKey);
+        
+        if (iframeDocument) {
+          iframeDocument.documentElement?.style.removeProperty('overflow');
+        }
+      };
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [isOpen, onClose]);
+
+  function handleBackdropClick(event: React.MouseEvent<HTMLDivElement>) {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  }
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black bg-opacity-30 ${className}`}
+      onClick={handleBackdropClick}
+    >
+      <div
+        className="relative w-full max-w-2xl max-h-[90vh] min-h-[45vh] bg-white rounded-lg shadow-xl overflow-hidden animate-modal-fade-in"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="p-6 border-b border-gray-200 bg-gray-50 relative flex items-center justify-between">
+          <h2 className="flex items-center text-lg font-semibold text-gray-900">
+            {titleIcon && <span className="mr-2">{titleIcon}</span>}
+            {title}
+          </h2>
+
+          <button
+            onClick={onClose}
+            className="transition-colors duration-200 hover:bg-gray-100 rounded p-1 flex items-center justify-center"
+            type="button"
+            aria-label="Close modal"
+            style={{
+              width: '24px',
+              height: '24px'
+            }}
+          >
+            <X 
+              size={12}
+              className="text-gray-600"
+              style={{ 
+                opacity: 1,
+                transform: 'rotate(0deg)'
+              }}
+            />
+          </button>
+        </div>
+
+        <div className="overflow-y-auto max-h-[calc(90vh-160px)]">
+          {children}
+        </div>
+      </div>
+
+      <style>{`
+        .animate-modal-fade-in {
+          animation: modalFadeIn 0.2s ease-out;
+        }
+        
+        @keyframes modalFadeIn {
+          from {
+            opacity: 0;
+            transform: scale(0.95) translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+          }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default CustomModal;