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

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

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

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