@boxcustodia/library 2.0.0-alpha.13 → 2.0.0-alpha.15

package/src/components/tabs/tabs.stories.tsx

@@ -1,182 +1,399 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
 import {
-  Button,
-  Input,
-  TabContent,
-  TabList,
-  Tabs,
-  TabTrigger,
-} from "../../components";
-import { useStep } from "../../hooks";
+  BellIcon,
+  CreditCardIcon,
+  LockIcon,
+  PaletteIcon,
+  UserIcon,
+} from "lucide-react";
+import React from "react";
+import { Button } from "../../components";
+import { Tabs, TabsList, TabsPanel, TabsPrimitive, TabsTab } from "./tabs";
 
+/**
+ * Accessible tab component built on Base UI Tabs primitives.
+ *
+ * `variant` lives on `TabsList`, not on `Tabs`. Two variants are available:
+ * `"underline"` (default) renders a line indicator at the edge of the active
+ * tab; `"background"` renders a rounded background behind the active tab.
+ *
+ * Use `value` + `onValueChange` for controlled state.
+ * Set `orientation="vertical"` on `Tabs` to switch to a column layout.
+ */
 const meta: Meta<typeof Tabs> = {
-  title: "Data display/Tabs",
+  title: "Components/Tabs",
   component: Tabs,
-  args: {},
+  parameters: {
+    layout: "centered",
+  },
+  subcomponents: {
+    TabsList: TabsList as React.ComponentType<unknown>,
+    TabsTab: TabsTab as React.ComponentType<unknown>,
+    TabsPanel: TabsPanel as React.ComponentType<unknown>,
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof Tabs>;
 
-const AccountStep = () => {
-  return (
-    <>
-      <Input name="name" />
-      <Input name="lastname" />
-    </>
-  );
+// ---------------------------------------------------------------------------
+// Shared content blocks
+// ---------------------------------------------------------------------------
+
+const AccountPanel = () => (
+  <div className="space-y-4 py-2">
+    <div className="flex items-center gap-4">
+      <div className="size-14 rounded-full bg-muted flex items-center justify-center text-muted-foreground">
+        <UserIcon className="size-6" />
+      </div>
+      <div>
+        <p className="font-medium">John Doe</p>
+        <p className="text-sm text-muted-foreground">john@example.com</p>
+      </div>
+    </div>
+    <div className="grid gap-3">
+      <div className="grid gap-1.5">
+        <label className="text-sm font-medium">Display name</label>
+        <input
+          defaultValue="John Doe"
+          className="h-9 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-ring"
+        />
+      </div>
+      <div className="grid gap-1.5">
+        <label className="text-sm font-medium">Email</label>
+        <input
+          defaultValue="john@example.com"
+          type="email"
+          className="h-9 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-ring"
+        />
+      </div>
+    </div>
+    <div className="flex justify-end">
+      <Button size="sm">Save changes</Button>
+    </div>
+  </div>
+);
+
+const SecurityPanel = () => (
+  <div className="space-y-3 py-2">
+    {[
+      {
+        label: "Password",
+        meta: "Last changed 3 months ago",
+        action: "Change",
+      },
+      {
+        label: "Two-factor authentication",
+        meta: "Add an extra layer of security",
+        action: "Enable",
+      },
+      {
+        label: "Active sessions",
+        meta: "2 devices currently signed in",
+        action: "Manage",
+      },
+    ].map(({ label, meta, action }) => (
+      <div
+        key={label}
+        className="flex items-center justify-between rounded-lg border p-3.5"
+      >
+        <div>
+          <p className="text-sm font-medium">{label}</p>
+          <p className="text-xs text-muted-foreground">{meta}</p>
+        </div>
+        <Button variant="outline" size="sm">
+          {action}
+        </Button>
+      </div>
+    ))}
+  </div>
+);
+
+const NotificationsPanel = () => (
+  <div className="space-y-3 py-2">
+    {[
+      { title: "Email notifications", desc: "Weekly digest and alerts" },
+      { title: "Push notifications", desc: "Desktop and mobile" },
+      { title: "Security alerts", desc: "Unusual sign-in activity" },
+    ].map(({ title, desc }) => (
+      <div key={title} className="flex items-center justify-between py-1">
+        <div>
+          <p className="text-sm font-medium">{title}</p>
+          <p className="text-xs text-muted-foreground">{desc}</p>
+        </div>
+        <div className="size-5 rounded border border-input bg-background" />
+      </div>
+    ))}
+  </div>
+);
+
+const BillingPanel = () => (
+  <div className="space-y-3 py-2">
+    <div className="rounded-lg border p-4 flex items-start gap-3">
+      <CreditCardIcon className="size-5 mt-0.5 text-muted-foreground" />
+      <div className="flex-1">
+        <p className="text-sm font-medium">Pro plan · $12/month</p>
+        <p className="text-xs text-muted-foreground">Renews on Jun 1, 2025</p>
+      </div>
+      <Button variant="outline" size="sm">
+        Manage
+      </Button>
+    </div>
+    <div className="rounded-lg border p-4">
+      <p className="text-sm font-medium mb-2">Payment method</p>
+      <p className="text-sm text-muted-foreground">Visa ending in 4242</p>
+    </div>
+  </div>
+);
+
+const AppearancePanel = () => (
+  <div className="space-y-3 py-2">
+    <div>
+      <p className="text-sm font-medium mb-2">Theme</p>
+      <div className="flex gap-2">
+        {["Light", "Dark", "System"].map((t) => (
+          <button
+            key={t}
+            className="rounded-md border px-3 py-1.5 text-sm data-[active]:border-primary data-[active]:bg-primary/5 cursor-pointer"
+            data-active={t === "Light" ? "" : undefined}
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+    </div>
+    <div>
+      <p className="text-sm font-medium mb-2">Density</p>
+      <div className="flex gap-2">
+        {["Compact", "Comfortable", "Spacious"].map((d) => (
+          <button
+            key={d}
+            className="rounded-md border px-3 py-1.5 text-sm cursor-pointer"
+          >
+            {d}
+          </button>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[480px] h-[340px]">
+      <TabsList>
+        <TabsTab value="account">Account</TabsTab>
+        <TabsTab value="security">Security</TabsTab>
+        <TabsTab value="notifications">Notifications</TabsTab>
+      </TabsList>
+      <TabsPanel value="account">
+        <AccountPanel />
+      </TabsPanel>
+      <TabsPanel value="security">
+        <SecurityPanel />
+      </TabsPanel>
+      <TabsPanel value="notifications">
+        <NotificationsPanel />
+      </TabsPanel>
+    </Tabs>
+  ),
 };
 
-const PasswordStep = () => {
-  return (
-    <>
-      <Input name="password" type="password" />
-      <Input name="confirmation" type="password" />
-    </>
-  );
+export const Background: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[480px] h-[340px]">
+      <TabsList variant="background">
+        <TabsTab value="account">Account</TabsTab>
+        <TabsTab value="security">Security</TabsTab>
+        <TabsTab value="notifications">Notifications</TabsTab>
+      </TabsList>
+      <TabsPanel value="account">
+        <AccountPanel />
+      </TabsPanel>
+      <TabsPanel value="security">
+        <SecurityPanel />
+      </TabsPanel>
+      <TabsPanel value="notifications">
+        <NotificationsPanel />
+      </TabsPanel>
+    </Tabs>
+  ),
 };
 
-const FileStep = () => {
-  return (
-    <>
-      <Input name="file" type="file" />
-    </>
-  );
+export const Vertical: Story = {
+  render: () => (
+    <Tabs
+      defaultValue="account"
+      orientation="vertical"
+      className="w-[620px] h-[300px]"
+    >
+      <TabsList className="w-44 shrink-0">
+        <TabsTab value="account">Account</TabsTab>
+        <TabsTab value="security">Security</TabsTab>
+        <TabsTab value="billing">Billing</TabsTab>
+        <TabsTab value="appearance">Appearance</TabsTab>
+      </TabsList>
+      <div className="flex-1 min-w-0">
+        <TabsPanel value="account">
+          <AccountPanel />
+        </TabsPanel>
+        <TabsPanel value="security">
+          <SecurityPanel />
+        </TabsPanel>
+        <TabsPanel value="billing">
+          <BillingPanel />
+        </TabsPanel>
+        <TabsPanel value="appearance">
+          <AppearancePanel />
+        </TabsPanel>
+      </div>
+    </Tabs>
+  ),
 };
 
-const steps = [
-  {
-    value: "account",
-    content: <AccountStep />,
-  },
-  {
-    value: "password",
-    content: <PasswordStep />,
-  },
-  {
-    value: "config",
-    content: <FileStep />,
-  },
-];
+export const PillVertical: Story = {
+  render: () => (
+    <Tabs
+      defaultValue="account"
+      orientation="vertical"
+      className="w-[620px] h-[300px]"
+    >
+      <TabsList variant="background" className="w-44 shrink-0">
+        <TabsTab value="account">Account</TabsTab>
+        <TabsTab value="security">Security</TabsTab>
+        <TabsTab value="billing">Billing</TabsTab>
+        <TabsTab value="appearance">Appearance</TabsTab>
+      </TabsList>
+      <div className="flex-1 min-w-0">
+        <TabsPanel value="account">
+          <AccountPanel />
+        </TabsPanel>
+        <TabsPanel value="security">
+          <SecurityPanel />
+        </TabsPanel>
+        <TabsPanel value="billing">
+          <BillingPanel />
+        </TabsPanel>
+        <TabsPanel value="appearance">
+          <AppearancePanel />
+        </TabsPanel>
+      </div>
+    </Tabs>
+  ),
+};
 
-export const Default: Story = {
-  render: () => {
-    return (
-      <Tabs defaultValue="account" className="container">
-        <TabList className="max-w-[500px] mx-auto">
-          <TabTrigger value="account">Account</TabTrigger>
-          <TabTrigger value="password">Password</TabTrigger>
-          <TabTrigger value="config">File</TabTrigger>
-        </TabList>
-
-        <TabContent value="account" className="space-y-2 min-h-[150px]">
-          <AccountStep />
-        </TabContent>
-
-        <TabContent value="password" className="space-y-2 min-h-[150px]">
-          <PasswordStep />
-        </TabContent>
-
-        <TabContent value="config" className="space-y-2 min-h-[150px]">
-          <FileStep />
-        </TabContent>
-      </Tabs>
-    );
-  },
+export const WithIcons: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[480px] h-[340px]">
+      <TabsList>
+        <TabsTab value="account">
+          <UserIcon />
+          Account
+        </TabsTab>
+        <TabsTab value="security">
+          <LockIcon />
+          Security
+        </TabsTab>
+        <TabsTab value="notifications">
+          <BellIcon />
+          Notifications
+        </TabsTab>
+        <TabsTab value="appearance">
+          <PaletteIcon />
+          Appearance
+        </TabsTab>
+      </TabsList>
+      <TabsPanel value="account">
+        <AccountPanel />
+      </TabsPanel>
+      <TabsPanel value="security">
+        <SecurityPanel />
+      </TabsPanel>
+      <TabsPanel value="notifications">
+        <NotificationsPanel />
+      </TabsPanel>
+      <TabsPanel value="appearance">
+        <AppearancePanel />
+      </TabsPanel>
+    </Tabs>
+  ),
 };
 
 /**
- * Se puede utilizar el hook `useStep` para facilitar el manejo de estado y validaciones
+ * Any tab can be disabled via the `disabled` prop on `TabsTab`.
+ * The indicator skips over disabled tabs.
  */
-export const Steps: Story = {
-  render: () => {
-    const { step, isFirstStep, isLastStep, next, back, findAndGo } =
-      useStep(steps);
-
-    return (
-      <Tabs
-        value={step.value}
-        onChange={(step: string) => findAndGo({ value: step })}
-        className="container"
-      >
-        <TabList className="max-w-[500px] mx-auto">
-          {steps.map(({ value }) => (
-            <TabTrigger key={value} value={value} className="capitalize">
-              {value}
-            </TabTrigger>
-          ))}
-        </TabList>
-
-        {steps.map(({ value, content }) => (
-          <TabContent
-            key={value}
-            value={value}
-            className="space-y-2 min-h-[150px]"
-          >
-            {content}
-          </TabContent>
-        ))}
-        <div className="flex justify-end mt-2 gap-x-2">
-          <Button variant="ghost" disabled={isFirstStep} onClick={back}>
-            Prev
-          </Button>
-          <Button disabled={isLastStep} onClick={next}>
-            Next
-          </Button>
-        </div>
-      </Tabs>
-    );
-  },
+export const Disabled: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[480px] h-[340px]">
+      <TabsList>
+        <TabsTab value="account">Account</TabsTab>
+        <TabsTab value="security">Security</TabsTab>
+        <TabsTab value="billing" disabled>
+          Billing
+        </TabsTab>
+        <TabsTab value="enterprise" disabled>
+          Enterprise
+        </TabsTab>
+      </TabsList>
+      <TabsPanel value="account">
+        <AccountPanel />
+      </TabsPanel>
+      <TabsPanel value="security">
+        <SecurityPanel />
+      </TabsPanel>
+    </Tabs>
+  ),
 };
 
 /**
- * Se puede utilizar el prop `variant` para cambiar el estilo del indicador
- * `default` (línea) y `background` (fondo)
+ * Use `TabsPrimitive` to access the raw Base UI API when the styled wrappers
+ * don't cover your use case — custom indicators, additional ARIA attributes, etc.
  */
-export const IndicatorVariant: Story = {
-  render: () => {
-    const [variant, setVariant] = useState<"default" | "background">("default");
-
-    return (
-      <div className="space-y-8">
-        <div className="flex items-center gap-4">
-          <label htmlFor="variant" className="text-sm font-medium">
-            Variant:
-          </label>
-          <select
-            id="variant"
-            value={variant}
-            onChange={(e) =>
-              setVariant(e.target.value as "default" | "background")
-            }
-            className="px-3 py-1 rounded border"
-          >
-            <option value="default">Default</option>
-            <option value="background">Background</option>
-          </select>
-        </div>
-
-        <Tabs defaultValue="account" variant={variant}>
-          <TabList>
-            <TabTrigger value="account">Account</TabTrigger>
-            <TabTrigger value="password">Password</TabTrigger>
-            <TabTrigger value="config">Config</TabTrigger>
-          </TabList>
-
-          <TabContent value="account" className="space-y-2 min-h-[150px]">
-            <div>Account</div>
-          </TabContent>
-
-          <TabContent value="password" className="space-y-2 min-h-[150px]">
-            <div>Password</div>
-          </TabContent>
-
-          <TabContent value="config" className="space-y-2 min-h-[150px]">
-            <div>Config</div>
-          </TabContent>
-        </Tabs>
-      </div>
-    );
+export const Primitive: Story = {
+  render: () => (
+    <TabsPrimitive.Root
+      defaultValue="account"
+      className="w-[480px] h-[340px] flex flex-col gap-2"
+    >
+      <TabsPrimitive.List className="flex gap-1 border-b">
+        <TabsPrimitive.Tab
+          value="account"
+          className="px-4 py-2 text-sm font-medium data-active:border-b-2 data-active:border-primary cursor-pointer"
+        >
+          Account
+        </TabsPrimitive.Tab>
+        <TabsPrimitive.Tab
+          value="security"
+          className="px-4 py-2 text-sm font-medium data-active:border-b-2 data-active:border-primary cursor-pointer"
+        >
+          Security
+        </TabsPrimitive.Tab>
+      </TabsPrimitive.List>
+      <TabsPrimitive.Panel value="account">
+        <AccountPanel />
+      </TabsPrimitive.Panel>
+      <TabsPrimitive.Panel value="security">
+        <SecurityPanel />
+      </TabsPrimitive.Panel>
+    </TabsPrimitive.Root>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<TabsPrimitive.Root defaultValue="account">
+  <TabsPrimitive.List>
+    <TabsPrimitive.Tab value="account">Account</TabsPrimitive.Tab>
+    <TabsPrimitive.Tab value="security">Security</TabsPrimitive.Tab>
+  </TabsPrimitive.List>
+  <TabsPrimitive.Panel value="account">…</TabsPrimitive.Panel>
+  <TabsPrimitive.Panel value="security">…</TabsPrimitive.Panel>
+</TabsPrimitive.Root>`,
+      },
+    },
   },
 };

package/src/components/tabs/tabs.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import { TabContent, TabList, Tabs, TabTrigger } from "../../components";
-import { click } from "../../utils";
+import { TabList, Tabs, TabsContent, TabsTrigger } from "../../components";
+import { click } from "../../utils/tests";
 
 describe("Tabs component", () => {
   it("should render correctly", () => {
@@ -14,8 +14,8 @@ describe("Tabs component", () => {
     render(
       <Tabs>
         <TabList>
-          <TabTrigger value="trigger">Trigger</TabTrigger>
-          <TabTrigger value="test">Test</TabTrigger>
+          <TabsTrigger value="trigger">Trigger</TabsTrigger>
+          <TabsTrigger value="test">Test</TabsTrigger>
         </TabList>
       </Tabs>,
     );
@@ -28,10 +28,10 @@ describe("Tabs component", () => {
     render(
       <Tabs defaultValue="trigger">
         <TabList>
-          <TabTrigger value="trigger">Trigger</TabTrigger>
-          <TabTrigger value="test">Test</TabTrigger>
+          <TabsTrigger value="trigger">Trigger</TabsTrigger>
+          <TabsTrigger value="test">Test</TabsTrigger>
         </TabList>
-        <TabContent value="trigger">Contenido de trigger</TabContent>
+        <TabsContent value="trigger">Contenido de trigger</TabsContent>
       </Tabs>,
     );
 
@@ -41,13 +41,13 @@ describe("Tabs component", () => {
   it("should be controlled", () => {
     const mock = vi.fn();
     render(
-      <Tabs value="trigger" onChange={mock}>
+      <Tabs value="trigger" onValueChange={mock}>
         <TabList>
-          <TabTrigger value="trigger">Trigger</TabTrigger>
-          <TabTrigger value="test">Test</TabTrigger>
+          <TabsTrigger value="trigger">Trigger</TabsTrigger>
+          <TabsTrigger value="test">Test</TabsTrigger>
         </TabList>
-        <TabContent value="trigger">Contenido de trigger</TabContent>
-        <TabContent value="test">Contenido de test</TabContent>
+        <TabsContent value="trigger">Contenido de trigger</TabsContent>
+        <TabsContent value="test">Contenido de test</TabsContent>
       </Tabs>,
     );