@soyfri/shared-library 1.5.0 → 2.0.0-beta.0

package/src/components/Select/Select.definitions.ts

@@ -441,6 +441,120 @@ export const SelectWithManyOptionsExample = () => {
 };
 `;
 
+export const LabelPositionFloatingDefinition = `
+import React, { useState } from 'react';
+import { Select } from './Select';
+import { Box, Typography } from '@mui/material';
+
+const basicOptions = [
+    { value: '10', label: '10' },
+    { value: '25', label: '25' },
+    { value: '50', label: '50' },
+    { value: '100', label: '100' },
+];
+
+export const LabelPositionFloatingExample = () => {
+    const [value, setValue] = useState('');
+    return (
+        <Box sx={{ width: 300 }}>
+            <Select
+                label="Label flotante (MUI nativo)"
+                options={basicOptions}
+                value={value}
+                onChange={(val) => setValue(val as string)}
+                labelPosition="floating"
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
+        </Box>
+    );
+};
+`;
+
+export const CustomBorderRadiusDefinition = `
+import React, { useState } from 'react';
+import { Select } from './Select';
+import { Box } from '@mui/material';
+
+const basicOptions = [
+    { value: '10', label: '10' },
+    { value: '25', label: '25' },
+    { value: '50', label: '50' },
+    { value: '100', label: '100' },
+];
+
+export const CustomBorderRadiusExample = () => {
+    const [valueA, setValueA] = useState('25');
+    const [valueB, setValueB] = useState('25');
+    const [valueC, setValueC] = useState('25');
+    return (
+        <Box sx={{ width: 300, display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <Select
+                label="Sin border radius"
+                options={basicOptions}
+                value={valueA}
+                onChange={(val) => setValueA(val as string)}
+                borderRadius={0}
+            />
+            <Select
+                label="Border radius estándar"
+                options={basicOptions}
+                value={valueB}
+                onChange={(val) => setValueB(val as string)}
+                borderRadius={10}
+            />
+            <Select
+                label="Pill-shaped"
+                options={basicOptions}
+                value={valueC}
+                onChange={(val) => setValueC(val as string)}
+                borderRadius={999}
+            />
+        </Box>
+    );
+};
+`;
+
+export const CustomStylingDefinition = `
+import React, { useState } from 'react';
+import { Select } from './Select';
+import { Box, Typography } from '@mui/material';
+
+const userOptions = [
+    { 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' },
+];
+
+export const CustomStylingExample = () => {
+    const [value, setValue] = useState<string[]>(['admin']);
+    return (
+        <Box sx={{ width: 360 }}>
+            <Select
+                label="Select con estilos personalizados"
+                options={userOptions}
+                multiple
+                value={value}
+                onChange={(val) => setValue(val as string[])}
+                placeholder="Selecciona usuarios"
+                sx={{
+                    '& .MuiInputBase-root': {
+                        backgroundColor: 'action.hover',
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: 'primary.main',
+                        borderWidth: '2px',
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                        borderColor: 'primary.dark',
+                    },
+                }}
+            />
+            <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+        </Box>
+    );
+};
+`;
+
 export const AsyncSelectDefinition = `
 import React, { useState } from 'react';
 import { Select } from './Select';

package/src/components/Select/Select.helpers.ts

@@ -0,0 +1,71 @@
+import type { SelectOption } from './Select';
+
+/**
+ * Filtra opciones por `label` (case-insensitive). Si `search` es vacío,
+ * devuelve el array completo. Solo se usa en modo no-async.
+ */
+export const filterOptionsByLabel = (
+  options: SelectOption[],
+  search: string,
+): SelectOption[] => {
+  if (!search) return options;
+  const needle = search.toLowerCase();
+  return options.filter((opt) => opt.label.toLowerCase().includes(needle));
+};
+
+/**
+ * Agrupa opciones por la propiedad `group`. Las opciones sin group caen
+ * bajo la key especial `__default`. Devuelve un Record para iterar en orden
+ * de inserción con Object.entries.
+ */
+export const groupOptions = (
+  options: SelectOption[],
+): Record<string, SelectOption[]> => {
+  const groups: Record<string, SelectOption[]> = {};
+  options.forEach((opt) => {
+    const group = opt.group || '__default';
+    if (!groups[group]) groups[group] = [];
+    groups[group].push(opt);
+  });
+  return groups;
+};
+
+/**
+ * Determina si un conjunto de grupos está efectivamente vacío
+ * (no hay grupos o solo existe `__default` sin items).
+ */
+export const isGroupedOptionsEmpty = (
+  groups: Record<string, SelectOption[]>,
+): boolean => {
+  const keys = Object.keys(groups);
+  if (keys.length === 0) return true;
+  if (keys.length === 1 && groups['__default'] && groups['__default'].length === 0) {
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Normaliza el valor actual al shape que espera el MUI Select:
+ * - multiple: siempre array (aunque esté vacío).
+ * - single:   string vacío si null/undefined.
+ */
+export const normalizeSelectValue = <T>(
+  value: T | T[] | null | undefined,
+  multiple: boolean,
+): T | T[] | '' => {
+  if (multiple) return (value ?? []) as T[];
+  return (value ?? '') as T | '';
+};
+
+/**
+ * Evalúa si el valor actual está vacío (para decidir shrink del label
+ * y visibilidad del placeholder).
+ */
+export const isSelectValueEmpty = (
+  normalizedValue: unknown,
+  multiple: boolean,
+): boolean => {
+  if (multiple) return Array.isArray(normalizedValue) && normalizedValue.length === 0;
+  return normalizedValue === '' || normalizedValue === null || normalizedValue === undefined;
+};

package/src/components/Select/Select.stories.tsx

@@ -1,17 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import React, { ReactElement, useMemo, useState, Children, isValidElement } from 'react';
+import React, { useState } from 'react';
 import {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  
   Chip,
   Avatar,
   Box,
   Typography,
-  OutlinedInput,
-  TextField,
-  ListSubheader,
 } from '@mui/material';
 import ClearIcon from '@mui/icons-material/Clear'; // Icono de cerrar
 
@@ -31,6 +24,9 @@ import {
   EmptyOptionsDefinition,
   SelectWithManyOptionsDefinition,
   AsyncSelectDefinition,
+  LabelPositionFloatingDefinition,
+  CustomBorderRadiusDefinition,
+  CustomStylingDefinition,
 } from "./Select.definitions";
 import Select, { SelectOption, Option } from './Select';
 
@@ -100,6 +96,19 @@ const meta: Meta<typeof Select> = {
       maxWidth: { control: 'text', description: 'Ancho máximo del menú desplegable.' },
       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).', },
+      labelPosition: {
+        control: 'radio',
+        options: ['outside', 'floating'],
+        description: 'Posición del label. `outside` mantiene el label por encima del input con animación al enfocar. `floating` usa el comportamiento nativo de MUI (label flotando dentro del notched outline).',
+      },
+      borderRadius: {
+        control: 'number',
+        description: 'Radio del borde del select. Acepta un número (en px) o un string CSS.',
+      },
+      sx: {
+        control: false,
+        description: 'Prop `sx` que se pasa al MUI Select para overrides personalizados. Se mergea con los estilos por defecto.',
+      },
     }
 };
 
@@ -513,6 +522,115 @@ export const SelectWithManyOptions: Story = {
   }
 };
 
+// =============================================================================
+// Historias de personalización (labelPosition / borderRadius / sx)
+// =============================================================================
+export const LabelPositionFloating: Story = {
+    render: () => {
+        const [value, setValue] = useState('');
+        return (
+            <Box sx={{ width: 300 }}>
+                <Select
+                    label="Label flotante (MUI nativo)"
+                    options={basicOptions}
+                    value={value}
+                    onChange={(val) => setValue(val as string)}
+                    labelPosition="floating"
+                />
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Select con `labelPosition='floating'`, que usa el comportamiento nativo de MUI (label flotando dentro del notched outline al enfocar). Útil cuando se necesita el look estándar de Material UI."
+            },
+            source: { code: LabelPositionFloatingDefinition.trim() }
+        }
+    }
+};
+
+export const CustomBorderRadius: Story = {
+    render: () => {
+        const [valueA, setValueA] = useState('25');
+        const [valueB, setValueB] = useState('25');
+        const [valueC, setValueC] = useState('25');
+        return (
+            <Box sx={{ width: 300, display: 'flex', flexDirection: 'column', gap: 2 }}>
+                <Select
+                    label="Sin border radius"
+                    options={basicOptions}
+                    value={valueA}
+                    onChange={(val) => setValueA(val as string)}
+                    borderRadius={0}
+                />
+                <Select
+                    label="Border radius estándar"
+                    options={basicOptions}
+                    value={valueB}
+                    onChange={(val) => setValueB(val as string)}
+                    borderRadius={10}
+                />
+                <Select
+                    label="Pill-shaped"
+                    options={basicOptions}
+                    value={valueC}
+                    onChange={(val) => setValueC(val as string)}
+                    borderRadius={999}
+                />
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Control del radio del borde mediante la prop `borderRadius`. Acepta un número (en px) o un string CSS como `'0.5rem'`."
+            },
+            source: { code: CustomBorderRadiusDefinition.trim() }
+        }
+    }
+};
+
+export const CustomStyling: Story = {
+    render: () => {
+        const [value, setValue] = useState<string[]>(['admin']);
+        return (
+            <Box sx={{ width: 360 }}>
+                <Select
+                    label="Select con estilos personalizados"
+                    options={userOptions}
+                    multiple
+                    value={value}
+                    onChange={(val) => setValue(val as string[])}
+                    placeholder="Selecciona usuarios"
+                    sx={{
+                        '& .MuiInputBase-root': {
+                            backgroundColor: 'action.hover',
+                        },
+                        '& .MuiOutlinedInput-notchedOutline': {
+                            borderColor: 'primary.main',
+                            borderWidth: '2px',
+                        },
+                        '&:hover .MuiOutlinedInput-notchedOutline': {
+                            borderColor: 'primary.dark',
+                        },
+                    }}
+                />
+                <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Demuestra cómo el consumidor puede pasar un `sx` personalizado. El sx del consumidor se mergea sobre los defaults del componente, permitiendo overrides granulares (fondo, borde, hover, etc.) sin romper el comportamiento del label."
+            },
+            source: { code: CustomStylingDefinition.trim() }
+        }
+    }
+};
+
 export const AsyncSelect: Story = {
     render: () => {
         const [value, setValue] = useState('');

package/src/components/Select/Select.sx.ts

@@ -0,0 +1,14 @@
+import type { SelectProps as MuiSelectProps } from '@mui/material';
+
+import { buildFormFieldSx } from '../_shared/formField.sx';
+import type { LabelPosition } from './Select';
+
+/**
+ * Builder de sx para el Select. Usa el builder compartido
+ * `buildFormFieldSx`. El Select no necesita overrides específicos.
+ */
+export const buildSelectSx = (
+  borderRadius: number | string,
+  labelPosition: LabelPosition,
+): MuiSelectProps['sx'] =>
+  buildFormFieldSx({ borderRadius, labelPosition }) as MuiSelectProps['sx'];