@rpg-engine/long-bow 0.6.7 → 0.6.9

package/dist/stories/TutorialStepper.stories.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -16,7 +16,7 @@
     "src"
   ],
   "engines": {
-    "node": ">=10"
+    "node": "^16.0.0"
   },
   "scripts": {
     "dev": "yarn install && start-storybook -p 6006",

package/src/components/Stepper.tsx

@@ -7,6 +7,8 @@ import { Button, ButtonTypes } from './Button';
 interface IStep {
   component: React.ReactNode;
   id: number;
+  validate?: () => boolean | Promise<boolean>;
+  errorMessage?: string;
 }
 
 interface IStepperProps {
@@ -15,19 +17,83 @@ interface IStepperProps {
     label: string;
     onClick: (() => void) | (() => Promise<void>) | ((e: any) => Promise<void>);
   };
+  onError?: (message: string) => void;
+  useSideArrows?: boolean; // New prop to control arrow position
 }
 
-export const Stepper: React.FC<IStepperProps> = ({ steps, finalCTAButton }) => {
+export const Stepper: React.FC<IStepperProps> = ({
+  steps,
+  finalCTAButton,
+  onError,
+  useSideArrows = false, // Default to false for backwards compatibility
+}) => {
   const [currentStep, setCurrentStep] = useState(0);
 
   const currentComponent = steps[currentStep]?.component;
 
   const totalSteps = steps.length;
 
-  const onStepChange = (step: number) => {
+  const onStepChange = async (step: number) => {
+    if (steps[currentStep]?.validate) {
+      try {
+        const isValid = await steps[currentStep].validate!();
+        if (!isValid) {
+          if (onError) {
+            onError(
+              steps[currentStep].errorMessage ||
+                `Validation failed on step ${currentStep + 1}`
+            );
+          }
+          return;
+        }
+      } catch (error) {
+        if (onError) {
+          onError(
+            `An error occurred during validation on step ${currentStep + 1}`
+          );
+        }
+        return;
+      }
+    }
     setCurrentStep(step);
   };
 
+  const renderArrows = () => {
+    const leftArrow = (
+      <SelectArrow
+        direction="left"
+        onPointerDown={() => onStepChange(Math.max(0, currentStep - 1))}
+      />
+    );
+
+    const rightArrow = (
+      <SelectArrow
+        direction="right"
+        onPointerDown={() =>
+          onStepChange(Math.min(totalSteps - 1, currentStep + 1))
+        }
+      />
+    );
+
+    if (useSideArrows) {
+      return (
+        <>
+          {currentStep > 0 && <ArrowContainer left>{leftArrow}</ArrowContainer>}
+          {currentStep < totalSteps - 1 && (
+            <ArrowContainer right>{rightArrow}</ArrowContainer>
+          )}
+        </>
+      );
+    } else {
+      return (
+        <>
+          {currentStep > 0 && leftArrow}
+          {currentStep < totalSteps - 1 && rightArrow}
+        </>
+      );
+    }
+  };
+
   return (
     <StepperContainer className="stepper-container">
       <StepperTop>
@@ -40,29 +106,17 @@ export const Stepper: React.FC<IStepperProps> = ({ steps, finalCTAButton }) => {
         ))}
       </StepperTop>
 
-      <StepperBody>{currentComponent}</StepperBody>
+      <StepperBodyContainer>
+        {useSideArrows && renderArrows()}
+        <StepperBody>{currentComponent}</StepperBody>
+      </StepperBodyContainer>
 
       <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))
-            }
-          />
-        )}
-
+        {!useSideArrows && renderArrows()}
         {currentStep === totalSteps - 1 && finalCTAButton && (
           <Button
             buttonType={ButtonTypes.RPGUIButton}
-            onPointerDown={finalCTAButton.onClick}
+            onClick={finalCTAButton.onClick}
           >
             {finalCTAButton.label}
           </Button>
@@ -75,36 +129,48 @@ export const Stepper: React.FC<IStepperProps> = ({ steps, finalCTAButton }) => {
 const StepperContainer = styled.div`
   display: flex;
   flex-direction: column;
-  height: 100%; // Ensure the container takes up full height
+  height: 100%;
 `;
 
 const StepperTop = styled.div`
-  flex: 1; // Small top
-
+  flex: 1;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-
   margin-bottom: 1rem;
 `;
 
+const StepperBodyContainer = styled.div`
+  flex: 8;
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+
 const StepperBody = styled.div`
-  flex: 8; // Big content space
+  flex: 1;
+`;
+
+const ArrowContainer = styled.div<{ left?: boolean; right?: boolean }>`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  ${props => props.left && 'left: -30px;'}
+  ${props => props.right && 'right: -30px;'}
 `;
 
 const StepperFooter = styled.div`
   margin-top: 1rem;
-  flex: 1; // Small footer
-
+  flex: 1;
   display: flex;
   justify-content: flex-end;
+  align-items: center;
 `;
 
 const ProgressIndicator = styled.div<{ isActive: boolean }>`
   width: 20px;
   height: 20px;
-  border-radius: 50%;
   background-color: ${({ isActive }) =>
     isActive ? uiColors.orange : uiColors.lightGray};
   margin: 0 5px;
@@ -112,4 +178,13 @@ const ProgressIndicator = styled.div<{ isActive: boolean }>`
   opacity: ${({ isActive }) => (isActive ? 1 : 0.25)};
   border: 1px solid ${uiColors.raisinBlack};
   cursor: pointer;
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  /* Create a diamond shape */
+  box-shadow: ${({ isActive }) =>
+    isActive
+      ? '0 0 0 1px black, 1px 1px 0 1px black, 2px 2px 0 1px black, -1px -1px 0 1px black'
+      : '0 0 0 1px black, 1px 1px 0 1px gray, 2px 2px 0 1px gray, -1px -1px 0 1px gray'};
+  /* Add pixel art border effect */
+  border-radius: 0;
+  /* Remove border-radius to make it square */
 `;

package/src/components/Tutorial/TutorialStepper.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Stepper } from '../Stepper';
+import { DynamicText } from '../typography/DynamicText';
+
+export interface ITutorialLesson {
+  title: string;
+  body?: React.ReactNode | string;
+  text?: string;
+  image: string;
+}
+
+export interface ITutorialStepperProps {
+  lessons: ITutorialLesson[];
+  onLessonFinish: () => void;
+}
+
+export const TutorialStepper = ({
+  lessons,
+  onLessonFinish,
+}: ITutorialStepperProps) => {
+  const generateLessons = () => {
+    return lessons.map((lesson, index) => ({
+      component: (
+        <div>
+          <h1>{lesson.title}</h1>
+          {lesson.image && (
+            <LessonImage>
+              <img src={lesson.image} alt={lesson.title} />
+            </LessonImage>
+          )}
+          {lesson.body && <LessonBody>{lesson.body}</LessonBody>}
+          {lesson.text && <DynamicText text={lesson.text} />}
+        </div>
+      ),
+      id: index,
+    }));
+  };
+
+  return (
+    <Container>
+      <Stepper
+        steps={generateLessons()}
+        finalCTAButton={{
+          label: 'Close',
+          onClick: () => {
+            onLessonFinish();
+          },
+        }}
+        useSideArrows
+      />
+    </Container>
+  );
+};
+
+const LessonBody = styled.div``;
+
+const Container = styled.div`
+  margin: 2rem;
+`;
+
+const LessonImage = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 600px;
+    height: 400px;
+    border-radius: 10px;
+  }
+`;

package/src/index.tsx

@@ -2,8 +2,8 @@ export * from './components/AsyncDropdown';
 export * from './components/Button';
 export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';
-export * from './components/ChatRevamp/ChatRevamp';
 export * from './components/Chatdeprecated/ChatDeprecated';
+export * from './components/ChatRevamp/ChatRevamp';
 export * from './components/CheckButton';
 export * from './components/CheckItem';
 export * from './components/CircularController/CircularController';
@@ -20,6 +20,7 @@ export * from './components/Input';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
+export * from './components/itemSelector/ItemSelector';
 export * from './components/Leaderboard/Leaderboard';
 export * from './components/ListMenu';
 export * from './components/Marketplace/Marketplace';
@@ -34,10 +35,11 @@ export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
 export * from './components/QuestInfo/QuestInfo';
 export * from './components/QuestList';
-export * from './components/RPGUI/RPGUIContainer';
-export * from './components/RPGUI/RPGUIRoot';
 export * from './components/RadioButton';
 export * from './components/RangeSlider';
+export * from './components/RPGUI/RPGUIContainer';
+export * from './components/RPGUI/RPGUIRoot';
+export * from './components/shared/SpriteFromAtlas';
 export * from './components/Shortcuts/Shortcuts';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
@@ -47,7 +49,7 @@ export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
-export * from './components/itemSelector/ItemSelector';
-export * from './components/shared/SpriteFromAtlas';
+export * from './components/Tutorial/TutorialStepper';
 export * from './components/typography/DynamicText';
+
 export { useEventListener } from './hooks/useEventListener';

package/src/stories/TutorialStepper.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import {
+  ITutorialLesson,
+  ITutorialStepperProps,
+  TutorialStepper,
+} from '../components/Tutorial/TutorialStepper';
+
+import tutorialImg1 from '../assets/images/sewer.png';
+import tutorialImg2 from '../assets/images/shortcuts.png';
+
+const meta: Meta = {
+  title: 'Tutorial/TutorialStepper',
+  component: TutorialStepper,
+};
+
+export default meta;
+
+const Template: Story<ITutorialStepperProps> = () => {
+  const lessons: ITutorialLesson[] = [
+    {
+      title: 'Sample Lesson 1',
+      text: 'This is the first lesson',
+      image: tutorialImg1,
+    },
+    {
+      title: 'Sample Lesson 2',
+      text: 'This is the second lesson',
+      image: tutorialImg2,
+    },
+  ];
+
+  return (
+    <RPGUIRoot>
+      <TutorialStepper
+        lessons={lessons}
+        onLessonFinish={() => {
+          console.log('finished lesson!');
+        }}
+      />
+    </RPGUIRoot>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {};