sitero 0.2.0 → 0.4.0

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 = [

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

@@ -1,20 +1,15 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
 import { useRef } from 'react';
+import 'mime-types';
+import 'sitero-domain';
 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 { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
 import 'lucide-react';
-import 'intor/react';
-import 'next/link';
-import '../../../../../../../constants/paths/redirect.js';
-import '../../../../../../../constants/cms-locale.js';
-import 'next/navigation';
 import '@radix-ui/react-avatar';
 import '../../../shadcn/badge.js';
 import '../../../shadcn/button.js';
@@ -31,8 +26,14 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import 'next/link';
+import 'next/navigation';
+import '../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../constants/cms-locale.js';
 import { FieldBody } from '../../form/field-body.js';
-import { PickModal } from '../../features/pick-modal/pick-modal.js';
+import '../input.js';
+import '../textarea.js';
+import { PickDialog } from '../../features/pick-modal/pick-dialog.js';
 import 'next/image';
 import 'ckeditor5';
 import { useControlAssetManager } from './plugins/asset-manager/use-control-asset-mamager.js';
@@ -60,9 +61,10 @@ function createEditor({
     className = "",
     ...props
   }) {
+    const { t } = useTranslator();
     const containerRef = useRef(null);
     const { execute } = useCommand(
-      (formData2) => fileCreateAction({ formData: formData2 }),
+      (formData) => fileCreateAction({ formData }),
       { clearAll: false }
     );
     const editorRef = useInitEditor({
@@ -74,7 +76,7 @@ function createEditor({
       createUploadAdapter: (loader) => new UploadAdapter(loader, execute, queryClient),
       openAssetManager: () => setIsOpenAssetManager(true)
     });
-    const { isOpenAssetManager, setIsOpenAssetManager, formData, setFormData } = useControlAssetManager(editorRef, storageUrl);
+    const { isOpenAssetManager, setIsOpenAssetManager, insertFile } = useControlAssetManager(editorRef, storageUrl);
     return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
       FieldBody,
       {
@@ -94,20 +96,23 @@ function createEditor({
         ...props,
         children: [
           /* @__PURE__ */ jsx("div", { ref: containerRef }),
-          /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx(
-            PickModal,
+          /* @__PURE__ */ jsx(
+            PickDialog,
             {
-              isOpen: isOpenAssetManager,
-              setIsOpen: setIsOpenAssetManager,
-              fieldName: "file",
-              formData,
-              setFormData,
-              isLoading,
-              isDisabled,
-              itemList: /* @__PURE__ */ jsx(FileList, {}),
-              aboveManagementCard: /* @__PURE__ */ jsx(Uploader, { accept: "image/*" })
+              open: isOpenAssetManager,
+              onOpenChange: setIsOpenAssetManager,
+              title: t("resources.file.text"),
+              value: null,
+              onConfirm: insertFile,
+              onCloseAutoFocus: (event) => {
+                event.preventDefault();
+                editorRef.current?.editing.view.focus();
+              },
+              disabled: isLoading || isDisabled,
+              renderList: (listProps) => /* @__PURE__ */ jsx(FileList, { ...listProps }),
+              renderManagement: ({ onItemsCreated }) => /* @__PURE__ */ jsx(Uploader, { accept: "image/*", onItemsCreated })
             }
-          ) })
+          )
         ]
       }
     ) });

package/dist/src/cms/client/interfaces/components/ui/inputs/editor/plugins/asset-manager/use-control-asset-mamager.js

@@ -1,7 +1,7 @@
 "use client";
 import { ImageUtils } from 'ckeditor5';
 import { useTranslator } from 'intor/react';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import 'mime-types';
 import 'sitero-domain';
 import { findTranslation } from '../../../../../../../../../shared/translation/find-translation.js';
@@ -12,24 +12,18 @@ import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
 import { joinUrl } from '../../../../../../../../../shared/utils/join-url.js';
-import 'zod';
 
 const useControlAssetManager = (editorRef, storageUrl) => {
   const { locale } = useTranslator();
   const [isOpenAssetManager, setIsOpenAssetManager] = useState(false);
-  const [formData, setFormData] = useState({
-    file: null
-  });
-  useEffect(() => {
-    const { file } = formData;
+  const insertFile = (file) => {
     if (!editorRef.current || !file) return;
     const src = joinUrl(storageUrl, `${file.key}?id=${file.id}`);
-    const alt = findTranslation(file.translations, locale)?.alt ?? "";
+    const alt = findTranslation(file.translations ?? [], locale)?.alt ?? "";
     const imageUtils = editorRef.current.plugins.get(ImageUtils.pluginName);
     imageUtils.insertImage({ src, alt });
-    queueMicrotask(() => setFormData({ file: null }));
-  }, [editorRef, formData, locale, storageUrl]);
-  return { isOpenAssetManager, setIsOpenAssetManager, formData, setFormData };
+  };
+  return { isOpenAssetManager, setIsOpenAssetManager, insertFile };
 };
 
 export { useControlAssetManager };

package/dist/src/cms/client/interfaces/components/ui/inputs/editor/plugins/file-repository/upload-adapter.js

@@ -11,7 +11,6 @@ import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
 import { joinUrl } from '../../../../../../../../../shared/utils/join-url.js';
-import 'zod';
 
 function createUploadAdapter({
   fileUploadApi,

package/dist/src/cms/client/interfaces/components/ui/inputs/editor/plugins/word-count-display/word-count-display.js

@@ -9,7 +9,6 @@ import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
 import { debounce } from '../../../../../../../../../shared/utils/debounce.js';
-import 'zod';
 import { HTML_ICON, CHARACTERS_ICON, WORDS_ICON } from './icons.js';
 
 const WORD_COUNT = "WordCount";

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

@@ -10,7 +10,6 @@ import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
 import { debounce } from '../../../../../../../../shared/utils/debounce.js';
-import 'zod';
 import { BaseEditor } from '../base/base-editor.js';
 import { OPEN_ASSET_MANAGER_KEY } from '../plugins/asset-manager/asset-manager.js';
 import 'intor/react';

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

@@ -1,13 +1,12 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from '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 'zod';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -15,7 +14,7 @@ import '@radix-ui/react-collapsible';
 import '@radix-ui/react-dialog';
 import 'lucide-react';
 import '@radix-ui/react-dropdown-menu';
-import { InputGroup, InputGroupAddon, InputGroupInput } from '../../shadcn/input-group.js';
+import { InputGroup, InputGroupInput } from '../../shadcn/input-group.js';
 import '@radix-ui/react-label';
 import '@radix-ui/react-radio-group';
 import '@radix-ui/react-select';
@@ -23,39 +22,21 @@ import '@radix-ui/react-separator';
 import '../../shadcn/sidebar/sidebar.js';
 import 'next-themes';
 import 'sonner';
-import { Spinner } from '../../shadcn/spinner.js';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
 
-function Input({
-  // form context
-  fieldName,
-  setFormData,
-  // ui states
-  isLoading = false,
-  isDisabled = false,
-  isError = false,
-  // base
-  className,
-  inputGroupClassName,
-  children,
-  ...props
-}) {
+const Input = forwardRef(function Input2({ className, inputGroupClassName, children, disabled, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     InputGroup,
     {
-      "data-disabled": isDisabled || isLoading,
+      "data-disabled": disabled,
       className: cn("h-10", inputGroupClassName),
       children: [
-        isLoading ? /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           InputGroupInput,
           {
-            disabled: isDisabled || isLoading,
-            "aria-invalid": isError,
-            onChange: (e) => {
-              if (!setFormData || !fieldName) return;
-              setFormData((p) => ({ ...p, [fieldName]: e.target.value }));
-            },
+            ref,
+            disabled,
             className: cn("h-10", className),
             ...props
           }
@@ -64,6 +45,6 @@ function Input({
       ]
     }
   );
-}
+});
 
 export { Input };

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

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useEffect } from 'react';
+import { Textarea } from './textarea.js';
+
+function parseJson(value) {
+  if (value.trim() === "") return [];
+  try {
+    return JSON.parse(value);
+  } catch {
+    return void 0;
+  }
+}
+function isValidJson(value) {
+  return parseJson(value) !== void 0;
+}
+function JsonInput({
+  value,
+  onChange,
+  onValidityChange,
+  onBlur,
+  ...props
+}) {
+  const parsed = useMemo(() => parseJson(value), [value]);
+  const isValid = isValidJson(value);
+  useEffect(() => {
+    onValidityChange?.(isValid);
+  }, [isValid, onValidityChange]);
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      ...props,
+      value,
+      "aria-invalid": props["aria-invalid"] || !isValid || void 0,
+      onChange: (event) => onChange(event.target.value),
+      onBlur: (event) => {
+        if (parsed !== void 0) {
+          onChange(JSON.stringify(parsed, null, 2));
+        }
+        onBlur?.(event);
+      }
+    }
+  );
+}
+
+export { JsonInput, isValidJson };

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Input } from './input.js';
+
+function NumberInput({
+  value,
+  onChange,
+  step = "any",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      type: "number",
+      step,
+      value: value ?? "",
+      onChange: (event) => {
+        const rawValue = event.target.value;
+        onChange(rawValue === "" ? null : Number(rawValue));
+      }
+    }
+  );
+}
+
+export { NumberInput };

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

@@ -0,0 +1,151 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { CircleX, CirclePlus } 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 { ActionButton } from '../buttons/action-button.js';
+import 'next/link';
+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-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import 'next/navigation';
+import '../../../../../../constants/paths/redirect.js';
+import '../../../../../../constants/cms-locale.js';
+import { FormMessage } from '../form/form-message.js';
+import { Input } from './input.js';
+import './textarea.js';
+
+function ObjectArrayInput({
+  value,
+  onChange,
+  fields,
+  itemErrors = [],
+  disabled = false,
+  className,
+  id,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  ...props
+}) {
+  const { t } = useTranslator();
+  const emptyItem = Object.fromEntries(
+    fields.map((field) => [field.key, ""])
+  );
+  const items = value.length > 0 ? value : [emptyItem];
+  const itemLabel = t("ui.string-array.item.text");
+  const addLabel = t("ui.string-array.add.text");
+  const removeLabel = t("ui.string-array.remove.text");
+  const updateValue = (index, field, nextValue) => {
+    const nextItems = [...items];
+    const item = nextItems[index];
+    if (!item) return;
+    nextItems[index] = { ...item, [field]: nextValue };
+    onChange(nextItems);
+  };
+  const removeValue = (index) => {
+    onChange(items.filter((_, itemIndex) => itemIndex !== index));
+  };
+  const addValue = (index) => {
+    const nextItems = [...items];
+    nextItems.splice(index + 1, 0, emptyItem);
+    onChange(nextItems);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", className), ...props, children: items.map((item, index) => {
+    const itemId = id ? `${id}-${index}` : void 0;
+    const rowErrors = itemErrors.filter((error) => error.index === index);
+    const rowError = rowErrors.find((error) => !error.field);
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "text-muted-foreground flex h-10 w-5 shrink-0 items-center justify-center text-sm",
+          children: index + 1
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 flex-1 gap-2", children: [
+        fields.map((field, fieldIndex) => {
+          const fieldError = rowErrors.find(
+            (error) => error.field === field.key
+          );
+          const isFirstControl = index === 0 && fieldIndex === 0;
+          const fieldId = isFirstControl ? id : `${itemId}-${field.key}`;
+          const fieldErrorId = fieldError?.message && fieldId ? `${fieldId}-error` : void 0;
+          const describedBy = [
+            isFirstControl ? ariaDescribedBy : void 0,
+            fieldErrorId
+          ].filter(Boolean).join(" ");
+          return /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: fieldId,
+                type: field.type,
+                value: String(item[field.key] ?? ""),
+                placeholder: field.placeholder,
+                disabled,
+                "aria-describedby": describedBy || void 0,
+                "aria-errormessage": isFirstControl && ariaErrorMessage ? ariaErrorMessage : fieldErrorId,
+                "aria-invalid": ariaInvalid || Boolean(fieldError?.message),
+                "aria-required": isFirstControl ? ariaRequired : void 0,
+                "aria-label": isFirstControl ? void 0 : `${itemLabel} ${index + 1}: ${field.key}`,
+                onChange: (event) => updateValue(index, field.key, event.target.value)
+              }
+            ),
+            fieldError?.message && /* @__PURE__ */ jsx(FormMessage, { id: fieldErrorId, className: "mt-1", children: fieldError.message })
+          ] }, field.key);
+        }),
+        rowError?.message && /* @__PURE__ */ jsx(FormMessage, { children: rowError.message })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex h-10 shrink-0 items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            variant: "outline",
+            size: "icon-sm",
+            disabled: disabled || items.length === 1 && value.length === 0,
+            "aria-label": `${removeLabel} ${index + 1}`,
+            title: removeLabel,
+            onClick: () => removeValue(index),
+            children: /* @__PURE__ */ jsx(CircleX, { className: "text-destructive" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            variant: "outline",
+            size: "icon-sm",
+            disabled,
+            "aria-label": `${addLabel} ${index + 1}`,
+            title: addLabel,
+            onClick: () => addValue(index),
+            children: /* @__PURE__ */ jsx(CirclePlus, { className: "text-success" })
+          }
+        )
+      ] })
+    ] }, index);
+  }) });
+}
+
+export { ObjectArrayInput };

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Eye, EyeOff } from 'lucide-react';
-import { useState } from 'react';
+import { EyeOff, Eye } from 'lucide-react';
+import { forwardRef, useState } from 'react';
 import '@radix-ui/react-avatar';
 import 'mime-types';
 import 'sitero-domain';
