@it-consultis/page-builder 1.1.34

package/package.json

@@ -0,0 +1,133 @@
+{
+  "name": "@it-consultis/page-builder",
+  "version": "1.1.34",
+  "license": "MIT",
+  "author": "itc",
+  "scripts": {
+    "tsc": "tsc --project ./tsconfig.prod.json",
+    "dev": "cross-env NODE_ENV=development webpack serve --progress --mode development",
+    "prebuild": "babel build.ts --out-file build.js",
+    "build": "cross-env NODE_ENV=production node build.js",
+    "build:dev": "cross-env NODE_ENV=development node build.js",
+    "release": "npm run prebuild && npm run build",
+    "postbuild": "rm build.js",
+    "npm-pack": "npm run build && cd ./dist && npm pack",
+    "npm-pack:dev": "npm run prebuild && npm run build:dev && cd ./dist && npm pack",
+    "sync-package-lock-file": "npm install --package-lock-only --ignore-scripts --no-audit --no-fund"
+  },
+  "keywords": [
+    "editor",
+    "react",
+    "block editor",
+    "react block editor"
+  ],
+  "peerDependencies": {
+    "@mui/icons-material": "^5.11.0",
+    "@mui/lab": "^5.0.0-alpha.118",
+    "@mui/material": "^5.11.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "resolutions": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@types/eslint": "^8.4.1"
+  },
+  "dependencies": {
+    "@mui/x-tree-view": "^7.28.1",
+    "@tanstack/react-query": "^4.36.1",
+    "itc-file-browser": "^0.0.15",
+    "itc-tailwindcss-container-queries": "^0.1.2",
+    "js-cookie": "^3.0.5",
+    "react-colorful": "^5.6.1",
+    "sortablejs": "^1.15.0",
+    "uuid": "^9.0",
+    "zod": "^3.20.6",
+    "zundo": "^2.3.0",
+    "zustand": "^4.3.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/register": "^7.21.0",
+    "@emotion/cache": "^11.10.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/roboto": "^4.5.8",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/lab": "^5.0.0-alpha.118",
+    "@mui/material": "^5.16.13",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+    "@types/babel__core": "^7.20.0",
+    "@types/js-cookie": "^3.0.6",
+    "@types/loadable__component": "^5.13.4",
+    "@types/node": "^18.14.0",
+    "@types/pica": "^9.0.1",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@types/shelljs": "^0.8.11",
+    "@types/sortablejs": "^1.10.7",
+    "@types/uuid": "^8.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
+    "autoprefixer": "^10.4.13",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-direct-import": "^1.0.0",
+    "babel-plugin-import": "^1.13.3",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "clsx": "^1.2.1",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^10.0.0",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.14.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "html-webpack-plugin": "^5.3.2",
+    "idb": "^7.1.1",
+    "pica": "^9.0.1",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^7.0.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-refresh": "^0.10.0",
+    "rimraf": "^3.0.2",
+    "shelljs": "^0.8.5",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.4.16",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1"
+  },
+  "overrides": {
+    "itc-file-browser": {
+      "react": "^18 || ^19",
+      "react-dom": "^18 || ^19"
+    },
+    "@tanstack/react-query": {
+      "react": "^18 || ^19",
+      "react-dom": "^18 || ^19"
+    },
+    "@mui/lab": {
+      "react": "^18 || ^19",
+      "react-dom": "^18 || ^19",
+      "@types/react": "^18 || ^19",
+      "@types/react-dom": "^18 || ^19"
+    },
+    "@mui/icons-material": {
+      "react": "^18 || ^19",
+      "react-dom": "^18 || ^19",
+      "@types/react": "^18 || ^19",
+      "@types/react-dom": "^18 || ^19"
+    }
+  }
+}

package/store/Provider.d.ts

@@ -0,0 +1,15 @@
+import { type EditorState } from '../store';
+import { LocaleType } from '../translation';
+import { Block, BlockType } from '../types';
+import { Theme } from '@mui/material/styles';
+import { QueryClient } from '@tanstack/react-query';
+import { type FC, type ReactNode } from 'react';
+declare const Provider: FC<{
+    children: ReactNode;
+    data?: Block[];
+    queryClient?: QueryClient;
+    mpNavigationProps?: BlockType | null;
+    locale?: LocaleType;
+    editorTheme?: Theme;
+} & Omit<Partial<EditorState>, 'data'>>;
+export default Provider;

