sitero 0.0.1

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

@@ -0,0 +1,116 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { CircleX, CirclePlus } from 'lucide-react';
+import 'mime-types';
+import { cn } from '../../../../../../shared/utils/cn.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 '@radix-ui/react-dropdown-menu';
+import '../../shadcn/input-group.js';
+import '../../shadcn/item.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+import { Separator } from '../../shadcn/separator.js';
+import '../../shadcn/sidebar/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 'next/navigation';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../core/domain/resources/admin/constants.js';
+import { Textarea } from './textarea.js';
+
+function ArrayInput({
+  // form context
+  formData,
+  fieldName,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isResizable = false,
+  errors,
+  // base
+  placeholder = "",
+  ...props
+}) {
+  isDisabled = isDisabled || isLoading;
+  const rawValue = formData?.[fieldName ?? ""];
+  const values = Array.isArray(rawValue) && rawValue.length > 0 ? rawValue.map(String) : [""];
+  const errorIndexes = new Set(
+    errors.filter((e) => e.startsWith(fieldName ?? "")).map((e) => e.split(".").pop()).map(Number)
+  );
+  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-10 pl-0.5 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 ? "" : placeholder,
+          value,
+          onChange: (e) => {
+            if (!setFormData || !fieldName) return;
+            const copy = [...values];
+            copy[index] = e.target.value;
+            setFormData((p) => ({ ...p, [fieldName]: copy }));
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !isResizable) {
+              e.preventDefault();
+            }
+          },
+          isError,
+          className: cn("pr-20 pl-13", !isResizable && "resize-none"),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-center absolute top-1 right-1 gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            type: "button",
+            size: "icon-sm",
+            className: "rounded-sm",
+            onClick: () => {
+              if (!setFormData || !fieldName) return;
+              const copy = values.filter((_, i) => i !== index);
+              setFormData((p) => ({ ...p, [fieldName]: copy }));
+            },
+            children: /* @__PURE__ */ jsx(CircleX, { className: "text-destructive" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            type: "button",
+            size: "icon-sm",
+            className: "rounded-sm",
+            onClick: () => {
+              if (!setFormData || !fieldName) return;
+              const copy = [...values];
+              copy.splice(index + 1, 0, "");
+              setFormData((p) => ({ ...p, [fieldName]: copy }));
+            },
+            children: /* @__PURE__ */ jsx(CirclePlus, { className: "text-success" })
+          }
+        )
+      ] })
+    ] }, index);
+  }) });
+}
+
+export { ArrayInput };

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

