@soyfri/shared-library 1.5.0-beta.4 → 1.5.0

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,94 @@
+import React, { ReactNode, useMemo } from 'react';
+import { Badge, SvgIconProps, styled } from '@mui/material';
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface IconProps {
+  children: ReactNode;
+  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',
+  color: color,
+  fontSize: 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)' },
+  },
+}));
+
+export const Icon: React.FC<IconProps> = ({
+  children,
+  color = 'var(--primary-color)',
+  outlined = false,
+  spin = false,
+  badge,
+  badgeColor = 'primary',
+  badgePosition = { vertical: 'bottom', horizontal: 'right' },
+  badgeSize = 'medium',
+  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];
+
+  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 || ''}`}
+      >
+        {children}
+      </StyledIcon>
+    </Badge>
+  );
+};
+
+export default Icon;

package/src/components/Icon/index.ts

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

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

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