notionsoft-ui 1.0.33 → 1.0.35

package/src/notion-ui/sidebar/sidebar.stories.tsx

@@ -0,0 +1,181 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { I18nextProvider } from "react-i18next";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import { LucideCircleArrowOutDownLeft } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { SidebarItem } from "@/components/notion-ui/sidebar/sidebar-item";
+import Sidebar, { Separator } from "@/components/notion-ui/sidebar/sidebar";
+import Button from "@/components/notion-ui/button";
+
+/* ------------------ i18n Mock ------------------ */
+i18n.use(initReactI18next).init({
+  lng: "en",
+  fallbackLng: "en",
+  resources: {
+    en: {
+      translation: {
+        app_name: "My App",
+        dashboard: "Dashboard",
+        settings: "Settings",
+        users: "Users",
+        roles: "Roles",
+        exit_dashb: "Exit",
+      },
+    },
+  },
+});
+
+/* ------------------ Mock Data ------------------ */
+
+const permissions = new Map([
+  [
+    "users",
+    {
+      id: 1,
+      visible: true,
+      permission: "users",
+      icon: "icons/users.svg",
+      sub: new Map([
+        [1, { id: 1, name: "roles", is_category: true }],
+        [2, { id: 2, name: "permissions", is_category: true }],
+      ]),
+    },
+  ],
+  [
+    "reports",
+    {
+      id: 2,
+      visible: true,
+      permission: "reports",
+      icon: "icons/reports.svg",
+      sub: new Map(),
+    },
+  ],
+]);
+
+/* ------------------ Story Component ------------------ */
+
+function StorySidebar() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const navigateTo = useCallback((path: string) => {
+    console.log("Navigate:", path);
+  }, []);
+
+  const sidebarItems = useMemo(() => {
+    return (
+      <>
+        <SidebarItem
+          path="/dashboard"
+          permission={{
+            id: 0,
+            visible: true,
+            permission: "dashboard",
+            icon: "icons/home.svg",
+            sub: new Map(),
+          }}
+          isActive
+          navigateTo={navigateTo}
+          translate={(k) => i18n.t(k)}
+          icon={{
+            apiConfig: {
+              src: "https://www.svgrepo.com/show/521994/bag.svg",
+            },
+          }}
+        />
+
+        {Array.from(permissions.values()).map((perm) => (
+          <SidebarItem
+            key={perm.permission}
+            path={`/dashboard/${perm.permission}`}
+            permission={perm}
+            isActive={false}
+            navigateTo={navigateTo}
+            translate={(k) => i18n.t(k)}
+            icon={{
+              apiConfig: {
+                src: "https://www.svgrepo.com/show/521994/bag.svg",
+              },
+            }}
+          />
+        ))}
+
+        <Separator className="my-4" />
+
+        <SidebarItem
+          path="/dashboard/settings"
+          permission={{
+            id: 99,
+            visible: true,
+            permission: "settings",
+            icon: "icons/settings.svg",
+            sub: new Map(),
+          }}
+          isActive={false}
+          navigateTo={navigateTo}
+          translate={(k) => i18n.t(k)}
+          icon={{
+            apiConfig: {
+              src: "https://www.svgrepo.com/show/521994/bag.svg",
+            },
+          }}
+        />
+      </>
+    );
+  }, [navigateTo]);
+
+  return (
+    <Sidebar collapsed={collapsed} setCollapsed={setCollapsed}>
+      <Sidebar.Header>
+        <img
+          src="https://placehold.co/48x40"
+          className="w-12 h-10 rounded-lg"
+        />
+        <h1 className={`text-sm font-semibold ${collapsed && "lg:hidden"}`}>
+          {i18n.t("app_name")}
+        </h1>
+      </Sidebar.Header>
+
+      <Sidebar.Content className="pt-5">{sidebarItems}</Sidebar.Content>
+
+      <Sidebar.Footer>
+        <Button
+          variant="icon"
+          onClick={() => console.log("Exit")}
+          className="mb-4 mx-auto text-xs font-semibold"
+        >
+          <LucideCircleArrowOutDownLeft className="size-[18px]" />
+          <span className={collapsed ? "lg:hidden" : ""}>
+            {i18n.t("exit_dashb")}
+          </span>
+        </Button>
+      </Sidebar.Footer>
+    </Sidebar>
+  );
+}
+
+/* ------------------ Storybook Meta ------------------ */
+
+const meta: Meta = {
+  title: "Layout/AppSidebar",
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj = {
+  render: () => (
+    <MemoryRouter initialEntries={["/dashboard"]}>
+      <I18nextProvider i18n={i18n}>
+        <Routes>
+          <Route path="*" element={<StorySidebar />} />
+        </Routes>
+      </I18nextProvider>
+    </MemoryRouter>
+  ),
+};

package/src/notion-ui/sidebar/sidebar.tsx

@@ -0,0 +1,284 @@
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import { cn } from "@/utils/cn";
+import { AlignLeft, type LucideIcon } from "lucide-react";
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+  collapsed?: boolean;
+  setCollapsed?: (open: boolean) => void;
+  mobileHamburgerIcon?: {
+    icon: LucideIcon;
+    className?: string;
+    onClick?: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+  };
+  desktopHamburgerIcon?: {
+    icon: LucideIcon;
+    className?: string;
+    onClick?: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+  };
+  classNames?: {
+    wrapperClassName?: string;
+  };
+}
+interface SidebarExpandEventDetail {
+  hasChildren: boolean;
+}
+type SidebarCompound = React.FC<SidebarProps> & {
+  Header: typeof SidebarHeader;
+  Footer: typeof SidebarFooter;
+  Content: typeof SidebarContent;
+};
+
+const Sidebar: SidebarCompound = ({
+  children,
+  className,
+  collapsed,
+  setCollapsed,
+  mobileHamburgerIcon = { icon: AlignLeft },
+  desktopHamburgerIcon = { icon: AlignLeft },
+  classNames,
+  ...rest
+}) => {
+  const { wrapperClassName } = classNames || {};
+  const [internalCollapsed, setInternalCollapsed] = useState<boolean>(() => {
+    const stored = localStorage.getItem("sidebar_collapsed");
+    return stored ? JSON.parse(stored) : false;
+  });
+  const sidebarRef = useRef<HTMLElement>(null); // This is already your nav ref
+  const open = collapsed ?? internalCollapsed;
+  const [hideSiderbar, setHideSiderbar] = useState(false);
+
+  useEffect(() => {
+    const handleExpandEvent = (e: Event) => {
+      const customEvent = e as CustomEvent;
+      const detail = customEvent.detail as SidebarExpandEventDetail;
+      if (detail?.hasChildren) {
+        if (open) {
+          if (setCollapsed) {
+            // Controlled: call parent callback
+            setCollapsed(false);
+          } else {
+            // Uncontrolled: update internal state + localStorage
+            setInternalCollapsed(() => {
+              localStorage.setItem("sidebar_collapsed", JSON.stringify(false));
+              return false;
+            });
+          }
+        }
+      }
+    };
+
+    if (sidebarRef.current) {
+      sidebarRef.current.addEventListener(
+        "sidebar-item-expand",
+        handleExpandEvent
+      );
+    }
+
+    return () => {
+      if (sidebarRef.current) {
+        sidebarRef.current.removeEventListener(
+          "sidebar-item-expand",
+          handleExpandEvent
+        );
+      }
+    };
+  }, [open]);
+  const toggle = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
+    if (desktopHamburgerIcon.onClick) desktopHamburgerIcon.onClick(e);
+    if (setCollapsed) {
+      // Controlled: call parent callback
+      setCollapsed(!open);
+    } else {
+      // Uncontrolled: update internal state + localStorage
+      setInternalCollapsed((prev) => {
+        const newValue = !prev;
+        localStorage.setItem("sidebar_collapsed", JSON.stringify(newValue));
+        return newValue;
+      });
+    }
+  };
+
+  let header: React.ReactNode = null;
+  let footer: React.ReactNode = null;
+  let content: React.ReactNode = null;
+
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+
+    switch (child.type) {
+      case SidebarHeader:
+        header = child;
+        break;
+      case SidebarFooter:
+        footer = child;
+        break;
+      case SidebarContent:
+        content = child;
+        break;
+    }
+  });
+  // In Sidebar component, add this useEffect
+  useEffect(() => {
+    const closeAllDropdowns = () => {
+      if (open) {
+        // When sidebar is collapsed (w-12)
+        // Dispatch an event to tell all sidebar items to close their dropdowns
+        const closeEvent = new CustomEvent("sidebar-close-dropdowns", {
+          bubbles: true,
+          composed: true,
+          detail: { forceClose: true },
+        });
+
+        if (sidebarRef.current) {
+          sidebarRef.current.dispatchEvent(closeEvent);
+        }
+      }
+    };
+
+    closeAllDropdowns();
+  }, [open]); // Run whenever collapsed state changes
+
+  return (
+    <>
+      <div
+        onClick={() => setHideSiderbar(false)}
+        className={cn(
+          "fixed z-50 ltr:left-0 rtl:right-0 lg:hidden top-0 px-2 pt-1",
+          hideSiderbar
+            ? "w-screen h-screen bg-black/20" // Full screen with semi-transparent bg
+            : "w-auto h-auto", // Just icon size
+          wrapperClassName
+        )}
+      >
+        <mobileHamburgerIcon.icon
+          onClick={(e) => {
+            e.stopPropagation(); // Prevent event from bubbling to parent
+            if (mobileHamburgerIcon.onClick) mobileHamburgerIcon.onClick(e);
+            setHideSiderbar(true);
+          }}
+          className={cn(
+            `size-5 mt-2 text-tertiary hover:scale-105 transition-transform mx-auto cursor-pointer`,
+            hideSiderbar ? "hidden" : "block",
+            mobileHamburgerIcon.className
+          )}
+        />
+      </div>
+      <nav
+        ref={sidebarRef}
+        {...rest}
+        className={cn(
+          "overflow-x-hidden bg-card fixed grid lg:grid-rows-[auto_auto_1fr_auto] grid-rows-[auto_1fr_auto] overflow-hidden z-50 transition-all duration-200 dark:text-card-foreground text-primary-foreground h-screen",
+          // Mobile behavior
+          hideSiderbar
+            ? "ltr:left-0 rtl:right-0"
+            : "ltr:left-[-300px] rtl:right-[-300px]",
+          // Desktop behavior - always visible with proper width
+          "lg:relative! lg:left-0! lg:right-0! lg:w-[280px]!", // Default desktop width
+          // Collapsed state on desktop
+          open ? "lg:w-12!" : "lg:w-[280px]",
+          // Mobile width
+          `w-[280px]`, // Set a proper width for mobile too
+          className
+        )}
+      >
+        <desktopHamburgerIcon.icon
+          onClick={toggle}
+          className={cn(
+            `size-5 mt-2 text-tertiary hidden lg:block hover:scale-105 transition-transform mx-auto cursor-pointer`,
+            desktopHamburgerIcon.className
+          )}
+        />
+        {header}
+        {content}
+        {footer}
+      </nav>
+    </>
+  );
+};
+export interface SidebarContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+// Use forwardRef to accept ref prop
+export const SidebarContent = forwardRef<HTMLDivElement, SidebarContentProps>(
+  function SidebarContent({ children, className, ...rest }, ref) {
+    return (
+      <div
+        ref={ref} // Pass the ref here
+        {...rest}
+        className={cn(
+          "overflow-y-auto flex flex-col overflow-x-hidden pb-12",
+          className
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+SidebarContent.displayName = "SidebarContent";
+
+export interface SidebarFooterProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const SidebarFooter = forwardRef<HTMLDivElement, SidebarContentProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className={cn(
+          "sticky w-full overflow-x-hidden bottom-0 z-50 flex flex-col items-center gap-y-1 border-t border-secondary-foreground/15 pt-4 mt-4 bg-transparent",
+          className
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+SidebarFooter.displayName = "SidebarFooter";
+
+export interface SidebarHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const SidebarHeader = forwardRef<HTMLDivElement, SidebarContentProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className={cn(
+          "sticky w-full overflow-x-hidden top-0 z-50 flex flex-col justify-center items-center gap-y-1 border-b border-secondary-foreground/15 pb-4 mt-2 bg-transparent",
+          className
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+SidebarHeader.displayName = "SidebarHeader";
+
+export interface SeparatorProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {}
+
+export function Separator({ className, ...rest }: SeparatorProps) {
+  return (
+    <div
+      {...rest}
+      className={cn("w-full bg-secondary-foreground/15 h-px", className)}
+    />
+  );
+}
+Separator.displayName = "Separator";
+
+/* Compound attachments */
+Sidebar.Header = SidebarHeader;
+Sidebar.Footer = SidebarFooter;
+Sidebar.Content = SidebarContent;
+
+export default Sidebar;

package/src/notion-ui/textarea/Textarea.stories.tsx

@@ -1,5 +1,5 @@
+import Textarea from "./textarea";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Textarea } from "./textarea";
 
 const meta: Meta<typeof Textarea> = {
   title: "Form/Textarea",

package/src/notion-ui/textarea/textarea.tsx

@@ -44,7 +44,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       >
         <div
           className={cn(
-            "relative text-start select-none h-fit rtl:text-lg-rtl ltr:text-lg-ltr"
+            "relative text-start select-none h-fit rtl:text-[17px] ltr:text-[13px]"
           )}
         >
           {/* Required Hint */}
@@ -64,7 +64,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             <label
               htmlFor={label}
               className={cn(
-                "font-semibold rtl:text-xl-rtl ltr:text-lg-ltr inline-block pb-1"
+                "font-semibold rtl:text-md ltr:text-[13px] inline-block pb-1"
               )}
             >
               {label}
@@ -108,7 +108,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             }}
             intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
           >
-            <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-sm-ltr">
+            <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
               {errorMessage}
             </h1>
           </AnimatedItem>