@soyfri/shared-library 1.5.0 → 2.0.0-beta.0

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

@@ -1,20 +1,35 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, Typography } from '@mui/material';
-import InputGroup from './InputGroup'; // Asegúrate de tener este componente
-
 import dayjs, { Dayjs } from 'dayjs';
-import Select, { SelectOption } from '@soyfri/shared-library/components/Select/Select';
-import { Input } from '@soyfri/shared-library/components/Input';
-import { Button } from "@soyfri/shared-library/components/Button";
-import { DatePicker } from '@soyfri/shared-library/components/DatePicker';
+
+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: '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) => (
@@ -23,6 +38,29 @@ const meta: Meta<typeof InputGroup> = {
       </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;
@@ -50,9 +88,7 @@ export const BasicInputGroup: Story = {
             value={text}
             onChange={(val) => setText(val as string)}
           />
-          <Button variant="outlined">
-            Buscar
-          </Button>
+          <Button variant="outlined">Buscar</Button>
         </InputGroup>
       </Box>
     );
@@ -60,10 +96,11 @@ export const BasicInputGroup: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Un grupo de entrada simple que combina un campo de texto y un botón.'
-      }
-    }
-  }
+        story: 'Un grupo de entrada simple que combina un campo de texto y un botón.',
+      },
+      source: { code: BasicInputGroupDefinition.trim() },
+    },
+  },
 };
 
 export const CombinedInputGroup: Story = {
@@ -88,9 +125,7 @@ export const CombinedInputGroup: Story = {
             value={text}
             onChange={(val) => setText(val as string)}
           />
-          <Button variant="contained">
-            Aplicar
-          </Button>
+          <Button variant="contained">Aplicar</Button>
         </InputGroup>
       </Box>
     );
@@ -98,10 +133,12 @@ export const CombinedInputGroup: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Un ejemplo más complejo que agrupa un `Select`, un `Input` y un `Button` en una sola fila.'
-      }
-    }
-  }
+        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 = {
@@ -119,8 +156,73 @@ export const DatePickerInputGroup: Story = {
             selectedDate={selectedDate}
             onDateChange={(date) => setSelectedDate(date)}
           />
-          <Button variant="contained">
-            Ver calendario
+          <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>
@@ -129,8 +231,37 @@ export const DatePickerInputGroup: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Un grupo de entrada que combina un `DatePicker` con un botón de acción.'
-      }
-    }
-  }
+        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

@@ -1,136 +1,179 @@
-import React, { Children, cloneElement, isValidElement } from 'react';
-import { Box } from '@mui/material';
-import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
-import { Select as MuiSelect } from '@mui/material';
-import { TextField as MuiTextField } from '@mui/material';
-import { Input } from '../Input';
-import { Select } from '../Select';
-import { DatePicker } from '../DatePicker';
+import React, { Children, isValidElement } from 'react';
+import { Box, type SxProps, type Theme } from '@mui/material';
 
-interface CommonProps {
-  sx?: object;
-  [key: string]: any;
-}
-
-interface InputGroupProps {
+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 InputGroup: React.FC<InputGroupProps> = ({ children }) => {
-  const childrenArray = Children.toArray(children);
+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 childrenWithDividers = childrenArray.map((child, index) => {
-    if (isValidElement(child)) {
-      const childProps = child.props as CommonProps;
-      const childType = child.type as any;
+  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',
 
-      const isInputComponent = (
-        childType === MuiTextField || 
-        childType === Input || 
-        childType === MuiSelect || 
-        childType === Select ||
-        childType === MuiDatePicker || 
-        childType === DatePicker
-      );
+    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',
 
-      const clonedChild = isInputComponent ? (
-        cloneElement(child, {
-          ...childProps,
-          // Añade la clase directamente al componente clonado
-          className: 'InputGroupChild',
-          sx: {
-            ...childProps.sx,
-            // Usa el selector correcto para anular el borde del NotchedOutline
-            '& .MuiOutlinedInput-notchedOutline': {
-              border: 'none !important',
-            },
-            // Asegura que el botón del DatePicker no tenga borde divisor
-            '& .MuiInputBase-root .MuiButtonBase-root': {
-              borderRight: 'none',
-            },
-            // Oculta el legend de MuiOutlinedInput para que el borde no tenga "muescas"
-            '& .MuiOutlinedInput-notchedOutline > legend': {
-              display: 'none',
-            },
+    // 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,
+    },
 
-            ' .InputGroupChild > MuiOutlinedInput-notchedOutline': {
-              border: 'none !important',
+    // 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',
+    },
 
-            }, 
-            '.MuiOutlinedInput-notchedOutline, > .MuiOutlinedInput-notchedOutline': {
-              border: 'none !important',
-            }
+    // 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,
           },
-        } as CommonProps)
-      ) : (
-        child
-      );
 
-      return (
-        <Box
-          key={index}
-          sx={{
-            flexGrow: 1,
-            display: 'flex',
-            alignItems: 'center',
-            minWidth: 0,
-            borderRight: index < childrenArray.length - 1 ? '1px solid #ccc' : 'none',
-          }}
-        >
-          {clonedChild}
-        </Box>
-      );
-    }
-    return child;
-  });
+    // 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,
+          },
+  };
 
-  return (
-    <Box
-      sx={{
-          width: '100%',
-          display: 'grid',
-          marginBottom: '10px',
-          marginTop: '10px'
-      }}
+  const baseSlotSx: SxProps<Theme> = {
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+  };
 
-  >
+  return (
     <Box
-      className='InputGroupChild'
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        height: '32px',
-        border: '1px solid #ccc',
-        borderRadius: '10px',
-        padding: '8px 0px',
-        marginTop: '-5px',
-        marginBottom: '20px',
-        '& .MuiInputBase-root, & .MuiButtonBase-root, & .MuiChip-root': {
-          borderRadius: 0,
-        },
-        '& > div:first-of-type .MuiInputBase-root, & > div:first-of-type .MuiButtonBase-root, & > div:first-of-type .MuiChip-root': {
-          borderTopLeftRadius: '10px',
-          borderBottomLeftRadius: '10px',
-        },
-        '& > div:last-of-type .MuiInputBase-root, & > div:last-of-type .MuiButtonBase-root, & > div:last-of-type .MuiChip-root': {
-          borderTopRightRadius: '10px',
-          borderBottomRightRadius: '10px',
-          border: 'none !important'
-        },
-        // Estilo para los componentes que tienen `InputGroupChild` en la clase
-        '& .InputGroupChild': {
-          width: '100%',
-        },
-        '&  > div:first-of-type .MuiInputBase-root > .MuiOutlinedInput-notchedOutline': {
-          border: 'none !important',
-        },
-      }}
+      data-testid="input-group"
+      className={className}
+      aria-disabled={disabled ? 'true' : undefined}
+      sx={mergeSx(baseSx, sx)}
     >
-      {childrenWithDividers}
+      {slots.map((child, i) => (
+        <Box
+          key={i}
+          className="InputGroup__slot"
+          sx={mergeSx(baseSlotSx, slotSx)}
+        >
+          {child}
+        </Box>
+      ))}
     </Box>
-  </Box>
   );
 };
 
-export default InputGroup;
+export default InputGroup;