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

package/src/components/Input/Input.definitions.ts

@@ -0,0 +1,348 @@
+// Input.definitions.ts
+
+export const BasicTextInputDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box, Typography } from '@mui/material';
+
+export const BasicTextInputExample = () => {
+  const [value, setValue] = useState('Texto de ejemplo');
+  return (
+    <Box sx={{ width: 300 }}>
+      <Input
+        label="Nombre"
+        value={value}
+        onChange={setValue}
+      />
+      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+    </Box>
+  );
+};
+`;
+
+export const NumberInputDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box, Typography } from '@mui/material';
+
+export const NumberInputExample = () => {
+  const [value, setValue] = useState(123);
+  return (
+    <Box sx={{ width: 300 }}>
+      <Input
+        label="Cantidad"
+        type="number"
+        value={value}
+        onChange={setValue}
+      />
+      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+    </Box>
+  );
+};
+`;
+
+export const EmailInputDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box, Typography } from '@mui/material';
+
+export const EmailInputExample = () => {
+  const [value, setValue] = useState('ejemplo@dominio.com');
+  return (
+    <Box sx={{ width: 300 }}>
+      <Input
+        label="Correo Electrónico"
+        type="email"
+        value={value}
+        onChange={setValue}
+      />
+      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+    </Box>
+  );
+};
+`;
+
+export const PasswordInputDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box, Typography } from '@mui/material';
+
+export const PasswordInputExample = () => {
+  const [value, setValue] = useState('micontraseña');
+  return (
+    <Box sx={{ width: 300 }}>
+      <Input
+        label="Contraseña"
+        type="password"
+        value={value}
+        onChange={setValue}
+      />
+      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+    </Box>
+  );
+};
+`;
+
+export const InputWithPlaceholderDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box, Typography } from '@mui/material';
+
+export const InputWithPlaceholderExample = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Box sx={{ width: 300 }}>
+      <Input
+        label="Búsqueda"
+        placeholder="Escribe tu término de búsqueda..."
+        value={value}
+        onChange={setValue}
+      />
+      <Typography sx={{ mt: 2 }}>Valor actual: {value || 'Vacío'}</Typography>
+    </Box>
+  );
+};
+`;
+
+export const InputWithErrorDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box, Typography } from '@mui/material';
+
+export const InputWithErrorExample = () => {
+  const [value, setValue] = useState('invalido');
+  const hasError = value.length < 5 && value.length > 0;
+  return (
+    <Box sx={{ width: 300 }}>
+      <Input
+        label="Nombre de usuario"
+        value={value}
+        onChange={setValue}
+        error={hasError}
+        helperText={hasError ? 'Mínimo 5 caracteres' : ''}
+      />
+      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+    </Box>
+  );
+};
+`;
+
+export const DisabledInputDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box, Typography } from '@mui/material';
+
+export const DisabledInputExample = () => {
+  const [value, setValue] = useState('Campo deshabilitado');
+  return (
+    <Box sx={{ width: 300 }}>
+      <Input
+        label="Estado"
+        value={value}
+        onChange={setValue}
+        disabled
+      />
+      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+    </Box>
+  );
+};
+`;
+
+export const ReadOnlyInputDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box, Typography } from '@mui/material';
+
+export const ReadOnlyInputExample = () => {
+  const [value, setValue] = useState('Valor de solo lectura');
+  return (
+    <Box sx={{ width: 300 }}>
+      <Input
+        label="Información"
+        value={value}
+        onChange={setValue}
+        readOnly
+      />
+      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+    </Box>
+  );
+};
+`;
+
+export const InputVariantsDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box, Typography } from '@mui/material';
+
+export const InputVariantsExample = () => {
+  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}
+        onChange={setValueOutlined}
+        variant="outlined"
+      />
+      <Input
+        label="Esquema Filled"
+        value={valueFilled}
+        onChange={setValueFilled}
+        variant="filled"
+      />
+      <Input
+        label="Esquema Standard"
+        value={valueStandard}
+        onChange={setValueStandard}
+        variant="standard"
+      />
+    </Box>
+  );
+};
+`;
+
+export const InputSizesDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box, Typography } from '@mui/material';
+
+export const InputSizesExample = () => {
+  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}
+        onChange={setValueMedium}
+        size="medium"
+      />
+      <Input
+        label="Input Pequeño"
+        value={valueSmall}
+        onChange={setValueSmall}
+        size="small"
+      />
+    </Box>
+  );
+};
+`;
+
+export const FullWidthInputDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box, Typography } from '@mui/material';
+
+export const FullWidthInputExample = () => {
+  const [value, setValue] = useState('Ocupa todo el ancho');
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Input
+        label="Input de Ancho Completo"
+        value={value}
+        onChange={setValue}
+        fullWidth
+      />
+      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+    </Box>
+  );
+};
+`;
+
+export const LabelPositionFloatingDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box } from '@mui/material';
+
+export const LabelPositionExample = () => {
+  const [outside, setOutside] = useState('Outside (default)');
+  const [floating, setFloating] = useState('Floating');
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
+      <Input
+        label="Label outside"
+        value={outside}
+        onChange={setOutside}
+        labelPosition="outside"
+      />
+      <Input
+        label="Label floating (MUI clásico)"
+        value={floating}
+        onChange={setFloating}
+        labelPosition="floating"
+      />
+    </Box>
+  );
+};
+`;
+
+export const CustomBorderRadiusDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box } from '@mui/material';
+
+export const CustomBorderRadiusExample = () => {
+  const [v, setV] = useState('Texto');
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
+      <Input label="Sin radius" value={v} onChange={setV} borderRadius={0} />
+      <Input label="Radius 4px" value={v} onChange={setV} borderRadius={4} />
+      <Input label="Default (10px)" value={v} onChange={setV} />
+      <Input label="Pill (24px)" value={v} onChange={setV} borderRadius={24} />
+    </Box>
+  );
+};
+`;
+
+export const CustomStylingDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box } from '@mui/material';
+
+export const CustomStylingExample = () => {
+  const [v, setV] = useState('Custom completo');
+  return (
+    <Box sx={{ width: 300 }}>
+      <Input
+        label="Combinado: bg + borderColor + label color"
+        value={v}
+        onChange={setV}
+        sx={{
+          '& .MuiInputLabel-root': { color: 'primary.main' },
+          '& .MuiOutlinedInput-root': { bgcolor: '#fff7e6' },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'warning.main',
+            borderWidth: 2,
+          },
+        }}
+      />
+    </Box>
+  );
+};
+`;
+
+export const MultilineInputDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input';
+import { Box, Typography } from '@mui/material';
+
+export const MultilineInputExample = () => {
+  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>
+  );
+};
+`;

package/src/components/Input/Input.helpers.ts

@@ -0,0 +1,50 @@
+import type { InputHTMLAttributes } from 'react';
+import type { TextFieldProps } from '@mui/material';
+import type { InputType } from './Input';
+
+/**
+ * Convierte el valor raw del evento al tipo apropiado.
+ * Para type="number" intenta parsear a número; si falla, devuelve el raw
+ * (permite estados intermedios como "" o "-" mientras el usuario tipea).
+ */
+export const parseValue = (raw: string, type: InputType): string | number => {
+  if (type !== 'number') return raw;
+  if (raw === '' || raw === '-') return raw;
+  const n = parseFloat(raw);
+  return isNaN(n) ? raw : n;
+};
+
+/**
+ * Construye los slotProps del TextField consolidando htmlInput + inputLabel.
+ * Maneja los atributos min/max cuando type="number", maxLength y readOnly.
+ */
+export const buildSlotProps = (
+  type: InputType,
+  min: number | undefined,
+  max: number | undefined,
+  maxLength: number | undefined,
+  customSlotProps: TextFieldProps['slotProps'],
+  customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined,
+  readOnly?: boolean,
+): TextFieldProps['slotProps'] => {
+  const numberAttrs =
+    type === 'number'
+      ? { min: min ?? Number.NEGATIVE_INFINITY, ...(max !== undefined && { max }) }
+      : {};
+
+  return {
+    ...customSlotProps,
+    htmlInput: {
+      ...customInputProps,
+      ...(customSlotProps as any)?.htmlInput,
+      ...numberAttrs,
+      ...(maxLength !== undefined && { maxLength }),
+      ...(readOnly && { readOnly: true }),
+    },
+    // Dejamos que MUI maneje el shrink nativamente (animación inside → up).
+    // El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.
+    inputLabel: {
+      ...(customSlotProps as any)?.inputLabel,
+    },
+  };
+};