@rpg-engine/long-bow 0.3.80 → 0.3.82

package/package.json

@@ -1,100 +1,100 @@
-{
-  "name": "@rpg-engine/long-bow",
-  "version": "0.3.80",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "publishConfig": {
-    "access": "public"
-  },
-  "directories": {
-    "dist": "dist",
-    "src": "src"
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "engines": {
-    "node": ">=10"
-  },
-  "scripts": {
-    "dev": "yarn install && start-storybook -p 6006",
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "configure": "./environment/download-credentials.sh",
-    "update:shared-deps": "yarn add @rpg-engine/shared"
-  },
-  "peerDependencies": {
-    "react": ">=16"
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
-  "author": "Joao Paulo Furtado",
-  "module": "dist/long-bow.esm.js",
-  "size-limit": [
-    {
-      "path": "dist/long-bow.cjs.production.min.js",
-      "limit": "10 KB"
-    },
-    {
-      "path": "dist/long-bow.esm.js",
-      "limit": "10 KB"
-    }
-  ],
-  "devDependencies": {
-    "@babel/core": "^7.17.7",
-    "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/addons": "^6.5.10",
-    "@storybook/react": "^6.5.10",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
-    "@types/styled-components": "^5.1.24",
-    "@types/uuid": "^8.3.4",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-styled-components": "^2.0.6",
-    "husky": "^7.0.4",
-    "pretty-quick": "^3.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "rollup-plugin-image-base64": "^1.0.0",
-    "size-limit": "^7.0.8",
-    "storybook-dark-mode": "^1.1.0",
-    "styled-components": "^5.3.3",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.1",
-    "typescript": "^4.6.2",
-    "uuid": "^8.3.2"
-  },
-  "dependencies": {
-    "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.6.95",
-    "dayjs": "^1.11.2",
-    "font-awesome": "^4.7.0",
-    "fs-extra": "^10.1.0",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "mobx": "^6.6.0",
-    "mobx-react": "^7.5.0",
-    "react-draggable": "^4.4.5",
-    "react-error-boundary": "^3.1.4",
-    "react-icons": "^4.7.1",
-    "rollup-plugin-image-files": "^1.4.2",
-    "rpgui": "^1.0.3"
-  }
-}
+{
+  "name": "@rpg-engine/long-bow",
+  "version": "0.3.82",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "directories": {
+    "dist": "dist",
+    "src": "src"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "dev": "yarn install && start-storybook -p 6006",
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "configure": "./environment/download-credentials.sh",
+    "update:shared-deps": "yarn add @rpg-engine/shared"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "author": "Joao Paulo Furtado",
+  "module": "dist/long-bow.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/long-bow.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/long-bow.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.17.7",
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "@types/styled-components": "^5.1.24",
+    "@types/uuid": "^8.3.4",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-styled-components": "^2.0.6",
+    "husky": "^7.0.4",
+    "pretty-quick": "^3.1.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "rollup-plugin-image-base64": "^1.0.0",
+    "size-limit": "^7.0.8",
+    "storybook-dark-mode": "^1.1.0",
+    "styled-components": "^5.3.3",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.6.2",
+    "uuid": "^8.3.2"
+  },
+  "dependencies": {
+    "@rollup/plugin-image": "^2.1.1",
+    "@rpg-engine/shared": "^0.6.95",
+    "dayjs": "^1.11.2",
+    "font-awesome": "^4.7.0",
+    "fs-extra": "^10.1.0",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "mobx": "^6.6.0",
+    "mobx-react": "^7.5.0",
+    "react-draggable": "^4.4.5",
+    "react-error-boundary": "^3.1.4",
+    "react-icons": "^4.7.1",
+    "rollup-plugin-image-files": "^1.4.2",
+    "rpgui": "^1.0.3"
+  }
+}

package/src/components/Abstractions/ModalPortal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+
+const modalRoot = document.getElementById('modal-root')!;
+
+interface ModalPortalProps {
+  children: React.ReactNode;
+}
+
+const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
+  return ReactDOM.createPortal(
+    <Container className="rpgui-content">{children}</Container>,
+    modalRoot
+  );
+};
+
+const Container = styled.div`
+  position: static !important;
+`;
+
+export default ModalPortal;

package/src/components/Abstractions/SlotsContainer.tsx

@@ -1,48 +1,48 @@
-import React from 'react';
-import { IPosition } from '../../types/eventTypes';
-import { DraggableContainer } from '../DraggableContainer';
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-
-interface IProps {
-  children: React.ReactNode;
-  title: string;
-  onClose?: () => void;
-  onPositionChange?: (position: IPosition) => void;
-  onOutsideClick?: () => void;
-  initialPosition?: IPosition;
-  scale?: number;
-}
-
-export const SlotsContainer: React.FC<IProps> = ({
-  children,
-  title,
-  onClose,
-  onPositionChange,
-  onOutsideClick,
-  initialPosition,
-  scale,
-}) => {
-  return (
-    <DraggableContainer
-      title={title}
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {
-        if (onClose) {
-          onClose();
-        }
-      }}
-      width="400px"
-      cancelDrag=".item-container-body, #shortcuts_list"
-      onPositionChange={({ x, y }) => {
-        if (onPositionChange) {
-          onPositionChange({ x, y });
-        }
-      }}
-      onOutsideClick={onOutsideClick}
-      initialPosition={initialPosition}
-      scale={scale}
-    >
-      {children}
-    </DraggableContainer>
-  );
-};
+import React from 'react';
+import { IPosition } from '../../types/eventTypes';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+
+interface IProps {
+  children: React.ReactNode;
+  title: string;
+  onClose?: () => void;
+  onPositionChange?: (position: IPosition) => void;
+  onOutsideClick?: () => void;
+  initialPosition?: IPosition;
+  scale?: number;
+}
+
+export const SlotsContainer: React.FC<IProps> = ({
+  children,
+  title,
+  onClose,
+  onPositionChange,
+  onOutsideClick,
+  initialPosition,
+  scale,
+}) => {
+  return (
+    <DraggableContainer
+      title={title}
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) {
+          onClose();
+        }
+      }}
+      width="400px"
+      cancelDrag=".item-container-body, #shortcuts_list"
+      onPositionChange={({ x, y }) => {
+        if (onPositionChange) {
+          onPositionChange({ x, y });
+        }
+      }}
+      onOutsideClick={onOutsideClick}
+      initialPosition={initialPosition}
+      scale={scale}
+    >
+      {children}
+    </DraggableContainer>
+  );
+};

