feat(connect): integrations list (#2749)

## Describe your changes Contributes to https://linear.app/nango/issue/NAN-1703/create-ui - Create the integrations list page [[figma](https://www.figma.com/design/wBPwGMlopg8tcMFRekYLgE/Auth-UI?node-id=4107-456&node-type=canvas&m=dev)] - Setup react correctly: error boundary, router, fetcher, <img width="488" alt="Screenshot 2024-09-20 at 13 54 26" src="https://github.com/user-attachments/assets/9954f917-c3b4-4846-9849-8506341abd45"> ## 🧪 Tests ``` npm run dw npm run dwa # temp to be able to use API touch packages/connect-ui/.env VITE_LOCAL_SECRET_KEY=__SECRET_KEY__ npm run connect-ui:dev:watch ```
NangoHQ · Sep 25, 2024 · fe98a46 · fe98a46
1 parent 204a757
commit fe98a46
Show file tree

Hide file tree

Showing 17 changed files with 497 additions and 20 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -196,7 +196,8 @@
         },
         {
             "files": [
-                "packages/connect-ui/**/*.tsx"
+                "packages/connect-ui/**/*.tsx",
+                "packages/connect-ui/**/*.ts"
             ],
             "plugins": [
                 "react",
@@ -221,7 +222,47 @@
                 },
                 "project": "tsconfig.json"
             },
-            "rules": {}
+            "rules": {
+                // unnecessary when bundling
+                "import/extensions": "off",
+                "@typescript-eslint/member-ordering": "error",
+                "@typescript-eslint/no-non-null-assertion": "error",
+                "@typescript-eslint/no-explicit-any": "error",
+                "@typescript-eslint/only-throw-error": "error",
+                "react/prop-types": "off",
+                "import/order": [
+                    "error",
+                    {
+                        "groups": [
+                            "builtin",
+                            "external",
+                            "unknown",
+                            "internal",
+                            "parent",
+                            "sibling",
+                            "type",
+                            "index",
+                            "object"
+                        ],
+                        "newlines-between": "always",
+                        "alphabetize": {
+                            "order": "asc",
+                        },
+                        "warnOnUnassignedImports": true,
+                        "pathGroups": [
+                            {
+                                "pattern": "@/**",
+                                "group": "parent",
+                            },
+                            {
+                                "pattern": "@nangohq/**",
+                                "group": "internal",
+                                "position": "after"
+                            }
+                        ]
+                    }
+                ]
+            }
         }
     ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/connect-ui/index.html b/packages/connect-ui/index.html
@@ -4,6 +4,9 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Nango Connect</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />
     </head>
 
     <body>

diff --git a/packages/connect-ui/package.json b/packages/connect-ui/package.json
@@ -9,7 +9,11 @@
         "preview": "vite preview"
     },
     "devDependencies": {
+        "@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",
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
         "@vitejs/plugin-react-swc": "3.5.0",
@@ -21,11 +25,11 @@
         "postcss": "8.4.45",
         "react": "18.3.1",
         "react-dom": "18.3.1",
+        "react-error-boundary": "4.0.13",
         "tailwind-merge": "2.5.2",
         "tailwindcss": "3.4.11",
         "tailwindcss-animate": "1.0.7",
         "typescript": "5.5.3",
         "vite": "5.4.6"
-    },
-    "dependencies": {}
+    }
 }
diff --git a/packages/connect-ui/src/App.tsx b/packages/connect-ui/src/App.tsx
@@ -1,3 +1,27 @@
+import { QueryClientProvider, QueryErrorResetBoundary } from '@tanstack/react-query';
+import { RouterProvider, createRouter, createRootRoute } 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 });
+
 export const App: React.FC = () => {
-    return <div className="text-3xl font-bold underline">Coucou</div>;
+    return (
+        <QueryErrorResetBoundary>
+            <ErrorBoundary FallbackComponent={ErrorFallback}>
+                <QueryClientProvider client={queryClient}>
+                    <RouterProvider router={router} />
+                </QueryClientProvider>
+            </ErrorBoundary>
+        </QueryErrorResetBoundary>
+    );
 };
diff --git a/packages/connect-ui/src/components/ErrorFallback.tsx b/packages/connect-ui/src/components/ErrorFallback.tsx
@@ -0,0 +1,3 @@
+export const ErrorFallback: React.FC = () => {
+    return <div className="p-4 text-red-base">An error occurred. Please refresh your page or contact us, support@nango.dev</div>;
+};
diff --git a/packages/connect-ui/src/components/ui/button.tsx b/packages/connect-ui/src/components/ui/button.tsx
@@ -1,22 +1,18 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import type { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils.js';
 
+import type { VariantProps } from 'class-variance-authority';
+
 const buttonVariants = cva(
-    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300',
+    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300',
     {
         variants: {
             variant: {
                 default: 'bg-neutral-900 text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90',
-                destructive: 'bg-red-500 text-neutral-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90',
-                outline:
-                    'border border-neutral-200 bg-white hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50',
-                secondary: 'bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80',
-                ghost: 'hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50',
-                link: 'text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50'
+                transparent: 'text-dark-500 dark:hover:bg-neutral-50/90 focus:text-dark-800 hover:text-dark-800'
             },
             size: {
                 default: 'h-10 px-4 py-2',

diff --git a/packages/connect-ui/src/index.css b/packages/connect-ui/src/index.css
@@ -1,8 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @layer base {
     :root {
         --radius: 0.5rem;
     }
 }
+
+body {
+    font-size: 14px;
+}