@rpg-engine/long-bow 0.8.44 → 0.8.45

package/dist/stories/Character/character/CharacterSkinSelectionModal.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta } from '@storybook/react';
+import { ICharacterProps } from '../../../components/Character/CharacterSelection';
+export interface ICharacterSkinSelectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: (textureKey: string) => void;
+    availableCharacters: ICharacterProps[];
+    atlasJSON: any;
+    atlasIMG: any;
+    initialSelectedSkin?: string;
+}
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICharacterSkinSelectionModalProps>;
+export declare const EmptySelection: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICharacterSkinSelectionModalProps>;

package/package.json

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

package/src/stories/Character/character/CharacterSkinSelectionModal.stories.tsx

@@ -0,0 +1,188 @@
+import { Meta, Story } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { RPGUIRoot } from '../../..';
+import { Button, ButtonTypes } from '../../../components/Button';
+import CharacterSelection, { ICharacterProps } from '../../../components/Character/CharacterSelection';
+import { DraggableContainer } from '../../../components/DraggableContainer';
+import { RPGUIContainerTypes } from '../../../components/RPGUI/RPGUIContainer';
+import atlasJSON from '../../../mocks/atlas/entities/entities.json';
+import atlasIMG from '../../../mocks/atlas/entities/entities.png';
+
+// Create the missing interface
+export interface ICharacterSkinSelectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: (textureKey: string) => void;
+    availableCharacters: ICharacterProps[];
+    atlasJSON: any;
+    atlasIMG: any;
+    initialSelectedSkin?: string;
+}
+
+// Temporary component to replace the missing one
+const CharacterSkinSelectionModal: React.FC<ICharacterSkinSelectionModalProps> = ({
+    isOpen,
+    onClose,
+    onConfirm,
+    availableCharacters,
+    atlasJSON,
+    atlasIMG,
+    initialSelectedSkin = '',
+}) => {
+    const [selectedSkin, setSelectedSkin] = useState<string>(initialSelectedSkin);
+
+    // Determine if we have a valid skin selection to enable/disable confirm button
+    const isConfirmEnabled = Boolean(selectedSkin);
+
+    // Reset selected skin when initial value changes or component mounts
+    useEffect(() => {
+        // Allow for empty strings but not undefined
+        if (initialSelectedSkin !== undefined) {
+            setSelectedSkin(initialSelectedSkin);
+        } else if (availableCharacters.length > 0) {
+            // Default to first skin if none provided
+            setSelectedSkin(availableCharacters[0].textureKey);
+        }
+    }, [initialSelectedSkin, availableCharacters]);
+
+    const handleConfirm = (): void => {
+        if (selectedSkin) {
+            onConfirm(selectedSkin);
+            onClose();
+        }
+    };
+
+    const handleCancel = (): void => {
+        onClose();
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <ModalOverlay>
+            <DraggableContainer
+                type={RPGUIContainerTypes.Framed}
+                width="30rem"
+                onCloseButton={onClose}
+                title="Selecionar Skin"
+            >
+                <ModalContent>
+                    <CharacterSelectionWrapper>
+                        <CharacterSelection
+                            availableCharacters={availableCharacters}
+                            atlasJSON={atlasJSON}
+                            atlasIMG={atlasIMG}
+                            onChange={(textureKey) => setSelectedSkin(textureKey)}
+                        />
+                    </CharacterSelectionWrapper>
+
+                    <ButtonsContainer>
+                        <Button
+                            buttonType={ButtonTypes.RPGUIButton}
+                            onClick={handleCancel}
+                        >
+                            Cancelar
+                        </Button>
+                        <Button
+                            buttonType={ButtonTypes.RPGUIButton}
+                            onClick={handleConfirm}
+                            disabled={!isConfirmEnabled}
+                        >
+                            Confirmar
+                        </Button>
+                    </ButtonsContainer>
+                </ModalContent>
+            </DraggableContainer>
+        </ModalOverlay>
+    );
+};
+
+const meta: Meta = {
+    title: 'Character/Character/Skin Selection Modal',
+    component: CharacterSkinSelectionModal,
+};
+
+export default meta;
+
+const Template: Story<ICharacterSkinSelectionModalProps> = (args: ICharacterSkinSelectionModalProps) => (
+    <RPGUIRoot>
+        <CharacterSkinSelectionModal {...args} />
+    </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+export const EmptySelection = Template.bind({});
+
+// Dados de exemplo para os personagens disponíveis
+const availableCharacters = [
+    {
+        name: 'Woman',
+        textureKey: 'woman-1',
+    },
+    {
+        name: 'Kid',
+        textureKey: 'kid-1',
+    },
+    {
+        name: 'Purple Hair Hero 1',
+        textureKey: 'purple-hair-hero-1',
+    },
+];
+
+Default.args = {
+    isOpen: true,
+    onClose: () => console.log('Modal fechado'),
+    onConfirm: (textureKey: string) => console.log('Skin selecionada:', textureKey),
+    availableCharacters: availableCharacters,
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    initialSelectedSkin: 'woman-1',
+};
+
+EmptySelection.args = {
+    isOpen: true,
+    onClose: () => console.log('Modal fechado'),
+    onConfirm: (textureKey: string) => console.log('Skin selecionada:', textureKey),
+    availableCharacters: availableCharacters,
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    initialSelectedSkin: '',
+};
+
+// Componentes estilizados
+const ModalOverlay = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+`;
+
+const ModalContent = styled.div`
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 300px;
+`;
+
+const CharacterSelectionWrapper = styled.div`
+    width: 100%;
+    margin-bottom: 20px;
+`;
+
+const ButtonsContainer = styled.div`
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 20px;
+    
+    button {
+        margin: 0 10px;
+    }
+`;