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

package/src/components/stepper/stepper.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  Stepper,
+  StepperContainer,
+  StepperContent,
+  StepperList,
+  StepperTrigger,
+} from "../../components";
+import { click } from "../../utils";
+
+describe("Stepper component", () => {
+  it("should render correctly", () => {
+    render(<StepperContainer data-testid="steps" />);
+    const component = screen.getByTestId("steps");
+    expect(component).toBeInTheDocument();
+  });
+
+  it("should show steps", () => {
+    render(
+      <StepperContainer>
+        <StepperList>
+          <StepperTrigger value={0} title="trigger"></StepperTrigger>
+          <StepperTrigger value={1} title="step"></StepperTrigger>
+        </StepperList>
+      </StepperContainer>,
+    );
+
+    expect(screen.getByText(/trigger/i)).toBeInTheDocument();
+    expect(screen.getByText(/step/i)).toBeInTheDocument();
+  });
+
+  it("should show step content", () => {
+    render(
+      <StepperContainer current={0}>
+        <StepperList>
+          <StepperTrigger value={0} title="trigger"></StepperTrigger>
+          <StepperTrigger value={1} title="test"></StepperTrigger>
+        </StepperList>
+        <StepperContent value={0}>Contenido de trigger</StepperContent>
+      </StepperContainer>,
+    );
+
+    expect(screen.getByText("Contenido de trigger")).toBeInTheDocument();
+  });
+
+  it("should be controlled", () => {
+    const mock = vi.fn();
+    render(
+      <StepperContainer value={0} onChange={mock}>
+        <StepperList>
+          <StepperTrigger value={0} title="trigger"></StepperTrigger>
+          <StepperTrigger value={1} title="test"></StepperTrigger>
+        </StepperList>
+        <StepperContent value={0}>Contenido de trigger</StepperContent>
+        <StepperContent value={1}>Contenido de test</StepperContent>
+      </StepperContainer>,
+    );
+
+    const testTrigger = screen.getByText("test");
+    click(testTrigger);
+
+    waitFor(() => {
+      expect(mock).toHaveBeenCalledWith(1);
+    });
+  });
+
+  it("should show step content", () => {
+    const mock = vi.fn();
+    render(
+      <Stepper
+        current={0}
+        onChange={mock}
+        items={[
+          { title: "trigger", content: "Contenido de trigger" },
+          { title: "step1", content: "Contenido de step1" },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText("Contenido de trigger")).toBeInTheDocument();
+
+    const testTrigger = screen.getByText("step1");
+    click(testTrigger);
+
+    waitFor(() => {
+      expect(mock).toHaveBeenCalledWith(1);
+      expect(screen.getByText("Contenido de step1")).toBeInTheDocument();
+    });
+  });
+});

package/src/components/switch/index.ts

@@ -0,0 +1 @@
+export * from "./switch";

package/src/components/switch/switch.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useArgs } from "storybook/preview-api";
+import { Button, Switch, SwitchRoot, SwitchThumb } from "../../components";
+
+/**
+ * Toggle switch built on Base UI. Built on `@base-ui/react/switch`.
+ *
+ * The composite `Switch` accepts a label via `label` prop or `children` —
+ * both work, `label` takes priority when both are provided.
+ * `controlFirst` (default `true`) places the switch before the label.
+ *
+ * Supports controlled state via `checked` + `onCheckedChange`, and native
+ * form integration via `name` + `required`.
+ *
+ * Reference: [Switch – Base UI](https://base-ui.com/react/components/switch)
+ */
+const meta: Meta<typeof Switch> = {
+  title: "Components/Switch",
+  component: Switch,
+  parameters: { layout: "centered" },
+  args: {
+    label: "Enable notifications",
+  },
+  argTypes: {
+    children: { control: false },
+    onCheckedChange: { control: false },
+    thumbProps: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {};
+
+/**
+ * Pass `label` or `children` — both render an accessible label next to the switch.
+ * `label` takes priority when both are provided.
+ */
+export const WithLabel: Story = {
+  args: {
+    label: "Dark mode",
+  },
+};
+
+/**
+ * `controlFirst={false}` places the label before the switch.
+ * Default is `true` (switch → label).
+ */
+export const ControlFirst: Story = {
+  args: {
+    controlFirst: false,
+    label: "Dark mode",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+/**
+ * Use `checked` + `onCheckedChange` for controlled mode.
+ */
+export const Controlled: Story = {
+  render: (args) => {
+    const [{ checked }, updateArgs] = useArgs();
+    return (
+      <Switch
+        {...args}
+        checked={checked}
+        onCheckedChange={(value) => updateArgs({ checked: value })}
+      />
+    );
+  },
+  args: {
+    defaultChecked: true,
+  },
+};
+
+/**
+ * Base UI injects a hidden `<input type="checkbox">` so `name` and `required`
+ * work with native `FormData` out of the box.
+ */
+export const Required: Story = {
+  args: {
+    name: "notifications",
+    required: true,
+    label: "I agree to receive marketing emails",
+  },
+  render: (args) => (
+    <form
+      className="space-y-2"
+      onSubmit={(event) => {
+        event.preventDefault();
+        const data = new FormData(event.currentTarget);
+        alert(`Value: ${data.get("notifications")}`);
+      }}
+    >
+      <Switch {...args} />
+      <Button type="submit">Submit</Button>
+    </form>
+  ),
+};
+
+/**
+ * Direct composition with primitives for full structural control.
+ *
+ * ```tsx
+ * <SwitchRoot>
+ *   <SwitchThumb />
+ * </SwitchRoot>
+ * ```
+ */
+export const Primitive: Story = {
+  render: () => (
+    <SwitchRoot>
+      <SwitchThumb />
+    </SwitchRoot>
+  ),
+};

package/src/components/switch/switch.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { act } from "react";
+import { describe, expect, it } from "vitest";
+import { Switch } from "../../components";
+
+describe("Switch component", () => {
+  it("should be checked", () => {
+    render(<Switch name="Switch" data-testid="Switch" checked />);
+    const checkbox = screen.getByTestId("Switch");
+    expect(checkbox).toBeChecked();
+  });
+
+  it("should toggle on click", () => {
+    render(<Switch name="Switch" data-testid="Switch" />);
+    const checkbox = screen.getByTestId("Switch");
+    expect(checkbox).not.toBeChecked();
+
+    act(() => checkbox.click());
+    expect(checkbox).toBeChecked();
+
+    act(() => checkbox.click());
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it("should be disabled", () => {
+    render(<Switch name="Switch" data-testid="Switch" disabled />);
+    const checkbox = screen.getByTestId("Switch");
+    expect(checkbox).toBeDisabled();
+  });
+});

package/src/components/switch/switch.tsx

@@ -0,0 +1,86 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import type * as React from "react";
+import { useId } from "react";
+import { cn } from "../../lib";
+import { Label } from "../label";
+
+export function SwitchRoot({
+  className,
+  ...props
+}: SwitchPrimitive.Root.Props): React.ReactElement {
+  return (
+    <SwitchPrimitive.Root
+      className={cn(
+        "peer inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200",
+        "[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        "data-checked:bg-primary data-unchecked:bg-input",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-64",
+        className,
+      )}
+      data-slot="switch"
+      {...props}
+    />
+  );
+}
+
+export function SwitchThumb({
+  className,
+  ...props
+}: SwitchPrimitive.Thumb.Props): React.ReactElement {
+  return (
+    <SwitchPrimitive.Thumb
+      className={cn(
+        "pointer-events-none block aspect-square h-full rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform",
+        "origin-left [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]",
+        "data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]",
+        "in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-110",
+        "in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)]",
+        className,
+      )}
+      data-slot="switch-thumb"
+      {...props}
+    />
+  );
+}
+
+interface SwitchProps extends Omit<SwitchPrimitive.Root.Props, "children"> {
+  children?: React.ReactNode;
+  label?: React.ReactNode;
+  tooltip?: string;
+  thumbProps?: SwitchPrimitive.Thumb.Props;
+  controlFirst?: boolean;
+}
+
+export function Switch({
+  children,
+  label,
+  className,
+  id,
+  thumbProps,
+  controlFirst = true,
+  tooltip,
+  ...props
+}: SwitchProps): React.ReactElement {
+  const generatedId = useId();
+  const idToUse = id ?? generatedId;
+  const labelContent = label ?? children;
+
+  return (
+    <div
+      className={cn(
+        "flex select-none items-center gap-x-2",
+        !controlFirst && "flex-row-reverse justify-end",
+      )}
+    >
+      <SwitchRoot id={idToUse} className={className} {...props}>
+        <SwitchThumb {...thumbProps} />
+      </SwitchRoot>
+      {labelContent && (
+        <Label htmlFor={idToUse} tooltip={tooltip}>
+          {labelContent}
+        </Label>
+      )}
+    </div>
+  );
+}

package/src/components/table/index.ts

@@ -0,0 +1,3 @@
+export * from "./table";
+export * from "./table.model";
+export * from "./table-primitives";

package/src/components/table/table-primitives.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { cn } from "../../lib";
+
+type ContainerProps = React.ComponentProps<"div">;
+type TableProps = React.ComponentProps<"table">;
+
+type TableRootProps = TableProps & {
+  containerClassName?: ContainerProps["className"];
+  containerProps?: ContainerProps;
+};
+
+const TableRoot = ({
+  className,
+  containerClassName,
+  containerProps,
+  ...props
+}: TableRootProps) => (
+  <div
+    data-slot="table-container"
+    className={cn(
+      "relative w-full overflow-auto rounded-md border",
+      containerClassName,
+    )}
+    {...containerProps}
+  >
+    <table
+      data-slot="table"
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+);
+
+type TableHeaderProps = React.ComponentProps<"thead">;
+
+const TableHeader = ({ className, ...props }: TableHeaderProps) => (
+  <thead
+    data-slot="table-header"
+    className={cn("[&_tr]:border-b", className)}
+    {...props}
+  />
+);
+
+type TableBodyProps = React.ComponentProps<"tbody">;
+
+const TableBody = ({ className, ...props }: TableBodyProps) => (
+  <tbody
+    data-slot="table-body"
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+);
+
+type TableFooterProps = React.ComponentProps<"tfoot">;
+
+const TableFooter = ({ className, ...props }: TableFooterProps) => (
+  <tfoot
+    data-slot="table-footer"
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+);
+
+type TableRowProps = React.ComponentProps<"tr">;
+
+const TableRow = ({ className, ...props }: TableRowProps) => (
+  <tr
+    data-slot="table-row"
+    className={cn(
+      "border-b transition-colors hover:bg-muted data-[selected=true]:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+);
+
+type TableHeadProps = React.ComponentProps<"th">;
+
+const TableHead = ({ className, ...props }: TableHeadProps) => (
+  <th
+    data-slot="table-head"
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground sticky top-0 bg-background [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+);
+
+type TableCellProps = React.ComponentProps<"td">;
+
+const TableCell = ({ className, ...props }: TableCellProps) => (
+  <td
+    data-slot="table-cell"
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+);
+
+type TableCaptionProps = React.ComponentProps<"caption">;
+
+const TableCaption = ({ className, ...props }: TableCaptionProps) => (
+  <caption
+    data-slot="table-caption"
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+);
+
+export {
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRoot,
+  TableRow,
+};

package/src/components/table/table.model.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+
+export type ColumnDef<T> = {
+  /**
+   * Header de la columna
+   */
+  header: string | (() => ReactNode);
+  /**
+   * Clave que identifica la columna
+   */
+  key: keyof T;
+  /**
+   * Elemento que se renderiza en la celda
+   */
+  cell?: (row: T, index: number) => ReactNode;
+  /**
+   * Ancho de la columna
+   */
+  width?: string | number;
+};

package/src/components/table/table.stories.tsx

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ImageIcon } from "lucide-react";
+import { useMemo } from "react";
+import { Avatar, Checkbox, ColumnDef, Table, Tag } from "../../components";
+import { useSelection } from "../../hooks";
+
+const meta: Meta<typeof Table> = {
+  title: "Data display/Table",
+  component: Table,
+};
+
+export default meta;
+type Story<T> = StoryObj<typeof Table<T>>;
+
+interface User {
+  id: number;
+  name: string;
+  photo: string;
+  age: number;
+  gender: "male" | "female";
+}
+
+const data: User[] = [
+  {
+    id: 1,
+    name: "John",
+    photo: "https://i.pravatar.cc/300?un=123456787",
+    age: 25,
+    gender: "male",
+  },
+  {
+    id: 2,
+    name: "Doe",
+    photo: "https://i.pravatar.cc/300?un=123456789",
+    age: 15,
+    gender: "female",
+  },
+  {
+    id: 3,
+    name: "Jane",
+    photo: "https://i.pravatar.cc/300?un=123612788",
+    age: 35,
+    gender: "female",
+  },
+  {
+    id: 4,
+    name: "Doe",
+    photo: "https://i.pravatar.cc/300?un=1234589",
+    age: 15,
+    gender: "female",
+  },
+];
+
+const columns: ColumnDef<User>[] = [
+  {
+    header: () => (
+      <div className="flex items-center gap-x-2">
+        <ImageIcon />
+        <span>Photo</span>
+      </div>
+    ),
+    key: "photo",
+    cell: (row) => <Avatar src={row.photo} alt={row.name} />,
+  },
+  {
+    header: "Name",
+    key: "name",
+  },
+  {
+    header: "Adult",
+    key: "age",
+    cell: (row) => {
+      const isAdult = row.age > 18;
+
+      return (
+        <Tag variant={isAdult ? "secondary" : "error"}>
+          {isAdult ? "Adult" : "Minor"}
+        </Tag>
+      );
+    },
+  },
+  {
+    header: "Gender",
+    key: "gender",
+  },
+];
+
+export const Default: Story<User> = {
+  args: {
+    columns: columns,
+    data: data,
+    className: "table-fixed",
+  },
+};
+
+/**
+ * Al setear una altura en la propiedad `containerClassName` se puede hacer Scrollable
+ *
+ * ```tsx
+ * <Table
+ *   ....
+ *   containerClassName="max-h-[500px]"
+ *  />
+ * ```
+ */
+export const Scrollable: Story<User> = {
+  args: {
+    columns: columns,
+    data: [...data, ...data, ...data],
+    className: "table-fixed",
+    containerClassName: "max-h-[500px]",
+  },
+};
+
+export const Selection: Story<User> = {
+  render: () => {
+    const {
+      selected,
+      isSelected,
+      isAllSelected,
+      isSomeSelected,
+      toggle,
+      toggleAll,
+    } = useSelection(data);
+
+    const columnsAdapter = (): ColumnDef<User>[] => [
+      {
+        key: "id",
+        width: 30,
+        header: () => (
+          <Checkbox
+            name="selectAll"
+            checked={isAllSelected}
+            onCheckedChange={toggleAll}
+            indeterminate={isSomeSelected}
+          />
+        ),
+        cell: (row) => (
+          <Checkbox
+            name={row.id.toString()}
+            checked={isSelected(row)}
+            onCheckedChange={() => toggle(row)}
+          />
+        ),
+      },
+      ...columns,
+    ];
+
+    const columnsNew = useMemo(columnsAdapter, [selected]);
+
+    return (
+      <Table
+        data={data}
+        columns={columnsNew}
+        className="table-fixed"
+        onRowClick={toggle}
+        selected={isSelected}
+      />
+    );
+  },
+};
+
+export const DoubleClickAction: Story<User> = {
+  args: {
+    columns: columns,
+    data: data,
+    onDoubleClick: (row: User) => alert(`clicked ${row.name}`),
+  },
+};