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

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,528 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import {
+  Box,
+  Typography,
+} from '@mui/material';
+
+// Importa el componente Input (asumiendo que está en el mismo directorio o ruta definida)
+import { Input } from './Input';
+
+// Importa las definiciones de las historias
+import {
+  BasicTextInputDefinition,
+  NumberInputDefinition,
+  EmailInputDefinition,
+  PasswordInputDefinition,
+  InputWithPlaceholderDefinition,
+  InputWithErrorDefinition,
+  DisabledInputDefinition,
+  ReadOnlyInputDefinition,
+  InputVariantsDefinition,
+  InputSizesDefinition,
+  FullWidthInputDefinition,
+  LabelPositionFloatingDefinition,
+  CustomBorderRadiusDefinition,
+  CustomStylingDefinition,
+  MultilineInputDefinition,
+} from './Input.definitions';
+
+// =============================================================================
+// Definición de las meta-propiedades para Storybook
+// =============================================================================
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Un componente `Input` personalizado basado en `TextField` de Material UI, que soporta varios tipos de entrada HTML y propiedades de `TextField`.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: 'text', description: 'Etiqueta flotante para el campo de entrada.' },
+    value: { control: 'text', description: 'El valor actual del campo de entrada.', type: { name: 'string', required: true } },
+    onChange: { action: 'valueChanged', description: 'Callback que se dispara cuando el valor del campo de entrada cambia.' },
+    type: {
+      control: 'select',
+      options: ['text', 'number', 'email', 'password', 'tel', 'url', 'search', 'date', 'datetime-local', 'month', 'week', 'time', 'color'],
+      description: 'El tipo HTML del campo de entrada (controla el teclado en móviles, etc.).',
+      defaultValue: 'text',
+    },
+    placeholder: { control: 'text', description: 'Texto de marcador de posición cuando el campo está vacío.' },
+    disabled: { control: 'boolean', description: 'Si es verdadero, el campo de entrada estará deshabilitado.' },
+    // readOnly: { control: 'boolean', description: 'Si es verdadero, el campo de entrada estará en modo de solo lectura.' },
+    error: { control: 'boolean', description: 'Si es verdadero, el campo de entrada estará en estado de error.' },
+    helperText: { control: 'text', description: 'Texto auxiliar que se muestra debajo del campo de entrada.' },
+    variant: {
+      control: 'radio',
+      options: ['outlined', 'filled', 'standard'],
+      description: 'La variante de diseño del campo de entrada.',
+      defaultValue: 'outlined',
+    },
+    size: {
+      control: 'radio',
+      options: ['small', 'medium'],
+      description: 'El tamaño del campo de entrada.',
+      defaultValue: 'small',
+    },
+    labelPosition: {
+      control: 'radio',
+      options: ['outside', 'floating'],
+      description: '"outside" (default): label arriba del input. "floating": label clásico de MUI dentro del notched outline.',
+      defaultValue: 'outside',
+    },
+    borderRadius: {
+      control: { type: 'number' },
+      description: 'Border radius del input en px (o string CSS). Default: 10.',
+      defaultValue: 10,
+    },
+    fullWidth: { control: 'boolean', description: 'Si es verdadero, el campo de entrada ocupará todo el ancho disponible.', defaultValue: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+// =============================================================================
+// Historias
+// =============================================================================
+
+export const BasicTextInput: Story = {
+  render: () => {
+    const [value, setValue] = useState('Texto de ejemplo');
+    return (
+      <Box sx={{ width: 300 }}>
+        <Input
+          label="Nombre"
+          value={value}
+          onChange={(value) => setValue(value.toString())}
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un campo de entrada de texto básico con una etiqueta."
+      },
+      source: { code: BasicTextInputDefinition.trim() }
+    }
+  }
+};
+
+export const NumberInput: Story = {
+  render: () => {
+    const [value, setValue] = useState(123);
+    return (
+      <Box sx={{ width: 300 }}>
+        <Input
+          label="Cantidad"
+          type="number"
+          value={value.toString()}
+          onChange={(value) => setValue(Number(value))}
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un campo de entrada numérico. Permite solo números y controla el teclado numérico en dispositivos móviles."
+      },
+      source: { code: NumberInputDefinition.trim() }
+    }
+  }
+};
+
+export const EmailInput: Story = {
+  render: () => {
+    const [value, setValue] = useState('ejemplo@dominio.com');
+    return (
+      <Box sx={{ width: 300 }}>
+        <Input
+          label="Correo Electrónico"
+          type="email"
+          value={value.toString()}
+          onChange={(value) => setValue(value.toString())}
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un campo de entrada para correo electrónico. Proporciona validación básica del navegador y sugiere correos electrónicos."
+      },
+      source: { code: EmailInputDefinition.trim() }
+    }
+  }
+};
+
+export const PasswordInput: Story = {
+  render: () => {
+    const [value, setValue] = useState('micontraseña');
+    return (
+      <Box sx={{ width: 300 }}>
+        <Input
+          label="Contraseña"
+          type="password"
+          value={value.toString()}
+          onChange={(value) => setValue(value.toString())}
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un campo de entrada de contraseña. Oculta los caracteres a medida que se escriben."
+      },
+      source: { code: PasswordInputDefinition.trim() }
+    }
+  }
+};
+
+export const InputWithPlaceholder: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+    return (
+      <Box sx={{ width: 300 }}>
+        <Input
+          label="Búsqueda"
+          placeholder="Escribe tu término de búsqueda..."
+          value={value.toString()}
+          onChange={(value) => setValue(value.toString())}
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value || 'Vacío'}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un campo de entrada con un texto de marcador de posición visible cuando el campo está vacío."
+      },
+      source: { code: InputWithPlaceholderDefinition.trim() }
+    }
+  }
+};
+
+export const InputWithError: Story = {
+  render: () => {
+    const [value, setValue] = useState('invalido');
+    // Lógica simple de error para la demostración
+    const hasError = value.length < 5 && value.length > 0;
+    return (
+      <Box sx={{ width: 300 }}>
+        <Input
+          label="Nombre de usuario"
+          value={value.toString()}
+          onChange={(value) => setValue(value.toString())}
+          error={hasError}
+          helperText={hasError ? 'Mínimo 5 caracteres' : ''}
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un campo de entrada que muestra un estado de error y un texto de ayuda cuando la validación falla."
+      },
+      source: { code: InputWithErrorDefinition.trim() }
+    }
+  }
+};
+
+export const DisabledInput: Story = {
+  render: () => {
+    const [value, setValue] = useState('Campo deshabilitado');
+    return (
+      <Box sx={{ width: 300 }}>
+        <Input
+          label="Estado"
+          value={value.toString()}
+          onChange={(value) => setValue(value.toString())}
+          disabled
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      story: "Un campo de entrada deshabilitado, lo que impide la interacción del usuario."
+    },
+    source: { code: DisabledInputDefinition.trim() }
+  }
+};
+
+export const ReadOnlyInput: Story = {
+  render: () => {
+    const [value, setValue] = useState('Valor de solo lectura');
+    return (
+      <Box sx={{ width: 300 }}>
+        <Input
+          label="Información"
+          value={value.toString()}
+          onChange={(value) => setValue(value.toString())}
+          readOnly
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      story: "Un campo de entrada de solo lectura, el usuario puede ver el valor pero no modificarlo."
+    },
+    source: { code: ReadOnlyInputDefinition.trim() }
+  }
+};
+
+export const InputVariants: Story = {
+  render: () => {
+    const [valueOutlined, setValueOutlined] = useState('Outlined');
+    const [valueFilled, setValueFilled] = useState('Filled');
+    const [valueStandard, setValueStandard] = useState('Standard');
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
+        <Input
+          label="Esquema Outlined"
+          value={valueOutlined.toString()}
+          onChange={(value) => setValueOutlined(value.toString())}
+          variant="outlined"
+        />
+        <Input
+          label="Esquema Filled"
+          value={valueFilled.toString()}
+          onChange={(value) => setValueFilled(value.toString())}
+          variant="filled"
+        />
+        <Input
+          label="Esquema Standard"
+          value={valueStandard.toString()}
+          onChange={(value) => setValueStandard(value.toString())}
+          variant="standard"
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      story: "Demuestra las diferentes variantes de diseño: `outlined`, `filled` y `standard`."
+    },
+    source: { code: InputVariantsDefinition.trim() }
+  }
+};
+
+export const InputSizes: Story = {
+  render: () => {
+    const [valueMedium, setValueMedium] = useState('Tamaño Mediano');
+    const [valueSmall, setValueSmall] = useState('Tamaño Pequeño');
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
+        <Input
+          label="Input Mediano"
+          value={valueMedium.toString()}
+          onChange={(value) => setValueMedium(value.toString())}
+          size="medium"
+        />
+        <Input
+          label="Input Pequeño"
+          value={valueSmall.toString()}
+          onChange={(value) => setValueSmall(value.toString())}
+          size="small"
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      story: "Demuestra los diferentes tamaños del campo de entrada: `medium` (por defecto) y `small`."
+    },
+    source: { code: InputSizesDefinition.trim() }
+  }
+};
+
+export const FullWidthInput: Story = {
+  render: () => {
+    const [value, setValue] = useState('Ocupa todo el ancho');
+    return (
+      <Box sx={{ width: '100%' }}>
+        <Input
+          label="Input de Ancho Completo"
+          value={value.toString()}
+          onChange={(value) => setValue(value.toString())}
+          fullWidth
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      story: "Un campo de entrada que ocupa todo el ancho disponible de su contenedor."
+    },
+    source: { code: FullWidthInputDefinition.trim() }
+  }
+};
+
+export const StandardVariant: Story = {
+  render: () => {
+    const [value, setValue] = useState('Ocupa todo el ancho');
+    return (
+      <Box sx={{ width: '100%' }}>
+        <Input
+
+          value={value.toString()}
+          variant='standard'
+          onChange={(value) => setValue(value.toString())}
+          fullWidth
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      story: "Un campo de entrada que ocupa todo el ancho disponible de su contenedor."
+    },
+
+  }
+};
+
+export const LabelPositionFloating: Story = {
+  render: () => {
+    const [valueOutside, setValueOutside] = useState('Outside (default)');
+    const [valueFloating, setValueFloating] = useState('Floating');
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
+        <Input
+          label="Label outside"
+          value={valueOutside.toString()}
+          onChange={(value) => setValueOutside(value.toString())}
+          labelPosition="outside"
+        />
+        <Input
+          label="Label floating (MUI clásico)"
+          value={valueFloating.toString()}
+          onChange={(value) => setValueFloating(value.toString())}
+          labelPosition="floating"
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Compara `labelPosition='outside'` (default, label arriba del input) vs `labelPosition='floating'` (label flotante clásico de MUI dentro del notched outline)."
+      },
+      source: { code: LabelPositionFloatingDefinition.trim() }
+    }
+  }
+};
+
+export const CustomBorderRadius: Story = {
+  render: () => {
+    const [v0, setV0] = useState('Sin radius');
+    const [v4, setV4] = useState('Radius 4px');
+    const [v10, setV10] = useState('Radius 10px (default)');
+    const [v24, setV24] = useState('Radius 24px (pill)');
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
+        <Input label="borderRadius={0}" value={v0} onChange={(v) => setV0(v.toString())} borderRadius={0} />
+        <Input label="borderRadius={4}" value={v4} onChange={(v) => setV4(v.toString())} borderRadius={4} />
+        <Input label="borderRadius={10} (default)" value={v10} onChange={(v) => setV10(v.toString())} />
+        <Input label="borderRadius={24}" value={v24} onChange={(v) => setV24(v.toString())} borderRadius={24} />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "El prop `borderRadius` acepta un número (px) o un string CSS. Override directo del default `10`."
+      },
+      source: { code: CustomBorderRadiusDefinition.trim() }
+    }
+  }
+};
+
+export const MultilineInput: Story = {
+  render: () => {
+    const [value, setValue] = useState('Escribe un comentario en varias líneas...');
+    return (
+      <Box sx={{ width: 400 }}>
+        <Input
+          label="Comentario"
+          value={value}
+          onChange={(v) => setValue(v.toString())}
+          multiline
+          minRows={3}
+          maxRows={6}
+          fullWidth
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un campo de entrada multilínea (`multiline`) usando `minRows` y `maxRows` para auto-expandirse dentro de un rango. Útil para comentarios, descripciones o textos largos."
+      },
+      source: { code: MultilineInputDefinition.trim() }
+    }
+  }
+};
+
+export const CustomStyling: Story = {
+  render: () => {
+    const [bg, setBg] = useState('Fondo gris claro');
+    const [color, setColor] = useState('Borde rojo');
+    const [combined, setCombined] = useState('Custom completo');
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
+        <Input
+          label="Override de background"
+          value={bg}
+          onChange={(v) => setBg(v.toString())}
+          sx={{ '& .MuiOutlinedInput-root': { bgcolor: '#f5f5f5' } }}
+        />
+        <Input
+          label="Override de borderColor"
+          value={color}
+          onChange={(v) => setColor(v.toString())}
+          sx={{ '& .MuiOutlinedInput-notchedOutline': { borderColor: 'red' } }}
+        />
+        <Input
+          label="Combinado: bg + borderColor + label color"
+          value={combined}
+          onChange={(v) => setCombined(v.toString())}
+          sx={{
+            '& .MuiInputLabel-root': { color: 'primary.main' },
+            '& .MuiOutlinedInput-root': { bgcolor: '#fff7e6' },
+            '& .MuiOutlinedInput-notchedOutline': { borderColor: 'warning.main', borderWidth: 2 },
+          }}
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Demuestra que el prop `sx` se mergea al final y siempre gana sobre los defaults internos. Antes esto no funcionaba por culpa del `styled()` interno."
+      },
+      source: { code: CustomStylingDefinition.trim() }
+    }
+  }
+};

