@adcops/autocore-react 3.3.8 → 3.3.10

package/additional-docs/ButtonApiSpecs.md

@@ -1,48 +1,48 @@
-# Button API
-
-## Overview
-Buttons in an HMI need to accomplish the following.
-
-- Indication of state
-- - Properties:
-- - - topic? : The name of the topic to monitor for state indicator.
-- - - onColor? : The button severity to apply when the state is TRUE. 
-- - - offColor? : The button severity to apply state is FALSE.
-- - - onLabel? : Text displayed when the state is TRUE. If null or undefined, the label property is used.
-- - - offLabel? : Text displayed when the state is FALSE. If null or undefined, the label property is used.
-- - PrimeReact severity constants should be acceptable for onColor and offColor. However, the following should also map:
-- - - "on" -> "success"
-- - - "off" -> "secondary"
-- - If topic is not undefined or null, but state is undefined or null, then the button is invalid.
-- - - Background: black Foreground: gray
-- - - This style most likely need to be created as a constant.
-- Signal (dispath) events
-- - This is more complicated because a signal has three properties:
-- - - The name of the command that must be invoked. 
-- - - The topic for that command.
-- - - An optional value. For pushbuttons, it is common for that value to be TRUE when the button is clicked or pressed and FALSE when released.
-- - - - It is also common for an invert property so that the direction of those signals are inverted.
-- - Edge cases that need more complicated handling (invoking events with additional arguments) can be handled using standard button events.
-- - HMI buttons usually support sending signals on the following input modes:
-- - - TAP : When the button is pressed down, a TRUE signal is broadcast. When released, a FALSE signal is broadcast.
-- - - - This mode is meant to simulate the behavior of an actual industrial pushbutton.
-- - - - This is, by far, the most common use case.
-- - - TOGGLE: When the button is clicked, it sends and sets its state to the inverse of its current state.
-- - - PRESSED : When the button is pressed, it signals the topic and the TRUE value, though the value is usually ignored.
-- - - RELEASED : When the button is released, it signals the topic and the FALSE value, though the value is usually ignored.
-- - - The signal values listed here would be inverted if the inverted property is true.
-- - While theoretically possible that a button have need to support both a tap and toggle, or pressed/relesaed, these are extreme edge cases.
-- - - Therefore, instead of creating a massive number of properties, we shall create an inputMode property.
-- - Properties
-- - - inputMode: Tap, Toggle, pressed, released
-- - - command: name of the command to invoke
-- - - commandArgs: Arguments sent with the command. Usually this will be an object containing the topic name and the value.
-- - - disableTopic : A topic the button can monitor to disable dispatching signals on events. 
-- - - invisbleTopic : A topic the button can monitor to hide its visibility.
-- Because buttons are such a common function, we will extend the PrimeReact Button class to have these features.
-- These features are commonly needed, so we will also make a HOC function to add these properties and functions to an existing component.
-- Input mode should be enumerated. 
-- The buttons should default to being "raised," which is a standard attribute of PrimeReact buttons.
-
-
-
+# Button API
+
+## Overview
+Buttons in an HMI need to accomplish the following.
+
+- Indication of state
+- - Properties:
+- - - topic? : The name of the topic to monitor for state indicator.
+- - - onColor? : The button severity to apply when the state is TRUE. 
+- - - offColor? : The button severity to apply state is FALSE.
+- - - onLabel? : Text displayed when the state is TRUE. If null or undefined, the label property is used.
+- - - offLabel? : Text displayed when the state is FALSE. If null or undefined, the label property is used.
+- - PrimeReact severity constants should be acceptable for onColor and offColor. However, the following should also map:
+- - - "on" -> "success"
+- - - "off" -> "secondary"
+- - If topic is not undefined or null, but state is undefined or null, then the button is invalid.
+- - - Background: black Foreground: gray
+- - - This style most likely need to be created as a constant.
+- Signal (dispath) events
+- - This is more complicated because a signal has three properties:
+- - - The name of the command that must be invoked. 
+- - - The topic for that command.
+- - - An optional value. For pushbuttons, it is common for that value to be TRUE when the button is clicked or pressed and FALSE when released.
+- - - - It is also common for an invert property so that the direction of those signals are inverted.
+- - Edge cases that need more complicated handling (invoking events with additional arguments) can be handled using standard button events.
+- - HMI buttons usually support sending signals on the following input modes:
+- - - TAP : When the button is pressed down, a TRUE signal is broadcast. When released, a FALSE signal is broadcast.
+- - - - This mode is meant to simulate the behavior of an actual industrial pushbutton.
+- - - - This is, by far, the most common use case.
+- - - TOGGLE: When the button is clicked, it sends and sets its state to the inverse of its current state.
+- - - PRESSED : When the button is pressed, it signals the topic and the TRUE value, though the value is usually ignored.
+- - - RELEASED : When the button is released, it signals the topic and the FALSE value, though the value is usually ignored.
+- - - The signal values listed here would be inverted if the inverted property is true.
+- - While theoretically possible that a button have need to support both a tap and toggle, or pressed/relesaed, these are extreme edge cases.
+- - - Therefore, instead of creating a massive number of properties, we shall create an inputMode property.
+- - Properties
+- - - inputMode: Tap, Toggle, pressed, released
+- - - command: name of the command to invoke
+- - - commandArgs: Arguments sent with the command. Usually this will be an object containing the topic name and the value.
+- - - disableTopic : A topic the button can monitor to disable dispatching signals on events. 
+- - - invisbleTopic : A topic the button can monitor to hide its visibility.
+- Because buttons are such a common function, we will extend the PrimeReact Button class to have these features.
+- These features are commonly needed, so we will also make a HOC function to add these properties and functions to an existing component.
+- Input mode should be enumerated. 
+- The buttons should default to being "raised," which is a standard attribute of PrimeReact buttons.
+
+
+

