Create better separation between packages

Create separate packages for forms & API related logic where it makes
sense. The key point to consider when creating packages is what are the
dependency relations between them. For example, the cyberstorm component
library does not have to depend on the react hook form library, but we
still need to implement the forms somewhere. As such, it makes the most
sense to spliti forms related components to their own package.

This is not a final solution, but a significant improvement to what was
in place prior.

packages/cyberstorm-forms/.gitignore

@@ -0,0 +1,3 @@
+/dist/
+/node_modules/
+/tsconfig.tsbuildinfo

packages/cyberstorm-forms/README.md

@@ -0,0 +1,8 @@
+# cyberstorm-forms
+
+Cyberstorm form components
+
+## Scripts
+
+- `yarn run build`: Builds the project
+- `yarn run dev`: Builds the project & watches files for changes, triggering a rebuild

packages/cyberstorm-forms/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@thunderstore/cyberstorm-forms",
+  "version": "0.1.0",
+  "description": "Cyberstorm form components",
+  "repository": "https://github.com/thunderstore-io/thunderstore-ui/",
+  "main": "dist/thunderstore-cyberstorm-forms.cjs.js",
+  "module": "dist/thunderstore-cyberstorm-forms.esm.js",
+  "types": "dist/thunderstore-cyberstorm-forms.cjs.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "dependencies": {
+    "@thunderstore/cyberstorm": "*",
+    "@types/react": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
+    "zod": "^3.22.2"
+  },
+  "devDependencies": {
+    "typescript-plugin-css-modules": "^3.4.0"
+  }
+}

packages/cyberstorm-forms/src/components/FormSubmitButton.module.css

@@ -0,0 +1,9 @@
+.spinningIcon {
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}

packages/cyberstorm-forms/src/components/FormSubmitButton.tsx

@@ -0,0 +1,35 @@
+import { Button } from "@thunderstore/cyberstorm";
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
+import { useFormState } from "react-hook-form";
+import styles from "./FormSubmitButton.module.css";
+
+const SubmitButtonContent = React.memo((props: { isSubmitting: boolean }) => {
+  if (props.isSubmitting) {
+    return (
+      <Button.ButtonIcon iconClasses={styles.spinningIcon}>
+        <FontAwesomeIcon icon={faArrowsRotate} />
+      </Button.ButtonIcon>
+    );
+  } else {
+    return <Button.ButtonLabel>Create</Button.ButtonLabel>;
+  }
+});
+
+export function FormSubmitButton() {
+  const { isSubmitting, disabled } = useFormState();
+
+  return (
+    <Button.Root
+      type="submit"
+      paddingSize="large"
+      colorScheme="success"
+      disabled={isSubmitting || disabled}
+    >
+      <SubmitButtonContent isSubmitting={isSubmitting} />
+    </Button.Root>
+  );
+}
+
+FormSubmitButton.displayName = "FormSubmitButton";

packages/cyberstorm-forms/src/components/FormTextInput.module.css

@@ -0,0 +1,5 @@
+.errorMessage {
+  color: #f1385a;
+  font-weight: 500;
+  font-size: 0.75rem;
+}

packages/cyberstorm-forms/src/components/FormTextInput.tsx

@@ -0,0 +1,40 @@
+import { z, ZodObject } from "zod";
+import { ZodRawShape } from "zod/lib/types";
+import { Path, useController } from "react-hook-form";
+import { TextInput } from "@thunderstore/cyberstorm";
+import styles from "./FormTextInput.module.css";
+
+export type FormTextInputProps<
+  Schema extends ZodObject<Z>,
+  Z extends ZodRawShape
+> = {
+  // The schema is required to allow TS to infer valid values for the name field
+  schema: Schema;
+  name: Path<z.infer<Schema>>;
+  placeholder?: string;
+};
+export function FormTextInput<
+  Schema extends ZodObject<Z>,
+  Z extends ZodRawShape
+>({ name, placeholder }: FormTextInputProps<Schema, Z>) {
+  const {
+    field,
+    fieldState: { isDirty, invalid, error },
+    formState: { isSubmitting, disabled },
+  } = useController({ name });
+
+  return (
+    <>
+      <TextInput
+        {...field}
+        ref={field.ref}
+        placeholder={placeholder}
+        color={isDirty ? (invalid ? "red" : "green") : undefined}
+        disabled={isSubmitting || disabled}
+      />
+      {error && <span className={styles.errorMessage}>{error.message}</span>}
+    </>
+  );
+}
+
+FormTextInput.displayName = "FormTextInput";

packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.module.css → packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css

@@ -25,19 +25,3 @@
   padding-top: var(--space--16);
   border-top: var(--border);
 }
-
-.spinningIcon {
-  animation: rotate 2s linear infinite;
-}
-
-.errorMessage {
-  color: #f1385a;
-  font-weight: 500;
-  font-size: 0.75rem;
-}
-
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}

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

@@ -0,0 +1,46 @@
+"use client";
+import styles from "./CreateTeamForm.module.css";
+import { createTeam } from "@thunderstore/thunderstore-api";
+import {
+  ApiForm,
+  createTeamFormSchema,
+} from "@thunderstore/ts-api-react-forms";
+import {
+  FormSubmitButton,
+  FormTextInput,
+  useFormToaster,
+} from "@thunderstore/cyberstorm-forms";
+
+export function CreateTeamForm() {
+  const toaster = useFormToaster({
+    successMessage: "Team created",
+  });
+
+  return (
+    <ApiForm
+      {...toaster}
+      schema={createTeamFormSchema}
+      endpoint={createTeam}
+      formProps={{ className: styles.root }}
+    >
+      <div className={styles.dialog}>
+        <div className={styles.dialogText}>
+          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>
+        <div>
+          <FormTextInput
+            schema={createTeamFormSchema}
+            name={"name"}
+            placeholder={"ExampleName"}
+          />
+        </div>
+      </div>
+      <div className={styles.footer}>
+        <FormSubmitButton />
+      </div>
+    </ApiForm>
+  );
+}
+
+CreateTeamForm.displayName = "CreateTeamForm";

packages/cyberstorm-forms/src/index.ts

@@ -0,0 +1,4 @@
+export { useFormToaster } from "./useFormToaster";
+export { FormSubmitButton } from "./components/FormSubmitButton";
+export { FormTextInput } from "./components/FormTextInput";
+export { CreateTeamForm } from "./forms/CreateTeamForm";

packages/cyberstorm-forms/src/types.d.ts

@@ -0,0 +1 @@
+declare module "*.module.css";

packages/cyberstorm-forms/src/useFormToaster.ts

@@ -0,0 +1,30 @@
+import { useToast } from "@thunderstore/cyberstorm/src/components/Toast/Provider";
+
+export type UseFormToasterArgs = {
+  successMessage: string;
+};
+export type UseFormToasterReturn = {
+  onSubmitSuccess: () => void;
+  onSubmitError: () => void;
+};
+export function useFormToaster({
+  successMessage,
+}: UseFormToasterArgs): UseFormToasterReturn {
+  const toast = useToast();
+
+  return {
+    onSubmitSuccess: () => {
+      toast.addToast({
+        variant: "success",
+        message: successMessage,
+        duration: 30000,
+      });
+    },
+    onSubmitError: () => {
+      toast.addToast({
+        variant: "danger",
+        message: "Unknown error occurred. The error has been logged",
+      });
+    },
+  };
+}

packages/cyberstorm-forms/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "ES2020",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "removeComments": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
+    "composite": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      }
+    ]
+  },
+  "include": ["./src/**/*.tsx", "./src/**/*.ts"],
+  "exclude": ["node_modules"]
+}

packages/cyberstorm/package.json

@@ -24,7 +24,6 @@
     "@fortawesome/pro-solid-svg-icons": "6.2.0",
     "@fortawesome/pro-thin-svg-icons": "6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@hookform/resolvers": "^3.3.2",
     "@radix-ui/react-checkbox": "^1.0.1",
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-dropdown-menu": "^2.0.1",
@@ -40,12 +39,10 @@
     "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",
-    "use-debounce": "^9.0.4",
-    "zod": "^3.22.2"
+    "use-debounce": "^9.0.4"
   },
   "devDependencies": {
     "typescript-plugin-css-modules": "^3.4.0"