From 51ce98f5e91ae2c8afd20d035a63c40f92961fea Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 13 Jul 2024 14:17:04 -0400
Subject: [PATCH] Added copy button and description input type

---
 .../src/Components/TextFields/Field/index.css |  28 ++++-
 .../src/Components/TextFields/Field/index.jsx |  77 ++++++++++----
 Client/src/Pages/PlayGround/PlayGround.jsx    | 100 +++++++++++-------
 3 files changed, 139 insertions(+), 66 deletions(-)

diff --git a/Client/src/Components/TextFields/Field/index.css b/Client/src/Components/TextFields/Field/index.css
index 08a22a384..802eff6b0 100644
--- a/Client/src/Components/TextFields/Field/index.css
+++ b/Client/src/Components/TextFields/Field/index.css
@@ -4,12 +4,14 @@
 .field h3.MuiTypography-root,
 .field h5.MuiTypography-root,
 .field input,
+.field textarea,
 .field .input-error {
   font-size: var(--env-var-font-size-medium);
 }
 .field h3.MuiTypography-root,
 .field h5.MuiTypography-root,
-.field input {
+.field input,
+.field textarea {
   color: var(--env-var-color-5);
 }
 .field h3.MuiTypography-root {
@@ -28,22 +30,42 @@
   opacity: 0.8;
   padding-right: var(--env-var-spacing-1-minus);
 }
-.field .MuiInputBase-root {
+.field .MuiInputBase-root:has(input) {
   height: 34px;
 }
 .field .MuiInputBase-root:has(.MuiInputAdornment-root) {
   padding-right: var(--env-var-spacing-1-minus);
 }
+.field .MuiInputBase-root:has(.MuiInputAdornment-root > .MuiButtonBase-root) {
+  padding-right: 0;
+}
+.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root {
+  padding: 0 var(--env-var-spacing-1-minus);
+  font-size: var(--env-var-font-size-medium);
+  border-radius: 0;
+  height: 34px;
+}
+.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root:hover {
+  border-color: var(--env-var-color-29);
+}
 .field input {
   height: 100%;
   padding: 0 var(--env-var-spacing-1-minus);
 }
+.field .MuiInputBase-root:has(textarea) {
+  padding: var(--env-var-spacing-1-minus);
+}
 .field .MuiOutlinedInput-root fieldset {
   border-color: var(--env-var-color-29);
   border-radius: var(--env-var-radius-1);
 }
 .field:not(:has(.input-error))
-  .MuiOutlinedInput-root:hover:not(:has(input:focus))
+  .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus))
   fieldset {
   border-color: var(--env-var-color-29);
 }
diff --git a/Client/src/Components/TextFields/Field/index.jsx b/Client/src/Components/TextFields/Field/index.jsx
index 7b4ad77af..8f84dbfec 100644
--- a/Client/src/Components/TextFields/Field/index.jsx
+++ b/Client/src/Components/TextFields/Field/index.jsx
@@ -8,7 +8,10 @@ import {
 } from "@mui/material";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import Visibility from "@mui/icons-material/Visibility";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import Button from "../../Button";
 import "./index.css";
