Add UploadPackageForm form and separate form functionality from layout

packages/cyberstorm-forms/src/forms/UploadPackageForm.module.css

@@ -0,0 +1,42 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap--48);
+}
+
+.line {
+  border-bottom: var(--border-width--px) solid var(--color-surface--4);
+}
+
+.submit {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap--16);
+}
+
+.submit > :last-child {
+  flex-grow: 1;
+}
+
+.teamContentWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space--12);
+}
+
+.createTeamModalLink {
+  color: #39e9aa;
+  font-weight: var(--font-weight-medium);
+  background: transparent;
+}
+
+.createTeamSentence {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space--8);
+  color: var(--text-tertiary, #9c9cc4);
+  font-weight: var(--font-weight-semibold);
+
+  font-size: 0.875rem;
+  line-height: 1.7;
+}

packages/cyberstorm-forms/src/forms/UploadPackageForm.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import styles from "./UploadPackageForm.module.css";
+import {
+  ApiForm,
+  uploadPackageFormSchema,
+} from "@thunderstore/ts-api-react-forms";
+import {
+  FormSubmitButton,
+  FormMultiSelectSearch,
+  FormSelectSearch,
+  useFormToaster,
+  CreateTeamForm,
+  FormSwitch,
+} from "@thunderstore/cyberstorm-forms";
+import { Dialog, Button } from "@thunderstore/cyberstorm";
+import { SettingItem } from "@thunderstore/cyberstorm/src/components/SettingItem/SettingItem";
+import { packageUpload } from "@thunderstore/thunderstore-api";
+import { usePromise } from "@thunderstore/use-promise";
+import { useDapper } from "@thunderstore/dapper";
+
+const options = [
+  { label: "Asd", value: "asd asd" },
+  { label: "Asd2", value: "asd2 asd2" },
+  { label: "Asd3", value: "asd3 asd3" },
+  { label: "Asd4", value: "asd4 asd4" },
+  { label: "Asd5", value: "asd5 asd5" },
+  { label: "Asd6", value: "asd6 asd6" },
+];
+
+export function UploadPackageForm() {
+  const dapper = useDapper();
+  const user = usePromise(dapper.getCurrentUser, []);
+  const communities = usePromise(dapper.getCommunities, []);
+
+  const toaster = useFormToaster({
+    successMessage: "Package submitted",
+  });
+
+  function communitiesParse(
+    selected: {
+      label: string;
+      value: string;
+    }[]
+  ) {
+    return selected.map((x) => x.value);
+  }
+
+  function communityCategoriesParse(
+    selected: {
+      label: string;
+      value: string;
+    }[]
+  ) {
+    const communityCategories: { [key: string]: string[] } = {};
+    // TODO: Instead of getting the value from splitting a string, have it be passed in an object
+    selected.map(
+      (x) => (communityCategories["community_identifier"] = [x.value])
+    );
+    return communityCategories;
+  }
+
+  return (
+    <ApiForm
+      {...toaster}
+      schema={uploadPackageFormSchema}
+      endpoint={packageUpload}
+      formProps={{ className: styles.root }}
+    >
+      <div className={styles.root}>
+        <SettingItem
+          title="Upload file"
+          description="Upload your package as a ZIP file."
+          content={<>upload block here</>}
+        />
+        <div className={styles.line} />
+        <SettingItem
+          title="Team"
+          description="Select the team you want your package to be associated with."
+          content={
+            <div className={styles.teamContentWrapper}>
+              <FormSelectSearch
+                name="team"
+                schema={uploadPackageFormSchema}
+                options={user.teams.map((t) => t.name)}
+                placeholder="Choose a team..."
+              />
+              <div className={styles.createTeamSentence}>
+                <span>No teams available?</span>
+                <Dialog.Root
+                  title="Create Team"
+                  trigger={
+                    <button className={styles.createTeamModalLink}>
+                      Create Team
+                    </button>
+                  }
+                >
+                  <CreateTeamForm />
+                </Dialog.Root>
+              </div>
+            </div>
+          }
+        />
+        <SettingItem
+          title="Communities"
+          description="Select communities you want your package to be listed under."
+          content={
+            <FormMultiSelectSearch
+              name="communities"
+              schema={uploadPackageFormSchema}
+              options={communities.results.map((c) => {
+                return { label: c.name, value: c.identifier };
+              })}
+              placeholder="Choose community..."
+              fieldFormFormatParser={communitiesParse}
+            />
+          }
+        />
+        <SettingItem
+          title="Categories"
+          description="Select descriptive categories to help people discover your package."
+          content={
+            <FormMultiSelectSearch
+              name="community_categories"
+              schema={uploadPackageFormSchema}
+              options={options}
+              placeholder="Choose categories..."
+              fieldFormFormatParser={communityCategoriesParse}
+            />
+          }
+        />
+        <div className={styles.line} />
+        <SettingItem
+          title="Contains NSFW content"
+          description='A "NSFW" -tag will be applied to your package.'
+          content={
+            <FormSwitch
+              schema={uploadPackageFormSchema}
+              name="has_nsfw_content"
+            />
+          }
+        />
+        <div className={styles.line} />
+        <SettingItem
+          title="Submit"
+          description='Double-check your selections and hit "Submit" when you are ready!'
+          content={
+            <div className={styles.submit}>
+              <Button.Root colorScheme="danger">
+                <Button.ButtonLabel>Reset</Button.ButtonLabel>
+              </Button.Root>
+              <FormSubmitButton text="Submit" />
+            </div>
+          }
+        />
+      </div>
+    </ApiForm>
+  );
+}
+
+UploadPackageForm.displayName = "UploadPackageForm";

