Merge remote-tracking branch 'origin' into kien/cnct-1917-docs

Author: kien-ngo

.changeset/sixty-seals-tell.md

@@ -61,6 +61,7 @@ module.exports = {
               "useToast",
               "useClipboard",
               "Badge",
+              "Stack",
               // also the types
               "ButtonProps",
               "BadgeProps",
@@ -73,6 +74,7 @@ module.exports = {
               "MenuItemProps",
               "AspectRatioProps",
               "BadgeProps",
+              "StackProps",
             ],
             message:
               'Use the equivalent component from "tw-components" instead.',

apps/dashboard/.eslintrc.js

@@ -110,13 +110,13 @@
     "@next/eslint-plugin-next": "14.2.13",
     "@playwright/test": "1.47.2",
     "@storybook/addon-essentials": "8.3.2",
-    "@storybook/addon-interactions": "8.3.2",
+    "@storybook/addon-interactions": "8.3.4",
     "@storybook/addon-links": "8.3.2",
     "@storybook/addon-onboarding": "8.3.2",
     "@storybook/addon-viewport": "8.3.2",
-    "@storybook/blocks": "8.3.2",
+    "@storybook/blocks": "8.3.4",
     "@storybook/nextjs": "8.3.2",
-    "@storybook/react": "8.3.2",
+    "@storybook/react": "8.3.4",
     "@storybook/test": "8.3.2",
     "@types/color": "^3.0.6",
     "@types/node": "20.14.9",
@@ -135,7 +135,7 @@
     "eslint": "8.57.0",
     "eslint-config-biome": "1.8.4",
     "eslint-plugin-react-compiler": "0.0.0-experimental-ca16900-20240916",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "knip": "^5.30.5",
     "next-sitemap": "^4.2.3",
     "postcss": "8.4.47",

apps/dashboard/package.json

@@ -4,25 +4,45 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { ChevronDownIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { cn } from "../../lib/utils";
-import { NavLink } from "../ui/NavLink";
-import type { SidebarLink } from "./Sidebar";
+import {
+  RenderSidebarLinks,
+  type SidebarBaseLink,
+  type SidebarLink,
+} from "./Sidebar";
 
 export function MobileSidebar(props: {
-  links?: SidebarLink[];
+  links: SidebarLink[];
   footer?: React.ReactNode;
   trigger?: React.ReactNode;
   triggerClassName?: string;
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const pathname = usePathname();
-  const activeLink = props.links?.find((link) => {
-    if (link.exactMatch) {
-      return link.href === pathname;
+
+  const activeLink = useMemo(() => {
+    function isActive(link: SidebarBaseLink) {
+      if (link.exactMatch) {
+        return link.href === pathname;
+      }
+      return pathname?.startsWith(link.href);
+    }
+
+    for (const link of props.links) {
+      if ("group" in link) {
+        for (const subLink of link.links) {
+          if (isActive(subLink)) {
+            return subLink;
+          }
+        }
+      } else {
+        if (isActive(link)) {
+          return link;
+        }
+      }
     }
-    return pathname?.startsWith(link.href);
-  });
+  }, [props.links, pathname]);
 
   const defaultTrigger = (
     <Button
@@ -41,31 +61,15 @@ export function MobileSidebar(props: {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>{props.trigger || defaultTrigger}</DialogTrigger>
       <DialogContent
-        className="rounded-t-xl rounded-b-none p-4"
+        className="no-scrollbar max-h-[80vh] overflow-auto rounded-t-xl rounded-b-none p-4"
         dialogCloseClassName="hidden"
         onClick={(e) => {
           if (e.target instanceof HTMLAnchorElement) {
             setIsOpen(false);
           }
         }}
       >
-        <div className="flex flex-col gap-2">
-          {props.links?.map((link) => {
-            return (
-              <Button size="sm" variant="ghost" asChild key={link.href}>
-                <NavLink
-                  href={link.href}
-                  className="!text-left flex h-auto justify-start gap-2 py-3"
-                  activeClassName="bg-accent"
-                  exactMatch={link.exactMatch}
-                  tracking={link.tracking}
-                >
-                  {link.label}
-                </NavLink>
-              </Button>
-            );
-          })}
-        </div>
+        <RenderSidebarLinks links={props.links} />
         {props.footer}
       </DialogContent>
     </Dialog>

apps/dashboard/src/@/components/blocks/MobileSidebar.tsx

@@ -3,7 +3,7 @@ import type React from "react";
 import { cn } from "../../lib/utils";
 import { NavLink } from "../ui/NavLink";
 
-export type SidebarLink = {
+export type SidebarBaseLink = {
   href: string;
   label: React.ReactNode;
   exactMatch?: boolean;
@@ -14,6 +14,13 @@ export type SidebarLink = {
   };
 };
 
+export type SidebarLink =
+  | SidebarBaseLink
+  | {
+      group: string;
+      links: SidebarBaseLink[];
+    };
+
 type SidebarContentProps = {
   header?: React.ReactNode;
   links: SidebarLink[];
@@ -31,23 +38,42 @@ export function Sidebar(props: SidebarContentProps) {
       <div className="pt-7">
         {props.header}
         <div className="flex flex-col gap-1">
-          {props.links?.map((link) => {
-            const isExternal = link.href.startsWith("http");
-            return (
-              <NavLink
-                key={link.href}
-                href={link.href}
-                className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-muted"
-                activeClassName="text-foreground"
-                exactMatch={link.exactMatch}
-              >
-                {link.label}
-                {isExternal && <ExternalLinkIcon className="size-3" />}
-              </NavLink>
-            );
-          })}
+          <RenderSidebarLinks links={props.links} />
         </div>
       </div>
     </aside>
   );
 }
+
+export function RenderSidebarLinks(props: { links: SidebarLink[] }) {
+  return (
+    <div className="flex flex-col gap-1">
+      {props.links.map((link, i) => {
+        if ("group" in link) {
+          return (
+            <div className={cn({ "mt-6": i !== 0 })}>
+              <p className={cn("px-3 py-2 font-medium text-foreground")}>
+                {link.group}
+              </p>
+              <RenderSidebarLinks links={link.links} />
+            </div>
+          );
+        }
+
+        const isExternal = link.href.startsWith("http");
+        return (
+          <NavLink
+            key={link.href}
+            href={link.href}
+            className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-muted"
+            activeClassName="text-foreground"
+            exactMatch={link.exactMatch}
+          >
+            {link.label}
+            {isExternal && <ExternalLinkIcon className="size-3" />}
+          </NavLink>
+        );
+      })}
+    </div>
+  );
+}