diff --git a/packages/cyberstorm-forms/src/forms/UploadPackageForm.module.css b/packages/cyberstorm-forms/src/forms/UploadPackageForm.module.css new file mode 100644 index 000000000..26cc3153a --- /dev/null +++ b/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; +} diff --git a/packages/cyberstorm-forms/src/forms/UploadPackageForm.tsx b/packages/cyberstorm-forms/src/forms/UploadPackageForm.tsx new file mode 100644 index 000000000..7432afa85 --- /dev/null +++ b/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 ( + +
+ upload block here} + /> +
+ + t.name)} + placeholder="Choose a team..." + /> +
+ No teams available? + + Create Team + + } + > + + +
+
+ } + /> + { + return { label: c.name, value: c.identifier }; + })} + placeholder="Choose community..." + fieldFormFormatParser={communitiesParse} + /> + } + /> + + } + /> +
+ + } + /> +
+ + + Reset + + +
+ } + /> +
+ + ); +} + +UploadPackageForm.displayName = "UploadPackageForm"; diff --git a/packages/cyberstorm-forms/src/index.ts b/packages/cyberstorm-forms/src/index.ts index a3a9912fb..d80c50ab7 100644 --- a/packages/cyberstorm-forms/src/index.ts +++ b/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"; diff --git a/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.module.css b/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.module.css index acab2ff80..2a8fdc30b 100644 --- a/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.module.css +++ b/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); } diff --git a/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.tsx b/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.tsx index ccff568f2..4d2f5e14e 100644 --- a/packages/cyberstorm/src/components/Layout/Developers/PackageUpload/PackageUploadLayout.tsx +++ b/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 ( } header={} - 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 />} /> ); } diff --git a/packages/thunderstore-api/src/fetch/packageUpload.ts b/packages/thunderstore-api/src/fetch/packageUpload.ts new file mode 100644 index 000000000..9a14332a0 --- /dev/null +++ b/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), + }, + }); +} diff --git a/packages/thunderstore-api/src/index.ts b/packages/thunderstore-api/src/index.ts index 57b7a635d..cef0b6d1f 100644 --- a/packages/thunderstore-api/src/index.ts +++ b/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"; diff --git a/packages/ts-api-react-forms/src/index.ts b/packages/ts-api-react-forms/src/index.ts index d19267261..66f7b1da7 100644 --- a/packages/ts-api-react-forms/src/index.ts +++ b/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"; diff --git a/packages/ts-api-react-forms/src/schema.ts b/packages/ts-api-react-forms/src/schema.ts index 251c266f7..8d7de9c2a 100644 --- a/packages/ts-api-react-forms/src/schema.ts +++ b/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), +});