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

package/src/components/multi-select/multi-select.stories.tsx

@@ -1,294 +0,0 @@
-import { faker } from "@faker-js/faker";
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import { Avatar, Button, MultiSelect } from "../../components";
-
-const generateRandomOption = () => ({
-  label: faker.person.fullName(),
-  value: faker.string.uuid(),
-});
-
-const items = faker.helpers.multiple(generateRandomOption, { count: 10 });
-
-const meta: Meta<typeof MultiSelect> = {
-  title: "Data entry/MultiSelect",
-  component: MultiSelect,
-  args: {
-    items,
-  },
-  parameters: {
-    badges: ["new"],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof MultiSelect>;
-
-export const Default: Story = {
-  args: {
-    withCheckbox: false,
-    defaultValue: [items[0].value],
-  },
-};
-
-export const Primary: Story = {
-  args: {
-    variant: "primary",
-    defaultValue: [items[0].value],
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    defaultValue: [items[0].value],
-  },
-};
-
-export const OnlyOptions: Story = {
-  args: {
-    showSelectAll: false,
-    showSearch: false,
-    defaultValue: [items[0].value],
-  },
-};
-
-export const Destructive: Story = {
-  args: {
-    variant: "error",
-    defaultValue: [items[0].value],
-  },
-};
-
-/**
- * Por defecto el componente `MultiSelect` espera `items` con la siguiente interfaz
- *
- * ```tsx
- * interface Option = {
- *   label: string;
- *   value: string;
- * }
- * ```
- *
- * En caso de tener un objeto con otra interfaz utilizar la propiedad `valueKey` para identificar el valor y `labelKey` para identificar el label
- *
- * ```tsx
- * type Animal = {
- *   key: string;
- *   name: string;
- *   emoji: string;
- * }
- *
- * const animals: Animal[] = [
- *   { key: "cat", name: "Cat", emoji: "🐱" },
- *   { key: "dog", name: "Dog", emoji: "🐶" },
- * ];
- *
- * <MultiSelect
- *   valueKey="key"
- *   labelKey="name"
- *   items={animals}
- * />
- *
- * ```
- */
-
-export const CustomObject: Story = {
-  render: () => {
-    type Animal = {
-      key: string;
-      name: string;
-      emoji: string;
-    };
-
-    const animals: Animal[] = [
-      { key: "cat", name: "Cat", emoji: "🐱" },
-      { key: "dog", name: "Dog", emoji: "🐶" },
-    ];
-
-    return (
-      <MultiSelect<Animal>
-        items={animals}
-        valueKey="key"
-        labelKey="name"
-        renderOption={(item: Animal) => `${item.emoji} ${item.name}`}
-      />
-    );
-  },
-};
-
-const dataDisabled = [
-  {
-    label: faker.person.fullName(),
-    value: faker.string.uuid(),
-    disabled: true,
-  },
-  {
-    label: faker.person.fullName(),
-    value: faker.string.uuid(),
-    disabled: false,
-  },
-  {
-    label: faker.person.fullName(),
-    value: faker.string.uuid(),
-    disabled: true,
-  },
-  {
-    label: faker.person.fullName(),
-    value: faker.string.uuid(),
-    disabled: false,
-  },
-];
-
-/**
- * Se puede deshabilitar cada opción
- *
- * ```tsx
- * const data = [
- *   {
- *     label: faker.person.fullName(),
- *     value: faker.string.uuid(),
- *     disabled: true,
- *   }
- * ]
- *
- * ```
- */
-export const WithDisabledOptions: Story = {
-  args: {
-    items: dataDisabled,
-  },
-};
-
-const data = [
-  {
-    label: faker.person.fullName(),
-    value: faker.string.uuid(),
-    image: faker.image.avatar(),
-  },
-  {
-    label: faker.person.fullName(),
-    value: faker.string.uuid(),
-    image: faker.image.avatar(),
-  },
-  {
-    label: faker.person.fullName(),
-    value: faker.string.uuid(),
-    image: faker.image.avatar(),
-  },
-  {
-    label: faker.person.fullName(),
-    value: faker.string.uuid(),
-    image: faker.image.avatar(),
-  },
-];
-
-/**
- * Se puede customizar el contenido que se renderiza por cada opción
- *
- * ```tsx
- * const data = [
- *   {
- *     label: faker.person.fullName(),
- *     value: faker.string.uuid(),
- *     image: faker.image.avatar(),
- *   }
- * ]
- *
- * <MultiSelect
- *   items={data}
- *   renderOption={(option) => (
- *     <div className="flex items-center gap-2">
- *       <Avatar
- *         src={option.image}
- *         alt={option.label}
- *         className="w-6 h-6"
- *       />
- *       {option.label}
- *     </div>
- *   )}
- * />
- * ```
- */
-export const CustomRender: Story = {
-  args: {
-    items: data,
-    renderOption: (option) => (
-      <div className="flex items-center gap-2">
-        <Avatar src={option.image} alt={option.label} className="w-6 h-6" />
-        {option.label}
-      </div>
-    ),
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const ControlledValue: Story = {
-  args: {
-    defaultValue: [items[0].value],
-  },
-  render: (args) => {
-    const [value, setValue] = useState([items[0].value]);
-    return (
-      <div className="space-y-2">
-        <div className="flex gap-2 items-center ">
-          <Button onClick={() => setValue([items[0].value])}>
-            Seleccionar primera opción
-          </Button>
-          <Button onClick={() => setValue([])}>Limpiar selección</Button>
-          <Button onClick={() => setValue(items.map((item) => item.value))}>
-            Seleccionar todas las opciones
-          </Button>
-        </div>
-
-        <MultiSelect {...args} value={value} onChange={setValue} />
-        <pre className="rounded-md bg-slate-950 p-4 text-white">
-          <code className="block">
-            Selected:{" "}
-            <span className="text-blue-300">
-              {JSON.stringify(value, null, 2)}
-            </span>
-          </code>
-        </pre>
-      </div>
-    );
-  },
-};
-
-/**
- * Se puede controlar el estado de apertura del popover
- *
- * ```tsx
- * type OpenProps = {
- *   open?: boolean;
- *   onOpenChange?: (open: boolean) => void;
- *   defaultOpen?: boolean;
- * };
- * ```
- */
-export const ControlledOpen: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <div className="space-y-2">
-        <div className="flex gap-2 items-center">
-          <Button onClick={() => setOpen(true)}>Abrir</Button>
-          <Button onClick={() => setOpen(false)}>Cerrar</Button>
-        </div>
-
-        <MultiSelect
-          open={open}
-          onOpenChange={setOpen}
-          items={items}
-          defaultOpen
-        />
-      </div>
-    );
-  },
-};

package/src/components/multi-select/multi-select.tsx

@@ -1,300 +0,0 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { type VariantProps } from "class-variance-authority";
-import { CheckIcon, ChevronsUpDown, XIcon } from "lucide-react";
-import * as React from "react";
-import { Option, OverrideProps } from "@/models";
-import { Tag } from "../../components/tag";
-import { cn } from "../../lib";
-import {
-  AutoCompleteEmpty,
-  AutoCompleteGroup,
-  AutoCompleteInput,
-  AutoCompleteItem,
-  AutoCompleteList,
-  AutoCompleteRoot,
-} from "../auto-complete";
-import { Divider } from "../divider";
-import { PopoverPopup, PopoverRoot, PopoverTrigger } from "../popover";
-import { useMultiSelect } from "./hooks/use-multi-select";
-import { multiSelectVariants } from "./multi-select.variants";
-
-type OpenProps = {
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  defaultOpen?: boolean;
-};
-
-type MultiSelectProps<TItem extends Record<string, any>> = OverrideProps<
-  React.ButtonHTMLAttributes<HTMLButtonElement> &
-    OpenProps &
-    VariantProps<typeof multiSelectVariants>,
-  {
-    items: TItem[];
-    /**
-     * Identificador del valor del elemento
-     * @default "value"
-     */
-    valueKey?: keyof TItem;
-    /**
-     * Identificador del label del elemento
-     * @default "label"
-     */
-    value?: string[];
-    onChange?: (value: string[]) => void;
-    defaultValue?: string[];
-    labelKey?: keyof TItem;
-    placeholder?: string;
-    /**
-     * Cantidad máxima de elementos que se van a visualizar
-     * @default 3
-     */
-    maxCount?: number;
-    className?: string;
-    renderOption?: (item: TItem) => React.ReactNode;
-    withCheckbox?: boolean;
-    /**
-     * Para mostrar o no la barra de búsqueda
-     * @default true
-     */
-    showSearch?: boolean;
-    /**
-     * Para mostrar o no el "Seleccionar todos"
-     * @default true
-     */
-    showSelectAll?: boolean;
-    /**
-     * Props del PopoverRoot
-     */
-    rootProps?: React.ComponentPropsWithoutRef<typeof PopoverRoot>;
-  }
->;
-
-export const MultiSelect = <TItem extends Record<string, any> = Option>({
-  items = [],
-  value,
-  valueKey = "value" as keyof TItem,
-  labelKey = "label" as keyof TItem,
-  onChange,
-  variant,
-  defaultValue = [],
-  placeholder = "Seleccionar",
-  maxCount = 3,
-  className,
-  renderOption = (item: TItem) => item[labelKey],
-  withCheckbox = false,
-  showSearch = true,
-  showSelectAll = true,
-  rootProps,
-  ...props
-}: MultiSelectProps<TItem>) => {
-  const [values = [], setValues] = useControllableState<string[]>({
-    prop: value,
-    onChange: onChange,
-    defaultProp: defaultValue,
-  });
-
-  const [isPopoverOpen, setIsPopoverOpen] = useControllableState({
-    prop: props.open,
-    onChange: props.onOpenChange,
-    defaultProp: props.defaultOpen || false,
-  });
-
-  const allowedOptions = React.useMemo(
-    () => items.filter((i: TItem): boolean => !i.disabled),
-    [items],
-  );
-
-  const {
-    handleInputKeyDown,
-    toggleOption,
-    handleClear,
-    handleTogglePopover,
-    clearExtraOptions,
-    toggleAll,
-  } = useMultiSelect({
-    valueKey,
-    values,
-    setValues,
-    items,
-    maxCount,
-    setIsPopoverOpen,
-  });
-
-  return (
-    <PopoverRoot
-      open={isPopoverOpen}
-      onOpenChange={setIsPopoverOpen}
-      data-slot="multi-select"
-      {...rootProps}
-    >
-      <PopoverTrigger
-        {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
-        data-slot="multi-select-trigger"
-        onClick={handleTogglePopover}
-        className={cn(
-          "flex w-full p-1 rounded-md border border-input min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit",
-          className,
-        )}
-      >
-        {values.length > 0 ? (
-          <div className="flex justify-between items-center w-full">
-            <div
-              className="flex flex-wrap items-center"
-              data-slot="multi-select-tags"
-            >
-              {values.slice(0, maxCount).map((value) => {
-                const option = items.find((o) => o[valueKey] === value);
-                const IconComponent = option?.icon;
-                return (
-                  <Tag
-                    key={value}
-                    data-slot="multi-select-tag"
-                    className={cn(multiSelectVariants({ variant }))}
-                    closable
-                    onClose={() => toggleOption(value)}
-                  >
-                    {IconComponent && (
-                      <IconComponent className="h-4 w-4 mr-2" />
-                    )}
-                    {option && renderOption?.(option)}
-                  </Tag>
-                );
-              })}
-              {values.length > maxCount && (
-                <Tag
-                  data-slot="multi-select-tag"
-                  className={cn(multiSelectVariants({ variant }))}
-                  closable
-                  onClose={clearExtraOptions}
-                >
-                  {`+ ${values.length - maxCount} más`}
-                </Tag>
-              )}
-            </div>
-            <div className="flex items-center justify-between">
-              <XIcon
-                data-slot="multi-select-clear"
-                className="h-4 mx-2 cursor-pointer text-muted-foreground"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  handleClear();
-                }}
-              />
-              <Divider
-                data-slot="multi-select-divider"
-                orientation="vertical"
-                className="flex min-h-6 h-full"
-              />
-              <ChevronsUpDown
-                data-slot="multi-select-trigger-icon"
-                className="h-4 mx-2 cursor-pointer text-muted-foreground"
-              />
-            </div>
-          </div>
-        ) : (
-          <div
-            className="flex items-center justify-between w-full mx-auto"
-            data-slot="multi-select-trigger-empty"
-          >
-            <span
-              className="text-sm text-foreground font-normal mx-2"
-              data-slot="multi-select-placeholder"
-            >
-              {placeholder}
-            </span>
-            <ChevronsUpDown
-              data-slot="multi-select-trigger-icon"
-              className="h-4 cursor-pointer text-muted-foreground mx-2"
-            />
-          </div>
-        )}
-      </PopoverTrigger>
-      <PopoverPopup
-        data-slot="multi-select-content"
-        className="p-0 min-w-(--anchor-width)"
-        align="start"
-      >
-        <AutoCompleteRoot>
-          {showSearch && (
-            <AutoCompleteInput
-              data-slot="multi-select-input"
-              placeholder="Buscar..."
-              onKeyDown={handleInputKeyDown}
-            />
-          )}
-          <AutoCompleteList data-slot="multi-select-list">
-            <AutoCompleteEmpty data-slot="multi-select-empty">
-              No results found.
-            </AutoCompleteEmpty>
-            <AutoCompleteGroup data-slot="multi-select-group">
-              {showSelectAll && (
-                <AutoCompleteItem
-                  data-slot="multi-select-item"
-                  key="all"
-                  onSelect={toggleAll}
-                  className={cn(
-                    "cursor-pointer",
-                    !withCheckbox &&
-                      values.length === allowedOptions.length &&
-                      "bg-accent text-accent-foreground",
-                  )}
-                >
-                  {withCheckbox && (
-                    <div
-                      className={cn(
-                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
-                        values.length === allowedOptions.length
-                          ? "bg-primary text-primary-foreground"
-                          : "opacity-50 [&_svg]:invisible",
-                      )}
-                    >
-                      <CheckIcon className="h-4 w-4" />
-                    </div>
-                  )}
-                  <span>(Seleccionar todo)</span>
-                </AutoCompleteItem>
-              )}
-              {items.map((option) => {
-                const isSelected = values.includes(option[valueKey]);
-                return (
-                  <AutoCompleteItem
-                    data-slot="multi-select-item"
-                    key={option[valueKey]}
-                    onSelect={() =>
-                      !option.disabled && toggleOption(option[valueKey])
-                    }
-                    className={cn(
-                      option.disabled
-                        ? "!bg-neutral-50 !text-neutral-400"
-                        : "cursor-pointer",
-                      !withCheckbox &&
-                        isSelected &&
-                        "!bg-accent !text-accent-foreground",
-                    )}
-                  >
-                    {withCheckbox && (
-                      <div
-                        className={cn(
-                          "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
-                          isSelected
-                            ? "bg-primary text-primary-foreground"
-                            : "opacity-50 [&_svg]:invisible",
-                        )}
-                      >
-                        <CheckIcon className="h-4 w-4" />
-                      </div>
-                    )}
-                    {option.icon && (
-                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
-                    )}
-                    <span>{renderOption?.(option)}</span>
-                  </AutoCompleteItem>
-                );
-              })}
-            </AutoCompleteGroup>
-          </AutoCompleteList>
-        </AutoCompleteRoot>
-      </PopoverPopup>
-    </PopoverRoot>
-  );
-};

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

@@ -1,22 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export const multiSelectVariants = cva(
-  "m-1 transition ease-in-out delay-150 duration-300",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-foreground/10 border text-foreground bg-card hover:bg-card/80",
-        primary:
-          "border-foreground/10 border text-foreground bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-foreground/60 border bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        error:
-          "border-transparent bg-error text-error-foreground hover:bg-error/80",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);

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

@@ -1,27 +0,0 @@
-import { ButtonHTMLAttributes } from "react";
-import { DOTS } from "../../../hooks";
-import { cn } from "../../../lib";
-
-interface PaginationOptionProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
-  isActive?: boolean;
-}
-
-const PaginationOption = ({
-  isActive = false,
-  ...props
-}: PaginationOptionProps) => (
-  <button
-    {...props}
-    data-slot="pagination-option"
-    data-active={isActive}
-    data-dots={props.children === DOTS}
-    className={cn(
-      "transition-colors border py-2 px-4 w-[50px] h-full data-[active=false]:hover:bg-accent",
-      "data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:border-transparent data-[active=true]:hover:bg-primary/90",
-      props.className,
-    )}
-  />
-);
-
-export { PaginationOption, type PaginationOptionProps };

package/src/components/show/index.ts

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