@uxf/cms 11.74.0 → 11.74.2

package/pages/content-builder/content/people.d.ts

@@ -0,0 +1,17 @@
+import { FileResponse } from "@uxf/core/types";
+import { Content, ContentComponent, ContentProps } from "../types";
+export type PersonFormData = {
+    name?: string;
+    subtitle?: string;
+    image?: FileResponse;
+    text?: string;
+    phone?: string;
+    email?: string;
+};
+export type PeopleFormData = {
+    people: PersonFormData[];
+};
+export type PeopleContent = Content<"people", PeopleFormData>;
+type Props = ContentProps;
+export declare const People: ContentComponent<PeopleContent, Props>;
+export {};

package/pages/content-builder/content/people.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.People = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const upload_file_1 = require("@uxf/core/api/upload-file");
+const file_input_1 = require("@uxf/form/file-input");
+const text_input_1 = require("@uxf/form/text-input");
+const textarea_1 = require("@uxf/form/textarea");
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const content_header_1 = require("../content-header");
+const details_visibility_context_1 = require("../context/details-visibility-context");
+const fileUploadHandler = (0, upload_file_1.createUploadHandler)("default");
+const People = (props) => {
+    const [visibility] = (0, details_visibility_context_1.useDetailsVisibilityForSection)(props.id);
+    const t = (0, translations_1.useUxfTranslation)();
+    const { fields, remove, append } = (0, react_hook_form_1.useFieldArray)({ control: props.control, name: `${props.name}.people` });
+    return (react_1.default.createElement("div", { className: "divide-lightBorder dark:divide-darkBorder divide-y" },
+        react_1.default.createElement(content_header_1.ContentHeader, { ...props }),
+        visibility && (react_1.default.createElement("div", { className: "p-4" },
+            fields.map((field, index) => {
+                const handleRemove = () => {
+                    // eslint-disable-next-line no-alert
+                    if (confirm(t("uxf-cms-pages-content-builder:content.people.confirm-delete-person"))) {
+                        remove(index);
+                    }
+                };
+                return (react_1.default.createElement("div", { className: "border-primary mb-8 border-l-2 pl-8", key: field.id },
+                    react_1.default.createElement("div", { className: "flex justify-between" },
+                        react_1.default.createElement("h4", { className: "uxf-typo-h6 mb-3 pt-1" }, t("uxf-cms-pages-content-builder:content.people.person-title", {
+                            index: index + 1,
+                        })),
+                        index > 0 ? (react_1.default.createElement("div", null,
+                            react_1.default.createElement(button_1.Button, { onClick: handleRemove, size: "sm", variant: "secondary" }, t("uxf-cms-pages-content-builder:content.people.delete-person")))) : (react_1.default.createElement("div", null))),
+                    react_1.default.createElement("div", { className: "mt-2 grid grid-cols-12 gap-4" },
+                        react_1.default.createElement("div", { className: "col-span-12 sm:col-span-6" },
+                            react_1.default.createElement(text_input_1.TextInput, { control: props.control, isRequired: true, label: t("uxf-cms-pages-content-builder:content.people.name"), name: `${props.name}.people.${index}.name` })),
+                        react_1.default.createElement("div", { className: "col-span-12 sm:col-span-6" },
+                            react_1.default.createElement(file_input_1.FileInput, { control: props.control, id: `${props.name}.people.${index}.image`, label: t("uxf-cms-pages-content-builder:content.people.image"), name: `${props.name}.people.${index}.image`, onUploadFile: fileUploadHandler })),
+                        react_1.default.createElement("div", { className: "col-span-12" },
+                            react_1.default.createElement(text_input_1.TextInput, { control: props.control, label: t("uxf-cms-pages-content-builder:content.people.description"), name: `${props.name}.people.${index}.subtitle` })),
+                        react_1.default.createElement("div", { className: "col-span-12" },
+                            react_1.default.createElement(textarea_1.Textarea, { control: props.control, label: t("uxf-cms-pages-content-builder:content.people.text"), name: `${props.name}.people.${index}.text`, rows: 2 })),
+                        react_1.default.createElement("div", { className: "col-span-6" },
+                            react_1.default.createElement(text_input_1.TextInput, { control: props.control, label: t("uxf-cms-pages-content-builder:content.people.phone"), name: `${props.name}.people.${index}.phone`, type: "tel" })),
+                        react_1.default.createElement("div", { className: "col-span-6" },
+                            react_1.default.createElement(text_input_1.TextInput, { control: props.control, label: "E-mail", name: `${props.name}.people.${index}.email`, type: "email" })))));
+            }),
+            react_1.default.createElement(button_1.Button, { onClick: () => append({ name: "" }), size: "sm", variant: "secondary" }, t("uxf-cms-pages-content-builder:content.people.add-person"))))));
+};
+exports.People = People;
+exports.People.getConfig = () => {
+    return {
+        type: "people",
+        label: "Lidé",
+    };
+};

