gov-layout 1.1.12 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +89 -12
  2. package/dist/index.d.mts +37 -1
  3. package/dist/index.d.ts +37 -1
  4. package/dist/index.js +393 -250
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +390 -248
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -29,9 +29,83 @@ npm install gov-layout gov-token-css
29
29
  | `SettingsPanel` | หน้าตั้งค่า (font + theme) | `import { SettingsPanel } from 'gov-layout'` |
30
30
  | `SettingsProvider` | Context wrapper | `import { SettingsProvider } from 'gov-layout'` |
31
31
  | `useSettings` | Hook อ่าน/เปลี่ยนค่า | `import { useSettings } from 'gov-layout'` |
32
+ | `Icons` | ไอคอน built-in 33 ตัว | `import { Icons } from 'gov-layout'` |
32
33
 
33
34
  ---
34
35
 
36
+ ## 🎯 Icons (ไอคอน built-in)
37
+
38
+ import ครั้งเดียว ใช้ได้ทุกไอคอน — ไม่ต้องสร้าง SVG เอง
39
+
40
+ ### วิธีใช้งาน
41
+
42
+ ```tsx
43
+ import { Icons } from 'gov-layout';
44
+
45
+ // ใช้ตรงๆ
46
+ <Icons.Folder />
47
+ <Icons.User />
48
+ <Icons.Gear />
49
+
50
+ // ปรับขนาด (default = 20)
51
+ <Icons.Home size={24} />
52
+
53
+ // ใส่ใน MenuItem
54
+ const menuItems: MenuItem[] = [
55
+ { id: 'services', title: 'งานบริการ', icon: <Icons.Folder />, path: '/services' },
56
+ { id: 'users', title: 'จัดการผู้ใช้', icon: <Icons.User />, path: '/users' },
57
+ { id: 'reports', title: 'รายงาน', icon: <Icons.BarChart />, path: '/reports' },
58
+ ];
59
+ ```
60
+
61
+ ### ไอคอนทั้งหมด
62
+
63
+ | ชื่อ | Component | ใช้สำหรับ |
64
+ |------|-----------|----------|
65
+ | 🏠 | `Icons.Home` | หน้าแรก / Dashboard |
66
+ | 🔍 | `Icons.Search` | ค้นหา |
67
+ | 🔔 | `Icons.Bell` | แจ้งเตือน |
68
+ | 📁 | `Icons.Folder` | งานบริการ / หมวดหมู่ |
69
+ | 📋 | `Icons.Clipboard` | แบบฟอร์ม / คำร้อง |
70
+ | 📄 | `Icons.FileText` | รายงาน / เอกสาร |
71
+ | 📅 | `Icons.Calendar` | ตารางงาน / นัดหมาย |
72
+ | 👤 | `Icons.User` | ข้อมูลผู้ใช้ |
73
+ | 👥 | `Icons.Users` | จัดการสมาชิก |
74
+ | ⚙️ | `Icons.Gear` | ตั้งค่าระบบ |
75
+ | 🔧 | `Icons.Wrench` | ซ่อมบำรุง |
76
+ | 🛡️ | `Icons.Shield` | สิทธิ์การใช้งาน |
77
+ | ❓ | `Icons.HelpCircle` | ช่วยเหลือ |
78
+ | 📊 | `Icons.BarChart` | สถิติ / รายงาน |
79
+ | 🕐 | `Icons.History` | ประวัติการใช้งาน |
80
+ | 💾 | `Icons.Database` | สำรองข้อมูล |
81
+ | 🏢 | `Icons.Building` | หน่วยงาน / องค์กร |
82
+ | 📍 | `Icons.MapPin` | สถานที่ |
83
+ | 📞 | `Icons.Phone` | ติดต่อ |
84
+ | ✉️ | `Icons.Mail` | อีเมล / ข้อความ |
85
+ | ✅ | `Icons.CheckCircle` | สำเร็จ / อนุมัติ |
86
+ | ⚠️ | `Icons.AlertTriangle` | คำเตือน |
87
+ | ❌ | `Icons.XCircle` | ปฏิเสธ / ข้อผิดพลาด |
88
+ | ➕ | `Icons.PlusCircle` | เพิ่มรายการ |
89
+ | 🚪 | `Icons.LogOut` | ออกจากระบบ |
90
+ | ⬇️ | `Icons.Download` | ดาวน์โหลด |
91
+ | ⬆️ | `Icons.Upload` | อัปโหลด |
92
+ | 🖨️ | `Icons.Printer` | พิมพ์เอกสาร |
93
+ | ⭐ | `Icons.Star` | รายการโปรด |
94
+ | ❤️ | `Icons.Heart` | ถูกใจ |
95
+ | 👁️ | `Icons.Eye` | ดูรายละเอียด |
96
+ | ✏️ | `Icons.Edit` | แก้ไข |
97
+ | 🗑️ | `Icons.Trash` | ลบ |
98
+
99
+ ### IconProps
100
+
101
+ | Prop | Type | Default | คำอธิบาย |
102
+ |------|------|---------|----------|
103
+ | `size` | `number?` | `20` | ขนาด (width & height) |
104
+ | `className` | `string?` | - | CSS class |
105
+ | `style` | `CSSProperties?` | - | inline style |
106
+
107
+ > 💡 ถ้าต้องการ import ทีละตัวก็ได้: `import { FolderIcon, UserIcon } from 'gov-layout'`
108
+
35
109
  ## 1. StaffSidebar (เจ้าหน้าที่)
