@uxf/cms 6.0.0-beta.9 → 10.0.0-beta.5

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

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormContent = void 0;
+const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const paper_1 = require("@uxf/ui/paper/paper");
+const button_1 = require("@uxf/ui/button");
+const modal_service_1 = require("@uxf/ui/modal/modal-service");
+const icon_1 = require("@uxf/ui/icon");
+const getSection = (sections, type) => {
+    return sections.find((s) => s.getConfig().type === 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, { key: component.getConfig().type, isFullWidth: true, variant: "white", onClick: () => props.createSection(component, props.index) }, component.getConfig().label)))))),
+                width: "sm",
+            }), variant: "white", size: "sm" }, "P\u0159idat sekci")));
+};
+const FormContent = (props) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { contentComponents, onRemove, name, index, control, id, createSection, showAddButton = true } = props;
+    const { field } = (0, react_hook_form_1.useController)({ control: control, name: `${name}.type` });
+    const SectionContent = getSection(contentComponents, field.value);
+    const { attributes, listeners, isDragging, transform, transition, setNodeRef } = (0, sortable_1.useSortable)({
+        id,
+    });
+    const style = {
+        opacity: isDragging ? 0.4 : undefined,
+        transform: utilities_1.CSS.Translate.toString(transform),
+        transition,
+    };
+    if (SectionContent) {
+        return (react_1.default.createElement("div", { style: style, ref: setNodeRef, className: "relative" },
+            react_1.default.createElement("button", { type: "button", ...attributes, ...listeners, className: "absolute -left-7 top-6" },
+                react_1.default.createElement(icon_1.Icon, { size: 20, name: "grip-dots-vertical" })),
+            react_1.default.createElement(paper_1.Paper, { className: "dark:bg-gray-800" },
+                react_1.default.createElement(SectionContent, { control: control, id: id, index: index, name: `${name}.content`, onRemove: onRemove, title: SectionContent.getConfig().label, TypeInputProps: {
+                        ...field,
+                        options: contentComponents.map((s) => ({
+                            id: s.getConfig().type,
+                            label: s.getConfig().label,
+                        })),
+                    } })),
+            showAddButton && (react_1.default.createElement(AddSectionButton, { contentComponents: contentComponents, createSection: createSection, index: index }))));
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(paper_1.Paper, { className: "grid grid-cols-[34px_1fr_34px] p-4 dark:bg-gray-800" },
+            react_1.default.createElement("div", null),
+            react_1.default.createElement("div", { className: "flex grow items-center justify-center" },
+                react_1.default.createElement("p", { className: "font-bold text-error" }, "Nepodporovan\u00E1 sekce")),
+            react_1.default.createElement(button_1.Button, { variant: "white", size: "sm", isIconButton: true, onClick: onRemove },
+                react_1.default.createElement(icon_1.Icon, { name: "delete" }))),
+        react_1.default.createElement(AddSectionButton, { contentComponents: contentComponents, createSection: createSection, index: index })));
+};
+exports.FormContent = FormContent;

package/pages/{ContentBuilder/components/FormRootFields.d.ts → content-builder/components/form-root-fields.d.ts}

@@ -1,9 +1,11 @@
-import React, { ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { ContentBuilderConfig } from "../types";
+import { Control } from "react-hook-form";
 interface Props {
     config: ContentBuilderConfig<any>;
     id: number | null;
     children?: ReactNode;
+    control: Control<any>;
 }
-export declare const FormRootFields: React.FC<Props>;
+export declare const FormRootFields: FC<Props>;
 export {};

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

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormRootFields = void 0;
+const checkbox_input_1 = require("@uxf/form/checkbox-input");
+const combobox_1 = require("@uxf/form/combobox/combobox");
+const file_input_1 = require("@uxf/form/file-input");
+const multi_combobox_1 = require("@uxf/form/multi-combobox");
+const select_1 = require("@uxf/form/select");
+const text_input_1 = require("@uxf/form/text-input");
+const textarea_1 = require("@uxf/form/textarea");
+const react_1 = __importDefault(require("react"));
+const api_1 = require("../../../api");
+const on_upload_file_1 = require("../../../forms/utils/on-upload-file");
+const datetime_picker_input_1 = require("@uxf/form/datetime-picker-input");
+const tabs_1 = require("@uxf/ui/tabs");
+const options = [
+    { id: "PRIVATE", label: "Privátní" },
+    { id: "PUBLIC_WITHOUT_SITEMAP", label: "Veřejný bez sitemapy" },
+    { id: "PUBLIC", label: "Veřejný" },
+];
+const 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;
+    return (react_1.default.createElement("div", { className: "pb-2 pt-4" },
+        react_1.default.createElement(tabs_1.Tabs, null,
+            react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Z\u00E1kladn\u00ED" },
+                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, { name: "type", label: "Typ", options: config.allowedTypes, isReadOnly: !!id, isRequired: true, control: control }))),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(text_input_1.TextInput, { name: "name", label: "Nadpis", isRequired: true, control: control })),
+                    !((_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, { name: "publishedAt", label: "Datum publikace", isRequired: true, control: control }))),
+                    !((_b = config.hide) === null || _b === void 0 ? void 0 : _b.perex) && (react_1.default.createElement("div", null,
+                        react_1.default.createElement(textarea_1.Textarea, { name: "perex", label: "Perex", rows: 3, control: control }))),
+                    !((_c = config.hide) === null || _c === void 0 ? void 0 : _c.author) && (react_1.default.createElement("div", null,
+                        react_1.default.createElement(combobox_1.Combobox, { name: "author", label: "Autor", loadOptions: (term) => (0, api_1.autocomplete)(null, { name: "content-author" }, { term }).then((r) => r.data), control: control }))),
+                    !((_d = config.hide) === null || _d === void 0 ? void 0 : _d.category) && (react_1.default.createElement("div", null,
+                        react_1.default.createElement(combobox_1.Combobox, { name: "category", label: "Kategorie", loadOptions: (term) => (0, api_1.autocomplete)(null, { name: "content-category" }, { term }).then((r) => r.data), control: control }))),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(multi_combobox_1.MultiCombobox, { name: "tags", label: "Tagy", loadOptions: (term) => (0, api_1.autocomplete)(null, { name: "content-tag" }, { term }).then((r) => r.data), control: control })),
+                    !((_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, { id: "image", name: "image", label: "Hlavn\u00ED obr\u00E1zek", onUploadFile: on_upload_file_1.onUploadFile, control: control }))),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(checkbox_input_1.CheckboxInput, { name: "active", label: "Aktivn\u00ED", control: control })),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(select_1.Select, { name: "visibilityLevel", label: "Viditelnost", options: options, isRequired: true, control: control })))),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { title: "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, { name: "seo.name", label: "Slug", helperText: "Slug = unik\u00E1tn\u00ED koncovka URL adresy", control: control })),
+                    !((_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, { name: "seo.title", label: "Nadpis", control: control }))),
+                    !((_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, { name: "seo.description", label: "Popis", control: control }))),
+                    !((_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, { name: "seo.ogTitle", label: "OG nadpis", helperText: "Nadpis kter\u00FD bude zobrazen p\u0159i sd\u00EDlen\u00ED na Facebooku, ...", control: control }))),
+                    !((_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, { name: "seo.ogDescription", label: "OG popis", helperText: "Popis kter\u00FD bude zobrazen p\u0159i sd\u00EDlen\u00ED na Facebooku, ...", control: control }))),
+                    !((_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, { id: "seo.ogImage", name: "seo.ogImage", label: "OG obr\u00E1zek", helperText: "Obr\u00E1zek kter\u00FD bude zobrazen p\u0159i sd\u00EDlen\u00ED na Facebooku, ...", onUploadFile: on_upload_file_1.onUploadFile, control: control })))))),
+        children));
+};
+exports.FormRootFields = FormRootFields;

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

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

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

