@peak-ai/canvas 1.3.16 → 1.3.17

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,3 +0,0 @@
-export { default as GrapejsCanvas } from './GrapesjsCanvas';
-export * from './index.styles';
-export { getUpdatedUiJson } from './helpers/merge-json';

package/src/plugins/grapejs-plugin.tsx

@@ -1,139 +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';
-
-export function createGrapesjsShadcnGenericPlugin(
-  mode: 'editor' | 'preview',
-  performInteraction: (payload: Record<string, any>) => void,
-  renderedComponents: Record<string, Component> = {},
-) {
-  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,
-          });
-        },
-        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(<Renderer {...compProps} gjsModel={this.model} />, this.el);
-
-              const children = this.model.components();
-              const tabsContent = this.el.querySelectorAll('.tabs-content');
-              children.each((childModel, i) => {
-                const childView = this.createView(childModel);
-
-                if (childView) {
-                  childView.render();
-                  tabsContent[i].appendChild(childView.el);
-                }
-              });
-            } else {
-              ReactDOM.render(<Renderer {...compProps} gjsModel={this.model} />, 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/extra.tsx

@@ -1,151 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { JSX } from 'react';
-
-import { cn } from '../../shadcn/utils';
-import { Checkbox } from '../../shadcn/components/ui/checkbox';
-import {
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardContent,
-} from '../../shadcn/components/ui/hover-card';
-import { Input } from '../../shadcn/components/ui/input';
-import { Label } from '../../shadcn/components/ui/label';
-import { Separator } from '../../shadcn/components/ui/separator';
-import { Textarea } from '../../shadcn/components/ui/textarea';
-import { Tooltip, TooltipTrigger, TooltipContent } from '../../shadcn/components/ui/tooltip';
-
-export function renderCheckbox(props: any): JSX.Element {
-  const { label = '', defaultChecked = false, className, isEditable = false, ...rest } = props;
-  const defaultClasses = 'flex items-center';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <div className={merged} {...rest}>
-      <Checkbox defaultChecked={defaultChecked} />
-      {label && (
-        <Label data-slot="label" contentEditable={isEditable} className="ml-2">
-          {label}
-        </Label>
-      )}
-    </div>
-  );
-}
-
-export function renderHoverCard(props: any): JSX.Element {
-  const {
-    triggerContent = 'Hover over me',
-    cardContent = 'Additional information',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const defaultClasses = 'w-[320px] max-w-[320px] shadow rounded-lg';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <HoverCard className={merged} {...rest}>
-      <HoverCardTrigger asChild>
-        <span data-slot="triggerContent" contentEditable={isEditable}>
-          {triggerContent}
-        </span>
-      </HoverCardTrigger>
-      <HoverCardContent>
-        <div data-slot="cardContent" contentEditable={isEditable}>
-          {cardContent}
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  );
-}
-
-export function renderInput(props: any): JSX.Element {
-  const {
-    label = '',
-    placeholder = '',
-    value = '',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const defaultClasses = 'w-[320px] p-2 border border-gray-300 rounded-md';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <div className={`flex flex-col ${merged}`} {...rest}>
-      {label && (
-        <Label data-slot="label" contentEditable={isEditable} className="mb-1">
-          {label}
-        </Label>
-      )}
-      <Input placeholder={placeholder} value={value} />
-    </div>
-  );
-}
-
-export function renderLabel(props: any): JSX.Element {
-  const { text = 'Label', className, isEditable = false, ...rest } = props;
-  const defaultClasses = 'text-base font-semibold mb-2';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <Label data-slot="text" contentEditable={isEditable} className={merged} {...rest}>
-      {text}
-    </Label>
-  );
-}
-
-export function renderSeparator(props: any): JSX.Element {
-  const { className, ...rest } = props;
-  const defaultClasses = 'my-4 border-t-2';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return <Separator className={merged} {...rest} />;
-}
-
-export function renderTextarea(props: any): JSX.Element {
-  const {
-    label = '',
-    placeholder = '',
-    value = '',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const defaultClasses = 'w-[320px] p-2 border border-gray-300 rounded-md';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <div className={`flex flex-col ${merged}`} {...rest}>
-      {label && (
-        <Label data-slot="label" contentEditable={isEditable} className="mb-1">
-          {label}
-        </Label>
-      )}
-      <Textarea placeholder={placeholder} value={value} />
-    </div>
-  );
-}
-
-export function renderTooltip(props: any): JSX.Element {
-  const {
-    triggerContent = 'Hover here',
-    tooltipContent = 'Tooltip information',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const merged = className || '';
-
-  return (
-    <Tooltip className={merged} {...rest}>
-      <TooltipTrigger asChild>
-        <span data-slot="triggerContent" contentEditable={isEditable}>
-          {triggerContent}
-        </span>
-      </TooltipTrigger>
-      <TooltipContent data-slot="tooltipContent" contentEditable={isEditable}>
-        {tooltipContent}
-      </TooltipContent>
-    </Tooltip>
-  );
-}