From c9785f8f577812d003284f168e0cf55d856b35b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Sat, 28 Aug 2021 10:11:20 -0300
Subject: [PATCH 1/2] add input component

---
 app/javascript/src/components/Input/Input.tsx | 30 +++++++++++++++++++
 app/javascript/src/components/Input/index.ts  |  0
 .../RemoveStakeModal/RemoveStakeModal.tsx     |  8 ++---
 .../Home/StakeOrderModal/StakeOrderModal.tsx  |  8 ++---
 .../Exchange/ExchangePanel/ExchangePanel.tsx  | 10 ++-----
 5 files changed, 37 insertions(+), 19 deletions(-)
 create mode 100644 app/javascript/src/components/Input/Input.tsx
 create mode 100644 app/javascript/src/components/Input/index.ts

diff --git a/app/javascript/src/components/Input/Input.tsx b/app/javascript/src/components/Input/Input.tsx
new file mode 100644
index 0000000..29f5b00
--- /dev/null
+++ b/app/javascript/src/components/Input/Input.tsx
@@ -0,0 +1,30 @@
+import type { ChangeEvent } from "react";
+import React from "react";
+
+export type Props = React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>;
+
+const baseStyles =
+  "rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
+
+const Component: React.ForwardRefRenderFunction<unknown, Props> = (props) => {
+  const { className = "", onChange, ...rest } = props;
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!onChange) return;
+
+    onChange(e);
+  };
+
+  return (
+    <input
+      {...rest}
+      className={`${baseStyles} ${className}`}
+      onChange={handleChange}
+    />
+  );
+};
+
+export const Input = React.forwardRef<unknown, Props>(Component);
diff --git a/app/javascript/src/components/Input/index.ts b/app/javascript/src/components/Input/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/app/javascript/src/pages/Dashboard/Vault/RemoveStakeModal/RemoveStakeModal.tsx b/app/javascript/src/pages/Dashboard/Vault/RemoveStakeModal/RemoveStakeModal.tsx
index e32a0be..bd80abb 100644
--- a/app/javascript/src/pages/Dashboard/Vault/RemoveStakeModal/RemoveStakeModal.tsx
+++ b/app/javascript/src/pages/Dashboard/Vault/RemoveStakeModal/RemoveStakeModal.tsx
@@ -1,14 +1,11 @@
 import BigNumber from "bignumber.js";
 import type { ChangeEvent, FC } from "react";
 import React, { useState } from "react";
-import cx from "classnames";
 import { useRelayEnvironment } from "react-relay";
 
 import { Modal } from "../../../../components";
 import { commitCreateStakeRemoveOrderMutation } from "./commitCreateStakeRemoveOrder";
