From 3a1889775170117dd4a78b3569bf7091d1091f86 Mon Sep 17 00:00:00 2001 From: Richard Ramsden Date: Mon, 28 Oct 2024 22:21:15 +0900 Subject: [PATCH 1/7] Add documentation for PaymentModal.tsx --- src/components/PaymentModal.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/PaymentModal.tsx b/src/components/PaymentModal.tsx index d88243c..c73020b 100644 --- a/src/components/PaymentModal.tsx +++ b/src/components/PaymentModal.tsx @@ -1,18 +1,24 @@ +/** + * This is the main popup modal which animates in using "slide" animation. + * + * The modal conditionally renders either or component + * depending on the application state. + * + * Props: + * - modalVisible: boolean - Controls the visibility of the modal. + * - setModalVisible: Dispatch> - Function to update the modal visibility state. + * - onDismiss?: () => void - Optional callback function called when the modal is dismissed. + */ 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 = { modalVisible: boolean; From 5e8ebae6862910c5ea35503e44b1af315a86585f Mon Sep 17 00:00:00 2001 From: Richard Ramsden Date: Mon, 28 Oct 2024 22:26:16 +0900 Subject: [PATCH 2/7] Add documentation for ResponseScreen --- src/components/ResponseScreen.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/components/ResponseScreen.tsx b/src/components/ResponseScreen.tsx index d43d380..c743007 100644 --- a/src/components/ResponseScreen.tsx +++ b/src/components/ResponseScreen.tsx @@ -1,3 +1,19 @@ +/** + * This component is responsible for displaying the response status. + * This is used to render failed, cancelled, succes, and warning messages to the end user. + * + * Props: + * - status: ResponseScreenStatuses - The current status of the response screen. + * - message?: string - An optional message to be displayed on the response screen. + * - onPressLabel: string - The label for the button that triggers an action when pressed. + * + * Example usage: + * + */ import { useCallback, useMemo } from "react"; import { Image, StyleSheet, View, ImageSourcePropType } from "react-native"; From d7f3f0d7a290075ae0ad533eb330112a46f07c2d Mon Sep 17 00:00:00 2001 From: Richard Ramsden Date: Mon, 28 Oct 2024 22:31:00 +0900 Subject: [PATCH 3/7] Add a usage section --- src/components/PaymentModal.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/components/PaymentModal.tsx b/src/components/PaymentModal.tsx index c73020b..591299d 100644 --- a/src/components/PaymentModal.tsx +++ b/src/components/PaymentModal.tsx @@ -8,6 +8,29 @@ * - modalVisible: boolean - Controls the visibility of the modal. * - setModalVisible: Dispatch> - Function to update the modal visibility state. * - onDismiss?: () => void - Optional callback function called when the modal is dismissed. + * + * Usage: + * ```jsx + * import React, { useState } from 'react'; + * import PaymentModal from './PaymentModal'; + * + * const App = () => { + * const [modalVisible, setModalVisible] = useState(false); + * + * return ( + *
+ * + * console.log('Modal dismissed')} + * /> + *
+ * ); + * }; + * + * export default App; + * ``` */ import { Dispatch, SetStateAction } from "react"; import { TouchableOpacity, Modal, View, Image, StyleSheet } from "react-native"; From 23197d319f5d28e2d9d7447afb5e06f93fcc622a Mon Sep 17 00:00:00 2001 From: Richard Ramsden Date: Tue, 29 Oct 2024 12:08:45 +0900 Subject: [PATCH 4/7] Use proper type documentation --- src/components/LightBox.tsx | 15 ++++++--- src/components/PaymentModal.tsx | 55 +++++++++++++-------------------- 2 files changed, 32 insertions(+), 38 deletions(-) diff --git a/src/components/LightBox.tsx b/src/components/LightBox.tsx index 12260b7..7a26285 100644 --- a/src/components/LightBox.tsx +++ b/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 + * + */ const LightBox = ({ content }: Props) => { const { t } = useTranslation(); const theme = useCurrentTheme(); diff --git a/src/components/PaymentModal.tsx b/src/components/PaymentModal.tsx index 591299d..993a17e 100644 --- a/src/components/PaymentModal.tsx +++ b/src/components/PaymentModal.tsx @@ -1,37 +1,3 @@ -/** - * This is the main popup modal which animates in using "slide" animation. - * - * The modal conditionally renders either or component - * depending on the application state. - * - * Props: - * - modalVisible: boolean - Controls the visibility of the modal. - * - setModalVisible: Dispatch> - Function to update the modal visibility state. - * - onDismiss?: () => void - Optional callback function called when the modal is dismissed. - * - * Usage: - * ```jsx - * import React, { useState } from 'react'; - * import PaymentModal from './PaymentModal'; - * - * const App = () => { - * const [modalVisible, setModalVisible] = useState(false); - * - * return ( - *
- * - * console.log('Modal dismissed')} - * /> - *
- * ); - * }; - * - * export default App; - * ``` - */ import { Dispatch, SetStateAction } from "react"; import { TouchableOpacity, Modal, View, Image, StyleSheet } from "react-native"; import { PaymentMode, sessionDataType, ThemeSchemeType } from "../util/types"; @@ -44,11 +10,32 @@ 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>; + /** + * Callback to call when modal is dismissed + */ onDismiss?: () => void; }; +/** + * This is the main popup modal which animates in using "slide" animation. + * + * @example + * ```jsx` + * console.log('Modal dismissed')} + * /> + * ```` + */ const PaymentModal: React.FC = ({ modalVisible, setModalVisible, From 6aec0b6b0a11571557effad812704ffef102e681 Mon Sep 17 00:00:00 2001 From: Richard Ramsden Date: Tue, 29 Oct 2024 12:23:30 +0900 Subject: [PATCH 5/7] Update ResponseScreen documentation --- src/components/ResponseScreen.tsx | 50 +++++++++++++++++-------------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/src/components/ResponseScreen.tsx b/src/components/ResponseScreen.tsx index c743007..b146ebe 100644 --- a/src/components/ResponseScreen.tsx +++ b/src/components/ResponseScreen.tsx @@ -1,35 +1,14 @@ -/** - * This component is responsible for displaying the response status. - * This is used to render failed, cancelled, succes, and warning messages to the end user. - * - * Props: - * - status: ResponseScreenStatuses - The current status of the response screen. - * - message?: string - An optional message to be displayed on the response screen. - * - onPressLabel: string - The label for the button that triggers an action when pressed. - * - * Example usage: - * - */ 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"; @@ -70,13 +49,38 @@ const statusConfigs: Partial> = { }; 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 + * + */ const ResponseScreen = ({ status, message, @@ -126,8 +130,6 @@ const ResponseScreen = ({ ); }; -export default ResponseScreen; - const getStyles = (theme: ThemeSchemeType) => { return StyleSheet.create({ parentContainer: { @@ -166,3 +168,5 @@ const getStyles = (theme: ThemeSchemeType) => { }, }); }; + +export default ResponseScreen; From e60fcd67c0dd208036ee9e779debff3a81f820f3 Mon Sep 17 00:00:00 2001 From: Richard Ramsden Date: Tue, 29 Oct 2024 12:32:40 +0900 Subject: [PATCH 6/7] Add description for KomojuText --- src/components/KomojuText.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/components/KomojuText.tsx b/src/components/KomojuText.tsx index d3c814e..8a9d78d 100644 --- a/src/components/KomojuText.tsx +++ b/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; } +/** + * Heading text used for titles + * + * @example + * ```jsx + * + * ``` + */ const KomojuText = ({ children, style = {} }: KomojuTextProps) => { const { t } = useTranslation(); From cd2cc7515027923159db94d17586c7b480e4fa02 Mon Sep 17 00:00:00 2001 From: Richard Ramsden Date: Tue, 29 Oct 2024 12:39:48 +0900 Subject: [PATCH 7/7] Add Button documentation --- src/components/Button.tsx | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 57adab7..6bc5c4c 100644 --- a/src/components/Button.tsx +++ b/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 + *