@soyfri/shared-library 2.0.0-beta.16 → 2.0.0-beta.18

package/src/components/Autocomplete/Autocomplete.definitions.ts

@@ -0,0 +1,477 @@
+// =============================================================================
+// SIMPLE
+// =============================================================================
+export const SimpleAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box, Typography } from '@mui/material';
+
+const options = [
+  { value: '10', label: '10' },
+  { value: '25', label: '25' },
+];
+
+export const SimpleExample = () => {
+  const [value, setValue] = useState(options[1]);
+
+  return (
+    <Box sx={{ width: 250 }}>
+      <Autocomplete
+        label="Registros por página"
+        options={options}
+        value={value}
+        onChange={(val) => {
+          setValue(val as string);
+        }}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Valor: {value}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+// =============================================================================
+// PLACEHOLDER
+// =============================================================================
+export const WithPlaceholderAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box, Typography } from '@mui/material';
+
+export const WithPlaceholderExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Box sx={{ width: 300 }}>
+      <Autocomplete
+        label="Seleccione una opción"
+        options={[]}
+        value={value}
+        onChange={(val) => {
+         setValue(val as string);
+        }}
+        placeholder="Ninguna opción seleccionada"
+      />
+      <Typography sx={{ mt: 2 }}>
+        {value || 'Ninguno'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+// =============================================================================
+// MULTIPLE
+// =============================================================================
+export const MultipleAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box } from '@mui/material';
+
+const options = [
+  { value: 'pending', label: 'Pendiente' },
+  { value: 'approved', label: 'Aprobado' },
+];
+
+export const MultipleExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Box sx={{ width: 400 }}>
+      <Autocomplete
+        multiple
+        options={options}
+        value={value}
+        onChange={(val) => {
+          setValue(val as string[]);
+        }}
+      />
+    </Box>
+  );
+};
+`;
+
+// =============================================================================
+// MULTIPLE LIMIT
+// =============================================================================
+export const MultipleWithLimitAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+
+export const MultipleWithLimitExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Autocomplete
+      multiple
+      maxChipsToShow={2}
+      options={[]}
+      value={value}
+      onChange={(val) => {
+        setValue(val as string[]);
+      }}
+    />
+  );
+};
+`;
+
+// =============================================================================
+// CUSTOM OPTION
+// =============================================================================
+export const CustomRenderOptionAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Avatar, Box } from '@mui/material';
+
+const users = [
+  { value: 'admin', label: 'Administrador', img: '...' },
+];
+
+export const CustomRenderExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Autocomplete
+      multiple
+      options={users}
+      value={value}
+      onChange={(val) => {
+        setValue(val as string[]);
+      }}
+      renderOptionItem={(item) => (
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Avatar src={item.img} />
+          {item.label}
+        </Box>
+      )}
+    />
+  );
+};
+`;
+
+// =============================================================================
+// CUSTOM CHIP
+// =============================================================================
+export const CustomChipRenderAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Typography } from '@mui/material';
+
+export const CustomChipExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Autocomplete
+      multiple
+      options={[]}
+      value={value}
+      onChange={(val) => {
+        setValue(val as string[]);
+      }}
+      renderChipLabel={(item) => (
+        <Typography variant="caption">
+          {item.label.charAt(0)}
+        </Typography>
+      )}
+    />
+  );
+};
+`;
+
+// =============================================================================
+// LOADING
+// =============================================================================
+export const LoadingAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+
+export const LoadingExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Autocomplete
+      loading
+      options={[]}
+      value={value}
+      onChange={(val) => {
+				setValue(val as string);
+			}}
+    />
+  );
+};
+`;
+
+// =============================================================================
+// EMPTY
+// =============================================================================
+export const EmptyOptionsAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+
+export const EmptyExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Autocomplete
+      options={[]}
+      value={value}
+      onChange={(val) => {
+				setValue(val as string);
+			}}
+      placeholder="No hay opciones"
+    />
+  );
+};
+`;
+
+// =============================================================================
+// MANY
+// =============================================================================
+export const ManyOptionsAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+
+const options = Array.from({ length: 50 }, (_, i) => ({
+  value: i,
+  label: 'Opción ' + i,
+}));
+
+export const ManyOptionsExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Autocomplete
+      options={options}
+      value={value}
+      onChange={(val) => {
+				setValue(val as string);
+			}}
+    />
+  );
+};
+`;
+
+// =============================================================================
+// WITH ERROR / HELPER TEXT
+// =============================================================================
+export const WithErrorAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box } from '@mui/material';
+
+const options = [
+  { value: '10', label: '10' },
+  { value: '25', label: '25' },
+];
+
+export const WithErrorExample = () => {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <Box sx={{ width: 300 }}>
+      <Autocomplete
+        label="Cantidad"
+        options={options}
+        value={value}
+        onChange={(val) => setValue(val as string | null)}
+        error={\!value}
+        helperText={\!value ? 'Debes seleccionar una cantidad' : ' '}
+      />
+    </Box>
+  );
+};
+`;
+
+// =============================================================================
+// LABEL POSITION
+// =============================================================================
+export const LabelPositionAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box, Stack } from '@mui/material';
+
+const options = [
+  { value: 'a', label: 'Opción A' },
+  { value: 'b', label: 'Opción B' },
+];
+
+export const LabelPositionExample = () => {
+  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={options}
+        value={a}
+        onChange={(val) => setA(val as string | null)}
+      />
+      <Autocomplete
+        label="Floating"
+        labelPosition="floating"
+        options={options}
+        value={b}
+        onChange={(val) => setB(val as string | null)}
+      />
+    </Stack>
+  );
+};
+`;
+
+// =============================================================================
+// CUSTOM BORDER RADIUS
+// =============================================================================
+export const CustomBorderRadiusAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box, Stack } from '@mui/material';
+
+const options = [
+  { value: '10', label: '10' },
+  { value: '25', label: '25' },
+];
+
+export const CustomBorderRadiusExample = () => {
+  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={options} value={a} onChange={(v) => setA(v as string | null)} />
+      <Autocomplete label="10 (default)" borderRadius={10} options={options} value={b} onChange={(v) => setB(v as string | null)} />
+      <Autocomplete label="24 (pill)" borderRadius={24} options={options} value={c} onChange={(v) => setC(v as string | null)} />
+    </Stack>
+  );
+};
+`;
+
+// =============================================================================
+// EMPTY WITH PLACEHOLDER
+// =============================================================================
+export const EmptyWithPlaceholderAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box } from '@mui/material';
+
+const options = [
+  { value: 'mx', label: 'México' },
+  { value: 'co', label: 'Colombia' },
+  { value: 'ar', label: 'Argentina' },
+];
+
+export const EmptyWithPlaceholderExample = () => {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <Box sx={{ width: 300 }}>
+      <Autocomplete
+        label="País"
+        placeholder="Buscar país..."
+        options={options}
+        value={value}
+        onChange={(val) => setValue(val as string | null)}
+      />
+    </Box>
+  );
+};
+`;
+
+// =============================================================================
+// REACT HOOK FORM
+// =============================================================================
+export const RHFAutocompleteDefinition = `
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import Autocomplete from './Autocomplete';
+import { Box, Button, Stack } from '@mui/material';
+
+const options = [
+  { value: 'mx', label: 'México' },
+  { value: 'co', label: 'Colombia' },
+  { value: 'ar', label: 'Argentina' },
+];
+
+type FormValues = { country: string | null };
+
+export const RHFExample = () => {
+  const { control, handleSubmit, watch } = useForm<FormValues>({
+    defaultValues: { country: null },
+  });
+
+  return (
+    <Box component="form" onSubmit={handleSubmit((data) => console.log(data))}>
+      <Stack spacing={2} sx={{ width: 320 }}>
+        <Autocomplete
+          name="country"
+          control={control}
+          validation={{ required: 'Campo requerido' }}
+          label="País"
+          placeholder="Seleccione..."
+          options={options}
+        />
+        <Button type="submit" variant="contained">Guardar</Button>
+        <Box>Valor actual: {JSON.stringify(watch('country'))}</Box>
+      </Stack>
+    </Box>
+  );
+};
+`;
+
+// =============================================================================
+// ASYNC — búsqueda remota contra un servicio
+// =============================================================================
+export const AsyncServiceAutocompleteDefinition = [
+'import React, { useState, useEffect, useMemo } from ', "'react'", ';',
+'import Autocomplete from ', "'./Autocomplete'", ';',
+'import { Box } from ', "'@mui/material'", ';',
+'import debounce from ', "'lodash/debounce'", ';',
+'',
+'// Supón que tienes un servicio:',
+'// await fetch(`/api/users?q=${query}`).then(r => r.json())',
+'async function fetchUsers(query: string) {',
+'  const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`);',
+'  const data = await res.json();',
+'  return data.map((u: any) => ({ value: u.id, label: u.name }));',
+'}',
+'',
+'export const AsyncServiceExample = () => {',
+'  const [value, setValue] = useState<string | null>(null);',
+'  const [input, setInput] = useState("");',
+'  const [options, setOptions] = useState<any[]>([]);',
+'  const [loading, setLoading] = useState(false);',
+'',
+'  const search = useMemo(',
+'    () =>',
+'      debounce(async (q: string) => {',
+'        if (\!q) { setOptions([]); return; }',
+'        setLoading(true);',
+'        try {',
+'          setOptions(await fetchUsers(q));',
+'        } finally {',
+'          setLoading(false);',
+'        }',
+'      }, 300),',
+'    [],',
+'  );',
+'',
+'  useEffect(() => { search(input); }, [input, search]);',
+'',
+'  return (',
+'    <Box sx={{ width: 320 }}>',
+'      <Autocomplete',
+'        label="Usuario"',
+'        placeholder="Buscar usuario..."',
+'        options={options}',
+'        value={value}',
+'        onChange={(v) => setValue(v as string | null)}',
+'        inputValue={input}',
+'        onInputChange={(_, v) => setInput(v)}',
+'        loading={loading}',
+'        // Desactiva el filtro cliente: el servicio ya filtra.',
+'        filterOptions={(x) => x}',
+'      />',
+'    </Box>',
+'  );',
+'};',
+].join('\n');

