Fixxed bugs From form and Fields

2025-08-16 12:37:38 +05:30
parent acc2d2c767
commit a7f4b59c36
5 changed files with 285 additions and 169 deletions
@@ -89,7 +89,7 @@ const helpCls = "mt-2 text-sm text-gray-500 dark:text-neutral-500";
 const errCls = "text-sm text-red-600 mt-2";
 const groupCls = "relative flex items-stretch";
 const addonBase =
-    "px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-neutral-700 dark:border-neutral-700 dark:text-neutral-400";
+    "px-4 inline-flex items-center min-w-fit rounded-md border border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-neutral-700 dark:border-neutral-700 dark:text-neutral-400";
 const controlWrap = "relative";
 ---

@@ -144,8 +144,6 @@ const controlWrap = "relative";
                            }),
                            p.prefixText && "rounded-l-none",
                            p.suffixText && "rounded-r-none",
-                            p.iconLeft && "rounded-l-none",
-                            p.iconRight && "rounded-r-none",
                            p.error &&
                                "border-danger focus-visible:ring-danger/40",
                        )}
@@ -217,8 +215,6 @@ const controlWrap = "relative";
                            "block w-full border border-gray-200 shadow-sm rounded-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 file:bg-gray-50 file:border-0 file:me-4 file:py-3 file:px-4 dark:file:bg-neutral-700 dark:file:text-neutral-400",
                            p.prefixText && "rounded-l-none",
                            p.suffixText && "rounded-r-none",
-                            p.iconLeft && "rounded-l-none",
-                            p.iconRight && "rounded-r-none",
                            p.error &&
                                "border-danger focus-visible:ring-danger/40",
                        )}
@@ -281,8 +277,6 @@ const controlWrap = "relative";
                            : p.size === "lg"
                              ? "text-base p-4"
                              : "text-sm p-3",
-                        p.iconLeft && "rounded-l-none",
-                        p.iconRight && "rounded-r-none",
                        p.error && "border-danger focus-visible:ring-danger/40",
                    )}
                    data-initial={typeof p.value === "string" ? p.value : ""}
@@ -309,9 +303,7 @@ const controlWrap = "relative";
                    }
                    class={cn(
                        selectBase({ size: p.size ?? "md" }),
-                        "appearance-none bg-[length:16px_16px] pr-9",
-                        p.iconLeft && "rounded-l-none",
-                        p.iconRight && "rounded-r-none",
+                        "appearance-none bg-none pr-9",
                        p.error && "border-danger focus-visible:ring-danger/40",
                    )}
                >
@@ -18,12 +18,13 @@ interface Props extends HTMLAttributes<"div"> {
    required?: boolean;
    disabled?: boolean;
    options: Option[];
-    value?: string[]; // initial selected values
-    placeholder?: string; // shown when empty
-    searchable?: boolean; // show search box in dropdown
-    clearable?: boolean; // show clear (x) button
-    maxSelections?: number; // optional selection cap
+    value?: string[];
+    placeholder?: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    maxSelections?: number;
    size?: "sm" | "md" | "lg";
+    display?: "text" | "chips";
    class?: string;
 }

@@ -32,8 +33,9 @@ const p = Astro.props as Props;
 const fieldId = p.id ?? p.name;
 const descId = p.description ? `${fieldId}-desc` : undefined;
 const errId = `${fieldId}-err`;
+
 const selected = new Set(p.value ?? []);
-const summary = selected.size
+const summarySSR = selected.size
    ? Array.from(selected)
          .map((v) => p.options.find((o) => o.value === v)?.label ?? v)
          .join(", ")
@@ -47,11 +49,15 @@ const sizeCls =
          : "h-10 px-3 text-sm";

 const controlCls =
-    "py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600";
+    "py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm " +
+    "focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none " +
+    "dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600";

 const chipBase =
    "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs bg-muted text-foreground";
+
 const containerId = `ms-${Math.random().toString(36).slice(2)}`;
+const displayMode = p.display ?? "text";
 ---

 <div class={cn("space-y-1.5", p.class)} data-field={p.name} id={containerId}>
@@ -67,9 +73,6 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
    }

    <div class="relative">
-        {
-            /** Visible control is a readonly input so validation styles apply here */
-        }
        <input
            id={fieldId}
            type="text"
