temp

packages/cyberstorm/src/components/Forms/UploadPackageForm/UploadPackageForm.module.css

@@ -34,6 +34,12 @@
   animation: rotate 2s linear infinite;
 }
 
+.errorMessage {
+  color: #f1385a;
+  font-weight: 500;
+  font-size: 0.75rem;
+}
+
 @keyframes rotate {
   100% {
     transform: rotate(360deg);

packages/cyberstorm/src/components/Forms/UploadPackageForm/UploadPackageForm.tsx

@@ -2,46 +2,36 @@
 import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
 import { faPlus } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useController, useForm, Form, Controller } from "react-hook-form";
+import { useController, useForm, Controller } from "react-hook-form";
 import * as Button from "../../Button";
-import { TextInput } from "../../TextInput/TextInput";
 import { useToast } from "../../Toast/Provider";
 import styles from "./UploadPackageForm.module.css";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { isErrorResponse } from "../../../utils/type_guards";
-import { useEffect } from "react";
 import { SettingItem } from "../../SettingItem/SettingItem";
 import { CreateTeamForm } from "./../CreateTeamForm/CreateTeamForm";
 import { Switch } from "../../Switch/Switch";
 import * as Dialog from "../../Dialog/Dialog";
-import { SearchSelect } from "../../SearchSelect/SearchSelect";
+import { MultiSelect } from "../../MultiSelect/MultiSelect";
+import {
+  FormErrorResponse,
+  isFormErrorResponse,
+} from "../../../utils/type_guards";
+import React from "react";
 
 export function UploadPackageForm() {
   const toast = useToast();
 
-  //   <TextInput
-  //   {...teamName.field}
-  //   ref={teamName.field.ref}
-  //   placeholder={"ExampleTeamName"}
-  //   color={
-  //     teamName.fieldState.isDirty
-  //       ? teamName.fieldState.invalid
-  //         ? "red"
-  //         : "green"
-  //       : undefined
-  //   }
-  //   disabled={isSubmitting}
-  // />
-
   const schema = z.object({
     nsfw: z.boolean(),
-    communities: z.string().array(),
+    communities: z.array(z.object({ label: z.string(), value: z.string() })),
   });
 
   const {
     control,
     formState: { isSubmitting, errors },
+    handleSubmit,
+    setError,
   } = useForm<z.infer<typeof schema>>({
     defaultValues: {
       nsfw: false,
@@ -55,55 +45,69 @@ export function UploadPackageForm() {
     name: "communities",
   });
 
-  // We have to do this because the RHF Form component is in beta and it
-  // doesn't have a callback prop like "onValidation" that could take in
-  // the generalized addToast error informing block.
-  useEffect(() => {
-    // if (errors.teamName) {
-    //   console.log(errors);
-    //   toast.addToast({
-    //     variant: "danger",
-    //     message: errors.teamName.message,
-    //     duration: 30000,
-    //   });
-    // }
-  }, [errors]);
+  const onSubmit = async (data: z.infer<typeof schema>) => {
+    // SESSION TODO: Add sessionid here
+    const session = { sessionid: "74hmbkylkgqge1ne22tzuvzuz6u51tdg" };
 
-  return (
-    <Form
-      control={control}
-      action="https://thunderstore.io/api/team/create"
-      method="post"
-      onSubmit={() => {
-        toast.addToast({ variant: "info", message: "Starting package upload" });
-      }}
-      onSuccess={(response) => {
-        console.log(response);
+    const payload = JSON.stringify(data);
+    let response = undefined;
+    try {
+      // TODO: Change to dev env url
+      response = await fetch(
+        `http://thunderstore.temp/api/cyberstorm/teams/create/`,
+        {
+          method: "POST",
+          headers: {
+            authorization: `Session ${session.sessionid}`,
+            "Content-Type": "application/json",
+          },
+          body: payload,
+        }
+      );
+    } catch (e) {
+      toast.addToast({
+        variant: "danger",
+        message: "There was a problem reaching the server",
+        duration: 30000,
+      });
+    }
+
+    if (response) {
+      const responseJson = await response.json();
+      if (response.ok) {
+        toast.addToast({ variant: "success", message: "Package submitted" });
+      } else if (isFormErrorResponse(responseJson)) {
+        const errors = responseJson as FormErrorResponse;
+        Object.keys(errors).forEach((key) => {
+          // Hardcoded because types are hard
+          const k = key as "nsfw" | "communities";
+          errors[key].forEach((message) => {
+            setError(k, { type: "manual", message: message });
+          });
+        });
+      } else {
+        // TODO: Add sentry error here
         toast.addToast({
-          variant: "success",
-          message: "Package submission successful",
+          variant: "danger",
+          message: "Skidaddle skidoodle the server gave you a noodle",
+          duration: 30000,
         });
-      }}
-      onError={(response) => {
-        if (isErrorResponse(response)) {
-          toast.addToast({
-            variant: "danger",
-            message: response.error.message,
-            duration: 30000,
-          });
-        } else {
-          // TODO: Add sentry error here
-          console.log("TODO: Sentry error logging missing!");
-          toast.addToast({
-            variant: "danger",
-            message: "Unhandled form response error",
-            duration: 30000,
-          });
-        }
-      }}
-      validateStatus={(status) => status === 200}
-      className={styles.root}
-    >
+      }
+    }
+  };
+
+  const options = [
+    { label: "Asd", value: "asd" },
+    { label: "Asd2", value: "asd2" },
+    { label: "Asd3", value: "asd3" },
+  ];
+
+  React.useEffect(() => {
+    console.log(communitiesField.field.value);
+  }, [communitiesField.field.value]);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className={styles.root}>
       <div className={styles.root}>
         <SettingItem
           title="Upload file"
@@ -134,22 +138,24 @@ export function UploadPackageForm() {
           title="Communities"
           description="Select communities you want your package to be listed under. Current community is selected by default."
           content={
-            <SearchSelect
-              {...communitiesField.field}
-              options={[
-                { label: "Asd", value: "asd" },
-                { label: "Asd2", value: "asd2" },
-                { label: "Asd3", value: "asd3" },
-              ]}
-              // color={
-              //   communitiesField.fieldState.isDirty
-              //     ? communitiesField.fieldState.invalid
-              //       ? "red"
-              //       : "green"
-              //     : undefined
-              // }
-              // disabled={isSubmitting}
-            />
+            <>
+              <MultiSelect
+                {...communitiesField.field}
+                options={options}
+                placeholder="Select communities..."
+                color={
+                  communitiesField.fieldState.isDirty
+                    ? communitiesField.fieldState.invalid
+                      ? "red"
+                      : "green"
+                    : undefined
+                }
+                disabled={isSubmitting}
+              />
+              <span className={styles.errorMessage}>
+                {errors.communities?.message}
+              </span>
+            </>
           }
         />
         <SettingItem
@@ -205,6 +211,6 @@ export function UploadPackageForm() {
           }
         />
       </div>
-    </Form>
+    </form>
   );
 }

packages/cyberstorm/src/components/MultiSelect/MultiSelect.module.css

@@ -1,10 +1,46 @@
 .selectBox {
   display: flex;
-  flex: 1 0 0;
-  gap: 1rem;
+  flex-direction: row;
   align-items: center;
-  height: 2.75rem;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
-  background: rgb(67 67 132 / 0.32);
+  width: 100%;
+  padding: var(--space--10) var(--space--14);
+  border: var(--border-width--2) solid var(--border-color);
+
+  border-radius: var(--border-radius--8);
+  font-weight: var(--font-weight-medium);
+
+  font-size: var(--font-size--l);
+  line-height: normal;
+  background-color: var(--color-surface--4);
+
+  --border-color: transparent;
+
+  transition: ease-out 300ms;
+}
+
+.selectBox:hover {
+  --border-color: var(--color-border--highlight);
+}
+
+.selectBox:focus-within {
+  color: var(--color-text--default);
+  background-color: var(--color-black);
+
+  --border-color: var(--color-border--highlight);
+}
+
+.selectBox[data-color="red"] {
+  --border-color: var(--color-red--5);
+}
+
+.selectBox[data-color="red"]:hover {
+  --border-color: var(--color-red--3);
+}
+
+.selectBox[data-color="green"] {
+  --border-color: var(--color-cyber-green--50);
+}
+
+.selectBox[data-color="green"]:hover {
+  --border-color: var(--color-cyber-green--80);
 }

packages/cyberstorm/src/components/MultiSelect/MultiSelect.tsx

@@ -15,15 +15,15 @@ type Props = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange: (v: any) => void;
   onBlur: () => void;
-  value: Option[];
-  disabled: boolean;
+  disabled?: boolean;
   name: string;
-  placeholder: string;
+  placeholder?: string;
+  color?: "red" | "green";
 };
 
 export const MultiSelect = React.forwardRef<HTMLDivElement, Props>(
   (props, ref) => {
-    const { options, onChange, onBlur, placeholder } = props;
+    const { options, onChange, onBlur, placeholder, color } = props;
 
     const [list, setList] = React.useState<Option[]>([]);
 
@@ -57,7 +57,7 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, Props>(
       <div ref={ref} onBlur={onBlur}>
         <DropDown
           trigger={
-            <div className={styles.selectBox}>
+            <div className={styles.selectBox} data-color={color}>
               {list.length === 0 ? placeholder : null}
               {list.map((item, key) => (
                 <Button.Root