sitero 0.2.0 → 0.3.0

package/dist/src/cms/client/interfaces/components/resources/seo-metadata/seo-form/fields/open-graph-tags.js

@@ -1,11 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
-import { Accordion } from '../../../../ui/features/accordion/accordion.js';
-import 'lucide-react';
-import 'next/link';
-import '../../../../../../../../constants/paths/redirect.js';
-import '../../../../../../../../constants/cms-locale.js';
 import 'mime-types';
 import 'sitero-domain';
 import 'react';
@@ -14,8 +9,15 @@ import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
+import { createTranslationTextBinder } from '../../../../../../applications/form/binders/create-translation-text-binder.js';
+import { createTranslationDatetimeBinder } from '../../../../../../applications/form/binders/create-translation-datetime-binder.js';
+import { createTranslationNumberBinder } from '../../../../../../applications/form/binders/create-translation-number-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 'next/navigation';
+import 'lucide-react';
+import { Accordion } from '../../../../ui/features/accordion/accordion.js';
 import '@radix-ui/react-avatar';
 import '../../../../shadcn/badge.js';
 import '../../../../shadcn/button.js';
@@ -32,25 +34,159 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
-import { Field } from '../../../../ui/form/field.js';
+import 'next/link';
+import { NumberInput } from '../../../../ui/inputs/number-input.js';
+import { Textarea } from '../../../../ui/inputs/textarea.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 { Input } from '../../../../ui/inputs/input.js';
+import { DatetimeInput } from '../../../../ui/inputs/datetime-input.js';
+import { StringArrayInput } from '../../../../ui/inputs/string-array-input.js';
 
 function createOpenGraphTags({
-  I18nInput,
-  I18nTextarea,
-  I18nArrayInput,
-  I18nDateInput,
-  I18nNumberInput
+  webLocales
 }) {
   return function OpenGraphTags({
     formData,
     setFormData,
     errors,
+    isProcessing,
     isArticle,
     allowField
   }) {
     const { t } = useTranslator();
-    if (!allowField("og:all")) return;
+    const bindTranslationText = createTranslationTextBinder(
+      formData,
+      setFormData
+    );
+    const bindTranslationNumber = createTranslationNumberBinder(
+      formData,
+      setFormData
+    );
+    const bindTranslationDatetime = createTranslationDatetimeBinder(
+      formData,
+      setFormData
+    );
+    const bindTranslationStringArray = createTranslationStringArrayBinder(
+      formData,
+      setFormData
+    );
+    if (!allowField("og:all")) return null;
+    const textFields = [
+      {
+        enabled: allowField("ogTitle"),
+        fieldName: "ogTitle",
+        label: "og:title",
+        description: `<meta property="og:title" content="..." /> (${t(
+          "resources.seo-metadata.defaults-same-as.text"
+        )} title)`
+      },
+      {
+        enabled: allowField("ogDescription"),
+        fieldName: "ogDescription",
+        label: "og:description",
+        description: `<meta property="og:description" content="..." /> (${t(
+          "resources.seo-metadata.defaults-same-as.text"
+        )} description)`,
+        isTextarea: true
+      },
+      {
+        enabled: allowField("ogUrl"),
+        fieldName: "ogUrl",
+        label: "og:url",
+        description: '<meta property="og:url" content="..." />'
+      },
+      {
+        enabled: allowField("ogType"),
+        fieldName: "ogType",
+        label: "og:type",
+        description: `<meta property="og:type" content="..." /> (${t(
+          "resources.seo-metadata.defaults-based-on.text"
+        )} Type)`
+      },
+      {
+        enabled: allowField("ogSiteName"),
+        fieldName: "ogSiteName",
+        label: "og:site_name",
+        description: `<meta property="og:site_name" content="..." /> (${t(
+          "resources.seo-metadata.defaults-based-on.text"
+        )} Site Name)`
+      },
+      {
+        enabled: allowField("ogImage"),
+        fieldName: "ogImage",
+        label: "og:image",
+        description: '<meta property="og:image" content="..." />'
+      },
+      {
+        enabled: allowField("ogImageAlt"),
+        fieldName: "ogImageAlt",
+        label: "og:image:alt",
+        description: '<meta property="og:image:alt" content="..." />'
+      },
+      {
+        enabled: allowField("ogImageType"),
+        fieldName: "ogImageType",
+        label: "og:image:type",
+        description: `<meta property="og:image:type" content="..." /> (${t(
+          "resources.seo-metadata.defaults-based-on.text"
+        )} Image Type)`
+      },
+      {
+        enabled: allowField("ogLocale"),
+        fieldName: "ogLocale",
+        label: "og:locale",
+        description: '<meta property="og:locale" content="..." />'
+      },
+      {
+        enabled: allowField("ogArticleAuthor") && isArticle,
+        fieldName: "ogArticleAuthor",
+        label: "og:article:author",
+        description: `<meta property="og:article:author" content="..." /> (${t(
+          "resources.seo-metadata.defaults-based-on.text"
+        )} Site Name)`
+      },
+      {
+        enabled: allowField("ogArticleSection") && isArticle,
+        fieldName: "ogArticleSection",
+        label: "og:article:section",
+        description: '<meta property="og:article:section" content="..." />'
+      }
+    ];
+    const numberFields = [
+      {
+        enabled: allowField("ogImageWidth"),
+        fieldName: "ogImageWidth",
+        label: "og:image:width",
+        description: `<meta property="og:image:width" content="..." /> (${t(
+          "resources.seo-metadata.defaults-based-on.text"
+        )} 1200)`
+      },
+      {
+        enabled: allowField("ogImageHeight"),
+        fieldName: "ogImageHeight",
+        label: "og:image:height",
+        description: `<meta property="og:image:height" content="..." /> (${t(
+          "resources.seo-metadata.defaults-based-on.text"
+        )} 630)`
+      }
+    ];
+    const arrayFields = [
+      {
+        enabled: allowField("ogLocaleAlternate"),
+        fieldName: "ogLocaleAlternate",
+        label: "og:locale:alternate",
+        description: '<meta property="og:locale:alternate" content="..." />'
+      },
+      {
+        enabled: allowField("ogArticleTag") && isArticle,
+        fieldName: "ogArticleTag",
+        label: "og:article:tag",
+        description: '<meta property="og:article:tag" content="..." />'
+      }
+    ];
     return /* @__PURE__ */ jsx(
       Accordion,
       {
@@ -59,377 +195,116 @@ function createOpenGraphTags({
         accordionHeaderProps: { children: "Open Graph" },
         deps: [formData],
         children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-          allowField("ogTitle") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogTitle",
-              label: "og:title",
-              hint: `<meta property="og:title" content="..." /> (${t(
-                "resources.seo-metadata.defaults-same-as.text"
-              )} title)`,
-              children: /* @__PURE__ */ jsx(
-                I18nInput,
-                {
-                  id: "ogTitle",
-                  fieldName: "ogTitle",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogTitle: t2.ogTitle
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
-          ),
-          allowField("ogDescription") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogDescription",
-              label: "og:description",
-              hint: `<meta property="og:description" content="..." /> (${t(
-                "resources.seo-metadata.defaults-same-as.text"
-              )} description)`,
-              children: /* @__PURE__ */ jsx(
-                I18nTextarea,
-                {
-                  id: "ogDescription",
-                  fieldName: "ogDescription",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogDescription: t2.ogDescription
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
-          ),
-          allowField("ogUrl") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogUrl",
-              label: "og:url",
-              hint: `<meta property="og:url" content="..." />`,
-              children: /* @__PURE__ */ jsx(
-                I18nInput,
-                {
-                  id: "ogUrl",
-                  fieldName: "ogUrl",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogUrl: t2.ogUrl
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
+          textFields.map(
+            ({ enabled, fieldName, label, description, isTextarea }) => enabled && /* @__PURE__ */ jsx(
+              I18nFormField,
+              {
+                fieldName,
+                label,
+                description,
+                locales: webLocales,
+                translations: formData.translations,
+                errors,
+                children: ({ locale, controlProps }) => isTextarea ? /* @__PURE__ */ jsx(
+                  Textarea,
+                  {
+                    ...bindTranslationText(fieldName, locale),
+                    disabled: isProcessing,
+                    ...controlProps
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    ...bindTranslationText(fieldName, locale),
+                    disabled: isProcessing,
+                    ...controlProps
+                  }
+                )
+              },
+              fieldName
+            )
           ),
-          allowField("ogType") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogType",
-              label: "og:type",
-              hint: `<meta property="og:type" content="..." />  (${t(
-                "resources.seo-metadata.defaults-based-on.text"
-              )} Type)`,
-              children: /* @__PURE__ */ jsx(
-                I18nInput,
-                {
-                  id: "ogType",
-                  fieldName: "ogType",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogType: t2.ogType
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
+          numberFields.map(
+            ({ enabled, fieldName, label, description }) => enabled && /* @__PURE__ */ jsx(
+              I18nFormField,
+              {
+                fieldName,
+                label,
+                description,
+                locales: webLocales,
+                translations: formData.translations,
+                errors,
+                children: ({ locale, controlProps }) => /* @__PURE__ */ jsx(
+                  NumberInput,
+                  {
+                    ...bindTranslationNumber(fieldName, locale),
+                    min: 0,
+                    step: 1,
+                    disabled: isProcessing,
+                    ...controlProps
+                  }
+                )
+              },
+              fieldName
+            )
           ),
-          allowField("ogSiteName") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogSiteName",
-              label: "og:site_name",
-              hint: `<meta property="og:site_name" content="..." /> (${t(
-                "resources.seo-metadata.defaults-based-on.text"
-              )} Site Name)`,
-              children: /* @__PURE__ */ jsx(
-                I18nInput,
-                {
-                  id: "ogSiteName",
-                  fieldName: "ogSiteName",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogSiteName: t2.ogSiteName
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
-          ),
-          allowField("ogImage") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogImage",
-              label: "og:image",
-              hint: `<meta property="og:image" content="..." />`,
-              children: /* @__PURE__ */ jsx(
-                I18nInput,
-                {
-                  id: "ogImage",
-                  fieldName: "ogImage",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogImage: t2.ogImage
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
-          ),
-          allowField("ogImageAlt") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogImageAlt",
-              label: "og:image:alt",
-              hint: `<meta property="og:image:alt" content="..." />`,
-              children: /* @__PURE__ */ jsx(
-                I18nInput,
-                {
-                  id: "ogImageAlt",
-                  fieldName: "ogImageAlt",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogImageAlt: t2.ogImageAlt
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
-          ),
-          allowField("ogImageType") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogImageType",
-              label: "og:image:type",
-              hint: `<meta property="og:image:type" content="..." /> (${t(
-                "resources.seo-metadata.defaults-based-on.text"
-              )} Image Type)`,
-              children: /* @__PURE__ */ jsx(
-                I18nInput,
-                {
-                  id: "ogImageType",
-                  fieldName: "ogImageType",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogImageType: t2.ogImageType
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
-          ),
-          allowField("ogImageWidth") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogImageWidth",
-              label: "og:image:width",
-              hint: `<meta property="og:image:width" content="..." /> (${t(
-                "resources.seo-metadata.defaults-based-on.text"
-              )} 1200)`,
-              children: /* @__PURE__ */ jsx(
-                I18nNumberInput,
-                {
-                  id: "ogImageWidth",
-                  fieldName: "ogImageWidth",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogImageWidth: t2.ogImageWidth
-                  })),
-                  setFormData,
-                  errors,
-                  type: "number"
-                }
-              )
-            }
-          ),
-          allowField("ogImageHeight") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogImageHeight",
-              label: "og:image:height",
-              hint: `<meta property="og:image:height" content="..." /> (${t(
-                "resources.seo-metadata.defaults-based-on.text"
-              )} 630)`,
-              children: /* @__PURE__ */ jsx(
-                I18nNumberInput,
-                {
-                  id: "ogImageHeight",
-                  fieldName: "ogImageHeight",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogImageHeight: t2.ogImageHeight
-                  })),
-                  setFormData,
-                  errors,
-                  type: "number"
-                }
-              )
-            }
-          ),
-          allowField("ogLocale") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogLocale",
-              label: "og:locale",
-              hint: `<meta property="og:locale" content="..." />`,
-              children: /* @__PURE__ */ jsx(
-                I18nInput,
-                {
-                  id: "ogLocale",
-                  fieldName: "ogLocale",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogLocale: t2.ogLocale
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
-          ),
-          allowField("ogLocaleAlternate") && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogLocaleAlternate",
-              label: "og:locale:alternate",
-              hint: `<meta property="og:locale:alternate" content="..." />`,
-              children: /* @__PURE__ */ jsx(
-                I18nArrayInput,
-                {
-                  id: "ogLocaleAlternate",
-                  fieldName: "ogLocaleAlternate",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogLocaleAlternate: t2.ogLocaleAlternate
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
+          arrayFields.map(
+            ({ enabled, fieldName, label, description }) => enabled && /* @__PURE__ */ jsx(
+              I18nFormField,
+              {
+                fieldName,
+                label,
+                description,
+                locales: webLocales,
+                translations: formData.translations,
+                errors,
+                children: ({ locale, controlProps, errors: activeErrors }) => /* @__PURE__ */ jsx(
+                  StringArrayInput,
+                  {
+                    ...bindTranslationStringArray(fieldName, locale),
+                    itemErrors: activeErrors,
+                    disabled: isProcessing,
+                    ...controlProps
+                  }
+                )
+              },
+              fieldName
+            )
           ),
           allowField("ogArticlePublishedTime") && isArticle && /* @__PURE__ */ jsx(
-            Field,
+            I18nFormField,
             {
-              htmlFor: "ogArticlePublishedTime",
+              fieldName: "ogArticlePublishedTime",
               label: "og:article:published_time",
-              hint: `<meta property="og:article:published_time" content="..." />`,
-              children: /* @__PURE__ */ jsx(
-                I18nDateInput,
+              description: '<meta property="og:article:published_time" content="..." />',
+              locales: webLocales,
+              translations: formData.translations,
+              errors,
+              children: ({ locale, controlProps }) => /* @__PURE__ */ jsx(
+                DatetimeInput,
                 {
-                  id: "ogArticlePublishedTime",
-                  fieldName: "ogArticlePublishedTime",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogArticlePublishedTime: t2.ogArticlePublishedTime
-                  })),
-                  setFormData,
-                  errors
+                  ...bindTranslationDatetime("ogArticlePublishedTime", locale),
+                  disabled: isProcessing,
+                  ...controlProps
                 }
               )
             }
           ),
           allowField("ogArticleModifiedTime") && isArticle && /* @__PURE__ */ jsx(
-            Field,
+            I18nFormField,
             {
-              htmlFor: "ogArticleModifiedTime",
+              fieldName: "ogArticleModifiedTime",
               label: "og:article:modified_time",
-              hint: `<meta property="og:article:modified_time" content="..." />`,
-              children: /* @__PURE__ */ jsx(
-                I18nDateInput,
-                {
-                  id: "ogArticleModifiedTime",
-                  fieldName: "ogArticleModifiedTime",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogArticleModifiedTime: t2.ogArticleModifiedTime
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
-          ),
-          allowField("ogArticleAuthor") && isArticle && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogArticleAuthor",
-              label: "og:article:author",
-              hint: `<meta property="og:article:author" content="..." /> (${t(
-                "resources.seo-metadata.defaults-based-on.text"
-              )} Site Name)`,
-              children: /* @__PURE__ */ jsx(
-                I18nInput,
-                {
-                  id: "ogArticleAuthor",
-                  fieldName: "ogArticleAuthor",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogArticleAuthor: t2.ogArticleAuthor
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
-          ),
-          allowField("ogArticleSection") && isArticle && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogArticleSection",
-              label: "og:article:section",
-              hint: `<meta property="og:article:section" content="..." />`,
-              children: /* @__PURE__ */ jsx(
-                I18nInput,
-                {
-                  id: "ogArticleSection",
-                  fieldName: "ogArticleSection",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogArticleSection: t2.ogArticleSection
-                  })),
-                  setFormData,
-                  errors
-                }
-              )
-            }
-          ),
-          allowField("ogArticleTag") && isArticle && /* @__PURE__ */ jsx(
-            Field,
-            {
-              htmlFor: "ogArticleTag",
-              label: "og:article:tag",
-              hint: `<meta property="og:article:tag" content="..." />`,
-              children: /* @__PURE__ */ jsx(
-                I18nArrayInput,
+              description: '<meta property="og:article:modified_time" content="..." />',
+              locales: webLocales,
+              translations: formData.translations,
+              errors,
+              children: ({ locale, controlProps }) => /* @__PURE__ */ jsx(
+                DatetimeInput,
                 {
-                  id: "ogArticleTag",
-                  fieldName: "ogArticleTag",
-                  translations: formData?.translations.map((t2) => ({
-                    locale: t2.locale,
-                    ogArticleTag: t2.ogArticleTag
-                  })),
-                  setFormData,
-                  errors
+                  ...bindTranslationDatetime("ogArticleModifiedTime", locale),
+                  disabled: isProcessing,
+                  ...controlProps
                 }
               )
             }