@@ -10,7 +10,6 @@ import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -28,20 +27,32 @@ import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
 import { Input } from './input.js';
 
-function PasswordInput({
-  ...props
-}) {
-  const [showPassword, setShowPassword] = useState(false);
-  return /* @__PURE__ */ jsx(Input, { type: showPassword ? "text" : "password", ...props, children: /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
-    InputGroupButton,
-    {
-      "aria-label": showPassword ? "Hide password" : "Show password",
-      title: showPassword ? "Hide password" : "Show password",
-      size: "icon-xs",
-      onClick: () => setShowPassword((prev) => !prev),
-      children: showPassword ? /* @__PURE__ */ jsx(Eye, {}) : /* @__PURE__ */ jsx(EyeOff, {})
-    }
-  ) }) });
-}
+const PasswordInput = forwardRef(
+  function PasswordInput2({ showPasswordLabel, hidePasswordLabel, disabled, ...props }, ref) {
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const visibilityLabel = isPasswordVisible ? hidePasswordLabel : showPasswordLabel;
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: isPasswordVisible ? "text" : "password",
+        disabled,
+        ...props,
+        children: /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
+          InputGroupButton,
+          {
+            "aria-label": visibilityLabel,
+            "aria-pressed": isPasswordVisible,
+            title: visibilityLabel,
+            size: "icon-xs",
+            disabled,
+            onClick: () => setIsPasswordVisible((previous) => !previous),
+            children: isPasswordVisible ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+          }
+        ) })
+      }
+    );
+  }
+);
 
 export { PasswordInput };

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

@@ -11,7 +11,6 @@ import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -52,8 +51,8 @@ function SearchInput({
   return /* @__PURE__ */ jsx("div", { className: "relative size-full", children: /* @__PURE__ */ jsx(
     Input,
     {
-      isDisabled,
-      placeholder: isLoading ? "" : t("ui.search.text"),
+      disabled: isDisabled,
+      placeholder: t("ui.search.text"),
       autoComplete: "off",
       value: inputValue,
       onChange: handleChange,

package/dist/src/cms/client/interfaces/components/ui/inputs/select.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';
@@ -39,6 +38,11 @@ function Select({
   placeholder,
   label,
   className,
+  id,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
   children,
   ...props
 }) {
@@ -56,9 +60,13 @@ function Select({
         /* @__PURE__ */ jsx(
           SelectTrigger,
           {
+            id,
             className: cn("w-full", className),
             disabled: isDisabled || isLoading,
-            "aria-invalid": isError,
+            "aria-describedby": ariaDescribedBy,
+            "aria-errormessage": ariaErrorMessage,
+            "aria-invalid": ariaInvalid ?? isError,
+            "aria-required": ariaRequired,
             children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
           }
         ),