react-dynamic-help - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

lib/es5/components/HelpController.d.ts

 import * as React from "react";
-import { AppTargetsState, SystemState, TargetId, ItemId, AppApiSetter, FlowId, TargetItemHelpers, DynamicHelpStorageAPI } from "..";
+import { AppTargetsState, SystemState, TargetId, ItemId, AppApiSetter, FlowId, TargetItemHelpers, DynamicHelpStorageAPI } from "../DynamicHelpTypes";
 declare type HelpControllerProps = {
     provideControllerApi: AppApiSetter;
     storage: DynamicHelpStorageAPI;
+    debug: boolean;
     children: JSX.Element | JSX.Element[];
@@ -7,0 +8,0 @@ };

lib/es5/components/HelpController.js

@@ -50,3 +50,16 @@ "use strict";
 const React = __importStar(require("react"));
-const __1 = require("..");
+const ReactDOM = __importStar(require("react-dom"));
+const DynamicHelp_1 = require("../DynamicHelp");
+/** A handy component when debugging
+ * ... because the state gets saved, making it hard to repeat tests!
+ */
+function FloatingStateReset() {
+    const api = React.useContext(DynamicHelp_1.Api);
+    return ReactDOM.createPortal((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rdh-floating-state-reset", style: {
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            zIndex: 1000,
+        }, onClick: api.resetHelp }, { children: "\u27F3" })), document.body);
+}
 const _resetState = {
@@ -78,2 +91,3 @@ systemEnabled: true,
         this.propagateSystemState = () => {
+            console.log("HelpController state update:", this.systemState);
             this.props.storage.set("system-state", this.systemState);
@@ -114,3 +128,3 @@ this.setState({ systemState: this.systemState });
             // one for each help item target it is rendering.
-            // console.log("target registration", target, targetRef, this.appTargets);
+            console.log("target registration", target, targetRef, this.appTargets);
             this.appTargets = {
@@ -221,14 +235,14 @@ targetItems: Object.assign(Object.assign({}, this.appTargets.targetItems), { [target]: targetRef }),
     render() {
-        console.log("Help Controller has state", this.state.systemState);
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(__1.SystemContextProvider, Object.assign({ value: {
-                    systemState: this.state.systemState,
-                    appTargetsState: this.state.appTargetsState,
-                    api: {
-                        addHelpFlow: this.addHelpFlow,
-                        addHelpItem: this.addHelpItem,
-                        signalItemDismissed: this.signalItemDismissed,
-                    },
-                } }, { children: this.props.children })) }));
+        //console.log("Help Controller has state", this.state.systemState);
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DynamicHelp_1.SystemContextProvider, Object.assign({ value: {
+                        systemState: this.state.systemState,
+                        appTargetsState: this.state.appTargetsState,
+                        api: {
+                            addHelpFlow: this.addHelpFlow,
+                            addHelpItem: this.addHelpItem,
+                            signalItemDismissed: this.signalItemDismissed,
+                        },
+                    } }, { children: this.props.children })), this.props.debug && (0, jsx_runtime_1.jsx)(FloatingStateReset, {})] }));
     }
 }
 exports.HelpController = HelpController;

lib/es5/components/HelpFlow.d.ts

@@ -6,2 +6,3 @@ /// <reference types="react" />
     showInitially?: boolean;
+    debug?: boolean;
     children: JSX.Element | JSX.Element[];
@@ -18,3 +19,3 @@ };
  */
-export declare const HelpFlow: ({ showInitially, ...props }: HelpFlowProps) => JSX.Element;
+export declare const HelpFlow: ({ showInitially, debug, ...props }: HelpFlowProps) => JSX.Element;
 export {};

lib/es5/components/HelpFlow.js