@@ -79,21 +82,28 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
            aria-describedby={[descId, p.error ? errId : undefined]
                .filter(Boolean)
                .join(" ") || undefined}
-            class={cn(controlCls, sizeCls, "pr-10 cursor-pointer")}
+            class={cn(
+                controlCls,
+                sizeCls,
+                "pr-10 cursor-pointer",
+                displayMode === "chips" && "pl-3",
+            )}
            placeholder={p.placeholder ?? "Select..."}
-            value={summary}
+            value={displayMode === "text" ? summarySSR : ""}
            readonly
            data-control
            {...p.disabled ? { disabled: true } : {}}
        />

-        {/** Chevron / Clear */}
        <div class="absolute inset-y-0 right-0 flex items-center gap-1 pr-2">
            {
-                p.clearable !== false && selected.size > 0 && !p.disabled && (
+                p.clearable !== false && !p.disabled && (
                    <button
                        type="button"
-                        class="p-1 rounded hover:bg-muted"
+                        class={cn(
+                            "p-1 rounded hover:bg-muted",
+                            selected.size === 0 && "hidden",
+                        )}
                        data-ms-clear
                        aria-label="Clear selection"
                    >
@@ -111,28 +121,15 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
            </button>
        </div>

-        {
-            /** Selected chips (optional; comment out if you prefer only summary text) */
-        }
-        {
-            selected.size > 0 && (
-                <div class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 flex flex-wrap gap-1 pr-14">
-                    {Array.from(selected)
-                        .slice(0, 3)
-                        .map((v) => {
-                            const lab =
-                                p.options.find((o) => o.value === v)?.label ??
-                                v;
-                            return <span class={chipBase}>{lab}</span>;
-                        })}
-                    {selected.size > 3 && (
-                        <span class={chipBase}>+{selected.size - 3}</span>
-                    )}
-                </div>
-            )
-        }
+        <div
+            data-ms-chips
+            class={cn(
+                "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 flex flex-wrap gap-1 pr-14",
+                displayMode === "chips" ? "" : "hidden",
+            )}
+        >
+        </div>

-        {/** Dropdown */}
        <div
            class="absolute border-border bg-popover text-popover-foreground shadow-lg hidden mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700"
            id={`${containerId}-panel`}
@@ -198,19 +195,25 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
                <button
                    type="button"
                    class="text-sm text-primary hover:underline disabled:opacity-50"
-                    data-ms-select-all>Select all</button
+                    data-ms-select-all
                >
+                    Select all
+                </button>
                <div class="flex items-center gap-2">
                    <button
                        type="button"
                        class="text-sm text-muted-foreground hover:underline"
-                        data-ms-cancel>Cancel</button
+                        data-ms-cancel
                    >
+                        Cancel
+                    </button>
                    <button
                        type="button"
                        class="text-sm text-primary hover:underline"
-                        data-ms-apply>Apply</button
+                        data-ms-apply
                    >
+                        Apply
+                    </button>
                </div>
            </div>
        </div>
@@ -236,6 +239,7 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
        fieldId,
        name: p.name,
        maxSelections: p.maxSelections ?? null,
+        displayMode,
    }}
 >
    const root = document.getElementById(containerId);
@@ -248,39 +252,72 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
    const btnCan = root.querySelector("[data-ms-cancel]");
    const btnApp = root.querySelector("[data-ms-apply]");
    const sch = root.querySelector("[data-ms-search]");
+    const chips = root.querySelector("[data-ms-chips]");
+
    const checks = Array.from(
        root.querySelectorAll(
            `input[type="checkbox"][name="${CSS.escape(name)}"]`,
        ),
    );
    let open = false;
+    const origPlaceholder = input.getAttribute("placeholder") || "Select...";

-    function setExpanded(
-        v,
-        { focusSearch = false, refocusInput = false } = {},
-    ) {
+    function setExpanded(v, { focusSearch = false } = {}) {
        open = v;
        input.setAttribute("aria-expanded", String(open));
        panel.classList.toggle("hidden", !open);
        if (open && focusSearch) sch?.focus();
-        if (!open && refocusInput) input.focus();
+    }
+
+    function makeChip(label) {
+        const span = document.createElement("span");
+        span.className =
+            "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs bg-muted text-foreground";
+        span.textContent = label;
+        return span;
+    }
+
+    function toggleClear(show) {
+        if (!btnClr) return;
+        btnClr.classList.toggle("hidden", !show);
    }

    function updateSummary() {
        const selected = checks.filter((c) => c.checked);
-        const labels = selected
-            .slice(0, 3)
-            .map(
-                (c) =>
-                    c
-                        .closest("[data-ms-item]")
-                        ?.querySelector("span")
-                        ?.textContent?.trim() || c.value,
-            );
-        const extra = Math.max(0, selected.length - 3);
-        input.value = selected.length
-            ? labels.join(", ") + (extra ? ` +${extra}` : "")
-            : "";
+        const labels = selected.map(
+            (c) =>
+                c
+                    .closest("[data-ms-item]")
+                    ?.querySelector("span")
+                    ?.textContent?.trim() || c.value,
+        );
+
+        if (displayMode === "text") {
+            const preview = labels.slice(0, 3).join(", ");
+            const extra = Math.max(0, labels.length - 3);
+            input.value = labels.length
+                ? preview + (extra ? ` +${extra}` : "")
+                : "";
+            input.placeholder = labels.length ? "" : origPlaceholder;
+            if (chips) {
+                chips.innerHTML = "";
+                chips.classList.add("hidden");
+            }
+        } else {
+            input.value = "";
+            input.placeholder = labels.length ? "" : origPlaceholder;
+            if (!chips) return;
+            chips.innerHTML = "";
+            const max = 3;
+            labels
+                .slice(0, max)
+                .forEach((lab) => chips.appendChild(makeChip(lab)));
+            const extra = labels.length - max;
+            if (extra > 0) chips.appendChild(makeChip(`+${extra}`));
+            chips.classList.toggle("hidden", labels.length === 0);
+        }
+
+        toggleClear(labels.length > 0);
    }

    function enforceMax() {
@@ -308,7 +345,6 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
        updateSummary();
    }

-    // Open/close
    btnTgl?.addEventListener("click", () =>
        setExpanded(!open, { focusSearch: !open }),
    );
@@ -322,21 +358,20 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
        }
    });

