@uxf/cms 11.36.0 → 11.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/cms",
-    "version": "11.36.0",
+    "version": "11.37.0",
     "description": "UXF Cms",
     "author": "UXFans <dev@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/cms#readme",
@@ -32,11 +32,11 @@
         "@redux-devtools/extension": "3.3.0",
         "@uxf/core": "11.35.0",
         "@uxf/core-react": "11.36.0",
-        "@uxf/data-grid": "11.36.0",
-        "@uxf/form": "11.36.0",
+        "@uxf/data-grid": "11.37.0",
+        "@uxf/form": "11.37.0",
         "@uxf/router": "11.32.0",
-        "@uxf/ui": "11.36.0",
-        "@uxf/wysiwyg": "11.36.0",
+        "@uxf/ui": "11.37.0",
+        "@uxf/wysiwyg": "11.37.0",
         "axios": "1.7.5",
         "axios-hooks": "5.0.2",
         "es6-error": "4.1.1",

package/pages/content-builder/components/form-root-fields.d.ts

@@ -1,11 +1,14 @@
-import { FC, ReactNode } from "react";
+import React, { Dispatch, ReactNode, SetStateAction } from "react";
 import { Control } from "react-hook-form";
+import { ContentBuilderTabs } from "../constants";
 import { ContentBuilderConfig } from "../types";
 interface Props {
-    config: ContentBuilderConfig<any>;
-    id: number | null;
+    activeTab: ContentBuilderTabs;
     children?: ReactNode;
+    config: ContentBuilderConfig<any>;
     control: Control<any>;
+    id: number | null;
+    setActiveTab: Dispatch<SetStateAction<ContentBuilderTabs>>;
 }
-export declare const FormRootFields: FC<Props>;
+export declare function FormRootFields(props: Props): React.JSX.Element;
 export {};

package/pages/content-builder/components/form-root-fields.js

@@ -1,29 +1,10 @@
 "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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormRootFields = void 0;
+exports.FormRootFields = FormRootFields;
+const hide_1 = require("@uxf/core-react/components/hide");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const checkbox_input_1 = require("@uxf/form/checkbox-input");
 const combobox_1 = require("@uxf/form/combobox/combobox");
@@ -34,57 +15,64 @@ const select_1 = require("@uxf/form/select");
 const text_input_1 = require("@uxf/form/text-input");
 const textarea_1 = require("@uxf/form/textarea");
 const tabs_1 = require("@uxf/ui/tabs");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const api_1 = require("../../../api");
 const on_upload_file_1 = require("../../../forms/utils/on-upload-file");
+const constants_1 = require("../constants");
 const options = [
     { id: "PRIVATE", label: "Privátní" },
     { id: "PUBLIC_WITHOUT_SITEMAP", label: "Veřejný bez sitemapy" },
     { id: "PUBLIC", label: "Veřejný" },
 ];
