@soyfri/shared-library 2.0.0-beta.4 → 2.0.0-beta.5

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

@@ -1,477 +0,0 @@
-// =============================================================================
-// 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

@@ -1,60 +0,0 @@
-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 valores resueltos (single o multiple) por value para decidir
- * si son estructuralmente iguales. 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).
- */
-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) => o.value === next[i]?.value);
-  }
-  return (
-    (prev as SelectOption | null)?.value ===
-    (next as SelectOption | null)?.value
-  );
-};
-
-/** 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;
-};