@intlayer/design-system 9.0.0-canary.0 → 9.0.0-canary.10

package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs

@@ -1,26 +1,73 @@
 'use client';
 
+import { cn } from "../../../utils/cn.mjs";
 import { useSession } from "../../../api/useAuth/useSession.mjs";
 import { useAuditContentDeclarationMetadata } from "../../../api/hooks/ai.mjs";
+import { useGetDictionaries } from "../../../api/hooks/dictionary.mjs";
 import { useGetProjects } from "../../../api/hooks/project.mjs";
 import { useGetTags } from "../../../api/hooks/tag.mjs";
 import { Loader } from "../../Loader/index.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { Container } from "../../Container/index.mjs";
 import { Checkbox } from "../../Input/Checkbox.mjs";
+import { Input } from "../../Input/Input.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { Select } from "../../Select/Select.mjs";
+import { Pagination } from "../../Pagination/Pagination.mjs";
+import { FormItem } from "../../Form/FormItem.mjs";
+import { FormField } from "../../Form/FormField.mjs";
+import { FormDescription } from "../../Form/FormDescription.mjs";
+import { FormMessage } from "../../Form/FormMessage.mjs";
+import { FormLabelLayout } from "../../Form/layout/FormLabelLayout.mjs";
+import { EditableFieldInputElement } from "../../Form/elements/EditableFieldInputElement.mjs";
+import { EditableFieldTextAreaElement } from "../../Form/elements/EditableFieldTextAreaElement.mjs";
+import { InputElement } from "../../Form/elements/InputElement.mjs";
+import { MultiSelectElement } from "../../Form/elements/MultiselectElement.mjs";
+import { SelectElement } from "../../Form/elements/SelectElement.mjs";
 import { useForm as useForm$1 } from "../../Form/FormBase.mjs";
 import { Form } from "../../Form/Form.mjs";
 import { useDictionaryDetailsSchema } from "./useDictionaryDetailsSchema.mjs";
-import { useEffect } from "react";
+import { useEditedContent } from "@intlayer/editor-react";
+import { useEffect, useMemo, useState } from "react";
 import { WandSparkles } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEditedContent } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
 import { useWatch } from "react-hook-form";
 import { AnimatePresence, motion } from "framer-motion";
 
 //#region src/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.tsx
-const DictionaryDetailsForm = ({ dictionary, mode }) => {
+const QUALIFIER_TYPES = ["collection", "variant"];
+/** Derive active qualifier types from dictionary qualifier fields. */
+const deriveQualifierTypes = (dict) => {
+	const types = [];
+	if (dict.item !== void 0) types.push("collection");
+	if (dict.variant !== void 0) types.push("variant");
+	return types;
+};
+/**
+* A variant can be a named string or a structured object. The CMS edits it as
+* text: a value starting with `{` is parsed as JSON (object variant), anything
+* else is kept as a named-variant string.
+*/
+const formatVariant = (variant) => variant !== null && typeof variant === "object" ? JSON.stringify(variant) : variant ?? "";
+const parseVariantInput = (raw) => {
+	if (raw.trim().startsWith("{")) try {
+		return {
+			variant: JSON.parse(raw),
+			error: false
+		};
+	} catch {
+		return {
+			variant: raw,
+			error: true
+		};
+	}
+	return {
+		variant: raw,
+		error: false
+	};
+};
+const DictionaryDetailsForm = ({ dictionary, mode, onSelectSibling }) => {
 	const { session } = useSession();
 	const { project } = session ?? {};
 	const { data: projectsData, isLoading: isLoadingProjects } = useGetProjects();
@@ -33,15 +80,32 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 		location: dictionary.location ?? "remote"
 	} });
 	const { editedContent, setEditedDictionary } = useEditedContent();
-	const { titleInput, keyInput, descriptionInput, projectInput, tagsSelect, locationSelect, importModeSelect, filePathInput, auditButton } = useIntlayer("dictionary-details");
+	const { titleInput, keyInput, descriptionInput, projectInput, tagsSelect, locationSelect, importModeSelect, filePathInput, auditButton, qualifierSection, siblingDictionaries: siblingContent, typeSwitch } = useIntlayer("dictionary-details");
 	const { mutate: auditContentDeclaration, isPending: isAuditing } = useAuditContentDeclarationMetadata();
 	const updatedDictionary = editedContent?.[dictionary.localId];
