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

package/src/components/auto-complete/auto-complete-primitives.tsx

@@ -1,155 +0,0 @@
-import { type DialogProps } from "@radix-ui/react-dialog";
-import { Command } from "cmdk";
-import { Search } from "lucide-react";
-import * as React from "react";
-import { cn } from "../../lib";
-import { DialogPopup, DialogRoot } from "../dialog";
-
-const AutoCompleteRoot = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command>) => (
-  <Command
-    data-slot="auto-complete"
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className,
-    )}
-    {...props}
-  />
-);
-
-interface AutoCompleteDialogProps extends DialogProps {}
-
-const AutoCompleteDialog = ({
-  children,
-  ...props
-}: AutoCompleteDialogProps) => {
-  return (
-    <DialogRoot {...props} data-slot="auto-complete-dialog">
-      <DialogPopup
-        className="p-0 overflow-hidden shadow-lg"
-        data-slot="auto-complete-dialog-content"
-      >
-        <AutoCompleteRoot className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </AutoCompleteRoot>
-      </DialogPopup>
-    </DialogRoot>
-  );
-};
-
-const AutoCompleteInput = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Input>) => (
-  <div
-    className="flex items-center px-3 border-b"
-    data-slot="auto-complete-input-container"
-  >
-    <Search
-      className="w-4 h-4 mr-2 opacity-50 shrink-0"
-      data-slot="auto-complete-input-icon"
-    />
-    <Command.Input
-      data-slot="auto-complete-input"
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  </div>
-);
-
-const AutoCompleteList = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.List>) => (
-  <Command.List
-    data-slot="auto-complete-list"
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-);
-
-const AutoCompleteEmpty = (
-  props: React.ComponentProps<typeof Command.Empty>,
-) => (
-  <Command.Empty
-    className="py-6 text-sm text-center"
-    data-slot="auto-complete-empty"
-    {...props}
-  />
-);
-
-const AutoCompleteGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Group>) => (
-  <Command.Group
-    data-slot="auto-complete-group"
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-);
-
-const AutoCompleteSeparator = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Separator>) => (
-  <Command.Separator
-    data-slot="auto-complete-separator"
-    className={cn("-mx-1 h-px bg-input", className)}
-    {...props}
-  />
-);
-
-const AutoCompleteItem = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof Command.Item>) => {
-  return (
-    <Command.Item
-      data-slot="auto-complete-item"
-      className={cn(
-        "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        "aria-disabled:pointer-events-none aria-disabled:opacity-50",
-        "relative flex gap-2 cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-        className,
-      )}
-      {...props}
-    />
-  );
-};
-
-const AutoCompleteShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      data-slot="auto-complete-shortcut"
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className,
-      )}
-      {...props}
-    />
-  );
-};
-
-export {
-  AutoCompleteDialog,
-  AutoCompleteEmpty,
-  AutoCompleteGroup,
-  AutoCompleteInput,
-  AutoCompleteItem,
-  AutoCompleteList,
-  AutoCompleteRoot,
-  AutoCompleteSeparator,
-  AutoCompleteShortcut,
-};

package/src/components/background-image/background-image.stories.tsx

