@papernote/ui 1.9.1 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",

package/src/components/NotificationBell.stories.tsx

@@ -227,6 +227,48 @@ export const Default: Story = {
   },
 };
 
+export const Playground: Story = {
+  args: {
+    notifications: sampleNotifications,
+    variant: 'compact',
+    bellStyle: 'ghost',
+    dropdownPosition: 'bottom-right',
+    size: 'md',
+    showUnreadInHeader: false,
+    loading: false,
+    disabled: false,
+    maxHeight: '400px',
+    emptyMessage: 'No notifications',
+    viewAllText: 'View all notifications',
+  },
+  render: (args) => {
+    const [notifications, setNotifications] = useState(args.notifications);
+
+    const handleMarkAsRead = (id: string) => {
+      setNotifications((prev) =>
+        prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
+      );
+    };
+
+    const handleMarkAllRead = () => {
+      setNotifications((prev) => prev.map((n) => ({ ...n, isRead: true })));
+    };
+
+    return (
+      <div style={{ padding: '250px', display: 'flex', justifyContent: 'center', minHeight: '600px' }}>
+        <NotificationBell
+          {...args}
+          notifications={notifications}
+          onMarkAsRead={handleMarkAsRead}
+          onMarkAllRead={handleMarkAllRead}
+          onNotificationClick={(n) => alert(`Navigate to: ${n.actionUrl}`)}
+          onViewAll={() => alert('View all notifications')}
+        />
+      </div>
+    );
+  },
+};
+
 export const DetailedVariant: Story = {
   render: () => {
     const [notifications, setNotifications] = useState(bankingNotifications);

package/src/components/NotificationBell.tsx

@@ -138,19 +138,23 @@ const defaultTypeLabels: Record<NotificationItem['type'], string> = {
 
 /**
  * Map dropdown position to Popover placement
+ * - bottom-right: Below bell, dropdown's right edge aligns with bell
+ * - bottom-left: Below bell, dropdown's left edge aligns with bell
+ * - top-right: Above bell, dropdown's right edge aligns with bell
+ * - top-left: Above bell, dropdown's left edge aligns with bell
  */
 function getPopoverPlacement(position: NotificationBellPosition): 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' {
   switch (position) {
     case 'bottom-right':
     case 'right':
-      return 'bottom-start';
+      return 'bottom-start'; // Below, extends to the right
     case 'bottom-left':
     case 'left':
-      return 'bottom-end';
+      return 'bottom-end'; // Below, extends to the left
     case 'top-right':
-      return 'top-start';
+      return 'top-start'; // Above, extends to the right
     case 'top-left':
-      return 'top-end';
+      return 'top-end'; // Above, extends to the left
     default:
       return 'bottom-start';
   }