-const FormRootFields = (props) => {
+function FormRootFields(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    // eslint-disable-next-line react/destructuring-assignment
-    const { children, config, id, control } = props;
-    const [activeTab, setActiveTab] = (0, react_1.useState)("basic");
     return (react_1.default.createElement("div", { className: "pb-2 pt-4" },
-        react_1.default.createElement(tabs_1.Tabs, { onChange: setActiveTab, value: activeTab },
-            react_1.default.createElement(tabs_1.Tabs.Panel, { label: "Z\u00E1kladn\u00ED", name: "basic" },
+        react_1.default.createElement(tabs_1.Tabs, { onChange: props.setActiveTab, value: props.activeTab },
+            react_1.default.createElement(tabs_1.Tabs.Panel, { isAlwaysMounted: true, label: "Z\u00E1kladn\u00ED", name: constants_1.ContentBuilderTabs.Basic },
                 react_1.default.createElement("div", { className: "space-y-8 px-4 pb-4" },
-                    config.allowedTypes && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(select_1.Select, { control: control, isReadOnly: (0, is_not_nil_1.isNotNil)(id), isRequired: true, label: "Typ", name: "type", options: config.allowedTypes }))),
+                    props.config.allowedTypes && (react_1.default.createElement("div", null,
+                        react_1.default.createElement(select_1.Select, { control: props.control, isReadOnly: (0, is_not_nil_1.isNotNil)(props.id), isRequired: true, label: "Typ", name: "type", options: props.config.allowedTypes }))),
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement(text_input_1.TextInput, { control: control, isRequired: true, label: "Nadpis", name: "name" })),
-                    !((_a = config.hide) === null || _a === void 0 ? void 0 : _a.publishedAt) && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { control: control, isRequired: true, label: "Datum publikace", name: "publishedAt" }))),
-                    !((_b = config.hide) === null || _b === void 0 ? void 0 : _b.perex) && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(textarea_1.Textarea, { control: control, label: "Perex", name: "perex", rows: 3 }))),
-                    !((_c = config.hide) === null || _c === void 0 ? void 0 : _c.author) && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(combobox_1.Combobox, { control: control, label: "Autor", loadOptions: (term) => (0, api_1.autocomplete)(null, { name: "content-author" }, { term }).then((r) => r.data), name: "author" }))),
-                    !((_d = config.hide) === null || _d === void 0 ? void 0 : _d.category) && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(combobox_1.Combobox, { control: control, label: "Kategorie", loadOptions: (term) => (0, api_1.autocomplete)(null, { name: "content-category" }, { term }).then((r) => r.data), name: "category" }))),
+                        react_1.default.createElement(text_input_1.TextInput, { control: props.control, isRequired: true, label: "Nadpis", name: "name", type: "text" })),
+                    react_1.default.createElement(hide_1.Hide, { when: Boolean((_a = props.config.hide) === null || _a === void 0 ? void 0 : _a.publishedAt) },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { control: props.control, isRequired: true, label: "Datum publikace", name: "publishedAt" }))),
+                    react_1.default.createElement(hide_1.Hide, { when: Boolean((_b = props.config.hide) === null || _b === void 0 ? void 0 : _b.perex) },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(textarea_1.Textarea, { control: props.control, label: "Perex", name: "perex", rows: 3 }))),
+                    react_1.default.createElement(hide_1.Hide, { when: Boolean((_c = props.config.hide) === null || _c === void 0 ? void 0 : _c.author) },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(combobox_1.Combobox, { control: props.control, label: "Autor", loadOptions: (term) => (0, api_1.autocomplete)(null, { name: "content-author" }, { term }).then((r) => r.data), name: "author" }))),
+                    react_1.default.createElement(hide_1.Hide, { when: Boolean((_d = props.config.hide) === null || _d === void 0 ? void 0 : _d.category) },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(combobox_1.Combobox, { control: props.control, label: "Kategorie", loadOptions: (term) => (0, api_1.autocomplete)(null, { name: "content-category" }, { term }).then((r) => r.data), name: "category" }))),
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, label: "Tagy", loadOptions: (term) => (0, api_1.autocomplete)(null, { name: "content-tag" }, { term }).then((r) => r.data), name: "tags" })),
-                    !((_e = config.hide) === null || _e === void 0 ? void 0 : _e.image) && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(file_input_1.FileInput, { control: control, id: "image", label: "Hlavn\u00ED obr\u00E1zek", name: "image", onUploadFile: on_upload_file_1.onUploadFile }))),
+                        react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: props.control, label: "Tagy", loadOptions: (term) => (0, api_1.autocomplete)(null, { name: "content-tag" }, { term }).then((r) => r.data), name: "tags" })),
+                    react_1.default.createElement(hide_1.Hide, { when: Boolean((_e = props.config.hide) === null || _e === void 0 ? void 0 : _e.image) },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(file_input_1.FileInput, { control: props.control, id: "image", label: "Hlavn\u00ED obr\u00E1zek", name: "image", onUploadFile: on_upload_file_1.onUploadFile }))),
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement(checkbox_input_1.CheckboxInput, { control: control, label: "Aktivn\u00ED", name: "active" })),
+                        react_1.default.createElement(checkbox_input_1.CheckboxInput, { control: props.control, label: "Aktivn\u00ED", name: "active" })),
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement(select_1.Select, { control: control, isRequired: true, label: "Viditelnost", name: "visibilityLevel", options: options })))),
-            react_1.default.createElement(tabs_1.Tabs.Panel, { label: "SEO", name: "seo" },
+                        react_1.default.createElement(select_1.Select, { control: props.control, isRequired: true, label: "Viditelnost", name: "visibilityLevel", options: options })))),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { isAlwaysMounted: true, label: "SEO", name: constants_1.ContentBuilderTabs.Seo },
                 react_1.default.createElement("div", { className: "space-y-8 px-4 pb-4" },
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement(text_input_1.TextInput, { control: control, helperText: "Slug = unik\u00E1tn\u00ED koncovka URL adresy", label: "Slug", name: "seo.name" })),
-                    !((_g = (_f = config.hide) === null || _f === void 0 ? void 0 : _f.seo) === null || _g === void 0 ? void 0 : _g.title) && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(text_input_1.TextInput, { control: control, label: "Nadpis", name: "seo.title" }))),
-                    !((_j = (_h = config.hide) === null || _h === void 0 ? void 0 : _h.seo) === null || _j === void 0 ? void 0 : _j.description) && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(text_input_1.TextInput, { control: control, label: "Popis", name: "seo.description" }))),
-                    !((_l = (_k = config.hide) === null || _k === void 0 ? void 0 : _k.seo) === null || _l === void 0 ? void 0 : _l.ogTitle) && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(text_input_1.TextInput, { control: control, helperText: "Nadpis kter\u00FD bude zobrazen p\u0159i sd\u00EDlen\u00ED na Facebooku, ...", label: "OG nadpis", name: "seo.ogTitle" }))),
-                    !((_o = (_m = config.hide) === null || _m === void 0 ? void 0 : _m.seo) === null || _o === void 0 ? void 0 : _o.ogDescription) && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(text_input_1.TextInput, { control: control, helperText: "Popis kter\u00FD bude zobrazen p\u0159i sd\u00EDlen\u00ED na Facebooku, ...", label: "OG popis", name: "seo.ogDescription" }))),
-                    !((_q = (_p = config.hide) === null || _p === void 0 ? void 0 : _p.seo) === null || _q === void 0 ? void 0 : _q.ogImage) && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(file_input_1.FileInput, { control: control, helperText: "Obr\u00E1zek kter\u00FD bude zobrazen p\u0159i sd\u00EDlen\u00ED na Facebooku, ...", id: "seo.ogImage", label: "OG obr\u00E1zek", name: "seo.ogImage", onUploadFile: on_upload_file_1.onUploadFile })))))),
-        children));
-};
-exports.FormRootFields = FormRootFields;
+                        react_1.default.createElement(text_input_1.TextInput, { control: props.control, helperText: "Slug = unik\u00E1tn\u00ED koncovka URL adresy", isRequired: true, label: "Slug", name: "seo.name", type: "text" })),
+                    react_1.default.createElement(hide_1.Hide, { when: Boolean((_g = (_f = props.config.hide) === null || _f === void 0 ? void 0 : _f.seo) === null || _g === void 0 ? void 0 : _g.title) },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(text_input_1.TextInput, { control: props.control, label: "Nadpis", name: "seo.title", type: "text" }))),
+                    react_1.default.createElement(hide_1.Hide, { when: Boolean((_j = (_h = props.config.hide) === null || _h === void 0 ? void 0 : _h.seo) === null || _j === void 0 ? void 0 : _j.description) },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(text_input_1.TextInput, { control: props.control, label: "Popis", name: "seo.description", type: "text" }))),
+                    react_1.default.createElement(hide_1.Hide, { when: Boolean((_l = (_k = props.config.hide) === null || _k === void 0 ? void 0 : _k.seo) === null || _l === void 0 ? void 0 : _l.ogTitle) },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(text_input_1.TextInput, { control: props.control, helperText: "Nadpis kter\u00FD bude zobrazen p\u0159i sd\u00EDlen\u00ED na Facebooku, ...", label: "OG nadpis", name: "seo.ogTitle", type: "text" }))),
+                    react_1.default.createElement(hide_1.Hide, { when: Boolean((_o = (_m = props.config.hide) === null || _m === void 0 ? void 0 : _m.seo) === null || _o === void 0 ? void 0 : _o.ogDescription) },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(text_input_1.TextInput, { control: props.control, helperText: "Popis kter\u00FD bude zobrazen p\u0159i sd\u00EDlen\u00ED na Facebooku, ...", label: "OG popis", name: "seo.ogDescription", type: "text" }))),
+                    react_1.default.createElement(hide_1.Hide, { when: Boolean((_q = (_p = props.config.hide) === null || _p === void 0 ? void 0 : _p.seo) === null || _q === void 0 ? void 0 : _q.ogImage) },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(file_input_1.FileInput, { control: props.control, helperText: "Obr\u00E1zek kter\u00FD bude zobrazen p\u0159i sd\u00EDlen\u00ED na Facebooku, ...", id: "seo.ogImage", label: "OG obr\u00E1zek", name: "seo.ogImage", onUploadFile: on_upload_file_1.onUploadFile })))))),
+        props.children));
+}

