@fluid-app/fluid-cli-portal 0.1.31 → 0.1.33

package/templates/base/src/screens/ExampleForm.tsx

@@ -1,177 +0,0 @@
-/**
- * Example Form Screen
- *
- * Demonstrates how to build forms in a portal using
- * React Hook Form + Zod for validation.
- *
- * Uncomment the nav entry and import in portal.config.ts to enable.
- */
-
-import { z } from "zod";
-import { useZodForm } from "@fluid-app/ui-primitives";
-
-// =============================================================================
-// Zod Schema
-// Define your form validation schema here
-// =============================================================================
-
-const contactFormSchema = z.object({
-  name: z.string().min(1, "Name is required").max(100, "Name is too long"),
-  email: z.string().email("Invalid email address"),
-  subject: z
-    .string()
-    .min(1, "Subject is required")
-    .max(200, "Subject is too long"),
-  message: z
-    .string()
-    .min(10, "Message must be at least 10 characters")
-    .max(2000, "Message is too long"),
-});
-
-type ContactFormData = z.infer<typeof contactFormSchema>;
-
-// =============================================================================
-// Example Form Screen
-// =============================================================================
-
-export function ExampleFormScreen() {
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting, isSubmitSuccessful },
-  } = useZodForm<ContactFormData>(contactFormSchema);
-
-  const onSubmit = async (_data: ContactFormData) => {
-    // Replace with your API call, e.g.:
-    // const result = await apiClient.post("/contacts", _data);
-
-    // Simulate API delay
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
-    reset(undefined, { keepIsSubmitSuccessful: true });
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div>
-        <h1 className="text-foreground text-2xl font-bold">Example Form</h1>
-        <p className="text-muted-foreground mt-1 text-sm">
-          Demonstrates React Hook Form + Zod validation. Replace this with your
-          own form.
-        </p>
-      </div>
-
-      {/* Form Card */}
-      <div className="border-border bg-background rounded-lg border p-6 shadow-sm">
-        {isSubmitSuccessful ? (
-          <div className="border-accent bg-accent text-accent-foreground rounded-lg border p-4 text-sm">
-            Form submitted successfully!
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-            {/* Name field */}
-            <div>
-              <label
-                htmlFor="name"
-                className="text-foreground block text-sm font-medium"
-              >
-                Name
-              </label>
-              <input
-                id="name"
-                type="text"
-                {...register("name")}
-                className="border-input bg-background text-foreground focus:border-ring focus:ring-ring mt-1 block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:ring-1 focus:outline-none"
-                placeholder="Jane Smith"
-              />
-              {errors.name && (
-                <p className="text-destructive mt-1 text-sm">
-                  {errors.name.message}
-                </p>
-              )}
-            </div>
-
-            {/* Email field */}
-            <div>
-              <label
-                htmlFor="email"
-                className="text-foreground block text-sm font-medium"
-              >
-                Email
-              </label>
-              <input
-                id="email"
-                type="email"
-                {...register("email")}
-                className="border-input bg-background text-foreground focus:border-ring focus:ring-ring mt-1 block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:ring-1 focus:outline-none"
-                placeholder="jane@example.com"
-              />
-              {errors.email && (
-                <p className="text-destructive mt-1 text-sm">
-                  {errors.email.message}
-                </p>
-              )}
-            </div>
-
-            {/* Subject field */}
-            <div>
-              <label
-                htmlFor="subject"
-                className="text-foreground block text-sm font-medium"
-              >
-                Subject
-              </label>
-              <input
-                id="subject"
-                type="text"
-                {...register("subject")}
-                className="border-input bg-background text-foreground focus:border-ring focus:ring-ring mt-1 block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:ring-1 focus:outline-none"
-                placeholder="Order inquiry"
-              />
-              {errors.subject && (
-                <p className="text-destructive mt-1 text-sm">
-                  {errors.subject.message}
-                </p>
-              )}
-            </div>
-
-            {/* Message field */}
-            <div>
-              <label
-                htmlFor="message"
-                className="text-foreground block text-sm font-medium"
-              >
-                Message
-              </label>
-              <textarea
-                id="message"
-                rows={4}
-                {...register("message")}
-                className="border-input bg-background text-foreground focus:border-ring focus:ring-ring mt-1 block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:ring-1 focus:outline-none"
-                placeholder="Tell us more..."
-              />
-              {errors.message && (
-                <p className="text-destructive mt-1 text-sm">
-                  {errors.message.message}
-                </p>
-              )}
-            </div>
-
-            {/* Submit button */}
-            <div className="flex justify-end">
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className="bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-ring focus:ring-offset-background rounded-md px-4 py-2 text-sm font-medium shadow-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-              >
-                {isSubmitting ? "Submitting..." : "Submit"}
-              </button>
-            </div>
-          </form>
-        )}
-      </div>
-    </div>
-  );
-}