sitero 0.2.0 → 0.3.0

package/dist/src/cms/client/interfaces/components/resources/admin/admin-table.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import { Activity, ShieldUser } from 'lucide-react';
+import { Circle, ShieldUser } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { CMS_PATHS } from '../../../../../../constants/paths/cms-paths.js';
 import '../../../../../../constants/paths/redirect.js';
@@ -15,7 +15,6 @@ import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
 import { joinUrl } from '../../../../../../shared/utils/join-url.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -34,6 +33,9 @@ import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '.
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
 import 'next/link';
+import { NoData } from '../../ui/display/no-data.js';
+import '../../ui/inputs/input.js';
+import '../../ui/inputs/textarea.js';
 import { Badge } from '../../ui/display/badge.js';
 import { Tick } from '../../ui/features/tick.js';
 import 'next/image';
@@ -41,57 +43,71 @@ import { AdminStateIcons } from './admin-state-icons.js';
 
 function AdminTable({
   admins,
+  contentLocale,
   pickedItems,
-  handleClick,
+  onSelect,
   openNewTab
 }) {
-  const { t, locale } = useTranslator();
+  const { t } = useTranslator();
   const router = useRouter();
   return /* @__PURE__ */ jsxs(Table, { children: [
     /* @__PURE__ */ jsx(TableHeader, { className: "text-muted-foreground", children: /* @__PURE__ */ jsxs(TableRow, { children: [
-      /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
-      /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
-      /* @__PURE__ */ jsx(TableHead, { children: t("resources.admin.role.text") }),
-      /* @__PURE__ */ jsx(TableHead, { children: t("resources.states.text") }),
-      /* @__PURE__ */ jsx(TableHead, { children: t("resources.admin.email.text") }),
+      onSelect && /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-12", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("resources.admin.text") }) }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-40", children: t("resources.admin.role.text") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-40", children: t("resources.states.text") }),
       /* @__PURE__ */ jsx(TableHead, { children: t("resources.admin.name.text") }),
-      /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Activity, {}) })
+      /* @__PURE__ */ jsx(TableHead, { children: t("resources.admin.email.text") })
     ] }) }),
     /* @__PURE__ */ jsx(TableBody, { children: admins.map((admin) => {
       const isPicked = !!pickedItems?.some((item) => item.id === admin.id);
-      const adminT = findTranslation(admin.translations, locale);
+      const adminT = findTranslation(admin.translations, contentLocale);
       const href = joinUrl(
         CMS_PATHS.system.access.admin.pathname,
-        admin?.id
+        admin.id
+      );
+      const name = adminT.name || void 0;
+      const title = name ?? t("ui.no-data.text");
+      const isSelecting = onSelect !== void 0;
+      const selectionLabel = t(
+        isPicked ? "ui.picked.text" : "ui.pick.text"
       );
+      function activateRow() {
+        if (onSelect) {
+          onSelect(admin);
+          return;
+        }
+        if (openNewTab) {
+          globalThis.open(href, "_blank", "noopener,noreferrer");
+          return;
+        }
+        router.push(href);
+      }
       return /* @__PURE__ */ jsxs(
         TableRow,
         {
+          "data-state": isPicked ? "selected" : void 0,
           className: cn(
-            "cursor-pointer",
+            "focus-visible:outline-ring cursor-pointer focus-visible:outline-2",
             pickedItems && !isPicked && "opacity-50"
           ),
-          onClick: () => {
-            if (handleClick === void 0) {
-              if (openNewTab) {
-                globalThis.open(href);
-              } else {
-                router.push(href);
-              }
-            } else {
-              handleClick(admin);
-            }
+          tabIndex: 0,
+          "aria-label": `${isSelecting ? selectionLabel : t("resources.admin.text")}: ${title}`,
+          onClick: activateRow,
+          onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            activateRow();
           },
           children: [
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "flex-center", children: /* @__PURE__ */ jsx(Tick, { isPicked }) }) }),
+            isSelecting && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "flex-center text-muted-foreground/60", children: isPicked ? /* @__PURE__ */ jsx(Tick, { isPicked: true }) : /* @__PURE__ */ jsx(Circle, { "aria-hidden": true, className: "size-5!" }) }) }),
             /* @__PURE__ */ jsx(TableCell, { className: "border-r", children: /* @__PURE__ */ jsx("div", { className: "flex-center", children: /* @__PURE__ */ jsx(ShieldUser, { className: "text-muted-foreground" }) }) }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { children: t(
+            /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(Badge, { className: "h-5.5 w-fit max-w-32 min-w-0 px-3", children: t(
               `resources.admin.role.${admin.role.toLowerCase()}.text`
             ) }) }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(AdminStateIcons, { admin }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: /* @__PURE__ */ jsx("p", { className: "truncate", children: admin.email }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: /* @__PURE__ */ jsx("p", { className: "truncate", children: adminT.name }) }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "text-xs opacity-50", children: t("resources.see-in-details.text") }) })