package/pages/content-builder/components/form.d.ts

@@ -1,10 +1,10 @@
 import { FormProps as UXFFormProps } from "@uxf/form/form";
-import { FC } from "react";
+import React from "react";
 import { DefaultValues } from "react-hook-form";
 import { ContentBuilderConfig, RootContent } from "../types";
-export interface FormProps extends Omit<UXFFormProps<RootContent<any>>, "children" | "formApi" | "id" | "omitSubmitInput"> {
+export interface FormProps extends Omit<UXFFormProps<RootContent<any>>, "children" | "formApi" | "id" | "shouldOmitSubmitInput"> {
     config: ContentBuilderConfig<any>;
     id: number | null;
     defaultValues?: DefaultValues<any>;
 }
-export declare const Form: FC<FormProps>;
+export declare function Form(props: FormProps): React.JSX.Element;

package/pages/content-builder/components/form.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Form = void 0;
+exports.Form = Form;
 const form_1 = require("@uxf/form/form");
 const rem_1 = require("@uxf/styles/units/rem");
 const react_1 = __importStar(require("react"));
@@ -33,10 +33,28 @@ const constants_1 = require("../constants");
 const content_field_1 = require("../content-field");
 const details_visibility_context_1 = require("../context/details-visibility-context");
 const form_root_fields_1 = require("./form-root-fields");
-const Form = (props) => {
-    const formApi = (0, react_hook_form_1.useForm)({ defaultValues: props.defaultValues });
+// TODO: Mapování inputů na taby, asi by šlo udělat lépe
+const INPUT_TAB_MAP = {
+    active: constants_1.ContentBuilderTabs.Basic,
+    author: constants_1.ContentBuilderTabs.Basic,
+    category: constants_1.ContentBuilderTabs.Basic,
+    content: constants_1.ContentBuilderTabs.Basic,
+    image: constants_1.ContentBuilderTabs.Basic,
+    name: constants_1.ContentBuilderTabs.Basic,
+    perex: constants_1.ContentBuilderTabs.Basic,
+    publishedAt: constants_1.ContentBuilderTabs.Basic,
+    seo: constants_1.ContentBuilderTabs.Seo,
+    tags: constants_1.ContentBuilderTabs.Basic,
+    type: constants_1.ContentBuilderTabs.Basic,
+    visibilityLevel: constants_1.ContentBuilderTabs.Basic,
+};
+function Form(props) {
+    const formApi = (0, react_hook_form_1.useForm)({
+        defaultValues: props.defaultValues,
+    });
     const viewportHeight = (0, use_viewport_height_1.useViewportHeight)(true);
     const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
+    const [activeTab, setActiveTab] = (0, react_1.useState)(constants_1.ContentBuilderTabs.Basic);
     (0, react_1.useEffect)(() => {
         const header = document.getElementById(constants_1.CONTENT_BUILDER_PAGE_HEADER_ID);
         if (header) {
@@ -44,12 +62,20 @@ const Form = (props) => {
         }
     }, []);
     const height = viewportHeight === "100vh" ? viewportHeight : (0, rem_1.rem)(viewportHeight);
-    return (react_1.default.createElement(form_1.Form, { formApi: formApi, id: constants_1.CONTENT_BUILDER_FORM_ID, onSubmit: props.onSubmit },
+    const handleError = (errors) => {
+        //TODO: přepnutí na tab s chybou, asi by šlo udělat lépe
+        for (const inputName in errors) {
+            if (inputName in INPUT_TAB_MAP) {
+                setActiveTab(INPUT_TAB_MAP[inputName]);
+                break;
+            }
+        }
+    };
+    return (react_1.default.createElement(form_1.Form, { formApi: formApi, id: constants_1.CONTENT_BUILDER_FORM_ID, onError: handleError, onSubmit: props.onSubmit },
         react_1.default.createElement("div", { className: "flex flex-col-reverse overflow-hidden xl:h-[calc(var(--viewport-height)-var(--header-height))] xl:flex-row", style: { "--viewport-height": height, "--header-height": (0, rem_1.rem)(headerHeight) } },
             react_1.default.createElement(details_visibility_context_1.DetailsVisibilityProvider, null,
                 react_1.default.createElement(content_field_1.ContentField, { contentComponents: props.config.contentComponents, control: formApi.control, name: "content" })),
-            react_1.default.createElement("div", { className: "basis-[500px] bg-white px-4 pb-8 xl:overflow-y-auto dark:bg-gray-950" },
+            react_1.default.createElement("div", { className: "shrink-0 basis-[500px] bg-white px-4 pb-8 xl:overflow-y-auto dark:bg-gray-950" },
                 react_1.default.createElement("h2", { className: "uxf-typo-h5 px-4 pb-4 pt-6" }, "Nastaven\u00ED"),
-                react_1.default.createElement(form_root_fields_1.FormRootFields, { config: props.config, control: formApi.control, id: props.id })))));
-};
-exports.Form = Form;
+                react_1.default.createElement(form_root_fields_1.FormRootFields, { activeTab: activeTab, config: props.config, control: formApi.control, id: props.id, setActiveTab: setActiveTab })))));
+}

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

@@ -1,6 +1,6 @@
-import { FC } from "react";
+import React from "react";
 interface HeaderProps {
     title: string;
 }
-export declare const Header: FC<HeaderProps>;
+export declare function Header(props: HeaderProps): React.JSX.Element;
 export {};

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

@@ -1,44 +1,16 @@
 "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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = void 0;
-const button_1 = require("@uxf/ui/button");
-const button_group_1 = require("@uxf/ui/button-group");
-const react_1 = __importStar(require("react"));
+exports.Header = Header;
+const react_1 = __importDefault(require("react"));
 const layout_container_1 = require("../../../lib/layout/layout-container");
 const constants_1 = require("../constants");
-const Header = (props) => {
-    const [language, setLanguage] = (0, react_1.useState)("cs");
+function Header(props) {
     return (react_1.default.createElement("div", { className: "sticky top-0 z-10 bg-white shadow-md dark:bg-gray-950", id: constants_1.CONTENT_BUILDER_PAGE_HEADER_ID },
         react_1.default.createElement(layout_container_1.LayoutContainer, { className: "flex items-center justify-between py-4" },
             react_1.default.createElement("h1", { className: "uxf-typo-h5" }, props.title),
-            react_1.default.createElement("div", { className: "flex space-x-4" },
-                react_1.default.createElement(button_group_1.ButtonGroup, null,
-                    react_1.default.createElement(button_1.Button, { onClick: () => setLanguage("cs"), size: "sm", variant: language === "cs" ? "default" : "secondary" }, "CS"),
-                    react_1.default.createElement(button_1.Button, { onClick: () => setLanguage("en"), size: "sm", variant: language === "en" ? "default" : "secondary" }, "EN"),
-                    react_1.default.createElement(button_1.Button, { onClick: () => setLanguage("de"), size: "sm", variant: language === "de" ? "default" : "secondary" }, "DE")),
-                react_1.default.createElement("button", { className: "uxf-button uxf-button--color-default uxf-button--size-default uxf-button--variant-default is-hoverable", form: constants_1.CONTENT_BUILDER_FORM_ID, type: "submit" }, "Ulo\u017Eit")))));
-};
-exports.Header = Header;
+            " ",
+            react_1.default.createElement("button", { className: "uxf-button uxf-button--color-default uxf-button--size-default uxf-button--variant-default is-hoverable", form: constants_1.CONTENT_BUILDER_FORM_ID, type: "submit" }, "Ulo\u017Eit"))));
+}

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

