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

package/src/components/Input/Input.tsx

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

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

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

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

@@ -0,0 +1,267 @@
+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() },
+    },
+  },
+};