@yimingliao/cms 0.0.149 → 0.0.150

package/dist/src/client/interfaces/components/ui/i18n/display/i18n-display.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import 'mime-types';
+import { findTranslation } from '../../../../../../shared/translation/find-translation.js';
+import 'ua-parser-js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import 'next/link';
+import '../../../../../../constants/paths/auth.js';
+import '../../../../../../constants/paths/main.js';
+import '../../../../../../constants/paths/resources.js';
+import '../../../../../../constants/redirect-paths.js';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+import '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../shadcn/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import { FieldBody } from '../../form/field-body.js';
+import 'intor/react';
+import { HtmlDisplay } from '../../display/html-display.js';
+
+function createI18nDisplay({
+  I18nTabsWrapper,
+  locales
+}) {
+  return function I18nDisplay({
+    fieldName = "",
+    translations,
+    isLoading,
+    isHtml = false,
+    // For Editor using
+    className,
+    ...props
+  }) {
+    const [currentLocale, setCurrentLocale] = useState(locales[0]);
+    return /* @__PURE__ */ jsx(I18nTabsWrapper, { setCurrentLocale, children: locales.map((locale) => {
+      const translation = findTranslation(translations, locale);
+      const value = translation?.[fieldName];
+      if (currentLocale === locale) {
+        return /* @__PURE__ */ jsx(
+          FieldBody,
+          {
+            isLoading,
+            isEmpty: !value,
+            className: cn(className, "whitespace-pre-line"),
+            ...props,
+            children: !isHtml ? value : /* @__PURE__ */ jsx(HtmlDisplay, { html: value })
+          },
+          locale
+        );
+      }
+      return null;
+    }) });
+  };
+}
+
+export { createI18nDisplay };

package/dist/src/client/interfaces/components/ui/i18n/display/i18n-object-array-display.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import 'mime-types';
+import { findTranslation } from '../../../../../../shared/translation/find-translation.js';
+import { ensureArray } from '../../../../../../shared/utils/ensure-array.js';
+import 'next/link';
+import '../../../../../../constants/paths/auth.js';
+import '../../../../../../constants/paths/main.js';
+import '../../../../../../constants/paths/resources.js';
+import '../../../../../../constants/redirect-paths.js';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import 'lucide-react';
+import '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../shadcn/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import 'intor/react';
+import { ObjectArrayList } from '../../display/object-array-list.js';
+
+function createI18nObjectArrayDisplay({
+  I18nTabsWrapper,
+  locales
+}) {
+  return function I18nObjectArrayDisplay({
+    fieldName = "",
+    translations,
+    fields,
+    isLoading
+  }) {
+    const [currentLocale, setCurrentLocale] = useState(locales[0]);
+    return /* @__PURE__ */ jsx(I18nTabsWrapper, { setCurrentLocale, children: locales.map((locale) => {
+      const translation = findTranslation(translations, locale, []);
+      const items = ensureArray(translation?.[fieldName]);
+      if (currentLocale === locale) {
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          ObjectArrayList,
+          {
+            items,
+            fields: ensureArray(fields),
+            isLoading
+          }
+        ) }, locale);
+      }
+      return null;
+    }) });
+  };
+}
+
+export { createI18nObjectArrayDisplay };

