@rpg-engine/long-bow 0.5.74 → 0.5.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.74",
+  "version": "0.5.76",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -82,7 +82,6 @@
     "uuid": "^8.3.2"
   },
   "dependencies": {
-    "@capacitor/core": "^4.6.3",
     "@rollup/plugin-image": "^2.1.1",
     "@rpg-engine/shared": "^0.9.19",
     "dayjs": "^1.11.2",

package/src/components/Dropdown.tsx

@@ -12,12 +12,14 @@ export interface IDropdownProps {
   options: IOptionsProps[];
   width?: string;
   onChange: (value: string) => void;
+  opensUp?: boolean; // Add a new prop to control the dropdown direction
 }
 
 export const Dropdown: React.FC<IDropdownProps> = ({
   options,
   width,
   onChange,
+  opensUp = false, // Default value is false
 }) => {
   const dropdownId = uuidv4();
 
@@ -36,10 +38,6 @@ export const Dropdown: React.FC<IDropdownProps> = ({
         change = options.filter(o => o.value === selectedValue).length < 1;
       }
 
-      /**
-       * make a selection if there is no selected value already present
-       * or if there is a selected value but its not in new options
-       */
       if (change) {
         setSelectedValue(firstOption.value);
         setSelectedOption(firstOption.option);
@@ -63,7 +61,11 @@ export const Dropdown: React.FC<IDropdownProps> = ({
         <label>▼</label> {selectedOption}
       </DropdownSelect>
 
-      <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
+      <DropdownOptions
+        className="rpgui-dropdown-imp"
+        opened={opened}
+        opensUp={opensUp}
+      >
         {options.map(option => {
           return (
             <li
@@ -100,6 +102,7 @@ const DropdownSelect = styled.p`
 
 const DropdownOptions = styled.ul<{
   opened: boolean;
+  opensUp: boolean; // Add a new prop to the styled component
 }>`
   position: absolute;
   width: 100%;
@@ -107,7 +110,12 @@ const DropdownOptions = styled.ul<{
   overflow-y: auto;
   display: ${props => (props.opened ? 'block' : 'none')};
   box-sizing: border-box;
-
+  bottom: ${props =>
+    props.opensUp ? '100%' : 'auto'}; // Adjust the position based on the prop
+  top: ${props =>
+    props.opensUp ? 'auto' : '100%'}; // Adjust the position based on the prop
+  margin: 0;
+  padding: 0;
   @media (max-width: 768px) {
     padding: 8px 0;
   }

package/src/components/ImageCarousel/SimpleImageCarousel.tsx

@@ -1,74 +1,58 @@
-import { Capacitor } from '@capacitor/core';
 import React, { useEffect, useRef, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import SelectArrow from '../Arrow/SelectArrow';
 
 export interface ISimpleImageCarousel {
-  basePath: string;
-  imagesSrc: string[];
+  images: string[];
   styles?: React.CSSProperties;
   autoCycle?: boolean;
   autoCycleDelay?: number;
   stopAutoCyclingOnInteraction?: boolean;
 }
 
-const getTransformedBasePath = (basePath: string): string => {
-  if (Capacitor.isNativePlatform()) {
-    return Capacitor.convertFileSrc(basePath);
-  }
-  return basePath;
-};
-
-export const SimpleImageCarousel = ({
-  basePath,
-  imagesSrc,
+export const SimpleImageCarousel: React.FC<ISimpleImageCarousel> = ({
+  images,
   styles,
   autoCycle = false,
   autoCycleDelay = 3000,
   stopAutoCyclingOnInteraction = false,
-}: ISimpleImageCarousel) => {
+}) => {
   const [currentImage, setCurrentImage] = useState(0);
-  const isInteracted = useRef<boolean>(false);
+  const autoCycleId = useRef<NodeJS.Timeout | null>(null);
 
-  useEffect(() => {
-    let timer: NodeJS.Timeout | null = null;
+  const handleLeftClick = () => {
+    setCurrentImage(
+      prevImage => (prevImage - 1 + images?.length) % images?.length
+    );
+    if (stopAutoCyclingOnInteraction && autoCycleId.current) {
+      clearInterval(autoCycleId.current);
+      autoCycleId.current = null;
+    }
+  };
 
-    if (autoCycle && !isInteracted.current) {
-      timer = setInterval(() => {
-        if (stopAutoCyclingOnInteraction && isInteracted.current) {
-          clearInterval(timer!);
-          return;
-        }
+  const handleRightClick = () => {
+    setCurrentImage(prevImage => (prevImage + 1) % images?.length);
+    if (stopAutoCyclingOnInteraction && autoCycleId.current) {
+      clearInterval(autoCycleId.current);
+      autoCycleId.current = null;
+    }
+  };
 
-        handleRightClick(true);
+  useEffect(() => {
+    if (autoCycle) {
+      autoCycleId.current = setInterval(() => {
+        setCurrentImage(prevImage => (prevImage + 1) % images?.length);
       }, autoCycleDelay);
     }
 
     return () => {
-      if (timer) {
-        clearInterval(timer);
+      if (autoCycleId.current) {
+        clearInterval(autoCycleId.current);
       }
     };
-  }, [autoCycle, autoCycleDelay]);
+  }, [autoCycle, autoCycleDelay, images?.length]);
 
-  const handleLeftClick = () => {
-    isInteracted.current = true;
-    setCurrentImage(oldImage =>
-      oldImage === 0 ? imagesSrc.length - 1 : oldImage - 1
-    );
-  };
-
-  const handleRightClick = (isAutomatedClick: boolean = false) => {
-    if (!isAutomatedClick) {
-      isInteracted.current = true;
-    }
-
-    setCurrentImage(oldImage =>
-      oldImage === imagesSrc.length - 1 ? 0 : oldImage + 1
-    );
-  };
-
-  const hasMoreThanOneImage = imagesSrc.length > 1;
+  const hasMoreThanOneImage = images?.length > 1;
 
   return (
     <ImageContainer style={styles}>
@@ -81,8 +65,8 @@ export const SimpleImageCarousel = ({
       <Carousel>
         <FadeInCarouselImg
           key={currentImage}
-          src={`${getTransformedBasePath(basePath)}/${imagesSrc[currentImage]}`}
-          alt={imagesSrc[currentImage]}
+          src={images?.[currentImage]}
+          alt={`Image ${currentImage}`}
         />
       </Carousel>
     </ImageContainer>
@@ -97,8 +81,8 @@ const ImageContainer = styled.div`
   height: 100%;
   margin-right: 0.5rem;
   max-width: 400px;
-  width: 400px;
   position: relative;
+  width: 400px;
 `;
 
 const CustomLeftArrow = styled(SelectArrow)`

package/src/stories/Dropdown.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
+import styled from 'styled-components';
 import { RPGUIRoot } from '../../src';
 import {
   Dropdown,
@@ -14,12 +15,18 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<IDropdownProps> = (args) => (
+const Template: Story<IDropdownProps> = args => (
   <RPGUIRoot>
-    <Dropdown {...args} />
+    <PushUp>
+      <Dropdown {...args} />
+    </PushUp>
   </RPGUIRoot>
 );
 
+const PushUp = styled.div`
+  margin-top: 200px;
+`;
+
 export const Default = Template.bind({});
 
 const options: IOptionsProps[] = [
@@ -43,4 +50,5 @@ const options: IOptionsProps[] = [
 Default.args = {
   options,
   width: '100%',
+  opensUp: false,
 };

package/src/stories/SimpleImageCarousel.stories.tsx

@@ -7,6 +7,8 @@ import {
 } from '../components/ImageCarousel/SimpleImageCarousel';
 
 import styled from 'styled-components';
+import image1 from '../assets/images/backpack.png';
+import image2 from '../assets/images/depot.png';
 import { RPGUIRoot } from '../components/RPGUI/RPGUIRoot';
 
 const meta: Meta = {
@@ -37,8 +39,7 @@ const CenteredContainer = styled.div`
 export const SimpleImageCarouselStory = Template.bind({});
 
 SimpleImageCarouselStory.args = {
-  imagesSrc: ['./images/backpack.png', './images/depot.png'],
-  basePath: 'http://localhost:6006',
+  images: [image1, image2],
   autoCycle: true,
   stopAutoCyclingOnInteraction: true,
 };