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

package/src/components/button/button.stories.tsx

@@ -0,0 +1,396 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { cva, VariantProps } from "class-variance-authority";
+import { Flame, SearchIcon } from "lucide-react";
+import { ComponentProps } from "react";
+import { BaseButton, Button, Heading } from "../../components";
+import { cn } from "../../lib";
+import { ThemeProvider } from "../../providers";
+
+/**
+ * Componente principal para ejecutar acciones.
+ *
+ * Extendiende al componente `BaseButton` agregándole variantes
+ */
+const meta: Meta<typeof Button> = {
+  title: "Data entry/Button",
+  component: Button,
+  args: {
+    children: "Click me!",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+  },
+};
+
+export const Link: Story = {
+  args: {
+    variant: "link",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: "error",
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: "success",
+  },
+};
+
+/**
+ * Se puede agregar un ícono al botón con la prop `icon`.
+ */
+export const Icon: Story = {
+  args: {
+    icon: <SearchIcon />,
+  },
+};
+
+/**
+ * Se puede cambiar la posición del ícono con la prop `iconPosition`.
+ *
+ * Los valores posibles son `start` y `end`.
+ */
+export const IconPosition: Story = {
+  args: {
+    icon: <SearchIcon />,
+    iconPosition: "end",
+  },
+};
+
+/**
+ * El button recibe la propieda `loading` que permite controlar el estado de carga del botón.
+ * Se puede cambiar la forma en la que se muestra el loader con la prop `loaderReplace`.
+ * Si `loaderReplace` es `true`, el loader reemplaza todo el contenido manteniendo el ancho original del botón.
+ * Por defecto, el loader se agrega al contenido existente o reemplaza al ícono en caso de que exista.
+ */
+export const Loading: Story = {
+  render: () => {
+    const sleep = (): Promise<void> => {
+      return new Promise((resolve) => setTimeout(resolve, 2000));
+    };
+
+    return (
+      <div className="space-y-8">
+        {/* Modo Append (default) */}
+        <section>
+          <Heading as="h2" className="mb-4">
+            Modo Append (default)
+          </Heading>
+          <p className="text-sm text-muted-foreground mb-4">
+            En este modo, el loader se agrega al contenido existente. Si hay un
+            ícono, el loader lo reemplaza.
+          </p>
+          <div className="flex flex-wrap items-center gap-4">
+            <Button onClick={sleep}>Por izquierda</Button>
+            <Button onClick={sleep} iconPosition="end">
+              Por derecha
+            </Button>
+            <Button onClick={sleep} icon={<SearchIcon />}>
+              Ícono inicio
+            </Button>
+            <Button onClick={sleep} icon={<SearchIcon />} iconPosition="end">
+              Ícono final
+            </Button>
+            <Button onClick={sleep} icon={<SearchIcon />} size="icon" />
+          </div>
+        </section>
+
+        {/* Modo Replace */}
+        <section>
+          <Heading as="h2" className="mb-4">
+            Modo Replace (loaderReplace = true)
+          </Heading>
+          <p className="text-sm text-muted-foreground mb-4">
+            En este modo, el loader reemplaza todo el contenido manteniendo el
+            ancho original del botón.
+          </p>
+          <div className="flex flex-wrap items-center gap-4">
+            <Button onClick={sleep} loaderReplace>
+              Solo texto
+            </Button>
+            <Button onClick={sleep} loaderReplace icon={<SearchIcon />}>
+              Ícono inicio
+            </Button>
+            <Button
+              onClick={sleep}
+              loaderReplace
+              icon={<SearchIcon />}
+              iconPosition="end"
+            >
+              Ícono final
+            </Button>
+            <Button
+              onClick={sleep}
+              loaderReplace
+              icon={<SearchIcon />}
+              size="icon"
+            />
+          </div>
+        </section>
+
+        {/* Variantes */}
+        <section>
+          <Heading as="h2" className="mb-4">
+            Variantes
+          </Heading>
+          <p className="text-sm text-muted-foreground mb-4">
+            El loader funciona con todas las variantes de botón.
+          </p>
+          <div className="flex flex-wrap items-center gap-4">
+            <Button onClick={sleep} variant="outline" icon={<SearchIcon />}>
+              Outline
+            </Button>
+            <Button onClick={sleep} variant="secondary" icon={<SearchIcon />}>
+              Secondary
+            </Button>
+            <Button onClick={sleep} variant="ghost" icon={<SearchIcon />}>
+              Ghost
+            </Button>
+            <Button onClick={sleep} variant="link" icon={<SearchIcon />}>
+              Link
+            </Button>
+            <Button onClick={sleep} variant="error" icon={<SearchIcon />}>
+              Error
+            </Button>
+            <Button onClick={sleep} variant="success" icon={<SearchIcon />}>
+              Success
+            </Button>
+          </div>
+        </section>
+      </div>
+    );
+  },
+};
+
+/**
+ * Al setear `asChild` a `true`, puedes renderizar cualquier elemento con los estilos, props y referencias del `Button`.
+ *
+ * En este caso, se usa un elemento `a` que hereda los estilos, props y referencias del `Button`.
+ * Esto es útil para aplicar los mismos estilos y garantizar consistencia en la interfaz de usuario de su aplicación.
+ * Se puede verificar abriendo la consola del navegador.
+ */
+export const AsChild: Story = {
+  args: {
+    children: <a href="#">Click me</a>,
+    variant: "error",
+    asChild: true,
+  },
+};
+
+/**
+ * El componente recibe todas las propiedades de `button`, por lo que se puede customizar los estilos, accesibilidad, referencias, eventos, etc
+ */
+export const Custom: Story = {
+  args: {
+    className: "bg-amber-500 hover:bg-amber-600",
+  },
+};
+
+/**
+ * Estos son los tamanos disponibles para el `Button`.
+ */
+export const Sizes: Story = {
+  render: () => {
+    const sizes = ["default", "sm", "lg", "icon"] as const;
+
+    return (
+      <>
+        {sizes.map((size) => (
+          <div key={size} className="mb-1">
+            <p className="font-semibold">{`size: ${size}`}</p>
+            <Button size={size} key={size}>
+              {size === "icon" ? <Flame /> : "Click me"}
+            </Button>
+          </div>
+        ))}
+      </>
+    );
+  },
+};
+
+export const Shapes: Story = {
+  render: () => {
+    const shapes = ["rounded", "square", "circle"] as const;
+
+    return (
+      <div className="flex flex-wrap items-center gap-4">
+        {shapes.map((shape) => (
+          <div key={shape} className="flex flex-col gap-2">
+            <p className="font-semibold capitalize">{shape}</p>
+            <Button shape={shape} key={shape} size="icon" icon={<Flame />} />
+            <Button shape={shape} key={shape}>
+              {shape}
+            </Button>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+const buttonVariants = cva(
+  [
+    "flex items-center justify-center gap-2 px-4 py-2",
+    "text-sm font-medium transition-all",
+    "rounded ring-offset-background",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+  ],
+  {
+    variants: {
+      variant: {
+        white: "bg-white text-primary border",
+        black: "bg-black text-white",
+      },
+    },
+    defaultVariants: {
+      variant: "white",
+    },
+  },
+);
+
+type BaseButtonProps = ComponentProps<typeof BaseButton>;
+interface Props extends BaseButtonProps, VariantProps<typeof buttonVariants> {}
+
+const CustomButton = ({ variant, ...props }: Props) => {
+  return <BaseButton className={cn(buttonVariants({ variant }))} {...props} />;
+};
+
+/**
+ * #### Crea tus propias variantes
+ * En caso de que necesites customizar demasiado a tu componente, lo mejor es crear tus propias variantes.
+ * Para esto se puede importar el componente `BaseButton` el cuál no incluye estilos por defecto y se puede extender para crear variantes personalizadas.
+ *
+ * A continuación, se definen las variantes de botón que puedes extender o modificar a tus necesidades.
+ *
+ * ```tsx
+ * import { ComponentProps } from 'react';
+ * import { cva, type VariantProps } from 'class-variance-authority';
+ * import { BaseButton, cn } from '@boxcustodia/library';
+ *
+ * export const buttonVariants = cva(
+ *   [
+ *     'flex items-center justify-center gap-2',
+ *     'text-sm font-medium transition-all',
+ *     'rounded-md ring-offset-background',
+ *     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+ *     'disabled:pointer-events-none disabled:opacity-50',
+ *     'hover:brightness-105',
+ *   ],
+ *   {
+ *     variants: {
+ *       variant: {
+ *         default: "bg-primary text-primary-foreground",
+ *         error: "bg-error text-error-foreground",
+ *         success: "bg-success text-success-foreground",
+ *         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+ *         secondary: "bg-secondary text-secondary-foreground hover:brightness-100 hover:bg-secondary/80",
+ *         ghost: "hover:bg-accent hover:brightness-100 hover:text-accent-foreground",
+ *         link: "text-primary underline-offset-4 hover:underline",
+ *         white: 'bg-white text-primary', <-- Nueva variante
+ *         black: 'bg-black text-white', <-- Nueva variante
+ *       },
+ *       size: {
+ *         default: "h-10 px-4 py-2",
+ *         sm: "h-9 rounded-md px-3",
+ *         lg: "h-11 rounded-md px-8",
+ *         icon: "w-10 aspect-square",
+ *       },
+ *     },
+ *     defaultVariants: {
+ *       variant: 'default',
+ *       size: 'default',
+ *     },
+ *   },
+ * );
+ *
+ * type BaseButtonProps = ComponentProps<typeof BaseButton>;
+ * typer Props = BaseButtonProps, VariantProps<typeof buttonVariants>
+ *
+ * export const Button = ({ className, variant, size, ...props }: Props) => {
+ *   return (
+ *     <BaseButton
+ *       {...props}
+ *       className={cn(buttonVariants({ variant, size }), className)}
+ *     />
+ *   );
+ * };
+ *
+ * ```
+ *
+ */
+
+export const CustomVariants: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <CustomButton variant="black">Default Button</CustomButton>
+      <CustomButton variant="white">Error Button</CustomButton>
+    </div>
+  ),
+};
+
+/**
+ * ThemeProvider permite customizar de manera global las propiedades del componente
+ *
+ * Ejemplo:
+ * ```tsx
+ * <ThemeProvider
+ *   theme={{
+ *     Button: {
+ *       className: "bg-red-500",
+ *       icon: <SearchIcon />,
+ *       iconPosition: "end",
+ *       loaderReplace: true,
+ *     },
+ *   }}
+ * >
+ *   <Button>Default Button</Button>
+ * </ThemeProvider>
+ * ```
+ */
+export const Theme: Story = {
+  render: () => {
+    const sleep = (): Promise<void> => {
+      return new Promise((resolve) => setTimeout(resolve, 2000));
+    };
+
+    return (
+      <ThemeProvider
+        theme={{
+          Button: {
+            className: "bg-red-500",
+            icon: <SearchIcon />,
+            iconPosition: "end",
+            loaderReplace: true,
+          },
+        }}
+      >
+        <Button onClick={sleep}>Default Button</Button>
+      </ThemeProvider>
+    );
+  },
+};

package/src/components/button/button.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { describe, expect, it } from "vitest";
+import { Button } from "../../components";
+
+describe("Button component", () => {
+  it("should render correctly", () => {
+    render(<Button />);
+    const button = screen.getByRole("button");
+
+    expect(button).toBeInTheDocument();
+  });
+
+  it("should render children correctly", () => {
+    render(<Button>Click me</Button>);
+    const button = screen.getByRole("button");
+
+    expect(button).toHaveTextContent("Click me");
+  });
+
+  it("should render as child correctly", () => {
+    render(
+      <Button asChild>
+        <a href="#">Click me</a>
+      </Button>,
+    );
+
+    // No debe renderizarse como un button
+    const button = screen.queryByRole("button");
+    expect(button).not.toBeInTheDocument();
+
+    // Debe renderizarse como un link
+    const link = screen.getByRole("link");
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveTextContent("Click me");
+  });
+
+  it("should accept className prop", () => {
+    const TEST_CLASS = "lorem";
+    render(<Button className={TEST_CLASS} />);
+    const button = screen.getByRole("button");
+
+    expect(button).toHaveClass(TEST_CLASS);
+  });
+
+  it("should accept ref prop", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref} />);
+
+    expect(ref.current).not.toBeNull();
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("should show loader", () => {
+    render(<Button loading />);
+    expect(screen.getByTestId("btn-loader")).toBeInTheDocument();
+  });
+});

package/src/components/button/button.tsx

@@ -0,0 +1,31 @@
+import { type VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+import { cn } from "../../lib";
+import { useThemeProps } from "../../providers/theme/useThemeProps";
+import { buttonVariants } from "./button.variants";
+import { BaseButton } from "./components/base-button";
+
+type BaseButtonProps = ComponentProps<typeof BaseButton>;
+type Props = BaseButtonProps & VariantProps<typeof buttonVariants>;
+
+export const Button = (props: Props) => {
+  const { variant, size, shape, className, ...rest } = useThemeProps(
+    "Button",
+    props,
+  );
+
+  return (
+    <BaseButton
+      {...rest}
+      className={cn(
+        buttonVariants({
+          variant,
+          size,
+          shape,
+        }),
+        className,
+      )}
+      data-variant={variant || "default"}
+    />
+  );
+};

package/src/components/button/button.variants.ts

@@ -0,0 +1,44 @@
+import { cva } from "class-variance-authority";
+
+export const buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "text-sm font-medium transition-all",
+    "ring-offset-background",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "hover:brightness-105",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground",
+        error: "bg-error text-error-foreground",
+        success: "bg-success text-success-foreground",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:brightness-100 hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:brightness-100 hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8",
+        icon: "w-10 aspect-square",
+      },
+      shape: {
+        rounded: "rounded-md",
+        square: "rounded-none",
+        circle: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "rounded",
+    },
+  },
+);

package/src/components/button/components/base-button.tsx

@@ -0,0 +1,86 @@
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { ComponentProps, ReactNode } from "react";
+import { ClickEvent } from "@/models";
+import { LoaderOverlay } from "./loader-overlay";
+import { LoadingIcon } from "./loading-icon";
+
+interface Props extends ComponentProps<"button"> {
+  asChild?: boolean;
+  loading?: boolean;
+  showLoader?: boolean;
+  icon?: ReactNode;
+  iconPosition?: "start" | "end";
+  loaderReplace?: true;
+}
+
+const baseStyles = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.5rem",
+};
+
+export const BaseButton = ({
+  asChild = false,
+  onClick,
+  loading: prop,
+  showLoader = true,
+  icon,
+  iconPosition = "start",
+  loaderReplace,
+  style,
+  ...props
+}: Props) => {
+  const Comp = asChild ? Slot : "button";
+  const [loading = false, setLoading] = useControllableState<boolean>({
+    prop,
+    defaultProp: false,
+  });
+
+  const handleClick = async (e: ClickEvent) => {
+    if (!onClick || loading) return;
+
+    const onClickResult = onClick(e) as unknown;
+
+    if (onClickResult instanceof Promise) {
+      showLoader && setLoading(true);
+      await onClickResult.finally(() => setLoading(false));
+    }
+  };
+
+  // TODO: Refactorizar lógica de renderización de iconos
+  const renderIconWithLoader = (position: "start" | "end") => {
+    if (position !== iconPosition) return null;
+    const isLoading = loaderReplace ? false : loading;
+
+    return (
+      <>
+        <LoadingIcon loading={isLoading && !icon} animate={true} />
+        {icon && <LoadingIcon loading={isLoading} animate={false} />}
+        {icon && !isLoading && icon}
+      </>
+    );
+  };
+
+  const isLoading = loading && showLoader;
+  const isReplaceMode = loaderReplace && isLoading;
+
+  return (
+    <Comp
+      type="button"
+      data-slot="button"
+      {...props}
+      onClick={handleClick}
+      style={{
+        ...baseStyles,
+        position: isReplaceMode ? "relative" : undefined,
+        ...style,
+      }}
+    >
+      {renderIconWithLoader("start")}
+      <Slottable>{props.children}</Slottable>
+      {renderIconWithLoader("end")}
+      {isReplaceMode && <LoaderOverlay loading={true} />}
+    </Comp>
+  );
+};

