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

package/src/components/Icon/Icon.tsx

@@ -1,175 +0,0 @@
-import React, { type ReactNode, useMemo } from 'react';
-import { Badge, styled } from '@mui/material';
-
-export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export interface IconProps {
-  /**
-   * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.
-   * Si se usa junto con `path` o `url`, `children` tiene prioridad.
-   */
-  children?: ReactNode;
-  /**
-   * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para
-   * los iconos custom de Metronic que vienen como strings de path.
-   *
-   * ```tsx
-   * <Icon path="M12 2L2 22h20L12 2z" />
-   * ```
-   *
-   * Si el string contiene el tag `<svg>` completo (no solo el `d`), también
-   * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.
-   */
-  path?: string;
-  /**
-   * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.
-   *
-   * ```tsx
-   * <Icon url="/assets/icons/custom-warning.svg" />
-   * ```
-   */
-  url?: string;
-  /**
-   * Alt text cuando se usa `url`. Default: `"icon"`.
-   */
-  alt?: string;
-  /**
-   * ViewBox cuando se usa `path`. Default: `"0 0 24 24"`. Ignorado si `path`
-   * ya viene como `<svg>` completo.
-   */
-  viewBox?: string;
-  color?: string;
-  outlined?: boolean;
-  spin?: boolean;
-  badge?: string | number;
-  badgeColor?: 'primary' | 'secondary' | 'error';
-  badgePosition?: {
-    vertical: 'top' | 'bottom';
-    horizontal: 'right' | 'left';
-  };
-  badgeSize?: 'small' | 'medium' | 'large';
-  size?: IconSize;
-  black?: boolean;
-  white?: boolean;
-  className?: string;
-}
-
-const sizeMap: Record<IconSize, number> = {
-  xs: 18,
-  sm: 24,
-  md: 36,
-  lg: 48,
-  xl: 64,
-};
-
-const StyledIcon = styled('span')<{
-  color?: string;
-  fontSize?: number;
-  spin?: boolean;
-  outlined?: boolean;
-}>(({ color, fontSize, spin, outlined }) => ({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: color,
-  fontSize: fontSize,
-  width: fontSize,
-  height: fontSize,
-  animation: spin ? 'spin 1s linear infinite' : undefined,
-  border: outlined ? '1px solid currentColor' : undefined,
-  borderRadius: '50%',
-  padding: outlined ? 4 : 0,
-  '@keyframes spin': {
-    '0%': { transform: 'rotate(0deg)' },
-    '100%': { transform: 'rotate(360deg)' },
-  },
-  '& svg': {
-    width: '100%',
-    height: '100%',
-    fill: 'currentColor',
-    display: 'block',
-  },
-  '& img': {
-    width: '100%',
-    height: '100%',
-    display: 'block',
-  },
-}));
-
-export const Icon: React.FC<IconProps> = ({
-  children,
-  path,
-  url,
-  alt = 'icon',
-  viewBox = '0 0 24 24',
-  color = 'var(--primary-color)',
-  outlined = false,
-  spin = false,
-  badge,
-  badgeColor = 'primary',
-  badgePosition = { vertical: 'bottom', horizontal: 'right' },
-  size = 'sm',
-  black,
-  white,
-  className,
-}) => {
-  const finalColor = useMemo(() => {
-    if (white) return 'white';
-    if (black) return 'black';
-    return color;
-  }, [color, white, black]);
-
-  const iconSize = sizeMap[size];
-
-  // Resolver el contenido según la prop activa.
-  const content = useMemo(() => {
-    if (children) return children;
-
-    if (path) {
-      const trimmed = path.trim();
-      // Si es un SVG completo (empieza con <svg), lo inyectamos tal cual.
-      if (trimmed.startsWith('<svg')) {
-        return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;
-      }
-      // Si no, asumimos que es el atributo `d` de un <path>.
-      return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox={viewBox}
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <path d={trimmed} />
-        </svg>
-      );
-    }
-
-    if (url) {
-      return <img src={url} alt={alt} />;
-    }
-
-    return null;
-  }, [children, path, url, alt, viewBox]);
-
-  return (
-    <Badge
-      badgeContent={badge}
-      color={badgeColor}
-      anchorOrigin={badgePosition}
-      invisible={badge === undefined}
-      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}
-    >
-      <StyledIcon
-        color={finalColor}
-        fontSize={iconSize}
-        spin={spin}
-        outlined={outlined}
-        className={`hsi-icon ${className || ''}`}
-      >
-        {content}
-      </StyledIcon>
-    </Badge>
-  );
-};
-
-export default Icon;

package/src/components/Icon/index.ts

@@ -1,2 +0,0 @@
-import '../../styles.css';
-export { default as Icon } from './Icon'

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

@@ -1,324 +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>
-  );
-};
-`;

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,
-    },
-  };
-};