feature: code samples (#434)

fern-api · Feb 6, 2024 · 16abe9a · 16abe9a
1 parent 8a459c2
commit 16abe9a
Show file tree

Hide file tree

Showing 16 changed files with 367 additions and 175 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/...46.1-7-ge796a1c-1677001e9b-be65d58b52.zip → ...6.1-19-g5e3bf66-695799a5f2-7535be1f84.zip b/...46.1-7-ge796a1c-1677001e9b-be65d58b52.zip → ...6.1-19-g5e3bf66-695799a5f2-7535be1f84.zip
diff --git a/packages/commons/app-utils/package.json b/packages/commons/app-utils/package.json
@@ -27,7 +27,7 @@
     "depcheck": "depcheck"
   },
   "dependencies": {
-    "@fern-api/fdr-sdk": "0.46.1-7-ge796a1c",
+    "@fern-api/fdr-sdk": "0.46.1-19-g5e3bf66",
     "@fern-ui/core-utils": "workspace:*",
     "@types/title": "^3.4.3",
     "lodash-es": "^4.17.21",

diff --git a/packages/ui/app/package.json b/packages/ui/app/package.json
@@ -34,7 +34,7 @@
     "@blueprintjs/datetime2": "^2.2.10",
     "@blueprintjs/icons": "^5.7.0",
     "@blueprintjs/select": "^5.0.22",
-    "@fern-api/fdr-sdk": "0.46.1-7-ge796a1c",
+    "@fern-api/fdr-sdk": "0.46.1-19-g5e3bf66",
     "@fern-ui/app-utils": "workspace:*",
     "@fern-ui/core-utils": "workspace:*",
     "@fern-ui/loadable": "workspace:*",

diff --git a/packages/ui/app/src/api-page/endpoints/CodeExampleClientDropdown.tsx b/packages/ui/app/src/api-page/endpoints/CodeExampleClientDropdown.tsx
@@ -1,25 +1,12 @@
-import classNames from "classnames";
 import { RemoteFontAwesomeIcon } from "../../commons/FontAwesomeIcon";
 import { FernMenu, FernMenuItem } from "../../components/FernMenu";
-import type { CodeExampleClient, CodeExampleClientId } from "../examples//code-example";
-
-function getIconForClient(clientId: CodeExampleClientId) {
-    switch (clientId) {
-        case "curl":
-            return "fa-solid fa-code";
-        case "python":
-        case "python-async":
-            return "fa-brands fa-python";
-        case "typescript":
-            return "fa-brands fa-js";
-    }
-}
+import type { CodeExample, CodeExampleGroup } from "../examples//code-example";
 
 export declare namespace CodeExampleClientDropdown {
     export interface Props {
-        clients: CodeExampleClient[];
-        selectedClient: CodeExampleClient;
-        onClickClient: (clientId: CodeExampleClientId) => void;
+        clients: CodeExampleGroup[];
+        selectedClient: CodeExample;
+        onClickClient: (example: CodeExample) => void;
     }
 }
 
@@ -28,45 +15,66 @@ export const CodeExampleClientDropdown: React.FC<CodeExampleClientDropdown.Props
     selectedClient,
     onClickClient,
 }) => {
+    const selectedClientGroup = clients.find((client) => client.language === selectedClient.language);
     return (
         <div className="flex justify-end">
             <FernMenu
-                text={selectedClient.name}
+                text={selectedClientGroup?.languageDisplayName ?? selectedClient.language}
                 icon={
                     <RemoteFontAwesomeIcon
-                        className="bg-accent-primary h-4 w-4"
-                        icon={getIconForClient(selectedClient.id)}
+                        className="bg-accent-primary dark:bg-accent-primary-dark h-4 w-4"
+                        icon={selectedClientGroup?.icon}
                     />
                 }
                 align="right"
+                menuClassName="overflow-hidden"
                 size="small"
             >
-                {clients.map(({ id: clientId, name: clientName }) => {
-                    const selected = clientId === selectedClient.id;
-                    return (
-                        <FernMenuItem
-                            key={clientId}
-                            selected={clientId === selectedClient.id}
-                            onClick={() => onClickClient(clientId)}
-                        >
-                            {(active) => (
-                                <>
-                                    <RemoteFontAwesomeIcon
-                                        className={classNames("h-4 w-4", {
-                                            "!bg-accent-primary": selected || (active && !selected),
-                                            "!bg-text-muted-light dark:!bg-text-muted-dark": !active && !selected,
-                                        })}
-                                        icon={getIconForClient(clientId)}
-                                    />
-                                    <div className="flex items-center whitespace-nowrap">
-                                        <span className="font-mono text-xs font-normal">{clientName}</span>
-                                    </div>
-                                </>
-                            )}
-                        </FernMenuItem>
-                    );
-                })}
+                {clients.map((client) => (
+                    <FernMenuItem
+                        key={client.language}
+                        selected={client.language === selectedClient.language}
+                        onClick={() => {
+                            if (client.examples[0] != null) {
+                                onClickClient(
+                                    client.examples.find(
+                                        (example) => example.exampleIndex === selectedClient.exampleIndex,
+                                    ) ?? client.examples[0],
+                                );
+                            }
+                        }}
+                    >
+                        <RemoteFontAwesomeIcon
+                            className="bg-accent-primary dark:bg-accent-primary-dark h-4 w-4"
+                            icon={client.icon}
+                        />
+                        <div className="flex items-center whitespace-nowrap">
+                            <span className="font-mono text-xs font-normal">{client.languageDisplayName}</span>
+                        </div>
+                    </FernMenuItem>
+                ))}
             </FernMenu>
         </div>
     );
 };
+
+/*
+{selectedClientGroup != null && selectedClientGroup.examples.length > 1 && (
+    <div className="divide-border-primary dark:divide-border-primary-dark flex flex-col items-stretch divide-y overflow-hidden rounded-md bg-white shadow">
+        {selectedClientGroup?.examples.map((example) => (
+            <FernMenuItem
+                key={example.key}
+                selected={example.key === selectedClient.key}
+                onClick={() => {
+                    onClickClient(example);
+                }}
+                disableRoundCorners
+            >
+                <div className="flex items-center whitespace-nowrap">
+                    <span className="font-mono text-xs font-normal">{example.name}</span>
+                </div>
+            </FernMenuItem>
+        ))}
+    </div>
+)}
+*/