Add component type documentation

src/components/Button.tsx

@@ -9,15 +9,46 @@ import { useCurrentTheme } from "../theme/useCurrentTheme";
 import { ReactNode } from "react";
 
 type Props = {
+  /**
+   * Action to take on button press
+   */
   onPress: () => void;
+  /**
+   * The button label
+   */
   label: string;
+  /**
+   * Suffix for the end of the label e.g. "JPY" label would be "Pay 1000 JPY"
+   */
   labelSuffix?: string;
+  /**
+   * Annotation for testing purposes
+   */
   testID?: string;
+  /**
+   * Style override
+   */
   style?: object;
+  /**
+   * Whether the button is disabled or not
+   */
   disabled?: boolean;
+  /**
+   * Node to embed within the button
+   */
   children?: ReactNode;
 };
 
+/**
+ * Default UI Button
+ *
+ * @example
+ * <Button
+ *   label="Pay 1000"
+ *   labelSuffix="JPY"
+ *   onPress={someAction}
+*  />
+ */
 const Button = ({
   label,
   labelSuffix,

src/components/KomojuText.tsx

@@ -3,10 +3,27 @@ import { Text, StyleProp, TextStyle } from "react-native";
 import { useTranslation } from "react-i18next";
 
 interface KomojuTextProps {
+  /**
+   * Heading text
+   */
   children?: string;
+  /**
+   * Styling override
+   */
   style?: StyleProp<TextStyle>;
 }
 
+/**
+ * Heading text used for titles
+ *
+ * @example
+ * ```jsx
+ * <KomojuText
+ *   content="My Page Title"
+ *   style={styles.override}
+ * </KomojuText>
+ * ```
+ */
 const KomojuText = ({ children, style = {} }: KomojuTextProps) => {
   const { t } = useTranslation();
 

src/components/LightBox.tsx

@@ -1,18 +1,25 @@
 import { Image, StyleSheet, Text, View } from "react-native";
-
 import { useTranslation } from "react-i18next";
-
 import { ThemeSchemeType } from "../util/types";
-
 import Thunder from "../assets/images/thunder.png";
-
 import { resizeFonts, responsiveScale } from "../theme/scalling";
 import { useCurrentTheme } from "../theme/useCurrentTheme";
 
 type Props = {
+  /**
+   * Message to the notice box
+   */
   content: string;
 };
 
+/**
+ * This component renders a light notice block text is
+ * used for highlighting text or warnings to the end user
+ *
+ * @example
+ * ```jsx
+ * <LightBox content={myContent}/>
+ */
 const LightBox = ({ content }: Props) => {
   const { t } = useTranslation();
   const theme = useCurrentTheme();

src/components/PaymentModal.tsx

@@ -1,25 +1,41 @@
 import { Dispatch, SetStateAction } from "react";
-
 import { TouchableOpacity, Modal, View, Image, StyleSheet } from "react-native";
-
 import { PaymentMode, sessionDataType, ThemeSchemeType } from "../util/types";
-
-import closeIcon from "../assets/images/close.png";
-
 import { resizeFonts, responsiveScale, WINDOW_HEIGHT } from "../theme/scalling";
 import { useCurrentTheme } from "../theme/useCurrentTheme";
-
 import KomojuText from "./KomojuText";
 import ResponseScreen from "./ResponseScreen";
 import SheetContent from "./SheetContent";
 import { usePaymentUiUtils } from "../hooks/usePaymentUiUtils";
+import closeIcon from "../assets/images/close.png";
 
 type PaymentModalProps = {
+  /**
+   * Boolean to determine visibility of the modal
+   */
   modalVisible: boolean;
+  /**
+   * Set the visibility of the modal
+   */
   setModalVisible: Dispatch<SetStateAction<boolean>>;
+  /**
+   * Callback to call when modal is dismissed
+   */
   onDismiss?: () => void;
 };
 
+/**
+ * This is the main popup modal which animates in using "slide" animation.
+ *
+ * @example
+ * ```jsx`
+ *  <PaymentModal
+ *    modalVisible={modalVisible}
+ *    setModalVisible={setModalVisible}
+ *    onDismiss={() => console.log('Modal dismissed')}
+ *  />
+ * ````
+ */
 const PaymentModal: React.FC<PaymentModalProps> = ({
   modalVisible,
   setModalVisible,

src/components/ResponseScreen.tsx

@@ -1,19 +1,14 @@
 import { useCallback, useMemo } from "react";
-
 import { Image, StyleSheet, View, ImageSourcePropType } from "react-native";
-
 import {
   ResponseScreenStatuses,
   ThemeSchemeType,
   PaymentType,
 } from "../util/types";
-
 import { resizeFonts, responsiveScale } from "../theme/scalling";
 import { useCurrentTheme } from "../theme/useCurrentTheme";
-
 import KomojuText from "./KomojuText";
 import Button from "./Button";
-
 import successIcon from "../assets/images/success.png";
 import errorIcon from "../assets/images/error.png";
 import awaitingPaymentIcon from "../assets/images/awaitingPayment.png";
@@ -54,13 +49,38 @@ const statusConfigs: Partial<Record<ResponseScreenStatuses, StatusConfig>> = {
 };
 
 type Props = {
+ /**
+  * The current status of the response screen.
+  */
   status: ResponseScreenStatuses;
+  /**
+   * An optional message to be displayed on the response screen.
+   */
   message?: string;
+  /**
+   * The label for the button that triggers an action when pressed.
+   */
   onPressLabel: string;
+  /**
+   * The label for the button that triggers an action when pressed.
+   */
   onPress: () => void;
+  /**
+   * The payment type e.g. Credit Card, Konbini, etc.
+   */
   paymentType: PaymentType;
 };
 
+/**
+ * This component is responsible for displaying the payment response to users.
+ *
+ * @example
+ * <ResponseScreen
+ *   status={ResponseScreenStatuses.FAILED}
+ *   message="Payment Failed"
+ *   onPressLabel="Return to Merchant"
+ * />
+ */
 const ResponseScreen = ({
   status,
   message,
@@ -110,8 +130,6 @@ const ResponseScreen = ({
   );
 };
 
-export default ResponseScreen;
-
 const getStyles = (theme: ThemeSchemeType) => {
   return StyleSheet.create({
     parentContainer: {
@@ -150,3 +168,5 @@ const getStyles = (theme: ThemeSchemeType) => {
     },
   });
 };
+
+export default ResponseScreen;