@@ -75,3 +75,3 @@ "use strict";
 const HelpFlow = (_a) => {
-    var { showInitially = false } = _a, props = __rest(_a, ["showInitially"]);
+    var { showInitially = false, debug = false } = _a, props = __rest(_a, ["showInitially", "debug"]);
     const helpContext = React.useContext(DynamicHelp_1.SystemContext);
@@ -82,3 +82,3 @@ const { api, systemState } = helpContext;
         if (!systemState.flows[props.id]) {
-            console.log("Help Flow registration:", props.id);
+            debug ? console.log("Help Flow registration:", props.id) : null;
             api.addHelpFlow(flowId, showInitially);
@@ -107,3 +107,3 @@ console.log("Help Flow - adding children...");
         const id = child.props.id || defaultId(flowId, child.props.target, index);
-        return React.cloneElement(child, Object.assign(Object.assign({}, child.props), { state: systemState === null || systemState === void 0 ? void 0 : systemState.items[id], flowState: systemState === null || systemState === void 0 ? void 0 : systemState.flows[flowId], systemEnabled: systemState === null || systemState === void 0 ? void 0 : systemState.systemEnabled, signalDismissed: () => api.signalItemDismissed(id) }));
+        return React.cloneElement(child, Object.assign(Object.assign(Object.assign({}, child.props), { state: systemState === null || systemState === void 0 ? void 0 : systemState.items[id], flowState: systemState === null || systemState === void 0 ? void 0 : systemState.flows[flowId], systemEnabled: systemState === null || systemState === void 0 ? void 0 : systemState.systemEnabled, signalDismissed: () => api.signalItemDismissed(id) }), (debug ? { debug } : {})));
     });
@@ -110,0 +110,0 @@ return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: childrenWithState });

lib/es5/components/HelpItem.d.ts

@@ -10,2 +10,3 @@ import * as React from "react";
     id?: HelpTypes.ItemId;
+    debug?: boolean;
     state?: HelpTypes.ItemState;
@@ -21,3 +22,3 @@ flowState?: HelpTypes.FlowState;
  */
-export declare function HelpItem({ position, ...props }: HelpItemProperties): JSX.Element;
+export declare function HelpItem({ position, debug, ...props }: HelpItemProperties): JSX.Element;
 declare type ItemStateInfo = [
@@ -24,0 +25,0 @@ flow: HelpTypes.FlowState,

lib/es5/components/HelpItem.js

@@ -83,3 +83,3 @@ "use strict";
     var _b, _c;
-    var { position = "bottom-right" } = _a, props = __rest(_a, ["position"]);
+    var { position = "bottom-right", debug = false } = _a, props = __rest(_a, ["position", "debug"]);
     const { appTargetsState } = React.useContext(DynamicHelp_1.SystemContext);
@@ -172,3 +172,6 @@ const target = appTargetsState.targetItems[props.target];
             : "rdh-dismiss-margin-right";
-        //console.log("HelpItem render", props.state.target);
+        if (props.state.target && debug) {
+            target.style.borderStyle = "solid";
+            target.style.borderColor = "#fb99aa";
+        }
         return ReactDOM.createPortal((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "rdh-help-item", id: props.id, style: Object.assign({ position: "absolute", margin: props.margin, flexDirection: layout === "right" ? "row" : "row-reverse" }, itemPosition) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "rdh-help-item-custom" }, { children: props.children })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `rdh-help-item-dismiss ${dismissStyle}`, onClick: props.signalDismissed }, { children: "\u2612" }))] })), document.body);
@@ -175,0 +178,0 @@ }

lib/es5/components/HelpProvider.d.ts

 /// <reference types="react" />
-import { DynamicHelpStorageAPI } from "..";
+import { DynamicHelpStorageAPI } from "../DynamicHelpTypes";
 declare type HelpProviderProps = {
     storageApi?: DynamicHelpStorageAPI;
+    debug?: boolean;
     children: JSX.Element | JSX.Element[];
@@ -19,3 +20,3 @@ };
  */
-export declare const HelpProvider: ({ storageApi, ...props }: HelpProviderProps) => JSX.Element;
+export declare const HelpProvider: ({ storageApi, debug, ...props }: HelpProviderProps) => JSX.Element;
 export {};

lib/es5/components/HelpProvider.js

@@ -61,3 +61,5 @@ "use strict";
 const React = __importStar(require("react"));