package/src/components/Arrow/SelectArrow.tsx

@@ -1,69 +1,69 @@
-import React from 'react';
-import styled from 'styled-components';
-import LeftArrowClickIcon from './img/arrow01-left-clicked.png';
-import LeftArrowIcon from './img/arrow01-left.png';
-import RightArrowClickIcon from './img/arrow01-right-clicked.png';
-import RightArrowIcon from './img/arrow01-right.png';
-
-export interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  direction: 'right' | 'left';
-  onPointerDown: () => void;
-  size?: number;
-}
-
-export const SelectArrow: React.FC<ArrowBarProps> = ({
-  direction = 'left',
-  size,
-  onPointerDown,
-  ...props
-}) => {
-  return (
-    <>
-      {direction === 'left' ? (
-        <LeftArrow
-          size={size}
-          onPointerDown={() => onPointerDown()}
-          {...props}
-        ></LeftArrow>
-      ) : (
-        <RightArrow
-          size={size}
-          onPointerDown={() => onPointerDown()}
-          {...props}
-        ></RightArrow>
-      )}
-    </>
-  );
-};
-
-interface IArrowProps {
-  size?: number;
-}
-
-const LeftArrow = styled.span<IArrowProps>`
-  background-image: url(${LeftArrowIcon});
-  background-size: 100% 100%;
-  left: 0;
-  position: absolute;
-  width: ${props => props.size || 40}px;
-  height: ${props => props.size || 42}px;
-  :active {
-    background-image: url(${LeftArrowClickIcon});
-  }
-  z-index: 2;
-`;
-
-const RightArrow = styled.span<IArrowProps>`
-  background-image: url(${RightArrowIcon});
-  right: 0;
-  position: absolute;
-  width: ${props => props.size || 40}px;
-  height: ${props => props.size || 42}px;
-  background-size: 100% 100%;
-  :active {
-    background-image: url(${RightArrowClickIcon});
-  }
-  z-index: 2;
-`;
-
-export default SelectArrow;
+import React from 'react';
+import styled from 'styled-components';
+import LeftArrowClickIcon from './img/arrow01-left-clicked.png';
+import LeftArrowIcon from './img/arrow01-left.png';
+import RightArrowClickIcon from './img/arrow01-right-clicked.png';
+import RightArrowIcon from './img/arrow01-right.png';
+
+export interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  direction: 'right' | 'left';
+  onPointerDown: () => void;
+  size?: number;
+}
+
+export const SelectArrow: React.FC<ArrowBarProps> = ({
+  direction = 'left',
+  size,
+  onPointerDown,
+  ...props
+}) => {
+  return (
+    <>
+      {direction === 'left' ? (
+        <LeftArrow
+          size={size}
+          onPointerDown={() => onPointerDown()}
+          {...props}
+        ></LeftArrow>
+      ) : (
+        <RightArrow
+          size={size}
+          onPointerDown={() => onPointerDown()}
+          {...props}
+        ></RightArrow>
+      )}
+    </>
+  );
+};
+
+interface IArrowProps {
+  size?: number;
+}
+
+const LeftArrow = styled.span<IArrowProps>`
+  background-image: url(${LeftArrowIcon});
+  background-size: 100% 100%;
+  left: 0;
+  position: absolute;
+  width: ${props => props.size || 40}px;
+  height: ${props => props.size || 42}px;
+  :active {
+    background-image: url(${LeftArrowClickIcon});
+  }
+  z-index: 2;
+`;
+
+const RightArrow = styled.span<IArrowProps>`
+  background-image: url(${RightArrowIcon});
+  right: 0;
+  position: absolute;
+  width: ${props => props.size || 40}px;
+  height: ${props => props.size || 42}px;
+  background-size: 100% 100%;
+  :active {
+    background-image: url(${RightArrowClickIcon});
+  }
+  z-index: 2;
+`;
+
+export default SelectArrow;