+            /* @__PURE__ */ jsx(TableCell, { className: "w-40", children: /* @__PURE__ */ jsx(AdminStateIcons, { admin }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: name ? /* @__PURE__ */ jsx("p", { className: "truncate", children: name }) : /* @__PURE__ */ jsx(NoData, {}) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px]", children: /* @__PURE__ */ jsx("p", { className: "truncate", children: admin.email }) })
           ]
         },
         admin.id

package/dist/src/cms/client/interfaces/components/resources/config/config-edit-content.js

@@ -2,20 +2,23 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
 import { useRouter } from 'next/navigation';
+import 'mime-types';
+import 'sitero-domain';
 import 'react';
 import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
-import { useCommand } from '../../../../../../shared/client/react-query/use-command.js';
-import 'mime-types';
-import 'sitero-domain';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
+import { createTranslationTextBinder } from '../../../../applications/form/binders/create-translation-text-binder.js';
+import { createStringArrayBinder } from '../../../../applications/form/binders/create-string-array-binder.js';
+import { createTranslationStringArrayBinder } from '../../../../applications/form/binders/create-translation-string-array-binder.js';
 import '../../../../../../constants/paths/redirect.js';
 import '../../../../../../constants/cms-locale.js';
 import { useParentPathname } from '../../../../applications/ui/use-parent-pathname.js';
 import 'lucide-react';
+import { getCmsLocalizedFieldErrors, getCmsFieldErrorMessageMap, getCmsArrayItemErrors } from '../../../../infrastructure/operation-result/presentation/message.js';
+import { useCmsCommand } from '../../../../infrastructure/operation-result/use-cms-command.js';
 import 'next/link';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
@@ -33,20 +36,23 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import { ActionButtonsCard } from '../../ui/cards/action-buttons-card.js';
 import { Form } from '../../ui/form/form.js';
-import { Field } from '../../ui/form/field.js';
+import { FormField } from '../../ui/form/form-field.js';
 import { FieldsContainer } from '../../ui/form/containers/fields-container.js';
 import { MainFields } from '../../ui/form/containers/main-fields.js';
 import { SideFields } from '../../ui/form/containers/side-fields.js';
 import { Input } from '../../ui/inputs/input.js';
 import { Textarea } from '../../ui/inputs/textarea.js';
-import { ActionButtonsCard } from '../../ui/cards/action-buttons-card.js';
-import { PickModal } from '../../ui/features/pick-modal/pick-modal.js';
+import { PickerInput } from '../../ui/features/pick-modal/picker-input.js';
 import 'next/image';
+import { I18nFormField } from '../../ui/i18n/i18n-form-field.js';
+import '../../ui/inputs/switch-input.js';
+import '../../ui/inputs/password-input.js';
+import { StringArrayInput } from '../../ui/inputs/string-array-input.js';
 import '../../../../infrastructure/admin-session/admin-context.js';
 import 'intor/next';
 import { ContentContainer } from '../../ui/layouts/content-container.js';
