@peak-ai/canvas 1.3.15 → 1.3.16

package/dist/shadcn/components/ui/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","names":["useEffect","useRef","useState","Loader2Icon","Search","SearchIcon","X","ClearIcon","Info","InfoIcon","Input","getAffectedComponentsWithLoader","Tooltip","TooltipTrigger","TooltipContent","jsx","_jsx","jsxs","_jsxs","MAX_CHAR_LIMIT","MaxCharLimitExceededMessage","renderSearch","_ref","gjsModel","performInteraction","wrapperRef","_useState","_extends","get","componentData","setComponentData","placeholder","_componentData$affect","affectedComponents","_componentData$classN","className","initialSearchText","searchText","_useState2","attributes","setAttributes","_useState3","searchQuery","setSearchQuery","_useState4","isApplying","setIsApplying","isBusy","interactionApiInProgress","showClear","updateComponentData","updateAttributes","on","off","applySearch","_x","_applySearch","apply","arguments","_asyncToGenerator","_regeneratorRuntime","mark","_callee","query","id","wrap","_callee$","_context","prev","next","length","abrupt","set","interactionType","concat","finish","stop","handleKeyDown","e","key","trim","handleSearchIconClick","handleClear","ref","children","style","backgroundColor","type","value","onChange","target","onKeyDown","disabled","onClick","size","asChild","side"],"sources":["../../../../src/shadcn/components/ui/search.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { useEffect, useRef, useState } from 'react';\nimport { Loader2Icon, Search as SearchIcon, X as ClearIcon, Info as InfoIcon } from 'lucide-react';\nimport { Input } from './input';\nimport { getAffectedComponentsWithLoader } from '../../../helpers';\nimport { Tooltip, TooltipTrigger, TooltipContent } from './tooltip';\n\nconst MAX_CHAR_LIMIT = 140;\nconst MaxCharLimitExceededMessage = 'Max 140 characters allowed.';\n\ntype SearchProps = {\n  isEditable?: boolean;\n  gjsModel: any;\n  performInteraction: (payload: Record<string, any>) => Promise<void>;\n};\n\nexport function renderSearch({ gjsModel, performInteraction }: SearchProps) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const [componentData, setComponentData] = useState({ ...gjsModel.get('componentProps') });\n  const { placeholder, affectedComponents = [], className = '' } = componentData;\n  const initialSearchText = componentData.searchText || '';\n\n  const [attributes, setAttributes] = useState({ ...gjsModel.get('attributes') });\n  const [searchQuery, setSearchQuery] = useState(initialSearchText);\n  const [isApplying, setIsApplying] = useState(false);\n\n  const isBusy = attributes.interactionApiInProgress || isApplying;\n  const showClear = !!searchQuery && !isBusy;\n\n  useEffect(() => {\n    function updateComponentData() {\n      setComponentData({ ...gjsModel.get('componentProps') });\n    }\n\n    function updateAttributes() {\n      setAttributes({ ...gjsModel.get('attributes') });\n    }\n\n    gjsModel.on('change:componentProps', updateComponentData);\n    gjsModel.on('change:attributes', updateAttributes);\n\n    return () => {\n      gjsModel.off('change:componentProps', updateComponentData);\n      gjsModel.off('change:attributes', updateAttributes);\n    };\n  }, [gjsModel]);\n\n  async function applySearch(query: string) {\n    if (query.length > MAX_CHAR_LIMIT) {\n      return;\n    }\n\n    setIsApplying(true);\n\n    try {\n      gjsModel.set('componentProps', {\n        ...gjsModel.get('componentProps'),\n        searchText: query,\n      });\n\n      const id = gjsModel.get('id');\n\n      await performInteraction({\n        interactionType: 'search',\n        id,\n        affectedComponents: getAffectedComponentsWithLoader([id, ...affectedComponents], true),\n      });\n    } finally {\n      setIsApplying(false);\n    }\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n    if (e.key === 'Enter') {\n      applySearch(searchQuery.trim());\n    }\n  }\n\n  function handleSearchIconClick() {\n    applySearch(searchQuery.trim());\n  }\n\n  function handleClear() {\n    setSearchQuery('');\n    applySearch('');\n  }\n\n  return (\n    <div ref={wrapperRef} className={`flex items-center gap-2 p-2 ${className}`}>\n      <div\n        className={`relative transition-all duration-200 ease-in-out ${\n          searchQuery ? 'w-[320px]' : 'w-[280px]'\n        }`}\n        style={{ backgroundColor: '#fff' }}\n      >\n        <div>\n          <Input\n            type=\"text\"\n            placeholder={'Search...'}\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            onKeyDown={handleKeyDown}\n            disabled={isBusy}\n            className={`py-2 text-sm rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 pl-4 pr-16 w-full`}\n          />\n\n          {showClear && (\n            <button\n              type=\"button\"\n              onClick={handleClear}\n              className=\"absolute right-10 top-7 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition\"\n              aria-label=\"Clear search\"\n            >\n              <ClearIcon size={16} />\n            </button>\n          )}\n\n          <button\n            type=\"button\"\n            onClick={handleSearchIconClick}\n            disabled={isBusy}\n            className=\"absolute right-2 top-7 -translate-y-1/2 text-gray-500 hover:text-blue-600 transition-colors\"\n            aria-label=\"Search\"\n          >\n            {isBusy ? <Loader2Icon size={18} className=\"animate-spin\" /> : <SearchIcon size={18} />}\n          </button>\n        </div>\n\n        {searchQuery.length > MAX_CHAR_LIMIT && (\n          <p className=\"absolute left-1 text-xs text-red-600 pl-1 pt-1\">\n            {MaxCharLimitExceededMessage}\n          </p>\n        )}\n      </div>\n\n      {placeholder && (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <span className=\"cursor-pointer text-gray-400 hover:text-gray-600\">\n              <InfoIcon size={16} />\n            </span>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">{placeholder}</TooltipContent>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -2,8 +2,50 @@
   "name": "@peak-ai/canvas",
   "author": "squad-builder-experience",
   "license": "UNLICENSED",
-  "version": "1.3.15",
+  "version": "1.3.16",
   "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",
@@ -50,9 +92,5 @@
     "@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

@@ -0,0 +1,64 @@
+#!/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 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

@@ -0,0 +1,280 @@
+/* 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 GrapesjsCanvasProps = {
+  json: any;
+  mode?: 'editor' | 'preview';
+  setEditor: (editor: Editor) => void;
+  performInteraction: (payload: Record<string, any>) => Promise<Record<string, any> | undefined>;
+};
+
+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,
+}: GrapesjsCanvasProps) {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const editorInstance = useRef<any>(null);
+  const renderedComponents: Record<string, Component> = {};
+
+  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} />
+    </React.Fragment>
+  );
+}
+
+export default GrapesjsCanvas;

package/src/constants/index.ts

@@ -0,0 +1,27 @@
+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' },
+];