package/pages/content-builder/content/wysiwyg.d.ts

@@ -0,0 +1,15 @@
+import { WysiwygPlugin } from "@uxf/wysiwyg";
+import { CreateAllPluginsOptions } from "@uxf/wysiwyg/create-all-plugins-with-ui";
+import { WysiwygEditorProps } from "@uxf/wysiwyg/wysiwyg-editor";
+import { Content, ContentComponent, ContentProps } from "../types";
+export type WysiwygContent = Content<"wysiwyg", any>;
+type ConfigProps = {
+    editorProps?: Partial<Omit<WysiwygEditorProps, "value" | "onChange">>;
+    allPluginsOptions?: CreateAllPluginsOptions;
+    plugins?: WysiwygPlugin[];
+};
+type Props = ContentProps & ConfigProps;
+export declare const Wysiwyg: ContentComponent<WysiwygContent, Props> & {
+    create: (config: ConfigProps) => ContentComponent<WysiwygContent, Props>;
+};
+export {};

package/pages/content-builder/content/wysiwyg.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wysiwyg = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const react_1 = __importDefault(require("react"));
+const wysiwyg_input_1 = require("../../../forms/components/wysiwyg-input");
+const content_header_1 = require("../content-header");
+const details_visibility_context_1 = require("../context/details-visibility-context");
+const Wysiwyg = (props) => {
+    const [visibility] = (0, details_visibility_context_1.useDetailsVisibilityForSection)(props.id);
+    const t = (0, translations_1.useUxfTranslation)();
+    return (react_1.default.createElement("div", { className: "divide-lightBorder dark:divide-darkBorder divide-y" },
+        react_1.default.createElement(content_header_1.ContentHeader, { TypeInputProps: props.TypeInputProps, control: props.control, id: props.id, index: props.index, name: props.name, onRemove: props.onRemove, title: props.title }),
+        visibility && (react_1.default.createElement(wysiwyg_input_1.WysiwygInput, { allPluginsOptions: props.allPluginsOptions, className: "p-4", control: props.control, editorProps: props.editorProps, isRequired: true, label: t("uxf-cms-pages-content-builder:content.wysiwyg.text"), name: `${props.name}.content`, placeholder: t("uxf-cms-pages-content-builder:content.wysiwyg.placeholder"), plugins: props.plugins }))));
+};
+exports.Wysiwyg = Wysiwyg;
+const defaultGetConfig = () => {
+    return {
+        type: "wysiwyg",
+        label: "Strukturovaný text",
+    };
+};
+exports.Wysiwyg.create = (config = {}) => {
+    const { editorProps, allPluginsOptions, plugins } = config;
+    const Component = (props) => (react_1.default.createElement(exports.Wysiwyg, { allPluginsOptions: allPluginsOptions, plugins: plugins, ...props, editorProps: editorProps }));
+    Component.getConfig = defaultGetConfig;
+    return Component;
+};
+exports.Wysiwyg.getConfig = defaultGetConfig;

package/pages/content-builder/content-builder-page.d.ts

@@ -0,0 +1,3 @@
+import { Content, ContentBuilderConfig } from "./types";
+/** @deprecated use ContentBuilder from @uxf/cms/content-builder */
+export declare const ContentBuilderPage: <T extends Content<string, any>>(config: ContentBuilderConfig<T>) => import("next").NextComponentType<import("../../deprecated/types/app").IAppContext, object, object>;

