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

package/src/components/Stepper/Stepper.stories.tsx

@@ -1,194 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import Step from "./Step";
-import { Button } from "../Button";
-import { Box } from "@mui/material";
-import Stepper from "./Stepper";
-import { defaultStepper, stepperWithColorDots } from "./Stepper.definition";
-
-const meta: Meta<typeof Stepper> = {
-    title: "Components/Stepper",
-    component: Stepper,
-    tags: ["autodocs"]
-};
-export default meta;
-type Story = StoryObj<typeof Stepper>;
-
-export const DefaultStepper: Story = {
-    render: (args) => {
-        const [currentStep, setCurrentStep] = useState(0);
-        return (
-            <Box>
-                <Stepper currentStep={currentStep}  {...args}>
-                    <Step label="Paso 1">
-                        <div>Contenido del paso 1</div>
-                    </Step>
-                    <Step label="Paso 2">
-                        <div>Contenido del paso 2</div>
-                    </Step>
-                    <Step label="Paso 3">
-                        <div>Contenido del paso 3</div>
-                    </Step>
-                </Stepper>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
-                    sx={{ marginTop: 16 }}
-                >
-                    Atras
-                </Button>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.min(prev + 1, 2))}
-                    sx={{ marginTop: 16 }}
-                >
-                    Siguiente
-                </Button>
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: "Ejemplo básico de timeline"
-            },
-            source: {
-                code: defaultStepper
-            }
-        }
-    },
-    argTypes: {
-        children: { control: false, description: 'Componentes `Step` que definen la estructura de el stepper' },
-        orientation: { description: 'Indica si la posicion de los steps, es horizontal o vertical' },
-        alternateLabel: { description: 'Indica si las etiquetas de los steps, se muestran debajo de los iconos' },
-        currentStep: { description: 'Indica el step actual, el cual se encuentra activo' },
-        sx: { description: 'Estilos personalizados para el stepper' },
-    }
-};
-
-
-export const ScrollableHorizontal: Story = {
-    render: (args) => {
-        const [currentStep, setCurrentStep] = useState(0);
-        const totalSteps = 7;
-        return (
-            <Box>
-                <Box
-                    sx={{
-                        // Simulamos un viewport angosto (mobile) para ver el scroll horizontal
-                        // sin romper el layout del contenedor padre.
-                        width: 360,
-                        maxWidth: "100%",
-                        border: "1px dashed",
-                        borderColor: "divider",
-                        p: 2,
-                    }}
-                >
-                    <Stepper currentStep={currentStep} {...args}>
-                        <Step label="Datos del cupón">
-                            <div>Contenido del paso 1</div>
-                        </Step>
-                        <Step label="Monto">
-                            <div>Contenido del paso 2</div>
-                        </Step>
-                        <Step label="Restricciones">
-                            <div>Contenido del paso 3</div>
-                        </Step>
-                        <Step label="Recursos visuales">
-                            <div>Contenido del paso 4</div>
-                        </Step>
-                        <Step label="Vigencia">
-                            <div>Contenido del paso 5</div>
-                        </Step>
-                        <Step label="Usuarios dirigidos">
-                            <div>Contenido del paso 6</div>
-                        </Step>
-                        <Step label="Confirmación">
-                            <div>Contenido del paso 7</div>
-                        </Step>
-                    </Stepper>
-                </Box>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
-                    sx={{ marginTop: 16, marginRight: 8 }}
-                >
-                    Atras
-                </Button>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.min(prev + 1, totalSteps - 1))}
-                    sx={{ marginTop: 16 }}
-                >
-                    Siguiente
-                </Button>
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story:
-                    "Stepper horizontal dentro de un contenedor angosto (simula mobile). " +
-                    "Cuando los steps no caben, el header muestra scroll horizontal en lugar " +
-                    "de desbordar el contenedor. El cuerpo (contenido del step activo) mantiene " +
-                    "su ancho normal."
-            }
-        }
-    }
-};
-
-
-export const ColorStepper: Story = {
-    render: (args) => {
-        const [currentStep, setCurrentStep] = useState(0);
-        return (
-            <Box>
-                <Stepper currentStep={currentStep} {...args}>
-                    <Step
-                        label="Paso 1"
-                        dotColor="#1976d2"
-                    >
-                        <div>Contenido del paso 1</div>
-                    </Step>
-                    <Step
-                        label="Paso 2"
-                        dotColor="#ffa726"
-                    >
-                        <div>Contenido del paso 2</div>
-                    </Step>
-                    <Step
-                        label="Paso 3"
-                        dotColor="#4caf50"
-                    >
-                        <div>Contenido del paso 3</div>
-                    </Step>
-                </Stepper>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
-                    sx={{ marginTop: 16 }}
-                >
-                    Atras
-                </Button>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.min(prev + 1, 2))}
-                    sx={{ marginTop: 16 }}
-                >
-                    Siguiente
-                </Button>
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: "Stepper con variantes de color en los dots"
-            },
-             source: {
-                code: stepperWithColorDots
-            }
-        }
-    }
-};

package/src/components/Stepper/Stepper.tsx

@@ -1,210 +0,0 @@
-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";
-
-interface MyStepperProps {
-  children: ReactElement<StepProps>[];
-  orientation?: "horizontal" | "vertical";
-  sx?: object;
-  alternateLabel?: boolean;
-  /**
-   * Índice 0-based del paso activo. Si no se provee, el Stepper intenta
-   * leerlo del `WizardContext` (si está dentro de un `<WizardProvider>`).
-   * Si tampoco hay provider, el default es 0.
-   */
-  currentStep?: number;
-}
-
-export const Stepper: React.FC<MyStepperProps> = ({
-  children,
-  orientation = "horizontal",
-  alternateLabel = false,
-
-  sx,
-  currentStep: currentStepProp,
-}) => {
-  // Lee el paso desde el WizardContext cuando el consumer no lo pasa como prop.
-  // Si el Stepper NO está dentro de un WizardProvider, `useWizard()` devuelve
-  // el valor default (currentStep=0, totalSteps=0), así que no rompe nada.
-  const wizard = useWizard();
-  const currentStep =
-    currentStepProp !== undefined
-      ? currentStepProp
-      : wizard.totalSteps > 0
-        ? 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}>
-      {/*
-        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 (
-            <MuiStep key={idx} completed={completed} disabled={disabled} className={className} sx={stepSx}>
-              <MuiStepLabel sx={{
-                pointerEvents: 'none',
-                "& .MuiStepIcon-root": {
-                  color: dotColor,
-                },
-                "& .MuiStepIcon-active": {
-                  color: activeDotColor,
-                },
-                "& .MuiStepIcon-completed": {
-                  color: completedDotColor,
-                },
-                "& .MuiStepIcon-text": {
-                  fill: iconTextColor,
-                },
-              }}
-              >{label}
-              </MuiStepLabel>
-            </MuiStep>
-          );
-        })}
-        </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
-        )}
-      </Box>
-    </Box>
-  );
-};
-
-export default Stepper;

package/src/components/Stepper/index.ts

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

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

@@ -1,134 +0,0 @@
-// 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>
-  );
-};
-`;