package/dist/src/client/interfaces/components/ui/i18n/inputs/i18n-array-input.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { CircleX, CirclePlus } from 'lucide-react';
+import { useState } from 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import { Separator } from '../../../shadcn/separator.js';
+import '../../../shadcn/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import { Button } from '../../buttons/button.js';
+import 'intor/react';
+import { Textarea } from '../../inputs/textarea.js';
+import { getErrorsByLocales } from '../utils/get-errors-by-locales.js';
+import { getTranslationValue } from '../utils/get-translation-value.js';
+import { updateTranslations } from '../utils/update-translations.js';
+
+function createI18nArrayInput({
+  I18nTabsWrapper,
+  locales
+}) {
+  return function I18nArrayInput({
+    translations,
+    fieldName,
+    setFormData,
+    isLoading = false,
+    isDisabled = false,
+    isResizable = false,
+    errors = [],
+    ...props
+  }) {
+    const [currentLocale, setCurrentLocale] = useState(locales[0]);
+    const errorsByLocales = getErrorsByLocales(
+      locales,
+      errors,
+      translations,
+      fieldName
+    );
+    return /* @__PURE__ */ jsx(
+      I18nTabsWrapper,
+      {
+        setCurrentLocale,
+        errorLocales: errorsByLocales.map((e) => e.locale),
+        children: locales.map((locale) => {
+          const rawValue = getTranslationValue(
+            translations,
+            locale,
+            fieldName
+          );
+          const values = Array.isArray(rawValue) && rawValue.length > 0 ? rawValue.map(String) : [""];
+          const errorIndexes = new Set(
+            errorsByLocales.filter((e) => e.locale === locale).map((e) => e.index).filter((i) => i !== void 0)
+          );
+          if (currentLocale === locale) {
+            return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: values.map((value, index) => {
+              const isError = errorIndexes.has(index);
+              return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex-center absolute top-0 left-0 z-10 h-full", children: [
+                  /* @__PURE__ */ jsx("span", { className: "min-w-[38px] text-center text-sm opacity-50", children: Array.isArray(rawValue) && rawValue.length === 0 ? "0" : index + 1 }),
+                  /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Textarea,
+                  {
+                    disabled: isDisabled,
+                    placeholder: isLoading ? "" : props.placeholder,
+                    value,
+                    onChange: (e) => {
+                      if (!setFormData || !fieldName) return;
+                      const copy = [...values];
+                      copy[index] = e.target.value;
+                      setFormData((prev) => {
+                        const updated = updateTranslations(
+                          prev["translations"],
+                          currentLocale,
+                          fieldName,
+                          copy
+                        );
+                        return { ...prev, translations: updated };
+                      });
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" && !isResizable) {
+                        e.preventDefault();
+                      }
+                    },
+                    isError,
+                    className: cn(
+                      "pr-18 pl-14",
+                      !isResizable && "resize-none"
+                    ),
+                    ...props
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex-center absolute top-[3px] right-[3px] gap-1", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      type: "button",
+                      size: "icon-sm",
+                      onClick: () => {
+                        if (!setFormData || !fieldName) return;
+                        const copy = values.filter((_, i) => i !== index);
+                        setFormData((prev) => {
+                          const updated = updateTranslations(
+                            prev["translations"],
+                            currentLocale,
+                            fieldName,
+                            copy
+                          );
+                          return { ...prev, translations: updated };
+                        });
+                      },
+                      children: /* @__PURE__ */ jsx(CircleX, { className: "text-destructive" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      type: "button",
+                      size: "icon-sm",
+                      onClick: () => {
+                        if (!setFormData || !fieldName) return;
+                        const copy = [...values];
+                        copy.splice(index + 1, 0, "");
+                        setFormData((prev) => {
+                          const updated = updateTranslations(
+                            prev["translations"],
+                            currentLocale,
+                            fieldName,
+                            copy
+                          );
+                          return { ...prev, translations: updated };
+                        });
+                      },
+                      children: /* @__PURE__ */ jsx(CirclePlus, { className: "text-success" })
+                    }
+                  )
+                ] })
+              ] }, index);
+            }) }, locale);
+          }
+          return null;
+        })
+      }
+    );
+  };
+}
+
+export { createI18nArrayInput };

package/dist/src/client/interfaces/components/ui/i18n/inputs/i18n-date-input.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import 'mime-types';
+import { datetimeToUi } from '../../../../../../shared/form/normalizers/datetime-to-ui.js';
+import 'lucide-react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../shadcn/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import 'intor/react';
+import { Input } from '../../inputs/input.js';
+import { getErrorsByLocales } from '../utils/get-errors-by-locales.js';
+import { getTranslationValue } from '../utils/get-translation-value.js';
+import { updateTranslations } from '../utils/update-translations.js';
+
+function createI18nDateInput({
+  I18nTabsWrapper,
+  locales
+}) {
+  return function I18nDateInput({
+    translations,
+    fieldName,
+    setFormData,
+    isLoading,
+    isDisabled,
+    errors,
+    ...props
+  }) {
+    const [currentLocale, setCurrentLocale] = useState(locales[0]);
+    const errorsByLocales = getErrorsByLocales(
+      locales,
+      errors,
+      translations,
+      fieldName
+    );
+    return /* @__PURE__ */ jsx(
+      I18nTabsWrapper,
+      {
+        setCurrentLocale,
+        errorLocales: errorsByLocales.map((e) => e.locale),
+        children: locales.map((locale) => {
+          const value = getTranslationValue(
+            translations,
+            locale,
+            fieldName
+          );
+          if (currentLocale === locale) {
+            return /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: datetimeToUi(value) ?? "",
+                onChange: (e) => {
+                  if (!fieldName || !setFormData) return;
+                  setFormData((prev) => {
+                    const updated = updateTranslations(
+                      prev["translations"],
+                      currentLocale,
+                      fieldName,
+                      e.target.value
+                    );
+                    return { ...prev, translations: updated };
+                  });
+                },
+                isLoading,
+                isDisabled,
+                isError: errorsByLocales.some((e) => e.locale === locale),
+                ...props
+              },
+              locale
+            );
+          }
+          return null;
+        })
+      }
+    );
+  };
+}
+
+export { createI18nDateInput };

