@soyfri/shared-library 2.0.0-beta.20 → 2.0.0-beta.22

package/src/components/Input/Input.tsx

@@ -1,162 +0,0 @@
-import { TextField, type TextFieldProps } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
-
-import { parseValue, buildSlotProps } from './Input.helpers';
-import { buildInputSx } from './Input.sx';
-import { resolvePreset } from '../_shared/resolvePreset';
-
-// ── Tipos de dominio ─────────────────────────────────────────────────────
-export type InputType =
-  | 'text' | 'number' | 'email' | 'password' | 'tel'
-  | 'url' | 'search' | 'date' | 'datetime-local'
-  | 'month' | 'week' | 'time' | 'color';
-
-export type LabelPosition = 'outside' | 'floating';
-
-// ── Props base (todo lo común entre RHF y controlado) ────────────────────
-export interface BaseInputProps
-  extends Omit<TextFieldProps, 'value' | 'onChange' | 'type'> {
-  type?: InputType;
-  min?: number;
-  max?: number;
-  maxLength?: number;
-  /** Border radius del input. Default: 10 */
-  borderRadius?: number | string;
-  /** "outside" = label arriba del campo (default). "floating" = label clásico MUI dentro del borde */
-  labelPosition?: LabelPosition;
-  readOnly?: boolean;
-  /**
-   * Nombre del preset de estilo registrado en `theme.styles.Input`.
-   * - `"default"` (o ausente) = estilo built-in del paquete.
-   * - Cualquier otro string = mergea el preset encima del estilo built-in.
-   */
-  preset?: string;
-}
-
-// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
-export interface RHFInputProps extends BaseInputProps {
-  name: string;
-  // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en
-  // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).
-  // Cuando el componente o su uso involucra generics adicionales, TS se
-  // confunde narroweando el discriminated union y `Control<any>` no logra
-  // absorber `Control<MyForm>` en la comparación estructural profunda. El
-  // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos
-  // fuertes — solo degradamos la superficie del prop del componente.
-  control: any;
-  validation?: RegisterOptions;
-  /**
-   * Side-effect que corre después de que RHF actualiza el form state.
-   * Útil para cascadas entre campos (ej. reset de municipio al cambiar
-   * departamento). NO reemplaza al handler de RHF.
-   */
-  onValueChange?: (value: string | number) => void;
-  value?: never;
-  onChange?: never;
-}
-
-export interface ControlledInputProps extends BaseInputProps {
-  name?: string;
-  control?: never;
-  validation?: never;
-  value: string | number;
-  onChange: (value: string | number) => void;
-}
-
-// ── API pública final ────────────────────────────────────────────────────
-export type InputProps = RHFInputProps | ControlledInputProps;
-
-export const Input: React.FC<InputProps> = (props) => {
-  const {
-    type = 'text',
-    variant = 'outlined',
-    size = 'small',
-    borderRadius = 10,
-    labelPosition = 'outside',
-    preset,
-    min,
-    max,
-    maxLength,
-    readOnly,
-    inputProps,
-    slotProps,
-    sx,
-    onBlur,
-    ...rest
-  } = props as ControlledInputProps & {
-    control?: Control<any>;
-    validation?: RegisterOptions;
-  };
-
-  const theme = useTheme();
-  const presetSx = resolvePreset('Input', preset, theme);
-
-  const finalSlotProps = buildSlotProps(
-    type,
-    min,
-    max,
-    maxLength,
-    slotProps,
-    inputProps,
-    readOnly,
-  );
-  const mergedSx = [
-    ...(presetSx ? [presetSx] : [buildInputSx(borderRadius, labelPosition)]),
-    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
-  ];
-
-  if ('control' in props && props.control) {
-    const { name, control, validation, onValueChange } = props as RHFInputProps;
-    return (
-      <Controller
-        name={name}
-        control={control}
-        rules={validation}
-        render={({ field, fieldState: { error } }) => (
-          <TextField
-            fullWidth
-            {...rest}
-            name={field.name}
-            value={field.value ?? ''}
-            onChange={(e) => {
-              const parsed = parseValue(e.target.value, type);
-              field.onChange(parsed);
-              onValueChange?.(parsed);
-            }}
-            onBlur={(e) => {
-              field.onBlur();
-              onBlur?.(e);
-            }}
-            inputRef={field.ref}
-            type={type}
-            variant={variant}
-            size={size}
-            slotProps={finalSlotProps}
-            sx={mergedSx}
-            error={!!error || rest.error}
-            helperText={error?.message ?? rest.helperText}
-          />
-        )}
-      />
-    );
-  }
-
-  const { value, onChange } = props as ControlledInputProps;
-  return (
-    <TextField
-      fullWidth
-      {...rest}
-      value={value ?? ''}
-      onChange={(e) => onChange(parseValue(e.target.value, type))}
-      onBlur={onBlur}
-      type={type}
-      variant={variant}
-      size={size}
-      slotProps={finalSlotProps}
-      sx={mergedSx}
-    />
-  );
-};
-
-export default Input;