package/src/components/Button.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import styled from 'styled-components';
-import { uiFonts } from '../constants/uiFonts';
-
-export enum ButtonTypes {
-  RPGUIButton = 'rpgui-button',
-  RPGUIGoldButton = 'rpgui-button golden',
-}
-
-export interface IButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  disabled?: boolean;
-  children: React.ReactNode;
-  buttonType: ButtonTypes;
-  onPointerDown?: (e: any) => void;
-}
-
-export const Button = ({
-  disabled = false,
-  children,
-  buttonType,
-  onPointerDown,
-  ...props
-}: IButtonProps) => {
-  return (
-    <ButtonContainer
-      className={`${buttonType}`}
-      disabled={disabled}
-      {...props}
-      onPointerDown={onPointerDown}
-    >
-      <p>{children}</p>
-    </ButtonContainer>
-  );
-};
-
-const ButtonContainer = styled.button`
-  height: 45px;
-  font-size: ${uiFonts.size.small};
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
+
+export enum ButtonTypes {
+  RPGUIButton = 'rpgui-button',
+  RPGUIGoldButton = 'rpgui-button golden',
+}
+
+export interface IButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  disabled?: boolean;
+  children: React.ReactNode;
+  buttonType: ButtonTypes;
+  onPointerDown?: (e: any) => void;
+}
+
+export const Button = ({
+  disabled = false,
+  children,
+  buttonType,
+  onPointerDown,
+  ...props
+}: IButtonProps) => {
+  return (
+    <ButtonContainer
+      className={`${buttonType}`}
+      disabled={disabled}
+      {...props}
+      onPointerDown={onPointerDown}
+    >
+      <p>{children}</p>
+    </ButtonContainer>
+  );
+};
+
+const ButtonContainer = styled.button`
+  height: 45px;
+  font-size: ${uiFonts.size.small};
+`;