-    // Actions
    btnClr?.addEventListener("click", (e) => {
        e.stopPropagation();
        clearAll();
    });
    btnAll?.addEventListener("click", selectAll);
-    btnCan?.addEventListener("click", () => setExpanded(false)); // no refocus
-    btnApp?.addEventListener("click", () => setExpanded(false)); // no refocus
+    btnCan?.addEventListener("click", () => setExpanded(false));
+    btnApp?.addEventListener("click", () => setExpanded(false));
+
    list.addEventListener("change", () => {
        enforceMax();
        updateSummary();
        input.dispatchEvent(new Event("change", { bubbles: true }));
    });

-    // Search filter
    sch?.addEventListener("input", () => {
        const q = sch.value.trim().toLowerCase();
        root.querySelectorAll("[data-ms-item]").forEach((li) => {
@@ -345,12 +380,10 @@ const containerId = `ms-${Math.random().toString(36).slice(2)}`;
        });
    });

-    // Close on outside click without refocusing input
    document.addEventListener("click", (e) => {
-        if (!root.contains(e.target)) setExpanded(false); // note: no refocusInput
+        if (!root.contains(e.target)) setExpanded(false);
    });

-    // Init
    enforceMax();
    updateSummary();
 </script>
@@ -1,105 +1,155 @@
 ---
-import Form from "../components/Form.astro";
-import Field from "../components/Field.astro";
+import { Form, Field, MultiSelect } from "@wrnexus/astro";
 import Base from "../layouts/Base.astro";
-import MultiSelect from "../components/MultiSelect.astro";
 ---

 <Base class="p-4">
    <Form
-        title="Create Project"
-        description="Project metadata, constraints, and attachments."
+        title="Job Application"
+        description="Tell us about yourself. Fields marked * are required."
        columns={2}
        schemaName="schema"
        onSubmit="submit"
-        submitLabel="Create Project"
-        submitIcon="mdi:check"
-        actionsAlign="center"
+        submitLabel="Submit Application"
+        submitIcon="mdi:send"
+        actionsAlign="end"
        resetOnSubmit
-        validateOn="blur,change,input"
+        validateOn="input,blur,change"
    >
+        <!-- Applicant -->
        <Field
-            name="projectName"
-            label="Project name"
+            name="firstName"
+            label="First name"
            required
-            iconLeft="mdi:briefcase"
+            iconLeft="mdi:account"
        />
        <Field