package/store/Provider.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _I18nContext = require("../contexts/I18nContext");
+var _ = require("./");
+var _theme = _interopRequireDefault(require("../theme"));
+var _CssBaseline = _interopRequireDefault(require("@mui/material/CssBaseline/CssBaseline.js"));
+var _styles = require("@mui/material/styles");
+var _reactQuery = require("@tanstack/react-query");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Provider = props => {
+  const {
+    children,
+    queryClient: propQueryClient,
+    locale = 'en',
+    editorTheme = _theme.default,
+    ...editorState
+  } = props;
+  const editorStoreRef = (0, _react.useRef)(undefined);
+  if (!editorStoreRef.current) {
+    editorStoreRef.current = (0, _.createEditorStore)(editorState);
+  }
+  const queryClientRef = (0, _react.useRef)(undefined);
+  if (!queryClientRef.current) {
+    queryClientRef.current = propQueryClient || new _reactQuery.QueryClient();
+  }
+  const {
+    data,
+    allowedOrigins,
+    blockTypes,
+    ...other
+  } = editorState;
+  (0, _react.useEffect)(() => {
+    const editorStore = editorStoreRef.current;
+    const currentState = editorStore.getState();
+    if (data?.length) {
+      currentState.setData(data);
+    }
+    if (allowedOrigins) {
+      currentState.setAllowedOrigins(allowedOrigins);
+    }
+    if (blockTypes) {
+      currentState.setBlockTypes(blockTypes);
+    }
+    if (other) {
+      editorStore.getState().setMultipleStates(other);
+    }
+  }, [data, allowedOrigins, blockTypes, other]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_I18nContext.I18nProvider, {
+    locale: locale,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
+      theme: editorTheme,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("link", {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/icon?family=Material+Icons"
+      }), editorTheme === _theme.default && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EditorContext.Provider, {
+        value: editorStoreRef.current,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
+          client: queryClientRef.current,
+          children: children
+        })
+      })]
+    })
+  });
+};
+var _default = exports.default = Provider;

package/store/editor-store-core.d.ts

@@ -0,0 +1,4 @@
+import type { EditorState } from '../store/index';
+type InitialStateType = Partial<Omit<EditorState, 'setBlockTypes' | 'setData' | 'setAllowedOrigins' | 'setPreviewWidth' | 'setPreviewDeviceList' | 'setPreviewInstance'>>;
+declare const editorCoreWithDevtools: ({ includingMp, isMp, isFullScreen, isNested, cardinality, blockTypes, data, allowedOrigins, previewSrc, previewWidth, previewDeviceList, storage, theme }: InitialStateType) => import("zustand").StateCreator<EditorState, [], [["zustand/devtools", never]], EditorState>;
+export default editorCoreWithDevtools;

package/store/editor-store-core.js

