diff --git a/.changeset/add-tabs-component.md b/.changeset/add-tabs-component.md new file mode 100644 index 00000000..7951d861 --- /dev/null +++ b/.changeset/add-tabs-component.md @@ -0,0 +1,18 @@ +--- +"@tailor-platform/app-shell": minor +--- + +Add `Tabs` compound component for tab-based navigation, backed by Base UI's Tabs primitive. + +```tsx +import { Tabs } from "@tailor-platform/app-shell"; + + + + Overview + Projects + + Overview content + Projects content +; +``` diff --git a/docs/components/tabs.md b/docs/components/tabs.md new file mode 100644 index 00000000..fed9be3e --- /dev/null +++ b/docs/components/tabs.md @@ -0,0 +1,128 @@ +--- +title: Tabs +description: Tab navigation with a compound component API +--- + +# Tabs + +The `Tabs` component provides tab-based navigation for toggling between related panels on the same page. It is backed by Base UI's Tabs primitive. + +## Import + +```tsx +import { Tabs } from "@tailor-platform/app-shell"; +``` + +## Basic Usage + +```tsx + + + Overview + Projects + Account + + Overview content + Projects content + Account content + +``` + +## Sub-components + +| Sub-component | Description | +| ------------- | -------------------------------------------------------------- | +| `Tabs.Root` | Manages tab selection state | +| `Tabs.List` | Groups the individual tab buttons | +| `Tabs.Tab` | An interactive tab button that toggles the corresponding panel | +| `Tabs.Panel` | A panel displayed when the corresponding tab is active | + +## Props + +### Tabs.Root Props + +| Prop | Type | Default | Description | +| --------------- | ---------------------------------- | ----------- | --------------------------------------- | +| `defaultValue` | `Tabs.Tab.Value` | `0` | Initial active tab value (uncontrolled) | +| `value` | `Tabs.Tab.Value` | - | Controlled active tab value | +| `onValueChange` | `(value: any) => void` | - | Callback when the active tab changes | +| `variant` | `'default' \| 'line' \| 'capsule'` | `'default'` | Visual style of the tabs | +| `className` | `string` | - | Additional CSS classes for root | +| `children` | `React.ReactNode` | - | Tabs sub-components | + +### Tabs.List Props + +Accepts `className` and all standard HTML `
` props. + +### Tabs.Tab Props + +| Prop | Type | Default | Description | +| ---------- | ---------------- | ------- | ---------------------------------- | +| `value` | `Tabs.Tab.Value` | - | **Required.** The value of the tab | +| `disabled` | `boolean` | - | Whether the tab is disabled | + +Also accepts `className` and all standard HTML `
Content 1
"`; + +exports[`Tabs > snapshots > default tabs 1`] = `"
Content 1
"`; + +exports[`Tabs > snapshots > line variant 1`] = `"
Content 1
"`; + +exports[`Tabs > snapshots > tabs with disabled tab 1`] = `"
Content 1
"`; + +exports[`Tabs > snapshots > tabs with three tabs 1`] = `"
Overview content
"`; diff --git a/packages/core/src/components/tabs.test.tsx b/packages/core/src/components/tabs.test.tsx new file mode 100644 index 00000000..ffc98aa2 --- /dev/null +++ b/packages/core/src/components/tabs.test.tsx @@ -0,0 +1,180 @@ +import { afterEach, describe, expect, it, vi } from "vitest"; +import { cleanup, render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { Tabs } from "./tabs"; + +afterEach(() => { + cleanup(); +}); + +describe("Tabs", () => { + // ========================================================================== + // Snapshots — verify full DOM structure for tabs variations + // ========================================================================== + + describe("snapshots", () => { + it("default tabs", () => { + const { container } = render( + + + Tab 1 + Tab 2 + + Content 1 + Content 2 + , + ); + expect(container.innerHTML).toMatchSnapshot(); + }); + + it("tabs with three tabs", () => { + const { container } = render( + + + Overview + Projects + Account + + Overview content + Projects content + Account content + , + ); + expect(container.innerHTML).toMatchSnapshot(); + }); + + it("tabs with disabled tab", () => { + const { container } = render( + + + Tab 1 + + Tab 2 + + + Content 1 + Content 2 + , + ); + expect(container.innerHTML).toMatchSnapshot(); + }); + + it("line variant", () => { + const { container } = render( + + + Tab 1 + Tab 2 + + Content 1 + Content 2 + , + ); + expect(container.innerHTML).toMatchSnapshot(); + }); + + it("capsule variant", () => { + const { container } = render( + + + Tab 1 + Tab 2 + + Content 1 + Content 2 + , + ); + expect(container.innerHTML).toMatchSnapshot(); + }); + }); + + it("renders all tabs", () => { + render( + + + Tab 1 + Tab 2 + + Content 1 + Content 2 + , + ); + + expect(screen.getByText("Tab 1")).toBeDefined(); + expect(screen.getByText("Tab 2")).toBeDefined(); + }); + + it("displays the active panel content", () => { + render( + + + Tab 1 + Tab 2 + + Content 1 + Content 2 + , + ); + + expect(screen.getByText("Content 1")).toBeDefined(); + }); + + it("switches panel on tab click", async () => { + const user = userEvent.setup(); + + render( + + + Tab 1 + Tab 2 + + Content 1 + Content 2 + , + ); + + await user.click(screen.getByText("Tab 2")); + + await waitFor(() => { + expect(screen.getByText("Content 2")).toBeDefined(); + }); + }); + + it("calls onValueChange when tab is clicked", async () => { + const handleChange = vi.fn(); + const user = userEvent.setup(); + + render( + + + Tab 1 + Tab 2 + + Content 1 + Content 2 + , + ); + + await user.click(screen.getByText("Tab 2")); + + await waitFor(() => { + expect(handleChange).toHaveBeenCalled(); + expect(handleChange.mock.calls[0][0]).toBe("tab2"); + }); + }); + + it("supports controlled value", () => { + render( + + + Tab 1 + Tab 2 + + Content 1 + Content 2 + , + ); + + expect(screen.getByText("Content 2")).toBeDefined(); + }); +}); diff --git a/packages/core/src/components/tabs.tsx b/packages/core/src/components/tabs.tsx new file mode 100644 index 00000000..4afe385f --- /dev/null +++ b/packages/core/src/components/tabs.tsx @@ -0,0 +1,121 @@ +import * as React from "react"; +import { Tabs as BaseTabs } from "@base-ui/react/tabs"; + +import { cn } from "@/lib/utils"; + +type TabsVariant = "default" | "line" | "capsule"; + +const TabsVariantContext = React.createContext("default"); + +// Only the props relevant to the Tabs abstraction are picked from BaseTabs.Root. +// Base UI-internal props are intentionally excluded so that upstream changes +// don't leak as breaking changes to consumers. +type RootProps = Pick< + React.ComponentProps, + "defaultValue" | "value" | "onValueChange" +> & { + children: React.ReactNode; + className?: string; + variant?: TabsVariant; +}; + +/** + * The root component that manages tab selection state. + * + * @example + * ```tsx + * + * + * Overview + * Projects + * Account + * + * Overview content + * Projects content + * Account content + * + * ``` + */ +function Root({ className, children, variant = "default", ...props }: RootProps) { + return ( + + + {children} + + + ); +} +Root.displayName = "Tabs.Root"; + +/** Groups the individual tab buttons. */ +function List({ className, children, ...props }: React.ComponentProps) { + const variant = React.useContext(TabsVariantContext); + return ( + + {children} + + ); +} +List.displayName = "Tabs.List"; + +/** An individual interactive tab button that toggles the corresponding panel. */ +function Tab({ className, children, ...props }: React.ComponentProps) { + const variant = React.useContext(TabsVariantContext); + return ( + + {children} + + ); +} +Tab.displayName = "Tabs.Tab"; + +/** A panel displayed when the corresponding tab is active. */ +function Panel({ className, children, ...props }: React.ComponentProps) { + return ( + + {children} + + ); +} +Panel.displayName = "Tabs.Panel"; + +export const Tabs = { + Root, + List, + Tab, + Panel, +}; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index daef45a1..2ac50c9e 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -116,6 +116,7 @@ export { Fieldset } from "./components/fieldset"; export { Form, type FormProps } from "./components/form"; export { Menu } from "./components/menu"; export { Sheet } from "./components/sheet"; +export { Tabs } from "./components/tabs"; export { Tooltip } from "./components/tooltip"; export { Select, type SelectAsyncFetcher } from "./components/select-standalone"; export { Combobox, type ComboboxAsyncFetcher } from "./components/combobox-standalone";