@peak-ai/canvas 1.4.11 → 1.4.12-rc.12

package/scripts/build.ts

@@ -1,88 +0,0 @@
-#!/usr/bin/env node
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require('path');
-const fs = require('fs');
-const { execSync } = require('child_process');
-
-// CommonJS always has __dirname defined already
-console.log('Building canvas-ui-toolkit...');
-
-const distDir = path.join(__dirname, '../dist');
-
-try {
-  // Clean dist directory
-  console.log('Cleaning dist directory...');
-  fs.rmSync(distDir, { recursive: true, force: true });
-  fs.mkdirSync(distDir, { recursive: true });
-
-  // Generate TypeScript declarations
-  console.log('Generating TypeScript declarations...');
-  execSync('tsc --project tsconfig.build.json --emitDeclarationOnly', { stdio: 'inherit' });
-
-  // Transpile with Babel
-  console.log('Transpiling with Babel...');
-  execSync(
-    'babel src --out-dir dist --extensions ".ts,.tsx" --ignore "**/*.stories.tsx,**/__tests__/*,**/*.test.ts,**/*.test.tsx" --source-maps --minified',
-    { stdio: 'inherit' },
-  );
-
-  // Copy README.md
-  console.log('Copying README.md...');
-  const readmeSrc = path.join(__dirname, '../README.md');
-  const readmeDest = path.join(distDir, 'README.md');
-  if (fs.existsSync(readmeSrc)) {
-    fs.copyFileSync(readmeSrc, readmeDest);
-  }
-
-  // Copy compiled table.css file
-  console.log('Copying compiled-table.css file...');
-  const copyTableCss = (source: string, destination: string): void => {
-    if (fs.existsSync(source)) {
-      if (fs.statSync(source).isDirectory()) {
-        if (!fs.existsSync(destination)) {
-          fs.mkdirSync(destination, { recursive: true });
-        }
-        fs.readdirSync(source).forEach((file: string) => {
-          const srcPath = path.join(source, file);
-          const destPath = path.join(destination, file);
-          copyTableCss(srcPath, destPath);
-        });
-      } else if (source.endsWith('compiled-table.css')) {
-        const destDir = path.dirname(destination);
-        if (!fs.existsSync(destDir)) {
-          fs.mkdirSync(destDir, { recursive: true });
-        }
-        fs.copyFileSync(source, destination);
-      }
-    }
-  };
-  copyTableCss(path.join(__dirname, '../src'), distDir);
-
-  // Copy and clean package.json
-  console.log('Preparing package.json...');
-  const packageJsonPath = path.join(__dirname, '../package.json');
-  const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
-
-  delete pkg.devDependencies;
-  delete pkg.files;
-  delete pkg.scripts;
-
-  pkg.main = 'index.js';
-  pkg.types = 'index.d.ts';
-  pkg.module = 'index.js';
-  pkg.sideEffects = false;
-
-  fs.writeFileSync(path.join(distDir, 'package.json'), JSON.stringify(pkg, null, 2));
-
-  const npmrcSrc = path.join(__dirname, '../.npmrc');
-  const npmrcDest = path.join(distDir, '.npmrc');
-
-  if (fs.existsSync(npmrcSrc)) {
-    fs.copyFileSync(npmrcSrc, npmrcDest);
-  }
-
-  console.log('Build completed successfully! ✨');
-} catch (err) {
-  console.error('Build failed:', err);
-  process.exit(1);
-}

package/src/GrapesjsCanvas.tsx