@@ -1,2 +1,6 @@
 export declare const CONTENT_BUILDER_FORM_ID = "content-builder-form";
 export declare const CONTENT_BUILDER_PAGE_HEADER_ID = "content-builder-page-header";
+export declare enum ContentBuilderTabs {
+    Basic = "basic",
+    Seo = "seo"
+}

package/pages/content-builder/constants.js

@@ -1,5 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CONTENT_BUILDER_PAGE_HEADER_ID = exports.CONTENT_BUILDER_FORM_ID = void 0;
+exports.ContentBuilderTabs = exports.CONTENT_BUILDER_PAGE_HEADER_ID = exports.CONTENT_BUILDER_FORM_ID = void 0;
 exports.CONTENT_BUILDER_FORM_ID = "content-builder-form";
 exports.CONTENT_BUILDER_PAGE_HEADER_ID = "content-builder-page-header";
+var ContentBuilderTabs;
+(function (ContentBuilderTabs) {
+    ContentBuilderTabs["Basic"] = "basic";
+    ContentBuilderTabs["Seo"] = "seo";
+})(ContentBuilderTabs || (exports.ContentBuilderTabs = ContentBuilderTabs = {}));

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

@@ -8,7 +8,7 @@ const dropzone_input_1 = require("@uxf/form/dropzone/dropzone-input");
 const dropzone_list_1 = require("@uxf/form/dropzone/dropzone-list");
 const react_1 = __importDefault(require("react"));
 const on_upload_dropzone_file_1 = require("../../../forms/utils/on-upload-dropzone-file");