@@ -1,21 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { BackgroundImage } from "../../components";
-
-/**
- * Componente que facilita el manejo de imágenes de fondo.
- */
-const meta: Meta<typeof BackgroundImage> = {
-  title: "Others/BackgroundImage",
-  component: BackgroundImage,
-  args: {
-    src: "https://m.media-amazon.com/images/I/81PgpygKwdL._AC_UF894,1000_QL80_.jpg",
-    children:
-      "Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta)",
-    className: "text-white w-[400px] h-[200px] rounded p-4",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/components/background-image/background-image.test.tsx

@@ -1,29 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { BackgroundImage } from ".";
-
-describe("BackgroundImage component", () => {
-  const imageSrc = "https://source.unsplash.com/random";
-
-  it("should render the background image", () => {
-    render(<BackgroundImage src={imageSrc} data-testid="container" />);
-    const container = screen.getByTestId("container");
-
-    expect(container).toBeInTheDocument();
-    expect(container).toHaveStyle({
-      backgroundImage: `url(${imageSrc})`,
-    });
-  });
-
-  it("should render the children", () => {
-    const text = "Lorem Ipsum";
-    render(
-      <BackgroundImage src={imageSrc}>
-        <p>{text}</p>
-      </BackgroundImage>,
-    );
-    const paragraph = screen.getByText(text);
-
-    expect(paragraph).toBeInTheDocument();
-  });
-});

package/src/components/background-image/background-image.tsx

@@ -1,23 +0,0 @@
-import { HTMLProps } from "react";
-import { cn } from "../../lib";
-
-interface Props extends HTMLProps<HTMLDivElement> {
-  /**
-   * La URL de la imagen
-   */
-  src: string;
-}
-
-export const BackgroundImage = ({ src, ...props }: Props) => {
-  return (
-    <div
-      {...props}
-      data-slot="background-image"
-      className={cn("w-full block bg-cover bg-center", props.className)}
-      style={{
-        ...props.style,
-        backgroundImage: `url(${src})`,
-      }}
-    />
-  );
-};

package/src/components/background-image/index.ts

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

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

@@ -1,44 +0,0 @@
-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/loader-overlay.tsx

@@ -1,21 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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/dropzone/upload-primitives.tsx

@@ -1,310 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { X } from "lucide-react";
-import React, {
-  ComponentPropsWithoutRef,
-  createContext,
-  ReactNode,
-  useContext,
-  useRef,
-  useState,
-} from "react";
-import { cn } from "../../lib";
-import { Button } from "../button";
-import { FileError, useDropzone } from "./use-dropzone";
-
-type UploadContextType = {
-  files: File[];
-  rejectedFiles: File[];
-  handleFileAdd: (files: File[]) => void;
-  handleFileRemove: (index: number, type: "accepted" | "rejected") => void;
-  inputProps: React.ComponentPropsWithoutRef<"input">;
-  isDragActive: boolean;
-  dropzoneProps: {
-    onDragOver: React.DragEventHandler<HTMLDivElement>;
-    onDragEnter: React.DragEventHandler<HTMLDivElement>;
-    onDragLeave: React.DragEventHandler<HTMLDivElement>;
-    onDrop: React.DragEventHandler<HTMLDivElement>;
-  };
-};
-
-const UploadContext = createContext<UploadContextType | null>(null);
-
-const useUploadContext = () => {
-  const context = useContext(UploadContext);
-  if (!context) {
-    throw new Error(
-      "useUploadContext must be used within a UploadContextProvider",
-    );
-  }
-  return context;
-};
-
-type UploadRootProps = {
-  onFileAdd?: (files: File[]) => void;
-  onFileRemove?: (index: number, type: "accepted" | "rejected") => void;
-  onChangeFiles?: (files: File[]) => void;
-  files?: File[];
-  maxFiles?: number;
-  allowedExtensions?: string[];
-  maxFileSize?: number;
-  multiple?: true;
-  className?: string;
-  children?: ReactNode;
-  onError?: (fileErrors: FileError[]) => void;
-};
-
-const UploadRoot = ({
-  onFileAdd,
-  onFileRemove,
-  onChangeFiles,
-  files: prop,
-  maxFiles = 1,
-  allowedExtensions = [],
-  maxFileSize = 5 * 1024 * 1024, // 5MB
-  multiple,
-  children,
-  onError,
-  ...props
-}: UploadRootProps) => {
-  const [files = [], setFiles] = useControllableState<File[]>({
-    defaultProp: [],
-    prop,
-    onChange: onChangeFiles,
-  });
-  const [rejectedFiles, setRejectedFiles] = useState<File[]>([]);
-  const { isDragActive, validateFiles, dropzoneProps } = useDropzone({
-    onDrop: (acceptedFiles, rejectedFiles) => {
-      setFiles([...files, ...acceptedFiles]);
-      setRejectedFiles((prevRejectedFiles) => [
-        ...prevRejectedFiles,
-        ...rejectedFiles,
-      ]);
-      onFileAdd?.(acceptedFiles);
-    },
-    allowedExtensions,
-    maxFileSize,
-    maxFiles,
-    onError,
-  });
-
-  const handleFileAdd = (newFiles: File[]) => {
-    const [rejected = [], accepted = []] = validateFiles(newFiles);
-
-    // Caso 1: Single file upload (maxFiles === 1 o !multiple)
-    if (maxFiles === 1 || !multiple) {
-      setFiles(accepted.slice(0, 1));
-      setRejectedFiles([...rejected, ...accepted.slice(1)]);
-      onFileAdd?.(accepted.slice(0, 1));
-      return;
-    }
-
-    // Caso 2: Multiple files upload
-    const availableSlots = maxFiles - files.length;
-    if (availableSlots <= 0) {
-      // No hay slots disponibles, todos van a rejected
-      setRejectedFiles((prevRejected) => [...prevRejected, ...accepted]);
-      onFileAdd?.([]);
-      return;
-    }
-
-    // Dividir los archivos aceptados entre los que caben y los que no
-    const acceptedFiles = accepted.slice(0, availableSlots);
-    const overflowFiles = accepted.slice(availableSlots);
-
-    // Actualizar estados
-    setFiles([...files, ...acceptedFiles]);
-    setRejectedFiles((prevRejected) => [
-      ...prevRejected,
-      ...rejected,
-      ...overflowFiles,
-    ]);
-
-    onFileAdd?.(acceptedFiles);
-  };
-
-  const handleFileRemove = (index: number, type: "accepted" | "rejected") => {
-    if (type === "accepted") {
-      setFiles(files.filter((_, i) => i !== index));
-    } else {
-      setRejectedFiles((prevRejectedFiles) =>
-        prevRejectedFiles.filter((_, i) => i !== index),
-      );
-    }
-    onFileRemove?.(index, type);
-  };
-
-  return (
-    <UploadContext.Provider
-      value={{
-        files,
-        rejectedFiles,
-        handleFileAdd,
-        handleFileRemove,
-        inputProps: {
-          accept: allowedExtensions.join(","),
-          multiple: multiple,
-        },
-        isDragActive,
-        dropzoneProps,
-      }}
-    >
-      <div {...props} data-slot="upload">
-        {children}
-      </div>
-    </UploadContext.Provider>
-  );
-};
-
-type UploadTriggerProps = {
-  asChild?: boolean;
-} & ComponentPropsWithoutRef<"button">;
-
-const UploadTrigger = ({ asChild, ...props }: UploadTriggerProps) => {
-  const { handleFileAdd, inputProps, dropzoneProps, isDragActive } =
-    useUploadContext();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <>
-      <Comp
-        data-slot="upload-trigger"
-        {...props}
-        {...(dropzoneProps as any)}
-        data-drag-active={isDragActive || false}
-        onClick={(e) => {
-          props.onClick?.(e);
-          inputRef.current?.click();
-        }}
-      />
-      <input
-        type="file"
-        className="hidden"
-        data-slot="upload-input"
-        {...inputProps}
-        ref={inputRef}
-        onChange={(e) => handleFileAdd(Array.from(e.target.files || []))}
-      />
-    </>
-  );
-};
-
-type UploadContentProps = ComponentPropsWithoutRef<"div"> & {
-  renderRejectedFile?: (file: File) => ReactNode;
-};
-
-const UploadContent = ({ className, ...props }: UploadContentProps) => {
-  return (
-    <div
-      {...props}
-      className={cn("mt-2 space-y-2", className)}
-      data-slot="upload-content"
-    />
-  );
-};
-
-type UploadFilesListProps = {
-  files: File[];
-  handleFileRemove: (index: number, type: "accepted" | "rejected") => void;
-  fileType: "accepted" | "rejected";
-  children?: ReactNode;
-  renderFile?: (file: File, removeItem: () => void) => ReactNode;
-};
-
-const UploadFilesList = ({
-  files,
-  handleFileRemove,
-  fileType,
-  children,
-  renderFile,
-  ...props
-}: UploadFilesListProps) => {
-  if (files.length === 0) return null;
-
-  return (
-    <div className="mt-2 space-y-2" {...props} data-slot="upload-files-list">
-      {children}
-      {files.map((file, index) => {
-        if (renderFile) {
-          return renderFile(file, () => handleFileRemove(index, fileType));
-        }
-        return (
-          <UploadItem
-            key={file.name}
-            file={file}
-            onRemove={() => handleFileRemove(index, fileType)}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-type UploadFilesProps = Omit<
-  UploadFilesListProps,
-  "fileType" | "handleFileRemove" | "files"
->;
-
-export const UploadAcceptedFiles = (props: UploadFilesProps) => {
-  const { files, handleFileRemove } = useUploadContext();
-
-  return (
-    <UploadFilesList
-      data-slot="upload-accepted-files"
-      files={files}
-      handleFileRemove={handleFileRemove}
-      fileType="accepted"
-      {...props}
-    />
-  );
-};
-
-export const UploadRejectedFiles = (props: UploadFilesProps) => {
-  const { rejectedFiles, handleFileRemove } = useUploadContext();
-
-  return (
-    <UploadFilesList
-      data-slot="upload-rejected-files"
-      files={rejectedFiles}
-      handleFileRemove={handleFileRemove}
-      fileType="rejected"
-      {...props}
-    />
-  );
-};
-
-type UploadItemProps = ComponentPropsWithoutRef<"div"> & {
-  file: File;
-  onRemove: () => void;
-  renderIcon?: (file: File) => ReactNode;
-};
-
-const UploadItem = ({
-  file,
-  onRemove,
-  className,
-  renderIcon,
-  ...props
-}: UploadItemProps) => (
-  <div
-    className={cn("flex items-center gap-2 mb-2", className)}
-    {...props}
-    data-slot="upload-item"
-  >
-    {renderIcon?.(file)}
-    {file.name}
-    <Button
-      variant="ghost"
-      size="icon"
-      type="button"
-      className="h-6 w-6"
-      onClick={onRemove}
-      data-slot="upload-item-remove"
-    >
-      <X data-slot="upload-item-remove-icon" />
-    </Button>
-  </div>
-);
-
-export { UploadContent, UploadItem, UploadRoot, UploadTrigger };