@rpg-engine/long-bow 0.8.14 → 0.8.15

package/dist/stories/UI/dropdownsAndSelectors/ItemPropertyColorSelector.stories.d.ts

@@ -1,3 +1,6 @@
 declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
 export default _default;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const WithCostWarning: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const WithCustomCurrency: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const Closed: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;

package/package.json

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

package/src/components/ConfirmModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import ModalPortal from './Abstractions/ModalPortal';
 import { Button, ButtonTypes } from './Button';
@@ -7,34 +7,46 @@ import { DraggableContainer } from './DraggableContainer';
 export interface IConfirmModalProps {
   onConfirm: () => void;
   onClose: () => void;
-  message?: string;
+  message?: string | ReactNode;
 }
 
 export const ConfirmModal: React.FC<IConfirmModalProps> = ({
   onConfirm,
   onClose,
-  message,
+  message = 'Are you sure?',
 }) => {
+  const handleConfirm = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onConfirm();
+  };
+
+  const handleClose = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClose();
+  };
+
   return (
     <ModalPortal>
       <Background />
-      <Container onPointerDown={onClose}>
+      <Container onClick={handleClose}>
         <DraggableContainer width="auto" dragDisabled>
-          <Wrapper onPointerDown={e => e.stopPropagation()}>
-            <p>{message ?? 'Are you sure?'}</p>
+          <Wrapper onClick={e => e.stopPropagation()}>
+            {typeof message === 'string' ? <p>{message}</p> : message}
 
             <ButtonsWrapper>
               <div className="cancel-button">
                 <Button
                   buttonType={ButtonTypes.RPGUIButton}
-                  onPointerDown={onClose}
+                  onClick={handleClose}
                 >
                   No
                 </Button>
               </div>
               <Button
                 buttonType={ButtonTypes.RPGUIButton}
-                onPointerDown={onConfirm}
+                onClick={handleConfirm}
               >
                 Yes
               </Button>

package/src/components/Item/Inventory/ItemPropertyColorSelector.tsx

@@ -1,75 +1,162 @@
 import React, { useEffect, useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
 import { Button, ButtonTypes } from '../../Button';
+import { ConfirmModal } from '../../ConfirmModal';
 import { DraggableContainer } from '../../DraggableContainer';
 import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';
 
-interface Props {
+interface IColorSelectorProps {
   selectedColor: string;
   isOpen: boolean;
   onClose: () => void;
   onConfirm: (color: string) => void;
   onChange: (color: string) => void;
+  costWarning?: {
+    cost: number;
+    currency?: string;
+  };
 }
 
-export const ColorSelector: React.FC<Props> = ({
+export const ColorSelector: React.FC<IColorSelectorProps> = ({
   selectedColor,
   isOpen,
   onClose,
   onConfirm,
   onChange,
+  costWarning,
 }) => {
   const [currentColor, setCurrentColor] = useState(selectedColor);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
 
   useEffect(() => {
     if (isOpen) setCurrentColor(selectedColor);
   }, [isOpen, selectedColor]);
 
-  const handleConfirm = () => {
+  const handleConfirm = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (costWarning) {
+      setShowConfirmModal(true);
+    } else {
+      onConfirm(currentColor);
+      onClose();
+    }
+  };
+
+  const handleConfirmCost = () => {
     onConfirm(currentColor);
+    setShowConfirmModal(false);
     onClose();
   };
 
+  const handleClose = () => {
+    setShowConfirmModal(false);
+  };
+
+  const renderConfirmMessage = () => (
+    <ConfirmContent>
+      <p>
+        Cost:
+        <CostDisplay>
+          {costWarning?.cost.toLocaleString()}
+          {costWarning?.currency || ' gold'}
+        </CostDisplay>
+      </p>
+      <p>Proceed with color change?</p>
+    </ConfirmContent>
+  );
+
   if (!isOpen) return null;
 
-  return isOpen ? (
-    <DraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      cancelDrag=".react-colorful"
-      width="20rem"
-      onCloseButton={onClose}
-    >
-      <Container>
-        <Header>Select Color</Header>
-        <HexColorPicker
-          color={currentColor}
-          onChange={color => {
-            setCurrentColor(color);
-            onChange(color);
-          }}
+  return (
+    <>
+      <DraggableContainer
+        type={RPGUIContainerTypes.Framed}
+        cancelDrag=".react-colorful"
+        width="25rem"
+        onCloseButton={onClose}
+      >
+        <Container>
+          <Header>Select Color</Header>
+          <ColorPickerWrapper>
+            <HexColorPicker
+              color={currentColor}
+              onChange={color => {
+                setCurrentColor(color);
+                onChange(color);
+              }}
+            />
+          </ColorPickerWrapper>
+          <ButtonContainer>
+            <Button
+              buttonType={ButtonTypes.RPGUIButton}
+              type="button"
+              onClick={handleConfirm}
+            >
+              Confirm
+            </Button>
+          </ButtonContainer>
+        </Container>
+      </DraggableContainer>
+
+      {showConfirmModal && costWarning && (
+        <ConfirmModal
+          message={renderConfirmMessage()}
+          onConfirm={handleConfirmCost}
+          onClose={handleClose}
         />
-        <Button
-          buttonType={ButtonTypes.RPGUIButton}
-          type="button"
-          onClick={handleConfirm}
-        >
-          Confirm
-        </Button>
-      </Container>
-    </DraggableContainer>
-  ) : null;
+      )}
+    </>
+  );
 };
 
 const Container = styled.div`
-  padding: 2rem;
   text-align: center;
   background: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: center;
+  width: 100%;
+  max-width: 24rem;
+  margin: 0 auto;
 `;
 
 const Header = styled.h2`
-  font-family: 'Press Start 2P', cursive;
   color: white;
   font-size: 1rem;
-  margin-bottom: 1rem;
+  margin: 0;
+  width: 100%;
+  text-align: center;
+`;
+
+const ColorPickerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  .react-colorful {
+    width: 100%;
+    max-width: 200px;
+  }
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+
+const ConfirmContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-align: center;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+`;
+
+const CostDisplay = styled.span`
+  color: ${uiColors.yellow} !important;
 `;

package/src/stories/UI/dropdownsAndSelectors/ItemPropertyColorSelector.stories.tsx

@@ -1,39 +1,36 @@
 import { Meta, Story } from '@storybook/react';
 import React, { useState } from 'react';
-import { ItemPropertySimpleHandler } from '../../../components/Item/Inventory/ItemPropertySimpleHandler';
+import { ColorSelector } from '../../../components/Item/Inventory/ItemPropertyColorSelector';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
 
 export default {
-  title: 'UI/Dropdowns & Selectors/ItemPropertySimpleHandler',
-  component: ItemPropertySimpleHandler,
+  title: 'UI/Dropdowns & Selectors/Item Property Color Selector',
+  component: ColorSelector,
   parameters: {
+    layout: 'centered',
     docs: {
       description: {
         component:
-          'A simple handler for selecting and confirming item properties, including colors.',
+          'A color selector component for items with optional cost warning.',
       },
     },
   },
   argTypes: {
-    isOpen: {
-      control: { type: 'boolean' },
-      description: 'Controls whether the color selector is open.',
-    },
     selectedColor: {
       control: { type: 'color' },
       description: 'Initial selected color.',
     },
-    onClose: {
-      action: 'onClose',
-      description: 'Callback when the selector is closed.',
-    },
-    onConfirm: {
-      action: 'onConfirm',
-      description: 'Callback when a color is confirmed.',
+    isOpen: {
+      control: { type: 'boolean' },
+      description: 'Controls whether the color selector is open.',
     },
-    onChange: {
-      action: 'onChange',
-      description: 'Callback when a color is being selected.',
+    costWarning: {
+      control: 'object',
+      description: 'Optional warning about the cost of changing colors.',
     },
+    onClose: { action: 'closed' },
+    onConfirm: { action: 'confirmed' },
+    onChange: { action: 'changed' },
   },
 } as Meta;
 
@@ -60,13 +57,16 @@ const Template: Story = args => {
   };
 
   return (
-    <ItemPropertySimpleHandler
-      isOpen={isOpen}
-      selectedColor={currentColor}
-      onClose={handleClose}
-      onConfirm={handleConfirm}
-      onChange={handleChange}
-    />
+    <RPGUIRoot>
+      <ColorSelector
+        isOpen={isOpen}
+        selectedColor={currentColor}
+        onClose={handleClose}
+        onConfirm={handleConfirm}
+        onChange={handleChange}
+        {...args}
+      />
+    </RPGUIRoot>
   );
 };
 
@@ -75,3 +75,29 @@ Default.args = {
   isOpen: true,
   selectedColor: '#ff0000',
 };
+
+export const WithCostWarning = Template.bind({});
+WithCostWarning.args = {
+  isOpen: true,
+  selectedColor: '#ff0000',
+  costWarning: {
+    cost: 10000,
+    currency: ' gold',
+  },
+};
+
+export const WithCustomCurrency = Template.bind({});
+WithCustomCurrency.args = {
+  isOpen: true,
+  selectedColor: '#ff0000',
+  costWarning: {
+    cost: 5000,
+    currency: ' crystals',
+  },
+};
+
+export const Closed = Template.bind({});
+Closed.args = {
+  isOpen: false,
+  selectedColor: '#ff0000',
+};