@ea-lab/reactive-json 0.0.0

package/lib/component/action/HashChangeListener.jsx

@@ -0,0 +1,66 @@
+import {useContext, useEffect} from "react";
+import {reactionFunctions} from "./ReactOnEvent";
+import EventDispatcherContext from "../../engine/EventDispatcherContext";
+import GlobalDataContext from "../../engine/GlobalDataContext";
+import TemplateContext from "../../engine/TemplateContext";
+import {evaluateTemplateValueCollection} from "../../engine/TemplateSystem";
+
+/**
+ * Listens to hash changes (URL fragment) on the window object and executes a reaction function in response.
+ *
+ * @param {{}} props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const HashChangeListener = (props) => {
+    const eventDispatcherContext = useContext(EventDispatcherContext);
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const actionProps = props?.actionProps ?? undefined;
+
+    useEffect(() => {
+        const payload = actionProps ?? undefined;
+        const functionToCall = actionProps?.what ?? undefined;
+        const whenHashIs = actionProps?.whenHashIs ?? undefined;
+        const whenHashWas = actionProps?.whenHashWas ?? undefined;
+
+        const whenHashIs_evaluated = evaluateTemplateValueCollection({
+            globalDataContext,
+            templateContext,
+            valueToEvaluate: whenHashIs
+        });
+
+        const whenHashWas_evaluated = evaluateTemplateValueCollection({
+            globalDataContext,
+            templateContext,
+            valueToEvaluate: whenHashWas
+        });
+
+        const listener = (event) => {
+            // The hash contains the '#' character.
+            if (typeof whenHashIs_evaluated === "string" && ((new URL(event.newUrl)).hash !== whenHashIs_evaluated)) {
+                return;
+            }
+
+            if (typeof whenHashWas_evaluated === "string" && ((new URL(event.oldUrl)).hash !== whenHashIs_evaluated)) {
+                return;
+            }
+
+            const toCall = functionToCall && (reactionFunctions[functionToCall] ?? undefined);
+
+            toCall && toCall({args: payload, event, globalDataContext, templateContext});
+        };
+
+        // Dev note: we use a context to prevent adding too many real event listeners which would slow down the build.
+        eventDispatcherContext?.addEventListener("hashchange", listener);
+
+        return () => {
+            eventDispatcherContext?.removeEventListener("hashchange", listener);
+        };
+    }, [eventDispatcherContext, globalDataContext, actionProps, templateContext]);
+
+    return <>{props.children}</>;
+};
+
+export default HashChangeListener;

package/lib/component/action/Hide.jsx

@@ -0,0 +1,14 @@
+/**
+ * Action which will not render the children.
+ *
+ * This will also cancel any subsequent actions.
+ * 
+ * @returns {null}
+ * @constructor
+ */
+const Hide = () => {
+    // Simply don't render the children.
+    return null;
+};
+
+export default Hide;

package/lib/component/action/MessageListener.jsx