package/pages/content-builder/content-builder-page.js

@@ -0,0 +1,107 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentBuilderPage = void 0;
+const router_1 = require("@uxf/router");
+const react_1 = __importStar(require("react"));
+const api_1 = require("../../api");
+const config_1 = require("../../config");
+const with_authenticate_1 = require("../../deprecated/hoc/with-authenticate");
+const form_1 = require("./components/form");
+const mapper_1 = require("./mapper");
+const DefaultLayout = (props) => react_1.default.createElement("div", { ...props });
+const defaultInitialValues = async (ctx) => {
+    const contentId = ctx.query.id ? (0, router_1.queryParamToNumber)(ctx.query.id) : null;
+    const date = new Date();
+    date.setHours(0);
+    date.setMinutes(0);
+    date.setMilliseconds(0);
+    return contentId
+        ? await (0, api_1.contentGet)(ctx, contentId).then((r) => (0, mapper_1.mapResponseToFormData)(r.data))
+        : {
+            name: "",
+            type: null,
+            author: null,
+            category: null,
+            content: {
+                data: [],
+                search: "",
+            },
+            perex: "",
+            visibilityLevel: "PRIVATE",
+            seo: {
+                name: null,
+                title: "",
+                ogTitle: "",
+                ogDescription: "",
+                description: "",
+                ogImage: null,
+            },
+            image: null,
+            publishedAt: date.toISOString(),
+            active: true,
+            tags: [],
+        };
+};
+const defaultOnSubmit = async (id, values) => {
+    return id
+        ? (0, api_1.contentUpdate)(null, id, (0, mapper_1.mapFormDataToRequest)(values)).then((r) => r.data)
+        : (0, api_1.contentCreate)(null, (0, mapper_1.mapFormDataToRequest)(values)).then((r) => r.data);
+};
+const defaultOnSubmitSuccess = async (id) => {
+    config_1.container.get("service.notification").success(id ? "Změny uloženy" : "Článek vytvořen");
+};
+const ContentBuilderPageComponent = (props) => {
+    var _a, _b, _c;
+    const Layout = (_a = props.config.ui.Layout) !== null && _a !== void 0 ? _a : DefaultLayout;
+    const onSubmit = (_b = props.config.onSubmit) !== null && _b !== void 0 ? _b : defaultOnSubmit;
+    const onSubmitSuccess = (_c = props.config.onSubmitSuccess) !== null && _c !== void 0 ? _c : defaultOnSubmitSuccess;
+    const handleSubmit = (0, react_1.useCallback)(async (values) => {
+        const preparedValues = props.config.type ? { ...values, type: props.config.type } : values;
+        const response = await onSubmit(props.id, preparedValues);
+        await onSubmitSuccess(props.id, preparedValues, response);
+    }, [onSubmit, onSubmitSuccess, props.id, props.config]);
+    return (react_1.default.createElement(Layout, null,
+        react_1.default.createElement("div", { className: "-mx-4 md:-mx-10" },
+            react_1.default.createElement(form_1.Form, { config: props.config, defaultValues: props.initialValues, id: props.id, onSubmit: handleSubmit }))));
+};
+ContentBuilderPageComponent.displayName = "ContentBuilderComponent";
+/** @deprecated use ContentBuilder from @uxf/cms/content-builder */
+const ContentBuilderPage = (config) => {
+    const Page = (props) => {
+        return react_1.default.createElement(ContentBuilderPageComponent, { config: config, id: props.id, initialValues: props.initialValues });
+    };
+    Page.getInitialProps = async (ctx) => {
+        var _a, _b;
+        const contentId = (_a = (0, router_1.queryParamToNumber)(ctx.query.id)) !== null && _a !== void 0 ? _a : null; // TODO @vejvis - nekompatibilní s initial values
+        const initialValues = (_b = config.initialValues) !== null && _b !== void 0 ? _b : defaultInitialValues;
+        return {
+            id: contentId,
+            initialValues: typeof initialValues === "function" ? await initialValues(ctx) : initialValues,
+        };
+    };
+    return (0, with_authenticate_1.withAuthenticate)({ allowedRoles: config.allowedRoles || ["ROLE_ROOT"] })(Page);
+};
+exports.ContentBuilderPage = ContentBuilderPage;

