Add RHF and CreateTeamForm

refs TS-1942, TS-1829
thunderstore-io · Nov 15, 2023 · e8b0132 · e8b0132
1 parent f193c39
commit e8b0132
Show file tree

Hide file tree

Showing 9 changed files with 227 additions and 37 deletions.
diff --git a/packages/cyberstorm/package.json b/packages/cyberstorm/package.json
@@ -38,6 +38,7 @@
     "react": "^18.2.0",
     "react-data-table-component": "^7.5.3",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
     "react-markdown": "^8.0.7",
     "remark-gfm": "^3.0.1",
     "styled-components": "^6.0.0-rc.5",

diff --git a/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.module.css b/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.module.css
@@ -0,0 +1,37 @@
+.createTeamDialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space--24);
+}
+
+.createTeamForm {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.createTeamDialogText {
+  color: var(--color-text--secondary);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size--l);
+  line-height: var(--line-height--l);
+}
+
+.footer {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: var(--gap--16);
+  justify-content: space-between;
+  padding-top: var(--space--16);
+  border-top: var(--border);
+}
+
+.spinningIcon {
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.tsx b/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.tsx
@@ -0,0 +1,118 @@
+"use client";
+import styles from "./CreateTeamForm.module.css";
+import * as Button from "../../Button";
+import { TextInput } from "../../TextInput/TextInput";
+import { useForm, FieldErrors, useController } from "react-hook-form";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
+
+import { useContext } from "react";
+import { ToastContext } from "../../Toast/ToastContext";
+import {
+  faCircleCheck,
+  faCircleExclamation,
+  faOctagonExclamation,
+} from "@fortawesome/pro-solid-svg-icons";
+
+/**
+ * Form for creating a team
+ */
+export function CreateTeamForm() {
+  const useToast = () => useContext(ToastContext);
+  const toast = useToast();
+
+  async function onValid(data: { teamName: string }) {
+    // TODO: Add sending to TS API endpoint
+    toast?.addToast(
+      "info",
+      <FontAwesomeIcon icon={faCircleExclamation} />,
+      "Creating team"
+    );
+    await new Promise((resolve) => {
+      setTimeout(resolve, 1000);
+    });
+    // TODO: Add a toast on response return based on the response
+    toast?.addToast(
+      "success",
+      <FontAwesomeIcon icon={faCircleCheck} />,
+      "Team created"
+    );
+    console.log(JSON.stringify(data));
+  }
+
+  async function onInvalid(
+    errors: FieldErrors<{
+      teamName: string;
+    }>
+  ) {
+    if (errors.teamName) {
+      toast?.addToast(
+        "danger",
+        <FontAwesomeIcon icon={faOctagonExclamation} />,
+        errors.teamName.message,
+        30000
+      );
+    } else {
+      toast?.addToast(
+        "danger",
+        <FontAwesomeIcon icon={faOctagonExclamation} />,
+        "Unknown error",
+        30000
+      );
+    }
+  }
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<{ teamName: string }>({
+    mode: "onSubmit",
+  });
+
+  const teamName = useController({
+    control: control,
+    name: "teamName",
+    rules: {
+      required: "Team name is required",
+    },
+  });
+
+  return (
+    <form
+      onSubmit={handleSubmit(onValid, onInvalid)}
+      className={styles.createTeamForm}
+    >
+      <div className={styles.createTeamDialog}>
+        <div className={styles.createTeamDialogText}>
+          Enter the name of the team you wish to create. Team names can contain
+          the characters a-z A-Z 0-9 _ and must not start or end with an _
+        </div>
+        <TextInput
+          {...teamName.field}
+          placeHolder={"ExampleTeamName"}
+          color={
+            teamName.fieldState.isDirty
+              ? teamName.fieldState.invalid
+                ? "red"
+                : "green"
+              : undefined
+          }
+        />
+      </div>
+      <div className={styles.footer}>
+        <Button.Root type="submit" paddingSize="large" colorScheme="success">
+          {isSubmitting ? (
+            <Button.ButtonIcon iconClasses={styles.spinningIcon}>
+              <FontAwesomeIcon icon={faArrowsRotate} />
+            </Button.ButtonIcon>
+          ) : (
+            <Button.ButtonLabel>Create</Button.ButtonLabel>
+          )}
+        </Button.Root>
+      </div>
+    </form>
+  );
+}
+
+CreateTeamForm.displayName = "CreateTeamForm";
diff --git a/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.tsx b/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.tsx
@@ -9,6 +9,8 @@ import * as Button from "../../../Button/";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { BaseLayout } from "../../BaseLayout/BaseLayout";
+import { CreateTeamForm } from "../../../Forms/CreateTeamForm/CreateTeamForm";
+import { Dialog } from "../../../..";
 
 /**
  * Cyberstorm PackageUpload Layout
@@ -34,14 +36,19 @@ export function PackageUploadLayout() {
             title="Team"
             description="No teams available?"
             additionalLeftColumnContent={
-              <div>
-                <Button.Root>
-                  <Button.ButtonLabel>Create Team</Button.ButtonLabel>
-                  <Button.ButtonIcon>
-                    <FontAwesomeIcon icon={faPlus} />
-                  </Button.ButtonIcon>
-                </Button.Root>
-              </div>
+              <Dialog.Root
+                title="Create Team"
+                trigger={
+                  <Button.Root colorScheme="primary" paddingSize="large">
+                    <Button.ButtonLabel>Create team</Button.ButtonLabel>
+                    <Button.ButtonIcon>
+                      <FontAwesomeIcon icon={faPlus} />
+                    </Button.ButtonIcon>
+                  </Button.Root>
+                }
+              >
+                <CreateTeamForm />
+              </Dialog.Root>
             }
             content={<TextInput />}
           />

diff --git a/packages/cyberstorm/src/components/Layout/Teams/TeamsLayout.tsx b/packages/cyberstorm/src/components/Layout/Teams/TeamsLayout.tsx
@@ -7,14 +7,15 @@ import * as Button from "../../Button/";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleCheck, faPlus } from "@fortawesome/pro-solid-svg-icons";
 import { TeamList } from "./TeamList/TeamList";
-import { TextInput } from "../../TextInput/TextInput";
+import { Dialog } from "../../../index";
 import { PageHeader } from "../BaseLayout/PageHeader/PageHeader";
 import { Alert } from "../../Alert/Alert";
-import { Dialog } from "../../..";
+import { CreateTeamForm } from "../../Forms/CreateTeamForm/CreateTeamForm";
 
 /**
  * View for listing and managing authenticated user's teams.
  */
+
 export function TeamsLayout() {
   return (
     <BaseLayout
@@ -41,21 +42,7 @@ export function TeamsLayout() {
                   </Button.Root>
                 }
               >
-                <>
-                  <div className={styles.createTeamDialog}>
-                    <div className={styles.createTeamDialogText}>
-                      Enter the name of the team you wish to create. Team names
-                      can contain the characters a-z A-Z 0-9 _ and must not
-                      start or end with an _
-                    </div>
-                    <TextInput placeHolder="Team name" />
-                  </div>
-                  <div className={styles.createTeamDialogFooter}>
-                    <Button.Root paddingSize="large" colorScheme="success">
-                      <Button.ButtonLabel>Create</Button.ButtonLabel>
-                    </Button.Root>
-                  </div>
-                </>
+                <CreateTeamForm />
               </Dialog.Root>
             }
             content={

diff --git a/packages/cyberstorm/src/components/TextInput/TextInput.module.css b/packages/cyberstorm/src/components/TextInput/TextInput.module.css
@@ -21,16 +21,12 @@
   background-color: var(--color-surface--4);
 
   --border-color: transparent;
-}
 
-.hasLeftIcon {
-  padding-left: 2.875rem;
+  transition: ease-out 300ms;
 }
 
 .input:hover {
   --border-color: var(--color-border--highlight);
-
-  transition: ease-out 80ms;
 }
 
 .input:focus-within {
@@ -44,6 +40,26 @@
   color: var(--color-text--tertiary);
 }
 
+.input[data-color="red"] {
+  --border-color: var(--color-red--5);
+}
+
+.input[data-color="red"]:hover {
+  --border-color: var(--color-red--3);
+}
+
+.input[data-color="green"] {
+  --border-color: var(--color-cyber-green--50);
+}
+
+.input[data-color="green"]:hover {
+  --border-color: var(--color-cyber-green--80);
+}
+
+.hasLeftIcon {
+  padding-left: 2.875rem;
+}
+
 .leftIcon {
   position: absolute;
   width: 1em;

diff --git a/packages/cyberstorm/src/components/TextInput/TextInput.tsx b/packages/cyberstorm/src/components/TextInput/TextInput.tsx
@@ -1,17 +1,22 @@
 "use client";
-import React from "react";
+import React, { ReactNode } from "react";
 import styles from "./TextInput.module.css";
 import { Icon } from "../Icon/Icon";
 import { classnames } from "../../utils/utils";
 
 export interface TextInputProps {
+  children?: ReactNode;
   placeHolder?: string;
   leftIcon?: JSX.Element;
   id?: string;
   type?: "text" | "email" | "password" | "tel" | "url";
   rightIcon?: JSX.Element;
   value?: string;
-  setValue?: React.Dispatch<React.SetStateAction<string>>;
+  name?: string;
+  color?: string;
+  ref?: (instance: any) => void;
+  onBlur?: (val: any) => void;
+  onChange?: (val: any) => void;
   enterHook?: (value: string) => string | void;
 }
 
@@ -26,7 +31,11 @@ export function TextInput(props: TextInputProps) {
     leftIcon,
     rightIcon,
     value = "",
-    setValue,
+    name,
+    color,
+    ref,
+    onBlur,
+    onChange,
     enterHook,
   } = props;
 
@@ -45,15 +54,19 @@ export function TextInput(props: TextInputProps) {
       ) : null}
       <input
         id={id}
-        type={type}
-        placeholder={placeHolder}
         className={classnames(
           styles.input,
           leftIcon ? styles.hasLeftIcon : null
         )}
-        onChange={(event) => setValue && setValue(event.target.value)}
+        type={type}
+        placeholder={placeHolder}
+        onBlur={onBlur}
+        onChange={onChange}
+        ref={ref}
+        name={name}
         value={value}
         onKeyDown={(e) => onEnter(e)}
+        data-color={color}
       />
       {rightIcon ? (
         <Icon inline wrapperClasses={styles.rightIcon}>

diff --git a/packages/cyberstorm/src/components/Toast/Toast.module.css b/packages/cyberstorm/src/components/Toast/Toast.module.css
@@ -31,12 +31,18 @@
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
+  width: 1.875em;
+  height: 1.875em;
   background-color: transparent;
 }
 
 .closeIcon {
   display: flex;
-  color: var(--color-text--tertiary);
+  align-items: center;
+  justify-content: center;
+  width: 0.875em;
+  height: 0.875em;
+  color: var(--text-color);
 }
 
 .progress {

diff --git a/yarn.lock b/yarn.lock
@@ -14094,6 +14094,11 @@ react-hook-form@^7.34.2:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.9.tgz#84b56ac2f38f8e946c6032ccb760e13a1037c66d"
   integrity sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==
 
+react-hook-form@^7.48.2:
+  version "7.48.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.48.2.tgz#01150354d2be61412ff56a030b62a119283b9935"
+  integrity sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==
+
 react-inspector@^6.0.0:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-6.0.2.tgz#aa3028803550cb6dbd7344816d5c80bf39d07e9d"