@@ -0,0 +1,62 @@
+import {useContext, useEffect} from "react";
+import {reactionFunctions} from "./ReactOnEvent";
+import EventDispatcherContext from "../../engine/EventDispatcherContext";
+import GlobalDataContext from "../../engine/GlobalDataContext";
+import TemplateContext from "../../engine/TemplateContext";
+import {evaluateTemplateValueCollection} from "../../engine/TemplateSystem";
+import {isEqual} from "lodash";
+
+/**
+ * Listens to messages on the window object and executes a reaction function in response.
+ *
+ * @param {{}} props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const MessageListener = (props) => {
+    const eventDispatcherContext = useContext(EventDispatcherContext);
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const actionProps = props?.actionProps ?? undefined;
+
+    useEffect(() => {
+        const payload = actionProps ?? undefined;
+        const functionToCall = actionProps?.what ?? undefined;
+        const whenMessageIs = actionProps?.whenMessageIs ?? undefined;
+
+        const whenMessageIs_evaluated = evaluateTemplateValueCollection({
+            globalDataContext,
+            templateContext,
+            valueToEvaluate: whenMessageIs
+        });
+
+        const listener = (event) => {
+            if (event.origin !== window.location.origin) {
+                // The message is not allowed because it targets an unknown origin.
+                return;
+            }
+
+            // The "event.data" is supposed to be already evaluated.
+            // Use lodash's isEqual to compare the values properly (deep compare for objects).
+            if (!isEqual(event.data, whenMessageIs_evaluated)) {
+                return;
+            }
+
+            const toCall = functionToCall && (reactionFunctions[functionToCall] ?? undefined);
+
+            toCall && toCall({args: payload, event, globalDataContext, templateContext});
+        };
+
+        // Dev note: we use a context to prevent adding too many real event listeners which would slow down the build.
+        eventDispatcherContext?.addEventListener("message", listener);
+
+        return () => {
+            eventDispatcherContext?.removeEventListener("message", listener);
+        };
+    }, [eventDispatcherContext, globalDataContext, actionProps, templateContext]);
+
+    return <>{props.children}</>;
+};
+
+export default MessageListener;

package/lib/component/action/Popover.jsx

@@ -0,0 +1,53 @@
+/**
+ * Action which will append a popover when the current component is hovered.
+ */
+
+import {OverlayTrigger, Popover as BsPopover} from "react-bootstrap";
+import View from "../../engine/View";
+import {useEvaluatedAttributes} from "../../engine/TemplateSystem";
+import {useRef} from "react";
+
+const Popover = (props) => {
+    // We use the React Bootstrap Popover component. It works like the Tooltip component.
+    // It requires an OverlayTrigger wrapping component that handles the hover interaction.
+    // The OverlayTrigger child must be able to get a "ref" (as in react refs),
+    // So we wrap the children in a custom HTML tag (popover-reference) to be sure it will work.
+    const bodyAttrs = useEvaluatedAttributes(props.actionProps.bodyAttributes || {});
+    const headerAttrs = useEvaluatedAttributes(props.actionProps.headerAttributes || {});
+
+    // This ref is used to help building complex structures like popovers inside modals.
+    // Without this, the popover will show behind the modal instead of being in front.
+    // It is usually expected to have the popover over the modal, but if we don't want
+    // this effect for a specific case, we should make this configurable to not set
+    // the ref.
+    const containerRef = useRef(null);
+
+    return <div ref={containerRef}>
+        <OverlayTrigger
+            container={containerRef}
+            placement={props.actionProps.placement ?? "top"}
+            trigger={props.actionProps.trigger ?? "click"}
+            overlay={<BsPopover>
+                {props.actionProps.header && <BsPopover.Header {...headerAttrs}>
+                    <View
+                        props={props.actionProps.header}
+                        currentData={props.componentProps?.currentData?.actions?.[props.actionIndex]?.header ?? undefined}
+                        datafield={"header"}
+                        path={props.componentProps.path + ".actions." + props.actionIndex + ".header"}
+                    />
+                </BsPopover.Header>}
+                <BsPopover.Body {...bodyAttrs}>
+                    <View
+                        props={props.actionProps.body}
+                        currentData={props.componentProps?.currentData?.actions?.[props.actionIndex]?.body ?? undefined}
+                        datafield={"body"}
+                        path={props.componentProps.path + ".actions." + props.actionIndex + ".body"}
+                    />
+                </BsPopover.Body>
+            </BsPopover>}>
+            <popover-reference>{props.children}</popover-reference>
+        </OverlayTrigger>
+    </div>;
+};
+
+export default Popover;

package/lib/component/action/ReactOnEvent.jsx