-const on_remove_confirm_1 = require("../../../utils/on-remove-confirm");
+const remove_confirm_handler_1 = require("../../../utils/remove-confirm-handler");
 const content_header_1 = require("../content-header");
 const details_visibility_context_1 = require("../context/details-visibility-context");
 const Gallery = (props) => {
@@ -17,7 +17,7 @@ const Gallery = (props) => {
         react_1.default.createElement(content_header_1.ContentHeader, { ...props }),
         visibility && (react_1.default.createElement("div", { className: "p-4" },
             react_1.default.createElement(dropzone_input_1.DropzoneInput, { control: props.control, name: `${props.name}.images`, onUploadFile: on_upload_dropzone_file_1.onUploadDropzoneFile }),
-            react_1.default.createElement(dropzone_list_1.DropzoneList, { control: props.control, name: `${props.name}.images`, onRemoveConfirm: on_remove_confirm_1.onRemoveConfirm })))));
+            react_1.default.createElement(dropzone_list_1.DropzoneList, { className: "mt-4", control: props.control, name: `${props.name}.images`, onRemoveConfirm: remove_confirm_handler_1.removeConfirmHandler })))));
 };
 exports.Gallery = Gallery;
 exports.Gallery.getConfig = () => ({

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

@@ -25,16 +25,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentHeader = void 0;
 const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
-const button_1 = require("@uxf/ui/button");
-const datetime_picker_input_1 = require("@uxf/ui/datetime-picker-input");
 const icon_1 = require("@uxf/ui/icon");
-const modal_service_1 = require("@uxf/ui/modal/modal-service");
-const paper_1 = require("@uxf/ui/paper/paper");
+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 [validityFrom, setValidityFrom] = (0, react_1.useState)(null);
-    const [validityTo, setValidityTo] = (0, react_1.useState)(null);
     const [visibility, toggleVisibility] = (0, details_visibility_context_1.useDetailsVisibilityForSection)(props.id);
     const removeHandler = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
@@ -49,23 +44,10 @@ const ContentHeader = (props) => {
         className: "flex w-full cursor-pointer flex-row items-center justify-between p-4",
         onClick: toggleVisibility,
     });
-    const setVisibilityHandler = (event) => {
-        event.stopPropagation();
-        (0, modal_service_1.openModal)({
-            children: (react_1.default.createElement(paper_1.Paper, { className: "space-y-4 p-4 dark:bg-gray-950" },
-                react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { label: "Platnost od", name: "visibilityFrom", onChange: (value) => setValidityFrom(value), value: validityFrom }),
-                react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { label: "Platnost do", name: "visibilityTo", onChange: (value) => setValidityTo(value), value: validityTo }))),
-            width: "sm",
-        });
-    };
     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("div", { className: "flex space-x-2" },
-                react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: (event) => setVisibilityHandler(event), size: "sm", variant: "secondary" },
-                    react_1.default.createElement(icon_1.Icon, { name: "calendar" })),
-                react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: (event) => removeHandler(event), size: "sm", variant: "secondary" },
-                    react_1.default.createElement(icon_1.Icon, { name: "delete" }))),
+            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/form-page/base-field.js