36
110
 
37
111
  Sidebar ฝั่งซ้ายแบบ fixed — รองรับพับ/กาง (collapsible)
@@ -42,22 +116,22 @@ Sidebar ฝั่งซ้ายแบบ fixed — รองรับพับ/
42
116
  import { StaffSidebar } from 'gov-layout';
43
117
  import type { MenuItem } from 'gov-layout';
44
118
 
119
+ // ไม่ต้องระบุ icon — sidebar จับคู่ไอคอนให้อัตโนมัติจาก id
45
120
  const menuItems: MenuItem[] = [
46
- // === Dropdown (มี children) ===
47
121
  {
48
- id: 'services',
122
+ id: 'services', // → 📁 FolderIcon
49
123
  title: 'งานบริการ',
50
- icon: <FolderIcon />,
51
124
  children: [
52
125
  { id: 'water', title: 'ประปา', path: '/services/water' },
53
126
  { id: 'tax', title: 'ภาษี', path: '/services/tax' },
54
- { id: 'civil', title: 'ทะเบียน', path: '/services/civil' },
55
127
  ],
56
- dividerAfter: true, // เส้นคั่นหลังเมนูนี้
128
+ dividerAfter: true,
57
129
  },
58
- // === เมนูเดี่ยว (ไม่มี children) ===
59
- { id: 'users', title: 'จัดการผู้ใช้', icon: <UserIcon />, path: '/users' },
60
- { id: 'reports', title: 'รายงาน', icon: <ChartIcon />, path: '/reports' },
130
+ { id: 'users', title: 'จัดการผู้ใช้', path: '/users' }, // → 👥 UsersIcon
131
+ { id: 'reports', title: 'รายงาน', path: '/reports' }, // → 📊 BarChartIcon
132
+ { id: 'roles', title: 'สิทธิ์การใช้งาน', path: '/roles' }, // → 🛡️ ShieldIcon
133
+ { id: 'logs', title: 'ประวัติ', path: '/logs' }, // → 🕐 HistoryIcon
134
+ { id: 'backup', title: 'สำรองข้อมูล', path: '/backup' }, // → 💾 DatabaseIcon
61
135
  ];
62
136
 
63
137
  <StaffSidebar
