@rpg-engine/long-bow 0.4.2 → 0.4.3

package/src/components/Marketplace/__mocks__/index.tsx

@@ -1,65 +1,65 @@
-import { ItemRarities, ItemType } from '@rpg-engine/shared';
-import React from 'react';
-import { IOptionsProps } from '../../Dropdown';
-
-export enum OrderByType {
-  Name = 'Name',
-  Rarity = 'Rarity',
-  Price = 'Price',
-  DateAdded = 'Date Added',
-}
-
-export const itemTypeOptions: IOptionsProps[] = Object.values(ItemType).map(
-  (itemType, index) => ({
-    id: index + 1,
-    value: itemType,
-    option: itemType,
-  })
-);
-
-export const itemRarityOptions: IOptionsProps[] = Object.values(
-  ItemRarities
-).map((itemRarity, index) => ({
-  id: index + 1,
-  value: itemRarity,
-  option: itemRarity,
-}));
-
-export const orderByOptions: IOptionsProps[] = Object.values(
-  OrderByType
-).flatMap((orderBy, index) => [
-  {
-    id: index * 2 + 1,
-    value: orderBy,
-    option: (
-      <>
-        {orderBy}{' '}
-        <span
-          style={{
-            transform: 'translateY(-2px)',
-            display: 'inline-block',
-          }}
-        >
-          ↓
-        </span>
-      </>
-    ),
-  },
-  {
-    id: index * 2 + 2,
-    value: '-' + orderBy.toLowerCase(),
-    option: (
-      <>
-        {orderBy}{' '}
-        <span
-          style={{
-            transform: 'translateY(-2px)',
-            display: 'inline-block',
-          }}
-        >
-          ↑
-        </span>
-      </>
-    ),
-  },
-]);
+import { ItemRarities, ItemType } from '@rpg-engine/shared';
+import React from 'react';
+import { IOptionsProps } from '../../Dropdown';
+
+export enum OrderByType {
+  Name = 'Name',
+  Rarity = 'Rarity',
+  Price = 'Price',
+  DateAdded = 'Date Added',
+}
+
+export const itemTypeOptions: IOptionsProps[] = Object.values(ItemType).map(
+  (itemType, index) => ({
+    id: index + 1,
+    value: itemType,
+    option: itemType,
+  })
+);
+
+export const itemRarityOptions: IOptionsProps[] = Object.values(
+  ItemRarities
+).map((itemRarity, index) => ({
+  id: index + 1,
+  value: itemRarity,
+  option: itemRarity,
+}));
+
+export const orderByOptions: IOptionsProps[] = Object.values(
+  OrderByType
+).flatMap((orderBy, index) => [
+  {
+    id: index * 2 + 1,
+    value: orderBy,
+    option: (
+      <>
+        {orderBy}{' '}
+        <span
+          style={{
+            transform: 'translateY(-2px)',
+            display: 'inline-block',
+          }}
+        >
+          ↓
+        </span>
+      </>
+    ),
+  },
+  {
+    id: index * 2 + 2,
+    value: '-' + orderBy.toLowerCase(),
+    option: (
+      <>
+        {orderBy}{' '}
+        <span
+          style={{
+            transform: 'translateY(-2px)',
+            display: 'inline-block',
+          }}
+        >
+          ↑
+        </span>
+      </>
+    ),
+  },
+]);

package/src/components/Multitab/Tab.tsx

@@ -1,66 +1,66 @@
-import React from 'react';
-import styled from 'styled-components';
-import { MultitabType } from './TabsContainer';
-
-export interface ISingleTab {
-  active: boolean;
-  label: string;
-  onPointerDown: () => void;
-  type: MultitabType;
-}
-
-export const Tab: React.FC<ISingleTab> = ({
-  active,
-  label,
-  onPointerDown,
-  type,
-}) => {
-  return (
-    <CustomTab
-      activeTab={active}
-      onPointerDown={onPointerDown}
-      className={type}
-    >
-      <p>{label}</p>
-    </CustomTab>
-  );
-};
-
-interface ICustomTab {
-  activeTab: boolean;
-}
-
-const CustomTab = styled.div<ICustomTab>`
-  width: 120px;
-  color: white;
-  font-size: 0.8rem;
-
-  &.gray {
-    border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
-    border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
-    border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
-    background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
-  }
-
-  &.brown {
-    border-left: 0.25rem solid #996d55;
-    border-right: 0.25rem solid #996d55;
-    border-top: 0.25rem solid #996d55;
-    background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
-  }
-
-  margin-right: 10px;
-  p {
-    text-align: center;
-    font-size: 0.6rem;
-
-    opacity: ${props => (props.activeTab ? '1' : '0.5')};
-  }
-
-  border-radius: 5px 5px 0 0;
-
-  z-index: ${props => (props.activeTab ? 1 : -1)};
-
-  position: relative;
-  top: 0.3rem;
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { MultitabType } from './TabsContainer';
+
+export interface ISingleTab {
+  active: boolean;
+  label: string;
+  onPointerDown: () => void;
+  type: MultitabType;
+}
+
+export const Tab: React.FC<ISingleTab> = ({
+  active,
+  label,
+  onPointerDown,
+  type,
+}) => {
+  return (
+    <CustomTab
+      activeTab={active}
+      onPointerDown={onPointerDown}
+      className={type}
+    >
+      <p>{label}</p>
+    </CustomTab>
+  );
+};
+
+interface ICustomTab {
+  activeTab: boolean;
+}
+
+const CustomTab = styled.div<ICustomTab>`
+  width: 120px;
+  color: white;
+  font-size: 0.8rem;
+
+  &.gray {
+    border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
+    border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
+    border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
+    background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
+  }
+
+  &.brown {
+    border-left: 0.25rem solid #996d55;
+    border-right: 0.25rem solid #996d55;
+    border-top: 0.25rem solid #996d55;
+    background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
+  }
+
+  margin-right: 10px;
+  p {
+    text-align: center;
+    font-size: 0.6rem;
+
+    opacity: ${props => (props.activeTab ? '1' : '0.5')};
+  }
+
+  border-radius: 5px 5px 0 0;
+
+  z-index: ${props => (props.activeTab ? 1 : -1)};
+
+  position: relative;
+  top: 0.3rem;
+`;

package/src/components/Multitab/TabBody.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  id: string;
-  children: React.ReactNode;
-}
-
-export const TabBody: React.FC<IProps> = ({ id, children }) => {
-  return <Container data-tab-id={id}>{children}</Container>;
-};
-
-const Container = styled.div``;
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  id: string;
+  children: React.ReactNode;
+}
+
+export const TabBody: React.FC<IProps> = ({ id, children }) => {
+  return <Container data-tab-id={id}>{children}</Container>;
+};
+
+const Container = styled.div``;

package/src/components/Multitab/TabsContainer.tsx

@@ -1,97 +1,97 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { DraggableContainer } from '../DraggableContainer';
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-import { Tab } from './Tab';
-
-interface ITab {
-  label: string;
-  id: string;
-}
-
-export enum MultitabType {
-  Brown = 'brown',
-  Gray = 'gray',
-}
-
-export interface ITabsContainer {
-  children: React.ReactNode;
-  onCloseButton?: () => void;
-  tabs: ITab[];
-  type: MultitabType;
-}
-
-export const TabsContainer: React.FC<ITabsContainer> = ({
-  children,
-  onCloseButton,
-  tabs,
-  type = MultitabType.Brown,
-}) => {
-  const [selectedTab, setSelectedTab] = useState(tabs[0].id); //by default the first one
-
-  const onRenderTabs = () =>
-    tabs.map((tab, index) => (
-      <Tab
-        type={type}
-        active={selectedTab === tab.id}
-        label={tab.label}
-        key={`${tab.label}_${index}`}
-        onPointerDown={() => setSelectedTab(tab.id)}
-      />
-    ));
-
-  const onGetContainerType = () => {
-    switch (type) {
-      case 'brown':
-        return RPGUIContainerTypes.FramedGold;
-      case 'gray':
-        return RPGUIContainerTypes.Framed;
-      default:
-        return RPGUIContainerTypes.Framed;
-    }
-  };
-
-  return (
-    <DraggableContainer
-      onCloseButton={onCloseButton}
-      type={onGetContainerType()}
-    >
-      {onRenderTabs()}
-      <BodyContainer selectedTab={selectedTab} className={type}>
-        {children}
-      </BodyContainer>
-    </DraggableContainer>
-  );
-};
-
-interface IBodyContainer {
-  selectedTab: string;
-}
-
-const BodyContainer = styled.div<IBodyContainer>`
-  display: flex; 
-  width: 100%;
-  height: 100%;
-  justify-content: space-between;
-
-  /* hide everything that is not data-tab-id selectedTab */
-  & > *:not([data-tab-id=${props => props.selectedTab}]) {
-    display: none;
-  }
-
-  &.brown {
-  border: 0.25rem solid #996D55;
-  background-color: #BF886A;
-  }
-  
-
-  &.gray {
-    border: 0.25rem solid rgba(0, 0, 0, 0.25);
-    background-color: #4E4A4E;
-  }
- 
-
-  border-radius: 5px; 
-  padding: 0.5rem; 
-   
-`;
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Tab } from './Tab';
+
+interface ITab {
+  label: string;
+  id: string;
+}
+
+export enum MultitabType {
+  Brown = 'brown',
+  Gray = 'gray',
+}
+
+export interface ITabsContainer {
+  children: React.ReactNode;
+  onCloseButton?: () => void;
+  tabs: ITab[];
+  type: MultitabType;
+}
+
+export const TabsContainer: React.FC<ITabsContainer> = ({
+  children,
+  onCloseButton,
+  tabs,
+  type = MultitabType.Brown,
+}) => {
+  const [selectedTab, setSelectedTab] = useState(tabs[0].id); //by default the first one
+
+  const onRenderTabs = () =>
+    tabs.map((tab, index) => (
+      <Tab
+        type={type}
+        active={selectedTab === tab.id}
+        label={tab.label}
+        key={`${tab.label}_${index}`}
+        onPointerDown={() => setSelectedTab(tab.id)}
+      />
+    ));
+
+  const onGetContainerType = () => {
+    switch (type) {
+      case 'brown':
+        return RPGUIContainerTypes.FramedGold;
+      case 'gray':
+        return RPGUIContainerTypes.Framed;
+      default:
+        return RPGUIContainerTypes.Framed;
+    }
+  };
+
+  return (
+    <DraggableContainer
+      onCloseButton={onCloseButton}
+      type={onGetContainerType()}
+    >
+      {onRenderTabs()}
+      <BodyContainer selectedTab={selectedTab} className={type}>
+        {children}
+      </BodyContainer>
+    </DraggableContainer>
+  );
+};
+
+interface IBodyContainer {
+  selectedTab: string;
+}
+
+const BodyContainer = styled.div<IBodyContainer>`
+  display: flex; 
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+
+  /* hide everything that is not data-tab-id selectedTab */
+  & > *:not([data-tab-id=${props => props.selectedTab}]) {
+    display: none;
+  }
+
+  &.brown {
+  border: 0.25rem solid #996D55;
+  background-color: #BF886A;
+  }
+  
+
+  &.gray {
+    border: 0.25rem solid rgba(0, 0, 0, 0.25);
+    background-color: #4E4A4E;
+  }
+ 
+
+  border-radius: 5px; 
+  padding: 0.5rem; 
+   
+`;