@rpg-engine/long-bow 0.2.29 → 0.2.34

package/src/components/TradingMenu/items.mock.ts

@@ -1,87 +1,88 @@
-import { ITransactionItem } from '@rpg-engine/shared';
-export const itemMock: ITransactionItem[] = [
+import { ITradeResponseItem } from '@rpg-engine/shared';
+export const itemMock: ITradeResponseItem[] = [
   {
     texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId03',
+    name: 'Silver Short Sword Premium',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: "swords/corruption-sword.png",
     itemId: 'itemId01',
-    name: 'sword',
+    name: 'Short sword Best',
     price: 100,
     key: 'Short sword',
   },
   {
     texturePath: 'swords/broad-sword.png',
     itemId: 'itemId02',
-    name: 'sword',
+    name: 'Short sword Trade',
     price: 100,
     key: 'Short sword',
   },
   {
     texturePath: 'swords/broad-sword.png',
     itemId: 'itemId03',
-    name: 'sword',
+    name: 'Short sword',
     price: 100,
     key: 'Short sword',
   },
   {
     texturePath: 'swords/broad-sword.png',
     itemId: 'itemId01',
-    name: 'sword',
+    name: 'Short sword',
     price: 100,
     key: 'Short sword',
   },
   {
     texturePath: 'swords/broad-sword.png',
     itemId: 'itemId02',
-    name: 'sword',
+    name: 'Short sword',
     price: 100,
     key: 'Short sword',
   },
   {
     texturePath: 'swords/broad-sword.png',
     itemId: 'itemId03',
-    name: 'sword',
+    name: 'Short sword',
     price: 100,
     key: 'Short sword',
   },
   {
     texturePath: 'swords/broad-sword.png',
     itemId: 'itemId01',
-    name: 'sword',
+    name: 'Short sword',
     price: 100,
     key: 'Short sword',
   },
   {
     texturePath: 'swords/broad-sword.png',
     itemId: 'itemId02',
-    name: 'sword',
+    name: 'Short sword',
     price: 100,
     key: 'Short sword',
   },
   {
     texturePath: 'swords/broad-sword.png',
     itemId: 'itemId03',
-    name: 'sword',
+    name: 'Short sword',
     price: 100,
     key: 'Short sword',
   },
   {
     texturePath: 'swords/broad-sword.png',
     itemId: 'itemId01',
-    name: 'sword',
+    name: 'Short sword',
     price: 100,
     key: 'Short sword',
   },
   {
     texturePath: 'swords/broad-sword.png',
     itemId: 'itemId02',
-    name: 'sword',
-    price: 100,
-    key: 'Short sword',
-  },
-  {
-    texturePath: 'swords/broad-sword.png',
-    itemId: 'itemId03',
-    name: 'sword',
+    name: 'Short sword',
     price: 100,
     key: 'Short sword',
   },
+
 ];

package/src/components/shared/Ellipsis.tsx

@@ -4,25 +4,43 @@ import styled from 'styled-components';
 interface IProps {
   children: React.ReactNode;
   maxLines: 1 | 2 | 3;
+  maxWidth: number;
+  fontSize?: string;
 }
 
-export const Ellipsis = ({ children, maxLines }: IProps) => {
+export const Ellipsis = ({
+  children,
+  maxLines,
+  maxWidth,
+  fontSize,
+}: IProps) => {
   return (
-    <Container>
-      <div className={`ellipsis-${maxLines}-lines`}>{children}</div>
+    <Container maxWidth={maxWidth} fontSize={fontSize}>
+      <p className={`ellipsis-${maxLines}-lines`}>{children}</p>
     </Container>
   );
 };
 
-const Container = styled.div`
+interface IContainerProps {
+  maxWidth: number;
+  fontSize?: string;
+}
+
+const Container = styled.div<IContainerProps>`
+  p {
+    font-size: ${props => props.fontSize || '1rem'};
+  }
+
   .ellipsis-1-lines {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    max-width: ${props => props.maxWidth}px;
   }
   .ellipsis-2-lines {
     display: -webkit-box;
-    max-width: 100%;
+    max-width: ${props => props.maxWidth}px;
+
     height: 25px;
     margin: 0 auto;
     line-height: 1;
@@ -33,7 +51,8 @@ const Container = styled.div`
   }
   .ellipsis-3-lines {
     display: -webkit-box;
-    max-width: 100%;
+    max-width: ${props => props.maxWidth}px;
+
     height: 43px;
     margin: 0 auto;
     line-height: 1;

package/src/index.tsx

@@ -5,11 +5,13 @@ export * from './components/CheckButton';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
 export * from './components/Equipment/EquipmentSet';
+export * from './components/HistoryDialog';
 export * from './components/Input';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
+export * from './components/NPCDialog/NPCMultiDialog';
 export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
 export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
@@ -23,9 +25,7 @@ export * from './components/shared/SpriteFromAtlas';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/TextArea';
+export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
 export * from './components/typography/DynamicText';
-export * from './components/NPCDialog/NPCMultiDialog';
-export * from './components/HistoryDialog';
-export * from './components/TradingMenu/TrandingMenu';
 export { useEventListener } from './hooks/useEventListener';

package/src/stories/Arrow.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import SelectArrow, { ArrowBarProps } from '../components/Arrow/SelectArrow';
+
+const meta: Meta = {
+  title: 'Arrow',
+  component: SelectArrow,
+};
+
+export default meta;
+
+const Template: Story<ArrowBarProps> = args => (
+  <RPGUIRoot>
+    <SelectArrow {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  direction: 'left',
+  onClick: () => {
+    console.log('clicked');
+  },
+};

package/src/stories/ItemTradingComponent.stories.tsx

@@ -1,14 +1,14 @@
+import { ITransactionItem } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../components/RPGUIRoot';
+import { itemMock } from '../components/TradingMenu/items.mock';
 import {
-  ItemTradingComponent,
   ITradeComponentProps,
-} from '../components/TradingMenu/itemComponent';
+  TradingItemRow,
+} from '../components/TradingMenu/TradingItemRow';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
-import { itemMock } from '../components/TradingMenu/items.mock';
-import { ITransactionItem } from '@rpg-engine/shared';
 
 const updateChartTotals = (itemInfo: ITransactionItem) => {
   console.log(itemInfo);
@@ -20,13 +20,13 @@ const updateChartTotals = (itemInfo: ITransactionItem) => {
 
 const meta: Meta = {
   title: 'Trading Item',
-  component: ItemTradingComponent,
+  component: TradingItemRow,
 };
 export default meta;
 
 const Template: Story<ITradeComponentProps> = args => (
   <RPGUIRoot>
-    <ItemTradingComponent {...args} traderItem={itemMock[0]} />
+    <TradingItemRow {...args} traderItem={itemMock[0]} />
   </RPGUIRoot>
 );
 

package/src/stories/{TrandingMenu.stories.tsx → TradingMenu.stories.tsx}

@@ -1,24 +1,24 @@
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../components/RPGUIRoot';
+import { itemMock } from '../components/TradingMenu/items.mock';
 import {
-  TrandingMenu,
   ITrandingMenu,
-} from '../components/TradingMenu/TrandingMenu';
+  TradingMenu,
+} from '../components/TradingMenu/TradingMenu';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
-import { itemMock } from '../components/TradingMenu/items.mock';
 
 const meta: Meta = {
   title: 'Trading Menu',
-  component: TrandingMenu,
+  component: TradingMenu,
 };
 
 export default meta;
 
 const Template: Story<ITrandingMenu> = args => (
   <RPGUIRoot>
-    <TrandingMenu {...args} />
+    <TradingMenu {...args} />
   </RPGUIRoot>
 );
 

package/dist/components/TradingMenu/TrandingMenu.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ITransactionItem, TradeTransactionType } from '@rpg-engine/shared';
-export interface ITrandingMenu {
-    traderItems: ITransactionItem[];
-    onClose: () => void;
-    type: TradeTransactionType;
-    atlasJSON: any;
-    atlasIMG: any;
-    characterAvailableGold: number;
-    onChangeTraderItems: (traderItems: ITransactionItem[]) => void;
-}
-export declare const TrandingMenu: React.FC<ITrandingMenu>;

package/dist/components/TradingMenu/itemComponent.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ITransactionItem } from '@rpg-engine/shared';
-export interface ITradeComponentProps {
-    traderItem: ITransactionItem;
-    updateChartTotals: (traderItem: ITransactionItem) => void;
-    atlasJSON: any;
-    atlasIMG: any;
-}
-export declare const ItemTradingComponent: React.FC<ITradeComponentProps>;

package/src/components/TradingMenu/itemComponent.tsx

@@ -1,158 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-import LeftArrowClickIcon from '../PropertySelect/img/ui-arrows/arrow01-left-clicked.png';
-import LeftArrowIcon from '../PropertySelect/img/ui-arrows/arrow01-left.png';
-import RightArrowClickIcon from '../PropertySelect/img/ui-arrows/arrow01-right-clicked.png';
-import RightArrowIcon from '../PropertySelect/img/ui-arrows/arrow01-right.png';
-import { ITransactionItem } from '@rpg-engine/shared';
-
-export interface ITradeComponentProps {
-  traderItem: ITransactionItem;
-  updateChartTotals: (traderItem: ITransactionItem) => void;
-  atlasJSON: any;
-  atlasIMG: any;
-}
-
-export const ItemTradingComponent: React.FC<ITradeComponentProps> = ({
-  atlasIMG,
-  atlasJSON,
-  updateChartTotals,
-  traderItem,
-}) => {
-  const [itemQuantity, setItemQuantity] = useState(0);
-
-  const onLeftClick = () => {
-    if (itemQuantity > 0) {
-      const newQuantity = itemQuantity - 1;
-      setItemQuantity(newQuantity);
-      updateChartTotals({
-        key: traderItem.key,
-        itemId: traderItem.itemId,
-        qty: newQuantity,
-        price: traderItem.price,
-        texturePath: traderItem.texturePath,
-        name: traderItem.name,
-      });
-    }
-  };
-  const onRightClick = () => {
-    const newQuantity = itemQuantity + 1;
-    setItemQuantity(newQuantity);
-    updateChartTotals({
-      key: traderItem.key,
-      itemId: traderItem.itemId,
-      qty: newQuantity,
-      price: traderItem.price,
-      texturePath: traderItem.texturePath,
-      name: traderItem.name,
-    });
-  };
-
-  return (
-    <ItemWrapper>
-      <IconContainer>
-        <SpriteContainer>
-          <SpriteFromAtlas
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            spriteKey={traderItem.texturePath}
-            imgScale={2.5}
-          />
-        </SpriteContainer>
-      </IconContainer>
-      <NameValue>
-        <p>{traderItem.name}</p>
-        <p>${traderItem.price}</p>
-      </NameValue>
-      <Container>
-        <TextOverlay>
-          <Item>{itemQuantity}</Item>
-        </TextOverlay>
-        <LeftArrow onClick={onLeftClick} onTouchStart={onLeftClick}></LeftArrow>
-        <RightArrow
-          onClick={onRightClick}
-          onTouchStart={onRightClick}
-        ></RightArrow>
-      </Container>
-    </ItemWrapper>
-  );
-};
-
-const ItemWrapper = styled.div`
-  width: 80%;
-  margin: auto;
-  display: flex;
-  justify-content: space-between;
-`;
-
-const IconContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const SpriteContainer = styled.div`
-  position: relative;
-  top: -3px;
-  left: 0;
-`;
-
-const NameValue = styled.div``;
-
-const Item = styled.span`
-  font-size: 1rem;
-  color: white;
-  text-align: center;
-  z-index: 1;
-  position: absolute;
-  top: -12px;
-  width: 100%;
-`;
-
-const TextOverlay = styled.div`
-  width: 100%;
-  position: relative;
-`;
-
-interface IContainerProps {
-  percentageWidth?: number;
-  minWidth?: number;
-  style?: Record<string, any>;
-}
-
-const Container = styled.div<IContainerProps>`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: flex-start;
-  min-width: 100px;
-  width: 40%;
-`;
-
-const LeftArrow = styled.div`
-  background-image: url(${LeftArrowIcon});
-  background-size: 100% 100%;
-  left: 0;
-  position: absolute;
-  width: 40px;
-  height: 42px;
-  :active {
-    background-image: url(${LeftArrowClickIcon});
-  }
-  z-index: 2;
-`;
-
-const RightArrow = styled.div`
-  background-image: url(${RightArrowIcon});
-  right: 0;
-  position: absolute;
-  width: 40px;
-  background-size: 100% 100%;
-  height: 42px;
-  :active {
-    background-image: url(${RightArrowClickIcon});
-  }
-  z-index: 2;
-`;