-const __1 = require("..");
+const storage_1 = require("../storage");
+const DynamicHelp_1 = require("../DynamicHelp");
+const HelpController_1 = require("../components/HelpController");
 /**
@@ -76,3 +78,3 @@ * The component that connects the help flows to the app.
 const HelpProvider = (_a) => {
-    var { storageApi = __1.StorageApi } = _a, props = __rest(_a, ["storageApi"]);
+    var { storageApi = storage_1.StorageApi, debug = false } = _a, props = __rest(_a, ["storageApi", "debug"]);
     const [app, ...helpFlows] = React.Children.toArray(props.children);
@@ -116,4 +118,4 @@ // Here we store the Contoller API functions on our state, when they provided to us by the HelpController...
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.ApiProvider, Object.assign({ value: controllerApi }, { children: app })), (0, jsx_runtime_1.jsx)(__1.HelpController, Object.assign({ provideControllerApi: provideControllerApi, storage: storageApi }, { children: helpFlows }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DynamicHelp_1.ApiProvider, Object.assign({ value: controllerApi }, { children: app })), (0, jsx_runtime_1.jsx)(HelpController_1.HelpController, Object.assign({ provideControllerApi: provideControllerApi, storage: storageApi, debug: debug }, { children: helpFlows }))] }));
 };
 exports.HelpProvider = HelpProvider;

lib/es5/DynamicHelpTypes.d.ts

@@ -22,2 +22,7 @@ export declare type FlowId = string;
 export declare type FlowSwitch = (flow: FlowId, enabled: boolean) => void;
+export declare type DynamicHelpStorageAPI = {
+    set: (key: StorageKey, value: any) => any;
+    remove: (key: StorageKey) => void;
+    get: (key: StorageKey, default_value?: any) => any;
+};
 /**
@@ -24,0 +29,0 @@ * A function passed in on the Controller props,

lib/es5/storage.d.ts

 import * as HelpTypes from "./DynamicHelpTypes";
-export declare type DynamicHelpStorageAPI = {
-    set: (key: HelpTypes.StorageKey, value: any) => any;
-    remove: (key: HelpTypes.StorageKey) => void;
-    get: (key: HelpTypes.StorageKey, default_value?: any) => any;
-};
-export declare const StorageApi: DynamicHelpStorageAPI;
+export declare const StorageApi: HelpTypes.DynamicHelpStorageAPI;
 export declare function set(key: HelpTypes.StorageKey, value: any): any;
 export declare function remove(key: HelpTypes.StorageKey): void;
 export declare function get(key: HelpTypes.StorageKey, default_value?: any): any;

lib/es5/storage.js

@@ -35,2 +35,4 @@ "use strict";
     store[key] = value;
+    //const savedValue = JSON.stringify(value);
+    //console.log("JSON:", savedValue);
     safeLocalStorageSet(`dynamic-help.${key}`, JSON.stringify(value, (_key, value) => value instanceof Set ? [...value] : value));
@@ -37,0 +39,0 @@ return value;

lib/es6/components/HelpController.d.ts

 import * as React from "react";
-import { AppTargetsState, SystemState, TargetId, ItemId, AppApiSetter, FlowId, TargetItemHelpers, DynamicHelpStorageAPI } from "..";
+import { AppTargetsState, SystemState, TargetId, ItemId, AppApiSetter, FlowId, TargetItemHelpers, DynamicHelpStorageAPI } from "../DynamicHelpTypes";
 declare type HelpControllerProps = {
     provideControllerApi: AppApiSetter;
     storage: DynamicHelpStorageAPI;
+    debug: boolean;
     children: JSX.Element | JSX.Element[];
@@ -7,0 +8,0 @@ };

lib/es6/components/HelpController.js

@@ -1,2 +0,2 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
@@ -24,3 +24,16 @@ Copyright (c) 2022 Martin Gregory.
 import * as React from "react";
-import { SystemContextProvider, } from "..";
+import * as ReactDOM from "react-dom";
+import { SystemContextProvider, Api } from "../DynamicHelp";
+/** A handy component when debugging
+ * ... because the state gets saved, making it hard to repeat tests!
+ */
+function FloatingStateReset() {
+    const api = React.useContext(Api);
+    return ReactDOM.createPortal(_jsx("div", Object.assign({ className: "rdh-floating-state-reset", style: {
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            zIndex: 1000,
+        }, onClick: api.resetHelp }, { children: "\u27F3" })), document.body);
+}
 const _resetState = {
@@ -52,2 +65,3 @@ systemEnabled: true,
         this.propagateSystemState = () => {
+            console.log("HelpController state update:", this.systemState);
             this.props.storage.set("system-state", this.systemState);
@@ -88,3 +102,3 @@ this.setState({ systemState: this.systemState });
             // one for each help item target it is rendering.
-            // console.log("target registration", target, targetRef, this.appTargets);
+            console.log("target registration", target, targetRef, this.appTargets);
             this.appTargets = {
@@ -195,13 +209,13 @@ targetItems: Object.assign(Object.assign({}, this.appTargets.targetItems), { [target]: targetRef }),
     render() {
-        console.log("Help Controller has state", this.state.systemState);
-        return (_jsx(_Fragment, { children: _jsx(SystemContextProvider, Object.assign({ value: {
-                    systemState: this.state.systemState,
-                    appTargetsState: this.state.appTargetsState,
-                    api: {
-                        addHelpFlow: this.addHelpFlow,
-                        addHelpItem: this.addHelpItem,
-                        signalItemDismissed: this.signalItemDismissed,
-                    },
-                } }, { children: this.props.children })) }));
+        //console.log("Help Controller has state", this.state.systemState);
+        return (_jsxs(_Fragment, { children: [_jsx(SystemContextProvider, Object.assign({ value: {
+                        systemState: this.state.systemState,
+                        appTargetsState: this.state.appTargetsState,
+                        api: {
+                            addHelpFlow: this.addHelpFlow,
+                            addHelpItem: this.addHelpItem,
+                            signalItemDismissed: this.signalItemDismissed,
+                        },
+                    } }, { children: this.props.children })), this.props.debug && _jsx(FloatingStateReset, {})] }));
     }
 }

lib/es6/components/HelpFlow.d.ts

@@ -6,2 +6,3 @@ /// <reference types="react" />
     showInitially?: boolean;
+    debug?: boolean;
     children: JSX.Element | JSX.Element[];
@@ -18,3 +19,3 @@ };
  */
-export declare const HelpFlow: ({ showInitially, ...props }: HelpFlowProps) => JSX.Element;
+export declare const HelpFlow: ({ showInitially, debug, ...props }: HelpFlowProps) => JSX.Element;
 export {};

lib/es6/components/HelpFlow.js

@@ -49,3 +49,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 export const HelpFlow = (_a) => {
-    var { showInitially = false } = _a, props = __rest(_a, ["showInitially"]);
+    var { showInitially = false, debug = false } = _a, props = __rest(_a, ["showInitially", "debug"]);
     const helpContext = React.useContext(SystemContext);
@@ -56,3 +56,3 @@ const { api, systemState } = helpContext;
         if (!systemState.flows[props.id]) {
-            console.log("Help Flow registration:", props.id);
+            debug ? console.log("Help Flow registration:", props.id) : null;
             api.addHelpFlow(flowId, showInitially);
@@ -81,5 +81,5 @@ console.log("Help Flow - adding children...");
         const id = child.props.id || defaultId(flowId, child.props.target, index);
-        return React.cloneElement(child, Object.assign(Object.assign({}, child.props), { state: systemState === null || systemState === void 0 ? void 0 : systemState.items[id], flowState: systemState === null || systemState === void 0 ? void 0 : systemState.flows[flowId], systemEnabled: systemState === null || systemState === void 0 ? void 0 : systemState.systemEnabled, signalDismissed: () => api.signalItemDismissed(id) }));
+        return React.cloneElement(child, Object.assign(Object.assign(Object.assign({}, child.props), { state: systemState === null || systemState === void 0 ? void 0 : systemState.items[id], flowState: systemState === null || systemState === void 0 ? void 0 : systemState.flows[flowId], systemEnabled: systemState === null || systemState === void 0 ? void 0 : systemState.systemEnabled, signalDismissed: () => api.signalItemDismissed(id) }), (debug ? { debug } : {})));
     });
     return _jsx(_Fragment, { children: childrenWithState });
 };