@@ -1,340 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, useRef, useState } from 'react';
-// eslint-disable-next-line import/no-named-as-default
-import grapesjs, { Component, Editor } from 'grapesjs';
-import 'grapesjs/dist/css/grapes.min.css';
-import tailwind from 'grapesjs-tailwind';
-import { TypesToRegister } from './constants';
-import { toKebabCase } from './helpers';
-import { createGrapesjsShadcnGenericPlugin } from './plugins/grapejs-plugin';
-import { StyledEditor } from './index.styles';
-import { tailwindCompiledCss } from './helpers/css';
-import { datePickerCss } from './helpers/date-picker';
-
-type NotificationHandler = (newData: {
-  componentId: string;
-  newProps: Record<string, any>;
-  newAttributes: Record<string, any>;
-}) => boolean;
-
-
-type GrapesjsCanvasProps = {
-  json: any;
-  mode?: 'editor' | 'preview';
-  setEditor: (editor: Editor) => void;
-  performInteraction: (payload: Record<string, any>) => Promise<Record<string, any> | undefined>;
-  newDataNotifier: (notifHandler: NotificationHandler) => void;
-};
-
-function setComponentProperties(editor: Editor, isPreview: boolean) {
-  function setPropertiesRecursively(comp: Component) {
-    comp.set({
-      editable: !isPreview,
-      draggable: !isPreview,
-      droppable: !isPreview && comp.getName() !== 'Shadcn-generic',
-      selectable: !isPreview,
-      hoverable: !isPreview,
-      highlightable: !isPreview,
-      copyable: false,
-      resizable: false,
-      removable: !isPreview,
-      badgable: false,
-    });
-
-    if (!isPreview) {
-      comp.set('toolbar', [
-        { attributes: { class: 'fa fa-arrows' }, command: 'tlb-move' },
-        { attributes: { class: 'fa fa-trash' }, command: 'tlb-delete' },
-      ]);
-    }
-
-    comp.components().forEach(setPropertiesRecursively);
-  }
-
-  if (isPreview) {
-    editor.runCommand('core:preview');
-  } else {
-    editor.stopCommand('core:preview');
-  }
-
-  const wrapper = editor.getWrapper();
-  wrapper?.find('*').forEach(setPropertiesRecursively);
-}
-
-function convertStyles(stylesArray: any[]): string {
-  return stylesArray
-    .map((block) => {
-      const selectors = Array.isArray(block.selectors)
-        ? block.selectors.join(', ')
-        : block.selectors;
-      const declarations = Object.entries(block.style)
-        .map(([prop, value]) => `${toKebabCase(prop)}: ${value};`)
-        .join(' ');
-
-      return `${selectors} { ${declarations} }`;
-    })
-    .join('\n');
-}
-
-function expandActions(node: any): any {
-  if (
-    node.type === 'shadcn-generic' &&
-    node.componentName === 'Actions' &&
-    Array.isArray(node.componentProps?.actions)
-  ) {
-    const { actions } = node.componentProps;
-
-    return {
-      ...node,
-      type: 'div',
-      classes: ['dashboard-cards', ...(node.classes || [])],
-      componentName: undefined,
-      componentProps: undefined,
-      components: actions.map((action: any, i: number) => {
-        const { icon, title, description } = action;
-
-        return {
-          id: `${node.id}--action-card-${i}`,
-          type: 'shadcn-generic',
-          componentName: 'ActionCard',
-          badgable: false,
-          copyable: false,
-          componentProps: {
-            icon,
-            headerContent: title,
-            bodyContent: description,
-          },
-        };
-      }),
-    };
-  }
-
-  if (Array.isArray(node.components)) {
-    return {
-      ...node,
-      components: node.components.map(expandActions),
-    };
-  }
-
-  return node;
-}
-
-function setInteracting(
-  renderedComponents: Record<string, Component>,
-  components: { componentId: string; showLoader: boolean }[],
-  inProgress: boolean,
-) {
-  components.forEach((component) => {
-    const { componentId, showLoader } = component;
-
-    if (!showLoader) {
-      return;
-    }
-
-    const gjsModel = renderedComponents[componentId];
-
-    if (gjsModel) {
-      gjsModel.set('attributes', {
-        ...gjsModel.get('attributes'),
-        interactionApiInProgress: inProgress,
-      });
-    }
-  });
-}
-
-function GrapesjsCanvas({
-  json,
-  mode = 'preview',
-  setEditor,
-  performInteraction,
-  newDataNotifier = () => {
-    // Default empty handler
-  },
-}: GrapesjsCanvasProps) {
-  const editorRef = useRef<HTMLDivElement>(null);
-  const editorInstance = useRef<any>(null);
-  const renderedComponents: Record<string, Component> = {};
-
-  function notificationHandler(props: Parameters<NotificationHandler>[0]): ReturnType<NotificationHandler>  {
-    if (!props) {
-      return true;
-    }
-
-    const {
-      componentId,
-      newProps,
-      newAttributes,
-    } = props;
-    
-    const model = renderedComponents[componentId];
-
-    if (!model) {
-      return false;
-    }
-
-    const parsedNewProps = {
-      ...newProps,
-    };
-
-    if (newProps.pagination) {
-      parsedNewProps.pagination = {
-        ...(model.get('componentProps').pagination || {}),
-        ...newProps.pagination,
-      }
-    }
-
-    model.set('componentProps', {
-      ...model.get('componentProps'),
-      ...parsedNewProps,
-    });
-
-    model.set('attributes', {
-      ...model.get('attributes'),
-      ...newAttributes,
-    });
-    return true;
-  }
-
-
-
-  useEffect(() => {
-    newDataNotifier(notificationHandler);
-  }, []);
-
-
-  async function performInteractionWrapper(payload: Record<string, any>) {
-    const updatedJson = await editorInstance.current?.store();
-    setInteracting(renderedComponents, payload.affectedComponents, true);
-
-    try {
-      const apiResponse = await performInteraction({
-        ...payload,
-        json: updatedJson,
-      });
-      
-      const componentUpdates = apiResponse || {};
-
-      Object.entries(componentUpdates).forEach(([key, value]) => {
-        const model = renderedComponents[key];
-
-        if (model) {
-          model.set('componentProps', {
-            ...model.get('componentProps'),
-            ...value,
-          });
-        }
-      });
-
-      return componentUpdates;
-    } finally {
-      setInteracting(renderedComponents, payload.affectedComponents, false);
-    }
-  }
-
-
-  useEffect(() => {
-    if (!editorRef.current) {
-      return function cleanup() {
-        // Cleanup if editorRef is not available
-      };
-    }
-
-    if (editorInstance.current) {
-      editorInstance.current.destroy();
-      editorInstance.current = null;
-    }
-
-    const currentMode = mode;
-
-    const editor = grapesjs.init({
-      container: editorRef.current,
-      height: '100%',
-      plugins: [
-        tailwind,
-        createGrapesjsShadcnGenericPlugin(
-          currentMode,
-          performInteractionWrapper,
-          renderedComponents,
-        ),
-      ],
-      storageManager: { type: 'none' },
-      richTextEditor: {
-        actions: ['bold', 'italic', 'underline', 'strikethrough'],
-      },
-      canvas: {
-        customBadgeLabel: (component) => {
-          const tagName = component.get('tagName');
-
-          return tagName === 'body' ? '' : tagName || '';
-        },
-      },
-    });
-
-    // Tailwind CSS rules aren't fully added to our component
-    // So, adding them from here!
-    editor.on('load', () => {
-      const canvasHead = editor.Canvas.getDocument().head;
-      const style = document.createElement('style');
-      const fullCss = `
-        ${tailwindCompiledCss}
-        ${datePickerCss}
-        ::-webkit-scrollbar {
-          width: 0px;
-          height: 0px;
-        }
-        html, body {
-          overflow: auto !important;
-          -ms-overflow-style: none;  /* IE and Edge */
-          scrollbar-width: none;     /* Firefox */
-        }
-
-      `;
-      style.innerHTML = fullCss;
-      style.setAttribute('type', 'text/css');
-      canvasHead.appendChild(style);
-    });
-
-    editorInstance.current = editor;
-
-    if (setEditor) {
-      setEditor(editor);
-    }
-
-    TypesToRegister.forEach(({ type, tagName }) => {
-      if (!editor.DomComponents.getType(type)) {
-        editor.DomComponents.addType(type, {
-          model: {
-            defaults: { tagName },
-          },
-          view: {},
-        });
-      }
-    });
-
-    if (json && json.pages?.length > 0 && json.pages[0].frames?.length > 0) {
-      const raw = json.pages[0].frames[0].component;
-      const processed = expandActions(raw);
-      editor.setComponents(processed);
-
-      const cssText = convertStyles(json.styles || []);
-      editor.setStyle(cssText);
-    }
-
-    editor.on('load', () => {
-      setComponentProperties(editor, mode === 'preview');
-    });
-
-    return function cleanup() {
-      editor.destroy();
-    };
-  }, [json, mode]);
-
-  return (
-    <React.Fragment>
-      <StyledEditor />
-      <div ref={editorRef} id="grapesjs-editor" />
-    </React.Fragment>
-  );
-}
-
-export default GrapesjsCanvas;

