@designa8/vibedesign-stripe-deepseek-2-176b 0.2.0 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # @designa8/vibedesign-stripe-deepseek-2-176b
 
-Complete design system generated by Atoms Design, version **0.2.0**.
+Complete design system generated by Atoms Design, version **0.2.1**.
 Tokens, atoms, molecules, organisms, and templates — import from the package root;
 never hardcode visual values in consumer code.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designa8/vibedesign-stripe-deepseek-2-176b",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Complete design system \"My Project stripe-deepseek\" generated by Atoms Design.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/atoms/NotificationFeed/NotificationFeed.tsx

@@ -40,6 +40,9 @@ export interface NotificationFeedMode {
   label: string;
 }
 
+/** `card` draws the bordered surface; `bare` fills its parent (e.g. a Drawer body). */
+export type NotificationFeedChrome = "card" | "bare";
+
 export interface NotificationFeedProps
   extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "title"> {
   /** Feed heading. */
@@ -66,6 +69,19 @@ export interface NotificationFeedProps
   feedLabel?: string;
   /** Shown when the active filter has no rows. */
   emptyMessage?: string;
+  /**
+   * Fires with the clicked row when its action link is followed. Unless a
+   * modifier key is held, the browser navigation is prevented so an SPA router
+   * can take over (and the consumer can mark the row read).
+   */
+  onItemClick?: (
+    item: NotificationFeedItem,
+    event: React.MouseEvent<HTMLAnchorElement>,
+  ) => void;
+  /** Right-hand slot on the title row — e.g. a "Mark all read" button. */
+  actions?: React.ReactNode;
+  /** Outer surface treatment. `bare` drops the card's border, radius, shadow and padding. */
+  chrome?: NotificationFeedChrome;
 }
 
 const defaultFilters: NotificationFeedFilter[] = [
@@ -149,10 +165,12 @@ const defaultItems: NotificationFeedItem[] = [
 ];
 
 /**
- * A notifications timeline: heading, a row of filter pills, a mode switch, and
- * one bordered card whose rows are threaded on a hairline rail. The rail leaves
- * each row from its vertical centre, the node is indigo while the row is unread,
- * and the unread row carries the brand accent bar at the card's left edge.
+ * A notifications timeline: heading with an optional right-hand action slot, a
+ * row of filter pills, a mode switch, and one bordered card whose rows are
+ * threaded on a hairline rail. The rail leaves each row from its vertical
+ * centre, the node is indigo while the row is unread, and the unread row
+ * carries the brand accent bar at the card's left edge. Pass `chrome="bare"` to
+ * drop the card so the feed fills a Drawer body.
  */
 export const NotificationFeed = React.forwardRef<
   HTMLDivElement,
@@ -162,7 +180,7 @@ export const NotificationFeed = React.forwardRef<
     {
       title = "Notification center / feed",
       filters = defaultFilters,
-      items = defaultItems,
+      items,
       filter,
       defaultFilter = "all",
       onFilterChange,
@@ -172,6 +190,9 @@ export const NotificationFeed = React.forwardRef<
       onModeChange,
       feedLabel = "Notifications",
       emptyMessage = "Nothing here yet.",
+      onItemClick,
+      actions,
+      chrome = "card",
       className,
       ...rest
     },
@@ -196,17 +217,69 @@ export const NotificationFeed = React.forwardRef<
       onModeChange?.(next);
     };
 
