chore: Freeze client api + api docs (#4373)

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>

apps/docs/app/api-docs/components/api-docs.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import { LoadingSpinner } from "@/components/icons/LoadingSpinner";
+import { useState } from "react";
+import { RedocStandalone } from "redoc";
+import "./style.css";
+
+const redocTheme = {
+  hideDownloadButton: true,
+  hideLoading: true,
+  nativeScrollbars: true,
+  theme: {
+    sidebar: {
+      backgroundColor: "transparent",
+      textColor: "rgb(203, 213, 225)",
+      activeTextColor: "#2dd4bf",
+    },
+    rightPanel: {
+      backgroundColor: "transparent",
+    },
+    colors: {
+      primary: { main: "#2dd4bf" },
+      text: {
+        primary: "rgb(203, 213, 225)",
+        secondary: "rgb(203, 213, 225)",
+      },
+      responses: {
+        success: { color: "#22c55e" },
+        error: { color: "#ef4444" },
+        info: { color: "#3b82f6" },
+      },
+    },
+    typography: {
+      fontSize: "16px",
+      lineHeight: "2rem",
+      fontFamily: "Jost, system-ui, -apple-system, sans-serif",
+      headings: {
+        fontFamily: "Jost, system-ui, -apple-system, sans-serif",
+        fontWeight: "600",
+      },
+      code: {
+        fontSize: "16px",
+        fontFamily: "ui-monospace, monospace",
+      },
+    },
+    codeBlock: {
+      backgroundColor: "rgb(24, 35, 58)",
+    },
+    spacing: { unit: 5 },
+  },
+};
+
+export const ApiDocs = () => {
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <div className="px-4">
+      <Button href="/developer-docs/rest-api" arrow="left" className="mb-4 mt-8">
+        Back to docs
+      </Button>
+      <RedocStandalone specUrl="/docs/openapi.yaml" onLoaded={() => setLoading(false)} options={redocTheme} />
+      {loading && <LoadingSpinner />}
+    </div>
+  );
+};

apps/docs/app/api-docs/components/style.css

@@ -0,0 +1,74 @@
+h5,
+.sc-dhCplO,
+.sc-dpBQxM {
+  color: rgb(203, 213, 225) !important;
+}
+
+.tab-success,
+.react-tabs__tab,
+.tab-error {
+  background-color: transparent !important;
+  border: 1px solid rgb(203, 213, 225) !important;
+  margin: 10px 5px !important;
+}
+
+.sc-dwGkES,
+.sc-ePpfBx {
+  background-color: rgb(24, 24, 27) !important;
+  border: 1px solid rgb(203, 213, 225) !important;
+}
+.sc-ePpfBx,
+.corVrN {
+  background-color: rgb(24, 24, 27) !important;
+  border: none !important;
+}
+.cqdCbT {
+  display: none !important;
+}
+.kiMaJz, .iZNUDY {
+  align-items: center !important;
+}
+
+.react-tabs__tab-panel > div {
+  padding: 0 !important;
+  border-radius: 8px !important;
+  overflow: hidden !important;
+}
+.sc-Rjrgp {
+  background-color: rgb(15, 23, 42) !important;
+  display: flex !important;
+  justify-content: center !important;
+  flex-direction: column !important;
+  padding: 8px 16px !important;
+}
+.cugBNu {
+  position: static !important;
+}
+.daIHdK {
+  padding: 0 !important;
+}
+.kqHNPM {
+  margin-top: 0px !important;
+}
+.sc-iwXfZk,
+.redoc-json {
+  padding: 1rem !important;
+  background-color: rgb(24, 35, 58) !important;
+}
+.sc-uYFMi {
+  background-color: rgb(24, 35, 58) !important;
+  padding: 0.5rem 0 !important;
+  color: #2dd4bf !important;
+  font-weight: 600 !important;
+}
+.token {
+  color: #2dd4bf !important;
+}
+
+.property {
+  color: rgb(203, 213, 225) !important;
+}
+.sc-iPHsxv {
+  background-color: rgb(15, 23, 42) !important;
+  border-radius: 8px !important;
+}

apps/docs/app/api-docs/page.tsx

@@ -0,0 +1,5 @@
+import { ApiDocs } from "./components/api-docs";
+
+export default function ApiDocsPage() {
+  return <ApiDocs />;
+}

apps/docs/app/developer-docs/rest-api/page.mdx