@@ -0,0 +1,54 @@
+"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.Form = void 0;
+const react_1 = __importStar(require("react"));
+const form_1 = require("@uxf/form/form");
+const form_root_fields_1 = require("./form-root-fields");
+const content_field_1 = require("../content-field");
+const react_hook_form_1 = require("react-hook-form");
+const details_visibility_context_1 = require("../context/details-visibility-context");
+const use_viewport_height_1 = require("../../../utils/use-viewport-height");
+const constants_1 = require("../constants");
+const 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);
+    (0, react_1.useEffect)(() => {
+        const header = document.getElementById(constants_1.CONTENT_BUILDER_PAGE_HEADER_ID);
+        if (header) {
+            setHeaderHeight(header.offsetHeight);
+        }
+    }, []);
+    const height = viewportHeight === "100vh" ? "100vh" : `${viewportHeight}px`;
+    return (react_1.default.createElement(form_1.Form, { formApi: formApi, id: constants_1.CONTENT_BUILDER_FORM_ID, onSubmit: props.onSubmit },
+        react_1.default.createElement("div", { className: "flex flex-col-reverse overflow-hidden xl:h-[calc(var(--viewportHeight)-var(--headerHeight))] xl:flex-row", style: { "--viewportHeight": height, "--headerHeight": `${headerHeight}px` } },
+            react_1.default.createElement(details_visibility_context_1.DetailsVisibilityProvider, null,
+                react_1.default.createElement(content_field_1.ContentField, { name: "content", contentComponents: props.config.contentComponents, control: formApi.control })),
+            react_1.default.createElement("div", { className: "basis-[500px] bg-white px-4 pb-8 dark:bg-gray-950 xl:overflow-y-auto" },
+                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, id: props.id, control: formApi.control })))));
+};
+exports.Form = Form;

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface HeaderProps {
+    title: string;
+}
+export declare const Header: FC<HeaderProps>;
+export {};

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

@@ -0,0 +1,44 @@
+"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.Header = void 0;
+const react_1 = __importStar(require("react"));
+const layout_container_1 = require("../../../lib/layout/layout-container");
+const constants_1 = require("../constants");
+const button_group_1 = require("@uxf/ui/button-group");
+const button_1 = require("@uxf/ui/button");
+const Header = (props) => {
+    const [language, setLanguage] = (0, react_1.useState)("cs");
+    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: "xs", variant: language === "cs" ? "default" : "white" }, "CS"),
+                    react_1.default.createElement(button_1.Button, { onClick: () => setLanguage("en"), size: "xs", variant: language === "en" ? "default" : "white" }, "EN"),
+                    react_1.default.createElement(button_1.Button, { onClick: () => setLanguage("de"), size: "xs", variant: language === "de" ? "default" : "white" }, "DE")),
+                react_1.default.createElement("button", { form: constants_1.CONTENT_BUILDER_FORM_ID, className: "uxf-button uxf-button--color-default uxf-button--size-default uxf-button--variant-default is-hoverable", type: "submit" }, "Ulo\u017Eit")))));
+};
+exports.Header = Header;

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

@@ -0,0 +1,2 @@
+export declare const CONTENT_BUILDER_FORM_ID = "content-builder-form";
+export declare const CONTENT_BUILDER_PAGE_HEADER_ID = "content-builder-page-header";

package/pages/content-builder/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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";

package/pages/{ContentBuilder/content/FeatureSection.d.ts → content-builder/content/feature-section.d.ts}

@@ -1,7 +1,7 @@
 import { WysiwygContent } from "@uxf/wysiwyg";
-import { FileResponse } from "../../../ui/FileUploadInput";
 import { Content, ContentComponent, ContentProps } from "../types";