+import { useState } from "react";
 
 const Field = ({
   type = "text",
@@ -18,6 +21,7 @@ const Field = ({
   isOptional,
   isVisible,
   setVisibility,
+  hasCopy,
   autoComplete,
   placeholder,
   value,
@@ -27,6 +31,13 @@ const Field = ({
 }) => {
   const theme = useTheme();
 
+  // TODO - are we using this feature anywhere ?
+  const [copy, setCopy] = useState(false);
+  const handleCopy = () => {
+    setCopy(true);
+    setTimeout(() => setCopy(false), 1000);
+  };
+
   return (
     <Stack gap={theme.gap.xs} className={`field field-${type}`}>
       {label && (
@@ -41,6 +52,8 @@ const Field = ({
         id={id}
         autoComplete={autoComplete}
         placeholder={placeholder}
+        multiline={type === "description"}
+        rows={type === "description" ? 4 : 1}
         value={value}
         onChange={onChange}
         disabled={disabled}
@@ -57,28 +70,48 @@ const Field = ({
               <Typography component="h5">https://</Typography>
             </Stack>
           ),
-          endAdornment: type === "password" && (
-            <InputAdornment position="end">
-              <IconButton
-                aria-label="toggle password visibility"
-                onClick={() => setVisibility((show) => !show)}
-                tabIndex={-1}
-                sx={{
-                  color: theme.palette.section.borderColor,
-                  padding: `calc(${theme.gap.xs} / 2)`,
-                  "&:focus": {
-                    outline: "none",
-                  },
-                  "& .MuiTouchRipple-root": {
-                    pointerEvents: "none",
-                    display: "none",
-                  },
-                }}
-              >
-                {!isVisible ? <VisibilityOff /> : <Visibility />}
-              </IconButton>
-            </InputAdornment>
-          ),
+          endAdornment:
+            type === "password" ? (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={() => setVisibility((show) => !show)}
+                  tabIndex={-1}
+                  sx={{
+                    color: theme.palette.section.borderColor,
+                    padding: `calc(${theme.gap.xs} / 2)`,
+                    "&:focus": {
+                      outline: "none",
+                    },
+                    "& .MuiTouchRipple-root": {
+                      pointerEvents: "none",
+                      display: "none",
+                    },
+                  }}
+                >
+                  {!isVisible ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ) : (
+              hasCopy && (
+                <InputAdornment position="end">
+                  <Button
+                    level="tertiary"
+                    label={copy ? "Copied" : "Copy"}
+                    img={<ContentCopyIcon />}
+                    onClick={handleCopy}
+                    sx={{
+                      borderLeft: `solid 1px ${theme.palette.section.borderColor}`,
+                      lineHeight: 0,
+                      "& .MuiTouchRipple-root": {
+                        pointerEvents: "none",
+                        display: "none",
+                      },
+                    }}
+                  />
+                </InputAdornment>
+              )
+            ),
         }}
       />
       {error && (
diff --git a/Client/src/Pages/PlayGround/PlayGround.jsx b/Client/src/Pages/PlayGround/PlayGround.jsx
index 247146362..208addb5b 100644
--- a/Client/src/Pages/PlayGround/PlayGround.jsx
+++ b/Client/src/Pages/PlayGround/PlayGround.jsx
@@ -1,12 +1,8 @@
 import React from "react";
-import EmailTextField from "../../Components/TextFields/Email/EmailTextField";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
-import WebsiteTextField from "../../Components/TextFields/Website/WebsiteTextField";
-import DescriptionTextField from "../../Components/TextFields/Description/DescriptionTextField";
 import PlayGroundCharts from "./PlayGround-Charts";
 import PlayGroundPopupModals from "./PlayGround-Popup-Modals";
 import PlayGroundTooltips from "./PlayGround-Tooltips";
+import Field from "../../Components/TextFields/Field";
 
 // This Component is just for the development and test
 // purposes and just to see what my components look like while development
@@ -15,49 +11,71 @@ function PlayGround() {
   return (
     <div>
       {/* Default state of Email Text Fields */}
-      <EmailTextField
-        error={false}
-        placeholder="olivia@untitledui.com"
-        id="outlined-basic"
-        helperText="This is a hint text to help user."
-      />
-      {/* Email Text Field when validation error occures */}
-      <EmailTextField
-        error={true}
-        placeholder="olivia@untitledui.com"
-        id="outlined-basic"
-        icon={<ErrorOutlineIcon style={{ fill: "red" }} />}
-        helperText="This is an error message"
-      />
-      {/* Email Text Field while mouse hover */}
-      <EmailTextField
-        error={false}
-        placeholder="olivia@untitledui.com"
-        id="outlined-basic"
-        icon={<HelpOutlineIcon />}
-        helperText="This is a hint text to help user."
-      />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "10px",
+          maxWidth: "400px",
+          padding: "10px",
+        }}
+      >
+        <Field
+          type="email"
+          id="outlined-basic"
+          label="Email"
+          placeholder="olivia@untitledui.com"
+        />
+        {/* Email Text Field when validation error occures */}
+        <Field
+          type="email"
+          id="outlined-basic"
+          label="Email"
+          placeholder="olivia@untitledui.com"
+          error="This is an error message"
+        />
+      </div>
 
       <hr />
-      {/* Now, illustration of the Website text fields */}
 
-      <WebsiteTextField hintText="This is a hint text to help user." />
-      <WebsiteTextField
-        hasCopyButton={true}
-        hintText="This is a hint text to help user."
-      />
+      {/* Now, illustration of the Website text fields */}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "10px",
+          maxWidth: "400px",
+          padding: "10px",
+        }}
+      >
+        <Field type="url" label="Website" />
+        <Field type="url" label="Website" hasCopy={true} />
+      </div>
 
       <hr />
       {/* Now, illustration of the Description text fields */}
 
-      <DescriptionTextField
-        hasError={false}
-        hintText="This is a hint text to help user."
-      />
-      <DescriptionTextField
-        hasError={true}
-        hintText="This is a hint text to help user."
-      />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "10px",
+          maxWidth: "400px",
+          padding: "10px",
+        }}
+      >
+        <Field
+          type="description"
+          label="Description"
+          placeholder="Enter a description... "
+        />
+        <Field
+          type="description"
+          label="Description"
+          placeholder="Enter a description... "
+          error="This is an error message"
+        />
+      </div>
       <hr />
       <PlayGroundCharts />
       <hr />