@hedia/recommendation-screen 2.1.15 → 2.1.16

package/src/components/InvisibleNumberInput.d.ts

@@ -1,26 +1,89 @@
 import React from "react";
 import { TextInput } from "react-native";
-interface IProps {
+export interface IProps {
+    /** The initial value to put in the input field. */
     startValue?: string;
+    /** The precision with which the content of the input field may be displayed */
     decimalPlaces: number;
+    /** Whether or not the clean method should be used on the content every time it is changed */
     cleanPartialInput: boolean;
+    /** Whether or not negative values can be entered. */
     negativeAllowed: boolean;
+    /** Max length of the content in the input field. */
     maxLength?: number;
+    /** Test id used for component testing */
     testID: string;
+    /** Callback function taking a function as argument - For passing a reference for the input field’s to the parent component. */
     visible(toggle: () => void): void;
+    /** Callback function taking a number argument - To be called when the user finishes editing the invisible text field with the final numerical value as argument. */
     onEnd?(value: number): void;
+    /** Callback function taking a string as input and not returning anything - To be called every time the content in the input field changes. */
     partialInput?(value: string): void;
 }
-interface IState {
+export interface IState {
+    /** For storing the value of the text input so it is available for handling in onEndEdit() when editing the text input ends. */
     value: string;
 }
+/**
+ * InvisibleNumberInput is used to enable numerical input by the user without displaying a traditional input field on the screen.
+ * Since the input field is made invisible and thus can’t be tapped directly by the user we need to be able to call
+ * its focus() method from the parent component in order to activate the input field and show the keyboard.
+ * We do this by defining a function that calls the input field’s focus() method inside the InvisibleNumberInput component when it has been mounted.
+ * This function is then passed to the parent by giving it as the argument for a callback function named visible.
+ */
 export default class InvisibleNumberInput extends React.Component<IProps, IState> {
+    /** For holding a reference to the TextInput component so it can be focused when the InvisibleNumberInput component has been mounted. */
     textInput?: TextInput;
+    /** Initialise the state value variable with `0` */
     state: IState;
+    /**
+     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+     * Perform various initialisation steps:
+     * 1. Set the value state of the component to the startValue prop (or to '0' if it is undefined)
+     * 2. Call the visible callback function using an anonymous function as argument. The anonymous function shall do the following:
+     * 	- Set the value state of the InvisibleNumberInput component to the startValue prop (or to '0' if it is undefined)
+     * 	- Return the value from calling the focus() method on the input field.
+     */
     componentDidMount(): void;
+    /**
+     * Sanitise a user-entered value by removing invalid characters
+     *
+     * Steps:
+     * 1. Use regular expressions to make the following manipulations to the text argument in the defined order and save the result to a local string variable named replaced.
+     * 	- Replace any commas with periods
+     * 	- Remove any characters that comes after two groups of zero or more digits separated by a period.
+     * 2. Define a function named round that rounds a given string that contains a number to have the amount of decimals given by the decimalPlaces prop. Return the result as a string.
+     * 3. If the value of the replaced variable from step 1 is not a NaN (not a number) when converted to a Number type then use the round function defined in step 2 on replaced and return the result
+     * 4. (If the NaN-check from step 2 didn’t fail) return the string '0'.
+
+     * @param text The string input to clean up
+     * @returns A string with the cleaned text.
+     */
     cleanInput: (text: string) => string;
+    /**
+     * Handle what happens when the text in the input field is being changed.
+     * That includes cleaning the text a little and then saving the value and potentially calling a callback function.
+     *
+     * Steps:
+     * 1. If the cleanPartialInput prop is true, use the cleanInput() method to to clean the content of the text argument and save it to a variable named cleaned.
+     *    Otherwise just replace any commas in the text argument with periods and save the result to the same variable.
+     * 2. Remove repeated periods from the text in the cleaned variable and save the the result in a new variable named replacedSeparator.
+     * 3. Set the value state of the component to replacedSeparator.
+     * 4. If the partialInput callback function prop is defined, call it with replacedSeparator as argument.
+     * @param text The updated text in the input field
+     */
     handleOnChangeText: (text: string) => void;
+    /**
+     * Handle what should happen when the user finish editing the input field.
+     *
+     * Steps:
+     * 1. Use the cleanInput() method on the value state and store the result in a variable named cleaned.
+     * 2. If the onEnd prop is not null, then convert the value of cleaned to a number and use it as an argument to call the onEnd prop function.
+     */
     onEndEdit: () => void;
+    /**
+     * @returns JSX element to display a TextInput field with the component’s value state as its value
+     * and the handleOnChangeText() and onEndEdit() methods as the textInput’s onChangeText and onEndEditing respectively.
+     */
     render(): JSX.Element;
 }
-export {};

package/src/components/InvisibleNumberInput.js

@@ -1,11 +1,33 @@
 import React from "react";
 import { StyleSheet, TextInput } from "react-native";
+/**
+ * InvisibleNumberInput is used to enable numerical input by the user without displaying a traditional input field on the screen.
+ * Since the input field is made invisible and thus can’t be tapped directly by the user we need to be able to call
+ * its focus() method from the parent component in order to activate the input field and show the keyboard.
+ * We do this by defining a function that calls the input field’s focus() method inside the InvisibleNumberInput component when it has been mounted.
+ * This function is then passed to the parent by giving it as the argument for a callback function named visible.
+ */
 export default class InvisibleNumberInput extends React.Component {
     constructor() {
         super(...arguments);
+        /** Initialise the state value variable with `0` */
         this.state = {
             value: `0`,
         };
+        /**
+         * Sanitise a user-entered value by removing invalid characters
+         *
+         * Steps:
+         * 1. Use regular expressions to make the following manipulations to the text argument in the defined order and save the result to a local string variable named replaced.
+         * 	- Replace any commas with periods
+         * 	- Remove any characters that comes after two groups of zero or more digits separated by a period.
+         * 2. Define a function named round that rounds a given string that contains a number to have the amount of decimals given by the decimalPlaces prop. Return the result as a string.
+         * 3. If the value of the replaced variable from step 1 is not a NaN (not a number) when converted to a Number type then use the round function defined in step 2 on replaced and return the result
+         * 4. (If the NaN-check from step 2 didn’t fail) return the string '0'.
+    
+         * @param text The string input to clean up
+         * @returns A string with the cleaned text.
+         */
         this.cleanInput = (text) => {
             const replaced = text.replace(/\,/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
             const round = (value) => {
@@ -18,6 +40,18 @@ export default class InvisibleNumberInput extends React.Component {
             }
             return `0`;
         };
+        /**
+         * Handle what happens when the text in the input field is being changed.
+         * That includes cleaning the text a little and then saving the value and potentially calling a callback function.
+         *
+         * Steps:
+         * 1. If the cleanPartialInput prop is true, use the cleanInput() method to to clean the content of the text argument and save it to a variable named cleaned.
+         *    Otherwise just replace any commas in the text argument with periods and save the result to the same variable.
+         * 2. Remove repeated periods from the text in the cleaned variable and save the the result in a new variable named replacedSeparator.
+         * 3. Set the value state of the component to replacedSeparator.
+         * 4. If the partialInput callback function prop is defined, call it with replacedSeparator as argument.
+         * @param text The updated text in the input field
+         */
         this.handleOnChangeText = (text) => {
             const cleaned = this.props.cleanPartialInput ? this.cleanInput(text) : text.replace(/\,/g, `.`);
             let replacedSeparator = cleaned.replace(/\.+/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
@@ -29,11 +63,26 @@ export default class InvisibleNumberInput extends React.Component {
             });
             this.props.partialInput?.(`${replacedSeparator}`);
         };
+        /**
+         * Handle what should happen when the user finish editing the input field.
+         *
+         * Steps:
+         * 1. Use the cleanInput() method on the value state and store the result in a variable named cleaned.
+         * 2. If the onEnd prop is not null, then convert the value of cleaned to a number and use it as an argument to call the onEnd prop function.
+         */
         this.onEndEdit = () => {
             const cleaned = this.cleanInput(this.state.value);
             this.props.onEnd?.(Number(cleaned));
         };
     }
+    /**
+     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+     * Perform various initialisation steps:
+     * 1. Set the value state of the component to the startValue prop (or to '0' if it is undefined)
+     * 2. Call the visible callback function using an anonymous function as argument. The anonymous function shall do the following:
+     * 	- Set the value state of the InvisibleNumberInput component to the startValue prop (or to '0' if it is undefined)
+     * 	- Return the value from calling the focus() method on the input field.
+     */
     componentDidMount() {
         this.setState({
             value: this.props.startValue ?? `0`,
@@ -45,6 +94,10 @@ export default class InvisibleNumberInput extends React.Component {
             return this.textInput?.focus();
         });
     }
+    /**
+     * @returns JSX element to display a TextInput field with the component’s value state as its value
+     * and the handleOnChangeText() and onEndEdit() methods as the textInput’s onChangeText and onEndEditing respectively.
+     */
     render() {
         const { testID } = this.props;
         return (<TextInput testID={testID} accessibilityLabel="InvisibleNumberInput" value={`${this.state.value}`} ref={(textInput) => {

package/src/components/LimitationMessage.d.ts

@@ -1,8 +1,14 @@
 import * as React from "react";
 export interface ILimitationMessageProps {
+    /** The message to display to the user. */
     limitationMessage: string | null;
+    /** Callback function taking no arguments and giving no return value - To be called when the user presses the “OK” button. */
     onPressNextButton(): void;
 }
+/** Display a message on the screen to inform the user that their insulin recommendation was limited. */
 export default class LimitationMessage extends React.Component<ILimitationMessageProps> {
+    /**
+     * @returns JSX element for displaying a dialog with the limitationMessage and an “OK” button that calls the onPressNextButton prop callback when tapped.
+     */
     render: () => JSX.Element;
 }

package/src/components/LimitationMessage.js

@@ -4,9 +4,13 @@ import { Text, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { stylesModal } from "./RecommendationModal";
+/** Display a message on the screen to inform the user that their insulin recommendation was limited. */
 export default class LimitationMessage extends React.Component {
     constructor() {
         super(...arguments);
+        /**
+         * @returns JSX element for displaying a dialog with the limitationMessage and an “OK” button that calls the onPressNextButton prop callback when tapped.
+         */
         this.render = () => {
             const { limitationMessage } = this.props;
             return (<React.Fragment>

package/src/components/LineSeparator.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
-interface IProps {
+export interface IProps {
+    /** The color that the line should have. */
     color: string;
 }
+/** Display a horizontal line for visually separating elements in the user interface. */
 export default class LineSeparator extends React.Component<IProps> {
+    /** @return JSX element for displaying a thin horizontal line in the given color. */
     render(): JSX.Element;
 }
-export {};

package/src/components/LineSeparator.js

@@ -1,6 +1,8 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
+/** Display a horizontal line for visually separating elements in the user interface. */
 export default class LineSeparator extends React.Component {
+    /** @return JSX element for displaying a thin horizontal line in the given color. */
     render() {
         return (<React.Fragment>
 				<View style={[lineSeparatorStyles.lineStyle, { borderBottomColor: this.props.color }]}/>

package/src/components/RecentInsulin.d.ts

@@ -1,9 +1,17 @@
 import React from "react";
-interface IProps {
+export interface IProps {
+    /** Callback function taking no arguments and returning no value - To be called if the user presses the “Yes” button. */
     onRecentInsulinYes(): void;
+    /**  Callback function taking no arguments and returning no value - To be called if the user presses the “No” button. */
     onRecentInsulinNo(): void;
 }
+/** Display a card that prompts the user to recall if they injected insulin recently. */
 export default class RecentInsulin extends React.Component<IProps> {
+    /**
+     *
+     * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours? Along with two buttons labeled “Yes” and “No” respectively.
+     * If the user taps the “Yes” button, the onRecentInsulinYes prop callback function should be called.
+     * If the user taps the “No” button, the onRecentInsulinNo prop callback function should be called.
+     */
     render: () => JSX.Element;
 }
-export {};

package/src/components/RecentInsulin.js

@@ -4,9 +4,16 @@ import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-nati
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { infoStyles } from "./InfoBars";
+/** Display a card that prompts the user to recall if they injected insulin recently. */
 export default class RecentInsulin extends React.Component {
     constructor() {
         super(...arguments);
+        /**
+         *
+         * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours? Along with two buttons labeled “Yes” and “No” respectively.
+         * If the user taps the “Yes” button, the onRecentInsulinYes prop callback function should be called.
+         * If the user taps the “No” button, the onRecentInsulinNo prop callback function should be called.
+         */
         this.render = () => {
             return (<View style={recentInsulinStyles.container}>
 				<View style={recentInsulinStyles.titleContainer}>

package/src/components/RecommendationModal.d.ts

@@ -1,25 +1,84 @@
 import * as React from "react";
-interface IModalProps {
+export interface IModalProps {
+    /** Whether or not the modal should currently be displayed on the screen */
     isVisible: boolean;
+    /** The amount of additional carbohydrates that is being recommended for the user in grams. */
     suggestedCarbohydrates: number | null;
+    /** A message to display to the user to inform them in natural language about special recommendations or warnings from HDA. */
     attentionMessage: string | null;
+    /** A message to display to the user to inform them if their insulin recommendation was limited by the maximum threshold. */
     limitationMessage: string | null;
+    /** Callback function taking no arguments and returning no value - Should be called if the user taps the “OK” button on the modal. */
     onClickOkButton(): void;
+    /**
+     *  Callback function taking no arguments and returning no value.
+     * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
+     */
     onAcceptCarbohydrates(): void;
+    /**
+     * Callback function taking no arguments and returning no value.
+     *  Should be called if the user taps the “decline” button when they are recommended to eat additional carbohydrates.
+     */
     onDeclineCarbohydrates(): void;
 }
-interface IModalState {
+export interface IModalState {
+    /** If true then the first page will be displayed, otherwise the second page will be displayed. */
     firstPageVisible: boolean;
 }
+/**
+ * Popup modal for displaying information messages or warnings to the user if necessary.
+ * The modal has two “pages” with different content that it is able to display.
+ * The first page is for informing the user if their insulin recommendation was limited by the maximum insulin safety limit.
+ * This page will only be displayed if the recommendation was actually limited.
+ * The second page is for displaying a general attention message that may contain instructions for the user,
+ * and for letting the user know if they are being recommended eating additional carbohydrates.
+ */
 export default class RecommendationModal extends React.Component<IModalProps, IModalState> {
+    /**
+     * Steps:
+     * 1. Call the super() method with the props.
+     * 2. Set the firstPageVisible state variable true if the limitationMessage prop is truthy.
+     * @param props The class props
+     */
     constructor(props: IModalProps);
+    /**
+     * Handle what happens when the “next” button is pressed.
+     *
+     * Steps:
+     * 1. Unpack attentionMessage and suggestedCarbohydrates from the props object.
+     * 2. Define isPageVisible to be true if either attentionMessage or suggestedCarbohydrates is truthy.
+     * 3. If isPageVisible is true then set the firstPageVisible state variable to false. Otherwise call the onClickOkButton prop callback function.
+     */
     onPressNextButton: () => void;
+    /**
+     * @returns Return an JSX element for composing two buttons: one for accepting a suggestion and one for rejecting it.
+     * If the accept button is pressed the onAcceptCarbohydrates prop callback function shall be called.
+     * If the accept button is pressed the onDeclineCarbohydrates prop callback function shall be called.
+     */
     recommendationButtons: () => JSX.Element;
+    /**
+     * Compose a JSX element for displaying a recommendation of additional carbohydrates (the value of the suggestedCarbohydrates prop rounded to the nearest integer)
+     * to the user in a way that explains what to do with the suggestion.
+     * @param suggestedCarbohydrates the recommended additional carbohydrates
+     */
     recommendCarbohydrates: (suggestedCarbohydrates: number) => JSX.Element;
+    /**
+     * @returns JSX element for displaying the “second” page of the recommendation modal. The second page displays the string from the attentionMessage prop.
+     */
     secondPage: () => JSX.Element;
+    /**
+     * @returns JSX element for displaying the “first” page of the recommendation modal.
+     * The first page consists of a limitation message rendered using a LimitationMessage component.
+     */
     firstPage: () => JSX.Element;
+    /**
+     * @returns JSX element for rendering a modal that is visible if the isVisible prop is true.
+     * If the firstPageVisible state variable is true then use firstPage() to render the first page.
+     * Otherwise use secondPage() to render the second page.
+     */
     render(): JSX.Element;
 }
+/** @internal */
 export declare const stylesModal: {
     modalStyle: {
         margin: number;
@@ -146,4 +205,3 @@ export declare const stylesModal: {
         justifyContent: "center";
     };
 };
-export {};

package/src/components/RecommendationModal.js

@@ -7,14 +7,41 @@ import { Testing } from "../types/enum";
 import { BORDER_COLOUR_TEAL } from "../utils/Constants";
 import LimitationMessage from "./LimitationMessage";
 const { RecommendationModalTestIds } = Testing.Id;
+/**
+ * Popup modal for displaying information messages or warnings to the user if necessary.
+ * The modal has two “pages” with different content that it is able to display.
+ * The first page is for informing the user if their insulin recommendation was limited by the maximum insulin safety limit.
+ * This page will only be displayed if the recommendation was actually limited.
+ * The second page is for displaying a general attention message that may contain instructions for the user,
+ * and for letting the user know if they are being recommended eating additional carbohydrates.
+ */
 export default class RecommendationModal extends React.Component {
+    /**
+     * Steps:
+     * 1. Call the super() method with the props.
+     * 2. Set the firstPageVisible state variable true if the limitationMessage prop is truthy.
+     * @param props The class props
+     */
     constructor(props) {
         super(props);
+        /**
+         * Handle what happens when the “next” button is pressed.
+         *
+         * Steps:
+         * 1. Unpack attentionMessage and suggestedCarbohydrates from the props object.
+         * 2. Define isPageVisible to be true if either attentionMessage or suggestedCarbohydrates is truthy.
+         * 3. If isPageVisible is true then set the firstPageVisible state variable to false. Otherwise call the onClickOkButton prop callback function.
+         */
         this.onPressNextButton = () => {
             const { attentionMessage, suggestedCarbohydrates } = this.props;
             const isPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
             return isPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
         };
+        /**
+         * @returns Return an JSX element for composing two buttons: one for accepting a suggestion and one for rejecting it.
+         * If the accept button is pressed the onAcceptCarbohydrates prop callback function shall be called.
+         * If the accept button is pressed the onDeclineCarbohydrates prop callback function shall be called.
+         */
         this.recommendationButtons = () => {
             return (<View style={stylesModal.recommendationButtonsContainer}>
 				<TouchableOpacity testID={RecommendationModalTestIds.AcceptCarbs} accessibilityLabel="yesButtonModal" style={stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
@@ -25,6 +52,11 @@ export default class RecommendationModal extends React.Component {
 				</TouchableOpacity>
 			</View>);
         };
+        /**
+         * Compose a JSX element for displaying a recommendation of additional carbohydrates (the value of the suggestedCarbohydrates prop rounded to the nearest integer)
+         * to the user in a way that explains what to do with the suggestion.
+         * @param suggestedCarbohydrates the recommended additional carbohydrates
+         */
         this.recommendCarbohydrates = (suggestedCarbohydrates) => {
             const displayCarbs = Math.round(suggestedCarbohydrates);
             return (<React.Fragment>
@@ -52,6 +84,9 @@ export default class RecommendationModal extends React.Component {
 				</View>
 			</React.Fragment>);
         };
+        /**
+         * @returns JSX element for displaying the “second” page of the recommendation modal. The second page displays the string from the attentionMessage prop.
+         */
         this.secondPage = () => {
             const { attentionMessage, suggestedCarbohydrates } = this.props;
             const willRecommendCarbs = suggestedCarbohydrates !== null && suggestedCarbohydrates > 0;
@@ -70,6 +105,10 @@ export default class RecommendationModal extends React.Component {
 					</View>)}
 			</React.Fragment>);
         };
+        /**
+         * @returns JSX element for displaying the “first” page of the recommendation modal.
+         * The first page consists of a limitation message rendered using a LimitationMessage component.
+         */
         this.firstPage = () => {
             const { limitationMessage } = this.props;
             return <LimitationMessage limitationMessage={limitationMessage} onPressNextButton={this.onPressNextButton}/>;
@@ -78,6 +117,11 @@ export default class RecommendationModal extends React.Component {
             firstPageVisible: !!this.props.limitationMessage,
         };
     }
+    /**
+     * @returns JSX element for rendering a modal that is visible if the isVisible prop is true.
+     * If the firstPageVisible state variable is true then use firstPage() to render the first page.
+     * Otherwise use secondPage() to render the second page.
+     */
     render() {
         const { isVisible } = this.props;
         const { firstPageVisible } = this.state;
@@ -96,6 +140,7 @@ const sugestionFontSize = width / 19;
 const recommendEatingFontSize = height / 45;
 const textFontSize = width / 20;
 const titleFontSize = width / 13;
+/** @internal */
 export const stylesModal = StyleSheet.create({
     modalStyle: { margin: 0 },
     container: {

package/src/components/RecommendedCarbs.d.ts

@@ -1,27 +1,94 @@
 import React from "react";
 import { Testing } from "../types/enum";
-interface ICalculationRow {
+export interface ICalculationRow {
     label: string;
     value: string;
     units: string;
 }
-interface IProps {
+export interface IProps {
+    /** The amount of carbs in grams that was recommended to and accepted by the user. */
     recommendedCarbs?: string;
+    /** The amount of carbs in grams that the user entered on the food screen. */
     enteredCarbs: string;
+    /** Callback function that doesn’t accept any arguments and doesn’t return anything - To be called every time the “remove additional carbs” button has been pressed. */
     removeRecommendedCarbs(): void;
+    /**
+     * Callback function that takes a single number as argument and doesn’t return anything.
+     * Function to be called when the entered carbohydrate value is changed by the user. The new value should be given as argument
+     */
     changedRecommendedCarbs(value: number): void;
 }
-interface IState {
+export interface IState {
+    /** The internal value of the input field. */
     partialInput?: string;
 }
+/**
+ * The contents of the RecommendedCarbs component may vary quite a bit depending on data that was entered by the user
+ * and on the result of the recommendation calculation.
+ * For instance the part of the component that displays any recommendation of eating additional carbohydrates
+ * (composed by the renderRecommendedCarbs() method) will only be visible if it is actually recommended that the user eats additional carbohydrates.
+ */
 export default class RecommendedCarbs extends React.Component<IProps, IState> {
+    /** Initialise the state partialInput variable with undefined */
     state: IState;
+    /**
+     * Function taking no arguments and returning no value.
+     * Will be bound to the function that activates input for InvisibleNumberInput when that component has been mounted.
+     */
     callbackInput?: () => void;
+    /**
+     * Handle what should happen when the additional carbohydrates amount has been pressed.
+     *  Uses the InvisibleNumberInput child component to enable the user to input the amount of additional carbohydrates that they are taking.
+     */
     showTextInput: () => void;
+    /**
+     * Passed to the InvisibleNumberInput child component as a callback function to be called every time the content of the input field changes.
+     *
+     * Steps:
+     * 1. Save partialInput argument to the partialInput state variable.
+     * @param partialInput The contents of the input field.
+     */
     handlePartialInput: (partialInput: string) => void;
+    /**
+     * Handle what happens when input in the InvisibleNumberInput child component is completed.
+     *
+     * Steps:
+     * 1. If the carbs argument is greater than or equal to 0:
+     * 	- If the carbs argument is greater than 300:
+     * 		- Set the partialInput state variable to the value of the recommemdedCarbs prop.
+     * 		- Return - An alert message with the message of CarbohydrateLimitError() and with an OK button for closing it.
+     * 	- Use carbs as argument to call the changedRecommendedCarbs prop callback function.
+
+     * @param carbs The numerical value of the input field at completion.
+     * @returns void
+     */
     handleChangedCarbs: (carbs: number) => void;
+    /**
+     * Render the section of the component that displays the extra carbs that the user should eat
+     * and allows the user to change the contents to indicate how many extra carbs they are actually going to eat.
+     *
+     * Steps:
+     * 1. Set a variable named shownCarbs to the partialInput state if it is set, or to the recommendedCarbs prop rounded to the nearest integer otherwise.
+     * 2. Set a variable named totalCarbs to the sum of the enteredCarbs prop and shownCarbs rounded to the nearest integer.
+     * 3. Compose and return a JSX element consisting of the following sub-components
+     * 	- A cancel button to remove recommended carbs from the calculation - When tapped, call the removeRecommendedCarbs prop callback function.
+     * 	- The text from the shownCarbs variable from step 1 - When tapped, call the showTextInput() method.
+     * 	- Use renderRow() to display the value of totalCarbs.
+     * 	- InvisibleNumberInput for showing the keyboard to enable the user to enter a number.
+     */
     renderRecommendedCarbs: () => JSX.Element;
+    /**
+     * Display a row of information for the user. Specifically used to display the amount of carbohydrates that the user has entered.
+     * @param row The values to display
+     * @param testID Id used for component testing
+     * @returns A JSX element to display 3 strings on the screen: label, value, and a unit.
+     */
     renderRow: (row: ICalculationRow, testID: Testing.Id.RecommendedCarbsTestIds) => JSX.Element;
+    /**
+     * Steps:
+     * 1. Convert the recommendedCarbs prop to a number and save that as a variable named carbs.
+     * 2. Use renderRow() to display the user’s entered amount of carbohydrates
+     * 3. If carbs is not a NaN-value and it is positive, call renderRecommendedCarbs() to display the carbohydrate recommendation.
+     */
     render(): JSX.Element;
 }
-export {};