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

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter.js","names":["useCallback","useEffect","useRef","useState","ChevronDown","ChevronUp","ListFilter","FilterIcon","Loader2Icon","Button","Checkbox","ScrollArea","getAffectedComponentsWithLoader","renderDateFilter","jsx","_jsx","jsxs","_jsxs","FilterHeader","_ref","label","count","isDisabled","isDropdownOpen","isLoading","toggleOpen","ChevronIcon","variant","size","disabled","onClick","className","children","FilterActions","_ref2","selected","allSelected","onClear","onSelectAll","checked","onCheckedChange","length","type","onMouseDown","e","stopPropagation","preventDefault","FilterOptionList","_ref3","options","onToggle","viewportClassName","map","opt","value","includes","onChange","renderFilter","_ref4","gjsModel","performInteraction","_useState","_extends","get","componentData","setComponentData","_componentData$option","_componentData$value","_componentData$classN","_componentData$affect","affectedComponents","_componentData$text","text","_componentData$filter","filterType","actualOptions","name","Array","isArray","wrapperRef","_useState2","attributes","setAttributes","_useState3","setIsDropdownOpen","_useState4","searchQuery","setSearchQuery","_useState5","isApplying","setIsApplying","_useState6","left","right","dropdownPosition","setDropdownPosition","defaultValue","_useState7","selectedValues","setSelectedValues","isMultiSelect","hasPlaceholderOptions","isBusy","interactionApiInProgress","loading","allOptionsSelected","_document$getElementB","current","filterRect","getBoundingClientRect","dropdownWidth","iframeViewportWidth","document","documentElement","clientWidth","iframeBodyWidth","getElementById","spaceToRight","spaceToLeft","shiftLeft","updateComponentData","updateAttributes","on","off","_wrapperRef$current$o","_wrapperRef$current","doc","ownerDocument","handleOutsideClick","contains","target","handleEscape","key","addEventListener","removeEventListener","filteredOptions","filter","String","toLowerCase","updateAndApply","_x","_updateAndApply","apply","arguments","_asyncToGenerator","_regeneratorRuntime","mark","_callee","newValues","id","wrap","_callee$","_context","prev","next","set","interactionType","concat","finish","stop","handleOptionToggle","val","v","singleValue","handleClearAll","handleSelectAll","o","ref","style","color","backgroundColor","placeholder"],"sources":["../../../../src/shadcn/components/ui/filter.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { ChevronDown, ChevronUp, ListFilter as FilterIcon, Loader2Icon } from 'lucide-react';\n\nimport { Button } from './button';\nimport { Checkbox } from './checkbox';\nimport { ScrollArea } from './scroll-area';\nimport { getAffectedComponentsWithLoader } from '../../../helpers';\nimport { renderDateFilter } from './date-filter';\n\ntype FilterOption = {\n  label: string;\n  value: string;\n};\n\ntype FilterProps = {\n  isEditable?: boolean;\n  gjsModel: any;\n  performInteraction: (payload: Record<string, any>) => Promise<void>;\n};\n\ntype FilterHeaderProps = {\n  label: string;\n  count: number;\n  isDisabled: boolean;\n  isDropdownOpen: boolean;\n  isLoading: boolean;\n  toggleOpen: () => void;\n};\n\ntype FilterActionsProps = {\n  selected: string[];\n  allSelected: boolean;\n  onClear: () => void;\n  onSelectAll: () => void;\n  isDisabled: boolean;\n};\n\ntype FilterOptionListProps = {\n  options: FilterOption[];\n  selected: string[];\n  onToggle: (value: string) => void;\n  isDisabled: boolean;\n};\n\nfunction FilterHeader({\n  label,\n  count,\n  isDisabled,\n  isDropdownOpen,\n  isLoading,\n  toggleOpen,\n}: FilterHeaderProps) {\n  const ChevronIcon = isDropdownOpen ? ChevronUp : ChevronDown;\n\n  return (\n    <Button variant=\"outline\" size=\"sm\" disabled={isDisabled} onClick={toggleOpen} className=\"px-2\">\n      <FilterIcon size={16} />\n      {count > 0 ? `${label} (${count})` : label}\n      {isLoading ? (\n        <Loader2Icon className=\"ml-2 animate-spin\" size={16} />\n      ) : (\n        <ChevronIcon size={16} className=\"ml-1\" />\n      )}\n    </Button>\n  );\n}\n\nfunction FilterActions({\n  selected,\n  allSelected,\n  onClear,\n  onSelectAll,\n  isDisabled,\n}: FilterActionsProps) {\n  return (\n    <div className=\"flex items-center mb-3\">\n      <Checkbox\n        checked={allSelected}\n        onCheckedChange={() => (allSelected ? onClear() : onSelectAll())}\n        disabled={isDisabled}\n      />\n      <span className=\"ml-2 text-sm text-gray-900\">Select All</span>\n      {selected.length > 0 && (\n        <button\n          type=\"button\"\n          className=\"ml-auto text-sm text-blue-600 hover:underline\"\n          onMouseDown={(e) => {\n            e.stopPropagation();\n            e.preventDefault();\n          }}\n          onClick={onClear}\n          disabled={isDisabled}\n        >\n          Clear All\n        </button>\n      )}\n    </div>\n  );\n}\n\nfunction FilterOptionList({ options, selected, onToggle, isDisabled }: FilterOptionListProps) {\n  return (\n    <ScrollArea viewportClassName=\"max-h-48 overflow-y-auto mb-4 space-y-2\">\n      {options.length > 0 ? (\n        options.map((opt) => (\n          <label\n            key={opt.value}\n            className=\"flex items-center space-x-2 hover:bg-gray-100 rounded p-1 transition hover:cursor-pointer\"\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n\n              if (!isDisabled) {\n                onToggle(opt.value);\n              }\n            }}\n          >\n            <Checkbox\n              checked={selected.includes(opt.value)}\n              onChange={() => {\n                // Prevent checkbox from toggling when clicking label\n              }}\n              disabled={isDisabled}\n            />\n            <span className=\"text-sm text-gray-900\">{opt.label}</span>\n          </label>\n        ))\n      ) : (\n        <div className=\"text-sm text-gray-500\">No results found</div>\n      )}\n    </ScrollArea>\n  );\n}\n\nexport function renderFilter({ gjsModel, performInteraction }: FilterProps) {\n  const [componentData, setComponentData] = useState({ ...gjsModel.get('componentProps') });\n\n  const {\n    options = [],\n    value = [],\n    className = '',\n    affectedComponents = [],\n    text: label = 'Filter',\n    filterType = 'multiselect',\n  } = componentData;\n\n  const actualOptions = (() => {\n    if (options && typeof options === 'object' && options.name === '__peak_placeholder') {\n      return [];\n    }\n\n    return Array.isArray(options) ? options : [];\n  })();\n\n  if (filterType === 'date') {\n    return renderDateFilter({ gjsModel, performInteraction });\n  }\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const [attributes, setAttributes] = useState({ ...gjsModel.get('attributes') });\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [isApplying, setIsApplying] = useState(false);\n  const [dropdownPosition, setDropdownPosition] = useState({ left: 'auto', right: '0' });\n\n  const defaultValue = componentData.default || [];\n\n  const [selectedValues, setSelectedValues] = useState<string[]>(() => {\n    return Array.isArray(value) && value.length > 0 ? value : defaultValue;\n  });\n\n  const isMultiSelect = filterType === 'multiselect';\n  const hasPlaceholderOptions = options && typeof options === 'object' && options.name === '__peak_placeholder';\n  const isBusy = attributes.interactionApiInProgress || isApplying || attributes.loading || hasPlaceholderOptions;\n  const allOptionsSelected = selectedValues.length === actualOptions.length && actualOptions.length > 0;\n\n  useEffect(() => {\n  if (!isDropdownOpen || !wrapperRef.current) {return;}\n\n    const filterRect = wrapperRef.current.getBoundingClientRect();\n    const dropdownWidth = 256;\n    const iframeViewportWidth = document.documentElement.clientWidth;\n    const iframeBodyWidth =\n      document.getElementById('dashboard-root')?.clientWidth || iframeViewportWidth;\n\n    const spaceToRight = iframeBodyWidth - filterRect.right;\n    const spaceToLeft = filterRect.left;\n\n    if (spaceToLeft >= dropdownWidth) {\n      setDropdownPosition({ left: 'auto', right: '0px' });\n    } else if (spaceToRight < dropdownWidth && spaceToLeft < dropdownWidth) {\n      const shiftLeft = dropdownWidth - spaceToRight + 16;\n      setDropdownPosition({ left: `-${shiftLeft}px`, right: 'auto' });\n    } else if (spaceToRight >= dropdownWidth) {\n      setDropdownPosition({ left: '0px', right: 'auto' });\n    }\n  }, [isDropdownOpen]);\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  useEffect(() => {\n    const doc = wrapperRef.current?.ownerDocument ?? document;\n\n    function handleOutsideClick(e: PointerEvent) {\n      if (isDropdownOpen && wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {\n        setIsDropdownOpen(false);\n      }\n    }\n\n    function handleEscape(e: KeyboardEvent) {\n      if (e.key === 'Escape') {\n        setIsDropdownOpen(false);\n      }\n    }\n\n    doc.addEventListener('pointerdown', handleOutsideClick);\n    doc.addEventListener('keydown', handleEscape);\n\n    return () => {\n      doc.removeEventListener('pointerdown', handleOutsideClick);\n      doc.removeEventListener('keydown', handleEscape);\n    };\n  }, [isDropdownOpen]);\n\n  const filteredOptions = actualOptions.filter((opt: FilterOption) =>\n    String(opt.label).toLowerCase().includes(searchQuery.toLowerCase()),\n  );\n\n  async function updateAndApply(newValues: string[] = selectedValues) {\n    setIsApplying(true);\n\n    try {\n      gjsModel.set('componentProps', {\n        ...gjsModel.get('componentProps'),\n        value: newValues,\n      });\n\n      const id = gjsModel.get('id');\n\n      await performInteraction({\n        interactionType: 'filter',\n        id,\n        affectedComponents: getAffectedComponentsWithLoader([id, ...affectedComponents], true),\n      });\n    } finally {\n      setIsApplying(false);\n      setIsDropdownOpen(false);\n    }\n  }\n\n  const handleOptionToggle = useCallback(\n    (val: string) => {\n      if (isMultiSelect) {\n        setSelectedValues((prev) =>\n          prev.includes(val) ? prev.filter((v) => v !== val) : [...prev, val],\n        );\n      } else {\n        if (selectedValues.includes(val)) {\n          setSelectedValues([]);\n          updateAndApply([]);\n        } else {\n          const singleValue = [val];\n          setSelectedValues(singleValue);\n          updateAndApply(singleValue);\n        }\n      }\n    },\n    [isMultiSelect, selectedValues],\n  );\n\n  function handleClearAll() {\n    setSelectedValues([]);\n  }\n\n  function handleSelectAll() {\n    setSelectedValues(actualOptions.map((o: FilterOption) => o.value));\n  }\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={`relative inline-block ${className}`}\n      style={{ color: '#2A44D4', backgroundColor: 'rgb(255 255 255)' }}\n    >\n      <FilterHeader\n        label={label}\n        count={selectedValues.length}\n        isDisabled={isBusy}\n        isDropdownOpen={isDropdownOpen}\n        isLoading={isBusy}\n        toggleOpen={() => setIsDropdownOpen((prev) => !prev)}\n      />\n\n      {isDropdownOpen && (\n        <div className=\"absolute top-full mt-2 w-64 bg-white border rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 p-4 z-50\" style={dropdownPosition}>\n          <input\n            type=\"text\"\n            placeholder=\"Search...\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"w-full mb-3 px-2 py-1 border rounded focus:outline-none\"\n            disabled={isBusy}\n          />\n\n          {isMultiSelect && (\n            <FilterActions\n              selected={selectedValues}\n              allSelected={allOptionsSelected}\n              onClear={handleClearAll}\n              onSelectAll={handleSelectAll}\n              isDisabled={isBusy}\n            />\n          )}\n\n          <FilterOptionList\n            options={filteredOptions}\n            selected={selectedValues}\n            onToggle={handleOptionToggle}\n            isDisabled={isBusy}\n          />\n\n          {isMultiSelect && (\n            <div className=\"flex justify-end space-x-2\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setIsDropdownOpen(false)}\n                disabled={isApplying}\n              >\n                Cancel\n              </Button>\n              <Button\n                variant=\"default\"\n                size=\"sm\"\n                onClick={() => updateAndApply(selectedValues)}\n                disabled={isBusy}\n              >\n                {isApplying && <Loader2Icon className=\"animate-spin mr-2\" size={16} />}Apply\n              </Button>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _extends from"@babel/runtime/helpers/extends";import _regeneratorRuntime from"@babel/runtime/regenerator";/* eslint-disable @typescript-eslint/no-explicit-any */import{useEffect,useRef,useState}from"react";import{Loader2Icon,Search as SearchIcon,X as ClearIcon,Info as InfoIcon}from"lucide-react";import{Input}from"./input";import{getAffectedComponentsWithLoader}from"../../../helpers";import{Tooltip,TooltipTrigger,TooltipContent}from"./tooltip";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var MAX_CHAR_LIMIT=140;var MaxCharLimitExceededMessage="Max 140 characters allowed.";export function renderSearch(_ref){var gjsModel=_ref.gjsModel,performInteraction=_ref.performInteraction;var wrapperRef=useRef(null);var _useState=useState(_extends({},gjsModel.get("componentProps"))),componentData=_useState[0],setComponentData=_useState[1];var placeholder=componentData.placeholder,_componentData$affect=componentData.affectedComponents,affectedComponents=_componentData$affect===void 0?[]:_componentData$affect,_componentData$classN=componentData.className,className=_componentData$classN===void 0?"":_componentData$classN;var initialSearchText=componentData.searchText||"";var _useState2=useState(_extends({},gjsModel.get("attributes"))),attributes=_useState2[0],setAttributes=_useState2[1];var _useState3=useState(initialSearchText),searchQuery=_useState3[0],setSearchQuery=_useState3[1];var _useState4=useState(false),isApplying=_useState4[0],setIsApplying=_useState4[1];var isBusy=attributes.interactionApiInProgress||isApplying;var showClear=!!searchQuery&&!isBusy;useEffect(function(){function updateComponentData(){setComponentData(_extends({},gjsModel.get("componentProps")))}function updateAttributes(){setAttributes(_extends({},gjsModel.get("attributes")))}gjsModel.on("change:componentProps",updateComponentData);gjsModel.on("change:attributes",updateAttributes);return function(){gjsModel.off("change:componentProps",updateComponentData);gjsModel.off("change:attributes",updateAttributes)}},[gjsModel]);function applySearch(_x){return _applySearch.apply(this,arguments)}function _applySearch(){_applySearch=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(query){var id;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:if(!(query.length>MAX_CHAR_LIMIT)){_context.next=2;break}return _context.abrupt("return");case 2:setIsApplying(true);_context.prev=3;gjsModel.set("componentProps",_extends({},gjsModel.get("componentProps"),{searchText:query}));id=gjsModel.get("id");_context.next=8;return performInteraction({interactionType:"search",id:id,affectedComponents:getAffectedComponentsWithLoader([id].concat(affectedComponents),true)});case 8:_context.prev=8;setIsApplying(false);return _context.finish(8);case 11:case"end":return _context.stop()}},_callee,null,[[3,,8,11]])}));return _applySearch.apply(this,arguments)}function handleKeyDown(e){if(e.key==="Enter"){applySearch(searchQuery.trim())}}function handleSearchIconClick(){applySearch(searchQuery.trim())}function handleClear(){setSearchQuery("");applySearch("")}if(attributes.loading){return/*#__PURE__*/_jsx("div",{ref:wrapperRef,className:"flex items-center gap-2 pb-4 "+className,children:/*#__PURE__*/_jsx("div",{className:"relative transition-all duration-200 ease-in-out "+(searchQuery?"w-[320px]":"w-[280px]"),style:{backgroundColor:"#fff"},children:/*#__PURE__*/_jsx(Loader2Icon,{size:18,className:"animate-spin"})})})}return/*#__PURE__*/_jsxs("div",{ref:wrapperRef,className:"flex items-center gap-2 p-2 "+className,children:[/*#__PURE__*/_jsxs("div",{className:"relative transition-all duration-200 ease-in-out "+(searchQuery?"w-[320px]":"w-[280px]"),style:{backgroundColor:"#fff"},children:[/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Input,{type:"text",placeholder:"Search...",value:searchQuery,onChange:function onChange(e){return setSearchQuery(e.target.value)},onKeyDown:handleKeyDown,disabled:isBusy,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"}),showClear&&/*#__PURE__*/_jsx("button",{type:"button",onClick:handleClear,className:"absolute right-10 top-7 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition","aria-label":"Clear search",children:/*#__PURE__*/_jsx(ClearIcon,{size:16})}),/*#__PURE__*/_jsx("button",{type:"button",onClick:handleSearchIconClick,disabled:isBusy,className:"absolute right-2 top-7 -translate-y-1/2 text-gray-500 hover:text-blue-600 transition-colors","aria-label":"Search",children:isBusy?/*#__PURE__*/_jsx(Loader2Icon,{size:18,className:"animate-spin"}):/*#__PURE__*/_jsx(SearchIcon,{size:18})})]}),searchQuery.length>MAX_CHAR_LIMIT&&/*#__PURE__*/_jsx("p",{className:"absolute left-1 text-xs text-red-600 pl-1 pt-1",children:MaxCharLimitExceededMessage})]}),placeholder&&/*#__PURE__*/_jsxs(Tooltip,{children:[/*#__PURE__*/_jsx(TooltipTrigger,{asChild:true,children:/*#__PURE__*/_jsx("span",{className:"cursor-pointer text-gray-400 hover:text-gray-600",children:/*#__PURE__*/_jsx(InfoIcon,{size:16})})}),/*#__PURE__*/_jsx(TooltipContent,{side:"bottom",children:placeholder})]})]})}
+//# sourceMappingURL=search.js.map

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","loading","ref","children","style","backgroundColor","size","type","value","onChange","target","onKeyDown","disabled","onClick","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  if (attributes.loading) {\n    return (\n      <div ref={wrapperRef} className={`flex items-center gap-2 pb-4 ${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          <Loader2Icon size={18} className=\"animate-spin\" />\n        </div>\n      </div>\n    )\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/{shadcn → dist/shadcn}/components/ui/skeleton.d.ts

@@ -1,13 +1,9 @@
 /// <reference types="react" />
 declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function ErrorState({ className, errorMessage, variant, ...props }: React.ComponentProps<"div"> & {
-    errorMessage?: string;
-    variant?: "default" | "minimal";
-}): import("react/jsx-runtime").JSX.Element;
 declare function TableLoader({ count }: {
     count?: number | undefined;
 }): import("react/jsx-runtime").JSX.Element;
 declare function ChartLoader(): import("react/jsx-runtime").JSX.Element;
 declare function CardLoader(): import("react/jsx-runtime").JSX.Element;
 declare function MarkdownLoader(): import("react/jsx-runtime").JSX.Element;
-export { Skeleton, ErrorState, TableLoader, ChartLoader, CardLoader, MarkdownLoader };
+export { Skeleton, TableLoader, ChartLoader, CardLoader, MarkdownLoader, };

package/dist/shadcn/components/ui/skeleton.js

@@ -0,0 +1,2 @@
+import _extends from"@babel/runtime/helpers/extends";import _objectWithoutPropertiesLoose from"@babel/runtime/helpers/objectWithoutPropertiesLoose";var _excluded=["className"];import{cn}from"../../utils";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function Skeleton(_ref){var className=_ref.className,props=_objectWithoutPropertiesLoose(_ref,_excluded);return/*#__PURE__*/_jsx("div",_extends({"data-slot":"skeleton",className:cn("bg-accent animate-pulse rounded-md",className)},props))}function TableLoader(_ref2){var _ref2$count=_ref2.count,count=_ref2$count===void 0?5:_ref2$count;return/*#__PURE__*/_jsx("div",{className:"flex flex-row gap-6",children:Array.from({length:3}).map(function(_,colIndex){return/*#__PURE__*/_jsxs("div",{className:"flex flex-col gap-3 w-1/3",children:[/*#__PURE__*/_jsx(Skeleton,{className:"w-full h-10"}),Array.from({length:count}).map(function(_,index){return/*#__PURE__*/_jsx(Skeleton,{className:"w-full h-6"},index)})]},"col-"+colIndex)})})}function ChartLoader(){return/*#__PURE__*/_jsxs("div",{className:"flex flex-col gap-4",children:[/*#__PURE__*/_jsxs("div",{className:"flex flex-row gap-4",children:[/*#__PURE__*/_jsx(Skeleton,{className:"h-40 w-1/6 self-end"}),/*#__PURE__*/_jsx(Skeleton,{className:"h-50 w-1/6 self-end"}),/*#__PURE__*/_jsx(Skeleton,{className:"h-30 w-1/6 self-end"}),/*#__PURE__*/_jsx(Skeleton,{className:"h-40 w-1/6 self-end"}),/*#__PURE__*/_jsx(Skeleton,{className:"h-50 w-1/6 self-end"}),/*#__PURE__*/_jsx(Skeleton,{className:"h-20 w-1/6 self-end"})]}),/*#__PURE__*/_jsx(Skeleton,{className:"w-full h-5"})]})}function CardLoader(){return/*#__PURE__*/_jsxs("div",{className:"flex flex-col gap-1",children:[/*#__PURE__*/_jsx(Skeleton,{className:"h-5 w-full"}),/*#__PURE__*/_jsx(Skeleton,{className:"h-3 w-full"}),/*#__PURE__*/_jsx(Skeleton,{className:"h-10 w-full"}),/*#__PURE__*/_jsx(Skeleton,{className:"h-5 w-full"})]})}function MarkdownLoader(){return/*#__PURE__*/_jsxs("div",{className:"flex flex-col gap-2",children:[/*#__PURE__*/_jsx(Skeleton,{className:"h-5 w-full bg-black/10"}),/*#__PURE__*/_jsx(Skeleton,{className:"h-5 w-full bg-black/10"}),/*#__PURE__*/_jsx(Skeleton,{className:"h-5 w-full bg-black/10"})]})}export{Skeleton,TableLoader,ChartLoader,CardLoader,MarkdownLoader};
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":["cn","jsx","_jsx","jsxs","_jsxs","Skeleton","_ref","className","props","_objectWithoutPropertiesLoose","_excluded","_extends","TableLoader","_ref2","_ref2$count","count","children","Array","from","length","map","_","colIndex","index","ChartLoader","CardLoader","MarkdownLoader"],"sources":["../../../../src/shadcn/components/ui/skeleton.tsx"],"sourcesContent":["import { cn } from '../../utils';\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-accent animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableLoader({ count = 5 }) {\n  return (\n    <div className='flex flex-row gap-6'>\n      {\n        Array.from({ length: 3 }).map((_, colIndex) => {\n          return (\n            <div className=\"flex flex-col gap-3 w-1/3\" key={`col-${colIndex}`}>\n              <Skeleton className=\"w-full h-10\" />\n              {Array.from({ length: count }).map((_, index) => (\n                <Skeleton className=\"w-full h-6\" key={index} />\n              ))}\n            </div>\n          )\n        })\n      }\n    </div>\n  );\n}\n\nfunction ChartLoader() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className='flex flex-row gap-4'>\n        <Skeleton className=\"h-40 w-1/6 self-end\" />\n        <Skeleton className=\"h-50 w-1/6 self-end\" />\n        <Skeleton className=\"h-30 w-1/6 self-end\" />\n        <Skeleton className=\"h-40 w-1/6 self-end\" />\n        <Skeleton className=\"h-50 w-1/6 self-end\" />\n        <Skeleton className=\"h-20 w-1/6 self-end\" />\n      </div>\n      <Skeleton className=\"w-full h-5\" />\n    </div>\n  );\n}\n\nfunction CardLoader() {\n  return (\n    <div className='flex flex-col gap-1'>\n      <Skeleton className=\"h-5 w-full\" />\n      <Skeleton className=\"h-3 w-full\" />\n      <Skeleton className=\"h-10 w-full\" />\n      <Skeleton className=\"h-5 w-full\" />\n    </div>\n  );\n}\n\nfunction MarkdownLoader() {\n  return (\n    <div className='flex flex-col gap-2'>\n      <Skeleton className=\"h-5 w-full bg-black/10\" />\n      <Skeleton className=\"h-5 w-full bg-black/10\" />\n      <Skeleton className=\"h-5 w-full bg-black/10\" />\n    </div>\n  );\n}\n\nexport { Skeleton, TableLoader, ChartLoader, CardLoader, MarkdownLoader, }\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.4.2-rc.7",
+  "version": "1.4.2-rc.9",
   "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,88 @@
+#!/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

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

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