@soyfri/shared-library 2.0.0-beta.10 → 2.0.0-beta.12

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

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

@@ -1,49 +0,0 @@
-import type { InputHTMLAttributes } from 'react';
-import type { TextFieldProps } from '@mui/material';
-import type { InputType, LabelPosition } 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" y readOnly.
- */
-export const buildSlotProps = (
-  type: InputType,
-  min: number | undefined,
-  max: number | undefined,
-  customSlotProps: TextFieldProps['slotProps'],
-  customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined,
-  _labelPosition: LabelPosition,
-  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,
-      ...(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,
-    },
-  };
-};