@@ -0,0 +1,118 @@
+import {Children, cloneElement, Fragment, isValidElement, useContext} from "react";
+import GlobalDataContext from "../../engine/GlobalDataContext";
+import TemplateContext from "../../engine/TemplateContext";
+import {addData} from "../reaction/addData";
+import {fetchData} from "../reaction/fetchData";
+import {moveData} from "../reaction/moveData";
+import {postMessage} from "../reaction/postMessage";
+import {redirectNow} from "../reaction/redirectNow";
+import {removeData} from "../reaction/removeData";
+import {setData} from "../reaction/setData";
+import {submitData} from "../reaction/submitData";
+import {triggerEvent} from "../reaction/triggerEvent";
+import {setClipboardData} from "../reaction/setClipboardData";
+
+/**
+ * Functions that will be executed on specific events.
+ *
+ * @type {{}}
+ */
+export const reactionFunctions = {
+    addData,
+    fetchData,
+    moveData,
+    postMessage,
+    redirectNow,
+    removeData,
+    setClipboardData,
+    setData,
+    submitData,
+    triggerEvent,
+};
+
+/**
+ * Action component which will append one or more event listeners on the element.
+ *
+ * @param {Object} props
+ *
+ * @constructor
+ */
+const ReactOnEvent = (props) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const {actionProps: reactionFunctionProps} = props;
+
+    // Event attributes to inject.
+    const eventPropsForAttributes = {};
+
+    for (const [eventName, eventReactionFunctionProps] of Object.entries(reactionFunctionProps)) {
+        // Prepare the callback.
+        // There will be 1 callback per eventName.
+        // Each callback will have a list of objects, each object representing 1 reaction function call.
+        eventPropsForAttributes[eventName] = (event) => {
+            let lastStopPropagation = true;
+
+            for (const singleReactionFunctionProps of eventReactionFunctionProps) {
+                // singleReactionFunctionProps is the object containing info from the data structure.
+                if (!singleReactionFunctionProps) {
+                    continue;
+                }
+
+                const reactionFunction = singleReactionFunctionProps.what && (reactionFunctions[singleReactionFunctionProps.what] ?? null);
+
+                if (!reactionFunction) {
+                    continue;
+                }
+
+                // Call the reaction function with the props, the event details, and context data.
+                reactionFunction({args: singleReactionFunctionProps, event, globalDataContext, templateContext});
+
+                if (singleReactionFunctionProps.stopPropagation === true) {
+                    // Stop executing reaction functions of this event early.
+                    break;
+                }
+
+                lastStopPropagation = singleReactionFunctionProps.stopPropagation ?? true;
+            }
+
+            if (lastStopPropagation !== false) {
+                // Stop propagation unless "stopPropagation" is explicitly set on false.
+                // Stopping the propagation is the default behavior.
+                event.stopPropagation();
+            }
+        };
+    }
+
+    // Recreate the component with the event attributes.
+    // The recursive map is required because the item can be nested into a React.Fragment,
+    // and we want to add the attributes on the "real" element.
+    const recursiveMap = (children) => {
+        if (!children) {
+            return children;
+        }
+
+        const childrenArray = Children.toArray(children);
+
+        return Children.map(childrenArray, child => {
+            if (child.type === Fragment) {
+                // Dig deeper.
+                return recursiveMap(child?.props?.children);
+            }
+
+            if (typeof child !== 'object' || !isValidElement(child)) {
+                // Not a React element that can welcome attributes.
+                return child;
+            }
+
+            // Clone the element and append the attributes.
+            return cloneElement(child, eventPropsForAttributes);
+        });
+    };
+
+    const clonedChild = recursiveMap(props.children);
+
+    return <>{clonedChild}</>;
+};
+
+export default ReactOnEvent;

package/lib/component/action/Redirect.jsx

@@ -0,0 +1,26 @@
+import {evaluateTemplateValue} from "../../engine/TemplateSystem";
+import {useContext} from "react";
+import GlobalDataContext from "../../engine/GlobalDataContext";
+import TemplateContext from "../../engine/TemplateContext";
+
+/**
+ * Redirects when the conditions are valid.
+ *
+ * @param {{actionProps: {to}}} props Action props.
+ *
+ * @constructor
+ */
+const Redirect = (props) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const {to} = props.actionProps;
+
+    if (!to || typeof to !== "string") {
+        return;
+    }
+
+    window.location.href = evaluateTemplateValue({valueToEvaluate: to, globalDataContext, templateContext});
+};
+
+export default Redirect;

package/lib/component/action/Tooltip.jsx

@@ -0,0 +1,27 @@
+/**
+ * Action which will append a tooltip when the current component is hovered.
+ */
+
+import {OverlayTrigger, Tooltip as BsTooltip} from "react-bootstrap";
+import View from "../../engine/View";
+
+const Tooltip = (props) => {
+    // We use the React Bootstrap Tooltip component.
+    // It requires an OverlayTrigger wrapping component that handles the hover interaction.
+    // The OverlayTrigger child must be able to get a "ref" (as in react refs),
+    // So we wrap the children in a custom HTML tag (tooltip-reference) to be sure it will work.
+    return <OverlayTrigger
+        placement={props.actionProps.placement ?? "top"}
+        overlay={<BsTooltip>
+            <View
+                props={props.actionProps.content}
+                currentData={props.componentProps?.currentData?.actions?.[props.actionIndex] ?? undefined}
+                datafield={props.actionIndex}
+                path={props.componentProps.path + ".actions." + props.actionIndex}
+            />
+        </BsTooltip>}>
+        <tooltip-reference>{props.children}</tooltip-reference>
+    </OverlayTrigger>;
+};
+
+export default Tooltip;

package/lib/component/action/VisuallyHide.jsx

