@integry/sdk 4.5.31 → 4.5.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.31",
+  "version": "4.5.33",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",
@@ -54,7 +54,6 @@
     "@testing-library/preact": "^2.0.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^26.0.23",
-    "@types/react-dom": "^19.0.4",
     "@types/yaireo__tagify": "^4.18.0",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
@@ -102,9 +101,7 @@
     "fuzzysort": "^1.1.4",
     "htm": "3.1.0",
     "lit": "^3.2.1",
-    "preact": "^10.26.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "preact": "^10.2.0",
     "superstruct": "^0.15.2",
     "unfetch": "^4.2.0",
     "unistore": "^3.5.2"

package/src/components/MultipurposeField/TagMenu/index.ts

@@ -2,13 +2,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { NestedObject } from '@/interfaces';
 import { html } from 'htm/preact';
-import { createRef, render } from 'preact';
+import { createRef } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { isScrolledIntoView } from '@/utils/common';
 import { searchJSON } from '@/utils/searchJson';
 import { Input } from '@/components/Input';
-import { createElement } from 'preact/compat';
-import ReactCompat from 'preact/compat';
+// import TagsMenuComponent from '@/components/React/TagsMenu';
 import { TagOptions } from '../TagOptions';
 import { ThreeDotLoader } from '../../ThreeDotLoader';
 import styles from './styles.module.scss';
@@ -213,22 +212,6 @@ const FieldDropdown = (props: FieldMenuProps) => {
     }
   }
 
-  const deepClone = (obj: any) => JSON.parse(JSON.stringify(obj));
-
-  const convertReactToPreact = (
-    ReactComponent: any,
-    propsLocal = {},
-    mountNode: any,
-  ) => {
-    const PreactComponent = ReactCompat.createElement(
-      ReactComponent,
-      deepClone(propsLocal),
-    );
-    render(PreactComponent, mountNode);
-  };
-
-  const mountNode = document.getElementById('x-integry-container');
-
   return html` <div
     class=${`${styles.tagMenu} ${enableSearch ? styles.tagMenuWithSearch : ''}`}
     style=${parentContainer && tagMenyStyleRef?.current
@@ -354,13 +337,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
           </div>`
         : html` <div className="${styles.mappedFieldMenu}">
             ${tagsComponent
-              ? html`<div>
-                  ${convertReactToPreact(
-                    tagsComponent,
-                    { onSelect: '' },
-                    mountNode,
-                  )}
-                </div>`
+              ? html``
               : html`${Object.keys(
                   !isEditable ? searchJSON(tags, searchValue) : tags,
                 ).length > 0

package/src/components/React/TagsMenu/index.tsx

@@ -0,0 +1,116 @@
+// import { useState } from 'react';
+
+// const data: any = {
+//   setupForm: [
+//     {
+//       id: 'mailchimp',
+//       name: 'Configure Mailchimp (Add Subscriber)',
+//       fields: [
+//         'mailchimp_list',
+//         'email',
+//         'mailchimp_status',
+//         'mailchimp_custom_fields',
+//       ],
+//     },
+//     {
+//       id: 'slack',
+//       name: 'Configure Slack (Post Message)',
+//       fields: ['channel', 'message'],
+//     },
+//   ],
+//   triggers: [
+//     {
+//       id: 'webhook1',
+//       name: 'Incoming Webhook (Block)',
+//       fields: ['url', 'payload'],
+//     },
+//     {
+//       id: 'webhook2',
+//       name: 'Incoming Webhook',
+//       fields: ['endpoint', 'headers'],
+//     },
+//   ],
+// };
+
+// type Item = {
+//   id: string;
+//   name: string;
+//   fields: string[];
+// };
+
+// export default function TagsMenuComponent() {
+//   const [activeTab, setActiveTab] = useState('setupForm');
+//   const [activeItem, setActiveItem] = useState<Item>({
+//     id: '',
+//     name: '',
+//     fields: [],
+//   });
+
+//   const handleItemClick = (item: any) => setActiveItem(item);
+//   const handleBack = () =>
+//     setActiveItem({
+//       id: '',
+//       name: '',
+//       fields: [],
+//     });
+
+//   return (
+//     <div className="p-4">
+//       <div className="flex space-x-4 border-b">
+//         {['setupForm', 'triggers'].map((tab) => (
+//           <button
+//             key={tab}
+//             className={`p-2 ${
+//               activeTab === tab
+//                 ? 'font-bold border-b-2 border-black'
+//                 : 'text-gray-500'
+//             }`}
+//             onClick={() => {
+//               setActiveTab(tab);
+//               setActiveItem({
+//                 id: '',
+//                 name: '',
+//                 fields: [],
+//               });
+//             }}
+//           >
+//             {tab === 'setupForm' ? 'Setup Form' : 'Triggers'}
+//           </button>
+//         ))}
+//       </div>
+
+//       <div className="mt-4">
+//         {activeItem ? (
+//           <div>
+//             <button className="text-blue-500 mb-4" onClick={handleBack}>
+//               &larr; Back
+//             </button>
+//             <h2 className="font-semibold mb-2">
+//               {activeItem ? activeItem.name : ''}
+//             </h2>
+//             <div className="space-y-2">
+//               {activeItem.fields.map((field) => (
+//                 <div
+//                   key={field}
+//                   className="bg-gray-100 px-2 py-1 rounded text-gray-700"
+//                 >
+//                   {field}
+//                 </div>
+//               ))}
+//             </div>
+//           </div>
+//         ) : (
+//           data[activeTab].map((item: any) => (
+//             <div
+//               key={item.id}
+//               className="flex items-center space-x-2 p-2 hover:bg-gray-100 cursor-pointer rounded"
+//               onClick={() => handleItemClick(item)}
+//             >
+//               <span>{item.name}</span>
+//             </div>
+//           ))
+//         )}
+//       </div>
+//     </div>
+//   );
+// }

package/src/components/React/TagsMenu/styles.module.scss

@@ -0,0 +1,16 @@
+.loader {
+  animation-name: ckw;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  transform-origin: 50% 50%;
+}
+
+@keyframes ckw {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/types/preact-compat.d.ts

@@ -1,4 +1,4 @@
-declare module '@preact/compat' {
-  export * from 'react';
-  export { default } from 'react';
-}
+// declare module '@preact/compat' {
+//   export * from 'react';
+//   export { default } from 'react';
+// }