package/pages/content-builder/content-field.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { Control } from "react-hook-form";
+import { ContentComponent } from "./types";
+interface ContentFieldProps {
+    contentComponents: ContentComponent<any>[];
+    name: string;
+    control: Control<any>;
+}
+export declare const ContentField: FC<ContentFieldProps>;
+export {};

package/pages/content-builder/content-field.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentField = void 0;
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const button_1 = require("@uxf/ui/button");
+const dialog_panel_1 = require("@uxf/ui/dialog/dialog-panel");
+const icon_1 = require("@uxf/ui/icon");
+const modal_service_1 = require("@uxf/ui/modal/modal-service");
+const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const form_content_1 = require("./components/form-content");
+const details_visibility_context_1 = require("./context/details-visibility-context");
+const use_sortable_1 = require("./hooks/use-sortable");
+const ContentField = (props) => {
+    const { fields, remove, insert, move } = (0, react_hook_form_1.useFieldArray)({
+        name: `${props.name}.data`,
+        control: props.control,
+    });
+    const createSection = (component, index) => {
+        insert(index + 1, { type: component.getConfig().type, content: null });
+        (0, modal_service_1.closeModal)();
+    };
+    const { memoizedSensors, activeItem, itemsIds, dropAnimationConfig, onDragStart, onDragEnd, onDragCancel } = (0, use_sortable_1.useSortable)({
+        fields,
+        handleDragEnd: move,
+    });
+    const activeItemIndex = fields.findIndex((f) => f.id === (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id));
+    const setVisibilityForAll = (0, details_visibility_context_1.useDetailsVisibilityControls)();
+    return (react_1.default.createElement("div", { className: "uxf-cb__content" },
+        react_1.default.createElement("div", { className: "uxf-cb__content-header mb-4 mt-6 flex flex-wrap items-center justify-between gap-4" },
+            react_1.default.createElement("h2", { className: "uxf-typo-h5" }, "Obsah"),
+            fields.length > 1 && (react_1.default.createElement("div", { className: "flex justify-end space-x-4" },
+                react_1.default.createElement(button_1.Button, { onClick: () => setVisibilityForAll(true), size: "sm", variant: "secondary" },
+                    react_1.default.createElement(icon_1.Icon, { className: "mr-1", name: "arrow-down-from-line" }),
+                    "otev\u0159\u00EDt v\u0161e"),
+                react_1.default.createElement(button_1.Button, { onClick: () => setVisibilityForAll(false), size: "sm", variant: "secondary" },
+                    react_1.default.createElement(icon_1.Icon, { className: "mr-1", name: "arrow-up-to-line" }),
+                    "zav\u0159\u00EDt v\u0161e")))),
+        react_1.default.createElement(core_1.DndContext, { onDragCancel: onDragCancel, onDragEnd: onDragEnd, onDragStart: onDragStart, sensors: memoizedSensors },
+            react_1.default.createElement(sortable_1.SortableContext, { items: itemsIds, strategy: sortable_1.verticalListSortingStrategy },
+                react_1.default.createElement("div", { className: "space-y-4 pl-8" }, fields.map((field, index) => {
+                    var _a;
+                    return (react_1.default.createElement("div", { key: field.id },
+                        react_1.default.createElement(form_content_1.FormContent, { contentComponents: props.contentComponents, control: props.control, createSection: createSection, id: field.id, index: index, name: `${props.name}.data[${index}]`, onRemove: () => remove(index), title: (_a = props.contentComponents
+                                .find((c) => c.getConfig().type === field.type)) === null || _a === void 0 ? void 0 : _a.getConfig().label })));
+                }))),
+            react_1.default.createElement(core_1.DragOverlay, { dropAnimation: dropAnimationConfig }, activeItem ? (react_1.default.createElement(form_content_1.FormContent, { ...activeItem, contentComponents: props.contentComponents, control: props.control, createSection: createSection, index: activeItemIndex, name: `${props.name}.data[${activeItemIndex}]`, showAddButton: false })) : null)),
+        fields.length < 1 && (react_1.default.createElement("div", null,
+            react_1.default.createElement(button_1.Button, { className: "h-20 border-2 border-dashed border-gray-600", isFullWidth: true, onClick: () => (0, modal_service_1.openModal)({
+                    children: (react_1.default.createElement(dialog_panel_1.DialogPanel, { width: "sm" },
+                        react_1.default.createElement("div", { className: "px-4 py-6" },
+                            react_1.default.createElement("h2", { className: "uxf-typo-h5 mb-4" }, "P\u0159idat sekci"),
+                            react_1.default.createElement("div", { className: "space-y-4" }, props.contentComponents.map((component) => (react_1.default.createElement(button_1.Button, { isFullWidth: true, key: component.getConfig().type, onClick: () => createSection(component, 0), variant: "secondary" }, component.getConfig().label))))))),
+                }), size: "lg", variant: "text" },
+                react_1.default.createElement(icon_1.Icon, { className: "mr-3", name: "plus", size: 16 }),
+                "P\u0159idat sekci")))));
+};
+exports.ContentField = ContentField;