@@ -0,0 +1,95 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'mime-types';
+import { cn } from '../../../../../../shared/utils/cn.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 '../../shadcn/item.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-select';
+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 Checkbox({
+  // form context
+  fieldName,
+  formData,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  // base
+  isDisplay = false,
+  className = "",
+  ...props
+}) {
+  isDisabled = isDisabled || isLoading || isDisplay;
+  const isChecked = !!formData?.[fieldName ?? ""];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        className,
+        "group relative",
+        "h-6 w-12 min-w-12",
+        "p-1",
+        "rounded-full",
+        "overflow-hidden",
+        "shadow-inner",
+        !isChecked || isLoading ? "bg-secondary" : "bg-success",
+        "transition"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "size-4",
+              "rounded-full",
+              "bg-white",
+              "shadow",
+              isChecked && "translate-x-6",
+              isLoading && "opacity-0",
+              !isDisabled && "group-hover:scale-95 group-active:scale-90",
+              "duration-200"
+            )
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx("span", { className: "absolute top-1 left-1", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            onChange: (e) => {
+              if (!setFormData || !fieldName) return;
+              setFormData((p) => ({ ...p, [fieldName]: e.target.checked }));
+            },
+            checked: isChecked,
+            disabled: isDisabled,
+            className: cn(
+              "absolute top-0 left-0",
+              "h-full w-full",
+              "rounded-full",
+              "opacity-0",
+              isDisabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Checkbox };

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

@@ -0,0 +1,146 @@
+"use client";
+import { ClassicEditor } from 'ckeditor5';
+import enTranslations from 'ckeditor5/translations/en.js';
+import zhTranslations from 'ckeditor5/translations/zh.js';
+import { ASSET_MANAGER_PLUGIN_NAME } from '../plugins/asset-manager/asset-manager.js';
+import 'intor/react';
+import 'react';
+import 'mime-types';
+import 'clsx';
+import 'tailwind-merge';
+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';
+import { tableConfig } from './configs/table.config.js';
+import { imageConfig } from './configs/image.config.js';
+
+class BaseEditor extends ClassicEditor {
+  static builtinPlugins = builtinPlugins;
+  static defaultConfig = {
+    licenseKey: "GPL",
+    //====== Translations ======
+    translations: [zhTranslations, enTranslations],
+    // schema: { allowIn: ["figure"], allowAttributes: ["src"] },
+    //====== Toolbar ======
+    toolbar: {
+      items: [
+        //------ 1 row ------
+        "undo",
+        // [Undo]
+        "redo",
+        // [Undo]
+        "|",
+        "heading",
+        // [Heading]
+        "fontFamily",
+        // [Font]
+        "fontSize",
+        // [Font]
+        "fontColor",
+        // [Font]
+        "fontBackgroundColor",
+        // [Font]
+        "highlight",
+        // [Highlight]
+        "|",
+        "emoji",
+        // [Emoji]
+        "specialCharacters",
+        // [SpecialCharacters]
+        "|",
+        "removeFormat",
+        // [RemoveFormat]
+        "|",
+        "selectAll",
+        // [SelectAll]
+        "findAndReplace",
+        // [FindAndReplace]
+        "-",
+        //------ 2 row ------
+        "alignment",
+        // [Alignment]
+        "indent",
+        // [Indent]
+        "outdent",
+        // [Indent]
+        "|",
+        "bold",
+        // [Bold]
+        "italic",
+        // [Italic]
+        "strikethrough",
+        // [Strikethrough]
+        "underline",
+        // [Underline]
+        "subscript",
+        // [Subscript]
+        "superscript",
+        // [Superscript]
+        "code",
+        // [Code]
+        "link",
+        // [Link]
+        "|",
+        ASSET_MANAGER_PLUGIN_NAME,
+        "insertImage",
+        // [Image]
+        "mediaEmbed",
+        // [MediaEmbed]
+        "|",
+        "codeBlock",
+        // [CodeBlock]
+        "htmlEmbed",
+        // [HtmlEmbed]
+        //------ 3 row ------
+        "-",
+        "bulletedList",
+        // [List]
+        "numberedList",
+        // [List]
+        "todoList",
+        // [TodoList]
+        "|",
+        "blockQuote",
+        // [BlockQuote]
+        "horizontalLine",
+        // [HorizontalLine]
+        "pageBreak",
+        // [PageBreak]
+        "|",
+        "insertTable",
+        // [Table]
+        "insertTableLayout",
+        // [Table]
+        "|",
+        "showBlocks",
+        // [ShowBlocks]
+        "sourceEditing",
+        // [SourceEditing]
+        "|",
+        //------ Word Count Display ------
+        WORD_COUNT_DISPLAY_PLUGIN_NAME.html,
+        WORD_COUNT_DISPLAY_PLUGIN_NAME.characters,
+        WORD_COUNT_DISPLAY_PLUGIN_NAME.words
+      ],
+      shouldNotGroupWhenFull: true
+    },
+    //====== Specific Configs ======
+    heading: headingConfig,
+    link: { addTargetToExternalLinks: true },
+    table: tableConfig,
+    image: imageConfig,
+    htmlSupport: {
+      allow: [{ name: /.*/, attributes: true, classes: true, styles: true }]
+    },
+    htmlEmbed: { showPreviews: true },
+    emoji: { skinTone: "light" },
+    fontFamily: { supportAllValues: false },
+    fontSize: {
+      options: [12, 14, "default", 16, 18, 20, 22, 24, 26, 28],
+      supportAllValues: false
+    }
+    // menuBar: { isVisible: true },
+  };
+}
+
+export { BaseEditor };

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

@@ -0,0 +1,73 @@
+import { Essentials, Paragraph, Autoformat, TextTransformation, Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline, Indent, IndentBlock, BlockQuote, CodeBlock, Emoji, Mention, FindAndReplace, Font, Heading, Highlight, HorizontalLine, GeneralHtmlSupport, HtmlComment, HtmlEmbed, Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, LinkImage, ImageInsert, AutoImage, ImageUpload, Link, AutoLink, List, TodoList, MediaEmbed, PageBreak, PasteFromOffice, PasteFromMarkdownExperimental, RemoveFormat, ShowBlocks, SourceEditing, SpecialCharacters, SpecialCharactersEssentials, Table, TableToolbar, TableProperties, TableCellProperties, TableColumnResize, TableCaption, TableLayout, Alignment, WordCount } from 'ckeditor5';
+import { AssetManager } from '../plugins/asset-manager/asset-manager.js';
+import 'intor/react';
+import 'react';
+import 'mime-types';
+import 'clsx';
+import 'tailwind-merge';
+import WordCountButtons from '../plugins/word-count-display/word-count-display.js';
+
+const builtinPlugins = [
+  Essentials,
+  Paragraph,
+  Autoformat,
+  // For markdown
+  TextTransformation,
+  Bold,
+  Code,
+  Italic,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Underline,
+  Indent,
+  IndentBlock,
+  BlockQuote,
+  CodeBlock,
+  Emoji,
+  Mention,
+  FindAndReplace,
+  Font,
+  Heading,
+  Highlight,
+  HorizontalLine,
+  GeneralHtmlSupport,
+  HtmlComment,
+  HtmlEmbed,
+  Image,
+  ImageToolbar,
+  ImageCaption,
+  ImageStyle,
+  ImageResize,
+  LinkImage,
+  ImageInsert,
+  AutoImage,
+  ImageUpload,
+  Link,
+  AutoLink,
+  List,
+  TodoList,
+  MediaEmbed,
+  PageBreak,
+  PasteFromOffice,
+  PasteFromMarkdownExperimental,
+  RemoveFormat,
+  ShowBlocks,
+  SourceEditing,
+  SpecialCharacters,
+  SpecialCharactersEssentials,
+  Table,
+  TableToolbar,
+  TableProperties,
+  TableCellProperties,
+  TableColumnResize,
+  TableCaption,
+  TableLayout,
+  Alignment,
+  WordCount,
+  //====== Custom Plugins ======
+  AssetManager,
+  WordCountButtons
+];
+
+export { builtinPlugins };

package/dist/src/cms/client/interfaces/components/ui/inputs/editor/base/configs/heading.config.js

@@ -0,0 +1,41 @@
+const headingConfig = {
+  options: [
+    {
+      model: "paragraph",
+      title: "Paragraph",
+      class: "ck-heading_paragraph"
+    },
+    {
+      model: "heading2",
+      view: "h2",
+      title: "Heading 2",
+      class: "ck-heading_heading2"
+    },
+    {
+      model: "heading3",
+      view: "h3",
+      title: "Heading 3",
+      class: "ck-heading_heading3"
+    },
+    {
+      model: "heading4",
+      view: "h4",
+      title: "Heading 4",
+      class: "ck-heading_heading4"
+    },
+    {
+      model: "heading5",
+      view: "h5",
+      title: "Heading 5",
+      class: "ck-heading_heading5"
+    },
+    {
+      model: "heading6",
+      view: "h6",
+      title: "Heading 6",
+      class: "ck-heading_heading6"
+    }
+  ]
+};
+
+export { headingConfig };

package/dist/src/cms/client/interfaces/components/ui/inputs/editor/base/configs/image.config.js

@@ -0,0 +1,32 @@
+const imageConfig = {
+  toolbar: [
+    "toggleImageCaption",
+    "imageTextAlternative",
+    "|",
+    "imageStyle:alignBlockLeft",
+    "imageStyle:alignCenter",
+    "imageStyle:alignBlockRight",
+    "|",
+    "imageStyle:alignLeft",
+    "imageStyle:alignRight",
+    "|",
+    "imageStyle:inline",
+    "|",
+    "resizeImage",
+    "|",
+    "linkImage"
+  ],
+  resizeOptions: [
+    { name: "resizeImage:original", label: "Original", value: null },
+    { name: "resizeImage:custom", label: "Custom", value: "custom" },
+    { name: "resizeImage:25", label: "25%", value: "25" },
+    { name: "resizeImage:50", label: "50%", value: "50" },
+    { name: "resizeImage:75", label: "75%", value: "75" },
+    { name: "resizeImage:100", label: "100%", value: "100" }
+  ],
+  insert: {
+    integrations: ["upload", "url"]
+  }
+};
+
+export { imageConfig };

package/dist/src/cms/client/interfaces/components/ui/inputs/editor/base/configs/table.config.js

@@ -0,0 +1,15 @@
+const tableConfig = {
+  contentToolbar: [
+    "toggleTableCaption",
+    "|",
+    "tableColumn",
+    "tableRow",
+    "|",
+    "mergeTableCells",
+    "|",
+    "tableProperties",
+    "tableCellProperties"
+  ]
+};
+
+export { tableConfig };

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

@@ -0,0 +1,119 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import 'mime-types';
+import { cn } from '../../../../../../../shared/utils/cn.js';
+import '../../../../../infrastructure/contexts/admin/admin.js';
+import '../../../../../infrastructure/react-query/client.js';
+import '@tanstack/react-query';
+import { useCommand } from '../../../../../infrastructure/react-query/use-command.js';
+import 'lucide-react';
+import 'intor/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 '../../../shadcn/item.js';
+import '@radix-ui/react-label';
+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/link';
+import '../../../../../../../constants/paths/auth.js';
+import '../../../../../../../constants/paths/main.js';
+import '../../../../../../../constants/paths/resources.js';
+import '../../../../../../../constants/redirect-paths.js';
+import 'next/navigation';
+import 'ua-parser-js';
+import '../../../../../../../core/domain/resources/admin/constants.js';
+import { FieldBody } from '../../form/field-body.js';
+import { PickModal } from '../../features/pick-modal/pick-modal.js';
+import 'next/image';
+import 'ckeditor5';
+import { useControlAssetManager } from './plugins/asset-manager/use-control-asset-mamager.js';
+import { useInitEditor } from './use-init-editor/use-init-editor.js';
+
+function createEditor({
+  Uploader,
+  fileCreateAction,
+  UploadAdapter,
+  FileList,
+  storageUrl,
+  maxWidth,
+  queryClient
+}) {
+  return function Editor({
+    // editor
+    locale,
+    value = "",
+    onEditorChange,
+    // ui states
+    isLoading = false,
+    isDisabled = false,
+    isError = false,
+    // base
+    className = "",
+    ...props
+  }) {
+    const containerRef = useRef(null);
+    const { execute } = useCommand(
+      (formData2) => fileCreateAction({ formData: formData2 }),
+      { clearAll: false }
+    );
+    const editorRef = useInitEditor({
+      enabled: !isLoading,
+      containerRef,
+      locale,
+      value,
+      onEditorChange,
+      createUploadAdapter: (loader) => new UploadAdapter(loader, execute, queryClient),
+      openAssetManager: () => setIsOpenAssetManager(true)
+    });
+    const { isOpenAssetManager, setIsOpenAssetManager, formData, setFormData } = useControlAssetManager(editorRef, storageUrl);
+    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+      FieldBody,
+      {
+        className: cn(
+          className,
+          "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+          "shadow-xs transition-[color,box-shadow]",
+          "rounded-lg",
+          "border",
+          isError && "border-destructive focus-within:ring-destructive/50",
+          "mx-auto"
+        ),
+        childrenClassName: "p-0",
+        style: { maxWidth },
+        isLoading,
+        isDisabled: isDisabled || isLoading,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: containerRef }),
+          /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx(
+            PickModal,
+            {
+              isOpen: isOpenAssetManager,
+              setIsOpen: setIsOpenAssetManager,
+              fieldName: "file",
+              formData,
+              setFormData,
+              isLoading,
+              isDisabled,
+              itemList: /* @__PURE__ */ jsx(FileList, {}),
+              aboveManagementCard: /* @__PURE__ */ jsx(Uploader, { accept: "image/*" })
+            }
+          ) })
+        ]
+      }
+    ) });
+  };
+}
+
+export { createEditor };

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

