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

package/src/components/table/table.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ColumnDef, Table } from "../../components";
+import { click } from "../../utils";
+
+describe("Table", () => {
+  interface Person {
+    name: string;
+    age: number;
+  }
+
+  const data: Person[] = [
+    {
+      name: "John",
+      age: 30,
+    },
+    {
+      name: "Jane",
+      age: 25,
+    },
+  ];
+
+  const columns: ColumnDef<Person>[] = [
+    {
+      header: "Name",
+      key: "name",
+    },
+    {
+      header: "Age",
+      key: "age",
+    },
+  ];
+
+  it("should render items", () => {
+    render(<Table data={data} columns={columns} />);
+
+    data.forEach((person: Person) =>
+      expect(screen.getByText(person.name)).toBeInTheDocument(),
+    );
+  });
+
+  it("should render custom header", () => {
+    const customColumns: ColumnDef<Person>[] = [
+      {
+        key: "name",
+        header: () => <div>Custom</div>,
+      },
+    ];
+    render(<Table data={data} columns={customColumns} />);
+
+    expect(screen.getByText("Custom")).toBeInTheDocument();
+  });
+
+  it("should render custom cell", () => {
+    const customColumns: ColumnDef<Person>[] = [
+      {
+        key: "name",
+        header: "name",
+        cell: (row) => <div>{row.name + " custom"}</div>,
+      },
+    ];
+    render(<Table data={data} columns={customColumns} />);
+
+    expect(screen.getByText("John custom")).toBeInTheDocument();
+  });
+
+  it("should select row", () => {
+    render(
+      <Table
+        data={data}
+        columns={columns}
+        selected={(row) => row.name === "John"}
+      />,
+    );
+
+    const john = screen.getByText("John");
+
+    expect(john).toBeInTheDocument();
+    expect(john.parentElement).toHaveAttribute("data-selected", "true");
+  });
+
+  it("should handle onRowClick", () => {
+    const onRowClick = vi.fn();
+    render(<Table data={data} columns={columns} onRowClick={onRowClick} />);
+
+    const first = screen.getByText(data[0].name);
+    click(first);
+
+    expect(onRowClick).toHaveBeenCalledWith(data[0]);
+  });
+});

package/src/components/table/table.tsx

