@peak-ai/canvas 1.4.2-rc.6 → 1.4.2-rc.7

package/package.json

@@ -2,50 +2,8 @@
   "name": "@peak-ai/canvas",
   "author": "squad-builder-experience",
   "license": "UNLICENSED",
-  "version": "1.4.2-rc.6",
+  "version": "1.4.2-rc.7",
   "description": "",
-  "scripts": {
-    "prepublishOnly": "yarn build",
-    "format": "prettier . --write && eslint src --fix",
-    "lint": "eslint src --cache --ext .js,.jsx,.ts,.tsx",
-    "build": "ts-node scripts/build.ts",
-    "precommit": "lint-staged",
-    "prettier": "prettier --write ."
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.26.7",
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.27.1",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.15.0",
-    "@commitlint/cli": "^16.1.0",
-    "@commitlint/config-conventional": "^16.0.0",
-    "@peak-ai/eslint-config-peak-api": "^1.3.2",
-    "@peak-ai/eslint-config-peak-base": "^1.0.1",
-    "@peak-ai/eslint-config-peak-typescript": "^1.1.0",
-    "@semantic-release/changelog": "^6.0.1",
-    "@semantic-release/commit-analyzer": "^9.0.2",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^9.0.0",
-    "@semantic-release/release-notes-generator": "^10.0.3",
-    "@types/lodash": "^4.17.20",
-    "@types/node": "^16.11.7",
-    "@types/react-dom": "17.0.3",
-    "@types/styled-components": "^5.1.11",
-    "babel-plugin-styled-components": "^2.1.4",
-    "eslint": "^8.9.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.3.1",
-    "prettier": "^2.5.1",
-    "rimraf": "^3.0.2",
-    "semantic-release": "^19.0.2",
-    "typescript": "^4.5.5",
-    "typescript-styled-plugin": "^0.18.0"
-  },
   "dependencies": {
     "@peak-ai/ais-components": "6.41.0",
     "@radix-ui/react-checkbox": "^1.3.2",
@@ -92,5 +50,9 @@
     "@babel/traverse": "7.25.7",
     "minimist": "1.2.6",
     "tar": "^6.1.11"
-  }
+  },
+  "main": "index.js",
+  "types": "index.d.ts",
+  "module": "index.js",
+  "sideEffects": false
 }

package/.babelrc

@@ -1,14 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-typescript",
-    ["@babel/preset-react", { "runtime": "automatic" }],
-    ["@babel/preset-env", { "modules": false, "loose": true }]
-  ],
-  "plugins": [
-    "babel-plugin-styled-components",
-    ["@babel/plugin-transform-class-properties", { "loose": true }],
-    ["@babel/plugin-transform-private-methods", { "loose": true }],
-    ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
-    "@babel/plugin-transform-runtime"
-  ]
-}

package/.eslintignore

@@ -1,5 +0,0 @@
-node_modules/
-dist/
-commitlint.config.js
-jest.config.ts
-.eslintrc.js

package/.eslintrc.js

@@ -1,29 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  root: true,
-  parserOptions: {
-    project: path.resolve(__dirname, 'tsconfig.json'),
-    tsconfigRootDir: __dirname,
-  },
-  settings: {
-    'import/resolver': {
-      typescript: {
-        project: path.resolve(__dirname, 'tsconfig.json'),
-      },
-    },
-  },
-  extends: [
-    '@peak-ai/eslint-config-peak-api',
-    '@peak-ai/eslint-config-peak-base',
-    '@peak-ai/eslint-config-peak-typescript',
-  ],
-  overrides: [
-    {
-      files: ['**/*.test.ts', '**/*.test.tsx'],
-      env: {
-        jest: true,
-      },
-    },
-  ],
-};

package/dist/package.json

@@ -1,58 +0,0 @@
-{
-  "name": "@peak-ai/canvas",
-  "author": "squad-builder-experience",
-  "license": "UNLICENSED",
-  "version": "1.4.2-rc.6",
-  "description": "",
-  "dependencies": {
-    "@peak-ai/ais-components": "6.41.0",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-hover-card": "^1.1.7",
-    "@radix-ui/react-label": "^2.1.3",
-    "@radix-ui/react-scroll-area": "^1.2.5",
-    "@radix-ui/react-separator": "^1.1.3",
-    "@radix-ui/react-slot": "^1.2.0",
-    "@radix-ui/react-tabs": "1.0.0",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@tailwindcss/cli": "^4.1.3",
-    "@types/chroma-js": "^3.1.1",
-    "@types/react-datepicker": "^7.0.0",
-    "chroma-js": "^3.1.2",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "grapesjs": "0.22.6",
-    "grapesjs-tailwind": "1.0.7",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.525.0",
-    "markdown": "^0.5.0",
-    "markdown-to-jsx": "7.4.1",
-    "plotly.js": "2.34.0",
-    "react": "^17.0.2",
-    "react-datepicker": "^8.4.0",
-    "react-dom": "^17.0.2",
-    "react-plotly.js": "^2.6.0",
-    "react-resizable-panels": "^2.1.9",
-    "styled-components": "^5.0.0",
-    "tailwind-merge": "^3.2.0",
-    "tailwindcss": "^4.1.3",
-    "tailwindcss-animate": "^1.0.7",
-    "tslib": "^2.7.0",
-    "tw-animate-css": "^1.2.5",
-    "sherlockjs": "^1.4.2",
-    "date-fns-tz": "^2.0.0"
-  },
-  "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  },
-  "resolutions": {
-    "@babel/traverse": "7.25.7",
-    "minimist": "1.2.6",
-    "tar": "^6.1.11"
-  },
-  "main": "index.js",
-  "types": "index.d.ts",
-  "module": "index.js",
-  "sideEffects": false
-}

package/scripts/build.ts

@@ -1,92 +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...');
-  if (fs.existsSync(distDir)) {
-    // Use rimraf for compatibility with older Node.js versions
-    const rimraf = require('rimraf');
-    rimraf.sync(distDir);
-  }
-  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,332 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, useRef } 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 = () => {},
-}: 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 result = await performInteraction({
-        ...payload,
-        json: updatedJson,
-      });
-
-      Object.entries(result || {}).forEach(([key, value]) => {
-        const model = renderedComponents[key];
-
-        if (model) {
-          model.set('componentProps', {
-            ...model.get('componentProps'),
-            ...value,
-          });
-        }
-      });
-
-      return result;
-    } finally {
-      setInteracting(renderedComponents, payload.affectedComponents, false);
-    }
-  }
-
-  useEffect(() => {
-    if (!editorRef.current) {
-      return () => {
-        // 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 () => {
-      editor.destroy();
-    };
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-  }, [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' },
-];