fix(react-properties): add config debugging utility

packages/react-properties/src/createConfigurableComponent.tsx

@@ -1,7 +1,8 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { Compose, Decorator, makeDecoratable } from "@webiny/react-composition";
-import { Property, Properties, toObject } from "~/index";
 import { GenericComponent } from "@webiny/react-composition/types";
+import { Property, Properties, toObject } from "~/index";
+import { useDebugConfig } from "./useDebugConfig";
 
 const createHOC =
     (newChildren: React.ReactNode): Decorator<GenericComponent<{ children?: React.ReactNode }>> =>
@@ -68,6 +69,7 @@ export function createConfigurableComponent<TConfig>(name: string) {
 
     const WithConfig = ({ onProperties, children }: WithConfigProps) => {
         const [properties, setProperties] = useState<Property[]>([]);
+        useDebugConfig(name, properties);
         const context = { properties };
 
         useEffect(() => {

packages/react-properties/src/useDebugConfig.ts

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { Property } from "./Properties";
+import { toObject } from "./utils";
+
+declare global {
+    interface Window {
+        __debugConfigs: Record<string, () => void>;
+    }
+}
+
+export function useDebugConfig(name: string, properties: Property[]) {
+    useEffect(() => {
+        if (process.env.NODE_ENV !== "development") {
+            return;
+        }
+
+        const configs = window.__debugConfigs ?? {};
+        configs[name] = () => console.log(toObject(properties));
+        window.__debugConfigs = configs;
+
+        return () => {
+            const configs = window.__debugConfigs ?? {};
+            delete configs[name];
+            window.__debugConfigs = configs;
+        };
+    }, [properties]);
+}