Memo main component, improve initial loader bg and bump version (#283)

* Memo main component, improve initial loader bg and bump version * Add spacing for no connections yet message * Update verticals to better fit integrations and clean other * Update docs
openintegrations · Feb 26, 2025 · 8d4aabe · 8d4aabe
1 parent a126470
commit 8d4aabe
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 150 deletions.
diff --git a/connectors/connector-discord/def.ts b/connectors/connector-discord/def.ts
@@ -17,6 +17,7 @@ export const discordDef = {
   metadata: {
     displayName: 'Discord',
     stage: 'beta',
+    verticals: ['messaging'],
     logoUrl: '/_assets/logo-discord.svg',
     nangoProvider: 'discord',
   },

diff --git a/connectors/connector-github/def.ts b/connectors/connector-github/def.ts
@@ -24,7 +24,7 @@ export const githubDef = {
   metadata: {
     displayName: 'GitHub',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['developer-tools'],
     logoUrl: '/_assets/logo-github.svg',
     nangoProvider: 'github',
   },

diff --git a/connectors/connector-gong/def.ts b/connectors/connector-gong/def.ts
@@ -24,7 +24,7 @@ export const gongDef = {
   metadata: {
     displayName: 'Gong',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['sales-enablement'],
     logoUrl: '/_assets/logo-gong.svg',
     nangoProvider: 'gong',
   },

diff --git a/connectors/connector-intercom/def.ts b/connectors/connector-intercom/def.ts
@@ -24,7 +24,7 @@ export const intercomDef = {
   metadata: {
     displayName: 'Intercom',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['communication'],
     logoUrl: '/_assets/logo-intercom.svg',
     nangoProvider: 'intercom',
   },

diff --git a/connectors/connector-jira/def.ts b/connectors/connector-jira/def.ts
@@ -24,7 +24,7 @@ export const jiraDef = {
   metadata: {
     displayName: 'Jira',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['ticketing'],
     logoUrl: '/_assets/logo-jira.svg',
     nangoProvider: 'jira',
   },

diff --git a/connectors/connector-kustomer/def.ts b/connectors/connector-kustomer/def.ts
@@ -24,7 +24,7 @@ export const kustomerDef = {
   metadata: {
     displayName: 'Kustomer',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['communication'],
     logoUrl: '/_assets/logo-kustomer.svg',
     // TODO: Update opensdks NangoProvider type to include kustomer
     // @ts-expect-error

diff --git a/connectors/connector-linear/def.ts b/connectors/connector-linear/def.ts
@@ -24,7 +24,7 @@ export const linearDef = {
   metadata: {
     displayName: 'Linear',
     stage: 'beta',
-    verticals: ['other'],
+    verticals: ['ticketing'],
     logoUrl: '/_assets/logo-linear.svg',
     nangoProvider: 'linear',
   },

diff --git a/kits/cdk/verticals.ts b/kits/cdk/verticals.ts
@@ -12,26 +12,7 @@ interface VerticalInfo {
 // Also maybe should be distributed in a metadata file associated with each unified api
 // impl.
 const _VERTICAL_BY_KEY = {
-  banking: {},
   accounting: {},
-  crm: {
-    name: 'CRM',
-    objects: ['account', 'contact', 'opportunity', 'lead', 'user'],
-  },
-  'sales-engagement': {},
-  engagement: {}, // TODO: merge me
-  commerce: {},
-  'expense-management': {},
-  enrichment: {},
-  database: {},
-  'flat-files-and-spreadsheets': {},
-  'file-storage': {},
-  streaming: {},
-  'personal-finance': {},
-  other: {},
-  hris: {},
-  payroll: {},
-  calendar: {},
   ats: {
     name: 'ATS',
     description: `Our secure API identifies employees and compensation by
@@ -40,9 +21,31 @@ const _VERTICAL_BY_KEY = {
                 one-way with no impact on original data.`,
     objects: ['job', 'offer', 'candidate', 'opening'],
   },
+  banking: {},
+  calendar: {},
+  commerce: {},
+  communication: {},
+  crm: {
+    name: 'CRM',
+    objects: ['account', 'contact', 'opportunity', 'lead', 'user'],
+  },
+  database: {},
+  'developer-tools': {},
   email: {},
+  engagement: {}, // TODO: merge me
+  enrichment: {},
+  'expense-management': {},
+  'file-storage': {},
+  'flat-files-and-spreadsheets': {},
+  hris: {},
   messaging: {},
-  communication: {},
+  other: {},
+  payroll: {},
+  'personal-finance': {},
+  'sales-enablement': {},
+  'sales-engagement': {},
+  streaming: {},
+  ticketing: {},
   wiki: {},
 } satisfies Record<string, VerticalInfo>
 

diff --git a/kits/connect/package.json b/kits/connect/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openint/connect",
-  "version": "0.2.19",
+  "version": "0.2.22",
   "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/kits/connect/src/embed-react.tsx b/kits/connect/src/embed-react.tsx
@@ -10,72 +10,82 @@ export interface OpenIntConnectEmbedProps
 
 const DEFAULT_HEIGHT = 500
 const DEFAULT_WIDTH = 350
-export const OpenIntConnectEmbed = React.forwardRef(
-  (
-    {baseUrl, params, onReady, ...iframeProps}: OpenIntConnectEmbedProps,
-    forwardedRef: React.ForwardedRef<HTMLIFrameElement>,
-  ) => {
-    const url = getIFrameUrl({baseUrl, params})
-    const [loading, setLoading] = React.useState(true)
+export const OpenIntConnectEmbed = React.memo(
+  React.forwardRef(
+    (
+      props: OpenIntConnectEmbedProps,
+      forwardedRef: React.ForwardedRef<HTMLIFrameElement>,
+    ) => {
+      const {baseUrl, params, onReady, ...iframeProps} = props
 
-    React.useEffect(() => {
-      if (
-        typeof iframeProps.height === 'number' &&
-        iframeProps.height < DEFAULT_HEIGHT
-      ) {
-        console.warn(
-          'Optimal height for Connect is 500px. Using 500px instead.',
-        )
-      }
-      if (typeof iframeProps.width === 'number' && iframeProps.width < 350) {
-        console.warn('Minimum width for Connect is 350px. Using 350px instead.')
-      }
-    }, [iframeProps.height, iframeProps.width])
+      const url = React.useMemo(
+        () => getIFrameUrl({baseUrl, params}),
+        [baseUrl, params],
+      )
 
-    const height =
-      typeof iframeProps.height === 'number'
-        ? iframeProps.height > DEFAULT_HEIGHT
-          ? iframeProps.height
-          : DEFAULT_HEIGHT
-        : iframeProps.height
+      const [loading, setLoading] = React.useState(true)
 
-    const width =
-      typeof iframeProps.width === 'number'
-        ? iframeProps.width > DEFAULT_WIDTH
-          ? iframeProps.width
-          : DEFAULT_WIDTH
-        : iframeProps.width || DEFAULT_WIDTH
+      React.useEffect(() => {
+        if (
+          typeof iframeProps.height === 'number' &&
+          iframeProps.height < DEFAULT_HEIGHT
+        ) {
+          console.warn(
+            'Optimal height for Connect is 500px. Using 500px instead.',
+          )
+        }
+        if (typeof iframeProps.width === 'number' && iframeProps.width < 350) {
+          console.warn(
+            'Minimum width for Connect is 350px. Using 350px instead.',
+          )
+        }
+      }, [iframeProps.height, iframeProps.width])
 
-    // Add a more reliable way to know iframe has fully finished loading
-    // by sending message from iframe to parent when ready
-    return (
-      <div className="connect-embed-wrapper">
-        <div className={`spinner-container ${loading ? 'loading' : 'loaded'}`}>
-          <svg className="spinner" viewBox="0 0 50 50">
-            <circle
-              className="path"
-              cx="25"
-              cy="25"
-              r="20"
-              fill="none"
-              strokeWidth="5"></circle>
-          </svg>
-        </div>
-        <iframe
-          name="openint-connect-frame"
-          id="openint-connect-frame"
-          {...iframeProps}
-          ref={forwardedRef}
-          onLoad={() => {
-            setLoading(false)
-            onReady?.()
-          }}
-          src={url}
-          width={width}
-          height={height}
-        />
+      const height =
+        typeof iframeProps.height === 'number'
+          ? iframeProps.height > DEFAULT_HEIGHT
+            ? iframeProps.height
+            : DEFAULT_HEIGHT
+          : iframeProps.height
+
+      const width =
+        typeof iframeProps.width === 'number'
+          ? iframeProps.width > DEFAULT_WIDTH
+            ? iframeProps.width
+            : DEFAULT_WIDTH
+          : iframeProps.width || DEFAULT_WIDTH
 
-        <style>{`
+      // Add a more reliable way to know iframe has fully finished loading
+      // by sending message from iframe to parent when ready
+      return (
+        <div className="connect-embed-wrapper">
+          <div
+            className={`spinner-container ${loading ? 'loading' : 'loaded'}`}>
+            <svg className="spinner" viewBox="0 0 50 50">
+              <circle
+                className="path"
+                cx="25"
+                cy="25"
+                r="20"
+                fill="none"
+                strokeWidth="5"></circle>
+            </svg>
+          </div>
+          <iframe
+            name="openint-connect-frame"
+            id="openint-connect-frame"
+            {...iframeProps}
+            ref={forwardedRef}
+            onLoad={() => {
+              setLoading(false)
+              onReady?.()
+            }}
+            src={url}
+            width={width}
+            height={height}
+          />
+
+          <style>{`
         .connect-embed-wrapper {
           display: flex;
           height: ${height}px;
@@ -91,7 +101,7 @@ export const OpenIntConnectEmbed = React.forwardRef(
           justify-content: center;
           align-items: center;
           height: 100%;
-          background: white;
+          background: ${params?.theme === 'dark' ? '#1C1C1C' : 'white'};
           transition: opacity 0.3s ease;
           max-width: ${width}px;
           max-height: ${height}px;
@@ -130,8 +140,10 @@ export const OpenIntConnectEmbed = React.forwardRef(
           }
         }
       `}</style>
-      </div>
-    )
-  },
+        </div>
+      )
+    },
+  ),
 )
+
 OpenIntConnectEmbed.displayName = 'OpenIntConnectEmbed'
diff --git a/kits/sdk/openapi.json b/kits/sdk/openapi.json
@@ -1510,27 +1510,30 @@
                         "items": {
                           "type": "string",
                           "enum": [
-                            "banking",
                             "accounting",
+                            "ats",
+                            "banking",
+                            "calendar",
+                            "commerce",
+                            "communication",
                             "crm",
-                            "sales-engagement",
+                            "database",
+                            "developer-tools",
+                            "email",
                             "engagement",
-                            "commerce",
-                            "expense-management",
                             "enrichment",
-                            "database",
-                            "flat-files-and-spreadsheets",
+                            "expense-management",
                             "file-storage",
-                            "streaming",
-                            "personal-finance",
-                            "other",
+                            "flat-files-and-spreadsheets",
                             "hris",
-                            "payroll",
-                            "calendar",
-                            "ats",
-                            "email",
                             "messaging",
-                            "communication",
+                            "other",
+                            "payroll",
+                            "personal-finance",
+                            "sales-enablement",
+                            "sales-engagement",
+                            "streaming",
+                            "ticketing",
                             "wiki"
                           ]
                         }
@@ -8554,27 +8557,30 @@
             "items": {
               "type": "string",
               "enum": [
-                "banking",
                 "accounting",
+                "ats",
+                "banking",
+                "calendar",
+                "commerce",
+                "communication",
                 "crm",
-                "sales-engagement",
+                "database",
+                "developer-tools",
+                "email",
                 "engagement",
-                "commerce",
-                "expense-management",
                 "enrichment",
-                "database",
-                "flat-files-and-spreadsheets",
+                "expense-management",
                 "file-storage",
-                "streaming",
-                "personal-finance",
-                "other",
+                "flat-files-and-spreadsheets",
                 "hris",
-                "payroll",
-                "calendar",
-                "ats",
-                "email",
                 "messaging",
-                "communication",
+                "other",
+                "payroll",
+                "personal-finance",
+                "sales-enablement",
+                "sales-engagement",
+                "streaming",
+                "ticketing",
                 "wiki"
               ]
             }