-export declare type FeatureSectionFormData = {
+import { FileResponse } from "../../../api";
+export type FeatureSectionFormData = {
     title: string;
     subtitle?: string;
     features: Array<{
@@ -11,7 +11,7 @@ export declare type FeatureSectionFormData = {
         ctaUrl?: string;
     }>;
 };
-declare type Props = ContentProps;
-export declare type FeatureSectionContent = Content<"featureSection", FeatureSectionFormData>;
+type Props = ContentProps;
+export type FeatureSectionContent = Content<"featureSection", FeatureSectionFormData>;
 export declare const FeatureSection: ContentComponent<FeatureSectionContent, Props>;
 export {};

package/pages/content-builder/content/feature-section.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureSection = void 0;
+const text_input_1 = require("@uxf/form/text-input");
+const react_1 = __importDefault(require("react"));
+const content_header_1 = require("../content-header");
+const file_input_1 = require("@uxf/form/file-input");
+const button_1 = require("@uxf/ui/button");
+const react_hook_form_1 = require("react-hook-form");
+const on_upload_dropzone_file_1 = require("../../../forms/utils/on-upload-dropzone-file");
+const wysiwyg_input_1 = require("../../../forms/components/wysiwyg-input");
+const details_visibility_context_1 = require("../context/details-visibility-context");
+const FeatureSection = (props) => {
+    const [visibility] = (0, details_visibility_context_1.useDetailsVisibilityForSection)(props.id);
+    const { fields, remove, append } = (0, react_hook_form_1.useFieldArray)({ control: props.control, name: `${props.name}.features` });
+    return (react_1.default.createElement("div", { className: "divide-y divide-lightBorder dark:divide-darkBorder" },
+        react_1.default.createElement(content_header_1.ContentHeader, { ...props }),
+        visibility && (react_1.default.createElement("div", { className: "p-4" },
+            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, { name: `${props.name}.title`, label: "Nadpis", isRequired: true, control: props.control })),
+                react_1.default.createElement("div", { className: "col-span-12 sm:col-span-6" },
+                    react_1.default.createElement(text_input_1.TextInput, { name: `${props.name}.subtitle`, label: "Podnadpis", control: props.control })),
+                react_1.default.createElement("div", { className: "col-span-12" },
+                    fields.map((field, index) => {
+                        const handleRemove = () => {
+                            // eslint-disable-next-line no-alert
+                            if (confirm("Opravdu chcete smazat feature?")) {
+                                remove(index);
+                            }
+                        };
+                        return (react_1.default.createElement("div", { key: field.id, className: "mb-8 border-l-2 border-primary pl-8" },
+                            react_1.default.createElement("div", { className: "flex justify-between" },
+                                react_1.default.createElement("h4", { className: "uxf-typo-h6" },
+                                    "Feature #",
+                                    index + 1),
+                                index > 0 ? (react_1.default.createElement("div", null,
+                                    react_1.default.createElement(button_1.Button, { size: "sm", variant: "white", onClick: handleRemove }, "Smazat feature"))) : (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, { name: `${props.name}.features[${index}].title`, label: "Nadpis", isRequired: true, control: props.control })),
+                                react_1.default.createElement("div", { className: "col-span-12 sm:col-span-6" },
+                                    react_1.default.createElement(file_input_1.FileInput, { id: `${props.name}.features[${index}].image`, name: `${props.name}.features[${index}].image`, label: "Obr\u00E1zek", onUploadFile: on_upload_dropzone_file_1.onUploadDropzoneFile, control: props.control })),
+                                react_1.default.createElement("div", { className: "col-span-12" },
+                                    react_1.default.createElement(wysiwyg_input_1.WysiwygInput, { name: `${props.name}.features[${index}].text`, control: props.control })),
+                                react_1.default.createElement("div", { className: "col-span-12" },
+                                    react_1.default.createElement(text_input_1.TextInput, { name: `${props.name}.features[${index}].ctaUrl`, label: "CTA url", control: props.control })))));
+                    }),
+                    react_1.default.createElement(button_1.Button, { variant: "white", size: "sm", onClick: () => append({ title: "" }) }, "P\u0159idat feature")))))));
+};
+exports.FeatureSection = FeatureSection;
+exports.FeatureSection.getConfig = () => ({
+    type: "featureSection",
+    label: "Feature sekce",
+});

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

@@ -0,0 +1,9 @@
+import { Content, ContentComponent, ContentProps } from "../types";
+import { FileResponse } from "../../../api";
+export type GalleryFormData = {
+    images?: FileResponse[];
+};
+export type GalleryContent = Content<"gallery", GalleryFormData>;
+type Props = ContentProps;
+export declare const Gallery: ContentComponent<GalleryContent, Props>;
+export {};

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Gallery = void 0;
+const react_1 = __importDefault(require("react"));
+const content_header_1 = require("../content-header");
+const dropzone_input_1 = require("@uxf/form/dropzone/dropzone-input");
+const dropzone_list_1 = require("@uxf/form/dropzone/dropzone-list");
+const on_upload_dropzone_file_1 = require("../../../forms/utils/on-upload-dropzone-file");
+const details_visibility_context_1 = require("../context/details-visibility-context");
+const Gallery = (props) => {
+    const [visibility] = (0, details_visibility_context_1.useDetailsVisibilityForSection)(props.id);
+    return (react_1.default.createElement("div", { className: "divide-y divide-lightBorder dark:divide-darkBorder" },
+        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, { name: `${props.name}.images`, control: props.control, onUploadFile: on_upload_dropzone_file_1.onUploadDropzoneFile }),
+            react_1.default.createElement(dropzone_list_1.DropzoneList, { name: `${props.name}.images`, control: props.control })))));
+};
+exports.Gallery = Gallery;
+exports.Gallery.getConfig = () => ({
+    type: "gallery",
+    label: "Galerie",
+});

