feat(connect-ui): handle generic auth method (#2754)

## Describe your changes

Contributes to https://linear.app/nango/issue/NAN-1703/create-ui

- Handle generic auth method
API Key, Basic auth, unauth, and all auth that do not take a connection
config (e.g: google drive). If your integration is requiring a
connectionConfig it's not yet supported

- Frontend: type errors + fix a typo
- Frontend: add a way to clear SDK's state, it was annoying to do that
manually when debugging
- Frontend: slightly change the way the modal is being created
We were creating an empty popup and then changing the URL which made the
catching of popup blocker more random


## 🧪 Tests
```ts
npm i
npm run dw
npm run dwa

cd packages/connect-ui
touch .env
> VITE_LOCAL_SECRET_KEY=FILL
> VITE_LOCAL_PUBLIC_KEY=FILL
> VITE_LOCAL_HOSTNAME=http://localhost:3003


npm run connect-ui:dev:watch
```


https://github.com/user-attachments/assets/080d3746-bc1e-457e-a80b-175646fc63a4

.eslintrc

@@ -220,7 +220,7 @@
                     "impliedStrict": true,
                     "jsx": true
                 },
-                "project": "tsconfig.json"
+                "project": "packages/connect-ui/tsconfig.json"
             },
             "rules": {
                 // unnecessary when bundling
@@ -230,6 +230,14 @@
                 "@typescript-eslint/no-explicit-any": "error",
                 "@typescript-eslint/only-throw-error": "error",
                 "react/prop-types": "off",
+                "react/jsx-sort-props": [
+                    "error",
+                    {
+                        "callbacksLast": true,
+                        "shorthandFirst": true,
+                        "reservedFirst": true
+                    }
+                ],
                 "import/order": [
                     "error",
                     {
@@ -246,16 +254,16 @@
                         ],
                         "newlines-between": "always",
                         "alphabetize": {
-                            "order": "asc",
+                            "order": "asc"
                         },
                         "warnOnUnassignedImports": true,
                         "pathGroups": [
                             {
                                 "pattern": "@/**",
-                                "group": "parent",
+                                "group": "parent"
                             },
                             {
-                                "pattern": "@nangohq/**",
+                                "pattern": "@nangohq/*",
                                 "group": "internal",
                                 "position": "after"
                             }

packages/connect-ui/package.json

@@ -9,27 +9,33 @@
         "preview": "vite preview"
     },
     "devDependencies": {
+        "@nangohq/frontend": "file:../frontend",
         "@nangohq/types": "file:../types",
         "@radix-ui/react-slot": "1.1.0",
         "@tabler/icons-react": "3.17.0",
         "@tanstack/react-query": "5.56.2",
         "@tanstack/react-router": "1.58.3",
+        "@hookform/resolvers": "3.9.0",
+        "@radix-ui/react-label": "2.1.0",
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
         "@vitejs/plugin-react-swc": "3.5.0",
         "autoprefixer": "10.4.20",
         "class-variance-authority": "0.7.0",
         "clsx": "2.1.1",
         "globals": "15.9.0",
-        "lucide-react": "0.441.0",
         "postcss": "8.4.45",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-error-boundary": "4.0.13",
+        "react-hook-form": "^7.53.0",
         "tailwind-merge": "2.5.2",
         "tailwindcss": "3.4.11",
         "tailwindcss-animate": "1.0.7",
         "typescript": "5.5.3",
-        "vite": "5.4.6"
-    }
+        "vite": "5.4.6",
+        "zod": "3.23.8",
+        "zustand": "5.0.0-rc.2"
+    },
+    "dependencies": {}
 }

packages/connect-ui/src/App.tsx

@@ -1,18 +1,10 @@
 import { QueryClientProvider, QueryErrorResetBoundary } from '@tanstack/react-query';
-import { RouterProvider, createRouter, createRootRoute } from '@tanstack/react-router';
+import { RouterProvider } from '@tanstack/react-router';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import { ErrorFallback } from './components/ErrorFallback.js';
 import { queryClient } from './lib/query.js';
-import { IntegrationsList } from './views/IntegrationsList.js';
-
-const rootRoute = createRootRoute({
-    component: IntegrationsList
-});
-
-const routeTree = rootRoute.addChildren([]);
-
-const router = createRouter({ routeTree });
+import { router } from './lib/routes.js';
 
 export const App: React.FC = () => {
     return (

packages/connect-ui/src/components/ui/button.tsx

@@ -1,4 +1,5 @@
 import { Slot } from '@radix-ui/react-slot';
+import { IconLoader2 } from '@tabler/icons-react';
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
 
@@ -30,11 +31,17 @@ const buttonVariants = cva(
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
+    loading?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, loading, children, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    return (
+        <Comp ref={ref} className={cn(buttonVariants({ variant, size, className }))} {...props} disabled={loading || props.disabled}>
+            {loading && <IconLoader2 className="mr-2 animate-spin" size={15} />}
+            {children}
+        </Comp>
+    );
 });
 Button.displayName = 'Button';