package/src/components/Autocomplete/Autocomplete.helpers.ts

@@ -0,0 +1,80 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { SelectOption } from './Autocomplete';
+
+/** Resuelve un value único a su SelectOption dentro del pool. */
+export const resolveSingleValue = (
+  options: SelectOption[],
+  value: SelectOption['value'] | null | undefined,
+): SelectOption | null => options.find((o) => o.value === value) ?? null;
+
+/** Resuelve un array de values a sus SelectOption dentro del pool. */
+export const resolveMultipleValue = (
+  options: SelectOption[],
+  value: SelectOption['value'][] | null | undefined,
+): SelectOption[] => {
+  if (!Array.isArray(value)) return [];
+  return options.filter((o) => value.includes(o.value));
+};
+
+/** Merge de sx base + extra del consumer, respetando el contrato de MUI. */
+export const mergeSx = (
+  base: SxProps<Theme>,
+  extra?: SxProps<Theme>,
+): SxProps<Theme> => {
+  if (!extra) return base;
+  return [base, ...(Array.isArray(extra) ? extra : [extra])] as SxProps<Theme>;
+};
+
+/**
+ * Compara dos SelectOption por todas sus props (shallow). Se usa para detectar
+ * cambios de metadata (p.ej. `label`, `img`) cuando `value` no cambió, para
+ * que la estabilización no tape datos frescos del server.
+ */
+const areOptionsShallowEqual = (a: SelectOption, b: SelectOption): boolean => {
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  return keysA.every((k) => a[k] === b[k]);
+};
+
+/**
+ * Compara dos valores resueltos (single o multiple) estructuralmente para
+ * decidir si se puede reusar la referencia previa. Se usa para estabilizar la
+ * referencia que se pasa a MUI Autocomplete (MUI compara value por referencia
+ * con `!==`, y una nueva referencia — aunque el contenido sea igual — dispara
+ * `resetInputValue` y borra el texto mientras el usuario tipea).
+ *
+ * Comparamos todas las props del SelectOption, no solo `value`, para que un
+ * refresh de metadata (label/img/etc.) invalide la referencia estabilizada
+ * y la UI muestre los datos actualizados.
+ */
+export const areResolvedValuesEqual = (
+  prev: SelectOption | SelectOption[] | null,
+  next: SelectOption | SelectOption[] | null,
+  multiple: boolean,
+): boolean => {
+  if (multiple) {
+    if (!Array.isArray(prev) || !Array.isArray(next)) return false;
+    if (prev.length !== next.length) return false;
+    return prev.every((o, i) => {
+      const n = next[i];
+      return !!n && areOptionsShallowEqual(o, n);
+    });
+  }
+  const p = prev as SelectOption | null;
+  const n = next as SelectOption | null;
+  if (p === n) return true;
+  if (!p || !n) return false;
+  return areOptionsShallowEqual(p, n);
+};
+
+/** Determina si un valor resuelto está vacío (para placeholder/shrink). */
+export const isResolvedValueEmpty = (
+  resolvedValue: unknown,
+  multiple: boolean,
+): boolean => {
+  if (multiple) {
+    return !Array.isArray(resolvedValue) || resolvedValue.length === 0;
+  }
+  return !resolvedValue;
+};