package/src/components/button/components/loader-overlay.tsx

@@ -0,0 +1,21 @@
+import { LoadingIcon } from "./loading-icon";
+
+interface LoaderOverlayProps {
+  loading: boolean;
+}
+
+export const LoaderOverlay = ({ loading }: LoaderOverlayProps) => (
+  <span
+    style={{
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "inherit",
+      borderRadius: "inherit",
+    }}
+  >
+    <LoadingIcon loading={loading} animate={false} />
+  </span>
+);

package/src/components/button/components/loading-icon.tsx

@@ -0,0 +1,47 @@
+import { LoaderCircle, LucideProps } from "lucide-react";
+import { useRef } from "react";
+import { CSSTransition } from "react-transition-group";
+import { cn } from "../../../lib";
+
+interface LoadingIconProps extends LucideProps {
+  loading?: boolean;
+  animate?: boolean;
+}
+
+const LoadingIcon = ({
+  loading,
+  animate = true,
+  ...props
+}: LoadingIconProps) => {
+  const nodeRef = useRef(null);
+
+  if (!animate) {
+    return loading ? (
+      <LoaderCircle
+        {...props}
+        data-testid="btn-loader"
+        className={cn("animate-spin", props.className)}
+      />
+    ) : null;
+  }
+
+  return (
+    <CSSTransition
+      unmountOnExit
+      mountOnEnter
+      timeout={200}
+      in={loading}
+      classNames="btn-loader"
+      nodeRef={nodeRef}
+    >
+      <LoaderCircle
+        {...props}
+        ref={nodeRef}
+        data-testid="btn-loader"
+        className={cn("animate-spin", props.className)}
+      />
+    </CSSTransition>
+  );
+};
+
+export { LoadingIcon, type LoadingIconProps };

package/src/components/button/index.ts

@@ -0,0 +1,3 @@
+export * from "./button";
+export * from "./button.variants";
+export * from "./components/base-button";