@rpg-engine/long-bow 0.1.32 → 0.1.35

package/src/components/Button.tsx

@@ -1,23 +1,31 @@
 import React from 'react';
+import styled from 'styled-components';
 
-export enum IButtonTypes {
+export enum ButtonTypes {
   RPGUIButton = 'rpgui-button',
   RPGUIGoldButton = 'rpgui-button golden',
 }
 
-export interface IButtonsProps {
+export interface IButtonProps {
   children: React.ReactNode;
-  type: IButtonTypes;
+  buttonType: ButtonTypes;
 }
 
-export const Button: React.FC<IButtonsProps> = ({
-  children,
-  type,
-  ...props
-}) => {
+export const Button: React.FC<
+  IButtonProps &
+    React.DetailedHTMLProps<
+      React.ButtonHTMLAttributes<HTMLButtonElement>,
+      HTMLButtonElement
+    >
+> = ({ children, buttonType, ...props }) => {
   return (
-    <button className={type} type="button" {...props}>
+    <ButtonContainer className={`${buttonType}`} {...props}>
       <p>{children}</p>
-    </button>
+    </ButtonContainer>
   );
 };
+
+const ButtonContainer = styled.button<any>`
+  height: 45px;
+  font-size: 11.5px;
+`;

package/src/components/CheckButton.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+
+export interface ICheckItems {
+  label: string;
+  value: string;
+}
+
+export interface ICheckProps {
+  items: ICheckItems[];
+  onChange: (selectedValues: IChecklistSelectedValues) => void;
+}
+
+interface IChecklistSelectedValues {
+  [label: string]: boolean;
+}
+
+export const CheckButton: React.FC<ICheckProps> = ({ items, onChange }) => {
+  const generateSelectedValuesList = () => {
+    const selectedValues: IChecklistSelectedValues = {};
+
+    items.forEach((item) => {
+      selectedValues[item.label] = false;
+    });
+
+    return selectedValues;
+  };
+
+  const [selectedValues, setSelectedValues] =
+    useState<IChecklistSelectedValues>(generateSelectedValuesList());
+
+  const handleClick = (label: string) => {
+    setSelectedValues({
+      ...selectedValues,
+      [label]: !selectedValues[label],
+    });
+  };
+
+  useEffect(() => {
+    if (selectedValues) {
+      onChange(selectedValues);
+    }
+  }, [selectedValues]);
+
+  return (
+    <div id="elemento-checkbox">
+      {items?.map((element, index) => {
+        return (
+          <div key={`${element.label}_${index}`}>
+            <input
+              className="rpgui-checkbox"
+              type="checkbox"
+              checked={selectedValues[element.label]}
+              onChange={() => {}}
+            />
+            <label onClick={() => handleClick(element.label)}>
+              {element.label}
+            </label>
+            <br />
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/Dropdown.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { _RPGUI } from './RPGUIRoot';
+
+export interface IOptionsProps {
+  id: number;
+  value: string;
+  option: string;
+}
+
+export interface IDropdownProps {
+  options: IOptionsProps[];
+  width?: string;
+  onChange: (value: string) => void;
+}
+
+export const Dropdown: React.FC<IDropdownProps> = ({
+  options,
+  width,
+  onChange,
+}) => {
+  const dropdownId = uuidv4();
+
+  const [selectedValue, setSelectedValue] = useState<string>('');
+
+  useEffect(() => {
+    const element = document.getElementById(`rpgui-dropdown-${dropdownId}`);
+    const dropdownValue = _RPGUI.get_value(element);
+    setSelectedValue(dropdownValue);
+
+    element?.addEventListener('change', (event: any) => {
+      setSelectedValue(event?.target.value);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (selectedValue) {
+      onChange(selectedValue);
+    }
+  }, [selectedValue]);
+
+  return (
+    <select
+      id={`rpgui-dropdown-${dropdownId}`}
+      style={{ width: width }}
+      className="rpgui-dropdown"
+    >
+      {options.map((option) => {
+        return (
+          <option key={option.id} value={option.value}>
+            {option.option}
+          </option>
+        );
+      })}
+    </select>
+  );
+};

package/src/components/Input.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface IInputProps
+  extends React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {}
+
+export const Input: React.FC<IInputProps> = ({ ...props }) => {
+  return <input {...props} />;
+};

package/src/components/ProgressBar.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import { RPGUIRoot } from './RPGUIRoot';
+
+export interface IBarProps {
+  max: number;
+  value: number;
+  color: 'red' | 'blue' | 'green';
+}
+
+export const ProgressBar: React.FC<IBarProps> = ({ max, value, color }) => {
+  const calculatePercentageValue = function (max: number, value: number) {
+    if (value > max) {
+      value = max;
+    }
+    return (value * 100) / max;
+  };
+
+  return (
+    <RPGUIRoot>
+      <Container
+        className="rpgui-progress"
+        data-value={calculatePercentageValue(max, value) / 100}
+        data-rpguitype="progress"
+      >
+        <div className=" rpgui-progress-track">
+          <div
+            className={`rpgui-progress-fill ${color} `}
+            style={{
+              left: '0px',
+              width: calculatePercentageValue(max, value) + '%',
+            }}
+          ></div>
+        </div>
+        <div className=" rpgui-progress-left-edge"></div>
+        <div className=" rpgui-progress-right-edge"></div>
+      </Container>
+    </RPGUIRoot>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 20%;
+  justify-content: start;
+  align-items: flex-start;
+`;

package/src/components/RadioButton.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+
+export interface IRadioItems {
+  label: string;
+  value: string;
+}
+
+export interface IRadioProps {
+  name: string;
+  items: IRadioItems[];
+  onChange: (value: string) => void;
+}
+
+export const InputRadio: React.FC<IRadioProps> = ({
+  name,
+  items,
+  onChange,
+}) => {
+  const [selectedValue, setSelectedValue] = useState<string>();
+  const handleClick = () => {
+    let element = document.querySelector(
+      `input[name=${name}]:checked`
+    ) as HTMLInputElement;
+    const elementValue = element.value;
+    setSelectedValue(elementValue);
+  };
+
+  useEffect(() => {
+    if (selectedValue) {
+      onChange(selectedValue);
+    }
+  }, [selectedValue]);
+
+  return (
+    <div id="elemento-radio">
+      {items.map((element) => {
+        return (
+          <>
+            <input
+              key={element.value}
+              className="rpgui-radio"
+              value={element.value}
+              name={name}
+              type="radio"
+            />
+            <label onClick={handleClick}>{element.label}</label>
+            <br />
+          </>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/TextArea.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface ITextArea
+  extends React.DetailedHTMLProps<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HTMLTextAreaElement
+  > {}
+
+export const TextArea: React.FC<ITextArea> = ({ ...props }) => {
+  return <textarea {...props} />;
+};

package/src/components/Truncate.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  maxLines?: number;
+  children: React.ReactNode;
+}
+
+export const Truncate: React.FC<IProps> = ({ maxLines = 1, children }) => {
+  return <Container maxLines={maxLines}>{children}</Container>;
+};
+
+interface IContainerProps {
+  maxLines: number;
+}
+
+const Container = styled.div<IContainerProps>`
+  display: -webkit-box;
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-line-clamp: ${(props) => props.maxLines};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;

package/src/index.tsx

@@ -1,9 +1,15 @@
 export * from './components/Button';
+export * from './components/CheckButton';
+export * from './components/Dropdown';
+export * from './components/Input';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
+export * from './components/RadioButton';
 export * from './components/RangeSlider';
 export * from './components/RPGUIContainer';
 export * from './components/RPGUIRoot';
+export * from './components/TextArea';
+export * from './components/Truncate';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';