-
-const inputBaseStyles =
-  "rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
+import { Input } from "../../../../components/Input/Input";
 
 type RemoveStakeModal = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -72,8 +69,7 @@ export const RemoveStakeModal: FC<RemoveStakeModal> = ({
       <span className="mb-2">CAKE disponível: {stakedCake}</span>
       <form onSubmit={onSubmit} className="bg-white py-2">
         <div className="flex flex-row">
-          <input
-            className={cx(inputBaseStyles)}
+          <Input
             type="number"
             value={amountInput}
             onChange={handleInvestInput}
diff --git a/app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx b/app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx
index 6ccd473..d71cf78 100644
--- a/app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx
+++ b/app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx
@@ -1,20 +1,17 @@
 import type { ChangeEvent, FC } from "react";
 import React, { useState } from "react";
-import cx from "classnames";
 import { BigNumber } from "bignumber.js";
 import { useRelayEnvironment } from "react-relay";
 
 import { Modal } from "../../../components";
 import { commitCreateStakeOrderMutation } from "./createStakeOrder";
+import { Input } from "../../../components/Input/Input";
 
 type Props = {
   poolName: string;
   balance: string;
 };
 
-const inputBaseStyles =
-  "rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
-
 export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
   const environment = useRelayEnvironment();
   const [isOpen, setIsOpen] = useState(false);
@@ -72,8 +69,7 @@ export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
         <span className="mb-2">CAKE disponível: {balance}</span>
         <form onSubmit={onSubmit} className="bg-white py-2">
           <div className="flex flex-row">
-            <input
-              className={cx(inputBaseStyles)}
+            <Input
               type="number"
               value={investAmountInput}
               onChange={handleInvestInput}
diff --git a/app/javascript/src/pages/Orders/Exchange/ExchangePanel/ExchangePanel.tsx b/app/javascript/src/pages/Orders/Exchange/ExchangePanel/ExchangePanel.tsx
index ce98d57..05f17bb 100644
--- a/app/javascript/src/pages/Orders/Exchange/ExchangePanel/ExchangePanel.tsx
+++ b/app/javascript/src/pages/Orders/Exchange/ExchangePanel/ExchangePanel.tsx
@@ -11,6 +11,7 @@ import type { ExchangePanel_fiatBalances$key } from "./__generated__/ExchangePan
 import type { ExchangePanel_balances$key } from "./__generated__/ExchangePanel_balances.graphql";
 import { commitCreateSellCryptoOrderMutation } from "./createSellCryptoOrder";
 import { commitCreateBuyCryptoOrderMutation } from "./createBuyCryptoOrder";
+import { Input } from "../../../../components/Input/Input";
 
 const tabBaseStyles =
   "w-full text-base font-bold text-black px-4 py-2 focus:ring-blue-500";
@@ -18,9 +19,6 @@ const tabBaseStyles =
 const selectedTabStyles =
   "bg-blue-600 hover:bg-blue-700 rounded-l-frounded-full text-white";
 
-const inputBaseStyles =
-  "rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent mb-3";
-
 type Props = {
   fiatBalancesRefs: ExchangePanel_fiatBalances$key;
   balancesRefs: ExchangePanel_balances$key;
@@ -161,8 +159,7 @@ export const ExchangePanel: FC<Props> = ({
         <div className="flex flex-row">
           {exchangeOption === "BUY" ? (
             <>
-              <input
-                className={cx(inputBaseStyles)}
+              <Input
                 type="number"
                 value={fiatDock}
                 onChange={handleFiatAmountChange}
@@ -178,8 +175,7 @@ export const ExchangePanel: FC<Props> = ({
             </>
           ) : (
             <>
-              <input
-                className={cx(inputBaseStyles)}
+              <Input
                 type="number"
                 value={cryptoDock}
                 onChange={handleCryptoAmountChange}

From 0b78ef504de2fa9f31c7fd901e13876e62051dcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Sat, 28 Aug 2021 10:27:38 -0300
Subject: [PATCH 2/2] add button component

---
 .../src/components/Button/Button.tsx          | 42 +++++++++++++++++++
 app/javascript/src/components/Button/index.ts |  1 +
 app/javascript/src/components/Input/Input.tsx |  2 +-
 app/javascript/src/components/Input/index.ts  |  1 +
 app/javascript/src/components/index.ts        |  2 +
 .../RemoveStakeModal/RemoveStakeModal.tsx     | 11 ++---
 .../Home/StakeOrderModal/StakeOrderModal.tsx  | 10 ++---
 .../Exchange/ExchangePanel/ExchangePanel.tsx  |  6 +--
 8 files changed, 56 insertions(+), 19 deletions(-)
 create mode 100644 app/javascript/src/components/Button/Button.tsx
 create mode 100644 app/javascript/src/components/Button/index.ts

diff --git a/app/javascript/src/components/Button/Button.tsx b/app/javascript/src/components/Button/Button.tsx
new file mode 100644
index 0000000..ffb7609
--- /dev/null
+++ b/app/javascript/src/components/Button/Button.tsx
@@ -0,0 +1,42 @@
+import type { MouseEvent } from "react";
+import React from "react";
+import cn from "classnames";
+
+type Props = React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  variant?: "primary" | "dangeour";
+};
+
+const baseStyles =
+  "cursor-pointer py-2 px-4 disabled:opacity-50 disabled:cursor-default text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg";
+
+const Component: React.ForwardRefRenderFunction<unknown, Props> = (props) => {
+  const { className = "", variant = "primary", onClick, ...rest } = props;
+
+  const handleClick = (
+    e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
+  ) => {
+    e.stopPropagation();
+
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  const variantStyle =
+    variant === "primary"
+      ? "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200"
+      : "bg-red-600 hover:bg-red-700 focus:ring-red-500 focus:ring-offset-red-200";
+
+  return (
+    <button
+      {...rest}
+      className={cn(baseStyles, className, variantStyle)}
+      onClick={(e) => handleClick(e)}
+    />
+  );
+};
+
+export const Button = React.forwardRef<unknown, Props>(Component);
diff --git a/app/javascript/src/components/Button/index.ts b/app/javascript/src/components/Button/index.ts
new file mode 100644
index 0000000..e22c29a
--- /dev/null
+++ b/app/javascript/src/components/Button/index.ts
@@ -0,0 +1 @@
+export * from "./Button";
diff --git a/app/javascript/src/components/Input/Input.tsx b/app/javascript/src/components/Input/Input.tsx
index 29f5b00..526b53c 100644
--- a/app/javascript/src/components/Input/Input.tsx
+++ b/app/javascript/src/components/Input/Input.tsx
@@ -1,7 +1,7 @@
 import type { ChangeEvent } from "react";
 import React from "react";
 
-export type Props = React.DetailedHTMLProps<
+type Props = React.DetailedHTMLProps<
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
 >;
diff --git a/app/javascript/src/components/Input/index.ts b/app/javascript/src/components/Input/index.ts
index e69de29..be66d76 100644
--- a/app/javascript/src/components/Input/index.ts
+++ b/app/javascript/src/components/Input/index.ts
@@ -0,0 +1 @@
+export * from "./Input";
diff --git a/app/javascript/src/components/index.ts b/app/javascript/src/components/index.ts
index aaab6bd..882dd77 100644
--- a/app/javascript/src/components/index.ts
+++ b/app/javascript/src/components/index.ts
@@ -1,3 +1,5 @@
 export * from "./Navbar";
 export * from "./SideNav";
 export * from "./Modal";
+export * from "./Input";
+export * from "./Button";
diff --git a/app/javascript/src/pages/Dashboard/Vault/RemoveStakeModal/RemoveStakeModal.tsx b/app/javascript/src/pages/Dashboard/Vault/RemoveStakeModal/RemoveStakeModal.tsx
index bd80abb..4ae91eb 100644
--- a/app/javascript/src/pages/Dashboard/Vault/RemoveStakeModal/RemoveStakeModal.tsx
+++ b/app/javascript/src/pages/Dashboard/Vault/RemoveStakeModal/RemoveStakeModal.tsx
@@ -3,9 +3,8 @@ import type { ChangeEvent, FC } from "react";
 import React, { useState } from "react";
 import { useRelayEnvironment } from "react-relay";
 
-import { Modal } from "../../../../components";
+import { Button, Modal, Input } from "../../../../components";
 import { commitCreateStakeRemoveOrderMutation } from "./commitCreateStakeRemoveOrder";
-import { Input } from "../../../../components/Input/Input";
 
 type RemoveStakeModal = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -86,13 +85,9 @@ export const RemoveStakeModal: FC<RemoveStakeModal> = ({
         {avaliableCake.isEqualTo(0) && (
           <span className="text-red-500 mb-1">Você não possuí saldo.</span>
         )}
-        <button
-          className="cursor-pointer py-2 px-4 disabled:opacity-50 disabled:cursor-default bg-red-600 hover:bg-red-700 focus:ring-red-500 focus:ring-offset-red-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
-          disabled={!stakeAvaliable}
-          type="submit"
-        >
+        <Button variant="dangeour" disabled={!stakeAvaliable} type="submit">
           Remover Stake
-        </button>
+        </Button>
       </form>
     </Modal>
   );
diff --git a/app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx b/app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx
index d71cf78..32b634d 100644
--- a/app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx
+++ b/app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { BigNumber } from "bignumber.js";
 import { useRelayEnvironment } from "react-relay";
 
-import { Modal } from "../../../components";
+import { Button, Modal } from "../../../components";
 import { commitCreateStakeOrderMutation } from "./createStakeOrder";
 import { Input } from "../../../components/Input/Input";
 
@@ -86,13 +86,9 @@ export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
           {avaliableCake.isEqualTo(0) && (
             <span className="text-red-500 mb-1">Você não possuí saldo.</span>
           )}
-          <button
-            className="cursor-pointer py-2 px-4 disabled:opacity-50 disabled:cursor-default bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
-            disabled={!stakeAvaliable}
-            type="submit"
-          >
+          <Button disabled={!stakeAvaliable} type="submit">
             Fazer Stake
-          </button>
+          </Button>
         </form>
       </Modal>
     </div>
diff --git a/app/javascript/src/pages/Orders/Exchange/ExchangePanel/ExchangePanel.tsx b/app/javascript/src/pages/Orders/Exchange/ExchangePanel/ExchangePanel.tsx
index 05f17bb..3bece62 100644
--- a/app/javascript/src/pages/Orders/Exchange/ExchangePanel/ExchangePanel.tsx
+++ b/app/javascript/src/pages/Orders/Exchange/ExchangePanel/ExchangePanel.tsx
@@ -11,7 +11,7 @@ import type { ExchangePanel_fiatBalances$key } from "./__generated__/ExchangePan
 import type { ExchangePanel_balances$key } from "./__generated__/ExchangePanel_balances.graphql";
 import { commitCreateSellCryptoOrderMutation } from "./createSellCryptoOrder";
 import { commitCreateBuyCryptoOrderMutation } from "./createBuyCryptoOrder";
-import { Input } from "../../../../components/Input/Input";
+import { Input, Button } from "../../../../components";
 
 const tabBaseStyles =
   "w-full text-base font-bold text-black px-4 py-2 focus:ring-blue-500";
@@ -192,13 +192,13 @@ export const ExchangePanel: FC<Props> = ({
           )}
         </div>
 
-        <button
+        <Button
           className="cursor-pointer py-2 px-4 disabled:opacity-50 disabled:cursor-default bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
           type="submit"
           disabled={submitDisabled}
         >
           {exchangeOption === "BUY" ? "Comprar" : "Vender"} CAKE
-        </button>
+        </Button>
       </form>
     </div>
   );