improvements

fern-api · Jan 19, 2024 · 0dd8390 · 0dd8390
1 parent 9b7e5ee
commit 0dd8390
Show file tree

Hide file tree

Showing 21 changed files with 479 additions and 391 deletions.
diff --git a/packages/commons/app-utils/src/resolver.ts b/packages/commons/app-utils/src/resolver.ts
@@ -350,6 +350,7 @@ export type ResolvedNavigationItem =
     | ResolvedNavigationItemPageGroup
     | ResolvedNavigationItemApiSection
     | ResolvedNavigationItemSection;
+
 export interface ResolvedNavigationItemPageGroup {
     type: "pageGroup";
     pages: ResolvedPageMetadata[];

diff --git a/packages/ui/app/src/api-page/ApiPackageContents.tsx b/packages/ui/app/src/api-page/ApiPackageContents.tsx
@@ -1,30 +1,34 @@
-import { ResolvedApiDefinitionPackage } from "@fern-ui/app-utils";
+import { ResolvedApiDefinitionPackage, ResolvedNavigationItemApiSection } from "@fern-ui/app-utils";
 import { Endpoint } from "./endpoints/Endpoint";
 import { ApiSubpackage } from "./subpackages/ApiSubpackage";
 import { Webhook } from "./webhooks/Webhook";
 
 export declare namespace ApiPackageContents {
     export interface Props {
-        package: ResolvedApiDefinitionPackage;
+        apiSection: ResolvedNavigationItemApiSection;
+        apiDefinition: ResolvedApiDefinitionPackage;
         isLastInParentPackage: boolean;
         anchorIdParts: string[];
     }
 }
 
 export const ApiPackageContents: React.FC<ApiPackageContents.Props> = ({
-    package: package_,
+    apiSection,
+    apiDefinition,
     isLastInParentPackage,
     anchorIdParts,
 }) => {
-    const { endpoints, webhooks, subpackages } = package_;
+    const { endpoints, webhooks, subpackages } = apiDefinition;
 
-    const subpackageTitle = package_.type === "subpackage" ? package_.title : undefined;
+    const subpackageTitle = apiDefinition.type === "subpackage" ? apiDefinition.title : undefined;
 
     return (
         <>
             {endpoints.map((endpoint, idx) => (
                 <Endpoint
                     key={endpoint.id}
+                    apiSection={apiSection}
+                    apiDefinition={apiDefinition}
                     endpoint={endpoint}
                     subpackageTitle={subpackageTitle}
                     isLastInApi={isLastInParentPackage && idx === endpoints.length - 1}
@@ -41,7 +45,8 @@ export const ApiPackageContents: React.FC<ApiPackageContents.Props> = ({
             {subpackages.map((subpackage, idx) => (
                 <ApiSubpackage
                     key={subpackage.id}
-                    subpackage={subpackage}
+                    apiSection={apiSection}
+                    apiDefinition={subpackage}
                     isLastInParentPackage={idx === subpackages.length - 1}
                     anchorIdParts={anchorIdParts}
                 />

diff --git a/packages/ui/app/src/api-page/ApiPage.tsx b/packages/ui/app/src/api-page/ApiPage.tsx
@@ -17,7 +17,12 @@ export const ApiPage: React.FC<ApiPage.Props> = ({ apiSection }) => {
                 <ApiArtifacts apiArtifacts={apiSection.artifacts} />
             )}
 
-            <ApiPackageContents package={apiSection} isLastInParentPackage={false} anchorIdParts={[]} />
+            <ApiPackageContents
+                apiSection={apiSection}
+                apiDefinition={apiSection}
+                isLastInParentPackage={false}
+                anchorIdParts={[]}
+            />
 
             <div className="pl-6 pr-4 md:pl-12">
                 <BottomNavigationButtons />

diff --git a/packages/ui/app/src/api-page/endpoints/Endpoint.tsx b/packages/ui/app/src/api-page/endpoints/Endpoint.tsx
@@ -1,18 +1,30 @@
 import { joinUrlSlugs } from "@fern-api/fdr-sdk";
-import { ResolvedEndpointDefinition } from "@fern-ui/app-utils";
+import {
+    ResolvedApiDefinitionPackage,
+    ResolvedEndpointDefinition,
+    ResolvedNavigationItemApiSection,
+} from "@fern-ui/app-utils";
 import { useShouldHideFromSsg } from "../../navigation-context/useNavigationContext";
 import { useApiPageCenterElement } from "../useApiPageCenterElement";
 import { EndpointContent } from "./EndpointContent";
 
 export declare namespace Endpoint {
     export interface Props {
+        apiSection: ResolvedNavigationItemApiSection;
+        apiDefinition: ResolvedApiDefinitionPackage;
         endpoint: ResolvedEndpointDefinition;
         subpackageTitle: string | undefined;
         isLastInApi: boolean;
     }
 }
 
-export const Endpoint: React.FC<Endpoint.Props> = ({ endpoint, subpackageTitle, isLastInApi }) => {
+export const Endpoint: React.FC<Endpoint.Props> = ({
+    apiSection,
+    apiDefinition,
+    endpoint,
+    subpackageTitle,
+    isLastInApi,
+}) => {
     const fullSlug = joinUrlSlugs(...endpoint.slug);
     const route = `/${fullSlug}`;
 
@@ -27,6 +39,8 @@ export const Endpoint: React.FC<Endpoint.Props> = ({ endpoint, subpackageTitle,
 
     return (
         <EndpointContent
+            apiSection={apiSection}
+            apiDefinition={apiDefinition}
             endpoint={endpoint}
             subpackageTitle={subpackageTitle}
             setContainerRef={setTargetRef}

diff --git a/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx b/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx
@@ -1,12 +1,15 @@
 import { APIV1Read } from "@fern-api/fdr-sdk";
-import { ResolvedEndpointDefinition } from "@fern-ui/app-utils";
+import {
+    ResolvedApiDefinitionPackage,
+    ResolvedEndpointDefinition,
+    ResolvedNavigationItemApiSection,
+} from "@fern-ui/app-utils";
 import classNames from "classnames";
 import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { useRouter } from "next/router";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useInView } from "react-intersection-observer";
-import { useApiDefinitionContext } from "../../api-context/useApiDefinitionContext";
 import { useNavigationContext } from "../../navigation-context";
 import { useViewportContext } from "../../viewport-context/useViewportContext";
 import { type CodeExampleClient } from "../examples/code-example";
@@ -18,6 +21,8 @@ import { convertNameToAnchorPart, EndpointContentLeft } from "./EndpointContentL
 
 export declare namespace EndpointContent {
     export interface Props {
+        apiSection: ResolvedNavigationItemApiSection;
+        apiDefinition: ResolvedApiDefinitionPackage;
         endpoint: ResolvedEndpointDefinition;
         subpackageTitle: string | undefined;
         hideBottomSeparator?: boolean;
@@ -93,6 +98,8 @@ function maybeGetErrorStatusCodeOrNameFromAnchor(anchor: string | undefined): nu
 }
 
 export const EndpointContent: React.FC<EndpointContent.Props> = ({
+    apiSection,
+    apiDefinition,
     endpoint,
     subpackageTitle,
     hideBottomSeparator = false,
@@ -107,7 +114,7 @@ export const EndpointContent: React.FC<EndpointContent.Props> = ({
         onChange: setIsInViewport,
         rootMargin: "100%",
     });
-    const { apiSection, apiDefinition } = useApiDefinitionContext();
+    // const { apiSection, apiDefinition } = useApiDefinitionContext();
     const [hoveredRequestPropertyPath, setHoveredRequestPropertyPath] = useState<JsonPropertyPath | undefined>();
     const [hoveredResponsePropertyPath, setHoveredResponsePropertyPath] = useState<JsonPropertyPath | undefined>();
     const onHoverRequestProperty = useCallback(
@@ -167,10 +174,10 @@ export const EndpointContent: React.FC<EndpointContent.Props> = ({
 
     const curlLines = useMemo(
         () =>
-            example != null && apiDefinition != null
-                ? getCurlLines(apiDefinition, endpoint, example, flattenJsonToLines(example.requestBody))
+            example != null
+                ? getCurlLines(apiSection.auth, endpoint, example, flattenJsonToLines(example.requestBody))
                 : [],
-        [apiDefinition, endpoint, example]
+        [apiSection.auth, endpoint, example]
     );
     const selectedExampleClientLineCount = useMemo(() => {
         return selectedExampleClient.id === "curl"
@@ -265,8 +272,9 @@ export const EndpointContent: React.FC<EndpointContent.Props> = ({
                 >
                     {isInViewport && example != null && (
                         <EndpointContentCodeSnippets
+                            apiSection={apiSection}
+                            apiDefinition={apiDefinition}
                             endpoint={endpoint}
-                            package={package_}
                             example={example}
                             availableExampleClients={availableExampleClients}
                             selectedExampleClient={selectedExampleClient}
@@ -277,7 +285,6 @@ export const EndpointContent: React.FC<EndpointContent.Props> = ({
                             hoveredResponsePropertyPath={hoveredResponsePropertyPath}
                             requestHeight={requestHeight}
                             responseHeight={responseHeight}
-                            slug={route.substring(1)}
                         />
                     )}
                 </div>

diff --git a/packages/ui/app/src/api-page/endpoints/EndpointContentCodeSnippets.tsx b/packages/ui/app/src/api-page/endpoints/EndpointContentCodeSnippets.tsx
@@ -1,7 +1,11 @@
 "use client";
 import { APIV1Read } from "@fern-api/fdr-sdk";
+import {
+    ResolvedApiDefinitionPackage,
+    ResolvedEndpointDefinition,
+    ResolvedNavigationItemApiSection,
+} from "@fern-ui/app-utils";
 import { memo } from "react";
-import { useApiDefinitionContext } from "../../api-context/useApiDefinitionContext";
 import { ApiPlaygroundButton } from "../../api-playground/ApiPlaygroundButton";
 import { CodeBlockSkeleton } from "../../commons/CodeBlockSkeleton";
 import type { CodeExampleClient } from "../examples/code-example";
@@ -15,8 +19,9 @@ import { CodeExampleClientDropdown } from "./CodeExampleClientDropdown";
 
 export declare namespace EndpointContentCodeSnippets {
     export interface Props {
-        endpoint: APIV1Read.EndpointDefinition;
-        package: APIV1Read.ApiDefinitionPackage;
+        apiSection: ResolvedNavigationItemApiSection;
+        apiDefinition: ResolvedApiDefinitionPackage;
+        endpoint: ResolvedEndpointDefinition;
         example: APIV1Read.ExampleEndpointCall;
         availableExampleClients: CodeExampleClient[];
         selectedExampleClient: CodeExampleClient;
@@ -27,15 +32,15 @@ export declare namespace EndpointContentCodeSnippets {
         hoveredResponsePropertyPath: JsonPropertyPath | undefined;
         requestHeight: number;
         responseHeight: number;
-        slug: string;
     }
 }
 
 const TITLED_EXAMPLE_PADDING = 43;
 
 const UnmemoizedEndpointContentCodeSnippets: React.FC<EndpointContentCodeSnippets.Props> = ({
+    apiSection,
+    apiDefinition,
     endpoint,
-    package: package_,
     example,
     availableExampleClients,
     selectedExampleClient,
@@ -46,9 +51,7 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<EndpointContentCodeSnippet
     hoveredResponsePropertyPath,
     requestHeight,
     responseHeight,
-    slug,
 }) => {
-    const { apiSection } = useApiDefinitionContext();
     return (
         <div className="grid min-h-0 flex-1 grid-rows-[repeat(auto-fit,_minmax(0,_min-content))] gap-6">
             <TitledExample
@@ -67,10 +70,8 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<EndpointContentCodeSnippet
                     <>
                         <ApiPlaygroundButton
                             endpoint={endpoint}
-                            package={package_}
-                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                            apiId={apiSection!.api}
-                            slug={slug}
+                            apiSection={apiSection}
+                            apiDefinition={apiDefinition}
                         />
                         {availableExampleClients.length > 1 ? (
                             <CodeExampleClientDropdown

diff --git a/packages/ui/app/src/api-page/endpoints/EndpointContentLeft.tsx b/packages/ui/app/src/api-page/endpoints/EndpointContentLeft.tsx
@@ -1,5 +1,5 @@
-import { APIV1Read, DocsV1Read } from "@fern-api/fdr-sdk";
-import { ResolvedEndpointDefinition } from "@fern-ui/app-utils";
+import { APIV1Read } from "@fern-api/fdr-sdk";
+import { ResolvedEndpointDefinition, ResolvedNavigationItemApiSection } from "@fern-ui/app-utils";
 import { useBooleanState } from "@fern-ui/react-commons";
 import { camelCase, sortBy, upperFirst } from "lodash-es";
 import { memo } from "react";
@@ -22,7 +22,7 @@ export declare namespace EndpointContentLeft {
     export interface Props {
         endpoint: ResolvedEndpointDefinition;
         subpackageTitle: string | undefined;
-        apiSection: DocsV1Read.ApiSection;
+        apiSection: ResolvedNavigationItemApiSection;
         onHoverRequestProperty: (jsonPropertyPath: JsonPropertyPath, hovering: HoveringProps) => void;
         onHoverResponseProperty: (jsonPropertyPath: JsonPropertyPath, hovering: HoveringProps) => void;
         selectedError: APIV1Read.ErrorDeclarationV2 | undefined;

diff --git a/packages/ui/app/src/api-page/examples/curl-example/curlUtils.ts b/packages/ui/app/src/api-page/examples/curl-example/curlUtils.ts
@@ -32,7 +32,7 @@ export interface CurlLineJson {
 export type CurlLine = CurlLineParam | CurlLineJson;
 
 export function getCurlLines(
-    apiDefinition: APIV1Read.ApiDefinition,
+    auth: APIV1Read.ApiAuth | undefined,
     endpoint: ResolvedEndpointDefinition,
     example: APIV1Read.ExampleEndpointCall,
     jsonLines: JsonLine[]
@@ -76,8 +76,8 @@ export function getCurlLines(
         });
     }
 
-    if (apiDefinition.auth != null && endpoint.authed) {
-        visitDiscriminatedUnion(apiDefinition.auth, "type")._visit({
+    if (auth != null && endpoint.authed) {
+        visitDiscriminatedUnion(auth, "type")._visit({
             basicAuth: ({ usernameName = "username", passwordName = "password" }) => {
                 parts.push({
                     type: "param",

diff --git a/packages/ui/app/src/api-page/subpackages/ApiSubpackage.tsx b/packages/ui/app/src/api-page/subpackages/ApiSubpackage.tsx
@@ -1,28 +1,35 @@
 import { joinUrlSlugs } from "@fern-api/fdr-sdk";
-import { ResolvedSubpackage } from "@fern-ui/app-utils";
+import { ResolvedApiDefinitionPackage, ResolvedNavigationItemApiSection } from "@fern-ui/app-utils";
 import { ApiPackageContents } from "../ApiPackageContents";
 import { ApiPageMargins } from "../page-margins/ApiPageMargins";
 import { useApiPageCenterElement } from "../useApiPageCenterElement";
 
 export declare namespace ApiSubpackage {
     export interface Props {
-        subpackage: ResolvedSubpackage;
+        apiSection: ResolvedNavigationItemApiSection;
+        apiDefinition: ResolvedApiDefinitionPackage;
         isLastInParentPackage: boolean;
         anchorIdParts: string[];
     }
 }
 
-export const ApiSubpackage: React.FC<ApiSubpackage.Props> = ({ subpackage, isLastInParentPackage, anchorIdParts }) => {
-    const subpackageSlug = joinUrlSlugs(...subpackage.slug);
+export const ApiSubpackage: React.FC<ApiSubpackage.Props> = ({
+    apiSection,
+    apiDefinition,
+    isLastInParentPackage,
+    anchorIdParts,
+}) => {
+    const subpackageSlug = joinUrlSlugs(...apiDefinition.slug);
     const { setTargetRef } = useApiPageCenterElement({ slug: subpackageSlug });
     return (
         <>
             <ApiPageMargins>
                 <div ref={setTargetRef} data-route={`/${subpackageSlug}`.toLowerCase()} className="scroll-mt-16" />
             </ApiPageMargins>
-            {subpackage != null && (
+            {apiSection != null && (
                 <ApiPackageContents
-                    package={subpackage}
+                    apiSection={apiSection}
+                    apiDefinition={apiDefinition}
                     isLastInParentPackage={isLastInParentPackage}
                     anchorIdParts={anchorIdParts}
                 />