@creopse/react 0.0.12 → 0.0.13

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { useState, useEffect, createContext, useRef, useLayoutEffect, useId, useContext, useInsertionEffect, useMemo, useCallback, Children, isValidElement, Fragment, createElement, forwardRef, Component } from "react";
-import { u as useHelper, s as slideToId, a as useProps, E as EditorMessageType, R as RouterContext, C as ConfigContext, b as ResolveSectionsContext, P as PropsContext } from "./index-jw_2nhs3.js";
+import { u as useHelper, a as useContent, b as useProps, P as PropsContext, R as ResolveSectionsContext, c as cloneDeep, s as slideToId, E as EditorMessageType, d as RouterContext, C as ConfigContext } from "./content-CM9eJ2st.js";
 import "@inertiajs/react";
 import { createPortal } from "react-dom";
 var jsxRuntime = { exports: {} };
@@ -8069,26 +8069,131 @@ const StickyTop = ({
     }
   );
 };
-const RootContainer = ({
-  page,
-  sections = [],
-  components = {}
-}) => {
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    if (typeof crypto === "undefined" || !crypto.getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    }
+    getRandomValues = crypto.getRandomValues.bind(crypto);
+  }
+  return getRandomValues(rnds8);
+}
+const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = { randomUUID };
+function _v4(options, buf, offset) {
+  options = options || {};
+  const rnds = options.random ?? options.rng?.() ?? rng();
+  if (rnds.length < 16) {
+    throw new Error("Random bytes length must be >= 16");
+  }
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  return unsafeStringify(rnds);
+}
+function v4(options, buf, offset) {
+  if (native.randomUUID && true && !options) {
+    return native.randomUUID();
+  }
+  return _v4(options);
+}
+const useSetup = () => {
+  const getComponents = useCallback(
+    (resolveSections) => {
+      const components = {};
+      if (!resolveSections) {
+        throw new Error("[@creopse/react] resolveSections is required");
+      }
+      const files = resolveSections();
+      for (const [key, value] of Object.entries(files)) {
+        const componentName = key.replace(/^\.\/(.*)\.\w+$/, "$1");
+        const parts = componentName.split("/");
+        const name = parts[parts.length - 1]?.split(".")[0];
+        components[name] = value.default;
+      }
+      return components;
+    },
+    []
+  );
+  const getSectionsInOrder = useCallback(
+    (props) => {
+      const sections = props.pageData?.sections;
+      const sectionsOrder = props.pageData?.sectionsOrder;
+      const sectionsOrdered = [];
+      if (Array.isArray(sections) && Array.isArray(sectionsOrder)) {
+        for (const section of sectionsOrder) {
+          if (section) {
+            const item = sections.find(
+              (value) => `${value.slug}__${value.pivot?.linkId}` === section
+            );
+            if (item) {
+              sectionsOrdered.push(item);
+            }
+          }
+        }
+      }
+      return sectionsOrdered.length ? sectionsOrdered : sections || [];
+    },
+    []
+  );
+  const getFinalPageSections = useCallback(
+    (props) => {
+      const sections = getSectionsInOrder(props);
+      const sectionsDisabled = props.pageData?.sectionsDisabled;
+      return sections.filter((section) => {
+        return !sectionsDisabled?.includes(
+          `${section.slug}__${section.pivot?.linkId}`
+        );
+      });
+    },
+    [getSectionsInOrder]
+  );
+  return {
+    getComponents,
+    getSectionsInOrder,
+    getFinalPageSections
+  };
+};
+const RootContainer = () => {
+  const { page } = useContent();
+  const props = useProps();
+  const manager = useContext(PropsContext);
+  const resolveSections = useContext(ResolveSectionsContext);
+  const { getComponents, getFinalPageSections } = useSetup();
+  const [sections, setSections] = useState(
+    () => getFinalPageSections(props)
+  );
+  const [components] = useState(() => getComponents(resolveSections));
+  const [sectionsWrapperKey, setSectionsWrapperKey] = useState(v4());
+  const [sectionKeys, setSectionKeys] = useState({});
+  const sectionsStateRef = useRef({});
+  const pagePropsCopyRef = useRef(cloneDeep(props));
   useEffect(() => {
-    const timeout = setTimeout(() => {
-      const sectionData = page.props?.sectionData;
+    const keys = {};
+    sections.forEach((section) => {
+      keys[`${section.slug}__${section.pivot?.linkId}-key`] = v4();
+    });
+    setSectionKeys(keys);
+  }, [sections]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const sectionData = page.props.sectionData;
       if (sectionData && sections.find(
         (section) => section.slug === sectionData.slug && section.pivot?.linkId === sectionData.pivot?.linkId
       )) {
         slideToId(`${sectionData.slug}__${sectionData.pivot?.linkId}-container`);
       }
     }, 1e3);
-    return () => clearTimeout(timeout);
-  }, [page, sections]);
-  const sectionsStateRef = useRef({});
-  const sectionsRef = useRef(sections);
-  const pageProps = useProps();
-  console.log(pageProps);
+    return () => clearTimeout(timer);
+  }, [page.props.sectionData, sections]);
   useEffect(() => {
     const deselectAllSections = () => {
       Object.keys(sectionsStateRef.current).forEach((key) => {
@@ -8111,7 +8216,7 @@ const RootContainer = ({
           const primaryColor = event.data?.primaryColor ?? "blue";
           sessionStorage.setItem("replyOrigin", event.origin);
           sessionStorage.setItem("primaryColor", primaryColor);
-          sectionsRef.current?.forEach((section) => {
+          sections?.forEach((section) => {
             if (section.slug && section.pivot?.linkId) {
               const sectionElementId = `${section.slug}__${section.pivot?.linkId}-container`;
               const sectionElement = document.getElementById(sectionElementId);
@@ -8149,7 +8254,7 @@ const RootContainer = ({
           break;
         case EditorMessageType.SELECT_SIDEBAR_SECTION: {
           setTimeout(() => {
-            if (sectionsRef.current?.find(
+            if (sections.find(
               (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
             )) {
               slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
@@ -8167,30 +8272,64 @@ const RootContainer = ({
           break;
         }
         case EditorMessageType.SEND_BASE_SECTION_SETTINGS:
-          {
-            console.log(event.data);
+        case EditorMessageType.SEND_SECTION_SETTINGS: {
+          const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+            (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
+          );
+          if (typeof sectionIndex !== "number" || sectionIndex === -1) {
+            return;
           }
-          break;
-        case EditorMessageType.SEND_BASE_SECTION_DATA:
-          {
-            console.log(event.data);
+          if (pagePropsCopyRef.current.pageData?.sections && pagePropsCopyRef.current.pageData?.sections[sectionIndex].pivot?.settings) {
+            pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.settings = event.data?.settings;
+            manager?.sync(pagePropsCopyRef.current);
+            setSectionKeys((prev) => ({
+              ...prev,
+              [`${event.data?.slug}__${event.data?.linkId}-key`]: v4()
+            }));
           }
           break;
-        case EditorMessageType.SEND_SECTION_SETTINGS:
-          {
-            console.log(event.data);
+        }
+        case EditorMessageType.SEND_BASE_SECTION_DATA:
+        case EditorMessageType.SEND_SECTION_DATA: {
+          const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+            (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
+          );
+          if (typeof sectionIndex !== "number" || sectionIndex === -1) {
+            return;
           }
-          break;
-        case EditorMessageType.SEND_SECTION_DATA:
-          {
-            console.log(event.data);
+          if (pagePropsCopyRef.current.pageData?.sections && pagePropsCopyRef.current.pageData?.sections[sectionIndex].pivot?.data) {
+            pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.data = event.data?.data;
+            manager?.sync(pagePropsCopyRef.current);
+            setSectionKeys((prev) => ({
+              ...prev,
+              [`${event.data?.slug}__${event.data?.linkId}-key`]: v4()
+            }));
           }
           break;
-        case EditorMessageType.SEND_PAGE_SECTIONS:
-          {
-            console.log(event.data);
-          }
+        }
+        case EditorMessageType.SEND_PAGE_SECTIONS: {
+          if (!pagePropsCopyRef.current.pageData) return;
+          pagePropsCopyRef.current.pageData.sectionsOrder = event.data?.sectionsOrder;
+          pagePropsCopyRef.current.pageData.sectionsDisabled = event.data?.sectionsDisabled;
+          const currentSections = cloneDeep(
+            pagePropsCopyRef.current.pageData.sections || []
+          );
+          pagePropsCopyRef.current.pageData.sections = event.data?.sectionsList || [];
+          currentSections.forEach((currentSection) => {
+            const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+              (newSection) => newSection.slug === currentSection?.slug && newSection.pivot?.linkId === currentSection.pivot?.linkId
+            );
+            if (typeof sectionIndex === "number" && sectionIndex > -1 && pagePropsCopyRef.current.pageData?.sections?.[sectionIndex].pivot) {
+              pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.data = currentSection.pivot?.data;
+              pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.settings = currentSection.pivot?.settings;
+            }
+          });
+          manager?.sync(pagePropsCopyRef.current);
+          const newProps = manager?.getState().props;
+          setSections(getFinalPageSections(newProps));
+          setSectionsWrapperKey(v4());
           break;
+        }
       }
     };
     window.addEventListener("message", handleMessage);
@@ -8206,15 +8345,19 @@ const RootContainer = ({
     return () => {
       window.removeEventListener("message", handleMessage);
     };
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sections.map((section, i) => {
+  }, [sections, manager, getFinalPageSections]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { all: "unset" }, children: sections.map((section) => {
     const Component2 = components[section.name];
-    if (!Component2) return null;
+    const key = sectionKeys[`${section.slug}__${section.pivot?.linkId}-key`];
+    if (!Component2) {
+      console.warn(`[@creopse/react] Component not found: ${section.name}`);
+      return null;
+    }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "section",
       {
         id: `${section.slug}__${section.pivot?.linkId}-container`,
-        className: "reset-styles",
+        style: { all: "unset" },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Component2,
           {
@@ -8232,9 +8375,9 @@ const RootContainer = ({
           }
         )
       },
-      `section-${i}`
+      key
     );
-  }) });
+  }) }, sectionsWrapperKey);
 };
 function CreopseProvider({ children, options }) {
   if (!options?.initialProps) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@creopse/react",
   "description": "Creopse React Toolkit",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "private": false,
   "author": "Noé Gnanih <noegnanih@gmail.com>",
   "license": "MIT",
@@ -47,7 +47,8 @@
     "@vueuse/core": "^14.1.0",
     "axios": "^1.13.2",
     "framer-motion": "^12.23.9",
-    "lodash.clonedeep": "^4.5.0"
+    "lodash.clonedeep": "^4.5.0",
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
@@ -56,6 +57,7 @@
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "@types/uuid": "^11.0.0",
     "@types/validator": "^13.15.10",
     "@vitejs/plugin-react": "^4.6.0",
     "eslint": "^9.30.1",

package/types/components/RootContainer/RootContainer.d.ts

@@ -1,9 +1,2 @@
-import React from 'react';
-import { type SectionModel } from '@creopse/utils';
-export interface Props {
-    page: any;
-    sections: SectionModel[];
-    components: Record<string, React.ComponentType<any>>;
-}
-declare const RootContainer: React.FC<Props>;
+declare const RootContainer: () => import("react/jsx-runtime").JSX.Element;
 export default RootContainer;

package/types/components/RootContainer/index.d.ts

@@ -1 +1 @@
-export { default as RootContainer, type Props as RootContainerProps, } from './RootContainer';
+export { default as RootContainer } from './RootContainer';

package/types/hooks/content.d.ts

@@ -1,4 +1,4 @@
-import type { AppInformationKey, ContentModelItemModel, ContentModelModel, MenuItemGroupModel, MenuItemModel, MenuModel, NewsArticleModel, NewsCategoryModel, NewsTagModel, PageModel, SectionModel, SettingType, SharedProps } from '@creopse/utils';
+import type { AppInformationKey, ContentModelItemModel, ContentModelModel, MenuItemGroupModel, MenuItemModel, MenuModel, NewsArticleModel, NewsCategoryModel, NewsTagModel, PageModel, SettingType, SharedProps } from '@creopse/utils';
 /**
  * A hook that provides a set of functions and properties for
  * easily accessing and manipulating page data, content models, menus,
@@ -32,10 +32,7 @@ export declare const useContent: () => {
     getSectionSettingsGroup: (key: string | null | undefined, group: string) => object | any | null;
     getSectionSetting: (key: string | null | undefined, group: string, name: string) => object | any | null;
     getAnySectionData: (sectionSlug: string, pageSlug: string, linkId?: string) => Promise<any>;
-    getSectionsInOrder: () => SectionModel[];
-    getFinalPageSections: () => SectionModel[];
     getSectionRootData: (key?: string) => any;
-    getComponents: () => Record<string, any>;
     getContentModel: (name: string) => ContentModelModel | undefined;
     getContentModelItems: (name: string, filterByIsActive?: boolean) => Promise<ContentModelItemModel[]>;
     getPaginatedContentModelItems: (name: string, pageSize: number, filterByIsActive?: boolean) => Promise<{

package/types/hooks/setup.d.ts

@@ -0,0 +1,7 @@
+import type { SectionModel } from '@creopse/utils';
+import type { Props } from '../types/plugin';
+export declare const useSetup: () => {
+    getComponents: (resolveSections?: () => Record<string, unknown>) => Record<string, any>;
+    getSectionsInOrder: <T extends Props = Props>(props: T) => SectionModel[];
+    getFinalPageSections: <T extends Props = Props>(props: T) => SectionModel[];
+};

package/types/index.d.ts

@@ -13,6 +13,6 @@ export { MountedTeleport, type MountedTeleportProps, } from './components/widget
 export { ReadMore, type ReadMoreProps } from './components/widgets/ReadMore';
 export { StickyBottom, type StickyBottomProps, } from './components/widgets/StickyBottom';
 export { StickyTop, type StickyTopProps } from './components/widgets/StickyTop';
-export { RootContainer, type RootContainerProps, } from './components/RootContainer';
+export { RootContainer, } from './components/RootContainer';
 export type { PropsManager };
 export type { PluginOptions };