@uxf/cms 11.48.3 → 11.49.0

package/content-builder/content-builder-body.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from "react";
+interface ContentBuilderBodyProps {
+    children: ReactNode;
+}
+export declare function ContentBuilderBody(props: ContentBuilderBodyProps): React.JSX.Element;
+export {};

package/content-builder/content-builder-body.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentBuilderBody = ContentBuilderBody;
+const react_1 = __importDefault(require("react"));
+function ContentBuilderBody(props) {
+    return react_1.default.createElement("div", { className: "uxf-cb__body" }, props.children);
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface ContentBuilderHeaderProps {
+    title: string;
+    className?: string;
+}
+export declare function ContentBuilderHeader(props: ContentBuilderHeaderProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentBuilderHeader = ContentBuilderHeader;
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+function ContentBuilderHeader(props) {
+    return (react_1.default.createElement("div", { className: "uxf-cb__header" },
+        react_1.default.createElement("h1", { className: "uxg-cb__header-title uxf-typo-h5" }, props.title),
+        react_1.default.createElement(button_1.Button, { type: "submit" }, "Ulo\u017Eit")));
+}

package/content-builder/{form-wrapper.d.ts → content-builder-root.d.ts}

@@ -1,11 +1,11 @@
 import React, { ReactNode } from "react";
 import { FieldValues, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
-interface Props<FormData extends FieldValues> {
+interface ContentBuilderRootProps<FormData extends FieldValues> {
     id: string;
     children: ReactNode;
     formApi: UseFormReturn<FormData>;
     onSubmit: SubmitHandler<FormData>;
     onError?: SubmitErrorHandler<FormData>;
 }
-export declare function FormWrapper<FormData extends FieldValues>(props: Props<FormData>): React.JSX.Element;
+export declare function ContentBuilderRoot<FormData extends FieldValues>(props: ContentBuilderRootProps<FormData>): React.JSX.Element;
 export {};

package/content-builder/content-builder-root.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentBuilderRoot = ContentBuilderRoot;
+const form_1 = require("@uxf/form/form");
+const react_1 = __importDefault(require("react"));
+const details_visibility_context_1 = require("../pages/content-builder/context/details-visibility-context");
+function ContentBuilderRoot(props) {
+    return (react_1.default.createElement(form_1.Form, { className: "uxf-cb", formApi: props.formApi, id: props.id, onError: props.onError, onSubmit: props.onSubmit },
+        react_1.default.createElement(details_visibility_context_1.DetailsVisibilityProvider, null, props.children)));
+}

package/content-builder/{sidebar.d.ts → content-builder-sidebar.d.ts}

@@ -3,5 +3,5 @@ interface Props {
     children: ReactNode;
     title: string;
 }
-export declare function Sidebar(props: Props): React.JSX.Element;
+export declare function ContentBuilderSidebar(props: Props): React.JSX.Element;
 export {};

package/content-builder/{sidebar.js → content-builder-sidebar.js}

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sidebar = Sidebar;
+exports.ContentBuilderSidebar = ContentBuilderSidebar;
 const react_1 = __importDefault(require("react"));
-function Sidebar(props) {
-    return (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" }, props.title),
+function ContentBuilderSidebar(props) {
+    return (react_1.default.createElement("div", { className: "uxf-cb__sidebar" },
+        react_1.default.createElement("h2", { className: "uxf-typo-h5" }, props.title),
         props.children));
 }

package/content-builder/content-builder.css

@@ -0,0 +1,49 @@
+:root {
+    --uxf-cb-header-height: theme("height.14");
+}
+
+.uxf-cb {
+    &__header {
+        align-items: center;
+        background-color: theme("colors.white");
+        display: flex;
+        height: var(--uxf-cb-header-height);
+        justify-content: space-between;
+        padding: theme("space.2") theme("space.4");
+        position: sticky;
+        top: 0;
+        z-index: theme("zIndex.30");
+
+        @apply shadow-md;
+    }
+
+    &__body {
+        display: flex;
+        flex-direction: column-reverse;
+
+        @screen sm {
+            flex-direction: row;
+            height: calc(100vh - var(--uxf-cb-header-height));
+        }
+    }
+
+    &__content {
+        overflow-y: auto;
+        padding: theme("space.4");
+
+        @screen sm {
+            flex-grow: 1;
+            overflow-y: auto;
+        }
+    }
+
+    &__content-header {
+        margin-top: 0;
+    }
+
+    &__sidebar {
+        background-color: theme("colors.white");
+        overflow-y: auto;
+        padding: theme("space.4") theme("space.4") theme("space.16");
+    }
+}

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

@@ -2,7 +2,7 @@ import React from "react";
 import { SubmitHandler, UseFormReturn } from "react-hook-form";
 import { ContentComponent } from "../pages/content-builder";
 import { ContentBuilderFormData, FieldsConfiguration } from "./types";
-interface ContentBuilderProps {
+export interface ContentBuilderProps {
     id?: string;
     formApi: UseFormReturn<ContentBuilderFormData>;
     onSubmit: SubmitHandler<ContentBuilderFormData>;
@@ -11,4 +11,3 @@ interface ContentBuilderProps {
     fields?: FieldsConfiguration;
 }
 export declare function ContentBuilder(props: ContentBuilderProps): React.JSX.Element;
-export {};

package/content-builder/content-builder.js

@@ -27,10 +27,12 @@ exports.ContentBuilder = ContentBuilder;
 const tabs_1 = require("@uxf/ui/tabs");
 const react_1 = __importStar(require("react"));
 const content_builder_1 = require("../pages/content-builder");
-const form_wrapper_1 = require("./form-wrapper");
+const content_builder_body_1 = require("./content-builder-body");
+const content_builder_header_1 = require("./content-builder-header");
+const content_builder_root_1 = require("./content-builder-root");
+const content_builder_sidebar_1 = require("./content-builder-sidebar");
 const content_builder_basic_form_1 = require("./forms/content-builder-basic-form");
 const content_builder_seo_form_1 = require("./forms/content-builder-seo-form");
-const sidebar_1 = require("./sidebar");
 var TabName;
 (function (TabName) {
     TabName["Basic"] = "basic";
@@ -40,12 +42,14 @@ function ContentBuilder(props) {
     var _a;
     const generatedId = (0, react_1.useId)();
     const [activeTab, setActiveTab] = (0, react_1.useState)(TabName.Basic);
-    return (react_1.default.createElement(form_wrapper_1.FormWrapper, { formApi: props.formApi, id: (_a = props.id) !== null && _a !== void 0 ? _a : generatedId, onSubmit: props.onSubmit },
-        react_1.default.createElement(content_builder_1.ContentField, { contentComponents: props.ContentComponents, control: props.formApi.control, name: "content" }),
-        react_1.default.createElement(sidebar_1.Sidebar, { title: "Nastaven\u00ED" },
-            react_1.default.createElement(tabs_1.Tabs, { onChange: setActiveTab, value: activeTab },
-                react_1.default.createElement(tabs_1.Tabs.Panel, { isAlwaysMounted: true, label: "Z\u00E1kladn\u00ED", name: TabName.Basic },
-                    react_1.default.createElement(content_builder_basic_form_1.ContentBuilderBasicForm, { className: "space-y-8", fields: props.fields, formApi: props.formApi, uploadNamespace: props.uploadNamespace })),
-                react_1.default.createElement(tabs_1.Tabs.Panel, { isAlwaysMounted: true, label: "SEO", name: TabName.Seo },
-                    react_1.default.createElement(content_builder_seo_form_1.ContentBuilderSeoForm, { className: "space-y-8", fields: props.fields, formApi: props.formApi, uploadNamespace: props.uploadNamespace }))))));
+    return (react_1.default.createElement(content_builder_root_1.ContentBuilderRoot, { formApi: props.formApi, id: (_a = props.id) !== null && _a !== void 0 ? _a : generatedId, onSubmit: props.onSubmit },
+        react_1.default.createElement(content_builder_header_1.ContentBuilderHeader, { title: "\u010Cl\u00E1nek knihovny" }),
+        react_1.default.createElement(content_builder_body_1.ContentBuilderBody, null,
+            react_1.default.createElement(content_builder_1.ContentField, { contentComponents: props.ContentComponents, control: props.formApi.control, name: "content" }),
+            react_1.default.createElement(content_builder_sidebar_1.ContentBuilderSidebar, { title: "Nastaven\u00ED" },
+                react_1.default.createElement(tabs_1.Tabs, { onChange: setActiveTab, value: activeTab },
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { isAlwaysMounted: true, label: "Z\u00E1kladn\u00ED", name: TabName.Basic },
+                        react_1.default.createElement(content_builder_basic_form_1.ContentBuilderBasicForm, { className: "space-y-8", fields: props.fields, formApi: props.formApi, uploadNamespace: props.uploadNamespace })),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { isAlwaysMounted: true, label: "SEO", name: TabName.Seo },
+                        react_1.default.createElement(content_builder_seo_form_1.ContentBuilderSeoForm, { className: "space-y-8", fields: props.fields, formApi: props.formApi, uploadNamespace: props.uploadNamespace })))))));
 }

package/content-builder/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./content-builder";
-export * from "./form-wrapper";
+export * from "./content-builder-root";
 export * from "./map-content-response-to-form-data";
 export * from "./map-form-data-to-content-request";

package/content-builder/index.js

@@ -15,6 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./content-builder"), exports);
-__exportStar(require("./form-wrapper"), exports);
+__exportStar(require("./content-builder-root"), exports);
 __exportStar(require("./map-content-response-to-form-data"), exports);
 __exportStar(require("./map-form-data-to-content-request"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/cms",
-    "version": "11.48.3",
+    "version": "11.49.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.47.0",
         "@uxf/core-react": "11.47.0",
-        "@uxf/data-grid": "11.48.3",
-        "@uxf/form": "11.48.3",
+        "@uxf/data-grid": "11.49.0",
+        "@uxf/form": "11.49.0",
         "@uxf/router": "11.46.0",
-        "@uxf/ui": "11.48.3",
-        "@uxf/wysiwyg": "11.48.3",
+        "@uxf/ui": "11.49.0",
+        "@uxf/wysiwyg": "11.49.0",
         "axios": "1.7.5",
         "axios-hooks": "5.0.2",
         "es6-error": "4.1.1",

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

@@ -7,6 +7,7 @@ exports.FormContent = void 0;
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 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 paper_1 = require("@uxf/ui/paper/paper");
@@ -18,10 +19,10 @@ const getSection = (sections, type) => {
 const AddSectionButton = (props) => {
     return (react_1.default.createElement("div", { className: "mt-4 flex justify-center" },
         react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
-                children: (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: () => props.createSection(component, props.index), variant: "secondary" }, component.getConfig().label)))))),
-                width: "sm",
+                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: () => props.createSection(component, props.index), variant: "secondary" }, component.getConfig().label))))))),
             }), size: "sm", variant: "secondary" }, "P\u0159idat sekci")));
 };
 const FormContent = (props) => {

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

@@ -7,6 +7,7 @@ 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"));
@@ -29,8 +30,8 @@ const ContentField = (props) => {
     });
     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: "grow px-4 pb-8 xl:overflow-y-auto" },
