@elabs-ai/components-ui 4.0.0 → 4.2.0

package/src/blocks/sidebar-04/app-sidebar.tsx

@@ -1,236 +0,0 @@
-/** sidebar-04 — double-sided mail sidebar (copy-owned block). Adapted from
- *  blocks.so (ephraim duncan). Tabler icons mapped to lucide. */
-"use client";
-
-import * as React from "react";
-import { Archive, Box, Clock, Flag, Inbox, Star } from "lucide-react";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "@elabs-ai/components-ui";
-import { NavUser } from "@elabs-ai/components-ui";
-import { useMail } from "./mail-context";
-
-const data = {
-  user: { name: "ephraim", email: "ephraim@blocks.so", avatar: "" },
-  navMain: [
-    { title: "Inbox", url: "#", icon: Inbox, isActive: true },
-    { title: "Starred", url: "#", icon: Star, isActive: false },
-    { title: "Important", url: "#", icon: Flag, isActive: false },
-    { title: "Scheduled", url: "#", icon: Clock, isActive: false },
-    { title: "Archive", url: "#", icon: Archive, isActive: false },
-  ],
-  labels: [
-    { title: "Personal", color: "bg-green-400 dark:bg-green-300" },
-    { title: "Work", color: "bg-blue-400 dark:bg-blue-300" },
-    { title: "Travel", color: "bg-orange-400 dark:bg-orange-300" },
-    { title: "Receipts", color: "bg-purple-400 dark:bg-purple-300" },
-  ],
-  mails: [
-    {
-      name: "Nora Patel",
-      email: "nora@acme.co",
-      subject: "Welcome to Acme Mail",
-      date: "08:15 AM",
-      teaser:
-        "Hi there — here's a quick tour of your new inbox.\nPin, label, and schedule messages to stay organized.",
-    },
-    {
-      name: "Stripe",
-      email: "no-reply@stripe.com",
-      subject: "Your payout has arrived",
-      date: "Yesterday",
-      teaser:
-        "A payout of $3,245.90 was sent to your bank account.\nView details in your dashboard.",
-    },
-    {
-      name: "GitHub",
-      email: "noreply@github.com",
-      subject: "New activity on acme/app",
-      date: "Tue",
-      teaser:
-        "3 pull requests need your review. CI passed on main.\nClick to open the review queue.",
-    },
-    {
-      name: "Ava Chen",
-      email: "ava.chen@example.com",
-      subject: "Agenda for Friday standup",
-      date: "Mon",
-      teaser:
-        "Let's cover onboarding, billing bugs, and Q4 goals.\nReply with anything you want to add.",
-    },
-    {
-      name: "Figma",
-      email: "updates@figma.com",
-      subject: "What's new in Figma",
-      date: "Sep 12",
-      teaser:
-        "Variables, auto layout improvements, and dev mode updates.\nWatch the recap to learn more.",
-    },
-    {
-      name: "Linear",
-      email: "bot@linear.app",
-      subject: "[ACME-432] Edit modal broken",
-      date: "Sep 11",
-      teaser: "Issue created by Wendy. Repro steps included.\nSeverity: high, priority: P1.",
-    },
-    {
-      name: "Airbnb",
-      email: "booking@airbnb.com",
-      subject: "Your trip to Kyoto",
-      date: "Sep 10",
-      teaser: "Get ready for your stay. Check-in details and local recommendations inside.",
-    },
-    {
-      name: "Notion",
-      email: "team@notion.so",
-      subject: "Weekly team recap",
-      date: "Sep 09",
-      teaser:
-        "Marketing shipped pricing page revamp. Eng closed 14 issues.\nSee full notes in the doc.",
-    },
-  ],
-};
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const [activeItem, setActiveItem] = React.useState(data.navMain[0]);
-  const [mails, setMails] = React.useState(data.mails);
-  const [query, setQuery] = React.useState("");
-  const { setOpen } = useSidebar();
-  const { setSelectedMail } = useMail();
-
-  const filteredMails = React.useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return mails;
-    return mails.filter((m) =>
-      [m.name, m.email, m.subject, m.teaser].join("\n").toLowerCase().includes(q),
-    );
-  }, [mails, query]);
-
-  return (
-    <div className="flex" {...props}>
-      {/* Icon rail */}
-      <Sidebar
-        style={{ "--sidebar-width": "12rem" } as React.CSSProperties}
-        collapsible="none"
-        className="border-e p-2 px-1"
-      >
-        <SidebarHeader>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
-                <a href="#">
-                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-accent text-sidebar-accent-foreground">
-                    <Box className="size-4" />
-                  </div>
-                  <div className="grid flex-1 text-start text-body leading-tight">
-                    <span className="truncate font-medium">Acme Inc</span>
-                    <span className="truncate text-meta">Enterprise</span>
-                  </div>
-                </a>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarHeader>
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupContent className="px-1.5 md:px-0">
-              <SidebarMenu>
-                {data.navMain.map((item) => (
-                  <SidebarMenuItem key={item.title}>
-                    <SidebarMenuButton
-                      onClick={() => {
-                        setActiveItem(item);
-                        const shuffled = [...data.mails].sort(() => Math.random() - 0.5);
-                        setMails(shuffled.slice(0, Math.max(5, Math.floor(Math.random() * 8) + 1)));
-                        setOpen(true);
-                      }}
-                      isActive={activeItem?.title === item.title}
-                      className="px-2.5 md:px-2"
-                    >
-                      <item.icon />
-                      <span>{item.title}</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-          <SidebarGroup>
-            <SidebarGroupLabel className="px-1.5 text-meta md:px-0">Labels</SidebarGroupLabel>
-            <SidebarGroupContent className="px-1.5 md:px-0">
-              <SidebarMenu>
-                {data.labels.map((label) => (
-                  <SidebarMenuItem key={label.title}>
-                    <SidebarMenuButton asChild className="px-2.5 md:px-2">
-                      <div className="flex items-center gap-3">
-                        <div className={`h-3 w-3 rounded ${label.color}`} />
-                        <span>{label.title}</span>
-                      </div>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-        <SidebarFooter>
-          <NavUser user={data.user} />
-        </SidebarFooter>
-      </Sidebar>
-
-      {/* Mail list */}
-      <Sidebar collapsible="none" className="hidden min-w-96 flex-1 border-e md:flex">
-        <SidebarHeader className="gap-3.5 border-b p-4">
-          <div className="flex w-full items-center justify-between">
-            <div className="text-subtitle font-medium text-foreground">{activeItem?.title}</div>
-          </div>
-          <SidebarInput
-            placeholder="Type to search..."
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-          />
-        </SidebarHeader>
-        <SidebarContent>
-          <SidebarGroup className="px-0 pt-0">
-            <SidebarGroupContent>
-              {filteredMails.length === 0 && (
-                <div className="p-4 text-body text-muted-foreground">No results</div>
-              )}
-              {filteredMails.map((mail) => (
-                <a
-                  href="#"
-                  key={mail.email}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setSelectedMail(mail);
-                  }}
-                  className="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-body leading-tight hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-                >
-                  <div className="flex w-full items-center gap-2">
-                    <span>{mail.name}</span>
-                    <span className="ms-auto text-meta">{mail.date}</span>
-                  </div>
-                  <span className="font-medium">{mail.subject}</span>
-                  <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-meta">
-                    {mail.teaser}
-                  </span>
-                </a>
-              ))}
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-      </Sidebar>
-    </div>
-  );
-}

package/src/blocks/sidebar-04/mail-context.tsx

@@ -1,29 +0,0 @@
-/** sidebar-04 — mail selection context (copy-owned block). */
-"use client";
-
-import * as React from "react";
-
-export type Mail = {
-  name: string;
-  email: string;
-  subject: string;
-  date: string;
-  teaser: string;
-  labels?: string[];
-};
-
-type MailContextValue = { selectedMail: Mail | null; setSelectedMail: (mail: Mail | null) => void };
-
-const MailContext = React.createContext<MailContextValue | undefined>(undefined);
-
-export function MailProvider({ children }: { children: React.ReactNode }) {
-  const [selectedMail, setSelectedMail] = React.useState<Mail | null>(null);
-  const value = React.useMemo(() => ({ selectedMail, setSelectedMail }), [selectedMail]);
-  return <MailContext.Provider value={value}>{children}</MailContext.Provider>;
-}
-
-export function useMail() {
-  const ctx = React.useContext(MailContext);
-  if (!ctx) throw new Error("useMail must be used within MailProvider");
-  return ctx;
-}

package/src/blocks/sidebar-04/nav-user.tsx

@@ -1,6 +0,0 @@
-/**
- * sidebar-04 — account menu. The shared `NavUser` nav primitive lives in
- * `@elabs-ai/components-ui` (#99); this block re-exports it rather than forking a local copy
- * (which drifts). The block's `app-sidebar.tsx` already imports it from `@elabs-ai/components-ui`.
- */
-export { NavUser } from "@elabs-ai/components-ui";

package/src/blocks/sidebar-04/sidebar-04.stories.tsx

@@ -1,150 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, waitFor } from "storybook/test";
-import { SidebarInset, SidebarProvider } from "@elabs-ai/components-ui";
-import { AppSidebar } from "./app-sidebar";
-import { MailProvider, useMail } from "./mail-context";
-
-function MailPreview() {
-  const { selectedMail } = useMail();
-  if (!selectedMail) {
-    return (
-      <div className="flex h-full items-center justify-center text-body text-muted-foreground">
-        Select an email to preview
-      </div>
-    );
-  }
-  return (
-    <div className="flex h-full flex-col">
-      <div className="border-b p-4">
-        <div className="text-title font-semibold">{selectedMail.subject}</div>
-        <div className="text-body text-muted-foreground">
-          From: {selectedMail.name} ({selectedMail.email})
-        </div>
-      </div>
-      <div className="whitespace-pre-wrap p-4 text-body">{`${selectedMail.teaser}\n\nThis is a sample message body for the selected email.`}</div>
-    </div>
-  );
-}
-
-const meta = {
-  title: "Layout/App Shell/Mail",
-  parameters: { layout: "fullscreen" },
-} satisfies Meta;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <SidebarProvider>
-      <MailProvider>
-        <div className="flex h-dvh w-full">
-          <AppSidebar />
-          <SidebarInset>
-            <div className="m-2 flex-1 rounded-xl border">
-              <MailPreview />
-            </div>
-          </SidebarInset>
-        </div>
-      </MailProvider>
-    </SidebarProvider>
-  ),
-};
-
-/**
- * #397: `layout-app-shell-mail--default` was the worst-measured real screen
- * for the density type dial (10 of 49 scaling text nodes) because
- * `app-sidebar.tsx`'s 8 raw `text‑sm`/`text‑xs`/`text‑base` utilities were
- * immune to `data-density` — see `.claude/rules/styling-and-tokens.md` "Type
- * is a role, not a size". All 8 now read a `text-<role>` utility instead, so
- * every one of these text nodes scales. Two columns pin `data-density` on a
- * plain wrapping div — NOT `<ThemeProvider>`, which writes `data-density` to
- * `document.documentElement` and would race two columns — mirroring
- * `Foundations/Typography → Density scale`'s pattern. Representative sample:
- * one node per converted role class is enough, since every site sharing a
- * role resolves to the identical computed style.
- */
-export const DensityComparison: Story = {
-  name: "Density comparison (#397)",
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "The 8 raw `text‑sm`/`text‑xs`/`text‑base` sites in `app-sidebar.tsx` " +
-          "now read `text-body`/`text-meta`/`text-subtitle`, so they scale with " +
-          "`data-density` like the rest of the shell. `text‑sm` → `text-body` " +
-          "and `text‑base` → `text-subtitle` are documented no-ops (identical " +
-          "size + line-height); `text‑xs` → `text-meta` also adopts " +
-          "`font-weight: 500` + `letter-spacing: 0.01em` (a real, deliberate " +
-          "shift, not a no-op).",
-      },
-    },
-  },
-  render: () => (
-    <div className="flex gap-8">
-      {(["compact", "comfortable", "spacious"] as const).map((mode) => (
-        <div data-density={mode} data-testid={`density-${mode}`} key={mode}>
-          <p className="mb-2 text-caption text-muted-foreground">{mode}</p>
-          <div className="flex h-[420px] w-[520px] overflow-hidden rounded-lg border">
-            <SidebarProvider>
-              <MailProvider>
-                <AppSidebar />
-              </MailProvider>
-            </SidebarProvider>
-          </div>
-        </div>
-      ))}
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const px = (el: Element) => parseFloat(getComputedStyle(el).fontSize);
-    const compact = canvasElement.querySelector('[data-testid="density-compact"]');
-    const comfortable = canvasElement.querySelector('[data-testid="density-comfortable"]');
-    const spacious = canvasElement.querySelector('[data-testid="density-spacious"]');
-    expect(compact).not.toBeNull();
-    expect(comfortable).not.toBeNull();
-    expect(spacious).not.toBeNull();
-
-    // `text‑xs` → `text-meta` sites ("Enterprise", "Labels", mail date, mail
-    // teaser): 11.25px compact / 12px comfortable / 12.75px spacious,
-    // matching Gantt's timescale.
-    await waitFor(() => {
-      expect(compact?.querySelector(".text-meta")).not.toBeNull();
-      expect(comfortable?.querySelector(".text-meta")).not.toBeNull();
-      expect(spacious?.querySelector(".text-meta")).not.toBeNull();
-    });
-    const metaCompact = compact?.querySelector(".text-meta") as Element;
-    const metaComfortable = comfortable?.querySelector(".text-meta") as Element;
-    const metaSpacious = spacious?.querySelector(".text-meta") as Element;
-    expect(px(metaComfortable)).toBe(12);
-    expect(px(metaCompact)).toBe(11.25);
-    expect(px(metaSpacious)).toBe(12.75);
-    expect(px(metaCompact)).toBeLessThan(px(metaComfortable));
-    expect(px(metaSpacious)).toBeGreaterThan(px(metaComfortable));
-
-    // `text‑sm` → `text-body` sites ("Acme Inc" wrapper, mail row): a
-    // documented visual no-op at `comfortable` (14px, identical to a pre-#397
-    // build), still scales at `compact` (13.125px) / `spacious` (14.875px).
-    const bodyCompact = compact?.querySelector(".text-body") as Element;
-    const bodyComfortable = comfortable?.querySelector(".text-body") as Element;
-    const bodySpacious = spacious?.querySelector(".text-body") as Element;
-    expect(bodyCompact).not.toBeNull();
-    expect(bodyComfortable).not.toBeNull();
-    expect(bodySpacious).not.toBeNull();
-    expect(px(bodyComfortable)).toBe(14);
-    expect(px(bodyCompact)).toBe(13.125);
-    expect(px(bodySpacious)).toBe(14.875);
-
-    // `text‑base` → `text-subtitle` site (the mail-list header title, e.g.
-    // "Inbox"): 16px comfortable (identical to a pre-#397 `text‑base` build)
-    // / 15px compact / 17px spacious.
-    const subtitleCompact = compact?.querySelector(".text-subtitle") as Element;
-    const subtitleComfortable = comfortable?.querySelector(".text-subtitle") as Element;
-    const subtitleSpacious = spacious?.querySelector(".text-subtitle") as Element;
-    expect(subtitleCompact).not.toBeNull();
-    expect(subtitleComfortable).not.toBeNull();
-    expect(subtitleSpacious).not.toBeNull();
-    expect(px(subtitleComfortable)).toBe(16);
-    expect(px(subtitleCompact)).toBe(15);
-    expect(px(subtitleSpacious)).toBe(17);
-  },
-};