sitero 0.2.0 → 0.3.0

package/dist/src/cms/client/interfaces/components/ui/features/pick-modal/picker-input.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { MousePointerClick, X } from 'lucide-react';
+import { useState } from 'react';
+import '@radix-ui/react-avatar';
+import 'mime-types';
+import 'sitero-domain';
+import 'ua-parser-js';
+import '../../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import 'clsx';
+import 'tailwind-merge';
+import '../../../shadcn/badge.js';
+import '../../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import { DialogTrigger } from '../../../shadcn/dialog.js';
+import '@radix-ui/react-dropdown-menu';
+import '../../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+import '../../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import { ActionButton } from '../../buttons/action-button.js';
+import 'next/link';
+import 'next/navigation';
+import '../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../constants/cms-locale.js';
+import { PickDialog } from './pick-dialog.js';
+
+function PickerInput(props) {
+  const { t } = useTranslator();
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = props.open ?? internalOpen;
+  const disabled = props.disabled || props.loading;
+  const items = props.multiple ? props.value : props.value ? [props.value] : [];
+  const onOpenChange = (next) => {
+    if (next && disabled) return;
+    if (props.open === void 0) setInternalOpen(next);
+    props.onOpenChange?.(next);
+  };
+  const clear = () => {
+    if (disabled) return;
+    if (props.onClear) props.onClear();
+    else if (props.multiple) props.onChange([]);
+    else props.onChange(null);
+  };
+  const selection = props.multiple ? { multiple: true, value: props.value, onConfirm: props.onChange } : {
+    multiple: false,
+    value: props.value,
+    onConfirm: props.onChange
+  };
+  return /* @__PURE__ */ jsx(
+    PickDialog,
+    {
+      ...props,
+      ...selection,
+      disabled,
+      open,
+      onOpenChange,
+      children: /* @__PURE__ */ jsxs("div", { className: "grid w-full gap-3", children: [
+        items.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-start gap-3 rounded-md", children: props.renderValue(items) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            ActionButton,
+            {
+              ...props.controlProps,
+              variant: "outline",
+              isLoading: props.loading,
+              isDisabled: props.disabled,
+              className: "text-muted-foreground flex-1 justify-start",
+              children: [
+                /* @__PURE__ */ jsx(MousePointerClick, {}),
+                t("ui.pick-modal.pick.text")
+              ]
+            }
+          ) }),
+          items.length > 0 && /* @__PURE__ */ jsxs(
+            ActionButton,
+            {
+              variant: "outline",
+              isDisabled: disabled,
+              onClick: clear,
+              "aria-label": t("ui.pick-modal.clear.text"),
+              children: [
+                /* @__PURE__ */ jsx(X, {}),
+                t("ui.pick-modal.clear.text")
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+
+export { PickerInput };

package/dist/src/cms/client/interfaces/components/ui/features/smart-image.js

@@ -8,7 +8,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';
 
 const BREAKPOINT = 1024;
 function createSmartImage({ storageUrl }) {

package/dist/src/cms/client/interfaces/components/ui/features/tick.js

@@ -7,7 +7,6 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
 
 function Tick({ isPicked = false, className = "" }) {
   return /* @__PURE__ */ jsx(

package/dist/src/cms/client/interfaces/components/ui/form/containers/fields-container.js

@@ -6,7 +6,6 @@ import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
 import { CMS_FORM_MIDDLE_GAP_WIDTH } from '../../../../styles/constants.js';
 import { useIsMobile } from '../../../shadcn/sidebar/use-mobile.js';
 

package/dist/src/cms/client/interfaces/components/ui/form/containers/main-fields.js

@@ -6,7 +6,6 @@ import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
 import { CMS_FORM_SIDE_FIELDS_WIDTH, CMS_FORM_MIDDLE_GAP_WIDTH } from '../../../../styles/constants.js';
 import { useIsMobile } from '../../../shadcn/sidebar/use-mobile.js';
 

package/dist/src/cms/client/interfaces/components/ui/form/containers/side-fields.js

@@ -6,7 +6,6 @@ import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
 import { CMS_FORM_SIDE_FIELDS_WIDTH } from '../../../../styles/constants.js';
 import { useIsMobile } from '../../../shadcn/sidebar/use-mobile.js';
 

package/dist/src/cms/client/interfaces/components/ui/form/control-fields/control-fields.js

@@ -6,7 +6,6 @@ import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../../shadcn/badge.js';
 import '../../../shadcn/button.js';

package/dist/src/cms/client/interfaces/components/ui/form/field-body.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useTranslator } from 'intor/react';
 import 'mime-types';
 import 'sitero-domain';
 import 'react';
@@ -8,7 +7,6 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -27,6 +25,7 @@ import 'sonner';
 import { Spinner } from '../../shadcn/spinner.js';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import { NoData } from '../display/no-data.js';
 
 function FieldBody({
   // ui states
@@ -40,7 +39,6 @@ function FieldBody({
   children,
   ...props
 }) {
-  const { t } = useTranslator();
   const hasChildren = children !== void 0 && children !== null;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -65,7 +63,7 @@ function FieldBody({
           }
         ),
         isLoading && /* @__PURE__ */ jsx("div", { className: "px-3", children: /* @__PURE__ */ jsx(Spinner, {}) }),
-        !isLoading && (!hasChildren || isEmpty) && /* @__PURE__ */ jsx("div", { className: "flex-center h-10 px-3 opacity-50", children: /* @__PURE__ */ jsx("p", { className: "opacity-50", children: t("ui.no-data.text") }) }),
+        !isLoading && (!hasChildren || isEmpty) && /* @__PURE__ */ jsx("div", { className: "flex-center h-10 px-3 opacity-50", children: /* @__PURE__ */ jsx(NoData, {}) }),
         !isLoading && hasChildren && !isEmpty && /* @__PURE__ */ jsx(
           "div",
           {

package/dist/src/cms/client/interfaces/components/ui/form/field.js

@@ -7,7 +7,6 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';

package/dist/src/cms/client/interfaces/components/ui/form/form-field.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Asterisk } from 'lucide-react';
+import 'mime-types';
+import 'sitero-domain';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import { cn } from '../../../../../../shared/utils/cn.js';
+import { FormMessage } from './form-message.js';
+
+function FormField({
+  controlId,
+  label,
+  description,
+  error,
+  isRequired = false,
+  labelChildren,
+  className,
+  children,
+  ...props
+}) {
+  const descriptionId = description ? `${controlId}-description` : void 0;
+  const errorId = error ? `${controlId}-error` : void 0;
+  const describedBy = [descriptionId, errorId].filter(Boolean).join(" ");
+  const controlProps = {
+    id: controlId,
+    ...describedBy ? { "aria-describedby": describedBy } : {},
+    ...errorId ? { "aria-errormessage": errorId, "aria-invalid": true } : {},
+    ...isRequired ? { "aria-required": true } : {}
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid w-full gap-3", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex gap-1 truncate", htmlFor: controlId, children: [
+        label,
+        isRequired && /* @__PURE__ */ jsx(Asterisk, { className: "text-destructive size-3" })
+      ] }),
+      labelChildren && /* @__PURE__ */ jsx("span", { children: labelChildren })
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", id: descriptionId, children: description }),
+    children(controlProps),
+    error && /* @__PURE__ */ jsx(FormMessage, { id: errorId, children: error })
+  ] });
+}
+
+export { FormField };

package/dist/src/cms/client/interfaces/components/ui/form/form-message.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import 'mime-types';
+import 'sitero-domain';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import { cn } from '../../../../../../shared/utils/cn.js';
+
+function FormMessage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn("text-destructive text-sm", className),
+      role: "alert",
+      ...props
+    }
+  );
+}
+
+export { FormMessage };

package/dist/src/cms/client/interfaces/components/ui/form/form.js

@@ -7,7 +7,6 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
 
 function Form({
   onSubmit,

package/dist/src/cms/client/interfaces/components/ui/form/index-field.js

@@ -8,10 +8,9 @@ import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
 import { ensureArray } from '../../../../../../shared/utils/ensure-array.js';
-import 'zod';
 import { ExpandableList } from '../features/expandable-list/expandable-list.js';
 import { Checkbox } from '../inputs/checkbox.js';
-import { Input } from '../inputs/input.js';
+import { NumberInput } from '../inputs/number-input.js';
 import { FieldBody } from './field-body.js';
 
 function IndexField({
@@ -51,22 +50,22 @@ function IndexField({
         }
       ),
       !isDisplay ? /* @__PURE__ */ jsx(
-        Input,
+        NumberInput,
         {
           id: isIndexActive ? id : void 0,
-          fieldName: "index",
           value: index ?? 0,
-          setFormData,
-          type: "number",
+          onChange: (value) => {
+            setFormData?.((previous) => ({ ...previous, index: value }));
+          },
           step: 1,
           min: 1,
           required: isIndexActive,
-          isDisabled: !isIndexActive || isDisabled,
+          disabled: !isIndexActive || isDisabled,
           className: cn(!isIndexActive && "text-transparent"),
+          "aria-invalid": isError,
           inputGroupClassName: cn(
             isIndexActive ? "opacity-100" : "opacity-50 cursor-not-allowed"
-          ),
-          isError
+          )
         }
       ) : /* @__PURE__ */ jsx(
         FieldBody,

package/dist/src/cms/client/interfaces/components/ui/form/slug-field.js

@@ -8,7 +8,6 @@ import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
 import { ensureArray } from '../../../../../../shared/utils/ensure-array.js';
-import 'zod';
 import { ExpandableList } from '../features/expandable-list/expandable-list.js';
 import { Checkbox } from '../inputs/checkbox.js';
 import { Textarea } from '../inputs/textarea.js';
@@ -54,11 +53,15 @@ function SlugField({
         Textarea,
         {
           id: isSlugActive ? id : void 0,
-          fieldName: "slug",
           value: slug,
-          setFormData,
+          onChange: (event) => {
+            setFormData?.((previous) => ({
+              ...previous,
+              slug: event.target.value
+            }));
+          },
           required: isSlugActive,
-          isDisabled: !isSlugActive || isDisabled,
+          disabled: !isSlugActive || isDisabled,
           onKeyDown: (e) => {
             if (e.key === "Enter") return e.preventDefault();
           },
@@ -66,7 +69,7 @@ function SlugField({
             "resize-none break-all",
             !isSlugActive && "text-transparent"
           ),
-          isError: isUnavailable || isError
+          "aria-invalid": isUnavailable || isError
         }
       ) : /* @__PURE__ */ jsx(FieldBody, { isEmpty: !isSlugActive, backgroundClassName: "!bg-base-200", children: slug })
     ] }),

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

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { useState } from 'react';
+import 'mime-types';
+import 'sitero-domain';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import 'clsx';
+import 'tailwind-merge';
+import { getLocaleLanguageCode } from '../../../../../../shared/utils/get-locale-language-code.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-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import { Tabs, TabsList, TabsTrigger } from '../../shadcn/tabs.js';
+import '@radix-ui/react-tooltip';
+import { Field } from '../form/field.js';
+import '../inputs/input.js';
+import '../inputs/textarea.js';
+
+function I18nDisplayField({
+  fieldName,
+  label,
+  locales,
+  translations = [],
+  children
+}) {
+  const { format } = useTranslator();
+  const [selectedLocale, setSelectedLocale] = useState(locales[0] ?? "");
+  const activeLocale = locales.includes(selectedLocale) ? selectedLocale : locales[0] ?? "";
+  const translation = translations.find(
+    (translation2) => translation2.locale === activeLocale
+  );
+  const value = translation?.[fieldName] ?? null;
+  return /* @__PURE__ */ jsx(Field, { label, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    locales.length > 1 && /* @__PURE__ */ jsx(Tabs, { value: activeLocale, onValueChange: setSelectedLocale, children: /* @__PURE__ */ jsx(TabsList, { children: locales.map((locale) => {
+      const language = getLocaleLanguageCode(locale);
+      return /* @__PURE__ */ jsx(TabsTrigger, { value: locale, children: format.displayName(language, { type: "language" }) }, locale);
+    }) }) }),
+    children({ locale: activeLocale, value })
+  ] }) });
+}
+
+export { I18nDisplayField };

package/dist/src/cms/client/interfaces/components/ui/i18n/i18n-form-field.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { useState } from 'react';
+import 'mime-types';
+import 'sitero-domain';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import 'clsx';
+import 'tailwind-merge';
+import { getLocaleLanguageCode } from '../../../../../../shared/utils/get-locale-language-code.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-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import { Tabs, TabsList, TabsTrigger } from '../../shadcn/tabs.js';
+import '@radix-ui/react-tooltip';
+import { FormField } from '../form/form-field.js';
+import '../inputs/input.js';
+import '../inputs/textarea.js';
+import { getErrorsByLocales } from './utils/get-errors-by-locales.js';
+
+function I18nFormField({
+  fieldName,
+  label,
+  locales,
+  translations,
+  errors = [],
+  isRequired = false,
+  description,
+  children,
+  ...props
+}) {
+  const { format } = useTranslator();
+  const [selectedLocale, setSelectedLocale] = useState(locales[0] ?? "");
+  const activeLocale = locales.includes(selectedLocale) ? selectedLocale : locales[0] ?? "";
+  const errorsByLocale = getErrorsByLocales(
+    locales,
+    errors,
+    translations,
+    fieldName
+  );
+  const activeErrors = errorsByLocale.filter(
+    (error) => error.locale === activeLocale
+  );
+  const activeFieldError = activeErrors.find(
+    (error) => error.index === void 0
+  );
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      ...props,
+      controlId: `${fieldName}-${activeLocale}`,
+      label,
+      description,
+      isRequired,
+      error: activeFieldError?.message,
+      children: (controlProps) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        locales.length > 1 && /* @__PURE__ */ jsx(Tabs, { value: activeLocale, onValueChange: setSelectedLocale, children: /* @__PURE__ */ jsx(TabsList, { children: locales.map((locale) => {
+          const language = getLocaleLanguageCode(locale);
+          const hasError = errorsByLocale.some(
+            (error) => error.locale === locale
+          );
+          return /* @__PURE__ */ jsx(
+            TabsTrigger,
+            {
+              value: locale,
+              "aria-invalid": hasError || void 0,
+              className: hasError ? "text-destructive ring-destructive ring-1" : void 0,
+              children: format.displayName(language, { type: "language" })
+            },
+            locale
+          );
+        }) }) }),
+        children({
+          locale: activeLocale,
+          controlProps,
+          errors: activeErrors
+        })
+      ] })
+    }
+  );
+}
+
+export { I18nFormField };