@@ -20,31 +20,31 @@ export const metadata = {
 
 Formbricks offers two types of APIs: the **Public Client API** and the **Management API**. Each API serves a different purpose, has different authentication requirements, and provides access to different data and settings.
 
-View our [API Documentation](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh) in more than 30 frameworks and languages.
+View our [API Documentation](/api-docs) in more than 30 frameworks and languages.
 
 ## Public Client API
 
-The [Public Client API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#5c981d9e-5e7d-455d-9795-b9c45bc2f930) is designed for our SDKs and **does not require authentication**. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
+The [Public Client API](/api-docs#tag/Client-API) is designed for our SDKs and **does not require authentication**. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
 
 We currently have the following Client API methods exposed and below is their documentation attached in Postman:
 
-- [Displays API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#949272bf-daec-4d72-9b52-47af3d74a62c) - Mark Survey as Displayed or Update an existing Display by linking it with a Response for a Person
-- [People API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#ee3d2188-4253-4bca-9238-6b76455805a9) - Create & Update a Person (e.g. attributes, email, userId, etc)
-- [Responses API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#8c773032-536c-483c-a237-c7697347946e) - Create & Update a Response for a Survey
+- [Displays API](/api-docs#tag/Public-Client-API-greater-Displays) - Mark Survey as Displayed or Update an existing Display by linking it with a Response for a Person
+- [People API](/api-docs#tag/Public-Client-API-greater-People) - Create & Update a Person (e.g. attributes, email, userId, etc)
+- [Responses API](/api-docs#tag/Public-Client-API-greater-Responses) - Create & Update a Response for a Survey
 
 ## Management API
 
-The [Management API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#98fce5a1-1365-4125-8de1-acdb28206766) provides access to all data and settings that your account has access to in the Formbricks app. This API **requires a personal API Key** for authentication, which can be generated in the Settings section of the Formbricks app. Checkout the [API Key Setup](#how-to-generate-an-api-key) below to generate & manage API Keys.
+The [Management API](/api-docs#tag/Management-API) provides access to all data and settings that your account has access to in the Formbricks app. This API **requires a personal API Key** for authentication, which can be generated in the Settings section of the Formbricks app. Checkout the [API Key Setup](#how-to-generate-an-api-key) below to generate & manage API Keys.
 
 We currently have the following Management API methods exposed and below is their documentation attached in Postman:
 
-- [Action Class API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#81947f69-99fc-41c9-a184-f3260e02be48) - Create, List, and Delete Action Classes
-- [Attribute Class API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#31089010-d468-4a7c-943e-8ebe71b9a36e) - Create, List, and Delete Attribute Classes
-- [Me API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#79e08365-641d-4b2d-aea2-9a855e0438ec) - Retrieve Account Information
-- [People API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#cffc27a6-dafb-428f-8ea7-5165bedb911e) - List and Delete People
-- [Response API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#e544ec0d-8b30-4e33-8d35-2441cb40d676) - List, List by Survey, Update, and Delete Responses
-- [Survey API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#953189b2-37b5-4429-a7bd-f4d01ceae242) - List, Create, Update, generate multiple suId and Delete Surveys
-- [Webhook API](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#62e6ec65-021b-42a4-ac93-d1434b393c6c) - List, Create, and Delete Webhooks
+- [Action Class API](/api-docs#tag/Management-API-greater-Action-Class) - Create, List, and Delete Action Classes
+- [Attribute Class API](/api-docs#tag/Management-API-greater-Attribute-Class) - Create, List, and Delete Attribute Classes
+- [Me API](/api-docs#tag/Management-API-greater-Me) - Retrieve Account Information
+- [People API](/api-docs#tag/Management-API-greater-People) - List and Delete People
+- [Response API](/api-docs#tag/Management-API-greater-Response) - List, List by Survey, Update, and Delete Responses
+- [Survey API](/api-docs#tag/Management-API-greater-Survey) - List, Create, Update, generate multiple suId and Delete Surveys
+- [Webhook API](/api-docs#tag/Management-API-greater-Webhook) - List, Create, and Delete Webhooks
 
 ## How to Generate an API key
 

apps/docs/components/Layout.tsx

@@ -19,6 +19,14 @@ export const Layout = ({
 }) => {
   const pathname = usePathname();
 
+  const fullWidthRoutes = ["/api-docs"];
+  const isFullWidth = fullWidthRoutes.includes(pathname || "");
+
+  // If it's a full-width route, return just the children
+  if (isFullWidth) {
+    return children;
+  }
+
   return (
     <SectionProvider sections={allSections[pathname || ""] ?? []}>
       <div className="h-full lg:ml-72 xl:ml-80">

apps/docs/components/icons/LoadingSpinner.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const LoadingSpinner = () => (
+  <div className="absolute inset-0 flex items-center justify-center">
+    <div className="border-primary h-12 w-12 animate-spin rounded-full border-4 border-t-transparent" />
+  </div>
+);

apps/docs/package.json

@@ -51,6 +51,7 @@
     "react-highlight-words": "0.20.0",
     "react-markdown": "9.0.1",
     "react-responsive-embed": "2.1.0",
+    "redoc": "2.2.0",
     "remark": "15.0.1",
     "remark-gfm": "4.0.0",
     "remark-mdx": "3.0.1",
@@ -65,8 +66,8 @@
   },
   "devDependencies": {
     "@formbricks/config-typescript": "workspace:*",
+    "@formbricks/eslint-config": "workspace:*",
     "@types/dompurify": "3.0.5",
-    "@types/react-highlight-words": "0.20.0",
-    "@formbricks/eslint-config": "workspace:*"
+    "@types/react-highlight-words": "0.20.0"
   }
 }