+	const { data: siblingsData, isLoading: isLoadingSiblings } = useGetDictionaries({ keys: [dictionary.key] }, { enabled: !!dictionary.key });
+	const siblings = useMemo(() => (siblingsData?.data ?? []).filter((d) => d.localId !== dictionary.localId), [siblingsData, dictionary.localId]);
+	const itemSiblings = useMemo(() => siblings.filter((d) => d.item !== void 0).sort((a, b) => (a.item ?? 0) - (b.item ?? 0)), [siblings]);
+	const variantSiblings = useMemo(() => siblings.filter((d) => d.variant !== void 0), [siblings]);
+	const allItemDicts = useMemo(() => {
+		if (dictionary.item !== void 0) return [dictionary, ...itemSiblings].sort((a, b) => (a.item ?? 0) - (b.item ?? 0));
+		return itemSiblings;
+	}, [dictionary, itemSiblings]);
+	const allVariantDicts = useMemo(() => {
+		if (dictionary.variant !== void 0) return [dictionary, ...variantSiblings];
+		return variantSiblings;
+	}, [dictionary, variantSiblings]);
 	useEffect(() => {
 		form.reset({
 			...dictionary,
 			tags: dictionary.tags ?? [],
 			location: dictionary.location ?? "remote"
 		});
+		setSelectedTypes(deriveQualifierTypes(dictionary));
+		setItemValue(dictionary.item ?? 1);
+		setVariantValue(formatVariant(dictionary.variant));
+		setVariantJsonError(false);
+		setShowSiblingPicker(false);
 	}, [dictionary, form?.reset]);
 	useEffect(() => {
 		if (typeof updatedDictionary === "undefined") form.reset({
@@ -72,6 +136,52 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 		name: "location"
 	});
 	const isLocalChecked = watchedLocation === "local" || watchedLocation === "hybrid";
+	const hasSiblings = siblings.length > 0;
+	const [selectedTypes, setSelectedTypes] = useState(() => deriveQualifierTypes(dictionary));
+	const [itemValue, setItemValue] = useState(dictionary.item ?? 1);
+	const [variantValue, setVariantValue] = useState(formatVariant(dictionary.variant));
+	const [variantJsonError, setVariantJsonError] = useState(false);
+	const [showSiblingPicker, setShowSiblingPicker] = useState(false);
+	const allQualifiedSiblings = useMemo(() => [...itemSiblings, ...variantSiblings], [itemSiblings, variantSiblings]);
+	const handleTypesChange = (newTypes) => {
+		const nextTypes = [newTypes].flat();
+		const added = nextTypes.filter((t) => !selectedTypes.includes(t));
+		const removed = selectedTypes.filter((t) => !nextTypes.includes(t));
+		let base = {
+			...dictionary,
+			...updatedDictionary ?? {}
+		};
+		for (const qualifier of removed) {
+			if (qualifier === "collection") base = {
+				...base,
+				item: void 0
+			};
+			if (qualifier === "variant") base = {
+				...base,
+				variant: void 0
+			};
+		}
+		for (const qualifier of added) if (qualifier === "collection") {
+			const nextItem = allItemDicts.length > 0 ? Math.max(...allItemDicts.map((d) => d.item ?? 0)) + 1 : 1;
+			setItemValue(nextItem);
+			base = {
+				...base,
+				item: nextItem
+			};
+		} else if (qualifier === "variant") {
+			const newVariant = variantValue || "default";
+			setVariantValue(newVariant);
+			base = {
+				...base,
+				variant: parseVariantInput(newVariant).variant
+			};
+		}
+		setSelectedTypes(nextTypes);
+		setEditedDictionary(base);
+		setVariantJsonError(false);
+		if (nextTypes.length === 0 && allQualifiedSiblings.length > 0) setShowSiblingPicker(true);
+		else setShowSiblingPicker(false);
+	};
 	return /* @__PURE__ */ jsxs(Form, {
 		className: "flex w-full flex-col gap-8",
 		...form,
@@ -79,7 +189,7 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "grid grid-cols-2 gap-8 max-md:grid-cols-1",
-				children: [/* @__PURE__ */ jsx(Form.EditableFieldInput, {
+				children: [/* @__PURE__ */ jsx(EditableFieldInputElement, {
 					name: "key",
 					label: keyInput.label,
 					placeholder: keyInput.label.value,
@@ -94,7 +204,7 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 							key: value
 						});
 					}
-				}), /* @__PURE__ */ jsx(Form.EditableFieldInput, {
+				}), /* @__PURE__ */ jsx(EditableFieldInputElement, {
 					name: "title",
 					label: titleInput.label,
 					placeholder: titleInput.placeholder.value,
@@ -110,7 +220,7 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 					}
 				})]
 			}),
-			/* @__PURE__ */ jsx(Form.EditableFieldTextArea, {
+			/* @__PURE__ */ jsx(EditableFieldTextAreaElement, {
 				name: "description",
 				label: descriptionInput.label,
 				placeholder: descriptionInput.placeholder.value,
@@ -127,7 +237,7 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "grid grid-cols-2 gap-8 px-1 max-md:grid-cols-1",
-				children: [/* @__PURE__ */ jsx(Form.Field, {
+				children: [/* @__PURE__ */ jsx(FormField, {
 					control: form.control,
 					name: "location",
 					render: ({ field }) => {
@@ -157,10 +267,10 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 								location: newValue
 							});
 						};
-						return /* @__PURE__ */ jsxs(Form.Item, {
+						return /* @__PURE__ */ jsxs(FormItem, {
 							className: "flex flex-col gap-2 px-1",
 							children: [
-								/* @__PURE__ */ jsx(Form.Label, {
+								/* @__PURE__ */ jsx(FormLabelLayout, {
 									className: "ml-1",
 									children: locationSelect.label
 								}),
@@ -184,8 +294,8 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 										onChange: (e) => handleRemoteToggle(e.target.checked)
 									})]
 								}),
-								/* @__PURE__ */ jsx(Form.Description, { children: locationSelect.testDescription }),
-								/* @__PURE__ */ jsx(Form.Message, {})
+								/* @__PURE__ */ jsx(FormDescription, { children: locationSelect.testDescription }),
+								/* @__PURE__ */ jsx(FormMessage, {})
 							]
 						});
 					}
@@ -205,8 +315,7 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 							height: 0
 						},
 						transition: { duration: .3 },
-						className: "overflow-hidden",
-						children: /* @__PURE__ */ jsx(Form.Input, {
+						children: /* @__PURE__ */ jsx(InputElement, {
 							name: "filePath",
 							label: filePathInput.label.value,
 							placeholder: filePathInput.placeholder.value,
@@ -226,7 +335,7 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "grid grid-cols-2 gap-8 max-md:grid-cols-1",
-				children: /* @__PURE__ */ jsxs(Form.Select, {
+				children: /* @__PURE__ */ jsxs(SelectElement, {
 					name: "importMode",
 					label: importModeSelect.label.value,
 					description: importModeSelect.description.value,
@@ -256,7 +365,7 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "grid grid-cols-2 gap-8 max-md:grid-cols-1",
-				children: [/* @__PURE__ */ jsxs(Form.MultiSelect, {
+				children: [/* @__PURE__ */ jsxs(MultiSelectElement, {
 					name: "projectIds",
 					label: projectInput.label.value,
 					description: projectInput.description,
@@ -279,7 +388,7 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 							children: project.name
 						}, String(project.id))) })
 					}) })]
-				}), /* @__PURE__ */ jsxs(Form.MultiSelect, {
+				}), /* @__PURE__ */ jsxs(MultiSelectElement, {
 					name: "tags",
 					label: tagsSelect.label.value,
 					description: tagsSelect.description,
@@ -304,9 +413,259 @@ const DictionaryDetailsForm = ({ dictionary, mode }) => {
 					}) })]
 				})]
 			}),
+			/* @__PURE__ */ jsxs(Container, {
+				className: "gap-4",
+				padding: "md",
+				roundedSize: "2xl",
+				background: "none",
+				border: true,
+				borderColor: "card",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "ml-1 font-semibold text-sm",
+							children: typeSwitch.label
+						}), /* @__PURE__ */ jsx("p", {
+							className: "ml-1 text-muted text-xs",
+							children: typeSwitch.description
+						})]
+					}),
+					/* @__PURE__ */ jsxs(MultiSelect, {
+						values: selectedTypes,
+						onValueChange: handleTypesChange,
+						className: "max-w-xs",
+						children: [/* @__PURE__ */ jsx(MultiSelect.Trigger, {
+							getBadgeValue: (val) => {
+								if (val === "collection") return String(typeSwitch.collection);
+								if (val === "variant") return String(typeSwitch.variant);
+								return val;
+							},
+							children: /* @__PURE__ */ jsx(MultiSelect.Input, { placeholder: typeSwitch.label.value })
+						}), /* @__PURE__ */ jsx(MultiSelect.Content, { children: /* @__PURE__ */ jsx(MultiSelect.List, { children: QUALIFIER_TYPES.map((qualifier) => /* @__PURE__ */ jsx(MultiSelect.Item, {
+							value: qualifier,
+							children: typeSwitch[qualifier].value
+						}, qualifier)) }) })]
+					}),
+					/* @__PURE__ */ jsxs(AnimatePresence, { children: [
+						selectedTypes.includes("collection") && /* @__PURE__ */ jsx(motion.div, {
+							initial: {
+								opacity: 0,
+								height: 0
+							},
+							animate: {
+								opacity: 1,
+								height: "auto"
+							},
+							exit: {
+								opacity: 0,
+								height: 0
+							},
+							transition: { duration: .2 },
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-2 px-1",
+								children: [/* @__PURE__ */ jsx("label", {
+									htmlFor: "qualifier-item-value",
+									className: "ml-1 font-medium text-sm",
+									children: typeSwitch.itemValueLabel
+								}), /* @__PURE__ */ jsx(Input, {
+									id: "qualifier-item-value",
+									type: "number",
+									min: 1,
+									value: itemValue,
+									placeholder: typeSwitch.itemValuePlaceholder.value,
+									onChange: (e) => {
+										const value = parseInt(e.target.value, 10);
+										if (!Number.isNaN(value) && value >= 1) {
+											setItemValue(value);
+											setEditedDictionary({
+												...dictionary,
+												...updatedDictionary ?? {},
+												item: value
+											});
+										}
+									}
+								})]
+							})
+						}, "item-input"),
+						selectedTypes.includes("variant") && /* @__PURE__ */ jsx(motion.div, {
+							initial: {
+								opacity: 0,
+								height: 0
+							},
+							animate: {
+								opacity: 1,
+								height: "auto"
+							},
+							exit: {
+								opacity: 0,
+								height: 0
+							},
+							transition: { duration: .2 },
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-2 px-1",
+								children: [
+									/* @__PURE__ */ jsx("label", {
+										htmlFor: "qualifier-variant-value",
+										className: "ml-1 font-medium text-sm",
+										children: typeSwitch.variantValueLabel
+									}),
+									/* @__PURE__ */ jsx(Input, {
+										id: "qualifier-variant-value",
+										type: "text",
+										value: variantValue,
+										placeholder: typeSwitch.variantValuePlaceholder.value,
+										onChange: (e) => {
+											const value = e.target.value;
+											setVariantValue(value);
+											const { variant, error } = parseVariantInput(value);
+											setVariantJsonError(error);
+											if (!error) setEditedDictionary({
+												...dictionary,
+												...updatedDictionary ?? {},
+												variant
+											});
+										}
+									}),
+									variantJsonError && /* @__PURE__ */ jsx("p", {
+										className: "ml-1 text-destructive text-xs",
+										children: typeSwitch.variantJsonError
+									})
+								]
+							})
+						}, "variant-input"),
+						selectedTypes.length === 0 && showSiblingPicker && /* @__PURE__ */ jsx(motion.div, {
+							initial: {
+								opacity: 0,
+								height: 0
+							},
+							animate: {
+								opacity: 1,
+								height: "auto"
+							},
+							exit: {
+								opacity: 0,
+								height: 0
+							},
+							transition: { duration: .2 },
+							children: /* @__PURE__ */ jsxs(Container, {
+								background: "none",
+								border: true,
+								borderColor: "neutral",
+								roundedSize: "xl",
+								padding: "md",
+								className: "gap-3",
+								children: [
+									/* @__PURE__ */ jsx("p", {
+										className: "font-medium text-sm",
+										children: typeSwitch.disablePickerTitle
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "text-muted text-xs",
+										children: typeSwitch.disablePickerDescription
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "flex flex-wrap gap-2",
+										children: allQualifiedSiblings.map((sibling) => /* @__PURE__ */ jsxs("button", {
+											type: "button",
+											onClick: () => {
+												onSelectSibling?.(sibling);
+												setShowSiblingPicker(false);
+											},
+											className: "cursor-pointer rounded-lg border border-border px-3 py-1 text-xs transition-colors hover:bg-text/10",
+											children: [sibling.variant !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+												qualifierSection.variant,
+												":",
+												" ",
+												formatVariant(sibling.variant)
+											] }), sibling.item !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+												qualifierSection.item,
+												": ",
+												sibling.item
+											] })]
+										}, sibling.localId))
+									})
+								]
+							})
+						}, "sibling-picker")
+					] })
+				]
+			}),
+			/* @__PURE__ */ jsxs(Container, {
+				className: "gap-4",
+				padding: "md",
+				roundedSize: "2xl",
+				background: "none",
+				border: true,
+				borderColor: "neutral",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "font-semibold text-sm",
+					children: siblingContent.title
+				}), /* @__PURE__ */ jsxs(Loader, {
+					isLoading: isLoadingSiblings,
+					children: [
+						!hasSiblings && /* @__PURE__ */ jsx("p", {
+							className: "text-muted text-sm",
+							children: siblingContent.noSiblings
+						}),
+						allItemDicts.length > 0 && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-2",
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "font-medium text-muted text-xs uppercase tracking-wide",
+									children: siblingContent.collectionItems
+								}),
+								/* @__PURE__ */ jsx(Pagination, {
+									currentPage: allItemDicts.findIndex((dictionaryEl) => dictionaryEl.localId === dictionary.localId) + 1 || 1,
+									totalPages: allItemDicts.length,
+									onPageChange: (page) => {
+										const target = allItemDicts[page - 1];
+										if (target && onSelectSibling) onSelectSibling(target);
+									},
+									showPrevNext: true
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "mt-1 flex flex-wrap gap-2",
+									children: allItemDicts.map((sibling) => {
+										const isActive = sibling.localId === dictionary.localId;
+										return /* @__PURE__ */ jsxs("button", {
+											type: "button",
+											onClick: () => !isActive && onSelectSibling?.(sibling),
+											className: cn("rounded-lg px-3 py-1 text-xs transition-colors", isActive ? "bg-text font-semibold text-text-opposite" : "cursor-pointer border border-border hover:bg-text/10"),
+											children: [
+												siblingContent.itemIndex,
+												" ",
+												sibling.item
+											]
+										}, sibling.localId);
+									})
+								})
+							]
+						}),
+						allVariantDicts.length > 0 && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-2",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-medium text-muted text-xs uppercase tracking-wide",
+								children: siblingContent.variants
+							}), /* @__PURE__ */ jsx("div", {
+								className: "flex flex-wrap gap-2",
+								children: allVariantDicts.map((sibling) => {
+									const isActive = sibling.localId === dictionary.localId;
+									return /* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: () => !isActive && onSelectSibling?.(sibling),
+										className: cn("rounded-lg px-3 py-1 text-xs transition-colors", isActive ? "bg-text font-semibold text-text-opposite" : "cursor-pointer border border-border hover:bg-text/10"),
+										children: formatVariant(sibling.variant)
+									}, sibling.localId);
+								})
+							})]
+						})
+					]
+				})]
+			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-wrap items-center justify-end gap-2 max-md:flex-col",
-				children: /* @__PURE__ */ jsx(Form.Button, {
+				children: /* @__PURE__ */ jsx(Button, {
 					type: "button",
 					size: "icon-md",
 					label: auditButton.label.value,