@@ -0,0 +1,24 @@
+import { Plugin, ButtonView } from 'ckeditor5';
+
+const ASSET_MANAGER_PLUGIN_NAME = "asset-manager";
+const OPEN_ASSET_MANAGER_KEY = "open-asset-manager";
+class AssetManager extends Plugin {
+  init() {
+    const editor = this.editor;
+    editor.ui.componentFactory.add(ASSET_MANAGER_PLUGIN_NAME, () => {
+      const button = new ButtonView();
+      button.set({
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M1.201 1c-.662 0-1.2.47-1.2 1.1v14.248c0 .64.533 1.152 1.185 1.152h6.623v-7.236L6.617 9.15a.694.694 0 0 0-.957-.033L1.602 13.55V2.553l14.798.003V9.7H18V2.1c0-.63-.547-1.1-1.2-1.1zm11.723 2.805a2.1 2.1 0 0 0-1.621.832 2.127 2.127 0 0 0 1.136 3.357 2.13 2.13 0 0 0 2.611-1.506 2.13 2.13 0 0 0-.76-2.244 2.13 2.13 0 0 0-1.366-.44Z"/><path d="M19.898 12.369v6.187a.844.844 0 0 1-.844.844h-8.719a.844.844 0 0 1-.843-.844v-7.312a.844.844 0 0 1 .843-.844h2.531a.84.84 0 0 1 .597.248l.838.852h4.75c.223 0 .441.114.6.272a.84.84 0 0 1 .247.597m-1.52.654-4.377.02-1.1-1.143H11v6h7.4l-.023-4.877Z" clip-rule="evenodd"/></svg>`,
+        label: "Asset Manager",
+        tooltip: "Select a file from asset manager"
+      });
+      button.on("execute", () => {
+        const openAssetManager = editor.config.get(OPEN_ASSET_MANAGER_KEY);
+        openAssetManager?.();
+      });
+      return button;
+    });
+  }
+}
+
+export { ASSET_MANAGER_PLUGIN_NAME, AssetManager, OPEN_ASSET_MANAGER_KEY };