package/pages/content-builder/content-header.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { ContentProps } from "./types";
+export declare const ContentHeader: FC<ContentProps>;

package/pages/content-builder/content-header.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentHeader = void 0;
+const use_clickable_props_1 = require("@uxf/core-react/clickable/use-clickable-props");
+const translations_1 = require("@uxf/core-react/translations");
+const icon_1 = require("@uxf/ui/icon");
+const icon_button_1 = require("@uxf/ui/icon-button");
+const react_1 = __importStar(require("react"));
+const details_visibility_context_1 = require("./context/details-visibility-context");
+const ContentHeader = (props) => {
+    const [visibility, toggleVisibility] = (0, details_visibility_context_1.useDetailsVisibilityForSection)(props.id);
+    const t = (0, translations_1.useUxfTranslation)();
+    const removeHandler = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        // eslint-disable-next-line no-alert
+        if (confirm(t("uxf-cms-pages-content-builder:confirm-delete-section"))) {
+            props.onRemove();
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.onRemove, t]);
+    const clickableProps = (0, use_clickable_props_1.useClickableProps)({
+        className: "flex w-full cursor-pointer flex-row items-center justify-between p-4",
+        onClick: toggleVisibility,
+    });
+    return (react_1.default.createElement("div", { ...clickableProps },
+        react_1.default.createElement("h3", { className: "uxf-typo-h6" }, props.title),
+        react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+            react_1.default.createElement(icon_button_1.IconButton, { iconName: "delete", label: "d", onClick: removeHandler, size: "sm", variant: "secondary" }),
+            react_1.default.createElement(icon_1.Icon, { name: `${visibility ? "chevronUp" : "chevronDown"}`, size: 16 }))));
+};
+exports.ContentHeader = ContentHeader;

package/pages/content-builder/context/details-visibility-context.d.ts

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from "react";
+export declare const useDetailsVisibilityForSection: (sectionId: string) => readonly [boolean, () => void];
+export declare const useDetailsVisibilityControls: () => (visible: boolean) => void;
+export declare const DetailsVisibilityProvider: FC<PropsWithChildren>;