packages/cyberstorm-forms/src/index.ts

@@ -5,3 +5,4 @@ export { FormMultiSelectSearch } from "./components/FormMultiSelectSearch";
 export { FormSwitch } from "./components/FormSwitch";
 export { FormTextInput } from "./components/FormTextInput";
 export { CreateTeamForm } from "./forms/CreateTeamForm";
+export { UploadPackageForm } from "./forms/UploadPackageForm";

packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.module.css

@@ -1,5 +1,10 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap--48);
+}
+
 .line {
-  margin: var(--space--24) 0;
   border-bottom: var(--border-width--px) solid var(--color-surface--4);
 }
 

packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.tsx

@@ -1,20 +1,14 @@
 "use client";
-import styles from "./PackageUploadLayout.module.css";
 import { Title } from "../../../Title/Title";
 import { BreadCrumbs } from "../../../BreadCrumbs/BreadCrumbs";
 import { PackageUploadLink } from "../../../Links/Links";
-import { SettingItem } from "../../../SettingItem/SettingItem";
-import { TextInput } from "../../../TextInput/TextInput";
-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 "@thunderstore/cyberstorm-forms";
-import { Dialog } from "../../../..";
+import { UploadPackageForm } from "@thunderstore/cyberstorm-forms";
 
 /**
  * Cyberstorm PackageUpload Layout
  */
+
 export function PackageUploadLayout() {
   return (
     <BaseLayout
@@ -24,67 +18,7 @@ export function PackageUploadLayout() {
         </BreadCrumbs>
       }
       header={<Title text="Upload Package" />}
-      mainContent={
-        <>
-          <SettingItem
-            title="Upload file"
-            description="Upload your package as a ZIP file."
-            content={<TextInput />}
-          />
-          <div className={styles.line} />
-          <SettingItem
-            title="Team"
-            description="No teams available?"
-            additionalLeftColumnContent={
-              <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 />}
-          />
-          <SettingItem
-            title="Communities"
-            description="Select communities you want your package to be listed under. Current community is selected by default."
-            content={<TextInput />}
-          />
-          <SettingItem
-            title="Categories"
-            description="Select descriptive categories to help people discover your package."
-            content={<TextInput />}
-          />
-          <div className={styles.line} />
-          <SettingItem
-            title="Contains NSFW content"
-            description='A "NSFW" -tag will be applied to your package.'
-            content=""
-          />
-          <div className={styles.line} />
-          <SettingItem
-            title="Submit"
-            description='Double-check your selections and hit "Submit" when you are ready!'
-            content={
-              <div className={styles.submit}>
-                <Button.Root colorScheme="danger">
-                  <Button.ButtonLabel>Reset</Button.ButtonLabel>
-                </Button.Root>
-                <Button.Root colorScheme="accent">
-                  <Button.ButtonLabel>Submit</Button.ButtonLabel>
-                </Button.Root>
-              </div>
-            }
-          />
-        </>
-      }
+      mainContent={<UploadPackageForm />}
     />
   );
 }

packages/thunderstore-api/src/fetch/packageUpload.ts

@@ -0,0 +1,34 @@
+import { RequestConfig } from "../index";
+import { apiFetch2 } from "../apiFetch";
+
+export type PackageUploadApiArgs = {
+  // author_name: string;
+  // upload_uuid: string;
+  team: string;
+  community_categories: { [key: string]: string[] };
+  communities: string[];
+  has_nsfw_content?: boolean;
+};
+
+export function packageUpload(
+  config: RequestConfig,
+  data: PackageUploadApiArgs
+) {
+  const path = "api/experimental/submission/submit/";
+
+  // TODO: Add these datas in form
+  const todoData = {
+    ...data,
+    upload_uuid: "123",
+    author_name: "root",
+  };
+
+  return apiFetch2({
+    config,
+    path,
+    request: {
+      method: "POST",
+      body: JSON.stringify(todoData),
+    },
+  });
+}

packages/thunderstore-api/src/index.ts

@@ -17,4 +17,5 @@ export * from "./fetch/teamDetails";
 export * from "./fetch/teamMembers";
 export * from "./fetch/teamServiceAccounts";
 export * from "./fetch/teamCreate";
+export * from "./fetch/packageUpload";
 export * from "./errors";

packages/ts-api-react-forms/src/index.ts

@@ -2,4 +2,4 @@ export { ApiForm } from "./ApiForm";
 export { getErrorFormKey, handleFormApiErrors } from "./errors";
 export { useApiForm } from "./useApiForm";
 export type { UseApiFormReturn, UseApiFormArgs } from "./useApiForm";
-export { createTeamFormSchema } from "./schema";
+export { createTeamFormSchema, uploadPackageFormSchema } from "./schema";

packages/ts-api-react-forms/src/schema.ts

@@ -5,3 +5,13 @@ export const createTeamFormSchema = z.object({
     .string({ required_error: "Team name is required" })
     .min(1, { message: "Team name is required" }),
 });
+
+// TODO: Add these manually at the form
+// author_name: z.string(),
+// upload_uuid: z.string(),
+export const uploadPackageFormSchema = z.object({
+  team: z.string(),
+  community_categories: z.record(z.array(z.string())),
+  communities: z.array(z.string()).nonempty(),
+  has_nsfw_content: z.boolean().default(false),
+});