@soyfri/shared-library 2.0.0-beta.10 → 2.0.0-beta.11

package/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -1,748 +0,0 @@
-import { useState, useEffect, useMemo } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Box, Typography, Avatar, Stack, Button } from "@mui/material";
-import { useForm } from "react-hook-form";
-
-import Autocomplete, { SelectOption } from "./Autocomplete";
-import {
-  CustomChipRenderAutocompleteDefinition,
-  CustomRenderOptionAutocompleteDefinition,
-  EmptyOptionsAutocompleteDefinition,
-  LoadingAutocompleteDefinition,
-  MultipleAutocompleteDefinition,
-  MultipleWithLimitAutocompleteDefinition,
-  SimpleAutocompleteDefinition,
-  WithPlaceholderAutocompleteDefinition,
-  WithErrorAutocompleteDefinition,
-  LabelPositionAutocompleteDefinition,
-  CustomBorderRadiusAutocompleteDefinition,
-  EmptyWithPlaceholderAutocompleteDefinition,
-  RHFAutocompleteDefinition,
-  AsyncServiceAutocompleteDefinition,
-} from "./Autocomplete.definitions";
-
-// =============================================================================
-// Datos de ejemplo
-// =============================================================================
-const basicOptions: SelectOption[] = [
-  { value: "10", label: "10" },
-  { value: "25", label: "25" },
-  { value: "50", label: "50" },
-  { value: "100", label: "100" },
-];
-
-const userOptions: SelectOption[] = [
-  {
-    value: "admin",
-    label: "Administrador",
-    img: "https://placehold.co/40x40?text=A",
-  },
-  { value: "user", label: "Usuario", img: "https://placehold.co/40x40?text=U" },
-  {
-    value: "moderator",
-    label: "Moderador",
-    img: "https://placehold.co/40x40?text=M",
-  },
-];
-
-const manyOptions = Array.from({ length: 50 }, (_, i) => ({
-  value: `option-${i}`,
-  label: `Opción ${i + 1}`,
-}));
-
-// =============================================================================
-// META
-// =============================================================================
-const meta: Meta<typeof Autocomplete> = {
-  title: "Components/Autocomplete",
-  component: Autocomplete,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component:
-          "Autocomplete personalizado basado en MUI con soporte para selección múltiple, chips, render custom y async.",
-      },
-    },
-  },
-  argTypes: {
-    label: {
-      control: "text",
-      description: "Etiqueta para el campo de selección.",
-    },
-    options: {
-      control: "object",
-      description:
-        "Array de objetos `SelectOption` para las opciones del menú.",
-    },
-    value: {
-      control: "object",
-      description: "Valor(es) seleccionado(s) del select.",
-    },
-    onChange: {
-      action: "changed",
-      description:
-        "Función de callback que se llama cuando el valor del select cambia.",
-    },
-    multiple: {
-      control: "boolean",
-      description:
-        "Si es verdadero, permite la selección de múltiples opciones.",
-    },
-    placeholder: {
-      control: "text",
-      description: "Texto que se muestra cuando no hay nada seleccionado.",
-    },
-    maxChipsToShow: {
-      control: "number",
-      description:
-        "Número máximo de chips a mostrar en selección múltiple antes de agrupar.",
-      if: { arg: "multiple", eq: true },
-    },
-    renderChipLabel: {
-      control: false,
-      description:
-        "Función para personalizar el contenido del label de cada chip seleccionado (para múltiple) o del valor mostrado (para individual).",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Autocomplete>;
-
-// =============================================================================
-// STORIES
-// =============================================================================
-
-export const Simple: Story = {
-  render: () => {
-    const [value, setValue] = useState<string>("25");
-
-    return (
-      <Box sx={{ width: 250 }}>
-        <Autocomplete
-          label="Registros por página"
-          options={basicOptions}
-          value={value}
-          onChange={(val) => {
-            setValue(val as string);
-          }}
-        />
-        <Typography sx={{ mt: 2 }}>Valor: {value}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Autocomplete simple con opciones básicas y valor por defecto.",
-      },
-      source: { code: SimpleAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const WithPlaceholder: Story = {
-  render: () => {
-    const [value, setValue] = useState<string>("");
-
-    return (
-      <Box sx={{ width: 300 }}>
-        <Autocomplete
-          label="Seleccione una opción"
-          options={basicOptions}
-          value={value}
-          onChange={(val) => {
-            setValue(val as string);
-          }}
-          placeholder="Ninguna opción seleccionada"
-        />
-        <Typography sx={{ mt: 2 }}>{value || "Ninguno"}</Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Autocomplete sin valor inicial que muestra un placeholder cuando no hay selección.",
-      },
-      source: { code: WithPlaceholderAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const Multiple: Story = {
-  render: () => {
-    const [value, setValue] = useState<string[]>([]);
-
-    return (
-      <Box sx={{ width: 400 }}>
-        <Autocomplete
-          label="Seleccionar valores"
-          multiple
-          options={basicOptions}
-          value={value}
-          onChange={(val) => {
-            setValue(val as string[]);
-          }}
-        />
-        <Typography sx={{ mt: 2 }}>
-          Valor seleccionado: {JSON.stringify(value)}
-        </Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Autocomplete en modo múltiple que permite seleccionar varias opciones y las muestra como chips.",
-      },
-      source: { code: MultipleAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const MultipleWithLimit: Story = {
-  render: () => {
-    const [value, setValue] = useState<string[]>(
-      manyOptions.slice(0, 5).map((opt) => opt.value),
-    );
-
-    return (
-      <Box sx={{ width: 400 }}>
-        <Autocomplete
-          label="Muchas selecciones"
-          multiple
-          maxChipsToShow={2}
-          options={manyOptions}
-          value={value}
-          onChange={(val) => {
-            setValue(val as string[]);
-          }}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Autocomplete múltiple con límite de chips visibles, agrupando el resto en un contador.",
-      },
-      source: { code: MultipleWithLimitAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const CustomRenderOption: Story = {
-  render: () => {
-    const [value, setValue] = useState<string[]>([]);
-
-    return (
-      <Box sx={{ width: 300 }}>
-        <Autocomplete
-          label="Usuarios"
-          multiple
-          options={userOptions}
-          value={value}
-          onChange={(val) => {
-            setValue(val as string[]);
-          }}
-          renderOptionItem={(item) => (
-            <Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
-              <Avatar src={item.img} sx={{ width: 24, height: 24 }} />
-              {item.label}
-            </Box>
-          )}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Autocomplete con renderizado personalizado de opciones, incluyendo avatar e información adicional.",
-      },
-      source: { code: CustomRenderOptionAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const CustomChipRender: Story = {
-  render: () => {
-    const [value, setValue] = useState<string[]>([]);
-
-    return (
-      <Box sx={{ width: 400 }}>
-        <Autocomplete
-          label="Usuarios seleccionados"
-          multiple
-          options={userOptions}
-          value={value}
-          onChange={(val) => {
-            setValue(val as string[]);
-          }}
-          maxChipsToShow={2}
-          renderChipLabel={(item) => (
-            <Typography variant="caption" fontWeight="bold">
-              {item.label.charAt(0)}
-            </Typography>
-          )}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Autocomplete múltiple con renderizado personalizado de chips, mostrando solo la inicial del label.",
-      },
-      source: { code: CustomChipRenderAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const Loading: Story = {
-  render: () => {
-    const [value, setValue] = useState<string>("");
-
-    return (
-      <Box sx={{ width: 300 }}>
-        <Autocomplete
-          label="Cargando..."
-          options={[]}
-          loading
-          value={value}
-          onChange={(val) => {
-            setValue(val as string);
-          }}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Autocomplete en estado de carga, útil para integraciones con APIs o búsquedas asíncronas.",
-      },
-      source: { code: LoadingAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const EmptyOptions: Story = {
-  render: () => {
-    const [value, setValue] = useState<string>("");
-
-    return (
-      <Box sx={{ width: 300 }}>
-        <Autocomplete
-          label="Sin opciones"
-          options={[]}
-          value={value}
-          onChange={(val) => {
-            setValue(val as string);
-          }}
-          placeholder="No hay opciones"
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Autocomplete sin opciones disponibles, mostrando mensaje vacío al usuario.",
-      },
-      source: { code: EmptyOptionsAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const ManyOptions: Story = {
-  render: () => {
-    const [value, setValue] = useState<string>("");
-
-    return (
-      <Box sx={{ width: 300 }}>
-        <Autocomplete
-          label="Muchas opciones"
-          options={manyOptions}
-          value={value}
-          onChange={(val) => {
-            setValue(val as string);
-          }}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Autocomplete sin opciones disponibles, mostrando mensaje vacío al usuario.",
-      },
-      source: { code: EmptyOptionsAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-// =============================================================================
-// NUEVAS STORIES — API refactorizada
-// =============================================================================
-
-export const WithError: Story = {
-  render: () => {
-    const [value, setValue] = useState<string | null>(null);
-    return (
-      <Box sx={{ width: 300 }}>
-        <Autocomplete
-          label="Cantidad"
-          options={basicOptions}
-          value={value}
-          onChange={(val) => setValue(val as string | null)}
-          error={!value}
-          helperText={!value ? "Debes seleccionar una cantidad" : " "}
-        />
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Autocomplete en estado de error con `helperText`. Muestra la validación visual (borde + label + texto en rojo).",
-      },
-      source: { code: WithErrorAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const LabelPosition: Story = {
-  render: () => {
-    const [a, setA] = useState<string | null>(null);
-    const [b, setB] = useState<string | null>(null);
-    return (
-      <Stack spacing={3} sx={{ width: 320 }}>
-        <Autocomplete
-          label="Outside (default)"
-          labelPosition="outside"
-          options={basicOptions}
-          value={a}
-          onChange={(val) => setA(val as string | null)}
-        />
-        <Autocomplete
-          label="Floating"
-          labelPosition="floating"
-          options={basicOptions}
-          value={b}
-          onChange={(val) => setB(val as string | null)}
-        />
-      </Stack>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Comparación entre `labelPosition='outside'` (label arriba del input, consistente con Input/Select/DatePicker) y `labelPosition='floating'` (comportamiento nativo MUI dentro del notch).",
-      },
-      source: { code: LabelPositionAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const CustomBorderRadius: Story = {
-  render: () => {
-    const [a, setA] = useState<string | null>(null);
-    const [b, setB] = useState<string | null>(null);
-    const [c, setC] = useState<string | null>(null);
-    return (
-      <Stack spacing={2} sx={{ width: 300 }}>
-        <Autocomplete
-          label="0"
-          borderRadius={0}
-          options={basicOptions}
-          value={a}
-          onChange={(v) => setA(v as string | null)}
-        />
-        <Autocomplete
-          label="10 (default)"
-          borderRadius={10}
-          options={basicOptions}
-          value={b}
-          onChange={(v) => setB(v as string | null)}
-        />
-        <Autocomplete
-          label="24 (pill)"
-          borderRadius={24}
-          options={basicOptions}
-          value={c}
-          onChange={(v) => setC(v as string | null)}
-        />
-      </Stack>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "La prop `borderRadius` permite personalizar el radio del borde sin usar `sx` (acepta number en px o string).",
-      },
-      source: { code: CustomBorderRadiusAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const EmptyWithPlaceholder: Story = {
-  render: () => {
-    const [value, setValue] = useState<string | null>(null);
-    const countries: SelectOption[] = [
-      { value: "mx", label: "México" },
-      { value: "co", label: "Colombia" },
-      { value: "ar", label: "Argentina" },
-    ];
-    return (
-      <Box sx={{ width: 300 }}>
-        <Autocomplete
-          label="País"
-          placeholder="Buscar país..."
-          options={countries}
-          value={value}
-          onChange={(val) => setValue(val as string | null)}
-        />
-        <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
-          Al estar vacío y sin foco, solo se ve el label como placeholder. Al
-          enfocar, el label sube y aparece el placeholder real.
-        </Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Autocomplete vacío con placeholder. El placeholder solo se muestra cuando el campo está enfocado (mismo patrón que Select/Input).",
-      },
-      source: { code: EmptyWithPlaceholderAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const WithReactHookForm: Story = {
-  render: () => {
-    type FormValues = { country: string | null };
-    const { control, handleSubmit, watch } = useForm<FormValues>({
-      defaultValues: { country: null },
-    });
-    const countries: SelectOption[] = [
-      { value: "mx", label: "México" },
-      { value: "co", label: "Colombia" },
-      { value: "ar", label: "Argentina" },
-    ];
-
-    const [submitted, setSubmitted] = useState<FormValues | null>(null);
-
-    return (
-      <Box
-        component="form"
-        onSubmit={handleSubmit((data) => setSubmitted(data))}
-      >
-        <Stack spacing={2} sx={{ width: 320 }}>
-          <Autocomplete
-            name="country"
-            control={control}
-            validation={{ required: "Campo requerido" }}
-            label="País"
-            placeholder="Seleccione..."
-            options={countries}
-          />
-          <Button type="submit" variant="contained">
-            Guardar
-          </Button>
-          <Typography variant="caption" color="text.secondary">
-            Valor actual (watch): {JSON.stringify(watch("country"))}
-          </Typography>
-          {submitted && (
-            <Typography variant="caption" color="success.main">
-              Submit: {JSON.stringify(submitted)}
-            </Typography>
-          )}
-        </Stack>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Integración con React Hook Form usando `name`/`control`/`validation`. El error de validación se renderiza automáticamente como helperText.",
-      },
-      source: { code: RHFAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-// =============================================================================
-// ASYNC — búsqueda remota contra un servicio
-// =============================================================================
-// Simulador de servicio: hace una "llamada" a una API fake con latencia.
-const mockUsersDb: SelectOption[] = [
-  { value: 1, label: "Andrea García" },
-  { value: 2, label: "Andrés Pérez" },
-  { value: 3, label: "Beatriz López" },
-  { value: 4, label: "Carlos Ruiz" },
-  { value: 5, label: "Camila Torres" },
-  { value: 6, label: "Diego Fernández" },
-  { value: 7, label: "Elena Morales" },
-  { value: 8, label: "Fabián Núñez" },
-];
-
-const fakeFetchUsers = (query: string): Promise<SelectOption[]> =>
-  new Promise((resolve) => {
-    setTimeout(() => {
-      if (!query) return resolve([]);
-      const q = query.toLowerCase();
-      resolve(mockUsersDb.filter((u) => u.label.toLowerCase().includes(q)));
-    }, 400);
-  });
-
-// Debounce casero (para no agregar lodash como dep de la story).
-function debounce<T extends (...args: any[]) => void>(fn: T, ms: number) {
-  let t: ReturnType<typeof setTimeout>;
-  return (...args: Parameters<T>) => {
-    clearTimeout(t);
-    t = setTimeout(() => fn(...args), ms);
-  };
-}
-
-export const AsyncService: Story = {
-  render: () => {
-    const [value, setValue] = useState<number | null>(null);
-    const [input, setInput] = useState("");
-    const [options, setOptions] = useState<SelectOption[]>([]);
-    const [loading, setLoading] = useState(false);
-
-    const search = useMemo(
-      () =>
-        debounce(async (q: string) => {
-          if (!q) {
-            setOptions([]);
-            return;
-          }
-          setLoading(true);
-          try {
-            const res = await fakeFetchUsers(q);
-            setOptions(res);
-          } finally {
-            setLoading(false);
-          }
-        }, 300),
-      [],
-    );
-
-    useEffect(() => {
-      search(input);
-    }, [input, search]);
-
-    return (
-      <Box sx={{ width: 320 }}>
-        <Autocomplete<number>
-          label="Usuario"
-          placeholder="Buscar usuario..."
-          options={options}
-          value={value}
-          onChange={(v) => setValue(v as number | null)}
-          inputValue={input}
-          onInputChange={(_, v) => setInput(v)}
-          loading={loading}
-          // Desactiva filtro cliente: confiamos en el servicio.
-          filterOptions={(x) => x}
-        />
-        <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
-          {"Escribe para buscar. El servicio se consulta con debounce (300ms). filterOptions={(x) => x} desactiva el filtro cliente."}
-        </Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Búsqueda asíncrona contra un servicio. El consumer maneja el estado de `options`/`loading` y reacciona a `onInputChange` para llamar al servicio. Usar `filterOptions={(x) => x}` para desactivar el filtro cliente.",
-      },
-      source: { code: AsyncServiceAutocompleteDefinition.trim() },
-    },
-  },
-};
-
-export const AsyncServiceMultiple: Story = {
-  render: () => {
-    const [value, setValue] = useState<number[]>([]);
-    const [input, setInput] = useState("");
-    const [options, setOptions] = useState<SelectOption[]>([]);
-    const [loading, setLoading] = useState(false);
-
-    const search = useMemo(
-      () =>
-        debounce(async (q: string) => {
-          if (!q) {
-            setOptions([]);
-            return;
-          }
-          setLoading(true);
-          try {
-            const res = await fakeFetchUsers(q);
-            setOptions(res);
-          } finally {
-            setLoading(false);
-          }
-        }, 300),
-      [],
-    );
-
-    useEffect(() => {
-      search(input);
-    }, [input, search]);
-
-    return (
-      <Box sx={{ width: 420 }}>
-        <Autocomplete<number>
-          multiple
-          maxChipsToShow={4}
-          label="Usuarios"
-          placeholder="Buscar y seleccionar varios..."
-          options={options}
-          value={value}
-          onChange={(v) => setValue(v as number[])}
-          inputValue={input}
-          onInputChange={(_, v) => setInput(v)}
-          loading={loading}
-          filterOptions={(x) => x}
-        />
-        <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
-          Selecciona varios usuarios buscando con diferentes queries. Los chips
-          persisten aunque el search cambie las `options` (cache interno).
-        </Typography>
-        <Typography sx={{ mt: 1 }} variant="caption" display="block">
-          Seleccionados: {JSON.stringify(value)}
-        </Typography>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Búsqueda asíncrona **con selección múltiple**. El componente mantiene un cache interno de opciones ya vistas, así los chips de los items seleccionados NO desaparecen cuando el usuario busca otros términos. Flujo: buscar 'an' → seleccionar Andrea → buscar 'be' → seleccionar Beatriz → los dos chips siguen visibles.",
-      },
-      source: { code: AsyncServiceAutocompleteDefinition.trim() },
-    },
-  },
-};