-        react_1.default.createElement("div", { className: "mb-4 mt-6 flex flex-wrap items-center justify-between gap-4" },
+    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" },
@@ -50,10 +51,10 @@ const ContentField = (props) => {
             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("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)))))),
-                    width: "sm",
+                    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")))));

package/utils/remove-confirm-handler.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.removeConfirmHandler = removeConfirmHandler;
 const button_1 = require("@uxf/ui/button");
+const dialog_panel_1 = require("@uxf/ui/dialog/dialog-panel");
 const modal_1 = require("@uxf/ui/modal");
 const modal_dialog_1 = require("@uxf/ui/modal-dialog/modal-dialog");
 const react_1 = __importDefault(require("react"));
@@ -12,16 +13,16 @@ function removeConfirmHandler() {
     return new Promise((resolve) => {
         (0, modal_1.openModal)({
             isBackdropCloseDisabled: 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",
+            children: (react_1.default.createElement(dialog_panel_1.DialogPanel, { width: "sm" },
+                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?" }))),
         });
     });
 }

package/content-builder/form-wrapper.js

@@ -1,47 +0,0 @@
-"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.FormWrapper = FormWrapper;
-const form_1 = require("@uxf/form/form");
-const rem_1 = require("@uxf/styles/units/rem");
-const react_1 = __importStar(require("react"));
-const constants_1 = require("../pages/content-builder/constants");
-const details_visibility_context_1 = require("../pages/content-builder/context/details-visibility-context");
-const use_viewport_height_1 = require("../utils/use-viewport-height");
-function FormWrapper(props) {
-    const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
-    const viewportHeight = (0, use_viewport_height_1.useViewportHeight)(true);
-    const height = viewportHeight === "100vh" ? viewportHeight : (0, rem_1.rem)(viewportHeight);
-    (0, react_1.useEffect)(() => {
-        const header = document.getElementById(constants_1.CONTENT_BUILDER_PAGE_HEADER_ID);
-        if (header) {
-            setHeaderHeight(header.offsetHeight);
-        }
-    }, []);
-    return (react_1.default.createElement(form_1.Form, { formApi: props.formApi, id: props.id, onError: props.onError, 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, props.children),
-            " ")));
-}