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

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

package/src/components/InputGroup/InputGroup.tsx

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

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