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

package/src/components/dropzone/use-dropzone.ts

@@ -1,122 +0,0 @@
-import { useCallback, useState } from "react";
-
-export type FileErrorCode =
-  | "INVALID_EXTENSION"
-  | "FILE_TOO_LARGE"
-  | "MAX_FILES_EXCEEDED";
-
-export type FileError = {
-  file: File;
-  errorMessage: string;
-  errorCode: FileErrorCode;
-};
-
-type UseDropzoneProps = {
-  onDrop: (acceptedFiles: File[], rejectedFiles: File[]) => void;
-  onError?: (fileErrors: FileError[]) => void;
-  allowedExtensions?: string[];
-  maxFileSize?: number;
-  maxFiles?: number;
-};
-
-export const useDropzone = ({
-  onDrop,
-  onError,
-  allowedExtensions = [],
-  maxFileSize = 5 * 1024 * 1024,
-  maxFiles = Infinity,
-}: UseDropzoneProps) => {
-  const [isDragActive, setIsDragActive] = useState(false);
-
-  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
-
-  const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragActive(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragActive(false);
-  }, []);
-
-  const validateFiles = (files: File[]): [File[], File[], FileError[]] => {
-    const [rejected = [], accepted = [], fileErrors = []] = files.reduce(
-      (
-        [rejected, accepted, fileErrors]: [File[], File[], FileError[]],
-        file,
-      ) => {
-        if (
-          allowedExtensions.length > 0 &&
-          !allowedExtensions.includes(file.type)
-        ) {
-          rejected.push(file);
-          fileErrors.push({
-            file,
-            errorMessage: "Extensión no permitida",
-            errorCode: "INVALID_EXTENSION",
-          });
-          return [rejected, accepted, fileErrors];
-        }
-        if (file.size > maxFileSize) {
-          rejected.push(file);
-          fileErrors.push({
-            file,
-            errorMessage: "Archivo demasiado grande",
-            errorCode: "FILE_TOO_LARGE",
-          });
-          return [rejected, accepted, fileErrors];
-        }
-        if (maxFiles && maxFiles < accepted.length + 1) {
-          rejected.push(file);
-          fileErrors.push({
-            file,
-            errorMessage: "Límite de archivos excedido",
-            errorCode: "MAX_FILES_EXCEEDED",
-          });
-          return [rejected, accepted, fileErrors];
-        }
-        accepted.push(file);
-        return [rejected, accepted, fileErrors];
-      },
-      [[], [], []],
-    );
-
-    // Ejecutar onError si hay errores y el callback está definido
-    if (fileErrors.length > 0 && onError) {
-      onError(fileErrors);
-    }
-
-    return [rejected, accepted, fileErrors];
-  };
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setIsDragActive(false);
-
-      const newFiles = Array.from(e.dataTransfer.files);
-      const [rejected = [], accepted = []] = validateFiles(newFiles);
-
-      onDrop(accepted, rejected);
-    },
-    [allowedExtensions, maxFileSize, maxFiles, onDrop, onError],
-  );
-
-  return {
-    isDragActive,
-    validateFiles,
-    dropzoneProps: {
-      onDragOver: handleDragOver,
-      onDragEnter: handleDragEnter,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop,
-    },
-  };
-};

package/src/components/empty-state/empty-state.stories.tsx