-    const visible = items.filter(
+    // An explicitly passed array — including an empty one — always wins, so a
+    // consumer with no notifications sees the empty state, never the demo rows.
+    const rows = items ?? defaultItems;
+
+    const visible = rows.filter(
       (item) =>
         activeFilter === "all" ||
         item.filter === undefined ||
         item.filter === activeFilter,
     );
 
+    const unreadCount = visible.filter((item) => item.unread).length;
+
+    const isBare = chrome === "bare";
+
+    const handleItemClick = (
+      item: NotificationFeedItem,
+      event: React.MouseEvent<HTMLAnchorElement>,
+    ) => {
+      if (!onItemClick) return;
+      // Let the browser handle new-tab / new-window intents.
+      if (
+        event.metaKey ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.button !== 0
+      ) {
+        onItemClick(item, event);
+        return;
+      }
+      event.preventDefault();
+      onItemClick(item, event);
+    };
+
     return (
       <div ref={ref} className={cn("w-full", className)} {...rest}>
         <div className="flex w-full flex-col gap-lg">
-          <h2 className="text-display-lg text-ink">{title}</h2>
+          <div className="flex w-full flex-wrap items-start justify-between gap-md">
+            <div className="flex min-w-0 items-center gap-sm">
+              <h2 className="text-display-lg text-ink">{title}</h2>
+              {unreadCount > 0 ? (
+                <span
+                  className={cn(
+                    "inline-flex shrink-0 items-center justify-center rounded-full bg-primary px-xs text-body-sm text-on-primary",
+                  )}
+                  style={tabular}
+                >
+                  {unreadCount}
+                  <span className="sr-only">
+                    {" "}
+                    unread {unreadCount === 1 ? "notification" : "notifications"}
+                  </span>
+                </span>
+              ) : null}
+            </div>
+
+            {actions ? (
+              <div className="ml-auto flex shrink-0 items-center gap-sm">
+                {actions}
+              </div>
+            ) : null}
+          </div>
 
           <div className="flex w-full flex-wrap items-center justify-between gap-md">
             <div
@@ -240,10 +313,20 @@ export const NotificationFeed = React.forwardRef<
 
           <section
             aria-label={feedLabel}
-            className="overflow-hidden rounded-lg border border-hairline bg-canvas shadow-card"
+            className={cn(
+              "w-full",
+              isBare
+                ? "overflow-hidden"
+                : "overflow-hidden rounded-lg border border-hairline bg-canvas shadow-card",
+            )}
           >
             {visible.length === 0 ? (
-              <p className="px-xxl py-xl text-body-md text-muted">
+              <p
+                className={cn(
+                  "text-body-md text-muted",
+                  isBare ? "py-xl" : "px-xxl py-xl",
+                )}
+              >
                 {emptyMessage}
               </p>
             ) : (
@@ -314,6 +397,7 @@ export const NotificationFeed = React.forwardRef<
                           size="md"
                           underline="always"
                           className="whitespace-nowrap"
+                          onClick={(event) => handleItemClick(item, event)}
                         >
                           {item.linkLabel ?? "View details"}
                         </Link>

package/src/atoms/NotificationFeed/preview.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
+import { Button } from "../Button";
 import {
   NotificationFeed,
   type NotificationFeedItem,
 } from "./NotificationFeed";
 
-const items: NotificationFeedItem[] = [
+const seedItems: NotificationFeedItem[] = [
   {
     id: "n-1",
     title: "Payout paid",
@@ -44,15 +45,6 @@ const items: NotificationFeedItem[] = [
   },
   {
     id: "n-5",
-    title: "Payout paid",
-    description: "$1,200.00 sent to Acme Store",
-    timestamp: "Jan 26, 09:12",
-    href: "#payout-5",
-    linkLabel: "View payout",
-    filter: "payouts",
-  },
-  {
-    id: "n-6",
     title: "Payment received",
     description: "$1,480.00 from Acme Supply",
     timestamp: "Jan 26, 08:48",
@@ -62,7 +54,7 @@ const items: NotificationFeedItem[] = [
     unread: true,
   },
   {
-    id: "n-7",
+    id: "n-6",
     title: "Risk review opened",
     description: "Case 4821 flagged for manual review",
     timestamp: "Jan 25, 18:22",
@@ -75,26 +67,81 @@ const items: NotificationFeedItem[] = [
 export default function NotificationFeedPreview() {
   const [filter, setFilter] = React.useState("all");
   const [mode, setMode] = React.useState("live");
+  const [drawerFilter, setDrawerFilter] = React.useState("all");
+  const [items, setItems] = React.useState(seedItems);
+  const [lastOpened, setLastOpened] = React.useState<string | null>(null);
+
+  const unreadCount = items.filter((item) => item.unread).length;
+
+  const markRead = (id: string) => {
+    setItems((current) =>
+      current.map((item) =>
+        item.id === id ? { ...item, unread: false } : item,
+      ),
+    );
+  };
+
+  const markAllRead = () => {
+    setItems((current) => current.map((item) => ({ ...item, unread: false })));
+  };
 
   return (
     <div className="w-full max-w-5xl mx-auto p-lg space-y-xl">
-      <NotificationFeed
-        filter={filter}
-        onFilterChange={setFilter}
-        mode={mode}
-        onModeChange={setMode}
-        items={items}
-      />
+      <div className="space-y-md">
+        <NotificationFeed
+          title="Notifications"
+          items={items}
+          filter={filter}
+          onFilterChange={setFilter}
+          mode={mode}
+          onModeChange={setMode}
+          actions={
+            <Button
+              variant="outline-soft"
+              size="sm"
+              onClick={markAllRead}
+              disabled={unreadCount === 0}
+            >
+              Mark all read
+            </Button>
+          }
+          onItemClick={(item) => {
+            setLastOpened(item.title);
+            markRead(item.id);
+          }}
+        />
+        <p aria-live="polite" className="text-body-sm text-muted">
+          {lastOpened
+            ? `Router would navigate to the ${lastOpened} detail view; the row is marked read.`
+            : "Click a row action — it marks that item read instead of navigating."}
+        </p>
+      </div>
 
       <div className="rounded-lg border border-hairline bg-surface-soft p-lg">
-        <p className="mb-md text-caption font-weight-label uppercase tracking-[0.06em] text-muted">
-          Empty filter
+        <p className="mb-md text-caption font-weight-label text-muted">
+          Bare chrome inside a drawer body
+        </p>
+        <div className="rounded-lg border border-hairline bg-canvas p-lg shadow-card">
+          <NotificationFeed
+            chrome="bare"
+            title="Notifications"
+            items={items.slice(0, 3)}
+            filter={drawerFilter}
+            onFilterChange={setDrawerFilter}
+            onItemClick={(item) => markRead(item.id)}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-md">
+        <p className="text-caption font-weight-label text-muted">
+          Explicit empty array — demo rows never leak in
         </p>
         <NotificationFeed
-          title="Notification center"
-          filter="risk"
-          items={items.filter((item) => item.filter === "payments")}
-          emptyMessage="No risk reviews in this window."
+          chrome="bare"
+          title="Notifications"
+          items={[]}
+          emptyMessage="No notifications yet — payouts and payments land here."
         />
       </div>
     </div>