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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+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/number-input/index.ts

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