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

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() },
+    },
+  },
+};

package/src/components/InputGroup/InputGroup.tsx

@@ -0,0 +1,179 @@
+import React, { Children, isValidElement } from 'react';
+import { Box, type SxProps, type Theme } from '@mui/material';
+
+export interface InputGroupProps {
+  children: React.ReactNode;
+  /**
+   * sx aplicado al contenedor raíz del grupo. Se mergea sobre los defaults.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * sx aplicado a cada slot individual. Útil para controlar flex/gap entre
+   * los hijos del grupo.
+   */
+  slotSx?: SxProps<Theme>;
+  /**
+   * Radio del borde del grupo. Default: 10.
+   */
+  borderRadius?: number | string;
+  /**
+   * Desactiva visualmente el grupo (no cascada lógica — los hijos deben
+   * manejar su propio `disabled`).
+   */
+  disabled?: boolean;
+  /**
+   * Orientación del grupo. Default: 'horizontal'.
+   */
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+}
+
+const mergeSx = (base: SxProps<Theme>, extra?: SxProps<Theme>): SxProps<Theme> => {
+  if (!extra) return base;
+  const baseArr = Array.isArray(base) ? base : [base];
+  const extraArr = Array.isArray(extra) ? extra : [extra];
+  return [...baseArr, ...extraArr] as SxProps<Theme>;
+};
+
+/**
+ * Agrupa visualmente varios componentes de entrada (Input / Select / DatePicker /
+ * Button, etc.) compartiendo un solo borde y con separadores internos.
+ *
+ * El grupo respeta el espacio que Input/Select reservan para su label `outside`
+ * (marginTop=14px) moviendo ese reservado al contenedor externo y cancelándolo
+ * en los hijos. Los labels siguen flotando por encima del borde del grupo con
+ * la misma animación que fuera del grupo.
+ *
+ * No inspecciona el tipo de cada hijo; aplica los overrides a través de
+ * descendant selectors por CSS para funcionar con cualquier wrapper / memoizado.
+ */
+const InputGroup: React.FC<InputGroupProps> = ({
+  children,
+  sx,
+  slotSx,
+  borderRadius = 10,
+  disabled,
+  orientation = 'horizontal',
+  className,
+}) => {
+  const radius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
+  const slots = Children.toArray(children).filter(isValidElement);
+  const isHorizontal = orientation === 'horizontal';
+
+  const baseSx: SxProps<Theme> = {
+    // Respeta el label "outside" de Input/Select: los hijos pierden su marginTop
+    // (ver más abajo) y el grupo reserva el mismo espacio arriba para que los
+    // labels floten por encima del borde del grupo.
+    marginTop: '14px',
+
+    display: 'flex',
+    flexDirection: isHorizontal ? 'row' : 'column',
+    alignItems: 'stretch',
+    width: '100%',
+    border: (theme) => `1px solid ${theme.palette.divider}`,
+    borderRadius: radius,
+    backgroundColor: 'background.paper',
+    transition: 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
+    '&:focus-within': {
+      borderColor: 'primary.main',
+      boxShadow: (theme) => `0 0 0 1px ${theme.palette.primary.main}`,
+    },
+    opacity: disabled ? 0.6 : 1,
+    pointerEvents: disabled ? 'none' : 'auto',
+
+    // Cancelar el marginTop que Input/Select reservan en labelPosition="outside".
+    // El grupo ya lo reservó en su nivel externo.
+    '& .MuiFormControl-root, & > .InputGroup__slot > .MuiTextField-root, & > .InputGroup__slot > .MuiFormControl-root': {
+      marginTop: 0,
+    },
+
+    // Quitar el borde del notched outline interno: el borde visible es el del
+    // grupo, los separadores son los borderRight/borderBottom de cada slot.
+    '& .MuiOutlinedInput-notchedOutline': {
+      border: 'none',
+    },
+
+    // Forzar que todos los campos pinten sus esquinas cuadradas (las esquinas
+    // redondeadas se aplican solo al primer/último slot más abajo).
+    '& .MuiInputBase-root, & .MuiChip-root': {
+      borderRadius: 0,
+    },
+
+    // Botones integrados: sin radius propio, altura completa, sin sombra.
+    '& .MuiButton-root': {
+      borderRadius: 0,
+      height: '100%',
+      boxShadow: 'none',
+      border: 'none',
+    },
+
+    // Slots: cada hijo vive en un slot neutro que lo centra verticalmente.
+    '& > .InputGroup__slot': {
+      flex: 1,
+      display: 'flex',
+      alignItems: 'center',
+      minWidth: 0,
+      // Separador entre slots (horizontal: borderRight / vertical: borderBottom),
+      // usando el color de divider del theme.
+      ...(isHorizontal
+        ? { borderRight: (theme: Theme) => `1px solid ${theme.palette.divider}` }
+        : { borderBottom: (theme: Theme) => `1px solid ${theme.palette.divider}` }),
+      '&:last-of-type': {
+        borderRight: 'none',
+        borderBottom: 'none',
+      },
+    },
+
+    // Esquinas redondeadas: primer slot (izquierda o arriba).
+    '& > .InputGroup__slot:first-of-type .MuiInputBase-root, & > .InputGroup__slot:first-of-type .MuiButton-root, & > .InputGroup__slot:first-of-type .MuiChip-root':
+      isHorizontal
+        ? {
+            borderTopLeftRadius: radius,
+            borderBottomLeftRadius: radius,
+          }
+        : {
+            borderTopLeftRadius: radius,
+            borderTopRightRadius: radius,
+          },
+
+    // Esquinas redondeadas: último slot (derecha o abajo).
+    '& > .InputGroup__slot:last-of-type .MuiInputBase-root, & > .InputGroup__slot:last-of-type .MuiButton-root, & > .InputGroup__slot:last-of-type .MuiChip-root':
+      isHorizontal
+        ? {
+            borderTopRightRadius: radius,
+            borderBottomRightRadius: radius,
+          }
+        : {
+            borderBottomLeftRadius: radius,
+            borderBottomRightRadius: radius,
+          },
+  };
+
+  const baseSlotSx: SxProps<Theme> = {
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+  };
+
+  return (
+    <Box
+      data-testid="input-group"
+      className={className}
+      aria-disabled={disabled ? 'true' : undefined}
+      sx={mergeSx(baseSx, sx)}
+    >
+      {slots.map((child, i) => (
+        <Box
+          key={i}
+          className="InputGroup__slot"
+          sx={mergeSx(baseSlotSx, slotSx)}
+        >
+          {child}
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default InputGroup;

package/src/components/InputGroup/index.ts

@@ -0,0 +1 @@
+export { default as InputGroup } from './InputGroup';