@@ -23,7 +23,7 @@ const react_1 = __importDefault(require("react"));
 const api_1 = require("../../api");
 const on_upload_dropzone_file_1 = require("../../forms/utils/on-upload-dropzone-file");
 const on_upload_file_1 = require("../../forms/utils/on-upload-file");
-const on_remove_confirm_1 = require("../../utils/on-remove-confirm");
+const remove_confirm_handler_1 = require("../../utils/remove-confirm-handler");
 const field_array_1 = require("./field-array"); // eslint-disable-line import/no-cycle
 const content_1 = require("./field/content");
 // eslint-disable-next-line complexity
@@ -58,7 +58,7 @@ const BaseField = (props) => {
                 react_1.default.createElement(label_1.Label, null, label),
                 react_1.default.createElement("div", { className: "mb-3" },
                     react_1.default.createElement(dropzone_input_1.DropzoneInput, { control: control, label: label, name: fieldName, onUploadFile: on_upload_dropzone_file_1.onUploadDropzoneFile })),
-                react_1.default.createElement(dropzone_list_1.DropzoneList, { control: control, errorText: "Soubor se nepoda\u0159ilo nahr\u00E1t.", name: fieldName, onRemoveConfirm: on_remove_confirm_1.onRemoveConfirm })));
+                react_1.default.createElement(dropzone_list_1.DropzoneList, { control: control, errorText: "Soubor se nepoda\u0159ilo nahr\u00E1t.", name: fieldName, onRemoveConfirm: remove_confirm_handler_1.removeConfirmHandler })));
         case "manyToMany":
             return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, isDisabled: disabled, isRequired: required, label: label, loadOptions: (term) => { var _a; return (0, api_1.autocomplete)(null, { name: (_a = fieldSchema.autocomplete) !== null && _a !== void 0 ? _a : "" }, { term }).then((r) => r.data); }, name: fieldName }));
         case "manyToOne":

