feat(WizardSlideshow): component to be used on wizard-related logics …

…to render a step with animation between steps

packages/core/src/components/WizardSlideshow/WizardSlideshow.module.scss

@@ -0,0 +1,6 @@
+.slideshow {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}

packages/core/src/components/WizardSlideshow/WizardSlideshow.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from "react";
+import cx from "classnames";
+import { AnimatePresence } from "framer-motion";
+import { WizardSlideshowProps } from "./WizardSlideshow.types";
+import { getTestId } from "../../tests/test-ids-utils";
+import { ComponentDefaultTestId } from "../../tests/constants";
+import styles from "./WizardSlideshow.module.scss";
+import SlideTransition from "../SlideTransition/SlideTransition";
+
+const WizardSlideshow = forwardRef(
+  (
+    { activeStep, direction, id, className, "data-testid": dataTestId, children }: WizardSlideshowProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <div
+        id={id}
+        className={cx(styles.slideshow, className)}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.WIZARD_SLIDESHOW, id)}
+        ref={ref}
+      >
+        <AnimatePresence initial={false} exitBeforeEnter custom={direction}>
+          <SlideTransition key={activeStep} direction={direction}>
+            {children[activeStep]}
+          </SlideTransition>
+        </AnimatePresence>
+      </div>
+    );
+  }
+);
+
+export default WizardSlideshow;

packages/core/src/components/WizardSlideshow/WizardSlideshow.types.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { VibeComponentProps } from "../../types";
+import { SlideDirection } from "../SlideTransition/SlideTransition.types";
+
+export interface WizardSlideshowProps extends VibeComponentProps {
+  activeStep: number;
+  direction: WizardDirection;
+  children: React.ReactNode[];
+}
+
+export type WizardDirection = SlideDirection;

packages/core/src/components/WizardSlideshow/__tests__/WizardSlideshow.test.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import WizardSlideshow from "../WizardSlideshow";
+
+jest.mock("framer-motion", () => {
+  const actual = jest.requireActual<typeof import("framer-motion")>("framer-motion");
+  return {
+    ...actual,
+    AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>
+  };
+});
+
+describe("WizardSlideshow", () => {
+  const mockChildren = [<div key="1">Step 1</div>, <div key="2">Step 2</div>, <div key="3">Step 3</div>];
+
+  it("should render first step", () => {
+    render(
+      <WizardSlideshow activeStep={0} direction="forward">
+        {mockChildren}
+      </WizardSlideshow>
+    );
+    expect(screen.getByText("Step 1")).toBeInTheDocument();
+  });
+
+  it("should display the correct step based on activeStep prop", () => {
+    const { rerender } = render(
+      <WizardSlideshow activeStep={0} direction="forward">
+        {mockChildren}
+      </WizardSlideshow>
+    );
+    expect(screen.getByText("Step 1")).toBeInTheDocument();
+
+    rerender(
+      <WizardSlideshow activeStep={1} direction="forward">
+        {mockChildren}
+      </WizardSlideshow>
+    );
+    expect(screen.getByText("Step 2")).toBeInTheDocument();
+  });
+});

packages/core/src/tests/constants.ts

@@ -1,6 +1,7 @@
 export enum ComponentDefaultTestId {
   // Don't remove next line
   // plop_marker:default-data-testid-declarations
+  WIZARD_SLIDESHOW = "wizard-slideshow",
   TEXT_AREA = "text-area",
   EDITABLE_TEXT = "editable-text",
   TIPSEEN_MEDIA = "tipseen-media",