@it-consultis/page-builder 1.1.34

package/store/index.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTemporalEditorStore = exports.useObjectStorage = exports.useEditorStore = exports.useConfigStorageQueryClient = exports.useConfigStorage = exports.createEditorStore = exports.EditorContext = void 0;
+var _reactQuery = require("@tanstack/react-query");
+var _react = require("react");
+var _zundo = require("zundo");
+var _zustand = require("zustand");
+var _editorStoreCore = _interopRequireDefault(require("./editor-store-core"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const createEditorStore = (initialState = {}) => {
+  const createTemporalOptions = () => ({
+    partialize: state => ({
+      data: state.data
+    }),
+    equality: (pastState, futureState) => {
+      const aId = pastState.data.map(block => `${block.id}:${block.meta.changed}`).join('/');
+      const bId = futureState.data.map(block => `${block.id}:${block.meta.changed}`).join('/');
+      return aId === bId;
+    },
+    limit: 20
+  });
+  const temporalOptions = createTemporalOptions();
+  return (0, _zustand.create)()((0, _zundo.temporal)((0, _editorStoreCore.default)(initialState), temporalOptions));
+};
+exports.createEditorStore = createEditorStore;
+const EditorContext = exports.EditorContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const rootEditorStore = createEditorStore();
+const useEditorStore = selector => {
+  const store = (0, _react.useContext)(EditorContext) || rootEditorStore;
+  return (0, _zustand.useStore)(store, selector);
+};
+exports.useEditorStore = useEditorStore;
+const useTemporalEditorStore = selector => {
+  const store = (0, _react.useContext)(EditorContext) || rootEditorStore;
+  return (0, _zustand.useStore)(store.temporal, selector);
+};
+exports.useTemporalEditorStore = useTemporalEditorStore;
+const useObjectStorage = () => {
+  return useEditorStore(state => state.storage?.object);
+};
+exports.useObjectStorage = useObjectStorage;
+const useConfigStorage = () => {
+  // eslint-disable-next-line no-underscore-dangle
+  let _configStorage;
+  const {
+    storage
+  } = useEditorStore(state => state);
+  const isStorageUndefined = typeof storage === 'undefined';
+  const {
+    config: configStorage = null
+  } = isStorageUndefined ? {} : storage;
+  const objectStorage = useObjectStorage();
+  if (configStorage) {
+    return configStorage;
+  }
+  if (isStorageUndefined && !objectStorage) {
+    return undefined;
+  }
+  if (!_configStorage) {
+    const prefix = '.config/mui-edit/';
+    const getFilename = id => `${id}.json`;
+    _configStorage = {
+      async get(id) {
+        if (!objectStorage) {
+          return Promise.resolve([]);
+        }
+        const url = await objectStorage.objectUrl({
+          key: `${prefix}${getFilename(id)}`
+        });
+        const response = await fetch(url);
+        if (response.status !== 200) {
+          throw new Error(`Fail to get config data for config "${id}"`);
+        }
+        return await response.json();
+      },
+      async list() {
+        if (!objectStorage) {
+          return Promise.resolve([]);
+        }
+        const results = await objectStorage.ls({
+          prefix
+        });
+        return results.objects.map(o => o.name.slice(0, -5));
+      },
+      async save(config) {
+        if (!objectStorage) {
+          throw new Error('Object storage is not defined');
+        }
+        const filename = getFilename(config.id);
+        const file = new File([JSON.stringify({
+          id: config.id,
+          revisionId: (config.revisionId || 0) + 1,
+          data: config.data
+        })], filename);
+        await objectStorage.upload({
+          file,
+          key: `${prefix}${filename}`,
+          acl: 'private',
+          overwrite: true
+        });
+        return config;
+      },
+      async delete(id) {
+        if (!objectStorage) {
+          throw new Error('Object storage is not defined');
+        }
+        await objectStorage.delete({
+          key: `${prefix}${getFilename(id)}`
+        });
+      }
+    };
+  }
+  return _configStorage;
+};
+exports.useConfigStorage = useConfigStorage;
+const useConfigStorageQueryClient = () => {
+  const ErrorConfigStorageNotDefined = new Error('Config storage is not defined');
+  const storage = useConfigStorage();
+  const queryClient = (0, _reactQuery.useQueryClient)();
+  const getStorage = () => {
+    if (!storage) {
+      throw ErrorConfigStorageNotDefined;
+    }
+    return storage;
+  };
+  return {
+    useGetQuery(id, options = {}) {
+      const query = (0, _reactQuery.useQuery)({
+        queryKey: ['configStorage.get', id],
+        async queryFn() {
+          const config = await getStorage().get(id);
+          return config;
+        },
+        ...options
+      });
+      return query;
+    },
+    useListQuery(options = {}) {
+      return (0, _reactQuery.useQuery)({
+        queryKey: ['configStorage.list'],
+        queryFn() {
+          return getStorage().list();
+        },
+        ...options
+      });
+    },
+    useDeleteMutation(options) {
+      return (0, _reactQuery.useMutation)({
+        async mutationFn(id) {
+          await getStorage().delete(id);
+          return id;
+        },
+        onSuccess(id) {
+          queryClient.invalidateQueries(['configStorage.list', 'configStorage.get', id]);
+          if (options?.onSuccess) options.onSuccess(id);
+        }
+      });
+    },
+    useSaveMutation(options) {
+      return (0, _reactQuery.useMutation)({
+        mutationFn(config) {
+          if (!storage) {
+            throw ErrorConfigStorageNotDefined;
+          }
+          return storage.save(config);
+        },
+        onSuccess(config) {
+          queryClient.invalidateQueries(['configStorage.list', 'configStorage.get', config.id]);
+          if (options?.onSuccess) options.onSuccess(config);
+        }
+      });
+    }
+  };
+};
+exports.useConfigStorageQueryClient = useConfigStorageQueryClient;

package/theme.d.ts

@@ -0,0 +1,10 @@
+declare module '@mui/material/styles' {
+    interface Palette {
+        header?: Record<string, string>;
+    }
+    interface PaletteOptions {
+        header?: Record<string, string>;
+    }
+}
+declare const theme: import("@mui/material/styles").Theme;
+export default theme;

package/theme.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styles = require("@mui/material/styles");
+const theme = (0, _styles.createTheme)();
+var _default = exports.default = theme;

package/translation/cn.json

@@ -0,0 +1,29 @@
+{
+  "editor": {
+    "components": "组件",
+    "layers": "图层",
+    "content": "内容",
+    "advanced": "高级",
+    "settings": "设置",
+    "clone": "复制",
+    "delete": "删除",
+    "cancel": "取消",
+    "confirm": "确定",
+    "clearAll": "清空所有",
+    "clearConfirm": "确定要清空所有内容吗？",
+    "importFromTemplate": "从模板导入",
+    "saveAsTemplate": "保存为模板",
+    "importData": "导入数据",
+    "exportData": "导出数据",
+    "copyToClipboard": "复制到剪贴板",
+    "templateName": "模板名称",
+    "templateId": "模板ID",
+    "edit": "编辑",
+    "save": "保存",
+    "noTemplatesFound": "没有可用模板",
+    "noAdvanced": "暂无高级样式/设置",
+    "noLayers": "暂无图层, 添加一些组件吧",
+    "searchPlaceholder": "搜索组件名称",
+    "noBlockSelected": "选择一个组件编辑"
+  }
+}

package/translation/en.json

@@ -0,0 +1,29 @@
+{
+  "editor": {
+    "components": "Components",
+    "layers": "Layers",
+    "content": "Content",
+    "advanced": "Advanced",
+    "settings": "Settings",
+    "clone": "Clone",
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "clearAll": "Clear All",
+    "clearConfirm": "Are you sure you want to clear all content?",
+    "importFromTemplate": "Import from Template",
+    "saveAsTemplate": "Save as Template",
+    "importData": "Import Data",
+    "exportData": "Export Data",
+    "copyToClipboard": "Copy to Clipboard",
+    "templateName": "Template Name",
+    "templateId": "Template ID",
+    "edit": "Edit",
+    "save": "Save",
+    "noTemplatesFound": "No templates found.",
+    "noAdvanced": "No Advanced style/settings available yet",
+    "noLayers": "No layers yet. Add some blocks to see the structure here.",
+    "searchPlaceholder": "Search components name",
+    "noBlockSelected": "Select a block to edit its properties"
+  }
+}

package/translation/fr.json

@@ -0,0 +1,31 @@
+{
+  "editor": {
+    "components": "Composants",
+    "layers": "Calques",
+    "content": "Contenu",
+    "advanced": "Avancé",
+    "settings": "Paramètres",
+    "clone": "Dupliquer",
+    "delete": "Supprimer",
+    "cancel": "Annuler",
+    "confirm": "Confirmer",
+    "clearAll": "Tout effacer",
+    "clearConfirm": "Êtes-vous sûr de vouloir effacer tout le contenu ?",
+    "importFromTemplate": "Importer depuis un modèle",
+    "saveAsTemplate": "Enregistrer comme modèle",
+    "importData": "Importer des données",
+    "exportData": "Exporter des données",
+    "copyToClipboard": "Copier dans le presse-papiers",
+    "templateName": "Nom du modèle",
+    "templateId": "ID du modèle",
+    "edit": "Modifier",
+    "save": "Enregistrer",
+    "noTemplatesFound": "Aucun modèle trouvé.",
+    "noAdvanced": "Aucun style/paramètres disponibles pour le moment",
+    "noLayers": "Aucun calque pour le moment. Ajoutez des blocs pour voir la structure ici.",
+    "searchPlaceholder": "Rechercher un composant",
+    "noBlockSelected": "Sélectionnez un bloc pour modifier ses propriétés"
+  }
+}
+
+

package/translation/index.d.ts

@@ -0,0 +1,6 @@
+import { LocaleType, TMessage } from './types';
+declare const translations: Record<LocaleType, TMessage>;
+export declare const getTranslations: (locale: LocaleType) => TMessage;
+export declare const getSupportedLocales: () => LocaleType[];
+export { type LocaleType, type TMessage, type TranslationKey } from './types';
+export { translations };

package/translation/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translations = exports.getTranslations = exports.getSupportedLocales = void 0;
+var _cn = _interopRequireDefault(require("./cn.json"));
+var _en = _interopRequireDefault(require("./en.json"));
+var _fr = _interopRequireDefault(require("./fr.json"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const translations = exports.translations = {
+  en: _en.default,
+  cn: _cn.default,
+  fr: _fr.default
+};
+const getTranslations = locale => {
+  return translations[locale] || translations.en;
+};
+exports.getTranslations = getTranslations;
+const getSupportedLocales = () => {
+  return Object.keys(translations);
+};
+exports.getSupportedLocales = getSupportedLocales;

package/translation/types.d.ts

@@ -0,0 +1,13 @@
+import en from './en.json';
+export type TMessage = typeof en;
+export type LocaleType = 'en' | 'cn' | 'fr';
+export interface LanguageConfig {
+    en: TMessage;
+    cn: TMessage;
+    fr: TMessage;
+}
+type NestedKeyPaths<T, Prefix extends string = ''> = {
+    [K in keyof T]: T[K] extends object ? K extends string ? `${Prefix}${K}` | NestedKeyPaths<T[K], `${Prefix}${K}.`> : never : K extends string ? `${Prefix}${K}` : never;
+}[keyof T];
+export type TranslationKey = NestedKeyPaths<TMessage>;
+export {};

package/translation/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/types/Block.d.ts

@@ -0,0 +1,22 @@
+export interface BlockMeta {
+    changed: number;
+    created: number;
+}
+export type RelationshipItem = {
+    id: string;
+    type: string;
+    meta?: any;
+};
+export interface Relationship<D extends RelationshipItem = RelationshipItem> {
+    data: D | D[];
+}
+export interface Block<D = any, S = any> {
+    id: string;
+    type: string;
+    data: D;
+    settings: S;
+    meta: BlockMeta;
+    collapse?: boolean;
+    mpBlock?: boolean;
+    top?: boolean;
+}

package/types/Block.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/types/BlockType.d.ts

@@ -0,0 +1,50 @@
+import { LoadableComponent } from '@loadable/component';
+import React from 'react';
+import { z } from 'zod';
+import { ThrottleAndDebounce } from '../types';
+import { Block } from './Block';
+export interface EditFormProps<D, S> extends Partial<Block<D, S>> {
+    id: string;
+    data: D;
+    onChange(dataOrFn: D | ((prevData: D) => D)): void;
+    onDebouncedChange: ThrottleAndDebounce;
+    onThrottledChange: ThrottleAndDebounce;
+    onClose(): void;
+}
+export interface SettingsFormProps<D, S> extends Partial<Block<D, S>> {
+    id: string;
+    data: D;
+    settings: S;
+    onChange(settingsOrFn: S | ((prevSettings: S) => S)): void;
+    onDebouncedChange: ThrottleAndDebounce;
+    onThrottledChange: ThrottleAndDebounce;
+}
+export interface ViewProps<D, S, C = Record<string, any>> extends Block<D, S> {
+    contentEditable?: boolean;
+    onDataChange(data: D): void;
+    onSettingsChange(settings: S): void;
+    context?: C;
+}
+export interface BlockType<D = any, S = any> {
+    id: string;
+    icon?: string;
+    preview?: string;
+    category?: 'Banner' | 'Tool' | 'Card' | 'Text' | 'Media' | 'Design' | 'Brand';
+    collapse?: boolean;
+    label: string;
+    defaultData: D & {
+        blockName: string;
+    };
+    defaultSettings: S;
+    getDataSchema?(): Promise<z.Schema>;
+    getSettingsSchema?(): Promise<z.Schema>;
+    blockLabel(data: D): React.ReactNode;
+    settingsForm: LoadableComponent<SettingsFormProps<D, S>> | React.FunctionComponent<SettingsFormProps<D, S>> | null;
+    editForm: LoadableComponent<EditFormProps<D, S>> | React.FunctionComponent<EditFormProps<D, S>> | null;
+    view: LoadableComponent<ViewProps<D, S>> | React.FunctionComponent<ViewProps<D, S>> | null;
+    cardinality?: number;
+    disabled?: boolean;
+    suspense?: React.SuspenseProps;
+    mpBlock?: boolean;
+    top?: boolean;
+}

package/types/BlockType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/types/ConfigStorageAdapter.d.ts

@@ -0,0 +1,11 @@
+export interface Config<Data = any> {
+    id: string;
+    revisionId: number;
+    data: Data;
+}
+export interface ConfigStorageAdapter {
+    get<Data>(id: string): Promise<Config<Data> | null>;
+    delete(id: string): Promise<void>;
+    list(): Promise<string[]>;
+    save(config: Config): Promise<typeof config>;
+}

package/types/ConfigStorageAdapter.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/types/ObjectStorageAdapter.d.ts

@@ -0,0 +1,68 @@
+export interface StorageObject {
+    id: string;
+    type: 'file';
+    key: string;
+    size: number;
+    name: string;
+    lastModified: string;
+}
+export interface StorageObjectMeta {
+    name: string;
+    url: string;
+    uri: string;
+    contentType: string;
+    size: string;
+    md5?: string;
+    exif?: {
+        width: number;
+        height: number;
+    };
+}
+export interface Folder {
+    id: string;
+    type: 'folder';
+    prefix: string;
+    name: string;
+}
+export type LsResult = {
+    objects: StorageObject[];
+    folders: Folder[];
+    isTruncated: boolean;
+    count: number;
+};
+export interface ObjectStorageAdapter {
+    ls(args: {
+        prefix: string;
+    }): Promise<LsResult>;
+    upload(args: {
+        key: string;
+        file: File | Blob;
+        acl?: 'private' | 'public' | 'public-read';
+        overwrite?: boolean;
+        onProgress?: XMLHttpRequestUpload['onprogress'];
+        onReady?(xhr: XMLHttpRequest): void;
+    }): Promise<string>;
+    mkdir(args: {
+        key: string;
+    }): Promise<void>;
+    rename(args: {
+        source: string;
+        destination: string;
+    }): Promise<void>;
+    objectUrl(args: {
+        key: string;
+        expires?: number;
+    }): Promise<string>;
+    imagePreviewUrl(args: {
+        key: string;
+        expires?: number;
+        width: number;
+    }): Promise<string>;
+    objectMeta(args: {
+        key: string;
+    }): Promise<StorageObjectMeta>;
+    delete(args: {
+        key: string;
+    }): Promise<void>;
+}
+export default ObjectStorageAdapter;

package/types/ObjectStorageAdapter.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/types/index.d.ts

@@ -0,0 +1,5 @@
+export { Block, BlockMeta, Relationship, RelationshipItem } from './Block';
+export { BlockType, EditFormProps, SettingsFormProps, ViewProps } from './BlockType';
+export { Config, ConfigStorageAdapter } from './ConfigStorageAdapter';
+export { ObjectStorageAdapter, StorageObject, StorageObjectMeta } from './ObjectStorageAdapter';
+export { ThrottleAndDebounce, WrapFunction } from './throttle-and-debounce';

package/types/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Block", {
+  enumerable: true,
+  get: function () {
+    return _Block.Block;
+  }
+});
+Object.defineProperty(exports, "BlockMeta", {
+  enumerable: true,
+  get: function () {
+    return _Block.BlockMeta;
+  }
+});
+Object.defineProperty(exports, "BlockType", {
+  enumerable: true,
+  get: function () {
+    return _BlockType.BlockType;
+  }
+});
+Object.defineProperty(exports, "Config", {
+  enumerable: true,
+  get: function () {
+    return _ConfigStorageAdapter.Config;
+  }
+});
+Object.defineProperty(exports, "ConfigStorageAdapter", {
+  enumerable: true,
+  get: function () {
+    return _ConfigStorageAdapter.ConfigStorageAdapter;
+  }
+});
+Object.defineProperty(exports, "EditFormProps", {
+  enumerable: true,
+  get: function () {
+    return _BlockType.EditFormProps;
+  }
+});
+Object.defineProperty(exports, "ObjectStorageAdapter", {
+  enumerable: true,
+  get: function () {
+    return _ObjectStorageAdapter.ObjectStorageAdapter;
+  }
+});
+Object.defineProperty(exports, "Relationship", {
+  enumerable: true,
+  get: function () {
+    return _Block.Relationship;
+  }
+});
+Object.defineProperty(exports, "RelationshipItem", {
+  enumerable: true,
+  get: function () {
+    return _Block.RelationshipItem;
+  }
+});
+Object.defineProperty(exports, "SettingsFormProps", {
+  enumerable: true,
+  get: function () {
+    return _BlockType.SettingsFormProps;
+  }
+});
+Object.defineProperty(exports, "StorageObject", {
+  enumerable: true,
+  get: function () {
+    return _ObjectStorageAdapter.StorageObject;
+  }
+});
+Object.defineProperty(exports, "StorageObjectMeta", {
+  enumerable: true,
+  get: function () {
+    return _ObjectStorageAdapter.StorageObjectMeta;
+  }
+});
+Object.defineProperty(exports, "ThrottleAndDebounce", {
+  enumerable: true,
+  get: function () {
+    return _throttleAndDebounce.ThrottleAndDebounce;
+  }
+});
+Object.defineProperty(exports, "ViewProps", {
+  enumerable: true,
+  get: function () {
+    return _BlockType.ViewProps;
+  }
+});
+Object.defineProperty(exports, "WrapFunction", {
+  enumerable: true,
+  get: function () {
+    return _throttleAndDebounce.WrapFunction;
+  }
+});
+var _Block = require("./Block");
+var _BlockType = require("./BlockType");
+var _ConfigStorageAdapter = require("./ConfigStorageAdapter");
+var _ObjectStorageAdapter = require("./ObjectStorageAdapter");
+var _throttleAndDebounce = require("./throttle-and-debounce");

package/types/throttle-and-debounce.d.ts

@@ -0,0 +1,2 @@
+export type WrapFunction<T extends (...args: any[]) => void> = (fn: T) => T;
+export type ThrottleAndDebounce = WrapFunction<any>;

package/types/throttle-and-debounce.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/utils/block.d.ts

@@ -0,0 +1,16 @@
+import { Block } from '../types/Block';
+import { BlockType } from '../types/BlockType';
+export declare const createBlock: (blockType: BlockType) => Block<any, any>;
+/**
+ *
+ * @param block   -- Block type
+ * @param include -- blocks data will be including mp-nav when it is true,
+ * @param field   -- use type or id to filter the block
+ * @returns       -- return true if the block is mp-nav when include is true,
+ * otherwise execute the excluding logic
+ */
+export declare const blockFilteredMPNav: (block: Block | BlockType, include?: boolean, field?: 'type' | 'id') => boolean;
+declare const _default: {
+    createBlock: (blockType: BlockType<any, any>) => Block<any, any>;
+};
+export default _default;