[OPIK-2399] TS SDK banner in the quickstart page and dialog (#3259)

Co-authored-by: Yaroslav Boiko <[email protected]>

Author: awkoy

apps/opik-frontend/src/components/pages-shared/onboarding/IntegrationExplorer/IntegrationExplorer.tsx

@@ -3,6 +3,7 @@ import { IntegrationExplorerProvider } from "./IntegrationExplorerContext";
 
 import IntegrationSearch from "./IntegrationSearch";
 import IntegrationQuickInstall from "./IntegrationQuickInstall";
+import IntegrationTypeScriptSDK from "./IntegrationTypeScriptSDK";
 import IntegrationGetHelp from "./IntegrationGetHelp";
 import IntegrationCopyApiKey from "./IntegrationCopyApiKey";
 import IntegrationTabs from "./IntegrationTabs";
@@ -15,6 +16,7 @@ export type IntegrationExplorerProps = {
 const IntegrationExplorer: React.FunctionComponent<IntegrationExplorerProps> & {
   Search: typeof IntegrationSearch;
   QuickInstall: typeof IntegrationQuickInstall;
+  TypeScriptSDK: typeof IntegrationTypeScriptSDK;
   GetHelp: typeof IntegrationGetHelp;
   CopyApiKey: typeof IntegrationCopyApiKey;
   Tabs: typeof IntegrationTabs;
@@ -25,6 +27,7 @@ const IntegrationExplorer: React.FunctionComponent<IntegrationExplorerProps> & {
 
 IntegrationExplorer.Search = IntegrationSearch;
 IntegrationExplorer.QuickInstall = IntegrationQuickInstall;
+IntegrationExplorer.TypeScriptSDK = IntegrationTypeScriptSDK;
 IntegrationExplorer.GetHelp = IntegrationGetHelp;
 IntegrationExplorer.CopyApiKey = IntegrationCopyApiKey;
 IntegrationExplorer.Tabs = IntegrationTabs;

apps/opik-frontend/src/components/pages-shared/onboarding/IntegrationExplorer/IntegrationQuickInstall.tsx

@@ -39,6 +39,7 @@ const IntegrationQuickInstall: React.FC = () => {
       <IntegrationCard
         title="Quick install with AI assistants"
         description="Set up Opik fast with Cursor, Copilot, Windsurf, or your favorite AI assistant."
+        size="lg"
         icon={
           <div className="flex items-center gap-1 pr-2">
             <img
@@ -58,8 +59,6 @@ const IntegrationQuickInstall: React.FC = () => {
             />
           </div>
         }
-        tag="New"
-        className="mb-4"
         onClick={handleQuickInstallClick}
       />
 

apps/opik-frontend/src/components/pages-shared/onboarding/IntegrationExplorer/IntegrationTypeScriptSDK.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import IntegrationCard from "@/components/pages-shared/onboarding/IntegrationExplorer/components/IntegrationCard";
+import tsLogo from "@/icons/ts-logo.svg";
+import { buildDocsUrl } from "@/lib/utils";
+
+const IntegrationTypeScriptSDK: React.FC = () => {
+  return (
+    <a
+      href={buildDocsUrl(
+        "/reference/typescript-sdk/overview",
+        "&utm_source=opik_frontend&utm_medium=integration_explorer&utm_campaign=typescript_sdk&utm_content=integration_card",
+      )}
+      target="_blank"
+      rel="noopener noreferrer"
+      data-fs="ts-sdk-docs-link"
+    >
+      <IntegrationCard
+        title="TypeScript SDK"
+        description="Bring observability and evaluations to your JS apps"
+        size="lg"
+        icon={
+          <img alt="TypeScript" src={tsLogo} className="size-[32px] shrink-0" />
+        }
+        tag="New"
+      />
+    </a>
+  );
+};
+
+export default IntegrationTypeScriptSDK;

apps/opik-frontend/src/components/pages-shared/onboarding/IntegrationExplorer/components/IntegrationCard.tsx

@@ -10,6 +10,7 @@ type IntegrationCardProps = {
   className?: string;
   iconClassName?: string;
   onClick?: () => void;
+  size?: "sm" | "lg";
 };
 
 const IntegrationCard: React.FC<IntegrationCardProps> = ({
@@ -20,11 +21,13 @@ const IntegrationCard: React.FC<IntegrationCardProps> = ({
   className,
   iconClassName,
   onClick,
+  size = "sm",
 }) => {
   return (
     <div
       className={cn(
         "relative flex gap-2 items-center rounded-lg border bg-background p-4 transition-all duration-200 hover:bg-primary-foreground cursor-pointer",
+        size === "lg" && "min-h-[86px]",
         className,
       )}
       onClick={onClick}

apps/opik-frontend/src/components/pages-shared/onboarding/QuickstartDialog/QuickstartDialog.tsx

@@ -33,7 +33,10 @@ const QuickstartDialog: React.FC<QuickstartDialogProps> = ({
             </div>
           </div>
 
-          <IntegrationExplorer.QuickInstall />
+          <div className="mb-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
+            <IntegrationExplorer.QuickInstall />
+            <IntegrationExplorer.TypeScriptSDK />
+          </div>
 
           <IntegrationExplorer.Tabs>
             <IntegrationExplorer.Grid />

apps/opik-frontend/src/components/pages/NewQuickstartPage/NewQuickstartPage.tsx

@@ -37,7 +37,10 @@ const NewQuickstartPage: React.FunctionComponent = () => {
             </div>
           </div>
 
-          <IntegrationExplorer.QuickInstall />
+          <div className="mb-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
+            <IntegrationExplorer.QuickInstall />
+            <IntegrationExplorer.TypeScriptSDK />
+          </div>
 
           <IntegrationExplorer.Tabs>
             <IntegrationExplorer.Grid />