package/additional-docs/GlobalEventEmitter.md

@@ -1,244 +1,244 @@
-
-
-This is a quick example that needs to be updated. Stay tuned.
-
-
-## Wrap the application in the EventEmitterContext
-
-```
-
-// App.js or App.tsx
-
-import React from 'react';
-import { EventEmitterProvider } from "autocore-react/core/EventEmitterContext.js";
-import ContentView from 'path-to/ContentView';
-
-const App = () => {
-  return (
-    <EventEmitterProvider>
-      <ContentView />
-      {/* Other components */}
-    </EventEmitterProvider>
-  );
-};
-
-export default App;
-
-```
-
-
-## Subscribing in a component
-
-```
-import React, { useState, useEffect, useContext } from 'react';
-import { Button } from "primereact/button";
-import { ValueDisplay } from 'autocore-react/components/ValueDisplay';
-import { Indicator, IndicatorGreen, IndicatorOff } from "autocore-react/components/Indicator";
-import { EventEmitterContext } from '../path/to/EventEmitterContext'; // Adjust the import path as necessary
-
-export const ContentView: React.FC = () => {
-    const [count, setCount] = useState(0);
-    const [blink, setBlink] = useState(false);
-    const [controlPower, setControlPower] = useState<number | string | null | undefined>(0);
-    const { subscribe } = useContext(EventEmitterContext);
-
-    useEffect(() => {
-        console.log("Setting up interval.");
-
-        const intervalId = setInterval(() => {
-            console.log("blink");
-            setBlink(blink => !blink);
-        }, 1000);
-
-        // Subscribe to the 'there-is-no-spoon' topic
-        const unsubscribe = subscribe('there-is-no-spoon', (value) => {
-            setControlPower(value);
-        });
-
-        return () => {
-            console.log("Cleaning up.");
-            clearInterval(intervalId);
-            unsubscribe(); // Unsubscribe when the component unmounts
-        }
-    }, [subscribe]);
-
-    const incrementCount = () => {
-        setCount(count + 1);
-    };
-
-    return (
-        <div>
-            <p>{count}</p>
-            <Button onClick={incrementCount}>Increment</Button>
-            <br />
-            <div>
-                Maximum Power: <ValueDisplay value={0.34} x={200} y={320} width={100} height={20} format="0%"></ValueDisplay>
-            </div>
-            <div>
-                Control Power: <Indicator value={blink} onColor={IndicatorGreen} offColor={IndicatorOff} />
-            </div>
-            <div>
-                Received Power: <ValueDisplay value={controlPower} x={200} y={350} width={100} height={20} format="0%"></ValueDisplay>
-            </div>
-        </div>
-    );
-};
-```
-
-
-
-
-## Publishing a value from Typescript.
-
-This is a shit example. Usually, use the Hub singleton. However, this example displays the concept.
-
-Implement a publisher function. 
-
-```
-// EventPublisher.ts
-import React, { useContext } from 'react';
-import { EventEmitterContext } from '../path/to/EventEmitterContext'; // Adjust the import path as necessary
-
-export const publishToThereIsNoSpoon = (topic: string, payload: any) => {
-    const { dispatch } = useContext(EventEmitterContext);
-
-    dispatch({
-        topic: topic,
-        payload: payload,
-    });
-};
-
-```
-
-Publish from a component:
-
-```
-import React from 'react';
-import { publishToThereIsNoSpoon } from './EventPublisher';
-
-const SomeComponent: React.FC = () => {
-    const handleClick = () => {
-        // Publish an event with some payload
-        publishToThereIsNoSpoon("New Value");
-    };
-
-    return (
-        <button onClick={handleClick}>Publish Event</button>
-    );
-};
-
-export default SomeComponent;
-
-
-```
-
-
-
-
-
-
-
-### Component Example:
-```
-
-import React, { useState, useEffect, useContext } from 'react';
-import { Button } from "primereact/button";
-import { ValueDisplay } from 'autocore-react/components/ValueDisplay';
-import { Indicator, IndicatorGreen, IndicatorOff } from "autocore-react/components/Indicator";
-import {EventEmitterContext} from "autocore-react/core/EventEmitterContext";
-import {ValueSimulator} from "autocore-react/core/ValueSimulator";
-
-
-
-export const ContentView: React.FC = () => {
-    const [count, setCount] = useState(0);
-    const [blink, setBlink] = useState(false);
-    const [controlPower, setControlPower] = useState(false);
-    const {dispatch, subscribe, unsubscribe} = useContext(EventEmitterContext);
-
-    const simulator = new ValueSimulator(dispatch);
-
-
-    useEffect(() => {
-
-        simulator.start();
-
-
-        // Subscribe to the 'there-is-no-spoon' topic
-        // TODO: add an unsubscribe feature
-        const unsubscribeControlPower = subscribe('value-simulator-bBit1', (value) => {
-            console.log(`value-simulator-bBit1: ${value}`);
-            setControlPower(value);
-        });        
-
-        const unsubscribeBlink = subscribe('value-simulator-bBit2', (value) => {
-            console.log(`value-simulator-bBit2: ${value}`);
-            setBlink(value);
-        });        
-
-
-        const unsubscribePower = subscribe('value-simulator-iRamp1', (value) => {
-            console.log(`value-simulator-iRamp1: ${value}`);
-            setCount(value);
-        });        
-
-
-        // console.log(`IntervalID: ${intervalId}`);
-
-        return () => {
-            unsubscribe(unsubscribeControlPower);
-            unsubscribe(unsubscribeBlink);
-            unsubscribe(unsubscribePower);
-            simulator.stop();
-        }
-    }, [] );
-
-    const incrementCount = () => {
-        setCount(count + 1);
-    };
-
-    
-
-    return (
-        <div>
-            <p>{count}</p>
-            <Button onClick={incrementCount}>Increment</Button>
-            <br />
-            <div>
-                Maximum Power: <ValueDisplay value={count / 100} x={200} y={320} width={100} height={20} format="0%"></ValueDisplay>
-            </div>
-            <div>
-                Control Power: <Indicator value={controlPower}></Indicator>
-            </div>            
-            <div>
-                Blink: <Indicator value={blink} onColor={IndicatorGreen} offColor={IndicatorOff} />
-            </div>
-
-        </div>
-
-    );
-};
-
-
-```
-
-
-
-
-# Higher Order Component Subscription
-
-As it is infeasible for autocore-react to modify every possible component to streamline subscription
-and dispatching capabilities, we add Higher Order Component (HOC) functions to easily adapt a generic
-component into one that can subscribe to events and values.
-
-
-// For a component expecting 'value' prop
-```
-
-const SubscribedValueDisplay = hocAddSubscription(ValueDisplay, 'some-topic', 'value');
-```
-
-And use it in your component:
-```
-<SubscribedValueDisplay x={200} y={320} width={100} height={20} format="0%" />
+
+
+This is a quick example that needs to be updated. Stay tuned.
+
+
+## Wrap the application in the EventEmitterContext
+
+```
+
+// App.js or App.tsx
+
+import React from 'react';
+import { EventEmitterProvider } from "autocore-react/core/EventEmitterContext.js";
+import ContentView from 'path-to/ContentView';
+
+const App = () => {
+  return (
+    <EventEmitterProvider>
+      <ContentView />
+      {/* Other components */}
+    </EventEmitterProvider>
+  );
+};
+
+export default App;
+
+```
+
+
+## Subscribing in a component
+
+```
+import React, { useState, useEffect, useContext } from 'react';
+import { Button } from "primereact/button";
+import { ValueDisplay } from 'autocore-react/components/ValueDisplay';
+import { Indicator, IndicatorGreen, IndicatorOff } from "autocore-react/components/Indicator";
+import { EventEmitterContext } from '../path/to/EventEmitterContext'; // Adjust the import path as necessary
+
+export const ContentView: React.FC = () => {
+    const [count, setCount] = useState(0);
+    const [blink, setBlink] = useState(false);
+    const [controlPower, setControlPower] = useState<number | string | null | undefined>(0);
+    const { subscribe } = useContext(EventEmitterContext);
+
+    useEffect(() => {
+        console.log("Setting up interval.");
+
+        const intervalId = setInterval(() => {
+            console.log("blink");
+            setBlink(blink => !blink);
+        }, 1000);
+
+        // Subscribe to the 'there-is-no-spoon' topic
+        const unsubscribe = subscribe('there-is-no-spoon', (value) => {
+            setControlPower(value);
+        });
+
+        return () => {
+            console.log("Cleaning up.");
+            clearInterval(intervalId);
+            unsubscribe(); // Unsubscribe when the component unmounts
+        }
+    }, [subscribe]);
+
+    const incrementCount = () => {
+        setCount(count + 1);
+    };
+
+    return (
+        <div>
+            <p>{count}</p>
+            <Button onClick={incrementCount}>Increment</Button>
+            <br />
+            <div>
+                Maximum Power: <ValueDisplay value={0.34} x={200} y={320} width={100} height={20} format="0%"></ValueDisplay>
+            </div>
+            <div>
+                Control Power: <Indicator value={blink} onColor={IndicatorGreen} offColor={IndicatorOff} />
+            </div>
+            <div>
+                Received Power: <ValueDisplay value={controlPower} x={200} y={350} width={100} height={20} format="0%"></ValueDisplay>
+            </div>
+        </div>
+    );
+};
+```
+
+
+
+
+## Publishing a value from Typescript.
+
+This is a shit example. Usually, use the Hub singleton. However, this example displays the concept.
+
+Implement a publisher function. 
+
+```
+// EventPublisher.ts
+import React, { useContext } from 'react';
+import { EventEmitterContext } from '../path/to/EventEmitterContext'; // Adjust the import path as necessary
+
+export const publishToThereIsNoSpoon = (topic: string, payload: any) => {
+    const { dispatch } = useContext(EventEmitterContext);
+
+    dispatch({
+        topic: topic,
+        payload: payload,
+    });
+};
+
+```
+
+Publish from a component:
+
+```
+import React from 'react';
+import { publishToThereIsNoSpoon } from './EventPublisher';
+
+const SomeComponent: React.FC = () => {
+    const handleClick = () => {
+        // Publish an event with some payload
+        publishToThereIsNoSpoon("New Value");
+    };
+
+    return (
+        <button onClick={handleClick}>Publish Event</button>
+    );
+};
+
+export default SomeComponent;
+
+
+```
+
+
+
+
+
+
+
+### Component Example:
+```
+
+import React, { useState, useEffect, useContext } from 'react';
+import { Button } from "primereact/button";
+import { ValueDisplay } from 'autocore-react/components/ValueDisplay';
+import { Indicator, IndicatorGreen, IndicatorOff } from "autocore-react/components/Indicator";
+import {EventEmitterContext} from "autocore-react/core/EventEmitterContext";
+import {ValueSimulator} from "autocore-react/core/ValueSimulator";
+
+
+
+export const ContentView: React.FC = () => {
+    const [count, setCount] = useState(0);
+    const [blink, setBlink] = useState(false);
+    const [controlPower, setControlPower] = useState(false);
+    const {dispatch, subscribe, unsubscribe} = useContext(EventEmitterContext);
+
+    const simulator = new ValueSimulator(dispatch);
+
+
+    useEffect(() => {
+
+        simulator.start();
+
+
+        // Subscribe to the 'there-is-no-spoon' topic
+        // TODO: add an unsubscribe feature
+        const unsubscribeControlPower = subscribe('value-simulator-bBit1', (value) => {
+            console.log(`value-simulator-bBit1: ${value}`);
+            setControlPower(value);
+        });        
+
+        const unsubscribeBlink = subscribe('value-simulator-bBit2', (value) => {
+            console.log(`value-simulator-bBit2: ${value}`);
+            setBlink(value);
+        });        
+
+
+        const unsubscribePower = subscribe('value-simulator-iRamp1', (value) => {
+            console.log(`value-simulator-iRamp1: ${value}`);
+            setCount(value);
+        });        
+
+
+        // console.log(`IntervalID: ${intervalId}`);
+
+        return () => {
+            unsubscribe(unsubscribeControlPower);
+            unsubscribe(unsubscribeBlink);
+            unsubscribe(unsubscribePower);
+            simulator.stop();
+        }
+    }, [] );
+
+    const incrementCount = () => {
+        setCount(count + 1);
+    };
+
+    
+
+    return (
+        <div>
+            <p>{count}</p>
+            <Button onClick={incrementCount}>Increment</Button>
+            <br />
+            <div>
+                Maximum Power: <ValueDisplay value={count / 100} x={200} y={320} width={100} height={20} format="0%"></ValueDisplay>
+            </div>
+            <div>
+                Control Power: <Indicator value={controlPower}></Indicator>
+            </div>            
+            <div>
+                Blink: <Indicator value={blink} onColor={IndicatorGreen} offColor={IndicatorOff} />
+            </div>
+
+        </div>
+
+    );
+};
+
+
+```
+
+
+
+
+# Higher Order Component Subscription
+
+As it is infeasible for autocore-react to modify every possible component to streamline subscription
+and dispatching capabilities, we add Higher Order Component (HOC) functions to easily adapt a generic
+component into one that can subscribe to events and values.
+
+
+// For a component expecting 'value' prop
+```
+
+const SubscribedValueDisplay = hocAddSubscription(ValueDisplay, 'some-topic', 'value');
+```
+
+And use it in your component:
+```
+<SubscribedValueDisplay x={200} y={320} width={100} height={20} format="0%" />
 ``````