package/src/components/Input/Input.sx.ts

@@ -0,0 +1,44 @@
+import type { TextFieldProps } from '@mui/material';
+
+import { buildFormFieldSx } from '../_shared/formField.sx';
+import { FIELD_INPUT_PADDING_Y } from '../../theme/tokens';
+import type { LabelPosition } from './Input';
+
+/**
+ * Builder de sx para el Input. Usa el builder compartido
+ * `buildFormFieldSx` y añade overrides específicos de TextField
+ * (padding del input base, filled, standard).
+ */
+export const buildInputSx = (
+  borderRadius: number | string,
+  labelPosition: LabelPosition,
+  layoutOnly = false,
+): TextFieldProps['sx'] => {
+  const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
+
+  return buildFormFieldSx({
+    borderRadius,
+    labelPosition,
+    layoutOnly,
+    extraOutsideSx: {
+      '& .MuiInputBase-input': {
+        paddingTop: FIELD_INPUT_PADDING_Y,
+        paddingBottom: FIELD_INPUT_PADDING_Y,
+      },
+
+      // Filled: quitar el padding-top reservado para el label flotante dentro.
+      '& .MuiFilledInput-root': {
+        paddingTop: 0,
+        borderRadius: `${radius} ${radius} 0 0`,
+      },
+      '& .MuiFilledInput-input': {
+        paddingTop: FIELD_INPUT_PADDING_Y,
+      },
+
+      // Standard: quitar el margin-top reservado para el label flotante.
+      '& .MuiInput-root': {
+        marginTop: 0,
+      },
+    },
+  });
+};