gov-layout 1.0.0

package/README.md

@@ -0,0 +1,210 @@
+# gov-layout
+
+Government Layout Components — Staff Sidebar + User Header/Sidebar
+
+> ใช้คู่กับ `gov-token-css` เพื่อให้สีตรงตาม Design System
+
+## Installation
+
+```bash
+npm install gov-layout gov-token-css
+```
+
+---
+
+## 📦 Components
+
+### 1. StaffSidebar (เจ้าหน้าที่)
+
+Sidebar ฝั่งซ้ายแบบ fixed สำหรับหน้า admin
+
+```tsx
+import { StaffSidebar } from 'gov-layout';
+import type { MenuItem } from 'gov-layout';
+
+const menuItems: MenuItem[] = [
+  {
+    id: 'services',
+    title: 'งานบริการ',
+    icon: <FolderIcon />,
+    children: [
+      { id: 'water', title: 'ประปา', path: '/services/water' },
+      { id: 'tax', title: 'ภาษี', path: '/services/tax' },
+    ],
+  },
+  {
+    id: 'help',
+    title: 'ช่วยเหลือ',
+    icon: <HelpIcon />,
+    path: '/help',
+    dividerAfter: true,
+  },
+];
+
+const bottomMenu: MenuItem[] = [
+  { id: 'settings', title: 'ตั้งค่าระบบ', icon: <SettingsIcon />, path: '/settings' },
+];
+
+<StaffSidebar
+  orgLogo="/logo.png"
+  orgName="เทศบาลตำบลหลักเมือง"
+  orgSubtitle="จังหวัดราชบุรี"
+  menuItems={menuItems}
+  bottomMenuItems={bottomMenu}
+  user={{ firstName: 'Kaimuk', lastName: 'Jakprim' }}
+  roleLabel="เจ้าหน้าที่"
+  currentPath="/services/water"
+  onNavigate={(path) => router.push(path)}
+  onLogout={() => signOut()}
+  width="280px"
+/>
+```
+
+**Features:**
+- ✅ Dropdown submenu (พับ/กาง)
+- ✅ Auto-expand เมื่อ child active
+- ✅ Active item highlight
+- ✅ Bottom menu (ตั้งค่าระบบ)
+- ✅ User profile + logout ข้างล่าง
+
+---
+
+### 2. UserHeader (ผู้ใช้ทั่วไป)
+
+Header ด้านบนพร้อม notification bell
+
+```tsx
+import { UserHeader } from 'gov-layout';
+
+const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+<UserHeader
+  user={{ firstName: 'Kaimuk', pictureUrl: '/avatar.jpg' }}
+  notifications={[
+    {
+      id: 1,
+      title: 'คำร้องได้รับการอนุมัติ',
+      description: 'คำร้องหมายเลข #1234',
+      date: '2 ชม. ที่แล้ว',
+      type: 'success',
+      isRead: false,
+    },
+  ]}
+  onToggleSidebar={() => setIsSidebarOpen(true)}
+  onMarkAllRead={() => markAllRead()}
+  onViewAll={() => router.push('/notifications')}
+/>
+```
+
+---
+
+### 3. UserSidebar (ผู้ใช้ทั่วไป)
+
+Sidebar ฝั่งขวาแบบ slide-in
+
+```tsx
+import { UserSidebar } from 'gov-layout';
+
+<UserSidebar
+  isOpen={isSidebarOpen}
+  onClose={() => setIsSidebarOpen(false)}
+  user={{ firstName: 'Kaimuk', lastName: 'Jakprim', pictureUrl: '/avatar.jpg' }}
+  roleLabel="ผู้สูงอายุ"
+  menuItems={[
+    { id: 'profile', title: 'ข้อมูลส่วนตัว', icon: <UserIcon />, path: '/profile' },
+    { id: 'services', title: 'บริการหลัก', icon: <HomeIcon />, path: '/services' },
+    { id: 'settings', title: 'ตั้งค่าระบบ', icon: <SettingsIcon />, path: '/settings' },
+  ]}
+  onNavigate={(path) => router.push(path)}
+  onLogout={() => signOut()}
+/>
+```
+
+---
+
+## 🔧 Sub-Components
+
+ใช้แยกกันได้ถ้าต้องการ customize
+
+```tsx
+import {
+  SidebarHeader,     // logo + ชื่อองค์กร
+  SidebarMenu,       // เมนู dropdown
+  SidebarUserProfile // avatar + logout
+} from 'gov-layout';
+```
+
+---
+
+## 🎨 Styling
+
+Components ใช้ **inline styles** + CSS variables จาก `gov-token-css`:
+
+```css
+/* ใน globals.css */
+@import "gov-token-css";
+```
+
+ถ้าไม่ได้ import `gov-token-css` จะใช้สี fallback อัตโนมัติ
+
+---
+
+## 📐 Types
+
+```ts
+interface MenuItem {
+  id: string;
+  title: string;
+  path?: string;
+  icon?: React.ReactNode;
+  children?: MenuItem[];    // submenu
+  dividerAfter?: boolean;   // เส้นคั่น
+}
+
+interface User {
+  id?: string | number;
+  firstName?: string;
+  lastName?: string;
+  pictureUrl?: string;
+  role?: string;
+}
+
+interface NotificationItem {
+  id: string | number;
+  title: string;
+  description: string;
+  date: string;
+  type: 'info' | 'success' | 'warning' | 'error' | 'reminder';
+  isRead: boolean;
+}
+```
+
+---
+
+## 📁 Layout Example
+
+```tsx
+// Staff Layout (เจ้าหน้าที่)
+export default function AdminLayout({ children }) {
+  return (
+    <div style={{ display: 'flex' }}>
+      <StaffSidebar ... />
+      <main style={{ marginLeft: '280px', flex: 1 }}>
+        {children}
+      </main>
+    </div>
+  );
+}
+
+// User Layout (ผู้ใช้ทั่วไป)
+export default function UserLayout({ children }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <UserHeader onToggleSidebar={() => setOpen(true)} ... />
+      <UserSidebar isOpen={open} onClose={() => setOpen(false)} ... />
+      <main>{children}</main>
+    </>
+  );
+}
+```

