npm - @burdenoff/microfe-coolandlovely - Versions diffs - 2026.706.1 → 2026.706.3 - Mend

@burdenoff/microfe-coolandlovely 2026.706.1 → 2026.706.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/dist/coolandlovely/pages/items/StyleItemFormPage.js CHANGED Viewed

@@ -1,18 +1,20 @@
 import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
 import { PageLayout as t } from "../../components/PageLayout.js";
 import { ErrorView as n, LoadingView as r } from "../../components/StateViews.js";
-import { useBrands as i, useCollections as a, useCreateStyleItem as o, useStyleItem as s, useUpdateStyleItem as c } from "../../hooks/useCoolAndLovelyApi.js";
+import { COO_FILE_FOLDERS as i } from "../../hooks/useFiles.js";
+import { useBrands as a, useCollections as o, useCreateStyleItem as s, useStyleItem as c, useUpdateStyleItem as l } from "../../hooks/useCoolAndLovelyApi.js";
+import { parseCsv as u, titleCase as d } from "../../utils/formatters.js";
 import "../../hooks/index.js";
-import { parseCsv as l, titleCase as u } from "../../utils/formatters.js";
-import { STYLE_CATEGORIES as d } from "../../utils/icons.js";
-import { SelectField as f, TextAreaField as p, TextField as m } from "../../components/Field.js";
-import { useEffect as h, useMemo as g, useState as _ } from "react";
-import { ArrowLeft as v, Loader2 as y, Save as b, Shirt as x } from "lucide-react";
-import { useParams as S, useSearchParams as C } from "react-router-dom";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
-import { GlassCard as E } from "@burdenoff/fe-libs/ui";
+import { STYLE_CATEGORIES as f } from "../../utils/icons.js";
+import { SelectField as p, TextAreaField as m, TextField as h } from "../../components/Field.js";
+import { ImageUploadField as g } from "../../components/ImageUploadField.js";
+import { useEffect as _, useMemo as v, useState as y } from "react";
+import { ArrowLeft as b, Loader2 as x, Save as S, Shirt as C } from "lucide-react";
+import { useParams as w, useSearchParams as T } from "react-router-dom";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import { GlassCard as O } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/items/StyleItemFormPage.tsx
-var D = {
+var k = {
 	brandId: "",
 	collectionId: "",
 	name: "",
@@ -24,21 +26,22 @@ var D = {
 	colours: "",
 	sizes: "",
 	materials: "",
-	tags: ""
+	tags: "",
+	imageFileId: ""
 };
-function O() {
-	let { itemId: O } = S(), [k] = C(), A = !!O, { navigateTo: j } = e(), M = s(A ? O : void 0), N = i({ pagination: {
+function A() {
+	let { itemId: A } = w(), [j] = T(), M = !!A, { navigateTo: N } = e(), P = c(M ? A : void 0), F = a({ pagination: {
 		limit: 100,
 		offset: 0
-	} }), P = o(), F = c(), [I, L] = _(() => ({
-		...D,
-		brandId: k.get("brandId") ?? "",
-		collectionId: k.get("collectionId") ?? ""
-	})), [R, z] = _({}), B = a(I.brandId ? { brandId: I.brandId } : {});
-	h(() => {
-		if (A && M.data) {
-			let e = M.data;
-			L({
+	} }), I = s(), L = l(), [R, z] = y(() => ({
+		...k,
+		brandId: j.get("brandId") ?? "",
+		collectionId: j.get("collectionId") ?? ""
+	})), [B, V] = y({}), H = o(R.brandId ? { brandId: R.brandId } : {});
+	_(() => {
+		if (M && P.data) {
+			let e = P.data;
+			z({
 				brandId: e.brandId,
 				collectionId: e.collectionId ?? "",
 				name: e.name,
@@ -50,219 +53,230 @@ function O() {
 				colours: e.colours.join(", "),
 				sizes: e.sizes.join(", "),
 				materials: e.materials.join(", "),
-				tags: e.tags.join(", ")
+				tags: e.tags.join(", "),
+				imageFileId: e.image?.id ?? ""
 			});
 		}
-	}, [A, M.data]);
-	let V = (e, t) => L((n) => ({
+	}, [M, P.data]);
+	let U = (e, t) => z((n) => ({
 		...n,
 		[e]: t
-	})), H = A ? F : P, U = g(() => (N.data?.items ?? []).map((e) => ({
+	})), W = M ? L : I, G = v(() => (F.data?.items ?? []).map((e) => ({
 		value: e.id,
 		label: e.name
-	})), [N.data]), W = g(() => (B.data ?? []).map((e) => ({
+	})), [F.data]), K = v(() => (H.data ?? []).map((e) => ({
 		value: e.id,
 		label: e.name
-	})), [B.data]), G = d.map((e) => ({
+	})), [H.data]), q = f.map((e) => ({
 		value: e,
-		label: u(e)
-	})), K = () => {
+		label: d(e)
+	})), J = () => {
 		let e = {};
-		return I.name.trim() || (e.name = "Name is required"), !A && !I.brandId && (e.brandId = "Brand is required"), I.price && Number.isNaN(Number(I.price)) && (e.price = "Price must be a number"), z(e), Object.keys(e).length === 0;
+		return R.name.trim() || (e.name = "Name is required"), !M && !R.brandId && (e.brandId = "Brand is required"), R.price && Number.isNaN(Number(R.price)) && (e.price = "Price must be a number"), V(e), Object.keys(e).length === 0;
 	};
-	return A && M.isLoading ? /* @__PURE__ */ w(t, {
+	return M && P.isLoading ? /* @__PURE__ */ E(t, {
 		title: "Edit item",
-		children: /* @__PURE__ */ w(r, { label: "Loading item…" })
-	}) : A && (M.isError || !M.data) ? /* @__PURE__ */ w(t, {
+		children: /* @__PURE__ */ E(r, { label: "Loading item…" })
+	}) : M && (P.isError || !P.data) ? /* @__PURE__ */ E(t, {
 		title: "Edit item",
-		children: /* @__PURE__ */ w(n, {
+		children: /* @__PURE__ */ E(n, {
 			title: "Item not found",
-			onRetry: () => void M.refetch()
+			onRetry: () => void P.refetch()
 		})
-	}) : /* @__PURE__ */ w(t, {
-		title: A ? "Edit item" : "New style item",
-		description: A ? "Update this catalogue piece" : "List a new shoppable piece",
-		actions: /* @__PURE__ */ T("button", {
+	}) : /* @__PURE__ */ E(t, {
+		title: M ? "Edit item" : "New style item",
+		description: M ? "Update this catalogue piece" : "List a new shoppable piece",
+		actions: /* @__PURE__ */ D("button", {
 			type: "button",
-			onClick: () => j(A && O ? `/items/${O}` : "/items"),
+			onClick: () => N(M && A ? `/items/${A}` : "/items"),
 			className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
-			children: [/* @__PURE__ */ w(v, { className: "h-4 w-4" }), " Cancel"]
+			children: [/* @__PURE__ */ E(b, { className: "h-4 w-4" }), " Cancel"]
 		}),
-		children: /* @__PURE__ */ w("form", {
+		children: /* @__PURE__ */ E("form", {
 			onSubmit: (e) => {
-				if (e.preventDefault(), !K()) return;
-				let t = I.price.trim() ? Number(I.price) : void 0;
-				A && O ? F.mutate({
-					id: O,
+				if (e.preventDefault(), !J()) return;
+				let t = R.price.trim() ? Number(R.price) : void 0;
+				M && A ? L.mutate({
+					id: A,
 					input: {
-						name: I.name.trim(),
-						description: I.description.trim() || void 0,
-						category: I.category,
-						collectionId: I.collectionId || void 0,
-						sku: I.sku.trim() || void 0,
+						name: R.name.trim(),
+						description: R.description.trim() || void 0,
+						category: R.category,
+						collectionId: R.collectionId || void 0,
+						sku: R.sku.trim() || void 0,
 						price: t,
-						currency: I.currency.trim() || void 0,
-						colours: l(I.colours),
-						sizes: l(I.sizes),
-						materials: l(I.materials),
-						tags: l(I.tags)
+						currency: R.currency.trim() || void 0,
+						colours: u(R.colours),
+						sizes: u(R.sizes),
+						materials: u(R.materials),
+						tags: u(R.tags),
+						imageFileId: R.imageFileId || void 0
 					}
-				}, { onSuccess: () => j(`/items/${O}`) }) : P.mutate({
-					brandId: I.brandId,
-					name: I.name.trim(),
-					description: I.description.trim() || void 0,
-					category: I.category,
-					collectionId: I.collectionId || void 0,
-					sku: I.sku.trim() || void 0,
+				}, { onSuccess: () => N(`/items/${A}`) }) : I.mutate({
+					brandId: R.brandId,
+					name: R.name.trim(),
+					description: R.description.trim() || void 0,
+					category: R.category,
+					collectionId: R.collectionId || void 0,
+					sku: R.sku.trim() || void 0,
 					price: t,
-					currency: I.currency.trim() || void 0,
-					colours: l(I.colours),
-					sizes: l(I.sizes),
-					materials: l(I.materials),
-					tags: l(I.tags)
-				}, { onSuccess: (e) => j(`/items/${e.id}`) });
+					currency: R.currency.trim() || void 0,
+					colours: u(R.colours),
+					sizes: u(R.sizes),
+					materials: u(R.materials),
+					tags: u(R.tags),
+					imageFileId: R.imageFileId || void 0
+				}, { onSuccess: (e) => N(`/items/${e.id}`) });
 			},
 			className: "mx-auto max-w-2xl",
-			children: /* @__PURE__ */ T(E, {
+			children: /* @__PURE__ */ D(O, {
 				treatment: "plain",
 				className: "p-6",
 				children: [
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ D("div", {
 						className: "mb-6 flex items-center gap-3",
-						children: [/* @__PURE__ */ w("div", {
+						children: [/* @__PURE__ */ E("div", {
 							className: "flex h-11 w-11 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-							children: /* @__PURE__ */ w(x, { className: "h-5 w-5" })
-						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h2", {
+							children: /* @__PURE__ */ E(C, { className: "h-5 w-5" })
+						}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("h2", {
 							className: "text-base font-semibold text-text-primary",
 							children: "Item details"
-						}), /* @__PURE__ */ w("p", {
+						}), /* @__PURE__ */ E("p", {
 							className: "text-xs text-text-secondary",
 							children: "A piece belongs to a brand and optionally a collection."
 						})] })]
 					}),
-					!A && /* @__PURE__ */ w(f, {
+					!M && /* @__PURE__ */ E(p, {
 						id: "brandId",
 						label: "Brand",
-						value: I.brandId,
-						onChange: (e) => V("brandId", e),
-						options: U,
+						value: R.brandId,
+						onChange: (e) => U("brandId", e),
+						options: G,
 						required: !0,
-						placeholder: N.isLoading ? "Loading brands…" : "Select a brand",
-						error: R.brandId,
+						placeholder: F.isLoading ? "Loading brands…" : "Select a brand",
+						error: B.brandId,
 						className: "mb-4"
 					}),
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ D("div", {
 						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-						children: [/* @__PURE__ */ w(m, {
+						children: [/* @__PURE__ */ E(h, {
 							id: "name",
 							label: "Name",
-							value: I.name,
-							onChange: (e) => V("name", e),
+							value: R.name,
+							onChange: (e) => U("name", e),
 							placeholder: "Silk slip dress",
 							required: !0,
-							error: R.name
-						}), /* @__PURE__ */ w(f, {
+							error: B.name
+						}), /* @__PURE__ */ E(p, {
 							id: "category",
 							label: "Category",
-							value: I.category,
-							onChange: (e) => V("category", e),
-							options: G
+							value: R.category,
+							onChange: (e) => U("category", e),
+							options: q
 						})]
 					}),
-					/* @__PURE__ */ w(p, {
+					/* @__PURE__ */ E(m, {
 						id: "description",
 						label: "Description",
-						value: I.description,
-						onChange: (e) => V("description", e),
+						value: R.description,
+						onChange: (e) => U("description", e),
 						placeholder: "Describe the piece…",
 						rows: 3,
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ E(g, {
+						label: "Product photo",
+						value: R.imageFileId,
+						onChange: (e) => U("imageFileId", e),
+						folder: i.items,
+						hint: "Shown across the catalogue and item page",
+						className: "mt-4"
+					}),
+					/* @__PURE__ */ D("div", {
 						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3",
 						children: [
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "price",
 								label: "Price",
 								type: "number",
-								value: I.price,
-								onChange: (e) => V("price", e),
+								value: R.price,
+								onChange: (e) => U("price", e),
 								placeholder: "0.00",
-								error: R.price
+								error: B.price
 							}),
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "currency",
 								label: "Currency",
-								value: I.currency,
-								onChange: (e) => V("currency", e),
+								value: R.currency,
+								onChange: (e) => U("currency", e),
 								placeholder: "USD"
 							}),
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "sku",
 								label: "SKU",
-								value: I.sku,
-								onChange: (e) => V("sku", e),
+								value: R.sku,
+								onChange: (e) => U("sku", e),
 								placeholder: "ABC-123"
 							})
 						]
 					}),
-					/* @__PURE__ */ w(f, {
+					/* @__PURE__ */ E(p, {
 						id: "collectionId",
 						label: "Collection (optional)",
-						value: I.collectionId,
-						onChange: (e) => V("collectionId", e),
-						options: W,
-						placeholder: I.brandId ? B.isLoading ? "Loading collections…" : "No collection" : "Select a brand first",
+						value: R.collectionId,
+						onChange: (e) => U("collectionId", e),
+						options: K,
+						placeholder: R.brandId ? H.isLoading ? "Loading collections…" : "No collection" : "Select a brand first",
 						className: "mt-4"
 					}),
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ D("div", {
 						className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2",
 						children: [
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "colours",
 								label: "Colours",
-								value: I.colours,
-								onChange: (e) => V("colours", e),
+								value: R.colours,
+								onChange: (e) => U("colours", e),
 								placeholder: "black, ivory",
 								hint: "Comma-separated"
 							}),
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "sizes",
 								label: "Sizes",
-								value: I.sizes,
-								onChange: (e) => V("sizes", e),
+								value: R.sizes,
+								onChange: (e) => U("sizes", e),
 								placeholder: "XS, S, M, L",
 								hint: "Comma-separated"
 							}),
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "materials",
 								label: "Materials",
-								value: I.materials,
-								onChange: (e) => V("materials", e),
+								value: R.materials,
+								onChange: (e) => U("materials", e),
 								placeholder: "silk, cotton",
 								hint: "Comma-separated"
 							}),
-							/* @__PURE__ */ w(m, {
+							/* @__PURE__ */ E(h, {
 								id: "tags",
 								label: "Tags",
-								value: I.tags,
-								onChange: (e) => V("tags", e),
+								value: R.tags,
+								onChange: (e) => U("tags", e),
 								placeholder: "summer, party",
 								hint: "Comma-separated"
 							})
 						]
 					}),
-					H.isError && /* @__PURE__ */ w("p", {
+					W.isError && /* @__PURE__ */ E("p", {
 						className: "mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-						children: H.error instanceof Error ? H.error.message : "Something went wrong"
+						children: W.error instanceof Error ? W.error.message : "Something went wrong"
 					}),
-					/* @__PURE__ */ w("div", {
+					/* @__PURE__ */ E("div", {
 						className: "mt-6 flex justify-end gap-2",
-						children: /* @__PURE__ */ T("button", {
+						children: /* @__PURE__ */ D("button", {
 							type: "submit",
-							disabled: H.isPending,
+							disabled: W.isPending,
 							className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50",
-							children: [H.isPending ? /* @__PURE__ */ w(y, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ w(b, { className: "h-4 w-4" }), A ? "Save changes" : "Create item"]
+							children: [W.isPending ? /* @__PURE__ */ E(x, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(S, { className: "h-4 w-4" }), M ? "Save changes" : "Create item"]
 						})
 					})
 				]
@@ -271,6 +285,6 @@ function O() {
 	});
 }
 //#endregion
-export { O as StyleItemFormPage };
+export { A as StyleItemFormPage };
 //# sourceMappingURL=StyleItemFormPage.js.map

package/dist/coolandlovely/pages/items/StyleItemFormPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StyleItemFormPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemFormPage.tsx"],"sourcesContent":["/*\n Style Item Create / Edit Page\n * @module coolandlovely/pages/items\n \n Drives `cooCreateStyleItem` (new) and `cooUpdateStyleItem` (edit).\n * Brand selection is required on create (and locked on edit). The collection\n * select is scoped to the chosen brand.\n */\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { ArrowLeft, Loader2, Save, Shirt } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n useStyleItem,\n useCreateStyleItem,\n useUpdateStyleItem,\n useBrands,\n useCollections,\n} from '../../hooks';\nimport { STYLE_CATEGORIES } from '../../utils/icons';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooStyleCategory } from '../../types';\n\ninterface FormState {\n brandId: string;\n collectionId: string;\n name: string;\n description: string;\n category: CooStyleCategory;\n sku: string;\n price: string;\n currency: string;\n colours: string;\n sizes: string;\n materials: string;\n tags: string;\n}\n\nconst EMPTY: FormState = {\n brandId: '',\n collectionId: '',\n name: '',\n description: '',\n category: 'OTHER',\n sku: '',\n price: '',\n currency: 'USD',\n colours: '',\n sizes: '',\n materials: '',\n tags: '',\n};\n\nexport function StyleItemFormPage() {\n const { itemId } = useParams<{ itemId: string }>();\n const [searchParams] = useSearchParams();\n const isEdit = Boolean(itemId);\n const { navigateTo } = useCoolAndLovely();\n\n const existing = useStyleItem(isEdit ? itemId : undefined);\n const brands = useBrands({ pagination: { limit: 100, offset: 0 } });\n const createItem = useCreateStyleItem();\n const updateItem = useUpdateStyleItem();\n\n const [form, setForm] = useState<FormState>(() => ({\n ...EMPTY,\n brandId: searchParams.get('brandId') ?? '',\n collectionId: searchParams.get('collectionId') ?? '',\n }));\n const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});\n\n // Collections scoped to the selected brand (for the optional collection select)\n const collections = useCollections(form.brandId ? { brandId: form.brandId } : {});\n\n useEffect(() => {\n if (isEdit && existing.data) {\n const it = existing.data;\n setForm({\n brandId: it.brandId,\n collectionId: it.collectionId ?? '',\n name: it.name,\n description: it.description ?? '',\n category: it.category,\n sku: it.sku ?? '',\n price: String(it.price),\n currency: it.currency,\n colours: it.colours.join(', '),\n sizes: it.sizes.join(', '),\n materials: it.materials.join(', '),\n tags: it.tags.join(', '),\n });\n }\n }, [isEdit, existing.data]);\n\n const setField = <K extends keyof FormState>(key: K, value: FormState[K]) =>\n setForm((f) => ({ ...f, [key]: value }));\n\n const mutation = isEdit ? updateItem : createItem;\n\n const brandOptions = useMemo(\n () => (brands.data?.items ?? []).map((b) => ({ value: b.id, label: b.name })),\n [brands.data]\n );\n const collectionOptions = useMemo(\n () => (collections.data ?? []).map((c) => ({ value: c.id, label: c.name })),\n [collections.data]\n );\n const categoryOptions = STYLE_CATEGORIES.map((c) => ({ value: c, label: titleCase(c) }));\n\n const validate = (): boolean => {\n const next: Partial<Record<keyof FormState, string>> = {};\n if (!form.name.trim()) next.name = 'Name is required';\n if (!isEdit && !form.brandId) next.brandId = 'Brand is required';\n if (form.price && Number.isNaN(Number(form.price))) next.price = 'Price must be a number';\n setErrors(next);\n return Object.keys(next).length === 0;\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!validate()) return;\n\n const priceNum = form.price.trim() ? Number(form.price) : undefined;\n\n if (isEdit && itemId) {\n updateItem.mutate(\n {\n id: itemId,\n input: {\n name: form.name.trim(),\n description: form.description.trim() \|\| undefined,\n category: form.category,\n collectionId: form.collectionId \|\| undefined,\n sku: form.sku.trim() \|\| undefined,\n price: priceNum,\n currency: form.currency.trim() \|\| undefined,\n colours: parseCsv(form.colours),\n sizes: parseCsv(form.sizes),\n materials: parseCsv(form.materials),\n tags: parseCsv(form.tags),\n },\n },\n { onSuccess: () => navigateTo(`/items/${itemId}`) }\n );\n } else {\n createItem.mutate(\n {\n brandId: form.brandId,\n name: form.name.trim(),\n description: form.description.trim() \|\| undefined,\n category: form.category,\n collectionId: form.collectionId \|\| undefined,\n sku: form.sku.trim() \|\| undefined,\n price: priceNum,\n currency: form.currency.trim() \|\| undefined,\n colours: parseCsv(form.colours),\n sizes: parseCsv(form.sizes),\n materials: parseCsv(form.materials),\n tags: parseCsv(form.tags),\n },\n { onSuccess: (item) => navigateTo(`/items/${item.id}`) }\n );\n }\n };\n\n if (isEdit && existing.isLoading) {\n return (\n <PageLayout title=\"Edit item\">\n <LoadingView label=\"Loading item…\" />\n </PageLayout>\n );\n }\n\n if (isEdit && (existing.isError \|\| !existing.data)) {\n return (\n <PageLayout title=\"Edit item\">\n <ErrorView title=\"Item not found\" onRetry={() => void existing.refetch()} />\n </PageLayout>\n );\n }\n\n return (\n <PageLayout\n title={isEdit ? 'Edit item' : 'New style item'}\n description={isEdit ? 'Update this catalogue piece' : 'List a new shoppable piece'}\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo(isEdit && itemId ? `/items/${itemId}` : '/items')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Cancel\n </button>\n }\n >\n <form onSubmit={handleSubmit} className=\"mx-auto max-w-2xl\">\n <GlassCard treatment=\"plain\" className=\"p-6\">\n <div className=\"mb-6 flex items-center gap-3\">\n <div className=\"flex h-11 w-11 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n <Shirt className=\"h-5 w-5\" />\n </div>\n <div>\n <h2 className=\"text-base font-semibold text-text-primary\">Item details</h2>\n <p className=\"text-xs text-text-secondary\">\n A piece belongs to a brand and optionally a collection.\n </p>\n </div>\n </div>\n\n {!isEdit && (\n <SelectField\n id=\"brandId\"\n label=\"Brand\"\n value={form.brandId}\n onChange={(v) => setField('brandId', v)}\n options={brandOptions}\n required\n placeholder={brands.isLoading ? 'Loading brands…' : 'Select a brand'}\n error={errors.brandId}\n className=\"mb-4\"\n />\n )}\n\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <TextField\n id=\"name\"\n label=\"Name\"\n value={form.name}\n onChange={(v) => setField('name', v)}\n placeholder=\"Silk slip dress\"\n required\n error={errors.name}\n />\n <SelectField\n id=\"category\"\n label=\"Category\"\n value={form.category}\n onChange={(v) => setField('category', v as CooStyleCategory)}\n options={categoryOptions}\n />\n </div>\n\n <TextAreaField\n id=\"description\"\n label=\"Description\"\n value={form.description}\n onChange={(v) => setField('description', v)}\n placeholder=\"Describe the piece…\"\n rows={3}\n className=\"mt-4\"\n />\n\n <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3\">\n <TextField\n id=\"price\"\n label=\"Price\"\n type=\"number\"\n value={form.price}\n onChange={(v) => setField('price', v)}\n placeholder=\"0.00\"\n error={errors.price}\n />\n <TextField\n id=\"currency\"\n label=\"Currency\"\n value={form.currency}\n onChange={(v) => setField('currency', v)}\n placeholder=\"USD\"\n />\n <TextField\n id=\"sku\"\n label=\"SKU\"\n value={form.sku}\n onChange={(v) => setField('sku', v)}\n placeholder=\"ABC-123\"\n />\n </div>\n\n <SelectField\n id=\"collectionId\"\n label=\"Collection (optional)\"\n value={form.collectionId}\n onChange={(v) => setField('collectionId', v)}\n options={collectionOptions}\n placeholder={\n !form.brandId\n ? 'Select a brand first'\n : collections.isLoading\n ? 'Loading collections…'\n : 'No collection'\n }\n className=\"mt-4\"\n />\n\n <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <TextField\n id=\"colours\"\n label=\"Colours\"\n value={form.colours}\n onChange={(v) => setField('colours', v)}\n placeholder=\"black, ivory\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"sizes\"\n label=\"Sizes\"\n value={form.sizes}\n onChange={(v) => setField('sizes', v)}\n placeholder=\"XS, S, M, L\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"materials\"\n label=\"Materials\"\n value={form.materials}\n onChange={(v) => setField('materials', v)}\n placeholder=\"silk, cotton\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"tags\"\n label=\"Tags\"\n value={form.tags}\n onChange={(v) => setField('tags', v)}\n placeholder=\"summer, party\"\n hint=\"Comma-separated\"\n />\n </div>\n\n {mutation.isError && (\n <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n {mutation.error instanceof Error ? mutation.error.message : 'Something went wrong'}\n </p>\n )}\n\n <div className=\"mt-6 flex justify-end gap-2\">\n <button\n type=\"submit\"\n disabled={mutation.isPending}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n >\n {mutation.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Save className=\"h-4 w-4\" />\n )}\n {isEdit ? 'Save changes' : 'Create item'}\n </button>\n </div>\n </GlassCard>\n </form>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"StyleItemFormPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemFormPage.tsx"],"sourcesContent":["/*\n Style Item Create / Edit Page\n * @module coolandlovely/pages/items\n \n Drives `cooCreateStyleItem` (new) and `cooUpdateStyleItem` (edit).\n * Brand selection is required on create (and locked on edit). The collection\n * select is scoped to the chosen brand.\n */\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { ArrowLeft, Loader2, Save, Shirt } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { TextField, TextAreaField, SelectField } from '../../components/Field';\nimport { ImageUploadField } from '../../components/ImageUploadField';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n useStyleItem,\n useCreateStyleItem,\n useUpdateStyleItem,\n useBrands,\n useCollections,\n} from '../../hooks';\nimport { COO_FILE_FOLDERS } from '../../hooks/useFiles';\nimport { STYLE_CATEGORIES } from '../../utils/icons';\nimport { parseCsv, titleCase } from '../../utils/formatters';\nimport type { CooStyleCategory } from '../../types';\n\ninterface FormState {\n brandId: string;\n collectionId: string;\n name: string;\n description: string;\n category: CooStyleCategory;\n sku: string;\n price: string;\n currency: string;\n colours: string;\n sizes: string;\n materials: string;\n tags: string;\n imageFileId: string;\n}\n\nconst EMPTY: FormState = {\n brandId: '',\n collectionId: '',\n name: '',\n description: '',\n category: 'OTHER',\n sku: '',\n price: '',\n currency: 'USD',\n colours: '',\n sizes: '',\n materials: '',\n tags: '',\n imageFileId: '',\n};\n\nexport function StyleItemFormPage() {\n const { itemId } = useParams<{ itemId: string }>();\n const [searchParams] = useSearchParams();\n const isEdit = Boolean(itemId);\n const { navigateTo } = useCoolAndLovely();\n\n const existing = useStyleItem(isEdit ? itemId : undefined);\n const brands = useBrands({ pagination: { limit: 100, offset: 0 } });\n const createItem = useCreateStyleItem();\n const updateItem = useUpdateStyleItem();\n\n const [form, setForm] = useState<FormState>(() => ({\n ...EMPTY,\n brandId: searchParams.get('brandId') ?? '',\n collectionId: searchParams.get('collectionId') ?? '',\n }));\n const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});\n\n // Collections scoped to the selected brand (for the optional collection select)\n const collections = useCollections(form.brandId ? { brandId: form.brandId } : {});\n\n useEffect(() => {\n if (isEdit && existing.data) {\n const it = existing.data;\n setForm({\n brandId: it.brandId,\n collectionId: it.collectionId ?? '',\n name: it.name,\n description: it.description ?? '',\n category: it.category,\n sku: it.sku ?? '',\n price: String(it.price),\n currency: it.currency,\n colours: it.colours.join(', '),\n sizes: it.sizes.join(', '),\n materials: it.materials.join(', '),\n tags: it.tags.join(', '),\n imageFileId: it.image?.id ?? '',\n });\n }\n }, [isEdit, existing.data]);\n\n const setField = <K extends keyof FormState>(key: K, value: FormState[K]) =>\n setForm((f) => ({ ...f, [key]: value }));\n\n const mutation = isEdit ? updateItem : createItem;\n\n const brandOptions = useMemo(\n () => (brands.data?.items ?? []).map((b) => ({ value: b.id, label: b.name })),\n [brands.data]\n );\n const collectionOptions = useMemo(\n () => (collections.data ?? []).map((c) => ({ value: c.id, label: c.name })),\n [collections.data]\n );\n const categoryOptions = STYLE_CATEGORIES.map((c) => ({ value: c, label: titleCase(c) }));\n\n const validate = (): boolean => {\n const next: Partial<Record<keyof FormState, string>> = {};\n if (!form.name.trim()) next.name = 'Name is required';\n if (!isEdit && !form.brandId) next.brandId = 'Brand is required';\n if (form.price && Number.isNaN(Number(form.price))) next.price = 'Price must be a number';\n setErrors(next);\n return Object.keys(next).length === 0;\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!validate()) return;\n\n const priceNum = form.price.trim() ? Number(form.price) : undefined;\n\n if (isEdit && itemId) {\n updateItem.mutate(\n {\n id: itemId,\n input: {\n name: form.name.trim(),\n description: form.description.trim() \|\| undefined,\n category: form.category,\n collectionId: form.collectionId \|\| undefined,\n sku: form.sku.trim() \|\| undefined,\n price: priceNum,\n currency: form.currency.trim() \|\| undefined,\n colours: parseCsv(form.colours),\n sizes: parseCsv(form.sizes),\n materials: parseCsv(form.materials),\n tags: parseCsv(form.tags),\n imageFileId: form.imageFileId \|\| undefined,\n },\n },\n { onSuccess: () => navigateTo(`/items/${itemId}`) }\n );\n } else {\n createItem.mutate(\n {\n brandId: form.brandId,\n name: form.name.trim(),\n description: form.description.trim() \|\| undefined,\n category: form.category,\n collectionId: form.collectionId \|\| undefined,\n sku: form.sku.trim() \|\| undefined,\n price: priceNum,\n currency: form.currency.trim() \|\| undefined,\n colours: parseCsv(form.colours),\n sizes: parseCsv(form.sizes),\n materials: parseCsv(form.materials),\n tags: parseCsv(form.tags),\n imageFileId: form.imageFileId \|\| undefined,\n },\n { onSuccess: (item) => navigateTo(`/items/${item.id}`) }\n );\n }\n };\n\n if (isEdit && existing.isLoading) {\n return (\n <PageLayout title=\"Edit item\">\n <LoadingView label=\"Loading item…\" />\n </PageLayout>\n );\n }\n\n if (isEdit && (existing.isError \|\| !existing.data)) {\n return (\n <PageLayout title=\"Edit item\">\n <ErrorView title=\"Item not found\" onRetry={() => void existing.refetch()} />\n </PageLayout>\n );\n }\n\n return (\n <PageLayout\n title={isEdit ? 'Edit item' : 'New style item'}\n description={isEdit ? 'Update this catalogue piece' : 'List a new shoppable piece'}\n actions={\n <button\n type=\"button\"\n onClick={() => navigateTo(isEdit && itemId ? `/items/${itemId}` : '/items')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Cancel\n </button>\n }\n >\n <form onSubmit={handleSubmit} className=\"mx-auto max-w-2xl\">\n <GlassCard treatment=\"plain\" className=\"p-6\">\n <div className=\"mb-6 flex items-center gap-3\">\n <div className=\"flex h-11 w-11 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n <Shirt className=\"h-5 w-5\" />\n </div>\n <div>\n <h2 className=\"text-base font-semibold text-text-primary\">Item details</h2>\n <p className=\"text-xs text-text-secondary\">\n A piece belongs to a brand and optionally a collection.\n </p>\n </div>\n </div>\n\n {!isEdit && (\n <SelectField\n id=\"brandId\"\n label=\"Brand\"\n value={form.brandId}\n onChange={(v) => setField('brandId', v)}\n options={brandOptions}\n required\n placeholder={brands.isLoading ? 'Loading brands…' : 'Select a brand'}\n error={errors.brandId}\n className=\"mb-4\"\n />\n )}\n\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <TextField\n id=\"name\"\n label=\"Name\"\n value={form.name}\n onChange={(v) => setField('name', v)}\n placeholder=\"Silk slip dress\"\n required\n error={errors.name}\n />\n <SelectField\n id=\"category\"\n label=\"Category\"\n value={form.category}\n onChange={(v) => setField('category', v as CooStyleCategory)}\n options={categoryOptions}\n />\n </div>\n\n <TextAreaField\n id=\"description\"\n label=\"Description\"\n value={form.description}\n onChange={(v) => setField('description', v)}\n placeholder=\"Describe the piece…\"\n rows={3}\n className=\"mt-4\"\n />\n\n <ImageUploadField\n label=\"Product photo\"\n value={form.imageFileId}\n onChange={(id) => setField('imageFileId', id)}\n folder={COO_FILE_FOLDERS.items}\n hint=\"Shown across the catalogue and item page\"\n className=\"mt-4\"\n />\n\n <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3\">\n <TextField\n id=\"price\"\n label=\"Price\"\n type=\"number\"\n value={form.price}\n onChange={(v) => setField('price', v)}\n placeholder=\"0.00\"\n error={errors.price}\n />\n <TextField\n id=\"currency\"\n label=\"Currency\"\n value={form.currency}\n onChange={(v) => setField('currency', v)}\n placeholder=\"USD\"\n />\n <TextField\n id=\"sku\"\n label=\"SKU\"\n value={form.sku}\n onChange={(v) => setField('sku', v)}\n placeholder=\"ABC-123\"\n />\n </div>\n\n <SelectField\n id=\"collectionId\"\n label=\"Collection (optional)\"\n value={form.collectionId}\n onChange={(v) => setField('collectionId', v)}\n options={collectionOptions}\n placeholder={\n !form.brandId\n ? 'Select a brand first'\n : collections.isLoading\n ? 'Loading collections…'\n : 'No collection'\n }\n className=\"mt-4\"\n />\n\n <div className=\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <TextField\n id=\"colours\"\n label=\"Colours\"\n value={form.colours}\n onChange={(v) => setField('colours', v)}\n placeholder=\"black, ivory\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"sizes\"\n label=\"Sizes\"\n value={form.sizes}\n onChange={(v) => setField('sizes', v)}\n placeholder=\"XS, S, M, L\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"materials\"\n label=\"Materials\"\n value={form.materials}\n onChange={(v) => setField('materials', v)}\n placeholder=\"silk, cotton\"\n hint=\"Comma-separated\"\n />\n <TextField\n id=\"tags\"\n label=\"Tags\"\n value={form.tags}\n onChange={(v) => setField('tags', v)}\n placeholder=\"summer, party\"\n hint=\"Comma-separated\"\n />\n </div>\n\n {mutation.isError && (\n <p className=\"mt-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n {mutation.error instanceof Error ? mutation.error.message : 'Something went wrong'}\n </p>\n )}\n\n <div className=\"mt-6 flex justify-end gap-2\">\n <button\n type=\"submit\"\n disabled={mutation.isPending}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-5 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50\"\n >\n {mutation.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Save className=\"h-4 w-4\" />\n )}\n {isEdit ? 'Save changes' : 'Create item'}\n </button>\n </div>\n </GlassCard>\n </form>\n </PageLayout>\n );\n}\n"],"mappings":"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"}