@@ -1,56 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { MessageSquareMore } from "lucide-react";
-import { Button, EmptyState, Stack } from "../../components";
-
-/**
- * El componente EmptyState proporciona una interfaz visual para mostrar cuando no hay datos o contenido disponible.
- *
- * ### Características principales
- * - Soporte para íconos personalizados
- * - Título y descripción configurables
- * - Capacidad de agregar acciones mediante children
- */
-const meta: Meta<typeof EmptyState> = {
-  title: "others/EmptyState",
-  component: EmptyState,
-  args: {
-    title: "No hay resultados",
-    description: "Intenta buscar algo diferente",
-  },
-  argTypes: {
-    icon: {
-      control: false,
-    },
-    children: {
-      control: false,
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof EmptyState>;
-
-/**
- * Ejemplo básico del EmptyState con título y descripción
- */
-export const Default: Story = {};
-
-/**
- * Ejemplo con ícono personalizado y botones de acción.
- * Demuestra cómo agregar interactividad al estado vacío.
- */
-export const Actions: Story = {
-  render: () => (
-    <EmptyState
-      icon={<MessageSquareMore className="h-12 w-12" />}
-      title="No tienes mensajes"
-      description="Intenta crear uno nuevo"
-    >
-      <Stack>
-        <Button variant="outline">Importar</Button>
-        <Button>Crear nuevo</Button>
-      </Stack>
-    </EmptyState>
-  ),
-};

package/src/components/empty-state/empty-state.tsx

@@ -1,39 +0,0 @@
-import { FolderSearch } from "lucide-react";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { cn } from "../../lib";
-import { Heading } from "../heading";
-
-type Props = ComponentPropsWithoutRef<"div"> & {
-  icon?: ReactNode;
-  title?: ReactNode;
-  description?: ReactNode;
-};
-
-export const EmptyState = ({
-  icon = <FolderSearch className="w-12 h-12" />,
-  title = "No hay resultados",
-  description,
-  className,
-  children,
-  ...props
-}: Props) => (
-  <div
-    className={cn("flex flex-col gap-2 justify-center items-center", className)}
-    data-slot="empty-state"
-    {...props}
-  >
-    <div className="text-muted-foreground" data-slot="empty-state-icon">
-      {icon}
-    </div>
-    <Heading className="empty:hidden" data-slot="empty-state-title">
-      {title}
-    </Heading>
-    <p
-      className="py-1 text-sm text-center text-muted-foreground empty:hidden"
-      data-slot="empty-state-description"
-    >
-      {description}
-    </p>
-    {children}
-  </div>
-);

package/src/components/empty-state/index.ts

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

package/src/components/heading/heading.stories.tsx

@@ -1,74 +0,0 @@
-import { faker } from "@faker-js/faker";
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { Heading } from "../../components";
-
-const meta: Meta<typeof Heading> = {
-  title: "typography/Heading",
-  component: Heading,
-  args: {
-    children: faker.lorem.sentence(),
-  },
-  argTypes: {
-    children: {
-      control: false,
-    },
-    size: {
-      options: ["sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"],
-      control: { type: "select" },
-      defaultValue: "xl",
-      description: "The font size of the heading. xl is the default.",
-    },
-    weight: {
-      options: ["normal", "medium", "semibold", "bold"],
-      control: { type: "select" },
-      defaultValue: "semibold",
-      description: "The font weight of the heading. semibold is the default.",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Heading>;
-
-export const Default: Story = {};
-
-export const Sizes: Story = {
-  render: () => (
-    <>
-      <Heading size="sm">Heading sm (14px)</Heading>
-      <Heading size="md">Heading md (16px)</Heading>
-      <Heading size="lg">Heading lg (18px)</Heading>
-      <Heading size="xl">Heading xl (20px)</Heading>
-      <Heading size="2xl">Heading 2xl (24px)</Heading>
-      <Heading size="3xl">Heading 3xl (28px)</Heading>
-      <Heading size="4xl">Heading 4xl (32px)</Heading>
-      <Heading size="5xl">Heading 5xl (36px)</Heading>
-      <Heading size="6xl">Heading 6xl (40px)</Heading>
-    </>
-  ),
-};
-
-export const Weights: Story = {
-  render: () => (
-    <>
-      <Heading weight="normal">Heading normal</Heading>
-      <Heading weight="medium">Heading medium</Heading>
-      <Heading weight="semibold">Heading semibold</Heading>
-      <Heading weight="bold">Heading bold</Heading>
-    </>
-  ),
-};
-
-export const As: Story = {
-  render: () => (
-    <>
-      <Heading as="h1">Heading as h1</Heading>
-      <Heading as="h2">Heading as h2</Heading>
-      <Heading as="h3">Heading as h3</Heading>
-      <Heading as="h4">Heading as h4</Heading>
-      <Heading as="h5">Heading as h5</Heading>
-      <Heading as="h6">Heading as h6</Heading>
-    </>
-  ),
-};

package/src/components/heading/heading.tsx

@@ -1,28 +0,0 @@
-import { VariantProps } from "class-variance-authority";
-import { cn } from "../../lib";
-import { HeadingVariants } from "./heading.variants";
-
-type Props<C extends React.ElementType> = VariantProps<
-  typeof HeadingVariants
-> & {
-  as?: C;
-} & Omit<React.ComponentPropsWithoutRef<C>, "as">;
-
-export const Heading = <C extends React.ElementType = "h2">({
-  className,
-  size,
-  weight,
-  as,
-  ...props
-}: Props<C>) => {
-  const Comp = as || "h2";
-  return (
-    <Comp
-      className={cn(HeadingVariants({ size, weight }), className)}
-      {...props}
-      data-slot="heading"
-      data-size={size}
-      data-weight={weight}
-    />
-  );
-};

package/src/components/heading/heading.variants.ts

@@ -1,27 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export const HeadingVariants = cva([], {
-  variants: {
-    size: {
-      sm: "text-[14px]",
-      md: "text-[16px]",
-      lg: "text-[18px]",
-      xl: "text-[20px]",
-      "2xl": "text-[24px]",
-      "3xl": "text-[28px]",
-      "4xl": "text-[32px]",
-      "5xl": "text-[36px]",
-      "6xl": "text-[40px]",
-    },
-    weight: {
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold",
-    },
-  },
-  defaultVariants: {
-    size: "xl",
-    weight: "semibold",
-  },
-});

package/src/components/heading/index.ts

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

package/src/components/kbd/kbd.variants.ts

@@ -1,26 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export const KbdVariants = cva(
-  [
-    "inline-flex select-none items-center gap-1 rounded border bg-muted px-1.5 font-medium text-muted-foreground",
-  ],
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-secondary text-secondary-foreground",
-        secondary: "border-transparent bg-primary text-primary-foreground",
-        error: "border-transparent bg-error text-error-foreground",
-        outline: "text-foreground",
-      },
-      size: {
-        default: "px-1.5 py-0.5 text-xs",
-        sm: "px-2 py-0.5 text-sm",
-        lg: "px-4 py-1 text-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);

package/src/components/menu/util/render-menu-item.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { MenuItemType } from "../menu";
-import {
-  MenuCheckboxItem,
-  MenuItem,
-  MenuLabel,
-  MenuRadioItem,
-  MenuSeparator,
-  MenuSub,
-  MenuSubContent,
-  MenuSubTrigger,
-} from "../menu-primitives";
-
-export const renderMenuItem = (item: MenuItemType, children?: any) => {
-  switch (item.type) {
-    case "item":
-      return (
-        <MenuItem {...item}>
-          {item.label} {children}
-        </MenuItem>
-      );
-    case "checkbox":
-      return (
-        <MenuCheckboxItem {...item}>
-          {item.label} {children}
-        </MenuCheckboxItem>
-      );
-    case "radio":
-      return (
-        <MenuRadioItem {...item}>
-          {item.label} {children}
-        </MenuRadioItem>
-      );
-    case "label":
-      return <MenuLabel {...item}>{item.label} </MenuLabel>;
-    case "separator":
-      return <MenuSeparator {...item} />;
-    case "submenu":
-      return (
-        <MenuSub>
-          <MenuSubTrigger {...item}>{item.label}</MenuSubTrigger>
-          <MenuSubContent>
-            {item.items?.map((subItem, index) => (
-              <React.Fragment key={index}>
-                {renderMenuItem(subItem)}
-              </React.Fragment>
-            ))}
-          </MenuSubContent>
-        </MenuSub>
-      );
-    default:
-      return null;
-  }
-};

package/src/components/multi-select/hooks/use-multi-select.ts

@@ -1,66 +0,0 @@
-type Props = {
-  valueKey: string | number | symbol;
-  values: string[];
-  setValues: (values: string[]) => void;
-  items: any[];
-  maxCount: number;
-  setIsPopoverOpen: (open: any) => void;
-};
-
-export const useMultiSelect = ({
-  valueKey,
-  values,
-  setValues,
-  items,
-  maxCount,
-  setIsPopoverOpen,
-}: Props) => {
-  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "Enter") {
-      setIsPopoverOpen(true);
-    } else if (event.key === "Backspace" && !event.currentTarget.value) {
-      const newSelectedValues = [...values];
-      newSelectedValues.pop();
-      setValues?.(newSelectedValues);
-    }
-  };
-
-  const toggleOption = (option: string) => {
-    const newSelectedValues = values.includes(option)
-      ? values.filter((value) => value !== option)
-      : [...values, option];
-    setValues?.(newSelectedValues);
-  };
-
-  const handleClear = () => {
-    setValues?.([]);
-  };
-
-  const handleTogglePopover = () => {
-    setIsPopoverOpen((prev: boolean) => !prev);
-  };
-
-  const clearExtraOptions = () => {
-    const newSelectedValues = values.slice(0, maxCount);
-    setValues?.(newSelectedValues);
-  };
-
-  const toggleAll = () => {
-    const allowedItems = items.filter((option) => !option.disabled);
-    if (values.length === allowedItems.length) {
-      handleClear();
-    } else {
-      const allValues = allowedItems.map((option) => option[valueKey]);
-      setValues?.(allValues);
-    }
-  };
-
-  return {
-    handleInputKeyDown,
-    toggleOption,
-    handleClear,
-    handleTogglePopover,
-    clearExtraOptions,
-    toggleAll,
-  };
-};

package/src/components/multi-select/index.ts

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