package/additional-docs/general_recommendations.md

@@ -1,22 +1,22 @@
-# General Recommendations
-
-These recommendations will help you skip over all the pitfalls we've already worked through.
-
-## Accepting Input
-
-PrimeReact/InputGroup makes it easy to group a label, input field, units and button into the same contiguous "block." In general,
-the user is best served by using InputGroup when accepting user input. Trying to put a similar effect together with a custom layout or CSS
-tends to be a waste of time and effort.
-
-See examples here: [InputGroup](https://primereact.org/inputgroup/ "https://primereact.org/inputgroup/")
-
-### Numeric input
-
-Use PrimeReact/InputNumber to filter numeric input as needed. If you need to filter programatically or the InputNumber field simply
-won't work for your application, core/MaskPatterns/RegExMaskPatterns enumerates regular expression constants that can be used
-to filter/validate input.
-
-### Masking other inputs
-
-Use PrimeReact/InputMask to filter other data as needed. We provide core/MaskPatterns/PrimeReactMaskPatterns for some common
-masks.
+# General Recommendations
+
+These recommendations will help you skip over all the pitfalls we've already worked through.
+
+## Accepting Input
+
+PrimeReact/InputGroup makes it easy to group a label, input field, units and button into the same contiguous "block." In general,
+the user is best served by using InputGroup when accepting user input. Trying to put a similar effect together with a custom layout or CSS
+tends to be a waste of time and effort.
+
+See examples here: [InputGroup](https://primereact.org/inputgroup/ "https://primereact.org/inputgroup/")
+
+### Numeric input
+
+Use PrimeReact/InputNumber to filter numeric input as needed. If you need to filter programatically or the InputNumber field simply
+won't work for your application, core/MaskPatterns/RegExMaskPatterns enumerates regular expression constants that can be used
+to filter/validate input.
+
+### Masking other inputs
+
+Use PrimeReact/InputMask to filter other data as needed. We provide core/MaskPatterns/PrimeReactMaskPatterns for some common
+masks.