package/src/components/Input/index.ts

@@ -1,10 +0,0 @@
-export { Input, default } from './Input';
-export type {
-  InputProps,
-  BaseInputProps,
-  RHFInputProps,
-  ControlledInputProps,
-  InputType,
-  LabelPosition,
-} from './Input';
-

package/src/components/InputGroup/InputGroup.definitions.ts

@@ -1,158 +0,0 @@
-export const BasicInputGroupDefinition = `
-import { useState } from 'react';
-import { Box, Typography } from '@mui/material';
-import InputGroup from './InputGroup';
-import { Input } from '../Input';
-import { Button } from '../Button';
-
-export const BasicInputGroupExample = () => {
-    const [text, setText] = useState('');
-    return (
-        <Box>
-            <Typography variant="h6" sx={{ mb: 2 }}>
-                Grupo de entrada básico
-            </Typography>
-            <InputGroup>
-                <Input label="Buscar" value={text} onChange={(val) => setText(val as string)} />
-                <Button variant="outlined">Buscar</Button>
-            </InputGroup>
-        </Box>
-    );
-};
-`;
-
-export const CombinedInputGroupDefinition = `
-import { useState } from 'react';
-import { Box, Typography } from '@mui/material';
-import InputGroup from './InputGroup';
-import { Input } from '../Input';
-import Select, { SelectOption } from '../Select/Select';
-import { Button } from '../Button';
-
-const basicOptions: SelectOption[] = [
-    { value: '10', label: '10' },
-    { value: '25', label: '25' },
-    { value: '50', label: '50' },
-    { value: '100', label: '100' },
-];
-
-export const CombinedInputGroupExample = () => {
-    const [text, setText] = useState('');
-    const [selectValue, setSelectValue] = useState('25');
-
-    return (
-        <Box>
-            <Typography variant="h6" sx={{ mb: 2 }}>
-                Grupo de entrada combinado
-            </Typography>
-            <InputGroup>
-                <Select
-                    label="Registros"
-                    options={basicOptions}
-                    value={selectValue}
-                    onChange={(val) => setSelectValue(val as string)}
-                />
-                <Input
-                    label="Filtrar por nombre"
-                    value={text}
-                    onChange={(val) => setText(val as string)}
-                />
-                <Button variant="contained">Aplicar</Button>
-            </InputGroup>
-        </Box>
-    );
-};
-`;
-
-export const DatePickerInputGroupDefinition = `
-import { useState } from 'react';
-import { Box, Typography } from '@mui/material';
-import dayjs, { Dayjs } from 'dayjs';
-import InputGroup from './InputGroup';
-import { DatePicker } from '../DatePicker';
-import { Button } from '../Button';
-
-export const DatePickerInputGroupExample = () => {
-    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());
-
-    return (
-        <Box>
-            <Typography variant="h6" sx={{ mb: 2 }}>
-                Grupo de entrada con DatePicker
-            </Typography>
-            <InputGroup>
-                <DatePicker
-                    label="Fecha de inicio"
-                    selectedDate={selectedDate}
-                    onDateChange={(date) => setSelectedDate(date)}
-                />
-                <Button variant="contained">Ver calendario</Button>
-            </InputGroup>
-        </Box>
-    );
-};
-`;
-
-export const VerticalInputGroupDefinition = `
-import { useState } from 'react';
-import { Box } from '@mui/material';
-import InputGroup from './InputGroup';
-import { Input } from '../Input';
-
-export const VerticalInputGroupExample = () => {
-    const [nombre, setNombre] = useState('');
-    const [email, setEmail] = useState('');
-
-    return (
-        <Box sx={{ width: 320 }}>
-            <InputGroup orientation="vertical">
-                <Input label="Nombre" value={nombre} onChange={(val) => setNombre(val as string)} />
-                <Input label="Email" value={email} onChange={(val) => setEmail(val as string)} />
-            </InputGroup>
-        </Box>
-    );
-};
-`;
-
-export const CustomStylingInputGroupDefinition = `
-import { useState } from 'react';
-import { Box } from '@mui/material';
-import InputGroup from './InputGroup';
-import { Input } from '../Input';
-import { Button } from '../Button';
-
-export const CustomStylingInputGroupExample = () => {
-    const [q, setQ] = useState('');
-
-    return (
-        <Box sx={{ width: 500 }}>
-            <InputGroup
-                borderRadius={999}
-                sx={{
-                    bgcolor: 'action.hover',
-                    borderColor: 'primary.main',
-                }}
-            >
-                <Input label="Búsqueda avanzada" value={q} onChange={(val) => setQ(val as string)} />
-                <Button variant="contained" color="primary">Buscar</Button>
-            </InputGroup>
-        </Box>
-    );
-};
-`;
-
-export const DisabledInputGroupDefinition = `
-import { Box } from '@mui/material';
-import InputGroup from './InputGroup';
-import { Input } from '../Input';
-import { Button } from '../Button';
-
-export const DisabledInputGroupExample = () => (
-    <Box sx={{ width: 400 }}>
-        <InputGroup disabled>
-            <Input label="Búsqueda" value="" onChange={() => {}} disabled />
-            <Button variant="outlined" disabled>Buscar</Button>
-        </InputGroup>
-    </Box>
-);
-`;

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -1,267 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { Box, Typography } from '@mui/material';
-import dayjs, { Dayjs } from 'dayjs';
-
-import InputGroup from './InputGroup';
-import { Input } from '../Input';
-import Select, { SelectOption } from '../Select/Select';
-import { Button } from '../Button';
-import { DatePicker } from '../DatePicker';
-
-import {
-  BasicInputGroupDefinition,
-  CombinedInputGroupDefinition,
-  DatePickerInputGroupDefinition,
-  VerticalInputGroupDefinition,
-  CustomStylingInputGroupDefinition,
-  DisabledInputGroupDefinition,
-} from './InputGroup.definitions';
-
-const meta: Meta<typeof InputGroup> = {
-  title: 'Components/InputGroup',
-  component: InputGroup,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Agrupa visualmente varios campos (Input / Select / DatePicker / Button, etc.) bajo un único borde, con separadores internos por cada slot. Respeta el espacio reservado para los labels `outside` de Input/Select, y mantiene el contenido centrado verticalmente sin importar si cada hijo tiene label o no.',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <Box sx={{ width: 600, maxWidth: '100%' }}>
-        <Story />
-      </Box>
-    ),
-  ],
-  argTypes: {
-    borderRadius: {
-      control: 'number',
-      description: 'Radio del borde del grupo. Default: 10.',
-    },
-    orientation: {
-      control: 'radio',
-      options: ['horizontal', 'vertical'],
-      description: 'Orientación del grupo.',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Desactiva visualmente el grupo (los hijos manejan su propio `disabled` lógico).',
-    },
-    sx: {
-      control: false,
-      description: 'sx del contenedor raíz. Se mergea sobre los defaults.',
-    },
-    slotSx: {
-      control: false,
-      description: 'sx aplicado a cada slot que envuelve un hijo.',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof InputGroup>;
-
-const basicOptions: SelectOption[] = [
-  { value: '10', label: '10' },
-  { value: '25', label: '25' },
-  { value: '50', label: '50' },
-  { value: '100', label: '100' },
-];
-
-export const BasicInputGroup: Story = {
-  render: () => {
-    const [text, setText] = useState('');
-
-    return (
-      <Box>
-        <Typography variant="h6" sx={{ mb: 2 }}>
-          Grupo de entrada básico
-        </Typography>
-        <InputGroup>
-          <Input
-            label="Buscar"
-            value={text}
-            onChange={(val) => setText(val as string)}
-          />
-          <Button variant="outlined">Buscar</Button>
-        </InputGroup>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Un grupo de entrada simple que combina un campo de texto y un botón.',
-      },
-      source: { code: BasicInputGroupDefinition.trim() },
-    },
-  },
-};
-
-export const CombinedInputGroup: Story = {
-  render: () => {
-    const [text, setText] = useState('');
-    const [selectValue, setSelectValue] = useState('25');
-
-    return (
-      <Box>
-        <Typography variant="h6" sx={{ mb: 2 }}>
-          Grupo de entrada combinado
-        </Typography>
-        <InputGroup>
-          <Select
-            label="Registros"
-            options={basicOptions}
-            value={selectValue}
-            onChange={(val) => setSelectValue(val as string)}
-          />
-          <Input
-            label="Filtrar por nombre"
-            value={text}
-            onChange={(val) => setText(val as string)}
-          />
-          <Button variant="contained">Aplicar</Button>
-        </InputGroup>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Select + Input + Button compartiendo un borde. Los labels de Select e Input flotan por encima del borde del grupo con la misma animación que fuera del grupo.',
-      },
-      source: { code: CombinedInputGroupDefinition.trim() },
-    },
-  },
-};
-
-export const DatePickerInputGroup: Story = {
-  render: () => {
-    const [selectedDate, setSelectedDate] = useState<Dayjs | null>(dayjs());
-
-    return (
-      <Box>
-        <Typography variant="h6" sx={{ mb: 2 }}>
-          Grupo de entrada con DatePicker
-        </Typography>
-        <InputGroup>
-          <DatePicker
-            label="Fecha de inicio"
-            selectedDate={selectedDate}
-            onDateChange={(date) => setSelectedDate(date)}
-          />
-          <Button variant="contained">Ver calendario</Button>
-        </InputGroup>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Un grupo de entrada que combina un `DatePicker` con un botón de acción.',
-      },
-      source: { code: DatePickerInputGroupDefinition.trim() },
-    },
-  },
-};
-
-export const VerticalInputGroup: Story = {
-  render: () => {
-    const [nombre, setNombre] = useState('');
-    const [email, setEmail] = useState('');
-
-    return (
-      <Box sx={{ width: 320 }}>
-        <InputGroup orientation="vertical">
-          <Input
-            label="Nombre"
-            value={nombre}
-            onChange={(val) => setNombre(val as string)}
-          />
-          <Input
-            label="Email"
-            value={email}
-            onChange={(val) => setEmail(val as string)}
-          />
-        </InputGroup>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Grupo en orientación vertical: los separadores pasan a ser horizontales entre slots.',
-      },
-      source: { code: VerticalInputGroupDefinition.trim() },
-    },
-  },
-};
-
-export const CustomStyling: Story = {
-  render: () => {
-    const [q, setQ] = useState('');
-
-    return (
-      <Box sx={{ width: 500 }}>
-        <InputGroup
-          borderRadius={999}
-          sx={{
-            bgcolor: 'action.hover',
-            borderColor: 'primary.main',
-          }}
-        >
-          <Input
-            label="Búsqueda avanzada"
-            value={q}
-            onChange={(val) => setQ(val as string)}
-          />
-          <Button variant="contained" color="primary">
-            Buscar
-          </Button>
-        </InputGroup>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Demo del passthrough de `sx` y `borderRadius`. El consumidor puede pintar fondo, cambiar el color del borde o dejar el grupo completamente pill-shaped (`borderRadius={999}`) sin tocar el componente.',
-      },
-      source: { code: CustomStylingInputGroupDefinition.trim() },
-    },
-  },
-};
-
-export const DisabledGroup: Story = {
-  render: () => (
-    <Box sx={{ width: 400 }}>
-      <InputGroup disabled>
-        <Input
-          label="Búsqueda"
-          value=""
-          onChange={() => {}}
-          disabled
-        />
-        <Button variant="outlined" disabled>
-          Buscar
-        </Button>
-      </InputGroup>
-    </Box>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '`disabled` aplica opacidad y bloquea interacciones en el grupo. Cada hijo debe manejar su propio `disabled` lógico (validación, formularios, etc.).',
-      },
-      source: { code: DisabledInputGroupDefinition.trim() },
-    },
-  },
-};