@hedia/recommendation-screen 2.1.14 → 2.1.16

package/src/RecommendationScreen.js

@@ -8,7 +8,7 @@ import RecommendedCarbs from "./components/RecommendedCarbs";
 import RecommendedInsulin from "./components/RecommendedInsulin";
 import Remeasure from "./components/Remeasure";
 import * as Calculator from "@hedia/recommendation-calculator";
-import { Milliseconds } from "@hedia/types";
+import { Milliseconds, } from "@hedia/types";
 import { I18nProvider } from "@lingui/react";
 import Emotion from "./components/mood/Emotion";
 import TransferToLogbook from "./components/TransferToLogbook";
@@ -27,10 +27,50 @@ const { InfoBarTestIds, RecommendationScreenTestIds } = Testing.Id;
 // Ignoring long timer warnings
 // https://github.com/facebook/react-native/issues/12981#issuecomment-652745831
 YellowBox.ignoreWarnings([`Setting a timer`]);
+/**
+ * The RecommendationScreen is the React component that passes relevant inputs to the recommendation calculation module and presents
+ * the resulting recommendation along with related messages or warnings to the user.
+ * The RecommendationScreen component accepts properties with the user’s settings/preferences and other inputs needed for calculating a recommendation.
+ * @noInheritDoc
+ */
 export default class RecommendationScreen extends React.Component {
+    /**
+     * Steps:
+     * 1. Call the super() method with the props.
+     * 2. Execute the following steps and if an exception is thrown, catch it, set the hasError member variable to true and call the onError callback prop with the caught exception as argument:
+     * 	- Call the validateParams() method with the props as argument
+     * 	- Set the recommendationDate member to the current date and time
+     * 	- Set the language by using the language prop as argument for calling changeLanguage()
+     * 	- Unpack recentBoluses from the calculatorParams prop.
+     * 	- Use the calculatorParams prop as argument for calling calculateRecommendation() and unpack all of the resulting values.
+     * 	- Copy the carbRecommendation to the suggestedCarbs member variable.
+     * 	- Set the following state variables:
+     * 		- Set remeasureTime to the return value from calling the getBGLevelRemeasurementReminder() method.
+     * 		- Set isRecommendationDisplayed to be false if the length of recentBoluses is 0 or false otherwise.
+     * 		- Set insulinRecommendation to be the bolus insulin recommendation rounded using roundValue().
+     * 		- Set wasLimited to the wasLimited return value from calling calculateRecommendation() above.
+     * 		- Set activityReduction to the reduction returned from the calculation result.
+     * 		- Set carbRecommendation to the recommendation returned from the calculation result.
+     * 		- Set activeInsulin to the estimation returned from the calculation result.
+     * 		- Set enteredCarbs, enteredInsulin, selectedMood to null.
+     * 		- Set recommendationModal to be true if wasLimited is true or if carbRecommendation after being rounded is truthy or if the return value from calling the getBGLevelAttentionMessage() method is truthy.
+     * 		- Set showExitModal, showLimitationMessage, showTimeoutModal to be false.
+     * 3. Start a 15 minute timer assigned to the timer member variable using the setTimeout() function. When the timer expires, call the showTimeoutModal() method.
+     * @param props The data required to initialise the Recommendation Screen
+     */
     constructor(props) {
         super(props);
+        /**
+         * A guard against displaying wrong or dangerous information to the user.
+         * If an error has occurred, this variable will be set to true and an empty placeholder will be rendered instead of the normal recommendation screen.
+         */
         this.hasError = false;
+        /**
+         * Steps:
+         * 1. Evaluate a boolean called isOlderThan15Minutes to indicate whether the recommendationDate member variable represents a time more than 15 minutes ago.
+         * 2. If nextAppState is ‘active’ and isOlderThan15Minutes is true then call the showTimeoutModal() method.
+         * @param nextAppState The new state of the app.
+         */
         this.handleAppStateChange = (nextAppState) => {
             const time = this.recommendationDate.getTime();
             const isOlderThan15Minutes = global.Date.now() - time > Milliseconds.Minute * 15;
@@ -38,9 +78,26 @@ export default class RecommendationScreen extends React.Component {
                 this.showTimeoutModal();
             }
         };
+        /**
+         * Steps:
+         * 1. Set the showTimeoutModal state variable to be true. Use a callback function to call the showBolusBar prop callback function with false as argument when the state has been updated.
+         * */
         this.showTimeoutModal = () => {
             this.setState({ showTimeoutModal: true }, () => this.props.showBolusBar(!this.state.showTimeoutModal));
         };
+        /**
+         * Make a new insulin calculation and set the result to be displayed to the user.
+         *
+         * Steps:
+         * 1. Use calculatorParams as an argument for calling calculateRecommendation(). Unpack bolus, wasLimited, and activityReduction from the result.
+         * 2. Set the following state variables:
+         * 	- Set insulinRecommendation to the bolus rounded using the roundValue() function.
+         * 	- Set enteredInsulin to be undefined.
+         * 	- Set wasLimited to be the value returned from the insulin calculator.
+         * 	- Set activityReduction to be the value returned from the insulin calculator.
+         * 	- Set showLimitationMessage to be the wasLimited value returned from the insulin calculator.
+         * @param calculatorParams The input values for the bolus calculator itself.
+         */
         this.recalculateInsulin = (calculatorParams) => {
             const { bolus, wasLimited, activityReduction } = Calculator.calculateRecommendation(calculatorParams);
             this.setState({
@@ -51,6 +108,15 @@ export default class RecommendationScreen extends React.Component {
                 showLimitationMessage: wasLimited,
             });
         };
+        /**
+         * Handle presses on the exit button in the header bar.
+         *
+         * Steps:
+         * 1. If the insulin recommendation is being displayed (the isRecommendationDisplayed state variable is true):
+         *  	- Set the showExitModal state variable to true. When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showExitModal state variable as argument.
+         * 2. Else:
+         *  	- Call the exitCallback prop callback function.
+         */
         this.onExit = () => {
             if (this.state.isRecommendationDisplayed) {
                 this.setState({ showExitModal: true }, () => this.props.showBolusBar(!this.state.showExitModal));
@@ -59,21 +125,66 @@ export default class RecommendationScreen extends React.Component {
                 this.props.exitCallback();
             }
         };
+        /**
+         * Hide the modal that shows attention messages.
+         *
+         * Steps:
+         * 1. Set the recommendationModal state variable to false.
+         */
         this.hideAttentionModal = () => {
             this.setState({ recommendationModal: false });
         };
+        /**
+         * Hide the modal that shows attention messages.
+         *
+         * Steps:
+         * 1. Set the showLimitationMessage state variable to false.
+         */
         this.hideLimitationMessage = () => {
             this.setState({ showLimitationMessage: false });
         };
+        /**
+         * Hide the exit modal. To be used when the user closes the modal directly or in some way exits the recommendation screen.
+         *
+         * Steps:
+         * 1. Set the showExitModal state variable to false.
+         *    When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showExitModal state variable as argument.
+         */
         this.hideExitModal = () => {
             this.setState({ showExitModal: false }, () => this.props.showBolusBar(!this.state.showExitModal));
         };
+        /**
+         * Hide the modal that warns the user that their recommendation is old.
+         *
+         * Steps:
+         * 1. Set the showTimeoutModal state variable to false.
+         * 	  When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showTimeoutModal state variable as argument.
+         */
         this.hideTimeoutModal = () => {
             this.setState({ showTimeoutModal: false }, () => this.props.showBolusBar(!this.state.showTimeoutModal));
         };
+        /**
+         * Used as a callback function for the Remeasure component to update the state when the remeasure time slider’s value changes.
+         *
+         * Steps:
+         * 1. Set the remeasureTime state variable to the value of the remeasureTime argument.
+         * @param remeasureTime The number of hours for which to wait before reminding the user to measure their BGL again. 0 indicates that the user should not be reminded.
+         */
         this.updateRemeasureTime = (remeasureTime) => {
             this.setState({ remeasureTime });
         };
+        /**
+         * Handle what happens if the user taps “No” to the question about injecting insulin within the last 4 hours.
+         * The card that prompts the user to answer if they have injected insulin within the last 4 hours shall be hidden and
+         * the screen shall automatically be scrolled to the bottom so the user can see the now visible “Transfer to logbook” button.
+         *
+         * Steps:
+         * 1. Set the isRecommendationDisplayed state variable to be true.
+         * 2. As a callback to the setState() method, define a new anonymous function that calls setTimeout() with a duration of 0 milliseconds.
+         *    When the time expires, call the scrollToEnd() method of the scrollView member, with the animated argument set to true.
+         *    This ensures that the scroll event happens after all other events that get queued to happen at the same time,
+         *    so all relevant elements are visible on the screen and the scroll happens reliably.
+         */
         this.handleNoRecentInsulin = () => {
             this.setState({ isRecommendationDisplayed: true }, () => {
                 setTimeout(() => {
@@ -81,38 +192,113 @@ export default class RecommendationScreen extends React.Component {
                 }, 0);
             });
         };
+        /**
+         * Handle what happens when the user changes the content of the additional carbohydrates input field.
+         *
+         * Steps:
+         * 1. Set the enteredCarbs state variable to the value of the enteredCarbs argument.
+         * 2. As a callback to the setState() method, define a new anonymous function that calls the recalculateInsulin() function using
+         *    a copy of the calculatorParams prop where the carbohydrates property has been overwritten to be
+         *    the sum of the carbohydrates property of the calculatorParams prop and the enteredCarbs argument.
+         * @param enteredCarbs The amount of carbohydrates in grams that has been entered in the additional carbohydrates input field.
+         */
         this.updateCarbRecommendation = (enteredCarbs) => {
             const providedCarbs = this.props.calculatorParams.carbohydrates;
             this.setState({ enteredCarbs }, () => {
                 this.recalculateInsulin({ ...this.props.calculatorParams, carbohydrates: providedCarbs + enteredCarbs });
             });
         };
+        /**
+         * Handle what happens when the cross button by the additional carbohydrates button is tapped.
+         *
+         * Steps:
+         * 1. Set both the enteredCarbs and the carbRecommendation state variables to null.
+         * 2. As a callback to the setState() method, define a new anonymous function that calls the recalculateInsulin() function using a copy of the calculatorParams prop.
+         */
         this.removeCarbRecommendation = () => {
             this.setState({ enteredCarbs: null, carbRecommendation: null }, () => this.recalculateInsulin({ ...this.props.calculatorParams }));
         };
+        /**
+         * Handle what happens when the user is recommended to eat additional carbohydrates but taps the decline button.
+         *
+         * Steps:
+         * 1. Call the hideAttentionModal() method.
+         * 2. Call the removeCarbRecommendation() method.
+         * 3. Call the carbRecommendationAnswer() prop callback function with false as argument.
+         */
         this.declineCarbRecommendation = () => {
             this.hideAttentionModal();
             this.removeCarbRecommendation();
             this.props.carbRecommendationAnswer(false);
         };
+        /**
+         * Handle what happens when the user is recommended to eat additional carbohydrates and they tap the accept button.
+         *
+         * Steps:
+         * 1. Call the hideAttentionModal() method.
+         * 2. Call the carbRecommendationAnswer() prop callback function with true as argument.
+         */
         this.acceptCarbRecommendation = () => {
             this.hideAttentionModal();
             this.props.carbRecommendationAnswer(true);
         };
+        /**
+         * Handles what happens when the user hits the “close calculation”-button on the exit modal.
+         *
+         * Steps:
+         * 1. If the showExitModal state variable is true then call the hideExitModal() method. Otherwise, call the hideTimeoutModal() method
+         * 2. Call the closeCalculationCallback prop callback function.
+         */
         this.closeCalculation = () => {
             this.state.showExitModal ? this.hideExitModal() : this.hideTimeoutModal();
             this.props.closeCalculationCallback();
         };
+        /**
+         * Close the current recommendation and start a new bolus calculation.
+         *
+         * Steps:
+         * 1. Call the hideTimeoutModal() method.
+         * 2. Call the restartCalculation prop callback function.
+         */
         this.restartCalculation = () => {
             this.hideTimeoutModal();
             this.props.restartCalculation();
         };
+        /**
+         * Used as a callback function for the Emotion component to update the state when a mood icon is tapped.
+         *
+         * Steps:
+         * 1. Set the selectedMood state variable to the value of the selectedMood argument.
+         * @param selectedMood he mood that should be selected going forward or null if no mood should be selected.
+         */
         this.handleMoodSelected = (selectedMood) => {
             this.setState({ selectedMood });
         };
+        /**
+         * Handle what happens when the user changes the content of the insulin input field.
+         *
+         * Steps:
+         * 1. Set the enteredInsulin state variable to the value of the enteredInsulin argument.
+         * @param enteredInsulin The amount of insulin (in units) that has been entered in the insulin input field.
+         */
         this.updateInsulinRecommendation = (enteredInsulin) => {
             this.setState({ enteredInsulin });
         };
+        /**
+         * Handle what happens when the “Transfer to Logbook” button is pressed.
+         * Namely, the entered data should be saved in a logbook entry and the recommendation screen should be closed.
+         *
+         * Steps:
+         * 1. Unpack the enteredCarbs, enteredInsulin, insulinRecommendation, remeasureTime, and showExitModal state variables
+         * 2. Create an IResult object called carbs consisting of suggestedCarbs and enteredCarbs.
+         * 3. Create an IResult object called Insulin consisting of insulinRecommendation and enteredInsulin.
+         * 4. If showExitModal is true then call the hideExitModal() method. otherwise call the hideTimeoutModal() method.
+         * 5. Call the transferToLogbook prop callback function with the following arguments:
+         * 	- Set the carbs argument to the carbs IResult object.
+         * 	- Set the insulin argument to the insulin IResult object.
+         * 	- Set the reminder argument to the remeasureTime state variable.
+         * 	- Set the recommendationDate argument to the recommendationDate member variable.
+         */
         this.handleTransfer = () => {
             const { enteredCarbs, enteredInsulin, insulinRecommendation, remeasureTime, showExitModal, selectedMood, } = this.state;
             const carbs = { suggested: this.suggestedCarbs, entered: enteredCarbs };
@@ -120,18 +306,48 @@ export default class RecommendationScreen extends React.Component {
             showExitModal ? this.hideExitModal() : this.hideTimeoutModal();
             this.props.transferToLogbook(carbs, insulin, remeasureTime, this.recommendationDate, selectedMood);
         };
+        /**
+         * Get the attention message that should be displayed for the user to draw their attention to noteworthy circumstances regarding their current blood glucose level.
+         *
+         * Steps:
+         * 1. Unpack calculatorParams and latestLogbookFrom6Hours from the props.
+         * 2. Unpack currentBGL and activity from calculatorparams.
+         * 3. Get bgLevel, the categorisation of the blood glucose level, by calling the getBGLevel() function with the currentBGL and latestLogbookFrom6Hours as arguments.
+         * 4. Return the attention message that is returned when calling getAttentionMessage() using bgLevel and activity as arguments.
+         * @returns A string describing what the user needs to be aware of regarding their current blood glucose level.
+         * If there is nothing noteworthy, null will be returned instead.
+         */
         this.getBGLevelAttentionMessage = () => {
             const { calculatorParams, latestLogbookFrom6Hours } = this.props;
             const { currentBGL, activity } = calculatorParams;
             const bgLevel = getBGLevel(currentBGL, latestLogbookFrom6Hours);
             return getAttentionMessage(bgLevel, activity);
         };
+        /**
+         * Get the initial value for the remeasurement reminder time slider depending on the user’s entered information.
+         *
+         * Steps:
+         * 1. Unpack calculatorParams, userReminder, and latestLogbookFrom6Hours from the props.
+         * 2. Unpack currentBGL, activity,  and carbohydrates from calculatorParams.
+         * 3. Get bgLevel, the categorisation of the blood glucose level, by calling the getBGLevel() function with the currentBGL and latestLogbookFrom6Hours as arguments.
+         * 4. Return the attention message that is returned when calling getReminder() using bgLevel, carbohydrates, userReminder, and activity as arguments.
+         * @returns The time interval in hours that should be used as the initial value for the remeasurement reminder time slider.
+         */
         this.getBGLevelRemeasurementReminder = () => {
             const { calculatorParams, userReminder, latestLogbookFrom6Hours } = this.props;
             const { currentBGL, activity, carbohydrates } = calculatorParams;
             const bgLevel = getBGLevel(currentBGL, latestLogbookFrom6Hours);
             return getReminder(bgLevel, carbohydrates, userReminder, activity);
         };
+        /**
+         * Get the attention message that should be displayed to the user to let them know that the insulin recommendation that
+         * is being displayed to them was limited by the maximum insulin threshold.
+         *
+         * Steps:
+         * 1. Unpack the wasLimited and activityReduction state variables.
+         * 2. Return the result from calling getLimitationMessage() with wasLimited and activityReduction as arguments.
+         * @returns A message to inform the user how the insulin recommendation was limited. If there is no limitation attention message, null will be returned instead.
+         */
         this.getLimitationAttentionMessage = () => {
             const { wasLimited, activityReduction } = this.state;
             return getLimitationMessage(wasLimited, activityReduction);
@@ -166,15 +382,32 @@ export default class RecommendationScreen extends React.Component {
             props.onError(error);
         }
     }
+    /**
+     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+     *
+     * Steps:
+     * 1. Create a listener to call the handleAppStateChange() method when the app state changes.
+     */
     componentDidMount() {
         AppState.addEventListener(`change`, this.handleAppStateChange);
     }
+    /**
+     * Called immediately before a component is destroyed.
+     * Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.
+     *
+     * Clear the 15 minute timer that was set in the constructor during initialisation so it doesn’t keep running and gets triggered after the recommendation screen was closed.
+     *
+     * Steps:
+     * 1. Call clearTimeout on the timer member variable.
+     * 2. Remove the listener for app state changes that was set by the componentDidMount() method.
+     */
     componentWillUnmount() {
         if (this.timer !== undefined) {
             clearTimeout(this.timer);
         }
         AppState.removeEventListener(`change`, this.handleAppStateChange);
     }
+    /** Render a JSX element for displaying the insulin recommendation screen. */
     render() {
         if (this.hasError) {
             return <View style={containerStyles.container}/>;

package/src/__tests__/RecommendationScreen.test.js

@@ -294,7 +294,7 @@ describe(`RecommendationScreen`, () => {
 		recentBoluses                                | shown
 		${[]}                                        | ${true}
 		${[{ insulinDose: 4, secondsPassed: 5500 }]} | ${false}
-	`(`Only show recent insulin if recent boluses is empty`, ({ recentBoluses, shown }) => {
+	`(`Only show recent insulin if recent boluses is empty`, ({ recentBoluses, shown, }) => {
         const props = getRecommendationProps({
             calculatorParams: {
                 ...getRecommendationProps().calculatorParams,
@@ -566,6 +566,40 @@ describe(`RecommendationScreen`, () => {
         expect(shownKetoneUnit).toBe(``);
         expect(shownKetoneValue).toBe(`-`);
     });
+    test.each `
+		currentBKLMmoll     | bloodKetoneUnit            | expectedDisplayedValue
+		${3.12345600000095} | ${BloodKetonesUnit.MMOL_L} | ${`3.1`}
+		${7.65345600000095} | ${BloodKetonesUnit.MMOL_L} | ${`7.7`}
+		${0.92000000000001} | ${BloodKetonesUnit.MG_DL}  | ${`10`}
+		${1.00000000000001} | ${BloodKetonesUnit.MG_DL}  | ${`10`}
+	`(`InfoBars displays blood ketone: $currentBKLMmoll with the right decimal`, ({ currentBKLMmoll, bloodKetoneUnit, expectedDisplayedValue }) => {
+        const { BloodKetone: BKValueTestID } = InfoBarTestIds.Value;
+        const props = {
+            ...getRecommendationProps(),
+            currentBKL: currentBKLMmoll,
+            bloodKetoneUnit,
+        };
+        const wrapper = render(<RecommendationScreen {...props}/>);
+        const shownKetoneValue = queryTextFromComponent(wrapper, BKValueTestID);
+        expect(shownKetoneValue).toBe(expectedDisplayedValue);
+    });
+    test.each `
+		currentBGLMmoll      | bloodGlucoseUnit           | expectedDisplayedValue
+		${32.65345600000095} | ${BloodGlucoseUnit.MMOL_L} | ${`32.7`}
+		${3.493456000000095} | ${BloodGlucoseUnit.MMOL_L} | ${`3.5`}
+		${5.530000000000001} | ${BloodGlucoseUnit.MG_DL}  | ${`100`}
+		${5.550000000000001} | ${BloodGlucoseUnit.MG_DL}  | ${`100`}
+	`(`InfoBars displays blood glucose: $currentBGLMmoll with the right decimal`, ({ currentBGLMmoll, bloodGlucoseUnit, expectedDisplayedValue }) => {
+        const { BloodGlucose: BGValueTestID } = InfoBarTestIds.Value;
+        const calculatorParams = {
+            ...generateDefaultCalculatorParams(),
+            currentBGL: currentBGLMmoll,
+        };
+        const props = { ...getRecommendationProps(), calculatorParams, bloodGlucoseUnit };
+        const wrapper = render(<RecommendationScreen {...props}/>);
+        const shownGlucoseValue = queryTextFromComponent(wrapper, BGValueTestID);
+        expect(shownGlucoseValue).toBe(expectedDisplayedValue);
+    });
     test(`Can display with null activityDisplayProps`, () => {
         const props = getRecommendationProps({
             calculatorParams: getRecommendationProps().calculatorParams,

package/src/__tests__/utils.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
+import { BolusCalculator, Logbook } from "@hedia/types";
 import { RenderAPI } from "react-native-testing-library";
 import { ReactTestInstance } from "react-test-renderer";
 import { IRecommendationProps } from "../RecommendationScreen";
 import { Testing } from "../types/enum";
-import { IActivityParams, IRecommendationParams, logbookEntry } from "../types/types";
 export declare function getRecommendationProps(partials?: Partial<IRecommendationProps>): IRecommendationProps;
-export declare function generateDefaultCalculatorParams(): IRecommendationParams;
-export declare function generateActivityProps(): IActivityParams;
-export declare function generateDefaultActivitySettings(): IActivityParams["activitySettings"];
-export declare function generateDefaultLogbook(): logbookEntry;
+export declare function generateDefaultCalculatorParams(): BolusCalculator.Types.IRecommendationParams;
+export declare function generateActivityProps(): BolusCalculator.Types.IActivityParams;
+export declare function generateDefaultActivitySettings(): BolusCalculator.Types.IActivityParams["activitySettings"];
+export declare function generateDefaultLogbook(): Logbook.Types.ILogbookEntry;
 export declare function expectTextExists(component: RenderAPI, text: string | RegExp): void;
 export declare function queryTextFromComponent(wrapper: RenderAPI, testID: Testing.Types.TestIdEnum): string;
 export declare function expectTextNotExists(component: RenderAPI, text: string | RegExp): void;

package/src/__tests__/utils.js

@@ -1,4 +1,4 @@
-import { Activity, BloodGlucoseUnit, BloodKetonesUnit, Languages, UserSettings } from "@hedia/types";
+import { Activity, BloodGlucoseUnit, BloodKetonesUnit, Languages, UserSettings, } from "@hedia/types";
 import { I18nProvider } from "@lingui/react";
 import React from "react";
 import { i18n } from "../locale/i18nUtils";

package/src/components/Header.d.ts

@@ -1,49 +1,10 @@
 import React from "react";
-interface IProps {
+export interface IProps {
+    /** A callback that doesn’t take any arguments and doesn’t return a value to be called when the cancel-button is pressed. */
     exitCallback(): void;
 }
+/** Component to display a header text along with a cancel-button that triggers a callback function. */
 export default class Header extends React.Component<IProps> {
+    /** JSX element to display the cancel button and header. When the cancel button in the header is tabbed, the exitCallback prop callback function should be called. */
     render(): JSX.Element;
 }
-export declare const headerStyles: {
-    backgroundColour: {
-        backgroundColor: string;
-    };
-    margin: {
-        margin: string;
-        marginBottom: string;
-        flexDirection: "row";
-        flex: number;
-    };
-    headerContainer: {
-        flexDirection: "row";
-        flex: number;
-    };
-    exitButtonContainer: {
-        alignItems: "center";
-        flex: number;
-    };
-    exitButton: {
-        flex: number;
-    };
-    iconStyle: {
-        fontSize: number;
-        color: string;
-    };
-    headerTextContainer: {
-        flex: number;
-        justifyContent: "center";
-        alignItems: "center";
-        marginTop: string;
-    };
-    headerText: {
-        fontSize: number;
-        fontWeight: "bold";
-        textAlign: "center";
-        color: string;
-    };
-    headerFiller: {
-        flex: number;
-    };
-};
-export {};

package/src/components/Header.js

@@ -5,7 +5,9 @@ import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY } from "../utils/Constants";
 import Icon from "./Icon";
+/** Component to display a header text along with a cancel-button that triggers a callback function. */
 export default class Header extends React.Component {
+    /** JSX element to display the cancel button and header. When the cancel button in the header is tabbed, the exitCallback prop callback function should be called. */
     render() {
         return (<React.Fragment>
 				<SafeAreaView style={headerStyles.backgroundColour}/>
@@ -30,7 +32,7 @@ export default class Header extends React.Component {
 			</React.Fragment>);
     }
 }
-export const headerStyles = StyleSheet.create({
+const headerStyles = StyleSheet.create({
     backgroundColour: {
         backgroundColor: BACKGROUND_COLOUR_PURPLE,
     },

package/src/components/Icon.d.ts

@@ -1,13 +1,20 @@
 import React from "react";
 import { StyleSheet } from "react-native";
-interface IProps {
+/** Mapping from react-native-vector-icons identifier to corresponding icon resource. */
+export declare const IconSets: Record<string, any>;
+export interface IProps {
+    /** The name of the react-native-vector-icons identifier */
     iconIdentifier: string;
+    /** Style of the icon */
     iconStyle: StyleSheet.NamedStyles<any>;
 }
+/** Component used to display a react-native-vector-icons */
 export default class Icon extends React.Component<IProps> {
     static defaultProps: any;
     _root: any;
     setNativeProps(nativeProps: any): void;
+    /**
+     * @returns JSX Element containing the desired react-native-vector-icons
+     */
     render(): JSX.Element;
 }
-export {};

package/src/components/Icon.js

@@ -1,7 +1,8 @@
 // @ts-nocheck
 /* tslint:disable */
 import React from "react";
-const IconSets = {
+/** Mapping from react-native-vector-icons identifier to corresponding icon resource. */
+export const IconSets = {
     AntDesign: require(`react-native-vector-icons/AntDesign`),
     Feather: require(`react-native-vector-icons/Feather`),
     EvilIcons: require(`react-native-vector-icons/EvilIcons`),
@@ -9,10 +10,14 @@ const IconSets = {
     FontAwesome: require(`react-native-vector-icons/FontAwesome`),
     Entypo: require(`react-native-vector-icons/Entypo`),
 };
+/** Component used to display a react-native-vector-icons */
 export default class Icon extends React.Component {
     setNativeProps(nativeProps) {
         this._root.setNativeProps(nativeProps);
     }
+    /**
+     * @returns JSX Element containing the desired react-native-vector-icons
+     */
     render() {
         const iconParts = this.props.iconIdentifier.split(`/`);
         let iconPackageName = iconParts[0];

package/src/components/InfoBars.d.ts

@@ -2,20 +2,48 @@ import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
 import React from "react";
 import { Testing } from "../types/enum";
 export interface IProps {
+    /** The display label that describes the value to the user. */
     label: string;
+    /** The value to display. */
     value: string | null;
+    /** Unit label to print after the value. */
     unit: string | BloodGlucoseUnit | BloodKetonesUnit | null;
+    /** If true then a dash character (“-”) will be printed in place of the value if the value is null. */
     showNullAsDash: boolean;
+    /**  optional object that contains as properties a valueID and a unitID */
     testID?: {
         valueID: Testing.Id.InfoBarTestIds.Value;
         unitID: Testing.Id.InfoBarTestIds.Unit;
     };
 }
+/** A standard panel to display some data that the user entered. */
 export default class InfoBars extends React.Component<IProps> {
+    /**
+     * Determine the value to be displayed in the infobar.
+     *
+     * Steps:
+     * 1. Unpack showNullAsDash, unit, and value from props.
+     * 2. Set noDecimal to be true if unit is BloodGlucoseUnit.MG_DL or if unit is BloodKetonesUnit.MG_DL.
+     * 3. Set nullPlaceholder to be ‘-' if noDecimal is true and to '-.-’ otherwise.
+     * 4. Return value if it is not null or undefined. Otherwise, if showNullAsDash is true then return nullPlaceholder, otherwise return the string '0'.
+     * @returns The string to display as the value in the infobar.
+     */
     displayValue: () => string;
+    /**
+     * Determine the unit string to be displayed in the infobar.
+     *
+     * Steps:
+     * 1. Unpack unit from props.
+     * 2. Return unit if unit is “units” or the result of calling formatUnit() with unit as argument otherwise.
+     * @returns The string to display as the unit in the infobar
+     */
     displayUnit: () => string | null;
+    /**
+     * @returns JSX element to display a card with the entered value.
+     */
     render(): JSX.Element;
 }
+/** @internal */
 export declare const infoStyles: {
     container: {
         flex: number;