APP-19740 refactor build step of navigation build (#482)

Co-authored-by: webspaceadam <[email protected]>
getflip · Dec 12, 2023 · 6bb45a3 · 6bb45a3 · vercel · Dec 12, 2023
1 parent 70406ad
commit 6bb45a3
Show file tree

Hide file tree

Showing 31 changed files with 874 additions and 1,418 deletions.
diff --git a/apps/swirl-docs/next.config.mjs b/apps/swirl-docs/next.config.mjs
@@ -19,7 +19,7 @@ const nextConfig = {
     defaultLocale: "en",
   },
   env: {
-    PASSWORD_PROTECT: true,
+    PASSWORD_PROTECT: "true",
   },
   // output: "standalone",
 };

diff --git a/apps/swirl-docs/src/components/Documentation/EndpointDescription.tsx b/apps/swirl-docs/src/components/Documentation/EndpointDescription.tsx
@@ -9,7 +9,7 @@ import { EndpointParameterFactory } from "./ParameterFactory";
 
 interface EndpointDescription {
   endpoint: ApiEndpoint;
-  endpointId: string;
+  endpointId?: string;
   path: string;
 }
 

diff --git a/apps/swirl-docs/src/components/HeaderNavigation/Mobile/List.tsx b/apps/swirl-docs/src/components/HeaderNavigation/Mobile/List.tsx
@@ -12,7 +12,7 @@ export default function List({
   return (
     <ul
       className={classNames(
-        "z-40 w-full h-[calc(100vh_-_64px)] max-h-[calc(100vh_-_64px)] bg-white",
+        "z-40 w-full h-[calc(100vh_-_64px)] max-h-[calc(100vh_-_64px)] bg-white px-4",
         { block: isOpen },
         { hidden: !isOpen }
       )}

diff --git a/apps/swirl-docs/src/components/HeaderNavigation/Mobile/ListItems.tsx b/apps/swirl-docs/src/components/HeaderNavigation/Mobile/ListItems.tsx
@@ -27,8 +27,7 @@ function ChevronButton({
       aria-controls={`accordion-panel-${ariaId}`}
       onClick={toggle}
       className={classNames(
-        "flex justify-between py-2 w-full text-base font-normal",
-        isNestedNavGroup ? "pl-10 pr-4" : "px-4"
+        "flex justify-between py-2 w-full text-base font-normal"
       )}
     >
       <span>{title}</span>
@@ -63,7 +62,7 @@ export function TopLevelNavLink({
         passHref
         aria-current={url === currentPath ? "page" : "false"}
         onClick={handleCloseMenu}
-        className="flex justify-between py-3 font-normal px-4 w-full text-base capitalize"
+        className="flex justify-between py-3 font-normal w-full text-base capitalize"
       >
         {title}
       </Link>
@@ -90,7 +89,7 @@ export function ExpandableNavGroup({
       <ul
         id={`accordion-panel-${ariaId}`}
         aria-labelledby={`accordion-${ariaId}`}
-        className={classNames({
+        className={classNames("pl-4", {
           block: isExpanded,
           hidden: !isExpanded,
         })}
@@ -130,7 +129,7 @@ export function NestedNavGroup({
         <ul
           id={`accordion-panel-${ariaId}`}
           aria-labelledby={`accordion-${ariaId}`}
-          className={classNames({
+          className={classNames("pl-4", {
             block: isExpanded,
             hidden: !isExpanded,
           })}
@@ -164,7 +163,7 @@ export function NestedNavLink({
         onClick={() => {
           handleCloseMenu();
         }}
-        className="flex justify-between py-2 px-10 w-full capitalize"
+        className="flex justify-between py-2 w-full capitalize"
       >
         {title}
       </Link>

diff --git a/apps/swirl-docs/src/components/Layout/DocumentationLayout.tsx b/apps/swirl-docs/src/components/Layout/DocumentationLayout.tsx
@@ -8,8 +8,9 @@ import classNames from "classnames";
 import DocumentationLayoutContext, {
   TDocumentationLayout,
 } from "./DocumentationLayoutContext";
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useRef } from "react";
 import MDXDocument from "./MDXDocument";
+import { useRouter } from "next/router";
 
 type DocumentationLayoutProps = {
   data: TDocumentationLayout;
@@ -26,6 +27,21 @@ export function DocumentationLayout({
 }: DocumentationLayoutProps) {
   const [tocItems] = useToC(data.mdxContent?.document!, false);
 
+  const scrollContainer = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    function handler() {
+      scrollContainer.current?.scrollTo(0, 0);
+    }
+
+    router.events.on("routeChangeComplete", handler);
+
+    return () => {
+      router.events.off("routeChangeComplete", handler);
+    };
+  }, [router.events]);
+
   return (
     <DocumentationLayoutContext.Provider value={data}>
       <div className="grid grid-cols-1 lg:grid-cols-documentation-layout h-full overflow-hidden">
@@ -35,6 +51,7 @@ export function DocumentationLayout({
             "flex flex-col items-center justify-between",
             "w-full h-full overflow-auto scroll-p-4"
           )}
+          ref={scrollContainer}
         >
           <main
             id="main"

diff --git a/apps/swirl-docs/src/components/Layout/SidebarNavigation.tsx b/apps/swirl-docs/src/components/Layout/SidebarNavigation.tsx
@@ -1,21 +1,20 @@
-import { AnimatePresence, motion } from "framer-motion";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import {
   Tag,
   mapHttpMethodToTagContent,
   mapHttpMethodToTagScheme,
 } from "../Tags";
-import { forwardRef, useEffect, useRef, useState } from "react";
 
-import { HttpMethods } from "oas/dist/rmoas.types";
-import Image from "next/image";
-import Link from "next/link";
+import icon from "@getflip/swirl-icons/icons/ChevronRight28.svg";
 import { NavItem } from "@swirl/lib/navigation/";
 import { apiDocsNavItems } from "@swirl/lib/navigation/src/data/apiDocs.data";
-import { apiSpecsNavItems } from "@swirl/lib/navigation/src/data/apiSpecs.data";
 import classNames from "classnames";
-import icon from "@getflip/swirl-icons/icons/ChevronRight28.svg";
-import { useDocumentationLayoutContext } from "./DocumentationLayoutContext";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { HttpMethods } from "oas/dist/rmoas.types";
+import { useDocumentationLayoutContext } from "./DocumentationLayoutContext";
+import { AnimatePresence, motion } from "framer-motion";
 
 const CategoryNavSubItem = ({
   navItem,
@@ -28,50 +27,49 @@ const CategoryNavSubItem = ({
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const list = {
-    hidden: { opacity: 0, height: 0 },
-    show: {
-      height: "auto",
-      opacity: 1,
-      transition: {
-        when: "beforeChildren",
-        staggerChildren: 0.01,
-      },
-    },
-  };
+  const activePathWithoutHash = activePath.split("#")[0] + "/";
+  const navItemPath = navItem.url.split("#")[0] + "/";
+
+  const isActive =
+    activePathWithoutHash.startsWith(navItemPath) ||
+    (navItem.children || []).some((child) =>
+      activePathWithoutHash.startsWith(child.url.split("#")[0] + "/")
+    );
 
   useEffect(() => {
-    if (activePath.includes(navItem.url)) {
-      setIsExpanded(true);
-    }
-  }, [navItem.url, activePath]);
+    setIsExpanded(isActive);
+  }, [isActive]);
 
   return (
     <>
-      <li
-        className={classNames(
-          "flex flex-col justify-center",
-          { "h-10 max-h-10": !isExpanded },
-          { "h-full": isExpanded }
-        )}
-      >
-        <div className="flex justify-between items-center h-10">
-          <Link
-            href={`${navItem.url}`}
-            className={classNames(
-              "text-sm capitalize w-full",
-              "hover:text-border-info",
-              {
-                "text-text-default": !isCurrentlyInView,
-                "text-border-info": isCurrentlyInView,
-              }
-            )}
-          >
-            <span>{navItem.title.replaceAll("-", " ")}</span>
-          </Link>
+      <li className={classNames("flex flex-col justify-center")}>
+        <div className="flex justify-between items-center py-2">
+          {navItem.isRoot ? (
+            <Link
+              href={`${navItem.url}`}
+              className={classNames(
+                "text-sm capitalize w-full",
+                "hover:text-border-info",
+                {
+                  "text-text-default": !isCurrentlyInView,
+                  "text-border-info":
+                    isCurrentlyInView && !navItem.tag && !navItem.children,
+                  "font-semibold": isActive,
+                }
+              )}
+            >
+              <span>{navItem.title.replaceAll("-", " ")}</span>
+            </Link>
+          ) : (
+            <WrappingAnchor
+              href={navItem.url}
+              item={navItem}
+              isCurrentPath={activePath.includes(navItem.url)}
+            />
+          )}
           {navItem.children && (
             <button
-              aria-label="Expand"
+              aria-label="Toggle"
               className="flex justify-center items-center text-text-subdued"
               onClick={() => setIsExpanded(!isExpanded)}
               aria-expanded={isExpanded}
@@ -92,35 +90,23 @@ const CategoryNavSubItem = ({
             </button>
           )}
         </div>
-      </li>
-      <li>
         <AnimatePresence>
-          {isExpanded && (
+          {navItem.children && isExpanded && (
             <motion.ul
-              className={classNames(
-                "flex flex-col gap-y-4",
-                "border-l-[1px] border-border-default overflow-hidden",
-                { "h-0": !isExpanded },
-                { "h-auto": isExpanded }
-              )}
-              initial="hidden"
+              className="pl-4"
+              key={navItem.url + "-children"}
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: "auto" }}
               exit={{ opacity: 0, height: 0 }}
-              animate={isExpanded ? "show" : "hidden"}
-              variants={list}
             >
-              {navItem.children?.map((item, index) => {
-                const isCurrentPath = activePath.includes(item.url);
-
-                return (
-                  <motion.li key={index} className="flex items-center ml-6">
-                    <WrappingAnchor
-                      href={`${item.url}`}
-                      item={item}
-                      isCurrentPath={isCurrentPath}
-                    />
-                  </motion.li>
-                );
-              })}
+              {navItem.children.map((item) => (
+                <CategoryNavSubItem
+                  activePath={activePath}
+                  isCurrentlyInView={false}
+                  key={item.url}
+                  navItem={item}
+                ></CategoryNavSubItem>
+              ))}
             </motion.ul>
           )}
         </AnimatePresence>
@@ -158,13 +144,14 @@ const WrappingAnchor = forwardRef<
         {
           "text-border-info": isCurrentPath,
           "text-text-default": !isCurrentPath,
+          "-ml-4": item.tag,
         }
       )}
     >
-      {item.description && (
+      {item.tag && (
         <Tag
-          content={mapHttpMethodToTagContent(item.description!)}
-          scheme={mapHttpMethodToTagScheme(item.description as HttpMethods)}
+          content={mapHttpMethodToTagContent(item.tag)}
+          scheme={mapHttpMethodToTagScheme(item.tag as HttpMethods)}
           httpTag
         />
       )}
@@ -214,7 +201,7 @@ export function SidebarNavigation() {
             </h4>
           </div>
           <ul>
-            {apiSpecsNavItems?.map((navItem: NavItem, index) => {
+            {categoryLinkList?.map((navItem: NavItem, index) => {
               return (
                 <CategoryNavSubItem
                   isCurrentlyInView={activePath.includes(navItem.url)}
@@ -227,20 +214,6 @@ export function SidebarNavigation() {
           </ul>
         </>
       )}
-      {!router.asPath.includes("/api-docs") && (
-        <ul className="mt-6">
-          {categoryLinkList?.map((navItem: NavItem, index) => {
-            return (
-              <CategoryNavSubItem
-                isCurrentlyInView={activePath.includes(navItem.url)}
-                key={navItem.title + `-${index}`}
-                navItem={navItem}
-                activePath={activePath}
-              />
-            );
-          })}
-        </ul>
-      )}
 
       {router.asPath.includes("/api-docs") && (
         <>
@@ -264,6 +237,21 @@ export function SidebarNavigation() {
           </div>
         </>
       )}
+
+      {!router.asPath.includes("/api-docs") && (
+        <ul className="mt-6">
+          {categoryLinkList?.map((navItem: NavItem, index) => {
+            return (
+              <CategoryNavSubItem
+                isCurrentlyInView={activePath.includes(navItem.url)}
+                key={navItem.title + `-${index}`}
+                navItem={navItem}
+                activePath={activePath}
+              />
+            );
+          })}
+        </ul>
+      )}
     </nav>
   );
 }

diff --git a/apps/swirl-docs/src/lib/docs/index.ts b/apps/swirl-docs/src/lib/docs/index.ts
@@ -2,3 +2,4 @@ export * from "./src/multipleDocs";
 export * from "./src/oasBuilder";
 export * from "./src/docs.model";
 export * from "./src/utils";
+export * from "./src/MergedYamlOperations";