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

package/src/components/Stepper/Stepper.tsx

@@ -1,5 +1,13 @@
-import React, { ReactElement } from "react";
-import { Stepper as MuiStepper, Step as MuiStep, StepLabel as MuiStepLabel, Box } from "@mui/material";
+import React, { ReactElement, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  Stepper as MuiStepper,
+  Step as MuiStep,
+  StepLabel as MuiStepLabel,
+  Box,
+  IconButton,
+} from "@mui/material";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { StepProps } from "./Step";
 import { useWizard } from "../../hooks/Wizard";
 
@@ -35,9 +43,120 @@ export const Stepper: React.FC<MyStepperProps> = ({
         ? wizard.currentStep
         : 0;
 
+  const isHorizontal = orientation === "horizontal";
+
+  // Scroll horizontal con flechitas cuando los steps no caben.
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    // Tolerancia de 1px por redondeos de subpixel.
+    setCanScrollLeft(scrollLeft > 1);
+    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
+  };
+
+  useLayoutEffect(() => {
+    if (!isHorizontal) return;
+    updateScrollState();
+  }, [isHorizontal, children.length, currentStep]);
+
+  useEffect(() => {
+    if (!isHorizontal) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => updateScrollState();
+    el.addEventListener("scroll", onScroll, { passive: true });
+    const ro = new ResizeObserver(() => updateScrollState());
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      ro.disconnect();
+    };
+  }, [isHorizontal]);
+
+  const scrollBy = (delta: number) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollBy({ left: delta, behavior: "smooth" });
+  };
+
+  const showArrows = isHorizontal && (canScrollLeft || canScrollRight);
+
   return (
     <Box sx={sx}>
-      <MuiStepper activeStep={currentStep} orientation={orientation} alternativeLabel={alternateLabel} >
+      {/*
+        En horizontal envolvemos el MuiStepper en un Box con `overflowX: auto`
+        y flechitas `<` `>` a los costados para navegar cuando los steps no
+        caben en el contenedor. Mantenemos el scroll nativo (rueda / swipe)
+        y ocultamos la scrollbar visual.
+      */}
+      <Box
+        sx={
+          isHorizontal
+            ? {
+                display: "flex",
+                alignItems: "center",
+                width: "100%",
+                gap: 0.5,
+              }
+            : undefined
+        }
+      >
+        {isHorizontal && (
+          <IconButton
+            aria-label="Anterior"
+            size="small"
+            onClick={() => scrollBy(-160)}
+            disabled={!canScrollLeft}
+            sx={{
+              flex: "0 0 auto",
+              // Reservamos el slot siempre que haya overflow en algún lado,
+              // así el área scroll tiene un ancho estable (no saltan los
+              // steps cuando aparece/desaparece la flecha).
+              visibility: showArrows ? "visible" : "hidden",
+            }}
+          >
+            <ChevronLeftIcon fontSize="small" />
+          </IconButton>
+        )}
+      <Box
+        ref={scrollRef}
+        sx={
+          isHorizontal
+            ? {
+                flex: "1 1 auto",
+                minWidth: 0,
+                overflowX: "auto",
+                scrollBehavior: "smooth",
+                WebkitOverflowScrolling: "touch",
+                // Ocultamos la scrollbar (la navegación es con flechas)
+                scrollbarWidth: "none",
+                "&::-webkit-scrollbar": { display: "none" },
+              }
+            : undefined
+        }
+      >
+        <MuiStepper
+          activeStep={currentStep}
+          orientation={orientation}
+          alternativeLabel={alternateLabel}
+          sx={
+            isHorizontal
+              ? {
+                  display: "inline-flex",
+                  flexWrap: "nowrap",
+                  minWidth: "100%",
+                  width: "max-content",
+                  // Evita que los steps se compriman al punto de solaparse.
+                  "& .MuiStep-root": { flex: "0 0 auto", minWidth: 120 },
+                }
+              : undefined
+          }
+        >
         {children.map((child, idx) => {
           const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;
           return (
@@ -62,7 +181,23 @@ export const Stepper: React.FC<MyStepperProps> = ({
             </MuiStep>
           );
         })}
-      </MuiStepper>
+        </MuiStepper>
+      </Box>
+        {isHorizontal && (
+          <IconButton
+            aria-label="Siguiente"
+            size="small"
+            onClick={() => scrollBy(160)}
+            disabled={!canScrollRight}
+            sx={{
+              flex: "0 0 auto",
+              visibility: showArrows ? "visible" : "hidden",
+            }}
+          >
+            <ChevronRightIcon fontSize="small" />
+          </IconButton>
+        )}
+      </Box>
       <Box mt={2}>
         {children.map((child, idx) =>
           idx === currentStep ? <Box key={idx}>{child.props.children}</Box> : null

package/src/components/Switch/Switch.definitions.ts

@@ -0,0 +1,134 @@
+// Switch.definitions.ts — código fuente para la pestaña Docs de Storybook.
+
+export const BasicSwitchDefinition = `
+import React, { useState } from 'react';
+import { Switch } from './Switch';
+import { Box, Typography } from '@mui/material';
+
+export const BasicSwitchExample = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <Box sx={{ width: 280 }}>
+      <Switch checked={checked} onChange={setChecked} />
+      <Typography sx={{ mt: 2 }}>Estado: {checked ? 'ON' : 'OFF'}</Typography>
+    </Box>
+  );
+};
+`;
+
+export const SwitchWithLabelDefinition = `
+import React, { useState } from 'react';
+import { Switch } from './Switch';
+import { Box } from '@mui/material';
+
+export const SwitchWithLabelExample = () => {
+  const [checked, setChecked] = useState(true);
+  return (
+    <Box sx={{ width: 280 }}>
+      <Switch
+        label="Notificaciones por email"
+        checked={checked}
+        onChange={setChecked}
+      />
+    </Box>
+  );
+};
+`;
+
+export const BorderedSwitchDefinition = `
+import React, { useState } from 'react';
+import { Switch } from './Switch';
+import { Box } from '@mui/material';
+
+export const BorderedSwitchExample = () => {
+  const [checked, setChecked] = useState(true);
+  return (
+    <Box sx={{ width: 360 }}>
+      <Switch
+        label="Recibir reportes diarios"
+        checked={checked}
+        onChange={setChecked}
+        bordered
+      />
+    </Box>
+  );
+};
+`;
+
+export const SwitchSizesDefinition = `
+import React, { useState } from 'react';
+import { Switch } from './Switch';
+import { Box } from '@mui/material';
+
+export const SwitchSizesExample = () => {
+  const [a, setA] = useState(false);
+  const [b, setB] = useState(true);
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>
+      <Switch label="Pequeño" size="small" checked={a} onChange={setA} />
+      <Switch label="Mediano (default)" size="medium" checked={b} onChange={setB} />
+    </Box>
+  );
+};
+`;
+
+export const SwitchWithErrorDefinition = `
+import React, { useState } from 'react';
+import { Switch } from './Switch';
+import { Box } from '@mui/material';
+
+export const SwitchWithErrorExample = () => {
+  const [checked, setChecked] = useState(false);
+  const hasError = !checked;
+  return (
+    <Box sx={{ width: 320 }}>
+      <Switch
+        label="Aceptar términos y condiciones"
+        checked={checked}
+        onChange={setChecked}
+        error={hasError}
+        helperText={hasError ? 'Debes aceptar los términos para continuar' : ''}
+      />
+    </Box>
+  );
+};
+`;
+
+export const DisabledSwitchDefinition = `
+import React from 'react';
+import { Switch } from './Switch';
+import { Box } from '@mui/material';
+
+export const DisabledSwitchExample = () => (
+  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>
+    <Switch label="Off bloqueado" checked={false} onChange={() => {}} disabled />
+    <Switch label="On bloqueado" checked={true} onChange={() => {}} disabled />
+  </Box>
+);
+`;
+
+export const RHFSwitchDefinition = `
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { Switch } from './Switch';
+import { Box, Button, Typography } from '@mui/material';
+
+export const RHFSwitchExample = () => {
+  const { control, handleSubmit, watch } = useForm({
+    defaultValues: { darkMode: false },
+  });
+  const value = watch('darkMode');
+  return (
+    <Box sx={{ width: 320 }} component="form" onSubmit={handleSubmit(console.log)}>
+      <Switch
+        label="Modo oscuro"
+        name="darkMode"
+        control={control}
+        bordered
+      />
+      <Typography sx={{ mt: 2 }}>Valor en el form: {String(value)}</Typography>
+      <Button type="submit" sx={{ mt: 1 }}>Enviar</Button>
+    </Box>
+  );
+};
+`;

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,213 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { Box, Button, Typography } from '@mui/material';
+import { useForm } from 'react-hook-form';
+
+import { Switch } from './Switch';
+import {
+  BasicSwitchDefinition,
+  SwitchWithLabelDefinition,
+  BorderedSwitchDefinition,
+  SwitchSizesDefinition,
+  SwitchWithErrorDefinition,
+  DisabledSwitchDefinition,
+  RHFSwitchDefinition,
+} from './Switch.definitions';
+
+// =============================================================================
+// Meta
+// =============================================================================
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Un toggle/switch basado en MUI `Switch`. Soporta modo controlado (`checked` + `onChange`) ' +
+          'y modo react-hook-form (`name` + `control`). Mantiene compatibilidad visual con el legacy ' +
+          '`FormToggleInput` mediante la prop `bordered` (label a la izquierda, switch a la derecha).',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: 'text', description: 'Texto al lado del switch. Si está ausente, se renderiza solo el switch.' },
+    labelPlacement: {
+      control: 'radio',
+      options: ['start', 'end', 'top', 'bottom'],
+      description: 'Posición del label respecto al switch. Default: `end`.',
+    },
+    size: { control: 'radio', options: ['small', 'medium'], description: 'Tamaño del switch. Default: `medium`.' },
+    bordered: { control: 'boolean', description: 'Renderizar contenedor con borde estilo "form field". Default: false.' },
+    borderRadius: { control: { type: 'number' }, description: 'Border radius del contenedor cuando `bordered`. Default: 10.' },
+    disabled: { control: 'boolean', description: 'Deshabilitar el switch.' },
+    error: { control: 'boolean', description: 'Estado de error visual.' },
+    helperText: { control: 'text', description: 'Texto auxiliar debajo del switch.' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+// =============================================================================
+// Stories
+// =============================================================================
+
+export const BasicSwitch: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Box sx={{ width: 280 }}>
+        <Switch checked={checked} onChange={setChecked} />
+        <Typography sx={{ mt: 2 }}>Estado: {checked ? 'ON' : 'OFF'}</Typography>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Uso mínimo, sin label. Equivalente al legacy `ToggleInputReport`.' },
+      source: { code: BasicSwitchDefinition.trim() },
+    },
+  },
+};
+
+export const SwitchWithLabel: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true);
+    return (
+      <Box sx={{ width: 280 }}>
+        <Switch
+          label="Notificaciones por email"
+          checked={checked}
+          onChange={setChecked}
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Switch con label a la derecha (default `labelPlacement="end"`).' },
+      source: { code: SwitchWithLabelDefinition.trim() },
+    },
+  },
+};
+
+export const BorderedSwitch: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true);
+    return (
+      <Box sx={{ width: 360 }}>
+        <Switch
+          label="Recibir reportes diarios"
+          checked={checked}
+          onChange={setChecked}
+          bordered
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Variante con `bordered`: contenedor con borde, label a la izquierda y switch al borde opuesto. ' +
+          'Replica el estilo del legacy `FormToggleInput`.',
+      },
+      source: { code: BorderedSwitchDefinition.trim() },
+    },
+  },
+};
+
+export const SwitchSizes: Story = {
+  render: () => {
+    const [a, setA] = useState(false);
+    const [b, setB] = useState(true);
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>
+        <Switch label="Pequeño" size="small" checked={a} onChange={setA} />
+        <Switch label="Mediano (default)" size="medium" checked={b} onChange={setB} />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Tamaños disponibles: `small` y `medium` (default).' },
+      source: { code: SwitchSizesDefinition.trim() },
+    },
+  },
+};
+
+export const SwitchWithError: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const hasError = !checked;
+    return (
+      <Box sx={{ width: 320 }}>
+        <Switch
+          label="Aceptar términos y condiciones"
+          checked={checked}
+          onChange={setChecked}
+          error={hasError}
+          helperText={hasError ? 'Debes aceptar los términos para continuar' : ''}
+        />
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Estado de error con `error` + `helperText`.' },
+      source: { code: SwitchWithErrorDefinition.trim() },
+    },
+  },
+};
+
+export const DisabledSwitch: Story = {
+  render: () => (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>
+      <Switch label="Off bloqueado" checked={false} onChange={() => {}} disabled />
+      <Switch label="On bloqueado" checked={true} onChange={() => {}} disabled />
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      description: { story: 'Switch deshabilitado en ambos estados.' },
+      source: { code: DisabledSwitchDefinition.trim() },
+    },
+  },
+};
+
+export const RHFSwitch: Story = {
+  render: () => {
+    const { control, handleSubmit, watch } = useForm({
+      defaultValues: { darkMode: false },
+    });
+    const value = watch('darkMode');
+    return (
+      <Box
+        sx={{ width: 320 }}
+        component="form"
+        onSubmit={handleSubmit((data) => console.log(data))}
+      >
+        <Switch
+          label="Modo oscuro"
+          name="darkMode"
+          control={control}
+          bordered
+        />
+        <Typography sx={{ mt: 2 }}>Valor en el form: {String(value)}</Typography>
+        <Button type="submit" sx={{ mt: 1 }}>Enviar</Button>
+      </Box>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Modo react-hook-form con `name` + `control`. El valor `true`/`false` viaja directo al form state.',
+      },
+      source: { code: RHFSwitchDefinition.trim() },
+    },
+  },
+};

