get navigation working on product click, lint fixes

Author: Sarah Bawabe

packages/fdr-sdk/src/navigation/NodeCollector.ts

@@ -3,9 +3,9 @@ import { once } from "es-toolkit/function";
 import { EMPTY_ARRAY } from "@fern-api/ui-core-utils";
 
 import { FernNavigation } from "./..";
+import { pruneProductNode } from "./utils/pruneProductNode";
 import { pruneVersionNode } from "./utils/pruneVersionNode";
 import { NavigationNodeWithMetadata } from "./versions";
-import { pruneProductNode } from "./utils/pruneProductNode";
 
 interface NavigationNodeWithMetadataAndParents {
   node: FernNavigation.NavigationNodeWithMetadata;
@@ -75,10 +75,12 @@ export class NodeCollector {
     }
   }
 
-  private defaultVersion: FernNavigation.VersionNode | undefined;
   private versionNodes: FernNavigation.VersionNode[] = [];
+  private defaultVersion: FernNavigation.VersionNode | undefined;
+
   private productNodes: FernNavigation.ProductNode[] = [];
   private defaultProduct: FernNavigation.ProductNode | undefined;
+
   constructor(rootNode: FernNavigation.NavigationNode | undefined) {
     if (rootNode == null) {
       return;
@@ -87,14 +89,21 @@ export class NodeCollector {
       if (node.type === "product") {
         this.productNodes.push(node);
         // Handle the default product
-       if (node.default && rootNode.type === "root") {
+        if (node.default && rootNode.type === "root") {
           const copy = JSON.parse(
             JSON.stringify(node)
           ) as FernNavigation.ProductNode;
-          this.defaultProduct = pruneProductNode(copy, rootNode.slug, node.slug);
-          FernNavigation.traverseDF(this.defaultProduct, (node, innerParents) => {
-            this.visitNode(node, [...parents, ...innerParents], true);
-          });
+          this.defaultProduct = pruneProductNode(
+            copy,
+            rootNode.slug,
+            node.slug
+          );
+          FernNavigation.traverseDF(
+            this.defaultProduct,
+            (node, innerParents) => {
+              this.visitNode(node, [...parents, ...innerParents], true);
+            }
+          );
         }
       }
 

packages/fdr-sdk/src/navigation/utils/findNode.ts

@@ -22,6 +22,10 @@ export declare namespace Node {
     root: FernNavigation.RootNode;
     products: readonly FernNavigation.ProductNode[];
     currentProduct: FernNavigation.ProductNode | undefined;
+    /**
+     * This is true if the current product is the default product node (without the product slug prefix)
+     */
+    isCurrentProductDefault: boolean;
     versions: readonly FernNavigation.VersionNode[];
     currentVersion: FernNavigation.VersionNode | undefined;
     /**
@@ -69,39 +73,49 @@ export function findNode(
 
   // if the slug points to a node that doesn't exist, we should redirect to the first likely node
   if (found == null) {
-    let maybeVersionNode: FernNavigation.RootNode | FernNavigation.VersionNode =
-      root;
-
-    // the 404 behavior should be version-aware
-    for (const versionNode of collector.getVersionNodes()) {
-      if (slug.startsWith(versionNode.slug)) {
-        maybeVersionNode = versionNode;
+    let maybeProductOrVersionNode:
+      | FernNavigation.RootNode
+      | FernNavigation.ProductNode
+      | FernNavigation.VersionNode = root;
+    let foundProductNode = false;
+
+    // the 404 behavior should be product-aware
+    for (const productNode of collector.getProductNodes()) {
+      if (slug.startsWith(productNode.slug)) {
+        maybeProductOrVersionNode = productNode;
+        foundProductNode = true;
         break;
       }
     }
 
+    // if we didn't find a product node, try to find a version node
+    if (!foundProductNode) {
+      // the 404 behavior should be version-aware
+      for (const versionNode of collector.getVersionNodes()) {
+        if (slug.startsWith(versionNode.slug)) {
+          maybeProductOrVersionNode = versionNode;
+          break;
+        }
+      }
+    }
+
     return {
       type: "notFound",
-      redirect: maybeVersionNode.pointsTo,
-      authed: maybeVersionNode.authed,
+      redirect: maybeProductOrVersionNode.pointsTo,
+      authed: maybeProductOrVersionNode.authed,
     };
   }
 
   const sidebar = found.parents.find(isSidebarRootNode);
   const currentProductGroup = found.parents.find(isProductGroupNode);
-  // TODO: remove console.log
-  console.log("currentProduct", currentProductGroup);
-  const productChildren = currentProductGroup?.children;
+  const currentProduct = found.parents.find(isProductNode);
+
   const currentVersion = found.parents.find(isVersionNode);
   const unversionedNode = found.parents.find(isUnversionedNode);
   const versionChild = (currentVersion ?? unversionedNode)?.child;
   const landingPage = (currentProductGroup ?? currentVersion ?? unversionedNode)
     ?.landingPage;
 
-  const currentProduct = productChildren?.find(isProductNode);
-  // TODO: remove console.log
-  console.log("currentProduct", currentProduct);
-
   const tabbedNode =
     found.parents.find(isTabbedNode) ??
     // fallback to the version child because the current node may be a landing page
@@ -121,13 +135,14 @@ export function findNode(
     );
     const currentTabNode =
       tabbedNodeIndex !== -1 ? parentsAndNode[tabbedNodeIndex + 1] : undefined;
+
     const products = collector.getProductNodes().map((node) => {
       if (node.default) {
-        // if we're currently viewing the default version, we may be viewing the non-pruned version
+        // if we're currently viewing the default product, we may be viewing the non-pruned product node
         if (node.id === currentProduct?.id) {
           return currentProduct;
         }
-        // otherwise, we should always use the pruned version node
+        // otherwise, we should always use the pruned product node
         return collector.defaultProductNode ?? node;
       }
       return node;
@@ -164,6 +179,9 @@ export function findNode(
       currentProduct,
       versions, // this is used to render the version switcher
       currentVersion,
+      isCurrentProductDefault: currentProduct?.default
+        ? currentProduct === collector.defaultProductNode
+        : false,
       isCurrentVersionDefault: currentVersion?.default
         ? currentVersion === collector.defaultVersionNode
         : false,

packages/fdr-sdk/src/navigation/versions/latest/isProductGroupNode.ts

@@ -1,5 +1,7 @@
 import { NavigationNode, ProductGroupNode } from ".";
 
-export function isProductGroupNode(node: NavigationNode): node is ProductGroupNode {
+export function isProductGroupNode(
+  node: NavigationNode
+): node is ProductGroupNode {
   return node.type === "productgroup";
 }

packages/fern-docs/bundle/src/components/FernProductDropdown.tsx

@@ -29,10 +29,8 @@ export async function ProductDropdown({ loader }: { loader: DocsLoader }) {
         ? FernNavigation.toDefaultSlug(slug, root.slug, product.slug)
         : undefined,
       icon: product.icon ? <FaIconServer icon={product.icon} /> : undefined,
-      authed: product.authed,
-      default: product.default,
-      hidden: product.hidden,
       subtitle: product.subtitle,
+      default: product.default,
     };
   });
   return <ProductDropdownClient products={productOptions} />;

packages/fern-docs/bundle/src/components/header/ProductDropdown.tsx

@@ -1,12 +1,8 @@
 "use client";
 
-import { ChevronDown, Lock } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 
-import {
-  Availability,
-  AvailabilityBadge,
-  FernProductDropdown,
-} from "@fern-docs/components";
+import { FernDropdown } from "@fern-docs/components";
 import { slugToHref } from "@fern-docs/utils";
 
 import { useCurrentProductId, useCurrentProductSlug } from "@/state/navigation";
@@ -18,10 +14,7 @@ export interface ProductDropdownItem {
   slug: string;
   defaultSlug?: string;
   icon?: React.ReactNode;
-  authed?: boolean;
   default: boolean;
-  availability?: Availability;
-  hidden?: boolean;
 }
 
 export function ProductDropdownClient({
@@ -36,47 +29,23 @@ export function ProductDropdownClient({
     products.find((product) => product.default);
 
   return (
-    <FernProductDropdown
+    <FernDropdown
       value={currentProductId}
       options={products.map(
-        ({
-          icon,
-          productId,
-          title,
-          availability,
-          slug,
-          defaultSlug,
-          authed,
-          hidden,
-          subtitle,
-        }) => ({
+        ({ icon, productId, title, slug, subtitle, defaultSlug }) => ({
           type: "product",
           id: productId,
           title,
           subtitle,
-          label: (
-            <div className="flex items-center gap-2">
-              {title}
-              {availability != null ? (
-                <AvailabilityBadge availability={availability} size="sm" />
-              ) : null}
-            </div>
-          ),
           value: productId,
-          disabled: availability == null,
           href: slugToHref(
             pickProductSlug({
               currentProductSlug,
               defaultSlug,
               slug,
             })
           ),
-          icon: authed ? (
-            <Lock className="text-(color:--grayscale-a9) size-4 self-center" />
-          ) : (
-            icon
-          ),
-          className: hidden ? "opacity-50" : undefined,
+          icon,
         })
       )}
       contentProps={{
@@ -89,7 +58,7 @@ export function ProductDropdownClient({
         <p className="product-item-title">{currentProduct?.title}</p>
         <ChevronDown className="size-icon transition-transform data-[state=open]:rotate-180" />
       </div>
-    </FernProductDropdown>
+    </FernDropdown>
   );
 
   function pickProductSlug({

packages/fern-docs/bundle/src/components/header/ProductDropdownClient.tsx

@@ -228,6 +228,7 @@ export default async function SharedPage({
         versionId={found.currentVersion?.versionId}
         versionSlug={found.currentVersion?.slug}
         versionIsDefault={found.isCurrentVersionDefault}
+        productIsDefault={found.isCurrentProductDefault}
       />
       <SetIsLandingPage value={found.node.type === "landingPage"} />
       <DocsMainContent

packages/fern-docs/bundle/src/components/shared-page.tsx

@@ -90,6 +90,9 @@ const currentVersionSlugAtom = atom<FernNavigation.Slug | undefined>(undefined);
 // if true, the current version is the default version
 const currentVersionIsDefaultAtom = atom<boolean>(false);
 
+// if true, the current product is the default product
+const currentProductIsDefaultAtom = atom<boolean>(false);
+
 export function useCurrentSidebarRootNodeId() {
   return useAtomValue(currentSidebarRootNodeIdAtom);
 }
@@ -131,6 +134,7 @@ export function SetCurrentNavigationNode({
   versionId,
   versionSlug,
   versionIsDefault,
+  productIsDefault,
 }: {
   sidebarRootNodeId?: FernNavigation.NodeId;
   nodeId?: FernNavigation.NodeId;
@@ -140,6 +144,7 @@ export function SetCurrentNavigationNode({
   versionId?: FernNavigation.VersionId;
   versionSlug?: FernNavigation.Slug;
   versionIsDefault?: boolean;
+  productIsDefault?: boolean;
 }) {
   const useStore = React.useContext(RootNodeStoreContext);
   const dispatch = useStore((s) => s.dispatch);
@@ -151,6 +156,7 @@ export function SetCurrentNavigationNode({
   const setCurrentVersionId = useSetAtom(currentVersionIdAtom);
   const setCurrentVersionSlug = useSetAtom(currentVersionSlugAtom);
   const setCurrentVersionIsDefault = useSetAtom(currentVersionIsDefaultAtom);
+  const setCurrentProductIsDefault = useSetAtom(currentProductIsDefaultAtom);
   useIsomorphicLayoutEffect(() => {
     setCurrentSidebarRootNodeId(sidebarRootNodeId);
     setCurrentNodeId(nodeId);
@@ -160,6 +166,7 @@ export function SetCurrentNavigationNode({
     setCurrentVersionId(versionId);
     setCurrentVersionSlug(versionSlug);
     setCurrentVersionIsDefault(versionIsDefault ?? false);
+    setCurrentProductIsDefault(productIsDefault ?? false);
   }, [
     nodeId,
     tabId,
@@ -169,6 +176,7 @@ export function SetCurrentNavigationNode({
     versionId,
     versionSlug,
     versionIsDefault,
+    productIsDefault,
   ]);
 
   useIsomorphicLayoutEffect(() => {

packages/fern-docs/bundle/src/state/navigation.tsx

@@ -25,6 +25,7 @@
     @apply py-2 lg:py-0;
     @apply rounded-2 bg-(color:--grayscale-a2) lg:bg-transparent;
   }
+
   .product-item-title {
     @apply hidden lg:block;
   }
@@ -39,24 +40,28 @@
     .fern-product-item-icon {
       @apply rounded-3/2 border-(color:--grayscale-a9) border;
       @apply m-1 flex h-[56px] w-[56px] shrink-0 items-center justify-center p-1;
+
       svg {
         @apply block h-[60%] w-[60%];
       }
     }
 
     /* Defines the styles for the product dropdown item when it is highlighted. */
     &[data-highlighted="true"] {
+      @apply text-(color:--accent) bg-(color:--grayscale-a2);
+
       .fern-product-item-icon {
         @apply border-(color:--accent) text-(color:--accent);
       }
-      @apply text-(color:--accent) bg-(color:--grayscale-a2);
     }
   }
+
   /* Defines the hover styles for the product dropdown item. */
   .fern-product-item:hover {
+    @apply text-(color:--accent) bg-(color:--accent-2);
+
     .fern-product-item-icon {
       @apply border-(color:--accent) text-(color:--accent);
     }
-    @apply text-(color:--accent) bg-(color:--accent-2);
   }
 }