@rpg-engine/long-bow 0.5.94 → 0.5.95

package/dist/components/Stepper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface IStep {
+    component: React.ReactNode;
+    id: number;
+}
+interface IStepperProps {
+    steps: IStep[];
+    finalCTAButton?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export declare const Stepper: React.FC<IStepperProps>;
+export {};

package/dist/stories/Stepper.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ArrowBarProps } from '../components/Arrow/SelectArrow';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ArrowBarProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.94",
+  "version": "0.5.95",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Stepper.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../constants/uiColors';
+import SelectArrow from './Arrow/SelectArrow';
+import { Button, ButtonTypes } from './Button';
+
+interface IStep {
+  component: React.ReactNode;
+  id: number;
+}
+
+interface IStepperProps {
+  steps: IStep[];
+  finalCTAButton?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export const Stepper: React.FC<IStepperProps> = ({ steps, finalCTAButton }) => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const currentComponent = steps[currentStep]?.component;
+
+  const totalSteps = steps.length;
+
+  const onStepChange = (step: number) => {
+    setCurrentStep(step);
+  };
+
+  return (
+    <StepperContainer>
+      <StepperTop>
+        {Array.from({ length: totalSteps }, (_, i) => (
+          <ProgressIndicator key={i} isActive={i <= currentStep} />
+        ))}
+      </StepperTop>
+
+      <StepperBody>{currentComponent}</StepperBody>
+
+      <StepperFooter>
+        {currentStep > 0 && (
+          <SelectArrow
+            direction="left"
+            onPointerDown={() => onStepChange(Math.max(0, currentStep - 1))}
+          />
+        )}
+
+        {currentStep < totalSteps - 1 && (
+          <SelectArrow
+            direction="right"
+            onPointerDown={() =>
+              onStepChange(Math.min(totalSteps - 1, currentStep + 1))
+            }
+          />
+        )}
+
+        {currentStep === totalSteps - 1 && finalCTAButton && (
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            onPointerDown={() => finalCTAButton.onClick}
+          >
+            {finalCTAButton.label}
+          </Button>
+        )}
+      </StepperFooter>
+    </StepperContainer>
+  );
+};
+
+const StepperContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%; // Ensure the container takes up full height
+`;
+
+const StepperTop = styled.div`
+  flex: 1; // Small top
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StepperBody = styled.div`
+  flex: 8; // Big content space
+`;
+
+const StepperFooter = styled.div`
+  flex: 1; // Small footer
+
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const ProgressIndicator = styled.div<{ isActive: boolean }>`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: ${({ isActive }) =>
+    isActive ? uiColors.orange : uiColors.lightGray};
+  margin: 0 5px;
+  transition: background-color 0.3s;
+
+  opacity: ${({ isActive }) => (isActive ? 1 : 0.25)};
+
+  border: 1px solid ${uiColors.raisinBlack};
+`;

package/src/stories/Stepper.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import { ArrowBarProps } from '../components/Arrow/SelectArrow';
+import { Stepper } from '../components/Stepper';
+
+const meta: Meta = {
+  title: 'Stepper',
+  component: Stepper,
+};
+
+export default meta;
+
+const Template: Story<ArrowBarProps> = args => (
+  <RPGUIRoot>
+    <Stepper
+      steps={[
+        {
+          component: <div>Step 1</div>,
+          id: 0,
+        },
+        {
+          component: <div>Step 2</div>,
+          id: 1,
+        },
+        {
+          component: <div>Step 3</div>,
+          id: 2,
+        },
+      ]}
+      finalCTAButton={{
+        label: 'Submit',
+        onClick: () => {
+          console.log('Submitting your data');
+        },
+      }}
+    ></Stepper>
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  direction: 'left',
+  onPointerDown: () => {
+    console.log('clicked');
+  },
+};