package/src/components/Switch/Switch.sx.ts

@@ -0,0 +1,81 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+
+export interface BuildSwitchSxOptions {
+  bordered: boolean;
+  borderRadius: number | string;
+  hasLabel: boolean;
+  error: boolean;
+}
+
+const toRadius = (borderRadius: number | string) =>
+  typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
+
+/**
+ * Transición compartida (matchea el InputGroup y el RadioGroup).
+ */
+const FOCUS_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';
+
+/**
+ * Builder de sx para Switch. Reproduce el estilo del antiguo
+ * `FormToggleInput` legacy cuando `bordered=true`: contenedor con borde,
+ * label a la izquierda y switch a la derecha (vía justify-content: space-between).
+ *
+ * Cuando `bordered=true`, el contenedor gana:
+ * - `:focus-within` → borde + shadow primario (mismo patrón que `InputGroup`).
+ * - `error=true` → borde + shadow de error (palette.error.main).
+ *
+ * El shadow es de 1px, así que no hay shift de layout — sólo se intensifica
+ * visualmente el borde sin empujar nada alrededor.
+ *
+ * Si `bordered=false`, sólo aplica un reset de margin del helper text.
+ */
+export const buildSwitchSx = ({
+  bordered,
+  borderRadius,
+  hasLabel,
+  error,
+}: BuildSwitchSxOptions): SxProps<Theme> => {
+  const radius = toRadius(borderRadius);
+
+  if (!bordered) {
+    return {
+      '& .MuiFormHelperText-root': { marginLeft: 0 },
+    };
+  }
+
+  return (theme) => ({
+    '& .MuiFormControlLabel-root': {
+      marginLeft: 0,
+      marginRight: 0,
+      paddingX: 1.5,
+      paddingY: 1.25,
+      border: `1px solid ${
+        error ? theme.palette.error.main : theme.palette.divider
+      }`,
+      borderRadius: radius,
+      transition: FOCUS_TRANSITION,
+      ...(error && {
+        boxShadow: `0 0 0 1px ${theme.palette.error.main}`,
+      }),
+      // Focus del usuario sobre el switch interno.
+      '&:focus-within': {
+        borderColor: error
+          ? theme.palette.error.main
+          : theme.palette.primary.main,
+        boxShadow: `0 0 0 1px ${
+          error ? theme.palette.error.main : theme.palette.primary.main
+        }`,
+      },
+      // Si hay label, separar el switch al borde opuesto.
+      ...(hasLabel && {
+        width: '100%',
+        justifyContent: 'space-between',
+      }),
+    },
+    '& .MuiFormHelperText-root': {
+      marginLeft: 0,
+    },
+  });
+};