@peak-ai/canvas 1.4.22 → 1.4.23

package/src/helpers/filter-placeholder.ts

@@ -1,18 +0,0 @@
-// 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

@@ -1,13 +0,0 @@
-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

@@ -1,106 +0,0 @@
-/* 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

@@ -1,58 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,196 +0,0 @@
-/* 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

@@ -1,123 +0,0 @@
-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;