package/dist/src/cms/client/interfaces/components/ui/i18n/utils/get-errors-by-locales.js

@@ -1,14 +1,26 @@
-const getErrorsByLocales = (locales, errors = [], translations = [], fieldName = "") => {
-  const rawParts = errors.map((e) => e?.split("."));
-  const filteredParts = rawParts.filter(
-    (parts) => !!parts && parts[0] === "translations" && parts[2] === fieldName
+const getErrorsByLocales = (locales, errors = [], translations = [], fieldName = "", errorMessages = {}) => {
+  const normalizedErrors = errors.map(
+    (error) => typeof error === "string" ? { path: error, message: errorMessages[error] } : error
   );
-  const mapped = filteredParts.map(([, indexStr, ...rest]) => {
+  const entries = normalizedErrors.map((error) => ({
+    error,
+    parts: error.path.split(".")
+  }));
+  const filteredEntries = entries.filter((entry) => {
+    return entry.parts[0] === "translations" && entry.parts[2] === fieldName;
+  });
+  const mapped = filteredEntries.map(({ error, parts }) => {
+    const [, indexStr, ...rest] = parts;
     const locale = translations[Number(indexStr)]?.locale ?? "";
     if (!locales.includes(locale)) return null;
     const last = rest.at(1);
     const index = !Number.isNaN(Number(last)) ? Number(last) : void 0;
-    return { locale, path: rest, index };
+    return {
+      locale,
+      path: rest,
+      index,
+      message: error.message ?? errorMessages[error.path]
+    };
   });
   const filtered = mapped.filter((a) => !!a);
   return filtered;

package/dist/src/cms/client/interfaces/components/ui/inputs/checkbox.js

@@ -7,7 +7,6 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Input } from './input.js';
+
+function DatetimeInput({
+  value,
+  onChange,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      type: "datetime-local",
+      value: value ?? "",
+      onChange: (event) => onChange(event.target.value || null)
+    }
+  );
+}
+
+export { DatetimeInput };

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

@@ -13,7 +13,6 @@ import 'react/jsx-runtime';
 import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import { WORD_COUNT_DISPLAY_PLUGIN_NAME } from '../plugins/word-count-display/word-count-display.js';
 import { builtinPlugins } from './built-in-plugins.js';
 import { headingConfig } from './configs/heading.config.js';

package/dist/src/cms/client/interfaces/components/ui/inputs/editor/base/built-in-plugins.js

@@ -10,7 +10,6 @@ import 'react/jsx-runtime';
 import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import WordCountButtons from '../plugins/word-count-display/word-count-display.js';
 
 const builtinPlugins = [