package/pages/{ContentBuilder/content/HeroSection.d.ts → content-builder/content/hero-section.d.ts}

@@ -1,12 +1,12 @@
 import { WysiwygContent } from "@uxf/wysiwyg";
 import { Content, ContentComponent, ContentProps } from "../types";
-export declare type HeroSectionFormData = {
+export type HeroSectionFormData = {
     title: string;
     subtitle?: string;
     text?: WysiwygContent;
     ctaUrl?: string;
 };
-declare type Props = ContentProps;
-export declare type HeroSectionContent = Content<"heroSection", HeroSectionFormData>;
+type Props = ContentProps;
+export type HeroSectionContent = Content<"heroSection", HeroSectionFormData>;
 export declare const HeroSection: ContentComponent<HeroSectionContent, Props>;
 export {};

package/pages/content-builder/content/hero-section.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroSection = void 0;
+const text_input_1 = require("@uxf/form/text-input");
+const react_1 = __importDefault(require("react"));
+const content_header_1 = require("../content-header");
+const wysiwyg_input_1 = require("../../../forms/components/wysiwyg-input");
+const details_visibility_context_1 = require("../context/details-visibility-context");
+const HeroSection = (props) => {
+    const [visibility] = (0, details_visibility_context_1.useDetailsVisibilityForSection)(props.id);
+    return (react_1.default.createElement("div", { className: "divide-y divide-lightBorder dark:divide-darkBorder" },
+        react_1.default.createElement(content_header_1.ContentHeader, { ...props }),
+        visibility && (react_1.default.createElement("div", { className: "p-4" },
+            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, { name: `${props.name}.title`, label: "Nadpis", isRequired: true, control: props.control })),
+                react_1.default.createElement("div", { className: "col-span-12 sm:col-span-6" },
+                    react_1.default.createElement(text_input_1.TextInput, { name: `${props.name}.subtitle`, label: "Podnadpis", control: props.control })),
+                react_1.default.createElement("div", { className: "col-span-12" },
+                    react_1.default.createElement(wysiwyg_input_1.WysiwygInput, { name: `${props.name}.text`, control: props.control })),
+                react_1.default.createElement("div", { className: "col-span-12" },
+                    react_1.default.createElement(text_input_1.TextInput, { name: `${props.name}.ctaUrl`, label: "CTA url", control: props.control })))))));
+};
+exports.HeroSection = HeroSection;
+exports.HeroSection.getConfig = () => ({
+    type: "heroSection",
+    label: "Hero sekce",
+});

package/pages/{ContentBuilder/content/People.d.ts → content-builder/content/people.d.ts}

@@ -1,6 +1,6 @@
 import { Content, ContentComponent, ContentProps } from "../types";