-            name="slug"
-            label="Slug"
-            prefixText="https://app.example.com/p/"
-            placeholder="acme-crm"
+            name="lastName"
+            label="Last name"
            required
+            iconLeft="mdi:account"
+        />
+
+        <Field
+            name="email"
+            label="Email"
+            kind="email"
+            required
+            iconLeft="mdi:email"
+        />
+        <Field
+            name="phone"
+            label="Phone"
+            placeholder="+91 98765 43210"
+            iconLeft="mdi:phone"
+        />
+
+        <Field
+            name="portfolio"
+            label="Portfolio URL"
+            kind="text"
+            placeholder="https://example.com"
            iconLeft="mdi:link-variant"
+            class="sm:col-span-2"
        />

+        <!-- Role details -->
        <Field
-            name="teamSize"
-            label="Team size"
-            kind="number"
-            placeholder="e.g., 8"
+            name="role"
+            label="Desired role"
+            kind="select"
+            placeholder="Select a role"
+            options={[
+                { value: "frontend", label: "Frontend Engineer" },
+                { value: "backend", label: "Backend Engineer" },
+                { value: "fullstack", label: "Full-stack Engineer" },
+                { value: "designer", label: "Product Designer" },
+            ]}
            required
-            iconLeft="mdi:account-group"
-        />
-        <Field
-            name="budget"
-            label="Budget (USD)"
-            kind="number"
-            placeholder="Optional"
-            iconLeft="mdi:currency-usd"
        />

-        <Field name="startDate" label="Start date" kind="date" required />
-        <Field name="kickoffTime" label="Kickoff time" kind="time" required />
+        <Field
+            name="experience"
+            label="Years of experience"
+            kind="number"
+            placeholder="e.g., 3"
+            suffixText="yrs"
+            required
+        />

        <MultiSelect
-            name="tags"
-            label="Tags"
+            name="skills"
+            label="Key skills"
+            placeholder="Pick skills"
+            searchable
+            clearable
+            maxSelections={6}
+            value={["javascript"]}
            options={[
-                { value: "web", label: "Web" },
-                { value: "mobile", label: "Mobile" },
-                { value: "api", label: "API" },
-                { value: "ml", label: "ML" },
-                { value: "ops", label: "Ops" },
+                { value: "javascript", label: "JavaScript" },
+                { value: "typescript", label: "TypeScript" },
+                { value: "react", label: "React" },
+                { value: "node", label: "Node.js" },
+                { value: "astro", label: "Astro" },
+                { value: "css", label: "CSS" },
+                { value: "figma", label: "Figma" },
            ]}
-            description="Use Ctrl/Cmd to pick multiple."
            class="sm:col-span-2"
-            required
+            description="Choose up to 6."
        />

        <Field
-            name="visibility"
-            label="Visibility"
+            name="availableFrom"
+            label="Available from"
+            kind="date"
+            required
+        />
+        <Field name="preferredCall" label="Preferred call time" kind="time" />
+
+        <!-- Work auth -->
+        <Field
+            name="workAuth"
+            label="Work Authorization"
            kind="radio"
-            value="private"
+            value="authorized"
            class="sm:col-span-2"
            options={[
-                { value: "private", label: "Private" },
-                { value: "internal", label: "Internal" },
-                { value: "public", label: "Public" },
+                { value: "authorized", label: "Authorized to work" },
+                { value: "requiresVisa", label: "Requires visa sponsorship" },
            ]}
        />

+        <!-- Compensation -->
        <Field
-            name="attachments"
-            label="Attachments"
+            name="salary"
+            label="Expected CTC"
+            kind="number"
+            prefixText="₹"
+            suffixText="LPA"
+            placeholder="e.g., 12"
+            class="sm:col-span-2"
+        />
+
+        <!-- Resume/Cover -->
+        <Field
+            name="resume"
+            label="Resume (PDF)"
            kind="file"
-            multiple
            class="sm:col-span-2"
        />
        <Field
-            name="description"
-            label="Description"
+            name="coverLetter"
+            label="Cover letter"
            kind="textarea"
-            rows={5}
-            placeholder="What are we building?"
+            rows={6}
+            placeholder="A short note about why you’d be a great fit…"
            class="sm:col-span-2"
-            required
        />
+
        <Field
