@rpg-engine/long-bow 0.6.76 → 0.6.78

package/dist/stories/QuestInfo.stories.d.ts

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

package/dist/stories/QuestList.stories.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IQuestListProps } from '../components/QuestList';
+import { IQuestListProps } from '../components/Quests/QuestList';
 declare const _default: {
     title: string;
     component: React.FC<IQuestListProps>;

package/package.json

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

package/src/components/DraggableContainer.tsx

@@ -10,6 +10,8 @@ export interface IDraggableContainerProps {
   children: React.ReactNode;
   width?: string;
   height?: string;
+  minWidth?: string;
+  minHeight?: string;
   className?: string;
   type?: RPGUIContainerTypes;
   title?: string;
@@ -32,6 +34,8 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   children,
   width = '50%',
   height,
+  minHeight,
+  minWidth,
   className,
   type = RPGUIContainerTypes.FramedGold,
   onCloseButton,
@@ -109,6 +113,8 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
         ref={draggableRef}
         width={width}
         height={height || 'auto'}
+        minWidth={minWidth}
+        minHeight={minHeight}
         className={`rpgui-container ${type} ${className}`}
         isFullScreen={isFullScreen}
         opacity={opacity}
@@ -139,6 +145,8 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
 interface IContainerProps {
   width: string;
   height: string;
+  minWidth?: string;
+  minHeight?: string;
   isFullScreen?: boolean;
   opacity?: number;
 }
@@ -146,6 +154,8 @@ interface IContainerProps {
 const Container = styled.div<IContainerProps>`
   height: ${props => props.height};
   width: ${({ width }) => width};
+  min-width: ${({ minWidth }) => minWidth || 'auto'};
+  min-height: ${({ minHeight }) => minHeight || 'auto'};
   display: flex;
   flex-wrap: wrap;
   image-rendering: pixelated;
@@ -204,10 +214,10 @@ interface ICustomIconProps {
   width: string;
 }
 
-const Icon = styled.img`
+const Icon = styled.img<ICustomIconProps>`
   color: white;
   z-index: 22;
   font-size: ${uiFonts.size.xsmall};
-  width: ${(props: ICustomIconProps) => props.width};
+  width: ${({ width }) => width};
   margin-right: 0.5rem;
 `;

package/src/components/Multitab/TabsContainer.tsx

@@ -21,6 +21,8 @@ export interface ITabsContainer {
   type: MultitabType;
   styles?: {
     width?: string;
+    minWidth?: string;
+    minHeight?: string;
     height?: string;
     className?: string;
     title?: string;
@@ -67,6 +69,8 @@ export const TabsContainer: React.FC<ITabsContainer> = ({
       cancelDrag=".tabs-container *" // Disable drag on all elements inside .tabs-container
       width={styles?.width} // use optional chaining
       height={styles?.height}
+      minWidth={styles?.minWidth}
+      minHeight={styles?.minHeight}
       className={styles?.className}
       title={styles?.title}
       imgSrc={styles?.imgSrc}

package/src/components/{QuestInfo → Quests/QuestInfo}/QuestInfo.tsx

@@ -1,14 +1,14 @@
 import { IQuest } from '@rpg-engine/shared';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { uiFonts } from '../../constants/uiFonts';
-import SelectArrow from '../Arrow/SelectArrow';
-import { Button, ButtonTypes } from '../Button';
-import { DraggableContainer } from '../DraggableContainer';
-
-import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
-import { Column } from '../shared/Column';
+import { uiColors } from '../../../constants/uiColors';
+import { uiFonts } from '../../../constants/uiFonts';
+import SelectArrow from '../../Arrow/SelectArrow';
+import { Button, ButtonTypes } from '../../Button';
+import { DraggableContainer } from '../../DraggableContainer';
+
+import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';
+import { Column } from '../../shared/Column';
 import thumbnailDefault from './img/default.png';
 
 export interface IQuestsButtonProps {

package/src/components/{QuestList.tsx → Quests/QuestList.tsx}

@@ -6,10 +6,7 @@ import {
 } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
-import { uiColors } from '../constants/uiColors';
-import { Table, TableCell, TableHeader, TableRow } from './Table/Table';
-import { Ellipsis } from './shared/Ellipsis';
-import { SimpleTooltip } from './shared/SimpleTooltip';
+import { uiColors } from '../../constants/uiColors';
 
 export interface IQuestListProps {
   quests?: IQuest[];
@@ -19,66 +16,32 @@ export const QuestList: React.FC<IQuestListProps> = ({ quests }) => {
   return (
     <QuestListContainer>
       {quests && quests.length > 0 ? (
-        <>
-          <Table>
-            <thead>
-              <TableRow>
-                <TableHeader>Status</TableHeader>
-                <TableHeader>Title</TableHeader>
-                <TableHeader>Description</TableHeader>
-                <TableHeader>Objectives</TableHeader>
-                <TableHeader>Rewards</TableHeader>
-              </TableRow>
-            </thead>
-            <tbody>
-              {quests.map((quest, i) => (
-                <TableRow key={i}>
-                  <TableCell style={{ color: getStatusColor(quest.status) }}>
-                    {quest.status ?? 'Unknown'}
-                  </TableCell>
-                  <TableCell>
-                    <SimpleTooltip
-                      content={formatText(quest.title)}
-                      direction="bottom"
-                    >
-                      <Ellipsis maxWidth="300px">
-                        {formatText(quest.title)}
-                      </Ellipsis>
-                    </SimpleTooltip>
-                  </TableCell>
-                  <TableCell>
-                    <SimpleTooltip
-                      content={quest.description}
-                      direction="bottom"
-                    >
-                      <Ellipsis maxWidth="300px">{quest.description}</Ellipsis>
-                    </SimpleTooltip>
-                  </TableCell>
-                  <TableCell>
-                    <SimpleTooltip
-                      content={formatObjectives(quest.objectives)}
-                      direction="bottom"
-                    >
-                      <Ellipsis maxWidth="300px">
-                        {formatObjectives(quest.objectives)}
-                      </Ellipsis>
-                    </SimpleTooltip>
-                  </TableCell>
-                  <TableCell>
-                    <SimpleTooltip
-                      content={formatRewards(quest.rewards)}
-                      direction="bottom"
-                    >
-                      <Ellipsis maxWidth="200px">
-                        {formatRewards(quest.rewards)}
-                      </Ellipsis>
-                    </SimpleTooltip>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </tbody>
-          </Table>
-        </>
+        quests.map((quest, i) => (
+          <QuestCard key={i}>
+            <QuestItem>
+              <Label>Title:</Label>
+              <Value>{formatText(quest.title)}</Value>
+            </QuestItem>
+            <QuestItem>
+              <Label>Status:</Label>
+              <Value style={{ color: getStatusColor(quest.status) }}>
+                {formatStatus(quest.status) ?? 'Unknown'}
+              </Value>
+            </QuestItem>
+            <QuestItem>
+              <Label>Description:</Label>
+              <Value>{quest.description}</Value>
+            </QuestItem>
+            <QuestItem>
+              <Label>Objectives:</Label>
+              <Value>{formatObjectives(quest.objectives)}</Value>
+            </QuestItem>
+            <QuestItem>
+              <Label>Rewards:</Label>
+              <Value>{formatRewards(quest.rewards)}</Value>
+            </QuestItem>
+          </QuestCard>
+        ))
       ) : (
         <NoQuestContainer>
           <p>There are no ongoing quests</p>
@@ -88,7 +51,56 @@ export const QuestList: React.FC<IQuestListProps> = ({ quests }) => {
   );
 };
 
-// Updated helper function to format objectives
+const QuestListContainer = styled.div`
+  margin-top: 20px;
+  margin-bottom: 40px;
+  overflow-y: auto;
+  max-height: 400px;
+  padding: 10px;
+  border-radius: 10px;
+  font-size: 0.7rem;
+`;
+
+const QuestCard = styled.div`
+  background-color: ${uiColors.darkGray};
+  padding: 15px;
+  margin-bottom: 10px;
+  border-radius: 10px;
+  border: 1px solid ${uiColors.gray};
+  display: flex;
+  flex-direction: column;
+`;
+
+const QuestItem = styled.div`
+  display: flex;
+  margin-bottom: 5px;
+  flex-wrap: wrap;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const Label = styled.span`
+  font-weight: bold;
+  color: ${uiColors.yellow} !important;
+  margin-right: 10px;
+`;
+
+const Value = styled.span`
+  flex-grow: 1;
+  color: ${uiColors.white};
+  word-wrap: break-word;
+`;
+
+const NoQuestContainer = styled.div`
+  text-align: center;
+  p {
+    margin-top: 5px;
+    color: ${uiColors.lightGray};
+  }
+`;
+
 const formatObjectives = (
   objectives: (IQuestObjectiveKill | IQuestObjectiveInteraction)[]
 ) => {
@@ -118,7 +130,6 @@ const formatObjectives = (
   }
 };
 
-// Updated helper function to format rewards
 const formatRewards = (rewards: IQuest['rewards']) => {
   try {
     if (!rewards || !Array.isArray(rewards)) return 'No rewards';
@@ -162,6 +173,7 @@ const formatRewards = (rewards: IQuest['rewards']) => {
 };
 
 const formatText = (text: string) => {
+  if (!text) return 'Unknown';
   return text
     .split('-')
     .map(word => word.charAt(0).toUpperCase() + word.slice(1))
@@ -171,32 +183,20 @@ const formatText = (text: string) => {
 const getStatusColor = (status?: QuestStatus) => {
   switch (status) {
     case QuestStatus.Pending:
-      return uiColors.orange; // Orange
+      return uiColors.orange;
     case QuestStatus.InProgress:
-      return uiColors.blue; // Deep Sky Blue
+      return uiColors.blue;
     case QuestStatus.Completed:
-      return uiColors.lightGreen; // Lime Green
+      return uiColors.lightGreen;
     default:
-      return uiColors.white; // Default to white
+      return uiColors.white;
   }
 };
 
-const QuestListContainer = styled.div`
-  margin-top: 20px;
-  margin-bottom: 40px;
-  overflow-y: auto;
-  max-height: 400px;
-  background-color: ${uiColors.darkGray};
-  padding: 20px;
-  border-radius: 10px;
-  border: 1px solid ${uiColors.gray};
-  font-size: 0.7rem;
-`;
-
-const NoQuestContainer = styled.div`
-  text-align: center;
-  p {
-    margin-top: 5px;
-    color: ${uiColors.lightGray};
-  }
-`;
+const formatStatus = (status?: QuestStatus) => {
+  if (!status) return 'Unknown';
+  return status
+    .split(/(?=[A-Z])/)
+    .join(' ')
+    .replace(/^\w/, c => c.toUpperCase());
+};

package/src/index.tsx

@@ -33,8 +33,8 @@ export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
 export * from './components/PartySystem';
 export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
-export * from './components/QuestInfo/QuestInfo';
-export * from './components/QuestList';
+export * from './components/Quests/QuestInfo/QuestInfo';
+export * from './components/Quests/QuestList';
 export * from './components/RadioButton';
 export * from './components/RangeSlider';
 export * from './components/RPGUI/RPGUIContainer';

package/src/stories/QuestInfo.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import {
   IQuestInfoProps,
   QuestInfo,
-} from '../../src/components/QuestInfo/QuestInfo';
+} from '../components/Quests/QuestInfo/QuestInfo';
 import { RPGUIRoot } from '../components/RPGUI/RPGUIRoot';
 const meta: Meta = {
   title: 'Quest Info',

package/src/stories/QuestList.stories.tsx

@@ -1,7 +1,7 @@
 import { QuestStatus, QuestType } from '@rpg-engine/shared';
 import { Story } from '@storybook/react';
 import React from 'react';
-import { IQuestListProps, QuestList } from '../components/QuestList';
+import { IQuestListProps, QuestList } from '../components/Quests/QuestList';
 import { RPGUIRoot } from '../components/RPGUI/RPGUIRoot';
 
 export default {