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

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

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

@@ -0,0 +1,75 @@
+import React, { ReactElement } from "react";
+import { Stepper as MuiStepper, Step as MuiStep, StepLabel as MuiStepLabel, Box } from "@mui/material";
+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;
+
+  return (
+    <Box sx={sx}>
+      <MuiStepper activeStep={currentStep} orientation={orientation} alternativeLabel={alternateLabel} >
+        {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 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

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