lib/es6/components/HelpItem.d.ts

@@ -10,2 +10,3 @@ import * as React from "react";
     id?: HelpTypes.ItemId;
+    debug?: boolean;
     state?: HelpTypes.ItemState;
@@ -21,3 +22,3 @@ flowState?: HelpTypes.FlowState;
  */
-export declare function HelpItem({ position, ...props }: HelpItemProperties): JSX.Element;
+export declare function HelpItem({ position, debug, ...props }: HelpItemProperties): JSX.Element;
 declare type ItemStateInfo = [
@@ -24,0 +25,0 @@ flow: HelpTypes.FlowState,

lib/es6/components/HelpItem.js

@@ -57,3 +57,3 @@ var __rest = (this && this.__rest) || function (s, e) {
     var _b, _c;
-    var { position = "bottom-right" } = _a, props = __rest(_a, ["position"]);
+    var { position = "bottom-right", debug = false } = _a, props = __rest(_a, ["position", "debug"]);
     const { appTargetsState } = React.useContext(SystemContext);
@@ -146,3 +146,6 @@ const target = appTargetsState.targetItems[props.target];
             : "rdh-dismiss-margin-right";
-        //console.log("HelpItem render", props.state.target);
+        if (props.state.target && debug) {
+            target.style.borderStyle = "solid";
+            target.style.borderColor = "#fb99aa";
+        }
         return ReactDOM.createPortal(_jsxs("div", Object.assign({ className: "rdh-help-item", id: props.id, style: Object.assign({ position: "absolute", margin: props.margin, flexDirection: layout === "right" ? "row" : "row-reverse" }, itemPosition) }, { children: [_jsx("div", Object.assign({ className: "rdh-help-item-custom" }, { children: props.children })), _jsx("span", Object.assign({ className: `rdh-help-item-dismiss ${dismissStyle}`, onClick: props.signalDismissed }, { children: "\u2612" }))] })), document.body);
@@ -149,0 +152,0 @@ }

lib/es6/components/HelpProvider.d.ts

 /// <reference types="react" />
-import { DynamicHelpStorageAPI } from "..";
+import { DynamicHelpStorageAPI } from "../DynamicHelpTypes";
 declare type HelpProviderProps = {
     storageApi?: DynamicHelpStorageAPI;
+    debug?: boolean;
     children: JSX.Element | JSX.Element[];
@@ -19,3 +20,3 @@ };
  */
-export declare const HelpProvider: ({ storageApi, ...props }: HelpProviderProps) => JSX.Element;
+export declare const HelpProvider: ({ storageApi, debug, ...props }: HelpProviderProps) => JSX.Element;
 export {};

lib/es6/components/HelpProvider.js

@@ -35,3 +35,5 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from "react";
-import { ApiProvider, HelpController, StorageApi, } from "..";
+import { StorageApi } from "../storage";
+import { ApiProvider } from "../DynamicHelp";
+import { HelpController } from "../components/HelpController";
 /**
@@ -50,3 +52,3 @@ * The component that connects the help flows to the app.
 export const HelpProvider = (_a) => {
-    var { storageApi = StorageApi } = _a, props = __rest(_a, ["storageApi"]);
+    var { storageApi = StorageApi, debug = false } = _a, props = __rest(_a, ["storageApi", "debug"]);
     const [app, ...helpFlows] = React.Children.toArray(props.children);
@@ -90,3 +92,3 @@ // Here we store the Contoller API functions on our state, when they provided to us by the HelpController...
     };
-    return (_jsxs(_Fragment, { children: [_jsx(ApiProvider, Object.assign({ value: controllerApi }, { children: app })), _jsx(HelpController, Object.assign({ provideControllerApi: provideControllerApi, storage: storageApi }, { children: helpFlows }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ApiProvider, Object.assign({ value: controllerApi }, { children: app })), _jsx(HelpController, Object.assign({ provideControllerApi: provideControllerApi, storage: storageApi, debug: debug }, { children: helpFlows }))] }));
 };

lib/es6/DynamicHelpTypes.d.ts

@@ -22,2 +22,7 @@ export declare type FlowId = string;
 export declare type FlowSwitch = (flow: FlowId, enabled: boolean) => void;
+export declare type DynamicHelpStorageAPI = {
+    set: (key: StorageKey, value: any) => any;
+    remove: (key: StorageKey) => void;
+    get: (key: StorageKey, default_value?: any) => any;
+};
 /**
@@ -24,0 +29,0 @@ * A function passed in on the Controller props,

lib/es6/storage.d.ts

 import * as HelpTypes from "./DynamicHelpTypes";
-export declare type DynamicHelpStorageAPI = {
-    set: (key: HelpTypes.StorageKey, value: any) => any;
-    remove: (key: HelpTypes.StorageKey) => void;
-    get: (key: HelpTypes.StorageKey, default_value?: any) => any;
-};
-export declare const StorageApi: DynamicHelpStorageAPI;
+export declare const StorageApi: HelpTypes.DynamicHelpStorageAPI;
 export declare function set(key: HelpTypes.StorageKey, value: any): any;
 export declare function remove(key: HelpTypes.StorageKey): void;
 export declare function get(key: HelpTypes.StorageKey, default_value?: any): any;

lib/es6/storage.js

@@ -32,2 +32,4 @@ /*
     store[key] = value;
+    //const savedValue = JSON.stringify(value);
+    //console.log("JSON:", savedValue);
     safeLocalStorageSet(`dynamic-help.${key}`, JSON.stringify(value, (_key, value) => value instanceof Set ? [...value] : value));
@@ -34,0 +36,0 @@ return value;

package.json

 {
   "name": "react-dynamic-help",
   "description": "React Dynamic Help - Create flows of helpful popups in your React App",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "repository": {
@@ -6,0 +6,0 @@ "type": "git",

No alert changes

Improved metrics

Total package byte prevSize

98203

increased by2.71%

Lines of code

2048

increased by2.5%

No dependency changes