-            name="notify"
-            label="Notify team on create"
-            kind="switch"
+            name="agree"
+            label="I confirm the information provided is accurate"
+            kind="checkbox"
            class="sm:col-span-2"
        />
    </Form>
@@ -108,46 +158,72 @@ import MultiSelect from "../components/MultiSelect.astro";
 <script>
    import { z } from "zod";

-    const fileArray = z.array(z.instanceof(File)).optional();
+    const phoneRegex = /^\+?[0-9\s().-]{7,20}$/i;
+    const urlRegex = /^https?:\/\/.+/i;

-    window.schema = z.object({
-        projectName: z.string().min(3, "Enter at least 3 characters."),
-        slug: z
-            .string()
-            .regex(
-                /^[a-z0-9-]{3,}$/i,
-                "Slug must be 3+ chars; letters, digits, hyphen.",
-            ),
-        teamSize: z.coerce.number().int().min(1, "Team size must be ≥ 1."),
-        budget: z.coerce
-            .number()
-            .positive("Budget must be positive.")
-            .optional()
-            .or(z.nan().transform(() => undefined)),
-        startDate: z.string().min(1, "Start date is required."),
-        kickoffTime: z.string().min(1, "Kickoff time is required."),
-        tags: z.array(z.string()).min(1, "Pick at least one tag."),
-        visibility: z.enum(["private", "internal", "public"], {
-            required_error: "Choose a visibility.",
-        }),
-        // attachments -> array<File> (from our collector when multiple)
-        attachments: fileArray
-            .refine((arr) => !arr || arr.length <= 3, "Max 3 files.")
-            .refine(
-                (arr) => !arr || arr.every((f) => f.size <= 5 * 1024 * 1024),
-                "Files must be ≤ 5MB.",
-            )
-            .refine(
-                (arr) =>
-                    !arr || arr.every((f) => /pdf|png|jpg|jpeg/i.test(f.type)),
-                "Only PDF/PNG/JPG.",
-            ),
-        description: z.string().min(20, "Describe the project (20+ chars)."),
-        notify: z.boolean().optional(),
-    });
+    const resumeSchema = z
+        .union([z.instanceof(File), z.null()])
+        .refine(
+            (f) => f === null || /pdf$/i.test(f.type),
+            "Resume must be a PDF.",
+        )
+        .refine(
+            (f) => f === null || f.size <= 5 * 1024 * 1024,
+            "Max file size is 5MB.",
+        )
+        .optional();
+
+    window.schema = z
+        .object({
+            firstName: z.string().min(2, "Enter at least 2 characters."),
+            lastName: z.string().min(2, "Enter at least 2 characters."),
+            email: z.string().email("Enter a valid email."),
+            phone: z
+                .string()
+                .regex(phoneRegex, "Enter a valid phone.")
+                .optional()
+                .or(z.literal("")),
+            portfolio: z
+                .string()
+                .regex(urlRegex, "Enter a valid URL (http/https).")
+                .optional()
+                .or(z.literal("")),
+            role: z.enum(["frontend", "backend", "fullstack", "designer"], {
+                required_error: "Select a role.",
+            }),
+            experience: z.coerce.number().int().min(0, "Must be 0 or more."),
+            skills: z
+                .array(z.string())
+                .min(1, "Pick at least one skill.")
+                .max(6, "Up to 6 skills."),
+            availableFrom: z.string().min(1, "Pick a date."),
+            preferredCall: z.string().optional().or(z.literal("")),
+            workAuth: z.enum(["authorized", "requiresVisa"]),
+            salary: z.coerce
+                .number()
+                .positive("Enter a positive number.")
+                .optional(),
+            resume: resumeSchema,
+            coverLetter: z
+                .string()
+                .max(1000, "Keep it under 1000 characters.")
+                .optional()
+                .or(z.literal("")),
+            agree: z.literal(true, {
+                errorMap: () => ({ message: "You must confirm to proceed." }),
+            }),
+        })
+        .superRefine((obj, ctx) => {
+            if (obj.workAuth === "requiresVisa" && !obj.coverLetter) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    path: ["coverLetter"],
+                    message: "Please add a note about your visa status.",
+                });
+            }
+        });

    window.submit = async (data: any, form: any) => {
-        console.log("Project Create submit:", data);
-        await new Promise((r) => setTimeout(r, 800));
+        console.log("Application:", data);
    };
 </script>