package/src/constants/index.ts

@@ -1,27 +0,0 @@
-export const TypesToRegister = [
-  { tagName: 'div', type: 'div' },
-  { tagName: 'h1', type: 'heading' },
-  { tagName: 'p', type: 'text' },
-  { tagName: 'div', type: 'container' },
-  { tagName: 'div', type: 'grid' },
-  { tagName: 'table', type: 'table' },
-  { tagName: 'thead', type: 'thead' },
-  { tagName: 'tbody', type: 'tbody' },
-  { tagName: 'tr', type: 'tr' },
-  { tagName: 'th', type: 'th' },
-  { tagName: 'td', type: 'td' },
-  { tagName: 'button', type: 'button' },
-  { tagName: 'section', type: 'section' },
-  { tagName: 'img', type: 'image' },
-  { tagName: 'a', type: 'link' },
-  { tagName: 'video', type: 'video' },
-  { tagName: 'form', type: 'form' },
-  { tagName: 'input', type: 'input' },
-  { tagName: 'textarea', type: 'textarea' },
-  { tagName: 'select', type: 'select' },
-  { tagName: 'ul', type: 'ul' },
-  { tagName: 'ol', type: 'ol' },
-  { tagName: 'li', type: 'li' },
-  { tagName: 'header', type: 'header' },
-  { tagName: 'footer', type: 'footer' },
-];