@@ -0,0 +1,271 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _jsCookie = _interopRequireDefault(require("js-cookie"));
+var _uuid = require("uuid");
+var _zod = require("zod");
+var _middleware = require("zustand/middleware");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const options = {
+  name: 'ITC-page-builder',
+  trace: true,
+  traceLimit: 30
+};
+const editorCoreWithDevtools = ({
+  includingMp = null,
+  isMp = false,
+  isFullScreen = false,
+  isNested = false,
+  cardinality = -1,
+  blockTypes = [],
+  data = [],
+  allowedOrigins = [],
+  previewSrc = '',
+  previewWidth,
+  previewDeviceList = ['sm', 'md', 'lg', 'xl', 'full'],
+  storage,
+  theme = {}
+}) => (0, _middleware.devtools)((set, get) => ({
+  selectedBlockId: '',
+  setSelectedBlockId(id) {
+    set({
+      selectedBlockId: id
+    }, false, 'setSelectedBlockId');
+  },
+  theme,
+  editingBlockId: '',
+  setEditingBlockId(id) {
+    set({
+      editingBlockId: id
+    }, false, 'setEditingBlockId');
+  },
+  isFullScreen,
+  isMp,
+  setIsMp(_isMp) {
+    set({
+      isMp: _isMp
+    }, false, 'setIsMp');
+  },
+  includingMp,
+  setIncludingMp(_includingMp) {
+    set({
+      includingMp: _includingMp
+    }, false, 'setIncludingMp');
+  },
+  setIsFullScreen(_isFullScreen) {
+    set({
+      isFullScreen: _isFullScreen
+    }, false, 'setIsFullScreen');
+  },
+  isNested,
+  cardinality,
+  blockTypes,
+  setBlockTypes(newTypes) {
+    const prevTypes = get().blockTypes;
+    const prevTypesId = prevTypes.map(t => t.id).join('/');
+    const sortedNewTypes = newTypes.sort((a, b) => a.label < b.label ? -1 : 1);
+    const sortedNewTypesId = sortedNewTypes.sort().map(t => t.id).join('/');
+    if (sortedNewTypesId !== prevTypesId) {
+      set({
+        blockTypes: sortedNewTypes
+      }, false, 'setBlockTypes');
+    }
+  },
+  data,
+  onDataChange: null,
+  async parseUnsafeData(unsafeData) {
+    let parsedUnsafeData = null;
+    const issues = [];
+    if (Array.isArray(unsafeData)) {
+      parsedUnsafeData = unsafeData;
+    } else if (typeof unsafeData === 'string') {
+      if (!unsafeData.toLowerCase().includes('<script>')) {
+        try {
+          parsedUnsafeData = JSON.parse(unsafeData);
+        } catch (err) {
+          issues.push({
+            fatal: true,
+            code: 'custom',
+            message: err.message,
+            path: []
+          });
+        }
+      }
+    } else {
+      issues.push({
+        fatal: true,
+        code: 'custom',
+        message: 'Data is not valid.',
+        path: []
+      });
+    }
+    if (issues.length > 0) {
+      return {
+        success: false,
+        errors: [{
+          issues
+        }]
+      };
+    }
+    const blockTypesIds = get().blockTypes.map(bt => bt.id);
+    const docSchema = _zod.z.array(_zod.z.object({
+      id: _zod.z.string(),
+      type: _zod.z.string().refine(type => blockTypesIds.includes(type), type => ({
+        message: `Block type must be one of: ${blockTypesIds.join(', ')}. Current value: ${type}`
+      })),
+      top: _zod.z.boolean(),
+      data: _zod.z.object({}).passthrough().nullable(),
+      settings: _zod.z.object({}).passthrough().nullable(),
+      meta: _zod.z.object({
+        created: _zod.z.number(),
+        changed: _zod.z.number()
+      }).passthrough()
+    }));
+    const result = docSchema.safeParse(parsedUnsafeData);
+    if (!result.success) {
+      return {
+        success: false,
+        errors: [result.error]
+      };
+    }
+    const maybeSafeData = result.data;
+    const results = await Promise.all(maybeSafeData.map(async (block, i) => {
+      const blockType = blockTypes.find(bt => bt.id === block.type);
+      if (blockType.getDataSchema && block.data) {
+        const schema = await blockType.getDataSchema();
+        const blockResult = schema.safeParse(block.data);
+        if (!blockResult.success) {
+          return blockResult;
+        }
+        maybeSafeData[i].data = blockResult.data;
+      }
+      if (blockType.getSettingsSchema && block.settings) {
+        const schema = await blockType.getSettingsSchema();
+        const blockResult = schema.safeParse(block.settings);
+        if (!blockResult.success) {
+          return blockResult;
+        }
+        maybeSafeData[i].settings = blockResult.data;
+      }
+      return undefined;
+    }));
+    const allErrors = [];
+    results.forEach(r => {
+      if (r && !r.success) {
+        allErrors.push(r.error);
+      }
+    });
+    if (allErrors.length === 0) {
+      return {
+        success: true,
+        data: maybeSafeData
+      };
+    }
+    return {
+      success: false,
+      errors: allErrors
+    };
+  },
+  async importData(rawData) {
+    const result = await get().parseUnsafeData(rawData);
+    if (result.success) {
+      get().setData(result.data);
+      return result;
+    }
+    return result;
+  },
+  setData(argData, userEqualityFn) {
+    const prevData = get().data;
+    const newData = Array.isArray(argData) ? argData : argData(prevData);
+    const equalityFn = userEqualityFn || ((a, b) => {
+      const aId = a.map(block => `${block.id}:${block.meta.changed}`).join('/');
+      const bId = b.map(block => `${block.id}:${block.meta.changed}`).join('/');
+      return aId === bId;
+    });
+    const selected = equalityFn(prevData, newData) ? prevData : newData;
+    set({
+      data: selected
+    }, false, 'setData');
+    return selected;
+  },
+  setMultipleStates(states) {
+    Object.entries(states).forEach(([key, value]) => {
+      if (typeof value !== 'undefined') {
+        set({
+          [key]: value
+        }, false, `provider-setState-${key}`);
+      }
+    });
+  },
+  allowedOrigins,
+  setAllowedOrigins(newOrigins) {
+    const prevOrigins = get().allowedOrigins;
+    const sortedNewOrigins = newOrigins.sort();
+    if (prevOrigins.join(',') !== sortedNewOrigins.join(',')) {
+      set({
+        allowedOrigins: sortedNewOrigins
+      }, false, 'setAllowedOrigins');
+    }
+  },
+  previewSrc,
+  previewWidth: includingMp ? 'sm' : 'lg',
+  setPreviewWidth(width) {
+    const currentDeviceList = get().previewDeviceList;
+    if (currentDeviceList === null) {
+      return;
+    }
+    if (Array.isArray(currentDeviceList) && !currentDeviceList.includes(width)) {
+      return;
+    }
+    set({
+      previewWidth: width
+    }, false, 'setPreviewWidth');
+    // get domain name from hostname
+    const domain = window.location.hostname.split('.').slice(-2).join('.');
+    _jsCookie.default.set('editor-preview-width', width, {
+      domain
+    });
+    set({
+      device: width === 'sm' ? 'mobile' : 'desktop'
+    });
+  },
+  previewDeviceList,
+  setPreviewDeviceList(deviceList) {
+    set({
+      previewDeviceList: deviceList
+    }, false, 'setPreviewDeviceList');
+  },
+  device: previewWidth === 'sm' ? 'mobile' : 'desktop',
+  setDevice(device) {
+    set({
+      device
+    }, false, 'setDevice');
+  },
+  // previewInstance,
+  // setPreviewInstance(instance) {
+  //   set({ previewInstance: instance });
+  // },
+  alertMessages: [],
+  addAlertMessages(messages) {
+    const prevMessages = get().alertMessages;
+    set({
+      alertMessages: [...prevMessages, ...messages.map(m => ({
+        ...m,
+        autoHideDuration: m.autoHideDuration || 3000,
+        id: (0, _uuid.v4)(),
+        visible: false
+      }))]
+    }, false, 'addAlertMessages');
+  },
+  removeAlertMessage(id) {
+    const prevMessages = get().alertMessages;
+    set({
+      alertMessages: prevMessages.filter(m => m.id !== id)
+    }, false, 'removeAlertMessage');
+  },
+  storage: storage
+}), options);
+var _default = exports.default = editorCoreWithDevtools;