-import { FileResponse } from "../../../ui/FileUploadInput";
-export declare type PersonFormData = {
+import { FileResponse } from "../../../api";
+export type PersonFormData = {
     name?: string;
     subtitle?: string;
     image?: FileResponse;
@@ -8,10 +8,10 @@ export declare type PersonFormData = {
     phone?: string;
     email?: string;
 };
-export declare type PeopleFormData = {
+export type PeopleFormData = {
     people: PersonFormData[];
 };
-export declare type PeopleContent = Content<"people", PeopleFormData>;
-declare type Props = ContentProps;
+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,56 @@
+"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 react_1 = __importDefault(require("react"));
+const content_header_1 = require("../content-header");
+const react_hook_form_1 = require("react-hook-form");
+const button_1 = require("@uxf/ui/button");
+const text_input_1 = require("@uxf/form/text-input");
+const textarea_1 = require("@uxf/form/textarea");
+const file_input_1 = require("@uxf/form/file-input");
+const on_upload_file_1 = require("../../../forms/utils/on-upload-file");
+const details_visibility_context_1 = require("../context/details-visibility-context");
+const People = (props) => {
+    const [visibility] = (0, details_visibility_context_1.useDetailsVisibilityForSection)(props.id);
+    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-y divide-lightBorder dark:divide-darkBorder" },
+        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("Opravdu chcete smazat osobu?")) {
+                        remove(index);
+                    }
+                };
+                return (react_1.default.createElement("div", { key: field.id, className: "mb-8 border-l-2 border-primary pl-8" },
+                    react_1.default.createElement("div", { className: "flex justify-between" },
+                        react_1.default.createElement("h4", { className: "uxf-typo-h6 mb-3 pt-1" },
+                            "Osoba #",
+                            index + 1),
+                        index > 0 ? (react_1.default.createElement("div", null,
+                            react_1.default.createElement(button_1.Button, { size: "sm", variant: "white", onClick: handleRemove }, "Smazat osobu"))) : (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, { name: `${props.name}.people.${index}.name`, label: "Jm\u00E9no", isRequired: true, control: props.control })),
+                        react_1.default.createElement("div", { className: "col-span-12 sm:col-span-6" },
+                            react_1.default.createElement(file_input_1.FileInput, { id: `${props.name}.people.${index}.image`, name: `${props.name}.people.${index}.image`, label: "Obr\u00E1zek", control: props.control, onUploadFile: on_upload_file_1.onUploadFile })),
+                        react_1.default.createElement("div", { className: "col-span-12" },
+                            react_1.default.createElement(text_input_1.TextInput, { name: `${props.name}.people.${index}.subtitle`, label: "Popisek", control: props.control })),
+                        react_1.default.createElement("div", { className: "col-span-12" },
+                            react_1.default.createElement(textarea_1.Textarea, { name: `${props.name}.people.${index}.text`, label: "Text", rows: 2, control: props.control })),
+                        react_1.default.createElement("div", { className: "col-span-6" },
+                            react_1.default.createElement(text_input_1.TextInput, { name: `${props.name}.people.${index}.phone`, label: "Telefon", type: "tel", control: props.control })),
+                        react_1.default.createElement("div", { className: "col-span-6" },
+                            react_1.default.createElement(text_input_1.TextInput, { name: `${props.name}.people.${index}.email`, label: "E-mail", type: "email", control: props.control })))));
+            }),
+            react_1.default.createElement(button_1.Button, { variant: "white", size: "sm", onClick: () => append({ name: "" }) }, "P\u0159idat osobu")))));
+};
+exports.People = People;
+exports.People.getConfig = () => ({
+    type: "people",
+    label: "Lidé",
+});

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

@@ -0,0 +1,15 @@
+import { Content, ContentComponent, ContentProps } from "../types";
+import { WysiwygEditorProps } from "@uxf/wysiwyg/wysiwyg-editor";
+import { WysiwygPlugin } from "@uxf/wysiwyg";
+import { CreateAllPluginsOptions } from "@uxf/wysiwyg/create-all-plugins-with-ui";
+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,28 @@
+"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 react_1 = __importDefault(require("react"));
+const content_header_1 = require("../content-header");
+const wysiwyg_input_1 = require("../../../forms/components/wysiwyg-input");
+const details_visibility_context_1 = require("../context/details-visibility-context");
+const Wysiwyg = (props) => {
+    const [visibility] = (0, details_visibility_context_1.useDetailsVisibilityForSection)(props.id);
+    return (react_1.default.createElement("div", { className: "divide-y divide-lightBorder dark:divide-darkBorder" },
+        react_1.default.createElement(content_header_1.ContentHeader, { id: props.id, control: props.control, name: props.name, index: props.index, onRemove: props.onRemove, TypeInputProps: props.TypeInputProps, title: props.title }),
+        visibility && (react_1.default.createElement(wysiwyg_input_1.WysiwygInput, { allPluginsOptions: props.allPluginsOptions, plugins: props.plugins, editorProps: props.editorProps, control: props.control, isRequired: true, label: "Text", name: `${props.name}.content`, placeholder: "Zadejte text", className: "p-4" }))));
+};
+exports.Wysiwyg = Wysiwyg;
+const defaultGetConfig = () => ({
+    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/{ContentBuilder/ContentBuilderPage.d.ts → content-builder/content-builder-page.d.ts}

@@ -1,2 +1,2 @@
 import { Content, ContentBuilderConfig } from "./types";
-export declare const ContentBuilderPage: <T extends Content<string, any>>(config: ContentBuilderConfig<T>) => import("next").NextComponentType<import("../../deprecated/types/App").IAppContext, object, object>;
+export declare const ContentBuilderPage: <T extends Content<string, any>>(config: ContentBuilderConfig<T>) => import("next").NextComponentType<import("../../deprecated/types/app").IAppContext, object, object>;