@@ -0,0 +1,15 @@
+/**
+ * Action which will render the children, but hide it using a wrapping div.
+ *
+ * This action is used when the element to hide must still be present in the DOM
+ * to respond to events.
+ *
+ * @param {{}} props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const VisuallyHide = (props) => {
+    return <visually-hidden style={{"display": "none"}}>{props.children}</visually-hidden>;
+};
+
+export default VisuallyHide;

package/lib/component/element/chart/BarChart.jsx

@@ -0,0 +1,40 @@
+import ActionDependant from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import {evaluateTemplateValue, useEvaluatedAttributes} from "../../../engine/TemplateSystem";
+import {
+    BarElement,
+    CategoryScale,
+    Chart as ChartJS,
+    Legend,
+    LinearScale,
+    Title,
+    Tooltip,
+} from "chart.js";
+import {useContext} from "react";
+import {Bar} from "react-chartjs-2";
+
+// Register the necessary modules for Chart.js.
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+const BarChart = ({props}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+    const attributes = useEvaluatedAttributes(props.attributes);
+
+    const options = props.options || {};
+
+    const chartData = evaluateTemplateValue({
+        valueToEvaluate: props.data,
+        globalDataContext,
+        templateContext,
+    });
+
+    return (
+        <ActionDependant {...props}>
+            {chartData && <Bar {...attributes} data={chartData} options={options}/>}
+        </ActionDependant>
+    );
+};
+
+export default BarChart;

package/lib/component/element/chart/DoughnutChart.jsx

@@ -0,0 +1,32 @@
+import ActionDependant from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import {evaluateTemplateValue, useEvaluatedAttributes} from "../../../engine/TemplateSystem";
+import {Chart as ChartJS, ArcElement, Tooltip, Legend} from "chart.js";
+import {useContext} from "react";
+import {Doughnut} from "react-chartjs-2";
+
+// Registering necessary components for Chart.js
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+const DoughnutChart = ({props}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+    const attributes = useEvaluatedAttributes(props.attributes);
+
+    const options = props.options || {};
+
+    const chartData = evaluateTemplateValue({
+        valueToEvaluate: props.data,
+        globalDataContext,
+        templateContext,
+    });
+
+    return (
+        <ActionDependant {...props}>
+            {chartData && <Doughnut {...attributes} data={chartData} options={options}/>}
+        </ActionDependant>
+    );
+};
+
+export default DoughnutChart;

package/lib/component/element/chart/LineChart.jsx

@@ -0,0 +1,40 @@
+import ActionDependant from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import {evaluateTemplateValue, useEvaluatedAttributes} from "../../../engine/TemplateSystem";
+import {
+    CategoryScale,
+    Chart as ChartJS, Filler,
+    Legend,
+    LinearScale,
+    LineElement, PointElement,
+    Title,
+    Tooltip,
+} from "chart.js";
+import {useContext} from "react";
+import {Line} from "react-chartjs-2";
+
+// Register the necessary modules for Chart.js.
+ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Title, Tooltip, Legend, Filler);
+
+const LineChart = ({props}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+    const attributes = useEvaluatedAttributes(props.attributes);
+
+    const options = props.options || {};
+
+    const chartData = evaluateTemplateValue({
+        valueToEvaluate: props.data,
+        globalDataContext,
+        templateContext,
+    });
+
+    return (
+        <ActionDependant {...props}>
+            {chartData && <Line {...attributes} data={chartData} options={options}/>}
+        </ActionDependant>
+    );
+};
+
+export default LineChart;

package/lib/component/element/chart/PolarAreaChart.jsx

@@ -0,0 +1,32 @@
+import ActionDependant from "../../../engine/Actions";
+import GlobalDataContext from "../../../engine/GlobalDataContext";
+import TemplateContext from "../../../engine/TemplateContext";
+import {evaluateTemplateValue, useEvaluatedAttributes} from "../../../engine/TemplateSystem";
+import {Chart, RadialLinearScale, ArcElement, Tooltip, Legend} from 'chart.js';
+import {useContext} from "react";
+import {PolarArea} from 'react-chartjs-2';
+
+// Registering the necessary components for Chart.js.
+Chart.register(RadialLinearScale, ArcElement, Tooltip, Legend);
+
+const PolarAreaChart = ({props}) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+    const attributes = useEvaluatedAttributes(props.attributes);
+
+    const options = props.options || {};
+
+    const chartData = evaluateTemplateValue({
+        valueToEvaluate: props.data,
+        globalDataContext,
+        templateContext,
+    });
+
+    return (
+        <ActionDependant {...props}>
+            {chartData && <PolarArea {...attributes} data={chartData} options={options}/>}
+        </ActionDependant>
+    );
+};
+
+export default PolarAreaChart;