-import { ArrayInput } from '../../ui/inputs/array-input.js';
 
 function ConfigEditContent({
   config,
@@ -55,135 +61,245 @@ function ConfigEditContent({
   isNotFound,
   useConfigUpdateFormData,
   configUpdateAction,
-  I18nTextarea,
-  I18nArrayInput,
   FileCard,
   FileList,
-  Uploader
+  Uploader,
+  webLocales
 }) {
-  const { locale } = useTranslator();
+  const { t, locale } = useTranslator();
   const router = useRouter();
   const parentPathname = useParentPathname();
   const { formData, setFormData } = useConfigUpdateFormData(config);
-  const { execute, isRedirecting, errors } = useCommand(
+  const bindStringArray = createStringArrayBinder(formData, setFormData);
+  const bindTranslationStringArray = createTranslationStringArrayBinder(
+    formData,
+    setFormData
+  );
+  const bindTranslationText = createTranslationTextBinder(
+    formData,
+    setFormData
+  );
+  const { execute, isRedirecting, fieldErrors } = useCmsCommand(
     () => configUpdateAction({ id: config?.id ?? "", formData }),
     { onSuccess: () => router.replace(parentPathname) }
   );
+  const isProcessing = isFetching || isRedirecting;
+  const localizedFieldErrors = getCmsLocalizedFieldErrors(
+    t,
+    locale,
+    fieldErrors
+  );
+  const fieldErrorMessages = getCmsFieldErrorMessageMap(localizedFieldErrors);
   return /* @__PURE__ */ jsx(ContentContainer, { isNotFound, children: /* @__PURE__ */ jsxs(Form, { onSubmit: () => void execute(), children: [
     /* @__PURE__ */ jsxs(FieldsContainer, { children: [
       /* @__PURE__ */ jsx(MainFields, { children: /* @__PURE__ */ jsx(Fragment, { children: Object.entries(fields).map(([key, field]) => {
         const label = field.label[locale];
         if (key.startsWith("text")) {
-          return /* @__PURE__ */ jsx(Field, { htmlFor: key, label, children: /* @__PURE__ */ jsx(
-            Textarea,
+          return /* @__PURE__ */ jsx(
+            FormField,
             {
-              id: key,
-              fieldName: key,
-              formData,
-              setFormData,
-              isDisabled: isRedirecting,
-              errors
-            }
-          ) }, key);
+              controlId: key,
+              label,
+              error: fieldErrorMessages[key],
+              children: (controlProps) => /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  value: formData[key] ?? "",
+                  onChange: (event) => {
+                    setFormData((previous) => ({
+                      ...previous,
+                      [key]: event.target.value
+                    }));
+                  },
+                  disabled: isProcessing,
+                  ...controlProps
+                }
+              )
+            },
+            key
+          );
         } else if (key.startsWith("data")) {
-          return /* @__PURE__ */ jsx(Field, { htmlFor: key, label, children: /* @__PURE__ */ jsx(
-            ArrayInput,
+          return /* @__PURE__ */ jsx(
+            FormField,
             {
-              id: key,
-              fieldName: key,
-              formData,
-              setFormData,
-              isDisabled: isRedirecting,
-              errors
-            }
-          ) }, key);
+              controlId: key,
+              label,
+              error: fieldErrorMessages[key],
+              children: (controlProps) => /* @__PURE__ */ jsx(
+                StringArrayInput,
+                {
+                  ...bindStringArray(key),
+                  itemErrors: getCmsArrayItemErrors(
+                    localizedFieldErrors,
+                    key
+                  ),
+                  disabled: isProcessing,
+                  ...controlProps
+                }
+              )
+            },
+            key
+          );
         }
         if (key.startsWith("dec")) {
-          return /* @__PURE__ */ jsx(Field, { htmlFor: key, label, children: /* @__PURE__ */ jsx(
-            Input,
+          return /* @__PURE__ */ jsx(
+            FormField,
             {
-              id: key,
-              type: "number",
-              step: "any",
-              value: formData[key] ?? "",
-              onChange: (e) => {
-                const rawValue = e.target.value;
-                const value = rawValue === "" ? null : Number(rawValue);
-                setFormData((p) => ({ ...p, [key]: value }));
-              },
-              isDisabled: isRedirecting,
-              errors
-            }
-          ) }, key);
+              controlId: key,
+              label,
+              error: fieldErrorMessages[key],
+              children: (controlProps) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "number",
+                  step: "any",
+                  value: formData[key] ?? "",
+                  onChange: (event) => {
+                    const rawValue = event.target.value;
+                    setFormData((previous) => ({
+                      ...previous,
+                      [key]: rawValue === "" ? null : Number(rawValue)
+                    }));
+                  },
+                  disabled: isProcessing,
+                  ...controlProps
+                }
+              )
+            },
+            key
+          );
         }
         if (key.startsWith("int")) {
-          return /* @__PURE__ */ jsx(Field, { htmlFor: key, label, children: /* @__PURE__ */ jsx(
-            Input,
+          return /* @__PURE__ */ jsx(
+            FormField,
             {
-              id: key,
-              type: "number",
-              step: 1,
-              value: formData[key] ?? "",
-              onChange: (e) => {
-                const rawValue = e.target.value;
-                const value = rawValue === "" ? null : Number(rawValue);
-                setFormData((p) => ({ ...p, [key]: value }));
-              },
-              isDisabled: isRedirecting,
-              errors
-            }
-          ) }, key);
+              controlId: key,
+              label,
+              error: fieldErrorMessages[key],
+              children: (controlProps) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "number",
+                  step: 1,
+                  value: formData[key] ?? "",
+                  onChange: (event) => {
+                    const rawValue = event.target.value;
+                    setFormData((previous) => ({
+                      ...previous,
+                      [key]: rawValue === "" ? null : Number(rawValue)
+                    }));
+                  },
+                  disabled: isProcessing,
+                  ...controlProps
+                }
+              )
+            },
+            key
+          );
         } else if (key.startsWith("i18nText")) {
-          return /* @__PURE__ */ jsx(Field, { htmlFor: key, label, children: /* @__PURE__ */ jsx(
-            I18nTextarea,
+          return /* @__PURE__ */ jsx(
+            I18nFormField,
             {
-              id: key,
               fieldName: key,
+              label,
+              locales: webLocales,
               translations: formData.translations,
-              setFormData,
-              isDisabled: isRedirecting,
-              errors
-            }
-          ) }, key);
+              errors: localizedFieldErrors,
+              children: ({ locale: translationLocale, controlProps }) => /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  ...bindTranslationText(
+                    key,
+                    translationLocale
+                  ),
+                  disabled: isProcessing,
+                  ...controlProps
+                }
+              )
+            },
+            key
+          );
         } else if (key.startsWith("i18nData")) {
-          return /* @__PURE__ */ jsx(Field, { htmlFor: key, label, children: /* @__PURE__ */ jsx(
-            I18nArrayInput,
+          return /* @__PURE__ */ jsx(
+            I18nFormField,
             {
-              id: key,
               fieldName: key,
+              label,
+              locales: webLocales,
               translations: formData.translations,
-              setFormData,
-              isDisabled: isRedirecting,
-              errors
-            }
-          ) }, key);
+              errors: localizedFieldErrors,
+              children: ({
+                locale: translationLocale,
+                controlProps,
+                errors: activeErrors
+              }) => /* @__PURE__ */ jsx(
+                StringArrayInput,
+                {
+                  ...bindTranslationStringArray(
+                    key,
+                    translationLocale
+                  ),
+                  itemErrors: activeErrors,
+                  disabled: isProcessing,
+                  ...controlProps
+                }
+              )
+            },
+            key
+          );
         } else if (key.startsWith("file") && !key.startsWith("files")) {
-          return /* @__PURE__ */ jsx(Field, { htmlFor: key, label, children: /* @__PURE__ */ jsx(
-            PickModal,
+          return /* @__PURE__ */ jsx(FormField, { controlId: key, label, children: (controlProps) => /* @__PURE__ */ jsx(
+            PickerInput,
             {
-              fieldName: key,
-              formData,
-              setFormData,
-              isLoading: isFetching,
-              isDisabled: isRedirecting,
-              itemList: /* @__PURE__ */ jsx(FileList, {}),
-              pickedDisplay: /* @__PURE__ */ jsx(FileCard, { file: formData[key] }),
-              aboveManagementCard: /* @__PURE__ */ jsx(Uploader, { accept: "*" })
+              title: label,
+              controlProps,
+              value: formData[key],
+              onChange: (value) => setFormData((previous) => ({
+                ...previous,
+                [key]: value
+              })),
+              loading: isFetching,
+              disabled: isProcessing,
+              renderList: (listProps) => /* @__PURE__ */ jsx(FileList, { ...listProps }),
+              renderValue: () => /* @__PURE__ */ jsx(
+                FileCard,
+                {
+                  openNewTab: true,
+                  file: formData[key]
+                }
+              ),
+              renderManagement: ({ onItemsCreated }) => /* @__PURE__ */ jsx(
+                Uploader,
+                {
+                  onItemsCreated,
+                  accept: "*"
+                }
+              )
             }
           ) }, key);
         } else if (key.startsWith("files")) {
-          return /* @__PURE__ */ jsx(Field, { htmlFor: key, label, children: /* @__PURE__ */ jsx(
-            PickModal,
+          return /* @__PURE__ */ jsx(FormField, { controlId: key, label, children: (controlProps) => /* @__PURE__ */ jsx(
+            PickerInput,
             {
-              fieldName: key,
-              formData,
-              setFormData,
-              isLoading: isFetching,
-              isDisabled: isRedirecting,
-              itemList: /* @__PURE__ */ jsx(FileList, {}),
-              pickedDisplay: formData[key].map((file) => /* @__PURE__ */ jsx(FileCard, { file }, file.id)),
-              aboveManagementCard: /* @__PURE__ */ jsx(Uploader, { accept: "*" }),
-              isMultiPick: true
+              title: label,
+              controlProps,
+              value: formData[key],
+              onChange: (value) => setFormData((previous) => ({
+                ...previous,
+                [key]: value
+              })),
+              multiple: true,
+              loading: isFetching,
+              disabled: isProcessing,
+              renderList: (listProps) => /* @__PURE__ */ jsx(FileList, { ...listProps }),
+              renderValue: () => formData[key].map((file) => /* @__PURE__ */ jsx(FileCard, { openNewTab: true, file }, file.id)),
+              renderManagement: ({ onItemsCreated }) => /* @__PURE__ */ jsx(
+                Uploader,
+                {
+                  onItemsCreated,
+                  accept: "*"
+                }
+              )
             }
           ) }, key);
         } else {
@@ -195,7 +311,7 @@ function ConfigEditContent({
         {
           action: "update",
           isInitializing: isFetching,
-          isProcessing: isRedirecting
+          isProcessing
         }
       ) }) })
     ] }),
@@ -204,7 +320,7 @@ function ConfigEditContent({
       {
         action: "update",
         isInitializing: isFetching,
-        isProcessing: isRedirecting
+        isProcessing
       }
     ) })
   ] }) });