pejay-ui 1.3.1 → 1.3.2

package/README.md

@@ -130,6 +130,13 @@ Below is the list of components you can add. Each has a copyable command block w
   npx pejay-ui add dropdown/multiselect-input
   ```
 
+### Layouts
+
+* **`layouts/lv1`**: A responsive, collapsible sidebar-based application layout.
+  ```bash
+  npx pejay-ui add layouts/lv1
+  ```
+
 ### Scaffolds & Templates
 
 * **`tanstack-query-client`**: Bare-bone TanStack Query client and context provider setup, copied directly into your project's `src/tanstack-query/`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pejay-ui",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "type": "module",
   "description": "react ui components",
   "bin": {

package/registry.json

@@ -236,5 +236,21 @@
     "targetDirName": "rtk-query",
     "files": ["templates/scaffolds/rtk-query"],
     "peerDependencies": ["@reduxjs/toolkit", "react-redux"]
+  },
+  "layouts/lv1": {
+    "name": "AppLayout",
+    "category": "layouts",
+    "files": [
+      "templates/layouts/lv1/app-layout.tsx",
+      "templates/layouts/lv1/sidebar-menu.tsx",
+      "templates/layouts/lv1/index.ts"
+    ],
+    "utils": ["cn.ts"],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ]
   }
 }
+

package/templates/layouts/lv1/app-layout.tsx

@@ -0,0 +1,194 @@
+import { useState, useLayoutEffect, useEffect } from "react";
+import { Menu, PanelLeftOpen, PanelRightOpen, X } from "lucide-react";
+import { cn } from "@/utils/cn";
+import { MenuSection, SidebarMenu } from "./sidebar-menu";
+
+
+// ============================================================================
+// Config
+// ============================================================================
+
+const menuConfig: MenuSection[] = [];
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type Variant = "none" | "semi" | "full" | "hybrid";
+type ActiveVariant = "none" | "semi" | "full";
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+const useAppMenu = (variant: Variant) => {
+  const [expandMenu, setExpandMenu] = useState(false);
+  const [activeVariant, setActiveVariant] = useState<ActiveVariant>("none");
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setExpandMenu(false); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  useLayoutEffect(() => {
+    const onResize = () => {
+      const w = window.innerWidth;
+      if (variant === "hybrid") {
+        setActiveVariant(w >= 1024 ? "none" : w >= 768 ? "semi" : "full");
+      } else if (variant === "full") {
+        setActiveVariant(w >= 768 ? "none" : "full");
+      } else {
+        setActiveVariant(variant as ActiveVariant);
+      }
+    };
+    window.addEventListener("resize", onResize);
+    onResize();
+    return () => window.removeEventListener("resize", onResize);
+  }, [variant]);
+
+  return {
+    activeVariant,
+    isExpanded: activeVariant === "none" || expandMenu,
+    expandMenu,
+    setExpandMenu,
+  };
+};
+
+// ============================================================================
+// AppLayout
+// ============================================================================
+
+export const AppLayout = ({ variant = "hybrid" }: { variant?: Variant }) => {
+  const { activeVariant, isExpanded, expandMenu, setExpandMenu } = useAppMenu(variant);
+
+  return (
+    <div className="flex flex-row flex-1 w-full h-screen overflow-hidden bg-[#0f0f11]">
+      {activeVariant === "full" && isExpanded && (
+        <div
+          className="fixed inset-0 bg-black/60 z-40 backdrop-blur-sm"
+          onClick={() => setExpandMenu(false)}
+        />
+      )}
+
+      <SidePanel
+        activeVariant={activeVariant}
+        isExpanded={isExpanded}
+        expandMenu={expandMenu}
+        setExpandMenu={setExpandMenu}
+      />
+
+      <div className="flex flex-col flex-1 h-full overflow-hidden">
+        <TopBar
+          activeVariant={activeVariant}
+          isExpanded={isExpanded}
+          setExpandMenu={setExpandMenu}
+        />
+        <MainArea />
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// SidePanel
+// ============================================================================
+
+const SidePanel = ({
+  activeVariant,
+  isExpanded,
+  expandMenu,
+  setExpandMenu,
+}: {
+  activeVariant: ActiveVariant;
+  isExpanded: boolean;
+  expandMenu: boolean;
+  setExpandMenu: (v: boolean) => void;
+}) => {
+  const sidebar = (
+    <div className="flex flex-col bg-[#141417] border-r border-white/[0.06] h-full p-2 gap-2 w-full overflow-hidden shrink-0">
+      {/* Header */}
+      {activeVariant === "none" ? (
+        <div className="px-2.5 py-2 shrink-0 mb-1 flex items-center gap-2 text-sm font-bold text-white/80 select-none">
+          <Menu size={18} />
+          <span>Menu</span>
+        </div>
+      ) : (
+        <button
+          onClick={() => setExpandMenu(!expandMenu)}
+          aria-expanded={isExpanded}
+          className={cn(
+            "w-full shrink-0 flex items-center gap-2 rounded-lg text-white/60 hover:bg-white/5 hover:text-white/90 transition-all duration-150 cursor-pointer select-none font-bold text-sm",
+            isExpanded ? "px-2.5 h-9 justify-start mb-1" : "justify-center aspect-square p-2.5 w-auto"
+          )}
+        >
+          {isExpanded ? <PanelLeftOpen size={18} /> : <PanelRightOpen size={18} />}
+          {isExpanded && <span>Menu</span>}
+        </button>
+      )}
+
+      <SidebarMenu
+        config={menuConfig}
+        isExpanded={activeVariant === "full" ? true : isExpanded}
+      />
+    </div>
+  );
+
+  if (activeVariant === "full") {
+    return (
+      <div className={cn(
+        "fixed top-0 left-0 h-full z-50 w-52 transform transition-transform duration-300",
+        isExpanded ? "translate-x-0" : "-translate-x-full"
+      )}>
+        {sidebar}
+        <div className={cn(
+          "absolute left-full top-3 ml-3 transition-opacity duration-150",
+          expandMenu ? "opacity-100" : "opacity-0 pointer-events-none"
+        )}>
+          <button
+            onClick={() => setExpandMenu(false)}
+            className="w-9 h-9 flex items-center justify-center rounded-lg bg-white/10 text-white hover:bg-white/20 border border-white/10 cursor-pointer"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("h-full transition-all duration-200 shrink-0", isExpanded ? "w-52" : "w-max")}>
+      {sidebar}
+    </div>
+  );
+};
+
+// ============================================================================
+// TopBar / MainArea
+// ============================================================================
+
+const TopBar = ({
+  activeVariant,
+  isExpanded,
+  setExpandMenu,
+}: {
+  activeVariant: ActiveVariant;
+  isExpanded: boolean;
+  setExpandMenu: (v: boolean) => void;
+}) => (
+  <div className="flex items-center h-14 px-3 border-b border-white/[0.06] bg-[#141417] shrink-0">
+    {activeVariant === "full" && !isExpanded && (
+      <button
+        onClick={() => setExpandMenu(true)}
+        aria-label="Open Menu"
+        className="w-9 h-9 flex items-center justify-center rounded-lg text-white/50 hover:bg-white/5 hover:text-white/80 transition-all duration-150 cursor-pointer"
+      >
+        <PanelRightOpen size={18} />
+      </button>
+    )}
+  </div>
+);
+
+const MainArea = () => (
+  <div className="flex-1 w-full bg-[#0f0f11] h-full overflow-y-auto" />
+);

package/templates/layouts/lv1/index.ts

@@ -0,0 +1,2 @@
+export * from "./app-layout";
+export * from "./sidebar-menu";

package/templates/layouts/lv1/sidebar-menu.tsx

@@ -0,0 +1,120 @@
+import { type ReactNode } from "react";
+import { cn } from "@/utils/cn";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface MenuItem {
+  id: string | number;
+  label: string;
+  icon?: ReactNode;
+  link?: string;
+  children?: { id: string | number; label: string; link?: string; icon?: ReactNode }[];
+}
+
+export type MenuSection =
+  | { id: string | number; type: "item"; label: string; icon?: ReactNode; link?: string; divider?: boolean }
+  | { id: string | number; type: "group"; label: string; items: MenuItem[]; divider?: boolean }
+  | { id: string | number; type: "bottom"; items: MenuItem[]; divider?: boolean };
+
+export interface SidebarMenuProps {
+  config: MenuSection[];
+  isExpanded: boolean;
+  activeId?: string | number;
+  onItemClick?: (id: string | number) => void;
+}
+
+// ============================================================================
+// Menu Button
+// ============================================================================
+
+const MenuBtn = ({
+  label,
+  icon,
+  isExpanded,
+  isActive,
+  onClick,
+}: {
+  label: string;
+  icon?: ReactNode;
+  isExpanded: boolean;
+  isActive?: boolean;
+  onClick?: () => void;
+}) => (
+  <button
+    onClick={onClick}
+    className={cn(
+      "w-full flex items-center gap-2.5 rounded-lg text-sm font-medium transition-all duration-150 cursor-pointer select-none",
+      isExpanded ? "px-2.5 py-2 justify-start" : "p-2.5 justify-center aspect-square w-auto",
+      isActive ? "bg-white/10 text-white" : "text-white/50 hover:bg-white/5 hover:text-white/80"
+    )}
+  >
+    <span className="shrink-0 w-[18px] h-[18px] flex items-center justify-center">
+      {icon ?? <span className="text-[13px] font-bold font-mono">{label.charAt(0)}</span>}
+    </span>
+    {isExpanded && <span className="whitespace-nowrap">{label}</span>}
+  </button>
+);
+
+// ============================================================================
+// SidebarMenu
+// ============================================================================
+
+export const SidebarMenu = ({ config, isExpanded, activeId, onItemClick }: SidebarMenuProps) => {
+  if (!config.length) return null;
+
+  const renderItem = (item: MenuItem) => (
+    <MenuBtn
+      key={item.id}
+      label={item.label}
+      icon={item.icon}
+      isExpanded={isExpanded}
+      isActive={item.id === activeId}
+      onClick={() => onItemClick?.(item.id)}
+    />
+  );
+
+  const topSections = config.filter((s) => s.type !== "bottom");
+  const bottomSections = config.filter((s) => s.type === "bottom");
+
+  const renderSection = (section: MenuSection) => {
+    const el =
+      section.type === "group" ? (
+        <div key={section.id} className={cn("flex flex-col gap-0.5 w-full", isExpanded && "mt-2 first:mt-0")}>
+          {isExpanded && (
+            <span className="text-[9px] uppercase font-bold tracking-widest text-white/25 px-2.5 py-1 select-none">
+              {section.label}
+            </span>
+          )}
+          {section.items.map(renderItem)}
+        </div>
+      ) : section.type === "bottom" ? (
+        <div key={section.id} className="flex flex-col gap-0.5 w-full">
+          {section.items.map(renderItem)}
+        </div>
+      ) : (
+        renderItem({ id: section.id, label: section.label, icon: section.icon, link: section.link })
+      );
+
+    return section.divider ? (
+      <div key={section.id} className="flex flex-col gap-0.5 w-full">
+        <div className="h-px bg-white/10 my-1.5 w-full" />
+        {el}
+      </div>
+    ) : el;
+  };
+
+  return (
+    <div className="flex flex-col justify-between flex-1 w-full h-full overflow-hidden gap-1">
+      <div className="flex flex-col gap-0.5 w-full overflow-y-auto flex-1">
+        {topSections.map(renderSection)}
+      </div>
+      {bottomSections.length > 0 && (
+        <div className="flex flex-col gap-0.5 w-full shrink-0">
+          {bottomSections.map(renderSection)}
+        </div>
+      )}
+    </div>
+  );
+};