package/pages/content-builder/context/details-visibility-context.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DetailsVisibilityProvider = exports.useDetailsVisibilityControls = exports.useDetailsVisibilityForSection = void 0;
+const noop_1 = require("@uxf/core/utils/noop");
+const react_1 = __importStar(require("react"));
+const detailsVisibilityContext = (0, react_1.createContext)([[], noop_1.noop, true, noop_1.noop]);
+const useDetailsVisibility = () => (0, react_1.useContext)(detailsVisibilityContext);
+const useDetailsVisibilityForSection = (sectionId) => {
+    var _a;
+    const [detailsVisibility, setDetailsVisibility, defaultVisibility] = useDetailsVisibility();
+    const nullableVisibility = (_a = detailsVisibility.find((item) => item.id === sectionId)) === null || _a === void 0 ? void 0 : _a.visible;
+    const visibility = typeof nullableVisibility === "boolean" ? nullableVisibility : defaultVisibility;
+    const toggleVisibility = (0, react_1.useCallback)(() => {
+        setDetailsVisibility((prev) => [
+            ...prev.filter((i) => i.id !== sectionId),
+            { id: sectionId, visible: !visibility },
+        ]);
+    }, [visibility, sectionId, setDetailsVisibility]);
+    return [visibility, toggleVisibility];
+};
+exports.useDetailsVisibilityForSection = useDetailsVisibilityForSection;
+const useDetailsVisibilityControls = () => {
+    const [, setDetailsVisibility, , setDefaultVisibility] = useDetailsVisibility();
+    return (0, react_1.useCallback)((visible) => {
+        setDefaultVisibility(visible);
+        setDetailsVisibility((prev) => prev.map((i) => ({ ...i, visible })));
+    }, [setDefaultVisibility, setDetailsVisibility]);
+};
+exports.useDetailsVisibilityControls = useDetailsVisibilityControls;
+const DetailsVisibilityProvider = (props) => {
+    const [defaultVisibility, setDefaultVisibility] = (0, react_1.useState)(true);
+    const [detailsVisibility, setDetailsVisibility] = (0, react_1.useState)([]);
+    return (react_1.default.createElement(detailsVisibilityContext.Provider, { value: [detailsVisibility, setDetailsVisibility, defaultVisibility, setDefaultVisibility] }, props.children));
+};
+exports.DetailsVisibilityProvider = DetailsVisibilityProvider;

package/pages/content-builder/hooks/use-sortable.d.ts

@@ -0,0 +1,15 @@
+import { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+type Props = {
+    fields: any[];
+    handleDragEnd: (activeIndex: number, overIndex: number) => void;
+};
+export declare const useSortable: ({ fields, handleDragEnd }: Props) => {
+    memoizedSensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+    dropAnimationConfig: import("@dnd-kit/core/dist/components/DragOverlay/hooks/useDropAnimation").DropAnimationOptions;
+    itemsIds: any[];
+    activeItem: any;
+    onDragStart: ({ active }: DragStartEvent) => void;
+    onDragEnd: ({ active, over }: DragEndEvent) => void;
+    onDragCancel: () => void;
+};
+export {};

package/pages/content-builder/hooks/use-sortable.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSortable = void 0;
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const react_1 = require("react");
+const useSortable = ({ fields, handleDragEnd }) => {
+    const [sortableItems, setSortableItems] = (0, react_1.useState)(fields);
+    const [activeElement, setActiveElement] = (0, react_1.useState)(null);
+    const activeItem = (0, react_1.useMemo)(() => sortableItems.find((item) => item.id === (activeElement === null || activeElement === void 0 ? void 0 : activeElement.id)), [activeElement, sortableItems]);
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
+        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
+    }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const memoizedSensors = (0, react_1.useMemo)(() => sensors, []);
+    const idsStringified = JSON.stringify(sortableItems.map((i) => i.id));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const itemsIds = (0, react_1.useMemo)(() => sortableItems.map((i) => i.id), [idsStringified]);
+    (0, react_1.useEffect)(() => {
+        setSortableItems(fields);
+    }, [fields]);
+    const dropAnimationConfig = {
+        sideEffects: (0, core_1.defaultDropAnimationSideEffects)({
+            styles: {
+                active: {
+                    opacity: "0.4",
+                },
+            },
+        }),
+    };
+    const onDragStart = (0, react_1.useCallback)(({ active }) => {
+        setActiveElement(active);
+    }, [setActiveElement]);
+    const onDragEnd = (0, react_1.useCallback)(({ active, over }) => {
+        if (over && active.id !== over.id) {
+            const activeIndex = sortableItems.findIndex(({ id }) => id === active.id);
+            const overIndex = sortableItems.findIndex(({ id }) => id === over.id);
+            const resorted = (0, sortable_1.arrayMove)(sortableItems, activeIndex, overIndex);
+            handleDragEnd(activeIndex, overIndex);
+            setSortableItems(resorted);
+        }
+        setActiveElement(null);
+    }, [setActiveElement, setSortableItems, handleDragEnd, sortableItems]);
+    const onDragCancel = (0, react_1.useCallback)(() => {
+        setActiveElement(null);
+    }, [setActiveElement]);
+    return {
+        memoizedSensors,
+        dropAnimationConfig,
+        itemsIds,
+        activeItem,
+        onDragStart,
+        onDragEnd,
+        onDragCancel,
+    };
+};
+exports.useSortable = useSortable;