package/pages/grid-page/grid-page.js

@@ -129,7 +129,7 @@ const GridPageComponent = (props) => {
         : undefined);
     return (react_1.default.createElement(Layout, { key: props.entityAlias, title: (_j = (_g = props.title) !== null && _g !== void 0 ? _g : (_h = props.metaSchema) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : "" },
         react_1.default.createElement("div", { className: "mb-10" },
-            react_1.default.createElement(data_grid_1.DataGrid, { NoRowsFallback: (_k = props.ui) === null || _k === void 0 ? void 0 : _k.NoRowsFallback, SelectedRowsToolbarActions: (_l = props.ui) === null || _l === void 0 ? void 0 : _l.SelectedRowsToolbarActions, actionCell: actionCell, actions: actions, bodyCells: (_m = props.ui) === null || _m === void 0 ? void 0 : _m.BodyCells, customActions: cActions, data: data, error: error, filterHandlers: (_o = props.ui) === null || _o === void 0 ? void 0 : _o.FilterHandlers, gridName: props.entityAlias, isLoading: isLoading, isRowSelectable: props.selectable, noBorder: true, onCsvDownload: (r) => window.open(`/api/cms/datagrid/export/${props.entityAlias}?${(0, qs_1.stringify)(r)}`), onReload: onReload, rowHeight: props.rowHeight, schema: props.gridSchema, state: state }))));
+            react_1.default.createElement(data_grid_1.DataGrid, { NoRowsFallback: (_k = props.ui) === null || _k === void 0 ? void 0 : _k.NoRowsFallback, SelectedRowsToolbarActions: (_l = props.ui) === null || _l === void 0 ? void 0 : _l.SelectedRowsToolbarActions, actionCell: actionCell, actions: actions, bodyCells: (_m = props.ui) === null || _m === void 0 ? void 0 : _m.BodyCells, customActions: cActions, data: data, error: error, filterHandlers: (_o = props.ui) === null || _o === void 0 ? void 0 : _o.FilterHandlers, gridName: props.entityAlias, isLoading: isLoading, isRowSelectable: props.selectable, onCsvDownload: (r) => window.open(`/api/cms/datagrid/export/${props.entityAlias}?${(0, qs_1.stringify)(r)}`), onReload: onReload, rowHeight: props.rowHeight, schema: props.gridSchema, state: state }))));
 };
 GridPageComponent.displayName = "GridPageComponent";
 const GridPage = (config) => {

package/utils/remove-confirm-handler.d.ts

@@ -0,0 +1 @@
+export declare function removeConfirmHandler(): Promise<boolean>;

package/utils/remove-confirm-handler.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeConfirmHandler = removeConfirmHandler;
+const button_1 = require("@uxf/ui/button");
+const modal_1 = require("@uxf/ui/modal");
+const modal_dialog_1 = require("@uxf/ui/modal-dialog/modal-dialog");
+const react_1 = __importDefault(require("react"));
+function removeConfirmHandler() {
+    return new Promise((resolve) => {
+        (0, modal_1.openModal)({
+            disableBackdropClose: true,
+            children: (react_1.default.createElement(modal_dialog_1.ModalDialog, { footer: react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(button_1.Button, { onClick: () => {
+                            resolve(false);
+                            (0, modal_1.closeModal)();
+                        } }, "Zru\u0161it"),
+                    react_1.default.createElement(button_1.Button, { color: "negative", onClick: () => {
+                            resolve(true);
+                            (0, modal_1.closeModal)();
+                        } }, "Ano, smazat")), title: "Opravdu chcete smazat tento soubor?" })),
+            width: "sm",
+        });
+    });
+}

package/utils/on-remove-confirm.d.ts

@@ -1 +0,0 @@
-export declare function onRemoveConfirm(): Promise<boolean>;

package/utils/on-remove-confirm.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.onRemoveConfirm = onRemoveConfirm;
-const message_1 = require("@uxf/ui/message");
-function onRemoveConfirm() {
-    return new Promise((resolve) => {
-        message_1.MessageService.openConfirm({
-            acceptLabel: "Yes, delete",
-            cancelLabel: "Cancel",
-            title: "Do you want to delete the file?",
-            color: "error",
-            variant: "centered",
-            onAccept: () => resolve(true),
-            onCancel: () => resolve(false),
-            CustomIconComponent: null,
-        });
-    });
-}