@@ -74,6 +148,9 @@ const menuItems: MenuItem[] = [
74
148
  />
75
149
  ```
76
150
 
151
+ > **💡 Auto-Icon:** ไม่ต้อง import ไอคอน — sidebar จับคู่จาก `id` อัตโนมัติ
152
+ > ถ้าอยากกำหนดเอง ก็ส่ง `icon` prop ได้ตามปกติ: `icon: <Icons.Folder />`
153
+
77
154
  > **💡 ข้อมูลองค์กร (`orgLogo`, `orgName`, `orgSubtitle`) มาจากไหนก็ได้:**
78
155
  > - ดึงจาก **ตัวกลาง SSO** หลังล็อกอิน (แนะนำ) เช่น `useSSOAuth().organization`
79
156
  > - ดึงจาก **API** เช่น `fetchOrgInfo()`
@@ -102,7 +179,7 @@ const menuItems: MenuItem[] = [
102
179
  ```tsx
103
180
  <StaffSidebar
104
181
  bottomMenuItems={[
105
- { id: 'settings', title: 'ตั้งค่า', icon: <GearIcon />, path: '/settings' },
182
+ { id: 'settings', title: 'ตั้งค่า', icon: <Icons.Gear />, path: '/settings' },
106
183
  ]}
107
184
  ...
108
185
  />
@@ -193,9 +270,9 @@ import { UserSidebar } from 'gov-layout';
193
270
  user={{ firstName: 'สมหญิง', lastName: 'ใจดี', pictureUrl: '/avatar.jpg' }}
194
271
  roleLabel="ผู้สูงอายุ"
195
272
  menuItems={[
196
- { id: 'profile', title: 'ข้อมูลส่วนตัว', icon: <UserIcon />, path: '/profile' },
197
- { id: 'services', title: 'บริการหลัก', icon: <HomeIcon />, path: '/services' },
198
- { id: 'settings', title: 'ตั้งค่าระบบ', icon: <GearIcon />, path: '/settings' },
273
+ { id: 'profile', title: 'ข้อมูลส่วนตัว', path: '/profile' },
274
+ { id: 'services', title: 'บริการหลัก', path: '/services' },
275
+ { id: 'settings', title: 'ตั้งค่าระบบ', path: '/settings' },
199
276
  ]}
200
277
  onNavigate={(path) => router.push(path)}
201
278
  onLogout={() => signOut()}
package/dist/index.d.mts CHANGED
@@ -192,4 +192,40 @@ declare function EyeIcon({ size, className, style }?: IconProps): react_jsx_runt
192
192
  declare function EditIcon({ size, className, style }?: IconProps): react_jsx_runtime.JSX.Element;
193
193
  declare function TrashIcon({ size, className, style }?: IconProps): react_jsx_runtime.JSX.Element;
194
194
 
195
- export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useSettings };
195
+ declare const Icons: {
196
+ readonly Home: typeof HomeIcon;
197
+ readonly Search: typeof SearchIcon;
198
+ readonly Bell: typeof BellIcon;
199
+ readonly Folder: typeof FolderIcon;
200
+ readonly Clipboard: typeof ClipboardIcon;
201
+ readonly FileText: typeof FileTextIcon;
202
+ readonly Calendar: typeof CalendarIcon;
203
+ readonly User: typeof UserIcon;
204
+ readonly Users: typeof UsersIcon;
205
+ readonly Gear: typeof GearIcon;
206
+ readonly Wrench: typeof WrenchIcon;
207
+ readonly Shield: typeof ShieldIcon;
208
+ readonly HelpCircle: typeof HelpCircleIcon;
209
+ readonly BarChart: typeof BarChartIcon;
210
+ readonly History: typeof HistoryIcon;
211
+ readonly Database: typeof DatabaseIcon;
212
+ readonly Building: typeof BuildingIcon;
213
+ readonly MapPin: typeof MapPinIcon;
214
+ readonly Phone: typeof PhoneIcon;
215
+ readonly Mail: typeof MailIcon;
216
+ readonly CheckCircle: typeof CheckCircleIcon;
217
+ readonly AlertTriangle: typeof AlertTriangleIcon;
218
+ readonly XCircle: typeof XCircleIcon;
219
+ readonly PlusCircle: typeof PlusCircleIcon;
220
+ readonly LogOut: typeof LogOutIcon;
221
+ readonly Download: typeof DownloadIcon;
222
+ readonly Upload: typeof UploadIcon;
223
+ readonly Printer: typeof PrinterIcon;
224
+ readonly Star: typeof StarIcon;
225
+ readonly Heart: typeof HeartIcon;
226
+ readonly Eye: typeof EyeIcon;
227
+ readonly Edit: typeof EditIcon;
228
+ readonly Trash: typeof TrashIcon;
229
+ };
230
+
231
+ export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useSettings };
package/dist/index.d.ts CHANGED
@@ -192,4 +192,40 @@ declare function EyeIcon({ size, className, style }?: IconProps): react_jsx_runt
192
192
  declare function EditIcon({ size, className, style }?: IconProps): react_jsx_runtime.JSX.Element;
193
193
  declare function TrashIcon({ size, className, style }?: IconProps): react_jsx_runtime.JSX.Element;
194
194
 
195
- export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useSettings };
195
+ declare const Icons: {
196
+ readonly Home: typeof HomeIcon;
197
+ readonly Search: typeof SearchIcon;
198
+ readonly Bell: typeof BellIcon;
199
+ readonly Folder: typeof FolderIcon;
200
+ readonly Clipboard: typeof ClipboardIcon;
201
+ readonly FileText: typeof FileTextIcon;
202
+ readonly Calendar: typeof CalendarIcon;
203
+ readonly User: typeof UserIcon;
204
+ readonly Users: typeof UsersIcon;
205
+ readonly Gear: typeof GearIcon;
206
+ readonly Wrench: typeof WrenchIcon;
207
+ readonly Shield: typeof ShieldIcon;
208
+ readonly HelpCircle: typeof HelpCircleIcon;
209
+ readonly BarChart: typeof BarChartIcon;
210
+ readonly History: typeof HistoryIcon;
211
+ readonly Database: typeof DatabaseIcon;
212
+ readonly Building: typeof BuildingIcon;
213
+ readonly MapPin: typeof MapPinIcon;
214
+ readonly Phone: typeof PhoneIcon;
215
+ readonly Mail: typeof MailIcon;
216
+ readonly CheckCircle: typeof CheckCircleIcon;
217
+ readonly AlertTriangle: typeof AlertTriangleIcon;
218
+ readonly XCircle: typeof XCircleIcon;
219
+ readonly PlusCircle: typeof PlusCircleIcon;
220
+ readonly LogOut: typeof LogOutIcon;
221
+ readonly Download: typeof DownloadIcon;
222
+ readonly Upload: typeof UploadIcon;
223
+ readonly Printer: typeof PrinterIcon;
224
+ readonly Star: typeof StarIcon;
225
+ readonly Heart: typeof HeartIcon;
226
+ readonly Eye: typeof EyeIcon;
227
+ readonly Edit: typeof EditIcon;
228
+ readonly Trash: typeof TrashIcon;
229
+ };
230
+
231
+ export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useSettings };