package/store/index.d.ts

@@ -0,0 +1,112 @@
+/// <reference types="react" />
+import { DeviceType } from '../Editor';
+import type { Block, BlockType } from '../types';
+import type { Config, ConfigStorageAdapter } from '../types/ConfigStorageAdapter';
+import type ObjectStorageAdapter from '../types/ObjectStorageAdapter';
+import type { AlertProps, SnackbarProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import { z } from 'zod';
+import { TemporalState } from 'zundo';
+type Storage = {
+    object?: ObjectStorageAdapter;
+    config?: ConfigStorageAdapter;
+};
+export type EditorState = {
+    isFullScreen: boolean;
+    isMp: boolean;
+    theme: Theme;
+    includingMp: boolean | null;
+    setIncludingMp(includingMp: boolean): void;
+    setIsMp(isMp: boolean): void;
+    setIsFullScreen(isFullScreen: boolean): void;
+    isNested: boolean;
+    cardinality: number;
+    blockTypes: BlockType[];
+    setBlockTypes(newTypes: BlockType[]): void;
+    data: Block[];
+    setData(data: Block[] | ((prevData: Block[]) => Block[]), areEqual?: (prevData: Block[], newData: Block[]) => boolean): Block[];
+    setMultipleStates(otherData: Record<string, any>): void;
+    parseUnsafeData(data: unknown[] | string): Promise<{
+        success: true;
+        data: Block[];
+    } | {
+        success: false;
+        errors: {
+            issues: z.ZodIssue[];
+        }[];
+    }>;
+    importData(rawData: string): Promise<{
+        success: true;
+        data: Block[];
+    } | {
+        success: false;
+        errors: {
+            issues: z.ZodIssue[];
+        }[];
+    }>;
+    allowedOrigins: string[];
+    setAllowedOrigins(newOrigins: string[]): void;
+    previewSrc: string;
+    previewWidth: DeviceType;
+    setPreviewWidth(width: EditorState['previewWidth']): void;
+    previewDeviceList: DeviceType[];
+    setPreviewDeviceList(deviceList: EditorState['previewDeviceList']): void;
+    selectedBlockId: string;
+    setSelectedBlockId(id: EditorState['selectedBlockId']): void;
+    editingBlockId: string;
+    setEditingBlockId(id: EditorState['editingBlockId']): void;
+    device: 'desktop' | 'mobile';
+    setDevice(device: EditorState['device']): void;
+    alertMessages: {
+        id: string;
+        severity: AlertProps['severity'];
+        message: string | string[];
+        autoHideDuration: number;
+        visible: boolean;
+    }[];
+    addAlertMessages(messages: {
+        severity: AlertProps['severity'];
+        message: string | string[];
+        autoHideDuration?: SnackbarProps['autoHideDuration'];
+    }[]): void;
+    removeAlertMessage(id: string): void;
+    storage: Storage | boolean;
+};
+export type EditorStore = ReturnType<typeof createEditorStore>;
+export declare const createEditorStore: (initialState?: {}) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<EditorState>, "temporal"> & {
+    temporal: import("zustand").StoreApi<TemporalState<EditorState>>;
+}, "setState"> & {
+    setState<A extends string | {
+        type: string;
+    }>(partial: EditorState | Partial<EditorState> | ((state: EditorState) => EditorState | Partial<EditorState>), replace?: boolean | undefined, action?: A | undefined): void;
+}>;
+export declare const EditorContext: import("react").Context<void | import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<EditorState>, "temporal"> & {
+    temporal: import("zustand").StoreApi<TemporalState<EditorState>>;
+}, "setState"> & {
+    setState<A extends string | {
+        type: string;
+    }>(partial: EditorState | Partial<EditorState> | ((state: EditorState) => EditorState | Partial<EditorState>), replace?: boolean | undefined, action?: A | undefined): void;
+}>>;
+export declare const useEditorStore: <U>(selector: (state: EditorState) => U) => U;
+export declare const useTemporalEditorStore: <T>(selector: (state: TemporalState<Pick<EditorState, 'data'>>) => T) => T;
+export declare const useObjectStorage: () => ObjectStorageAdapter | undefined;
+export declare const useConfigStorage: () => ConfigStorageAdapter | undefined;
+export declare const useConfigStorageQueryClient: () => {
+    useGetQuery<ConfigData>(id: string, options?: {
+        enabled?: boolean;
+    }): import("@tanstack/react-query").UseQueryResult<Config<ConfigData> | null, unknown>;
+    useListQuery(options?: {
+        enabled?: boolean;
+    }): import("@tanstack/react-query").UseQueryResult<string[], unknown>;
+    useDeleteMutation(options?: {
+        onSuccess?(id: string): void;
+    } | undefined): import("@tanstack/react-query").UseMutationResult<string, unknown, string, unknown>;
+    useSaveMutation(options?: {
+        onSuccess?(config: Config): void;
+    } | undefined): import("@tanstack/react-query").UseMutationResult<Config<any>, unknown, Config<any>, unknown>;
+};
+export type ConfigTemplate = Config<{
+    name: string;
+    blocks: Block[];
+}>;
+export {};