package/dist/src/client/interfaces/components/ui/i18n/inputs/i18n-editor.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import 'ua-parser-js';
+import { cn } from '../../../../../applications/shadcn/utils.js';
+import 'next/navigation';
+import 'lucide-react';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../shadcn/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import { FieldBody } from '../../form/field-body.js';
+import 'mime-types';
+import 'intor/react';
+import { getErrorsByLocales } from '../utils/get-errors-by-locales.js';
+import { getTranslationValue } from '../utils/get-translation-value.js';
+import { updateTranslations } from '../utils/update-translations.js';
+
+function createI18nEditor({
+  I18nTabsWrapper,
+  locales,
+  Editor
+}) {
+  return function I18nEditor({
+    locale: cmsLocale,
+    translations,
+    fieldName,
+    setFormData,
+    isLoading = false,
+    isDisabled = false,
+    errors = [],
+    ...props
+  }) {
+    const [currentLocale, setCurrentLocale] = useState(locales[0]);
+    const errorsByLocales = getErrorsByLocales(
+      locales,
+      errors,
+      translations,
+      fieldName
+    );
+    return /* @__PURE__ */ jsx(
+      I18nTabsWrapper,
+      {
+        setCurrentLocale,
+        errorLocales: errorsByLocales.map((e) => e.locale),
+        children: locales.map((locale) => {
+          const value = getTranslationValue(
+            translations,
+            locale,
+            fieldName
+          );
+          if (currentLocale === locale) {
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  (isDisabled || isLoading) && "pointer-events-none"
+                ),
+                children: isLoading ? /* @__PURE__ */ jsx(FieldBody, { isLoading: true }) : /* @__PURE__ */ jsx(
+                  Editor,
+                  {
+                    locale: cmsLocale.startsWith("zh") ? "zh" : "en",
+                    value: value ?? "",
+                    onEditorChange: (value2) => {
+                      if (!fieldName || !setFormData) return;
+                      setFormData((prev) => {
+                        const updated = updateTranslations(
+                          prev["translations"],
+                          locale,
+                          fieldName,
+                          value2
+                        );
+                        return { ...prev, translations: updated };
+                      });
+                    },
+                    isLoading,
+                    isDisabled,
+                    isError: errorsByLocales.some((e) => e.locale === locale),
+                    ...props
+                  }
+                )
+              },
+              locale
+            );
+          }
+          return null;
+        })
+      }
+    );
+  };
+}
+
+export { createI18nEditor };

package/dist/src/client/interfaces/components/ui/i18n/inputs/i18n-input.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import 'lucide-react';
+import 'ua-parser-js';
+import 'clsx';
+import 'tailwind-merge';
+import 'next/navigation';
+import '@radix-ui/react-avatar';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../../shadcn/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import 'intor/react';
+import { Input } from '../../inputs/input.js';
+import { getErrorsByLocales } from '../utils/get-errors-by-locales.js';
+import { getTranslationValue } from '../utils/get-translation-value.js';
+import { updateTranslations } from '../utils/update-translations.js';
+
+function createI18nInput({
+  I18nTabsWrapper,
+  locales
+}) {
+  return function I18nInput({
+    translations,
+    fieldName,
+    setFormData,
+    isLoading = false,
+    isDisabled = false,
+    errors = [],
+    ...props
+  }) {
+    const [currentLocale, setCurrentLocale] = useState(locales[0]);
+    const errorsByLocales = getErrorsByLocales(
+      locales,
+      errors,
+      translations,
+      fieldName
+    );
+    return /* @__PURE__ */ jsx(
+      I18nTabsWrapper,
+      {
+        setCurrentLocale,
+        errorLocales: errorsByLocales.map((e) => e.locale),
+        children: locales.map((locale) => {
+          const value = getTranslationValue(
+            translations,
+            locale,
+            fieldName
+          );
+          if (currentLocale === locale) {
+            return /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: value ?? "",
+                onChange: (e) => {
+                  if (!fieldName || !setFormData) return;
+                  setFormData((prev) => {
+                    const updated = updateTranslations(
+                      prev["translations"],
+                      currentLocale,
+                      fieldName,
+                      e.target.value
+                    );
+                    return { ...prev, translations: updated };
+                  });
+                },
+                isLoading,
+                isDisabled,
+                isError: errorsByLocales.some((e) => e.locale === locale),
+                ...props
+              },
+              locale
+            );
+          }
+          return null;
+        })
+      }
+    );
+  };
+}
+
+export { createI18nInput };