package/dist/index.d.mts

@@ -0,0 +1,104 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface User {
+    id?: string | number;
+    firstName?: string;
+    lastName?: string;
+    pictureUrl?: string;
+    role?: string;
+}
+interface MenuItem {
+    id: string;
+    title: string;
+    path?: string;
+    icon?: React.ReactNode;
+    children?: MenuItem[];
+    dividerAfter?: boolean;
+}
+interface StaffSidebarProps {
+    /** URL รูปตราองค์กร */
+    orgLogo?: string;
+    /** ชื่อองค์กร */
+    orgName: string;
+    /** ชื่อรอง เช่น จังหวัด */
+    orgSubtitle?: string;
+    /** เมนูหลัก */
+    menuItems: MenuItem[];
+    /** เมนูล่าง เช่น ตั้งค่าระบบ */
+    bottomMenuItems?: MenuItem[];
+    /** ข้อมูลผู้ใช้ */
+    user: User | null;
+    /** ป้ายแสดงตำแหน่ง เช่น "เจ้าหน้าที่" */
+    roleLabel: string;
+    /** callback เมื่อคลิกเมนู */
+    onNavigate: (path: string) => void;
+    /** callback เมื่อกดออกจากระบบ */
+    onLogout: () => void;
+    /** path ปัจจุบันเพื่อ highlight active menu */
+    currentPath?: string;
+    /** ความกว้าง sidebar */
+    width?: string;
+    /** className เพิ่มเติม */
+    className?: string;
+}
+
+declare function StaffSidebar({ orgLogo, orgName, orgSubtitle, menuItems, bottomMenuItems, user, roleLabel, onNavigate, onLogout, currentPath, width, className, }: StaffSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarHeaderProps {
+    orgLogo?: string;
+    orgName: string;
+    orgSubtitle?: string;
+}
+declare function SidebarHeader({ orgLogo, orgName, orgSubtitle }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarMenuProps {
+    menuItems: MenuItem[];
+    onItemClick: (path: string) => void;
+    currentPath?: string;
+}
+declare function SidebarMenu({ menuItems, onItemClick, currentPath }: SidebarMenuProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarUserProfileProps {
+    user: User | null;
+    roleLabel: string;
+    onLogout: () => void;
+}
+declare function SidebarUserProfile({ user, roleLabel, onLogout, }: SidebarUserProfileProps): react_jsx_runtime.JSX.Element | null;
+
+interface NotificationItem {
+    id: string | number;
+    title: string;
+    description: string;
+    date: string;
+    type: 'info' | 'success' | 'warning' | 'error' | 'reminder';
+    isRead: boolean;
+}
+interface UserHeaderProps {
+    user?: {
+        firstName?: string;
+        lastName?: string;
+        pictureUrl?: string;
+    };
+    notifications?: NotificationItem[];
+    onToggleSidebar?: () => void;
+    /** Custom bell icon */
+    notificationBell?: React.ReactNode;
+    onMarkAllRead?: () => void;
+    onViewAll?: () => void;
+    className?: string;
+}
+declare function UserHeader({ user, notifications, onToggleSidebar, notificationBell, onMarkAllRead, onViewAll, className, }: UserHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface UserSidebarProps {
+    user: User | null;
+    roleLabel: string;
+    menuItems: MenuItem[];
+    onNavigate: (path: string) => void;
+    onLogout: () => void;
+    isOpen: boolean;
+    onClose: () => void;
+    roleColor?: string;
+}
+declare function UserSidebar({ user, roleLabel, menuItems, onNavigate, onLogout, isOpen, onClose, roleColor, }: UserSidebarProps): react_jsx_runtime.JSX.Element;
+
+export { type MenuItem, type NotificationItem, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, type User, UserHeader, UserSidebar };

package/dist/index.d.ts

@@ -0,0 +1,104 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface User {
+    id?: string | number;
+    firstName?: string;
+    lastName?: string;
+    pictureUrl?: string;
+    role?: string;
+}
+interface MenuItem {
+    id: string;
+    title: string;
+    path?: string;
+    icon?: React.ReactNode;
+    children?: MenuItem[];
+    dividerAfter?: boolean;
+}
+interface StaffSidebarProps {
+    /** URL รูปตราองค์กร */
+    orgLogo?: string;
+    /** ชื่อองค์กร */
+    orgName: string;
+    /** ชื่อรอง เช่น จังหวัด */
+    orgSubtitle?: string;
+    /** เมนูหลัก */
+    menuItems: MenuItem[];
+    /** เมนูล่าง เช่น ตั้งค่าระบบ */
+    bottomMenuItems?: MenuItem[];
+    /** ข้อมูลผู้ใช้ */
+    user: User | null;
+    /** ป้ายแสดงตำแหน่ง เช่น "เจ้าหน้าที่" */
+    roleLabel: string;
+    /** callback เมื่อคลิกเมนู */
+    onNavigate: (path: string) => void;
+    /** callback เมื่อกดออกจากระบบ */
+    onLogout: () => void;
+    /** path ปัจจุบันเพื่อ highlight active menu */
+    currentPath?: string;
+    /** ความกว้าง sidebar */
+    width?: string;
+    /** className เพิ่มเติม */
+    className?: string;
+}
+
+declare function StaffSidebar({ orgLogo, orgName, orgSubtitle, menuItems, bottomMenuItems, user, roleLabel, onNavigate, onLogout, currentPath, width, className, }: StaffSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarHeaderProps {
+    orgLogo?: string;
+    orgName: string;
+    orgSubtitle?: string;
+}
+declare function SidebarHeader({ orgLogo, orgName, orgSubtitle }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarMenuProps {
+    menuItems: MenuItem[];
+    onItemClick: (path: string) => void;
+    currentPath?: string;
+}
+declare function SidebarMenu({ menuItems, onItemClick, currentPath }: SidebarMenuProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarUserProfileProps {
+    user: User | null;
+    roleLabel: string;
+    onLogout: () => void;
+}
+declare function SidebarUserProfile({ user, roleLabel, onLogout, }: SidebarUserProfileProps): react_jsx_runtime.JSX.Element | null;
+
+interface NotificationItem {
+    id: string | number;
+    title: string;
+    description: string;
+    date: string;
+    type: 'info' | 'success' | 'warning' | 'error' | 'reminder';
+    isRead: boolean;
+}
+interface UserHeaderProps {
+    user?: {
+        firstName?: string;
+        lastName?: string;
+        pictureUrl?: string;
+    };
+    notifications?: NotificationItem[];
+    onToggleSidebar?: () => void;
+    /** Custom bell icon */
+    notificationBell?: React.ReactNode;
+    onMarkAllRead?: () => void;
+    onViewAll?: () => void;
+    className?: string;
+}
+declare function UserHeader({ user, notifications, onToggleSidebar, notificationBell, onMarkAllRead, onViewAll, className, }: UserHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface UserSidebarProps {
+    user: User | null;
+    roleLabel: string;
+    menuItems: MenuItem[];
+    onNavigate: (path: string) => void;
+    onLogout: () => void;
+    isOpen: boolean;
+    onClose: () => void;
+    roleColor?: string;
+}
+declare function UserSidebar({ user, roleLabel, menuItems, onNavigate, onLogout, isOpen, onClose, roleColor, }: UserSidebarProps): react_jsx_runtime.JSX.Element;
+
+export { type MenuItem, type NotificationItem, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, type User, UserHeader, UserSidebar };