@mohasinac/appkit 4.30.18 → 4.31.0

package/dist/features/admin/components/AdminBrandEditorView.js

@@ -1,57 +1,70 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Row } from "@mohasinac/appkit/ui";
-import { useApiMutation } from "@mohasinac/appkit/client";
+/**
+ * Create or edit a brand.
+ *
+ * Fields come from `brandFormSchema`, which used to be declared locally in this
+ * file, unannotated, and — the part that mattered — never executed: the submit
+ * handler checked `name.trim()` and called the mutation. So `website`'s URL rule
+ * had never rejected anything, and the raw `<Input>`s it would have reported on
+ * carry no `name`, which means `applyZodIssues` had nowhere to put an error even
+ * if the parse had run. Both halves are fixed by deriving the form from the
+ * schema: every field is a `Field*` with a name, and the parse gates the save.
+ *
+ * The submit button is no longer `disabled={!name}`. A disabled control with no
+ * explanation cannot tell the admin which field it is waiting on; the schema now
+ * says so, on the field.
+ */
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { z } from "zod";
-import { mediaUrlSchema } from "../../../validation/schemas";
-import { Button, ConfirmDeleteModal, Div, Form, Input, StackedViewShell, Toggle, useToast, } from "../../../ui";
-import { FieldInput, FormErrorSummary } from "../../../ui/forms";
-import { ImageUpload } from "../../media/upload/ImageUpload";
-import { useMediaUpload } from "../../media";
-import { apiClient } from "../../../http";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
-const brandFormSchema = z.object({
-    name: z.string().min(1, "Brand name is required").max(120),
-    slug: z.string().regex(/^[a-z0-9-]+$/i).optional().or(z.literal("")),
-    description: z.string().max(2000).optional().or(z.literal("")),
-    logoURL: mediaUrlSchema.optional().or(z.literal("")),
-    website: z.string().url().optional().or(z.literal("")),
-    country: z.string().max(80).optional().or(z.literal("")),
-    founded: z.number().int().min(1800).max(new Date().getFullYear()).optional(),
-    isActive: z.boolean(),
-    displayOrder: z.number().int().min(0).optional(),
-});
-const __P = {
-    p4: "p-[var(--appkit-space-4)]",
-};
-const __O = {
-    yAuto: "overflow-y-auto",
+import { apiClient } from "../../../http";
+import { ConfirmDeleteModal, Div, StackedViewShell, useToast } from "../../../ui";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
+import { buildSectionsFromSchema } from "../../shell/build-sections";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
+import { useMediaUpload } from "../../media";
+import { ImageUpload } from "../../media/upload/ImageUpload";
+import { brandFormSchema } from "../schemas/admin-editor-forms";
+const __P = { p4: "p-[var(--appkit-space-4)]" };
+const __O = { yAuto: "overflow-y-auto" };
+const EMPTY = {
+    name: "",
+    slug: "",
+    description: "",
+    logoURL: "",
+    website: "",
+    country: "",
+    founded: "",
+    isActive: true,
+    displayOrder: "",
 };
 function toBrandSlug(str) {
-    const base = str.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    const base = str
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
     return base.startsWith("brand-") ? base : `brand-${base}`;
 }
+/** `""` means "not set" — `Number("")` is 0, which is a real display order. */
+function optionalNumber(raw) {
+    return raw.trim() === "" ? undefined : Number(raw);
+}
 export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ...rest }) {
     const isEdit = Boolean(brandId);
-    const [name, setName] = React.useState("");
-    const [slug, setSlug] = React.useState("");
-    const [slugManual, setSlugManual] = React.useState(false);
-    const [description, setDescription] = React.useState("");
-    const [logoURL, setLogoURL] = React.useState("");
-    const [website, setWebsite] = React.useState("");
-    const [country, setCountry] = React.useState("");
-    const [founded, setFounded] = React.useState("");
-    const [isActive, setIsActive] = React.useState(true);
-    const [displayOrder, setDisplayOrder] = React.useState("");
+    const [form, setForm] = React.useState(EMPTY);
     const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
     const { showToast } = useToast();
+    const { upload } = useMediaUpload();
     const brandQuery = useQuery({
         queryKey: ["admin", "brand", brandId],
         queryFn: async () => {
-            const res = await apiClient.get(ADMIN_ENDPOINTS.BRAND_BY_ID(brandId));
-            return res?.data ?? res;
+            const res = (await apiClient.get(ADMIN_ENDPOINTS.BRAND_BY_ID(brandId)));
+            return (res?.data ?? res);
         },
         enabled: isEdit,
     });
@@ -59,39 +72,49 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
         const brand = brandQuery.data;
         if (!brand)
             return;
-        setName(brand.name ?? "");
-        setSlug(brand.slug ?? "");
-        setSlugManual(true);
-        setDescription(brand.description ?? "");
-        setLogoURL(brand.logoURL ?? "");
-        setWebsite(brand.website ?? "");
-        setCountry(brand.country ?? "");
-        setFounded(brand.founded !== undefined ? String(brand.founded) : "");
-        setIsActive(brand.isActive ?? true);
-        setDisplayOrder(brand.displayOrder !== undefined ? String(brand.displayOrder) : "");
+        setForm({
+            name: brand.name ?? "",
+            slug: brand.slug ?? "",
+            description: brand.description ?? "",
+            logoURL: brand.logoURL ?? "",
+            website: brand.website ?? "",
+            country: brand.country ?? "",
+            founded: brand.founded !== undefined ? String(brand.founded) : "",
+            isActive: brand.isActive ?? true,
+            displayOrder: brand.displayOrder !== undefined ? String(brand.displayOrder) : "",
+        });
     }, [brandQuery.data]);
