@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/pagination/pagination.tsx

@@ -0,0 +1,602 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  MoreHorizontal,
+} from "lucide-react";
+import {
+  ChangeEvent,
+  ComponentProps,
+  ComponentType,
+  createContext,
+  ElementType,
+  ReactNode,
+  useContext,
+  useMemo,
+} from "react";
+import { DOTS, useRangePagination } from "../../hooks";
+import { cn } from "../../lib";
+import { Button } from "../button";
+import { PAGINATION_SIZES, PageSize } from "./pagination.model";
+
+type GetPageHref = (state: { page: number; pageSize: number }) => string;
+
+type LinkRenderProps = {
+  href: string;
+  children?: ReactNode;
+  className?: string;
+  onClick?: (event: React.MouseEvent) => void;
+};
+
+type LinkComponent =
+  | ElementType<LinkRenderProps>
+  | ComponentType<LinkRenderProps>;
+
+interface PaginationTexts {
+  goToFirst: string;
+  goToPrevious: string;
+  goToNext: string;
+  goToLast: string;
+  goToPage: (page: number) => string;
+  total: (n: number) => string;
+  pageInfo: (page: number, max: number) => string;
+  range: (start: number, end: number, total: number) => string;
+  morePages: string;
+}
+
+const DEFAULT_TEXTS: PaginationTexts = {
+  goToFirst: "Ir a primera página",
+  goToPrevious: "Ir a página anterior",
+  goToNext: "Ir a próxima página",
+  goToLast: "Ir a última página",
+  goToPage: (page) => `Ir a la página ${page}`,
+  total: (n) => `${n} resultados`,
+  pageInfo: (page, max) => `Página ${page} de ${max}`,
+  range: (start, end, total) => `${start} - ${end} de ${total}`,
+  morePages: "Más páginas",
+};
+
+interface PaginationContextValue {
+  currentPage: number;
+  maxPage: number;
+  pageSize: PageSize;
+  totalItems: number;
+  paginationRange: (string | number)[];
+  range: { start: number; end: number };
+  isFirstPage: boolean;
+  isLastPage: boolean;
+  goTo: (page: number) => void;
+  next: () => void;
+  prev: () => void;
+  setPageSize: (size: PageSize) => void;
+  getPageHref?: GetPageHref;
+  linkComponent: LinkComponent;
+  texts: PaginationTexts;
+}
+
+const PaginationContext = createContext<PaginationContextValue | null>(null);
+
+function usePaginationContext() {
+  const ctx = useContext(PaginationContext);
+  if (!ctx) {
+    throw new Error(
+      "Pagination primitives must be used inside <PaginationRoot>",
+    );
+  }
+  return ctx;
+}
+
+interface PaginationRootProps extends Omit<ComponentProps<"nav">, "onChange"> {
+  totalItems: number;
+  pageSize?: PageSize;
+  defaultPageSize?: PageSize;
+  onPageSizeChange?: (size: PageSize) => void;
+  currentPage?: number;
+  defaultCurrentPage?: number;
+  onCurrentPageChange?: (page: number) => void;
+  siblingCount?: number;
+  getPageHref?: GetPageHref;
+  linkComponent?: LinkComponent;
+  texts?: Partial<PaginationTexts>;
+}
+
+export function PaginationRoot({
+  totalItems,
+  pageSize: pageSizeProp,
+  defaultPageSize = PAGINATION_SIZES[0],
+  onPageSizeChange,
+  currentPage,
+  defaultCurrentPage = 1,
+  onCurrentPageChange,
+  siblingCount = 1,
+  getPageHref,
+  linkComponent = "a",
+  texts: textsProp,
+  className,
+  children,
+  ...props
+}: PaginationRootProps) {
+  const [pageSize = defaultPageSize, setPageSize] =
+    useControllableState<PageSize>({
+      prop: pageSizeProp,
+      defaultProp: defaultPageSize,
+      onChange: onPageSizeChange,
+    });
+
+  const pagination = useRangePagination({
+    totalItems,
+    pageSize,
+    currentPage,
+    defaultCurrentPage,
+    onCurrentPageChange,
+    siblingCount,
+  });
+
+  const texts = useMemo(
+    () => ({ ...DEFAULT_TEXTS, ...textsProp }),
+    [textsProp],
+  );
+
+  const value = useMemo<PaginationContextValue>(
+    () => ({
+      ...pagination,
+      pageSize,
+      totalItems,
+      setPageSize,
+      getPageHref,
+      linkComponent,
+      texts,
+    }),
+    [
+      pagination,
+      pageSize,
+      totalItems,
+      setPageSize,
+      getPageHref,
+      linkComponent,
+      texts,
+    ],
+  );
+
+  return (
+    <PaginationContext.Provider value={value}>
+      <nav
+        role="navigation"
+        aria-label="pagination"
+        data-slot="pagination"
+        className={cn("flex items-center gap-x-4", className)}
+        {...props}
+      >
+        {children}
+      </nav>
+    </PaginationContext.Provider>
+  );
+}
+
+type ButtonOverrides = Omit<
+  ComponentProps<typeof Button>,
+  "onClick" | "disabled" | "render" | "children" | "nativeButton"
+>;
+
+interface NavigableProps {
+  page: number;
+  isActive?: boolean;
+  disabled?: boolean;
+  ariaLabel: string;
+  dataSlot: string;
+  children: ReactNode;
+  className?: string;
+  buttonProps?: ButtonOverrides;
+}
+
+function NavigableButton({
+  page,
+  isActive,
+  disabled,
+  ariaLabel,
+  dataSlot,
+  children,
+  className,
+  buttonProps,
+}: NavigableProps) {
+  const { goTo, getPageHref, pageSize, linkComponent } = usePaginationContext();
+  const Link = linkComponent;
+  const href = getPageHref?.({ page, pageSize: Number(pageSize) });
+  const useLink = Boolean(href) && !disabled;
+
+  const handleClick = () => {
+    if (disabled) return;
+    goTo(page);
+  };
+
+  const sharedProps = {
+    "data-slot": dataSlot,
+    "data-active": isActive ? "true" : "false",
+    "aria-current": isActive ? ("page" as const) : undefined,
+    "aria-label": ariaLabel,
+    className: cn("hover:bg-accent hover:text-accent-foreground", className),
+  };
+
+  if (useLink && href) {
+    return (
+      <Button
+        variant={isActive ? "outline" : "ghost"}
+        size="icon"
+        nativeButton={false}
+        render={
+          <Link href={href} onClick={handleClick}>
+            {children}
+          </Link>
+        }
+        {...sharedProps}
+        {...buttonProps}
+      />
+    );
+  }
+
+  return (
+    <Button
+      variant={isActive ? "outline" : "ghost"}
+      size="icon"
+      disabled={disabled}
+      onClick={handleClick}
+      {...sharedProps}
+      {...buttonProps}
+    >
+      {children}
+    </Button>
+  );
+}
+
+interface PaginationLinkProps {
+  page: number;
+  isActive?: boolean;
+  className?: string;
+  children?: ReactNode;
+  buttonProps?: ButtonOverrides;
+}
+
+export function PaginationLink({
+  page,
+  isActive: isActiveProp,
+  className,
+  children,
+  buttonProps,
+}: PaginationLinkProps) {
+  const { currentPage, texts } = usePaginationContext();
+  const isActive = isActiveProp ?? page === currentPage;
+
+  return (
+    <NavigableButton
+      page={page}
+      isActive={isActive}
+      ariaLabel={texts.goToPage(page)}
+      dataSlot="pagination-link"
+      className={className}
+      buttonProps={buttonProps}
+    >
+      {children ?? page}
+    </NavigableButton>
+  );
+}
+
+interface PaginationNavProps {
+  className?: string;
+  buttonProps?: ButtonOverrides;
+  children?: ReactNode;
+}
+
+export function PaginationFirst({
+  className,
+  buttonProps,
+  children,
+}: PaginationNavProps) {
+  const { isFirstPage, texts } = usePaginationContext();
+  return (
+    <NavigableButton
+      page={1}
+      disabled={isFirstPage}
+      ariaLabel={texts.goToFirst}
+      dataSlot="pagination-first"
+      className={className}
+      buttonProps={buttonProps}
+    >
+      {children ?? <ChevronsLeft data-slot="pagination-icon" />}
+    </NavigableButton>
+  );
+}
+
+export function PaginationPrevious({
+  className,
+  buttonProps,
+  children,
+}: PaginationNavProps) {
+  const { currentPage, isFirstPage, texts } = usePaginationContext();
+  return (
+    <NavigableButton
+      page={Math.max(1, currentPage - 1)}
+      disabled={isFirstPage}
+      ariaLabel={texts.goToPrevious}
+      dataSlot="pagination-previous"
+      className={className}
+      buttonProps={buttonProps}
+    >
+      {children ?? <ChevronLeft data-slot="pagination-icon" />}
+    </NavigableButton>
+  );
+}
+
+export function PaginationNext({
+  className,
+  buttonProps,
+  children,
+}: PaginationNavProps) {
+  const { currentPage, maxPage, isLastPage, texts } = usePaginationContext();
+  return (
+    <NavigableButton
+      page={Math.min(maxPage, currentPage + 1)}
+      disabled={isLastPage}
+      ariaLabel={texts.goToNext}
+      dataSlot="pagination-next"
+      className={className}
+      buttonProps={buttonProps}
+    >
+      {children ?? <ChevronRight data-slot="pagination-icon" />}
+    </NavigableButton>
+  );
+}
+
+export function PaginationLast({
+  className,
+  buttonProps,
+  children,
+}: PaginationNavProps) {
+  const { maxPage, isLastPage, texts } = usePaginationContext();
+  return (
+    <NavigableButton
+      page={maxPage}
+      disabled={isLastPage}
+      ariaLabel={texts.goToLast}
+      dataSlot="pagination-last"
+      className={className}
+      buttonProps={buttonProps}
+    >
+      {children ?? <ChevronsRight data-slot="pagination-icon" />}
+    </NavigableButton>
+  );
+}
+
+export function PaginationEllipsis({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  const { texts } = usePaginationContext();
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      data-dots="true"
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <MoreHorizontal />
+      <span className="sr-only">{texts.morePages}</span>
+    </span>
+  );
+}
+
+interface PaginationPagesProps {
+  className?: string;
+  linkClassName?: string;
+  ellipsisClassName?: string;
+}
+
+export function PaginationPages({
+  className,
+  linkClassName,
+  ellipsisClassName,
+}: PaginationPagesProps) {
+  const { paginationRange } = usePaginationContext();
+  return (
+    <div
+      role="list"
+      data-slot="pagination-pages"
+      className={cn("flex items-center gap-1", className)}
+    >
+      {paginationRange.map((item, index) =>
+        item === DOTS ? (
+          <PaginationEllipsis
+            key={`dots-${index}`}
+            className={ellipsisClassName}
+          />
+        ) : (
+          <PaginationLink
+            key={item}
+            page={item as number}
+            className={linkClassName}
+          />
+        ),
+      )}
+    </div>
+  );
+}
+
+interface PaginationTotalProps {
+  className?: string;
+  /**
+   * Custom content. Receives the total number of items, or pass a static ReactNode.
+   * @default `${total} resultados`
+   */
+  children?: ReactNode | ((total: number) => ReactNode);
+}
+
+export function PaginationTotal({
+  children,
+  className,
+  ...props
+}: PaginationTotalProps) {
+  const { totalItems, texts } = usePaginationContext();
+  const content =
+    typeof children === "function"
+      ? children(totalItems)
+      : (children ?? texts.total(totalItems));
+  return (
+    <span
+      data-slot="pagination-total"
+      className={cn("text-sm", className)}
+      {...props}
+    >
+      {content}
+    </span>
+  );
+}
+
+interface PaginationPageInfoProps {
+  className?: string;
+  /**
+   * Custom content. Receives `{ page, max }`, or pass a static ReactNode.
+   * @default `Página ${page} de ${max}`
+   */
+  children?: ReactNode | ((state: { page: number; max: number }) => ReactNode);
+}
+
+export function PaginationPageInfo({
+  children,
+  className,
+  ...props
+}: PaginationPageInfoProps) {
+  const { currentPage, maxPage, texts } = usePaginationContext();
+  const content =
+    typeof children === "function"
+      ? children({ page: currentPage, max: maxPage })
+      : (children ?? texts.pageInfo(currentPage, maxPage));
+  return (
+    <span
+      data-slot="pagination-page-info"
+      className={cn("text-sm", className)}
+      {...props}
+    >
+      {content}
+    </span>
+  );
+}
+
+interface PaginationRangeProps {
+  className?: string;
+  /**
+   * Custom content. Receives `{ start, end, total }`, or pass a static ReactNode.
+   * @default `${start} - ${end} de ${total}`
+   */
+  children?:
+    | ReactNode
+    | ((state: { start: number; end: number; total: number }) => ReactNode);
+}
+
+export function PaginationRange({
+  children,
+  className,
+  ...props
+}: PaginationRangeProps) {
+  const { range, totalItems, texts } = usePaginationContext();
+  const content =
+    typeof children === "function"
+      ? children({ ...range, total: totalItems })
+      : (children ?? texts.range(range.start, range.end, totalItems));
+  return (
+    <span
+      data-slot="pagination-range"
+      className={cn("text-sm", className)}
+      {...props}
+    >
+      {content}
+    </span>
+  );
+}
+
+interface PaginationSizeSelectProps
+  extends Omit<ComponentProps<"select">, "value" | "onChange"> {
+  sizes?: readonly PageSize[] | PageSize[];
+}
+
+export function PaginationSizeSelect({
+  sizes = PAGINATION_SIZES,
+  className,
+  ...props
+}: PaginationSizeSelectProps) {
+  const { pageSize, setPageSize, goTo } = usePaginationContext();
+
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    const next = Number(event.target.value) as PageSize;
+    setPageSize(next);
+    goTo(1);
+  };
+
+  return (
+    <select
+      data-slot="pagination-size-select"
+      value={pageSize}
+      onChange={handleChange}
+      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",
+        className,
+      )}
+      {...props}
+    >
+      {sizes.map((size) => (
+        <option key={size} value={size} data-slot="pagination-size-option">
+          {size}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+interface PaginationProps extends Omit<PaginationRootProps, "children"> {
+  sizes?: readonly PageSize[] | PageSize[] | false;
+  selectClassName?: string;
+  rangeClassName?: string;
+  previousClassName?: string;
+  nextClassName?: string;
+}
+
+export function Pagination({
+  sizes = PAGINATION_SIZES,
+  selectClassName,
+  rangeClassName,
+  previousClassName,
+  nextClassName,
+  className,
+  ...rootProps
+}: PaginationProps) {
+  return (
+    <PaginationRoot className={className} {...rootProps}>
+      {sizes && (
+        <PaginationSizeSelect
+          sizes={sizes as PageSize[]}
+          className={selectClassName}
+        />
+      )}
+      <PaginationRange className={rangeClassName} />
+      <PaginationPrevious className={previousClassName} />
+      <PaginationNext className={nextClassName} />
+    </PaginationRoot>
+  );
+}
+
+export type {
+  GetPageHref,
+  LinkComponent,
+  LinkRenderProps,
+  PaginationContextValue,
+  PaginationProps,
+  PaginationRootProps,
+  PaginationTexts,
+};

package/src/components/password/index.ts

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

package/src/components/password/password.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Lock, Unlock } from "lucide-react";
+import { useState } from "react";
+import { createToastManager, ToastProvider } from "../toast";
+import { Password } from "./password";
+
+const toastManager = createToastManager();
+
+/**
+ * Password input with a visibility toggle button. `aria-invalid` drives error
+ * styling — no Field wrapper needed.
+ *
+ * The toggle button is always rendered; `toggleable={false}` disables it
+ * without removing it from the DOM, keeping the layout consistent.
+ *
+ * `onShow` fires when the password becomes visible; `onHide` fires when
+ * it's hidden again — both after the internal state has changed.
+ */
+const meta: Meta<typeof Password> = {
+  title: "Components/Password",
+  component: Password,
+  parameters: { layout: "centered" },
+  args: {
+    placeholder: "Enter your password",
+  },
+  argTypes: {
+    showIcon: { control: false },
+    hideIcon: { control: false },
+    onShow: { control: false },
+    onHide: { control: false },
+    onValueChange: { control: false },
+    classNames: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <ToastProvider toastManager={toastManager}>
+        <Story />
+      </ToastProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Password>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultValue: "my-secret-password",
+  },
+};
+
+/**
+ * `aria-invalid="true"` applies error border and ring — no Field wrapper needed.
+ */
+export const Invalid: Story = {
+  args: { "aria-invalid": "true" },
+};
+
+/**
+ * `toggleable={false}` disables the button without removing it from the DOM.
+ * Use this when you want to prevent the user from revealing the password
+ * while keeping the visual layout consistent.
+ */
+export const NonToggleable: Story = {
+  args: {
+    toggleable: false,
+    defaultValue: "my-secret-password",
+  },
+};
+
+/**
+ * `onValueChange` receives the string value as first argument, so no
+ * `event.target.value` needed.
+ */
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <Password
+        placeholder="Enter your password"
+        value={value}
+        onValueChange={(val) => setValue(val)}
+      />
+    );
+  },
+};
+
+/**
+ * `className` estila el wrapper (el field visible). `classNames` expone los
+ * slots `input` (texto interno) y `toggle` (botón del ojo).
+ */
+export const WithClassNames: Story = {
+  args: {
+    className: "border-primary focus-within:border-primary",
+    classNames: {
+      input: "font-mono",
+      toggle: "text-primary hover:text-primary/80",
+    },
+  },
+};
+
+export const CustomIcons: Story = {
+  args: {
+    showIcon: <Lock className="h-4 w-4" />,
+    hideIcon: <Unlock className="h-4 w-4" />,
+  },
+};
+
+export const WithCallbacks: Story = {
+  args: {
+    onShow: () =>
+      toastManager.add({ variant: "success", description: "Password visible" }),
+    onHide: () =>
+      toastManager.add({ variant: "success", description: "Password hidden" }),
+  },
+};