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

package/src/components/Drawer/Drawer.stories.tsx

@@ -10,6 +10,7 @@ import NotificationsIcon from '@mui/icons-material/Notifications';
 
 import { Drawer } from './Drawer';
 import { DrawerItem } from './DrawerItem';
+import { useDrawerContext } from './DrawerContext';
 
 const meta: Meta<typeof Drawer> = {
   title: 'Components/Drawer',
@@ -55,6 +56,34 @@ const SampleLogo = () => (
   </Typography>
 );
 
+// Logo "inteligente" que usa el context para adaptarse: texto completo cuando
+// está expandido, inicial cuando está colapsado. Es el patrón esperado para el
+// nuevo prop `logo` del Drawer.
+const BrandLogo = () => {
+  const { collapsed } = useDrawerContext();
+  return collapsed ? (
+    <Box
+      sx={{
+        width: 32,
+        height: 32,
+        borderRadius: 1,
+        bgcolor: 'primary.main',
+        color: '#fff',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: 700,
+      }}
+    >
+      s
+    </Box>
+  ) : (
+    <Typography variant="h6" sx={{ fontWeight: 700, color: 'primary.main' }}>
+      soyfri
+    </Typography>
+  );
+};
+
 const SampleFooter = ({ collapsed }: { collapsed: boolean }) => (
   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
     <Avatar sx={{ width: 36, height: 36 }}>AP</Avatar>
@@ -236,6 +265,145 @@ export const TemporaryDrawer: Story = {
   },
 };
 
+// ── Nuevo prop `logo` (beta 6) ──────────────────────────────────────────
+
+export const WithLogoExpanded: Story = {
+  args: {
+    variant: 'permanent',
+    collapsed: false,
+    expandedWidth: 260,
+    collapsedWidth: 72,
+    logo: <BrandLogo />,
+  },
+  render: (args) => (
+    <Box sx={{ display: 'flex', height: '100vh' }}>
+      <Drawer
+        {...args}
+        onToggleCollapse={() => {
+          /* noop para que aparezca el chevron */
+        }}
+      >
+        <DrawerItem icon={<HomeIcon />} label="Inicio" active />
+        <DrawerItem icon={<PersonIcon />} label="Perfil" />
+        <DrawerItem icon={<ReceiptIcon />} label="Facturación" />
+        <DrawerItem icon={<SettingsIcon />} label="Configuración" />
+      </Drawer>
+      <Box sx={{ flex: 1, p: 3 }}>
+        <Typography variant="h5">Prop `logo` expandido</Typography>
+        <Typography color="text.secondary">
+          Logo a la izquierda, chevron a la derecha en la misma fila.
+        </Typography>
+      </Box>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Nuevo prop `logo`: brand + toggle alineados horizontalmente cuando el drawer está expandido. El consumer solo pasa el nodo del logo y el Drawer se encarga del layout.',
+      },
+    },
+  },
+};
+
+export const WithLogoCollapsed: Story = {
+  ...WithLogoExpanded,
+  args: {
+    ...WithLogoExpanded.args,
+    collapsed: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Mismo drawer colapsado: el `logo` sigue visible (a diferencia del viejo `header` que se ocultaba). Layout vertical: logo-mini arriba centrado, chevron debajo centrado. El `BrandLogo` usa `useDrawerContext()` para mostrar la versión mini.',
+      },
+    },
+  },
+};
+
+export const WithLogoToggleable: Story = {
+  render: () => {
+    const [collapsed, setCollapsed] = useState(false);
+    return (
+      <Box sx={{ display: 'flex', height: '100vh' }}>
+        <Drawer
+          variant="permanent"
+          collapsed={collapsed}
+          onToggleCollapse={() => setCollapsed((v) => !v)}
+          logo={<BrandLogo />}
+          footer={<SampleFooter collapsed={collapsed} />}
+        >
+          <DrawerItem icon={<HomeIcon />} label="Inicio" active />
+          <DrawerItem icon={<PersonIcon />} label="Perfil" />
+          <DrawerItem icon={<ReceiptIcon />} label="Facturación" />
+          <DrawerItem icon={<SettingsIcon />} label="Configuración" />
+          <DrawerItem icon={<LogoutIcon />} label="Cerrar sesión" danger />
+        </Drawer>
+        <Box sx={{ flex: 1, p: 3 }}>
+          <Typography variant="h5">
+            Drawer con `logo`: {collapsed ? 'colapsado' : 'expandido'}
+          </Typography>
+          <Typography color="text.secondary">
+            Alterná con el chevron: logo y toggle quedan alineados en ambos
+            estados (fila horizontal expandido, stack vertical colapsado).
+          </Typography>
+        </Box>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Caso interactivo: mismo patrón que `ToggleableDrawer` pero usando el nuevo prop `logo` en lugar de `header`. Comparar contra `ToggleableDrawer` para ver la diferencia de alineación al colapsar.',
+      },
+    },
+  },
+};
+
+export const WithLogoAndHeader: Story = {
+  args: {
+    variant: 'permanent',
+    collapsed: false,
+    logo: <BrandLogo />,
+    header: (
+      <Typography variant="caption" color="text.secondary">
+        Workspace: Afiliaciones · v2.1
+      </Typography>
+    ),
+  },
+  render: (args) => (
+    <Box sx={{ display: 'flex', height: '100vh' }}>
+      <Drawer
+        {...args}
+        onToggleCollapse={() => {
+          /* noop */
+        }}
+      >
+        <DrawerItem icon={<HomeIcon />} label="Inicio" active />
+        <DrawerItem icon={<PersonIcon />} label="Perfil" />
+        <DrawerItem icon={<SettingsIcon />} label="Configuración" />
+      </Drawer>
+      <Box sx={{ flex: 1, p: 3 }}>
+        <Typography variant="h5">`logo` + `header` combinados</Typography>
+        <Typography color="text.secondary">
+          El `logo` vive junto al toggle. El `header` queda debajo como fila
+          secundaria y se oculta al colapsar.
+        </Typography>
+      </Box>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Ambos props conviven: `logo` es la sección de brand siempre visible (junto al toggle), `header` sigue siendo una fila secundaria que se oculta al colapsar.',
+      },
+    },
+  },
+};
+
 export const RightAnchored: Story = {
   args: {
     variant: 'permanent',

package/src/components/Drawer/Drawer.tsx

@@ -52,6 +52,13 @@ export interface DrawerProps {
   showCollapseButton?: boolean;
   /** Contenido del header (por encima de los items). Típicamente logo/brand. */
   header?: ReactNode;
+  /**
+   * Logo/brand que se muestra junto al botón de toggle.
+   * - Expandido: logo a la izquierda, toggle a la derecha en la misma fila.
+   * - Colapsado: logo arriba centrado, toggle debajo centrado (stack vertical).
+   * Siempre visible (a diferencia de `header`, que se oculta al colapsar).
+   */
+  logo?: ReactNode;
   /** Contenido del footer (por debajo de los items). Típicamente user profile. */
   footer?: ReactNode;
   /**
@@ -78,6 +85,7 @@ export function Drawer({
   collapsedWidth = 72,
   showCollapseButton,
   header,
+  logo,
   footer,
   preset,
   sx,
@@ -129,22 +137,28 @@ export function Drawer({
           sx: paperSx,
         }}
       >
-        {header && (
+        {(logo || shouldShowToggle) && (
           <Box
             sx={{
               display: 'flex',
+              flexDirection: contextValue.collapsed ? 'column' : 'row',
               alignItems: 'center',
               justifyContent: contextValue.collapsed
                 ? 'center'
-                : 'space-between',
+                : logo
+                  ? 'space-between'
+                  : 'flex-end',
+              gap: contextValue.collapsed ? 0.5 : 0,
               px: contextValue.collapsed ? 1 : 2,
-              py: 1.5,
+              py: 1,
               minHeight: 64,
               flexShrink: 0,
             }}
           >
-            {!contextValue.collapsed && (
-              <Box sx={{ flex: 1, minWidth: 0 }}>{header}</Box>
+            {logo && (
+              <Box sx={{ display: 'flex', alignItems: 'center', minWidth: 0 }}>
+                {logo}
+              </Box>
             )}
             {shouldShowToggle && (
               <IconButton
@@ -158,24 +172,18 @@ export function Drawer({
           </Box>
         )}
 
-        {!header && shouldShowToggle && (
+        {header && !contextValue.collapsed && (
           <Box
             sx={{
               display: 'flex',
-              justifyContent: contextValue.collapsed
-                ? 'center'
-                : 'flex-end',
-              px: 1,
-              py: 1,
+              alignItems: 'center',
+              px: 2,
+              py: 1.5,
+              minHeight: 56,
+              flexShrink: 0,
             }}
           >
-            <IconButton
-              size="small"
-              onClick={onToggleCollapse}
-              aria-label={collapsed ? 'Expandir menú' : 'Colapsar menú'}
-            >
-              {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-            </IconButton>
+            <Box sx={{ flex: 1, minWidth: 0 }}>{header}</Box>
           </Box>
         )}
 

package/src/components/Input/Input.definitions.ts

@@ -322,3 +322,27 @@ export const CustomStylingExample = () => {
   );
 };
 `;
+
+export const MultilineInputDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input';
+import { Box, Typography } from '@mui/material';
+
+export const MultilineInputExample = () => {
+  const [value, setValue] = useState('Escribe un comentario en varias líneas...');
+  return (
+    <Box sx={{ width: 400 }}>
+      <Input
+        label="Comentario"
+        value={value}
+        onChange={(v) => setValue(v.toString())}
+        multiline
+        minRows={3}
+        maxRows={6}
+        fullWidth
+      />
+      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+    </Box>
+  );
+};
+`;

package/src/components/Input/Input.stories.tsx

@@ -24,6 +24,7 @@ import {
   LabelPositionFloatingDefinition,
   CustomBorderRadiusDefinition,
   CustomStylingDefinition,
+  MultilineInputDefinition,
 } from './Input.definitions';
 
 // =============================================================================
@@ -456,6 +457,34 @@ export const CustomBorderRadius: Story = {
   }
 };
 
+export const MultilineInput: Story = {
+  render: () => {
+    const [value, setValue] = useState('Escribe un comentario en varias líneas...');
+    return (
+      <Box sx={{ width: 400 }}>
+        <Input
+          label="Comentario"
+          value={value}
+          onChange={(v) => setValue(v.toString())}
+          multiline
+          minRows={3}
+          maxRows={6}
+          fullWidth
+        />
+        <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un campo de entrada multilínea (`multiline`) usando `minRows` y `maxRows` para auto-expandirse dentro de un rango. Útil para comentarios, descripciones o textos largos."
+      },
+      source: { code: MultilineInputDefinition.trim() }
+    }
+  }
+};
+
 export const CustomStyling: Story = {
   render: () => {
     const [bg, setBg] = useState('Fondo gris claro');

package/src/components/RadioGroup/RadioGroup.definitions.ts

@@ -0,0 +1,177 @@
+// RadioGroup.definitions.ts — código fuente para la pestaña Docs de Storybook.
+
+export const BasicRadioGroupDefinition = `
+import React, { useState } from 'react';
+import { RadioGroup } from './RadioGroup';
+import { Box, Typography } from '@mui/material';
+
+const options = [
+  { value: 'a', label: 'Opción A' },
+  { value: 'b', label: 'Opción B' },
+  { value: 'c', label: 'Opción C' },
+];
+
+export const BasicRadioGroupExample = () => {
+  const [value, setValue] = useState('a');
+  return (
+    <Box sx={{ width: 360 }}>
+      <RadioGroup
+        label="Selecciona una opción"
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+      <Typography sx={{ mt: 2 }}>Valor actual: {value}</Typography>
+    </Box>
+  );
+};
+`;
+
+export const ColumnRadioGroupDefinition = `
+import React, { useState } from 'react';
+import { RadioGroup } from './RadioGroup';
+import { Box } from '@mui/material';
+
+const options = [
+  { value: 'sm', label: 'Pequeño' },
+  { value: 'md', label: 'Mediano' },
+  { value: 'lg', label: 'Grande' },
+];
+
+export const ColumnRadioGroupExample = () => {
+  const [value, setValue] = useState('md');
+  return (
+    <Box sx={{ width: 360 }}>
+      <RadioGroup
+        label="Tamaño"
+        options={options}
+        value={value}
+        onChange={setValue}
+        row={false}
+      />
+    </Box>
+  );
+};
+`;
+
+export const RadioGroupWithErrorDefinition = `
+import React, { useState } from 'react';
+import { RadioGroup } from './RadioGroup';
+import { Box } from '@mui/material';
+
+const options = [
+  { value: 'yes', label: 'Sí' },
+  { value: 'no', label: 'No' },
+];
+
+export const RadioGroupWithErrorExample = () => {
+  const [value, setValue] = useState('');
+  const hasError = !value;
+  return (
+    <Box sx={{ width: 360 }}>
+      <RadioGroup
+        label="¿Aceptas los términos?"
+        options={options}
+        value={value}
+        onChange={setValue}
+        error={hasError}
+        helperText={hasError ? 'Este campo es obligatorio' : ''}
+      />
+    </Box>
+  );
+};
+`;
+
+export const DisabledRadioGroupDefinition = `
+import React, { useState } from 'react';
+import { RadioGroup } from './RadioGroup';
+import { Box } from '@mui/material';
+
+const options = [
+  { value: 'a', label: 'Opción A' },
+  { value: 'b', label: 'Opción B', disabled: true },
+  { value: 'c', label: 'Opción C' },
+];
+
+export const DisabledRadioGroupExample = () => {
+  const [value, setValue] = useState('a');
+  return (
+    <Box sx={{ width: 360 }}>
+      {/* Bloqueo total */}
+      <RadioGroup
+        label="Grupo deshabilitado"
+        options={options}
+        value={value}
+        onChange={setValue}
+        disabled
+      />
+      {/* Bloqueo por opción */}
+      <RadioGroup
+        label="Opción B deshabilitada"
+        options={options}
+        value={value}
+        onChange={setValue}
+        sx={{ mt: 3 }}
+      />
+    </Box>
+  );
+};
+`;
+
+export const UnborderedRadioGroupDefinition = `
+import React, { useState } from 'react';
+import { RadioGroup } from './RadioGroup';
+import { Box } from '@mui/material';
+
+const options = [
+  { value: 'a', label: 'Opción A' },
+  { value: 'b', label: 'Opción B' },
+];
+
+export const UnborderedRadioGroupExample = () => {
+  const [value, setValue] = useState('a');
+  return (
+    <Box sx={{ width: 360 }}>
+      <RadioGroup
+        options={options}
+        value={value}
+        onChange={setValue}
+        bordered={false}
+      />
+    </Box>
+  );
+};
+`;
+
+export const RHFRadioGroupDefinition = `
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { RadioGroup } from './RadioGroup';
+import { Box, Button, Typography } from '@mui/material';
+
+const options = [
+  { value: 'paypal', label: 'PayPal' },
+  { value: 'card', label: 'Tarjeta' },
+  { value: 'transfer', label: 'Transferencia' },
+];
+
+export const RHFRadioGroupExample = () => {
+  const { control, handleSubmit, watch } = useForm({
+    defaultValues: { paymentMethod: 'card' },
+  });
+  const value = watch('paymentMethod');
+  return (
+    <Box sx={{ width: 360 }} component="form" onSubmit={handleSubmit(console.log)}>
+      <RadioGroup
+        label="Método de pago"
+        options={options}
+        name="paymentMethod"
+        control={control}
+        validation={{ required: 'Selecciona un método' }}
+      />
+      <Typography sx={{ mt: 2 }}>Valor en el form: {value}</Typography>
+      <Button type="submit" sx={{ mt: 1 }}>Enviar</Button>
+    </Box>
+  );
+};
+`;