-    const handleNameChange = (value) => {
-        setName(value);
-        if (!slugManual)
-            setSlug(toBrandSlug(value));
-    };
+    const sections = React.useMemo(() => buildSectionsFromSchema(brandFormSchema, {
+        renderers: {
+            logoURL: ({ values, onChange }) => (_jsx(ImageUpload, { label: "Cover image", currentImage: values.logoURL, onUpload: (file) => upload(file, "brands", true, {
+                    type: "brand-logo",
+                    brand: values.name || values.slug,
+                }), onChange: (url) => onChange({ logoURL: url }) })),
+        },
+    }), [upload]);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:brand-editor" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(brandFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
+    });
     const saveMutation = useApiMutation({
         errorMessage: "Failed to save brand.",
         mutationFn: async () => {
             const payload = {
-                name,
-                slug: slug || toBrandSlug(name),
-                description: description || undefined,
-                logoURL: logoURL || undefined,
-                website: website || undefined,
-                country: country || undefined,
-                founded: founded !== "" ? Number(founded) : undefined,
-                isActive,
-                displayOrder: displayOrder !== "" ? Number(displayOrder) : undefined,
+                name: form.name,
+                // Create-only: an existing brand keeps the slug its links resolve on.
+                slug: isEdit ? form.slug : toBrandSlug(form.name),
+                description: form.description || undefined,
+                logoURL: form.logoURL || undefined,
+                website: form.website || undefined,
+                country: form.country || undefined,
+                founded: optionalNumber(form.founded),
+                isActive: form.isActive,
+                displayOrder: optionalNumber(form.displayOrder),
             };
-            if (isEdit) {
+            if (isEdit)
                 return apiClient.put(ADMIN_ENDPOINTS.BRAND_BY_ID(brandId), payload);
-            }
             return apiClient.post(ADMIN_ENDPOINTS.BRANDS, payload);
         },
         onSuccess: (res) => {
@@ -110,19 +133,32 @@ export function AdminBrandEditorView({ brandId, onSaved, onDeleted, embedded, ..
                 onDeleted();
         },
     });
-    const { upload } = useMediaUpload();
-    const isSubmitting = saveMutation.isPending || brandQuery.isLoading;
-    const formSection = (_jsxs(_Fragment, { children: [_jsx(Form, { schema: brandFormSchema, onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { children: [_jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(FieldInput, { name: "name", label: "Brand name", value: name, onChange: (v) => handleNameChange(v), required: true, placeholder: "e.g. Hot Wheels" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
-                                        setSlug(e.target.value);
-                                        setSlugManual(true);
-                                    }, placeholder: "brand-hot-wheels", helperText: "Auto-generated from name. Must start with 'brand-'." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the brand" }), _jsx(ImageUpload, { label: "Cover Image", currentImage: logoURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-logo", brand: name || slug }), onChange: setLogoURL }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Website", value: website, onChange: (e) => setWebsite(e.target.value), placeholder: "https://brand.com", type: "url" }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0, placeholder: "0" })] }), _jsxs(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: [_jsx(Input, { label: "Country of origin", value: country, onChange: (e) => setCountry(e.target.value), placeholder: "e.g. Japan" }), _jsx(Input, { label: "Founded year", value: founded, onChange: (e) => setFounded(e.target.value), type: "number", min: 1800, max: new Date().getFullYear(), placeholder: "e.g. 1999" })] }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsx(FormErrorSummary, {}), _jsxs(Row, { gap: "3", padding: "t-xs", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, onClick: () => {
-                                        clearErrors();
-                                        if (!name.trim()) {
-                                            setFieldError("name", "Brand name is required");
-                                            return;
-                                        }
-                                        saveMutation.mutate();
-                                    }, children: isEdit ? "Save changes" : "Create brand" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", onClick: () => setDeleteConfirmOpen(true), children: "Delete brand" }))] })] })) }, "brand-form"), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Brand", message: "Delete this brand? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
+    const onSubmit = () => {
+        clearErrors();
+        const parsed = brandFormSchema.safeParse({
+            ...form,
+            slug: isEdit ? form.slug : toBrandSlug(form.name),
+            founded: optionalNumber(form.founded),
+            displayOrder: optionalNumber(form.displayOrder),
+        });
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        saveMutation.mutate();
+    };
+    // The live slug preview tracks the name until the brand exists.
+    React.useEffect(() => {
+        if (isEdit)
+            return;
+        setForm((prev) => ({ ...prev, slug: prev.name ? toBrandSlug(prev.name) : "" }));
+    }, [form.name, isEdit]);
+    const formSection = (_jsxs(_Fragment, { children: [_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: (partial) => setForm((prev) => Object.assign({}, prev, partial)), onSubmit: onSubmit, schema: brandFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: saveMutation.isPending || brandQuery.isLoading, submitLabel: isEdit ? "Save changes" : "Create brand", destructiveAction: isEdit
+                            ? { label: "Delete brand", onClick: () => setDeleteConfirmOpen(true) }
+                            : undefined })] }), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Brand", message: "Delete this brand? This cannot be undone.", onConfirm: () => {
+                    deleteMutation.mutate();
+                    setDeleteConfirmOpen(false);
+                }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formSection });
     }

package/dist/features/admin/components/AdminBundleEditorView.d.ts

@@ -1,17 +1,25 @@
 /**
- * AdminBundleEditorView — S-SBUNI-4 2026-05-13.
+ * AdminBundleEditorView — S-SBUNI-4 2026-05-13, sectionised 2026-08-30.
  *
  * Unified create + edit view for categoryType:"bundle" rows. When `bundleId`
  * is set, loads + edits; when omitted, runs as a "new" form. Delegates to
- * /api/admin/bundles. Owns: name + description + bundlePrice +
- * static-only product picker + isActive. Dynamic-rule editing is out of scope
- * for this session (the API accepts dynamic rules but the form only writes
- * static rules; admins editing a pre-existing dynamic bundle see its members
- * in the picker but the rule itself stays unchanged until they switch to
- * static).
+ * /api/admin/bundles (or /api/store/bundles under `scope="store"`).
+ *
+ * ## The schema now runs
+ *
+ * It used to declare a seven-field `.passthrough()` stub inside this file,
+ * hand it to `<Form schema>`, and validate with two `if` statements instead.
+ * So the member-count bounds the picker DISPLAYS — `min 3, max 16` — were red
+ * hint text under the control that nothing enforced, and a two-member bundle
+ * saved cleanly. The real schema lives in `../../categories/schemas/bundle-form`
+ * and is parsed on every change.
+ *
+ * Static vs dynamic rules are both editable: the rule-type select swaps which
+ * member source is on screen, and `visibleValues` makes the payload follow it.
  */
 import React from "react";
-export interface AdminBundleEditorViewProps {
+import type { StackedViewShellProps } from "../../../ui";
+export interface AdminBundleEditorViewProps extends Omit<StackedViewShellProps, "sections"> {
     /** When set, the form loads an existing bundle; otherwise it runs as "new". */
     bundleId?: string;
     /** Called after a successful create with the new bundle id. */
@@ -25,5 +33,7 @@ export interface AdminBundleEditorViewProps {
      * products.
      */
     scope?: "admin" | "store";
+    /** Render bare, for a drawer that supplies its own chrome. */
+    embedded?: boolean;
 }
-export declare function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope, }: AdminBundleEditorViewProps): React.JSX.Element;
+export declare function AdminBundleEditorView({ bundleId, onSaved, onDeleted, scope, embedded, ...rest }: AdminBundleEditorViewProps): React.JSX.Element;