package/pages/content-builder/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./content-builder-page";
+export * from "./content-field";
+export * from "./content-header";
+export * from "./mapper";
+export * from "./types";

package/pages/content-builder/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./content-builder-page"), exports);
+__exportStar(require("./content-field"), exports);
+__exportStar(require("./content-header"), exports);
+__exportStar(require("./mapper"), exports);
+__exportStar(require("./types"), exports);

package/pages/content-builder/mapper.d.ts

@@ -0,0 +1,4 @@
+import { ContentRequestBody, ContentResponse } from "../../api";
+import { RootContent } from "./types";
+export declare function mapResponseToFormData(response: ContentResponse): RootContent<any>;
+export declare function mapFormDataToRequest(values: RootContent<any>): ContentRequestBody;

package/pages/content-builder/mapper.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapResponseToFormData = mapResponseToFormData;
+exports.mapFormDataToRequest = mapFormDataToRequest;
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+function mapResponseToFormData(response) {
+    var _a, _b;
+    return {
+        type: response.type || null,
+        name: response.name,
+        parent: response.parent,
+        perex: response.perex,
+        seo: {
+            name: response.seo.name,
+            title: response.seo.title,
+            description: response.seo.description,
+            ogTitle: response.seo.ogTitle,
+            ogDescription: response.seo.ogDescription,
+            ogImage: response.seo.ogImage,
+        },
+        visibilityLevel: response.visibilityLevel,
+        image: response.image,
+        content: response.content,
+        author: response.author
+            ? {
+                id: response.author.id,
+                label: `${response.author.firstName} ${response.author.surname}`,
+            }
+            : null,
+        category: response.category
+            ? {
+                id: response.category.id,
+                label: `${response.category.name}`,
+            }
+            : null,
+        publishedAt: (_a = response.publishedAt) !== null && _a !== void 0 ? _a : new Date().toISOString(),
+        active: !response.hidden,
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        tags: (_b = response.tags) !== null && _b !== void 0 ? _b : empty_array_1.EMPTY_ARRAY,
+    };
+}
+function mapFormDataToRequest(values) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    return {
+        name: values.name,
+        perex: values.perex,
+        type: (_a = values.type) !== null && _a !== void 0 ? _a : "",
+        parent: (_c = (_b = values.parent) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null,
+        seo: {
+            name: (_d = values.seo.name) !== null && _d !== void 0 ? _d : "",
+            title: values.seo.title,
+            description: values.seo.description,
+            ogTitle: values.seo.ogTitle,
+            ogDescription: values.seo.ogDescription,
+            ogImage: (_f = (_e = values.seo.ogImage) === null || _e === void 0 ? void 0 : _e.id) !== null && _f !== void 0 ? _f : null,
+        },
+        hidden: !values.active,
+        category: (_h = (_g = values.category) === null || _g === void 0 ? void 0 : _g.id) !== null && _h !== void 0 ? _h : null,
+        author: (_k = (_j = values.author) === null || _j === void 0 ? void 0 : _j.id) !== null && _k !== void 0 ? _k : null,
+        publishedAt: values.publishedAt,
+        visibilityLevel: values.visibilityLevel,
+        image: (_m = (_l = values.image) === null || _l === void 0 ? void 0 : _l.id) !== null && _m !== void 0 ? _m : null,
+        tags: (_p = (_o = values.tags) === null || _o === void 0 ? void 0 : _o.map((t) => t.id)) !== null && _p !== void 0 ? _p : empty_array_1.EMPTY_ARRAY,
+        content: {
+            data: values.content,
+            search: "", // TODO
+        },
+    };
+}