@@ -0,0 +1,109 @@
+import { isFunction } from "lodash";
+import { ComponentPropsWithoutRef, HTMLProps, JSX } from "react";
+import { ClassName } from "@/models";
+import { cn } from "../../lib";
+import { ColumnDef } from "./table.model";
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRoot,
+  TableRow,
+} from "./table-primitives";
+
+type Props<T> = {
+  data: T[];
+  columns: ColumnDef<T>[];
+  onRowClick?: (row: T) => void;
+  onDoubleClick?: (row: T) => void;
+  selected?: (row: T) => boolean;
+} & ExtendedProps &
+  Omit<
+    ComponentPropsWithoutRef<typeof TableRoot>,
+    "data" | "selected" | "onDoubleClick"
+  >;
+
+interface ExtendedProps {
+  theadClassName?: ClassName;
+  theadProps?: HTMLProps<HTMLTableSectionElement>;
+  tbodyClassName?: ClassName;
+  tbodyProps?: HTMLProps<HTMLTableSectionElement>;
+  trClassName?: ClassName;
+  trProps?: HTMLProps<HTMLTableRowElement>;
+  thClassName?: ClassName;
+  thProps?: HTMLProps<HTMLTableCellElement>;
+  tdClassName?: ClassName;
+  tdProps?: Omit<HTMLProps<HTMLTableCellElement>, "onDoubleClick">;
+}
+
+export const Table = <T,>({
+  data = [],
+  columns = [],
+  onRowClick,
+  onDoubleClick,
+  selected,
+  theadClassName,
+  theadProps,
+  tbodyClassName,
+  tbodyProps,
+  trClassName,
+  trProps,
+  thClassName,
+  thProps,
+  tdClassName,
+  tdProps,
+  ...tableProps
+}: Props<T>) => {
+  return (
+    <TableRoot {...tableProps} className={cn(tableProps?.className)}>
+      <TableHeader
+        {...theadProps}
+        className={cn(theadProps?.className, theadClassName)}
+      >
+        <TableRow {...trProps} className={cn(trProps?.className, trClassName)}>
+          {columns.map((column, i) => (
+            <TableHead
+              key={i}
+              {...thProps}
+              className={cn(thProps?.className, thClassName)}
+              style={{
+                width: column.width,
+              }}
+            >
+              {isFunction(column.header) ? column.header?.() : column.header}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody
+        {...tbodyProps}
+        className={cn(tbodyProps?.className, tbodyClassName)}
+      >
+        {data.map((row, i) => (
+          <TableRow
+            key={i}
+            {...trProps}
+            data-selected={selected?.(row)}
+            className={cn(trProps?.className, trClassName)}
+          >
+            {columns.map((column, i) => (
+              <TableCell
+                key={i}
+                {...tdProps}
+                onClick={(e) => {
+                  tdProps?.onClick?.(e);
+                  onRowClick?.(row);
+                }}
+                onDoubleClick={() => onDoubleClick?.(row)}
+                className={cn(tdProps?.className, tdClassName)}
+              >
+                {(column.cell?.(row, i) as JSX.Element) || row[column.key]}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </TableRoot>
+  );
+};

package/src/components/table-pagination/index.ts

@@ -0,0 +1,2 @@
+export * from "./table-pagination";
+export * from "./table-pagination.model";

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

@@ -0,0 +1,2 @@
+export const TABLE_PAGE_SIZES = [10, 25, 50];
+export type PageSize = (typeof TABLE_PAGE_SIZES)[number];

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TablePagination } from "../../components";
+
+const meta: Meta<typeof TablePagination> = {
+  title: "Data display/TablePagination",
+  component: TablePagination,
+  args: {
+    totalItems: 100,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TablePagination>;
+
+export const Default: Story = {};
+
+export const NoSizes: Story = {
+  args: { sizes: false },
+};
+
+export const OtherSizes: Story = {
+  args: { sizes: [1, 100, 1000] },
+};

package/src/components/table-pagination/table-pagination.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TablePagination } from "../../components";
+import { click } from "../../utils";
+
+describe("TablePagination component", () => {
+  it("should render correctly", () => {
+    render(<TablePagination pageSize={10} totalItems={30} />);
+    const pagination = screen.getByText(/1 - 10 de 30/g);
+    expect(pagination).toBeInTheDocument();
+  });
+
+  it("should go next page", () => {
+    render(<TablePagination pageSize={10} totalItems={30} />);
+    const goNext = screen.getAllByRole("button")[1];
+    click(goNext);
+
+    const pagination = screen.getByText(/11 - 20 de 30/g);
+    expect(pagination).toBeInTheDocument();
+  });
+
+  it("should go prev page", () => {
+    render(
+      <TablePagination initialCurrentPage={2} pageSize={10} totalItems={30} />,
+    );
+    const goNext = screen.getAllByRole("button")[0];
+    click(goNext);
+
+    const pagination = screen.getByText(/1 - 10 de 30/g);
+    expect(pagination).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,108 @@
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChangeEvent, HTMLProps } from "react";
+import { ClassName } from "@/models";
+import { usePagination, usePaginationProps } from "../../hooks";
+import { cn } from "../../lib";
+import { Button } from "../button";
+import { PageSize, TABLE_PAGE_SIZES } from "./table-pagination.model";
+
+interface TablePaginationExtendedProps {
+  containerClassName?: ClassName;
+  containerProps?: HTMLProps<HTMLDivElement>;
+  selectClassName?: ClassName;
+  selectProps?: HTMLProps<HTMLSelectElement>;
+  sizes?: PageSize[] | false;
+}
+
+type Props = {
+  setPageSize?: (value: PageSize) => void;
+  pageSize?: PageSize;
+} & Omit<usePaginationProps, "pageSize"> &
+  TablePaginationExtendedProps;
+
+export const TablePagination = ({
+  containerClassName,
+  containerProps,
+  selectClassName,
+  selectProps,
+  sizes = TABLE_PAGE_SIZES,
+  ...props
+}: Props) => {
+  const [pageSize = TABLE_PAGE_SIZES[0], setPageSize] =
+    useControllableState<PageSize>({
+      onChange: props?.setPageSize,
+      prop: props?.pageSize,
+      defaultProp: TABLE_PAGE_SIZES[0],
+    });
+
+  const { range, next, prev, isFirstPage, isLastPage, goTo } = usePagination({
+    ...props,
+    pageSize,
+  });
+
+  const changePageSize = (event: ChangeEvent<HTMLSelectElement>) => {
+    const { value } = event.target;
+    const newPageSize = Number(value) as PageSize;
+    setPageSize(newPageSize);
+    goTo(1);
+  };
+
+  return (
+    <div
+      data-slot="table-pagination"
+      {...containerProps}
+      className={cn(
+        "flex justify-center items-center gap-x-4 bg-background border border-[#D9D9D9] rounded-2xl py-2",
+        containerClassName,
+      )}
+    >
+      {sizes && (
+        <select
+          data-slot="table-pagination-size-trigger"
+          {...selectProps}
+          value={pageSize}
+          onChange={changePageSize}
+          className={cn(
+            "border border-input rounded-md w-fit min-w-[3rem] bg-background p-2 ring-offset-background",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            selectClassName,
+          )}
+        >
+          {sizes.map((option: number, index) => (
+            <option
+              key={index}
+              value={option}
+              data-slot="table-pagination-size-option"
+            >
+              {option}
+            </option>
+          ))}
+        </select>
+      )}
+      <span data-slot="table-pagination-range">
+        {range.start} - {range.end} de {props.totalItems}
+      </span>
+      <div className="flex gap-2">
+        <Button
+          data-slot="table-pagination-prev"
+          size="icon"
+          variant="ghost"
+          disabled={isFirstPage}
+          onClick={prev}
+        >
+          <ChevronLeft data-slot="table-pagination-prev-icon" />
+        </Button>
+        <Button
+          data-slot="table-pagination-next"
+          size="icon"
+          variant="ghost"
+          disabled={isLastPage}
+          onClick={next}
+        >
+          <ChevronRight data-slot="table-pagination-next-icon" />
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/tabs/context/tabs-context.tsx

@@ -0,0 +1,14 @@
+import { createSafeContext } from "../../../utils";
+
+interface TabsContextProps {
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+  targetRef: HTMLButtonElement | null;
+  setTargetRef: (element: HTMLButtonElement | null) => void;
+  variant: "default" | "background";
+}
+
+export const [useTabsContext, TabsContextProvider] =
+  createSafeContext<TabsContextProps>();
+
+export type { TabsContextProps };

package/src/components/tabs/index.ts

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

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

@@ -0,0 +1,182 @@
+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";
+
+const meta: Meta<typeof Tabs> = {
+  title: "Data display/Tabs",
+  component: Tabs,
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+const AccountStep = () => {
+  return (
+    <>
+      <Input name="name" />
+      <Input name="lastname" />
+    </>
+  );
+};
+
+const PasswordStep = () => {
+  return (
+    <>
+      <Input name="password" type="password" />
+      <Input name="confirmation" type="password" />
+    </>
+  );
+};
+
+const FileStep = () => {
+  return (
+    <>
+      <Input name="file" type="file" />
+    </>
+  );
+};
+
+const steps = [
+  {
+    value: "account",
+    content: <AccountStep />,
+  },
+  {
+    value: "password",
+    content: <PasswordStep />,
+  },
+  {
+    value: "config",
+    content: <FileStep />,
+  },
+];
+
+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>
+    );
+  },
+};
+
+/**
+ * Se puede utilizar el hook `useStep` para facilitar el manejo de estado y validaciones
+ */
+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>
+    );
+  },
+};
+
+/**
+ * Se puede utilizar el prop `variant` para cambiar el estilo del indicador
+ * `default` (línea) y `background` (fondo)
+ */
+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>
+    );
+  },
+};

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

@@ -0,0 +1,61 @@
+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";
+
+describe("Tabs component", () => {
+  it("should render correctly", () => {
+    render(<Tabs data-testid="Tabs" />);
+    const component = screen.getByTestId("Tabs");
+    expect(component).toBeInTheDocument();
+  });
+
+  it("should show tabs", () => {
+    render(
+      <Tabs>
+        <TabList>
+          <TabTrigger value="trigger">Trigger</TabTrigger>
+          <TabTrigger value="test">Test</TabTrigger>
+        </TabList>
+      </Tabs>,
+    );
+
+    expect(screen.getByText(/trigger/i)).toBeInTheDocument();
+    expect(screen.getByText(/test/i)).toBeInTheDocument();
+  });
+
+  it("should show tab content", () => {
+    render(
+      <Tabs defaultValue="trigger">
+        <TabList>
+          <TabTrigger value="trigger">Trigger</TabTrigger>
+          <TabTrigger value="test">Test</TabTrigger>
+        </TabList>
+        <TabContent value="trigger">Contenido de trigger</TabContent>
+      </Tabs>,
+    );
+
+    expect(screen.getByText("Contenido de trigger")).toBeInTheDocument();
+  });
+
+  it("should be controlled", () => {
+    const mock = vi.fn();
+    render(
+      <Tabs value="trigger" onChange={mock}>
+        <TabList>
+          <TabTrigger value="trigger">Trigger</TabTrigger>
+          <TabTrigger value="test">Test</TabTrigger>
+        </TabList>
+        <TabContent value="trigger">Contenido de trigger</TabContent>
+        <TabContent value="test">Contenido de test</TabContent>
+      </Tabs>,
+    );
+
+    const testTrigger = screen.getByText("Test");
+    click(testTrigger);
+
+    waitFor(() => {
+      expect(mock).toHaveBeenCalledWith("test");
+    });
+  });
+});