Add new searchParams to embed react component and create example proj (…

…#237) * Add new searchParams to embed react component and create example proj * rename package to connect-dev + lint fixes * Fix deeplink condition to work when we only have connectorName but the ccfg has no integrations * incrementing version * Update lock file --------- Co-authored-by: Rodrigo Arze Leon <[email protected]> Co-authored-by: Amadeo Pellicce <[email protected]>
openintegrations · Jan 24, 2025 · b190f35 · b190f35
1 parent 95e0de8
commit b190f35
Show file tree

Hide file tree

Showing 14 changed files with 8,049 additions and 5,901 deletions.
diff --git a/.gitignore b/.gitignore
@@ -68,3 +68,6 @@ dist/
 
 # CI Artifacts
 /artifacts
+
+# Next.js
+.next/
diff --git a/apps/connect-dev/.env.example b/apps/connect-dev/.env.example
@@ -0,0 +1 @@
+OPENINT_TOKEN="xxx"
diff --git a/apps/connect-dev/app/globals.css b/apps/connect-dev/app/globals.css
@@ -0,0 +1,91 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/apps/connect-dev/app/layout.tsx b/apps/connect-dev/app/layout.tsx
@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Open File Picker Dev Server",
+  description: "Created with OpenInt",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/apps/connect-dev/app/page.tsx b/apps/connect-dev/app/page.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import {OpenIntConnectEmbed} from '../../../kits/connect/src/embed-react'
+
+export default function Home() {
+  return (
+    <div className="p-4">
+      <h1 className="mb-4 text-2xl font-bold">Embed React connect portal</h1>
+      <OpenIntConnectEmbed
+        baseUrl="http://localhost:4000"
+        params={{
+          token: process.env['OPENINT_TOKEN'],
+          connectionId: 'conn_github_01JH6FR8H2E1G79HJVYEANYM7T',
+          view: 'manage-deeplink',
+          theme: 'light',
+        }}
+        height={700}
+      />
+    </div>
+  )
+}
diff --git a/apps/connect-dev/next-env.d.ts b/apps/connect-dev/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/connect-dev/next.config.mjs b/apps/connect-dev/next.config.mjs
@@ -0,0 +1,55 @@
+let userConfig = undefined;
+try {
+  userConfig = await import("./v0-user-next.config");
+} catch (e) {
+  // ignore error
+}
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+  experimental: {
+    webpackBuildWorker: true,
+    parallelServerBuildTraces: true,
+    parallelServerCompiles: true,
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
+};
+
+mergeConfig(nextConfig, userConfig);
+
+function mergeConfig(nextConfig, userConfig) {
+  if (!userConfig) {
+    return;
+  }
+
+  for (const key in userConfig) {
+    if (
+      typeof nextConfig[key] === "object" &&
+      !Array.isArray(nextConfig[key])
+    ) {
+      nextConfig[key] = {
+        ...nextConfig[key],
+        ...userConfig[key],
+      };
+    } else {
+      nextConfig[key] = userConfig[key];
+    }
+  }
+}
+
+export default nextConfig;
diff --git a/apps/connect-dev/package.json b/apps/connect-dev/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "unified-file-picker",
+  "version": "1.0.0",
+  "description": "A unified file picker for SharePoint and Google Drive",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "next build",
+    "build:lib": "tsc -p tsconfig.lib.json",
+    "dev": "next dev",
+    "lint": "eslint . --ext .ts,.tsx",
+    "prepublishOnly": "npm run build:lib",
+    "start": "next start",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.ts"
+    ]
+  },
+  "dependencies": {
+    "next": "^14.1.0",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.0.0",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/uuid": "^8.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.27.1",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.0.0"
+  }
+}
diff --git a/apps/connect-dev/tsconfig.json b/apps/connect-dev/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/kits/connect/README.md b/kits/connect/README.md
@@ -14,8 +14,10 @@ In addition, should be usable from
 - Vanilla JS
 - React
 
-## Release Command
+## Release Process
+
+Ensure to increment the version in `package.json` and run the following commands:
 
 ```
-pnpm build && pnpm pub
+pnpm clean && pnpm build && pnpm pub
 ```
diff --git a/kits/connect/package.json b/kits/connect/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openint/connect",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/kits/connect/src/common.ts b/kits/connect/src/common.ts
@@ -16,7 +16,15 @@ export const defaultHost = 'https://app.openint.dev'
 
 export interface GetIFrameProps {
   baseUrl?: string | null
-  params?: {token?: string; displayName?: string}
+  params?: {
+    token?: string
+    displayName?: string
+    connectionId?: string
+    connectorNames?: string
+    integrationIds?: string
+    view?: 'add' | 'add-deeplink' | 'manage' | 'manage-deeplink'
+    theme?: 'light' | 'dark'
+  }
 }
 
 export const getIFrameUrl = ({

diff --git a/packages/engine-frontend/components/IntegrationSearch.tsx b/packages/engine-frontend/components/IntegrationSearch.tsx
@@ -119,9 +119,10 @@ export function IntegrationSearch({
     integrationIdList.length === 1 && integrationIdList[0]?.includes('int_')
   const hasRelatedIntegration = Boolean(
     connectorNameList.length === 1 &&
-      connectorNameList[0] &&
-      isFullIntegrationId &&
-      integrationIdList[0]?.includes(connectorNameList[0]),
+      ((connectorNameList[0] &&
+        isFullIntegrationId &&
+        integrationIdList[0]?.includes(connectorNameList[0])) ||
+        (ints && ints.length === 1 && ints[0]?.ccfg.integrations.length === 0)),
   )
 
   const hasDeeplink = isDeeplinkView && hasRelatedIntegration