diff --git a/.lintstagedrc b/.lintstagedrc index b6be02c..78581f7 100644 --- a/.lintstagedrc +++ b/.lintstagedrc @@ -1,3 +1,3 @@ { - "*": ["biome check --apply --no-errors-on-unmatched --files-ignore-unknown=true"] + "*": ["biome check --write --no-errors-on-unmatched"] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 6cec24e..d6245bd 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,7 +2,8 @@ "editor.tabSize": 4, "editor.formatOnSave": true, "editor.codeActionsOnSave": { - "source.organizeImports": "explicit" + "source.organizeImports.biome": "explicit" + // "source.fixAll.biome": "explicit" }, "npm.packageManager": "yarn", "editor.defaultFormatter": "biomejs.biome", diff --git a/App.tsx b/App.tsx index c15fc7f..b37e6fa 100644 --- a/App.tsx +++ b/App.tsx @@ -1,35 +1,45 @@ -import { ModalsManagerProvider } from "@/contexts/ModalsManagerContext"; -import { UserAuthenticationContextProvider } from "@/contexts/UserAuthenticationContext"; -import { AppMainStackNavigatorAuthWrapper } from "@/navigations/AppMainStackNavigator"; -import theme from "@/themes/Theme"; -import ProvideQueryClient from "@components/providers_wrappers/ProvideQueryClient"; import { LOG } from "@logger"; -import { NavigationContainer } from "@react-navigation/native"; +import { DefaultTheme, NavigationContainer } from "@react-navigation/native"; import { ThemeProvider } from "@shopify/restyle"; -import ModalContainer from "react-modal-promise"; -import { SafeAreaProvider } from "react-native-safe-area-context"; - +import { injectStoreIntoAxiosInstance } from "@/axios"; +import ProvideQueryClient from "@/contexts/ProvideQueryClient"; +import { AppMainStackNavigatorAuthWrapper } from "@/navigations/AppMainStackNavigator"; +import theme from "@/themes/Theme"; import "react-native-gesture-handler"; import "react-native-reanimated"; +import { StatusBar } from "expo-status-bar"; +import { GestureHandlerRootView } from "react-native-gesture-handler"; +import { SafeAreaProvider } from "react-native-safe-area-context"; +import { Provider } from "react-redux"; +import { store } from "./src/redux"; const log = LOG.extend("App"); +injectStoreIntoAxiosInstance(store); export default function App() { log.verbose("App started..."); return ( - - - - - - + + + + + + + - - - - - - + + + + + ); } diff --git a/app.json b/app.json index 06fddd2..566c3db 100644 --- a/app.json +++ b/app.json @@ -15,9 +15,21 @@ "assetBundlePatterns": ["**/*"], "ios": { "supportsTablet": true, - "bundleIdentifier": "com.idrissouattara.beasy-mobile" + "bundleIdentifier": "com.idrissouattara.barnoinpay-mobile", + "infoPlist": { + "ITSAppUsesNonExemptEncryption": false, + "NSAppTransportSecurity": { + "NSExceptionDomains": { + "51.77.152.180": { + "NSIncludesSubdomains": true, + "NSExceptionAllowsInsecureHTTPLoads": true + } + } + } + } }, "android": { + "softwareKeyboardLayoutMode": "pan", "adaptiveIcon": { "foregroundImage": "./assets/beasy_icon.png", "backgroundColor": "#00875A" @@ -26,7 +38,7 @@ "android.permission.USE_BIOMETRIC", "android.permission.USE_FINGERPRINT" ], - "package": "com.idrissouattara.beasymobile" + "package": "com.idrissouattara.barnoinpaymobile" }, "web": { "favicon": "./assets/favicon.png" @@ -35,13 +47,13 @@ [ "expo-local-authentication", { - "faceIDPermission": "Allow B-Easy to use Face ID." + "faceIDPermission": "Allow BarnoinPay to use Face ID." } ], [ "expo-dev-launcher", { - "launchMode": "most-recent" + "launchMode": "launcher" } ], [ diff --git a/babel.config.js b/babel.config.js index 2900afe..870a4bf 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,6 +1,7 @@ -module.exports = function(api) { +module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], + plugins: ['react-native-reanimated/plugin'] }; }; diff --git a/biome.json b/biome.json index d1f86e4..cdc0333 100644 --- a/biome.json +++ b/biome.json @@ -1,12 +1,10 @@ { - "$schema": "https://biomejs.dev/schemas/1.7.1/schema.json", - "organizeImports": { - "enabled": true - }, + "$schema": "https://biomejs.dev/schemas/2.2.2/schema.json", + "assist": { "actions": { "source": { "organizeImports": "on" } } }, "formatter": { "enabled": true, "formatWithErrors": false, - "ignore": [], + "includes": ["**"], "attributePosition": "auto", "indentStyle": "tab", "indentWidth": 4, @@ -19,10 +17,12 @@ "recommended": true, "correctness": { "noUnusedImports": "warn", - "noUnusedVariables": "warn" + "noUnusedVariables": "warn", + "useUniqueElementIds": "warn" }, "complexity": { - "noExcessiveCognitiveComplexity": "error" + "noExcessiveCognitiveComplexity": "error", + "noUselessFragments": "off" }, "style": { "useConsistentArrayType": "warn", @@ -36,23 +36,49 @@ "useNamingConvention": { "level": "error", "options": { - "requireAscii": true + "requireAscii": true, + "conventions": [ + { + "selector": { + "kind": "objectLiteralProperty" + }, + "formats": ["snake_case", "camelCase"] + }, + { + "selector": { + "kind": "typeMember" + }, + "formats": ["snake_case", "camelCase", "PascalCase"] + }, + { + "selector": { + "kind": "typeMember" + }, + "formats": ["snake_case", "camelCase", "PascalCase"] + } + ] } }, "useShorthandAssign": "warn" }, "suspicious": { - "noConsoleLog": "warn", - "useAwait": "warn" + "useAwait": "warn", + "noConsole": { "level": "warn", "options": { "allow": ["log"] } }, + "noDuplicateElseIf": "warn", + "noAssignInExpressions": "off" }, - "nursery": { - "noDuplicateElseIf": "warn" - } + "nursery": {} } }, "overrides": [ { - "include": ["src/utils/*"], + "includes": [ + "**/src/utils/**/*", + "**/src/api/**/*", + "**/types.ts", + "**/*.ts", + "**/hooks/**/*" + ], "linter": { "rules": { "style": { @@ -65,6 +91,16 @@ } } } + }, + { + "includes": ["**/src/appStylingPrimitives/**/*"], + "linter": { + "rules": { + "style": { + "useNamingConvention": "off" + } + } + } } ], "vcs": { @@ -72,6 +108,16 @@ "clientKind": "git" }, "files": { - "ignore": ["babel.config.js", "eas.json"] + "includes": [ + "**", + "!**/*.config.js", + "!**/*.d.ts", + "!**/dist", + "!**/android", + "!**/ios", + "!**/node_modules", + "!**/.expo", + "!**/.vscode" + ] } } diff --git a/eas.json b/eas.json index 88af8e1..aaee254 100644 --- a/eas.json +++ b/eas.json @@ -1,33 +1,36 @@ { - "cli": { - "version": ">= 12.0.0", - "appVersionSource": "remote" - }, - "build": { - "development": { - "env": { - "EXPO_PUBLIC_API_URL": "http://192.168.1.223:8001" - }, - "developmentClient": true, - "distribution": "internal", - "channel": "development" - }, - "preview": { - "env": { - "EXPO_PUBLIC_API_URL": "http://192.168.1.223:8001" - }, - "distribution": "internal", - "android": { - "buildType": "apk" - }, - "channel": "preview" - }, - "production": { - "autoIncrement": true, - "channel": "production" - } - }, - "submit": { - "production": {} - } + "cli": { + "version": ">= 12.0.0", + "appVersionSource": "remote" + }, + "build": { + "development": { + "developmentClient": true, + "distribution": "internal", + "channel": "development", + "android": { + "buildType": "apk" + }, + "env": { + "EXPO_PUBLIC_API_URL": "http://51.77.152.180:8000" + } + }, + "preview": { + "env": { + "EXPO_PUBLIC_API_URL": "http://51.77.152.180:8000" + }, + "distribution": "internal", + "android": { + "buildType": "apk" + }, + "channel": "preview" + }, + "production": { + "autoIncrement": true, + "channel": "production" + } + }, + "submit": { + "production": {} + } } diff --git a/package.json b/package.json index 4c880bc..975b08a 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "beasy-mobile", + "name": "barnoinpay-mobile", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { @@ -11,19 +11,26 @@ "format": "biome format --no-errors-on-unmatched --write .", "lint": "biome lint --no-errors-on-unmatched --apply .", "biome-check": "biome check --no-errors-on-unmatched --apply .", - "prepare": "husky" + "prepare": "husky", + "version": "conventional-changelog && git add CHANGELOG.md" }, "dependencies": { + "@gorhom/bottom-sheet": "^5", "@react-native-async-storage/async-storage": "2.1.2", - "@react-navigation/bottom-tabs": "^7.0.0-alpha.22", - "@react-navigation/native": "^7.0.0-alpha.18", - "@react-navigation/native-stack": "^7.0.0-alpha.20", + "@react-navigation/bottom-tabs": "^7.4.6", + "@react-navigation/native": "^7.1.17", + "@react-navigation/native-stack": "^7.3.25", + "@reduxjs/toolkit": "^2.8.2", + "@shopify/flash-list": "1.7.6", "@shopify/restyle": "^2.4.4", "@tanstack/react-query": "^5.35.1", "axios": "^1.6.8", "expo": "53.0.22", "expo-build-properties": "~0.14.8", + "expo-checkbox": "~4.1.4", + "expo-contacts": "~14.2.5", "expo-dev-client": "~5.2.4", + "expo-image": "~2.4.0", "expo-local-authentication": "~16.0.5", "expo-splash-screen": "~0.30.10", "expo-status-bar": "~2.2.3", @@ -32,28 +39,35 @@ "moment": "^2.30.1", "moti": "^0.29.0", "react": "19.0.0", - "react-modal-promise": "^1.0.2", "react-native": "0.79.5", "react-native-base64": "^0.2.1", + "react-native-date-picker": "5.0.12", "react-native-gesture-handler": "~2.24.0", "react-native-keyboard-aware-scroll-view": "^0.9.5", - "react-native-logs": "^5.1.0", - "react-native-qrcode-svg": "^6.3.1", + "react-native-keyboard-controller": "^1.18.5", + "react-native-logs": "^5.3.0", + "react-native-mask-input": "^1.2.3", + "react-native-mmkv": "^3.3.0", + "react-native-qrcode-svg": "^6.3.15", "react-native-reanimated": "~3.17.4", "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.11.1", "react-native-svg": "15.11.2", - "react-native-vector-icons": "^10.1.0" + "react-native-vector-icons": "^10.1.0", + "react-redux": "^9.2.0" }, "devDependencies": { "@babel/core": "^7.20.0", - "@biomejs/biome": "1.7.1", + "@biomejs/biome": "^2.2.0", + "@react-native-community/cli": "^15.1.2", "@types/react": "~19.0.10", "@types/react-native-base64": "^0.2.2", "@types/react-native-vector-icons": "^6.4.18", + "conventional-changelog": "^7.1.1", "husky": "^9.0.11", "lint-staged": "^15.2.2", "prop-types": "^15.8.1", + "react-native-svg-transformer": "^1.5.0", "typescript": "~5.8.3" }, "private": true diff --git a/src/appStylingPrimitives/README.MD b/src/appStylingPrimitives/README.MD new file mode 100644 index 0000000..eae8046 --- /dev/null +++ b/src/appStylingPrimitives/README.MD @@ -0,0 +1 @@ +# A set of primitives to make styling components faster through the use of tailwind type anotations. diff --git a/src/appStylingPrimitives/asp.ts b/src/appStylingPrimitives/asp.ts new file mode 100644 index 0000000..b5b3748 --- /dev/null +++ b/src/appStylingPrimitives/asp.ts @@ -0,0 +1,953 @@ +import { Platform, StyleSheet } from "react-native"; + +import * as tokens from "./tokens"; + +export const asp = { + debug: { + borderColor: "red", + borderWidth: 1, + }, + + /* + * Positioning + */ + fixed: { + position: Platform.select({ web: "fixed", native: "absolute" }) as "absolute", + }, + absolute: { + position: "absolute", + }, + relative: { + position: "relative", + }, + static: { + position: "static", + }, + + inset_0: { + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + top_0: { + top: 0, + }, + right_0: { + right: 0, + }, + bottom_0: { + bottom: 0, + }, + left_0: { + left: 0, + }, + z_10: { + zIndex: 10, + }, + z_20: { + zIndex: 20, + }, + z_30: { + zIndex: 30, + }, + z_40: { + zIndex: 40, + }, + z_50: { + zIndex: 50, + }, + + overflow_hidden: { + overflow: "hidden", + }, + + /* + * Width & Height + */ + w_full: { + width: "100%", + }, + h_full: { + height: "100%", + }, + + max_w_full: { + maxWidth: "100%", + }, + max_h_full: { + maxHeight: "100%", + }, + + /* + * Theme-independent bg colors + */ + bg_transparent: { + backgroundColor: "transparent", + }, + + /* + * Border radius + */ + rounded_0: { + borderRadius: 0, + }, + rounded_2xs: { + borderRadius: tokens.borderRadius._2xs, + }, + rounded_xs: { + borderRadius: tokens.borderRadius.xs, + }, + rounded_sm: { + borderRadius: tokens.borderRadius.sm, + }, + rounded_md: { + borderRadius: tokens.borderRadius.md, + }, + rounded_lg: { + borderRadius: tokens.borderRadius.lg, + }, + rounded_full: { + borderRadius: tokens.borderRadius.full, + }, + + /* + * Flex + */ + gap_0: { + gap: 0, + }, + gap_2xs: { + gap: tokens.space._2xs, + }, + gap_xs: { + gap: tokens.space.xs, + }, + gap_sm: { + gap: tokens.space.sm, + }, + gap_md: { + gap: tokens.space.md, + }, + gap_lg: { + gap: tokens.space.lg, + }, + gap_xl: { + gap: tokens.space.xl, + }, + gap_2xl: { + gap: tokens.space._2xl, + }, + gap_3xl: { + gap: tokens.space._3xl, + }, + gap_4xl: { + gap: tokens.space._4xl, + }, + gap_5xl: { + gap: tokens.space._5xl, + }, + flex: { + display: "flex", + }, + flex_col: { + flexDirection: "column", + }, + flex_row: { + flexDirection: "row", + }, + flex_col_reverse: { + flexDirection: "column-reverse", + }, + flex_row_reverse: { + flexDirection: "row-reverse", + }, + flex_wrap: { + flexWrap: "wrap", + }, + flex_nowrap: { + flexWrap: "nowrap", + }, + flex_0: { + flex: 0, + }, + flex_1: { + flex: 1, + }, + flex_grow: { + flexGrow: 1, + }, + flex_grow_0: { + flexGrow: 0, + }, + flex_shrink: { + flexShrink: 1, + }, + flex_shrink_0: { + flexShrink: 0, + }, + justify_start: { + justifyContent: "flex-start", + }, + justify_center: { + justifyContent: "center", + }, + justify_between: { + justifyContent: "space-between", + }, + justify_around: { + justifyContent: "space-around", + }, + justify_end: { + justifyContent: "flex-end", + }, + align_center: { + alignItems: "center", + }, + align_start: { + alignItems: "flex-start", + }, + align_end: { + alignItems: "flex-end", + }, + align_baseline: { + alignItems: "baseline", + }, + align_stretch: { + alignItems: "stretch", + }, + self_auto: { + alignSelf: "auto", + }, + self_start: { + alignSelf: "flex-start", + }, + self_end: { + alignSelf: "flex-end", + }, + self_center: { + alignSelf: "center", + }, + self_stretch: { + alignSelf: "stretch", + }, + self_baseline: { + alignSelf: "baseline", + }, + + /* + * Text + */ + text_left: { + textAlign: "left", + }, + text_center: { + textAlign: "center", + }, + text_right: { + textAlign: "right", + }, + text_2xs: { + fontSize: tokens.fontSize._2xs, + letterSpacing: tokens.TRACKING, + }, + text_xs: { + fontSize: tokens.fontSize.xs, + letterSpacing: tokens.TRACKING, + }, + text_sm: { + fontSize: tokens.fontSize.sm, + letterSpacing: tokens.TRACKING, + }, + text_md: { + fontSize: tokens.fontSize.md, + letterSpacing: tokens.TRACKING, + }, + text_lg: { + fontSize: tokens.fontSize.lg, + letterSpacing: tokens.TRACKING, + }, + text_xl: { + fontSize: tokens.fontSize.xl, + letterSpacing: tokens.TRACKING, + }, + text_2xl: { + fontSize: tokens.fontSize._2xl, + letterSpacing: tokens.TRACKING, + }, + text_3xl: { + fontSize: tokens.fontSize._3xl, + letterSpacing: tokens.TRACKING, + }, + text_4xl: { + fontSize: tokens.fontSize._4xl, + letterSpacing: tokens.TRACKING, + }, + text_5xl: { + fontSize: tokens.fontSize._5xl, + letterSpacing: tokens.TRACKING, + }, + leading_tight: { + lineHeight: 1.15, + }, + leading_snug: { + lineHeight: 1.3, + }, + leading_normal: { + lineHeight: 1.5, + }, + tracking_normal: { + letterSpacing: tokens.TRACKING, + }, + font_normal: { + fontWeight: tokens.fontWeight.normal, + }, + font_bold: { + fontWeight: tokens.fontWeight.bold, + }, + font_heavy: { + fontWeight: tokens.fontWeight.black, + }, + italic: { + fontStyle: "italic", + }, + + /* + * Border + */ + border_0: { + borderWidth: 0, + }, + border_t_0: { + borderTopWidth: 0, + }, + border_b_0: { + borderBottomWidth: 0, + }, + border_l_0: { + borderLeftWidth: 0, + }, + border_r_0: { + borderRightWidth: 0, + }, + border: { + borderWidth: StyleSheet.hairlineWidth, + }, + border_t: { + borderTopWidth: StyleSheet.hairlineWidth, + }, + border_b: { + borderBottomWidth: StyleSheet.hairlineWidth, + }, + border_l: { + borderLeftWidth: StyleSheet.hairlineWidth, + }, + border_r: { + borderRightWidth: StyleSheet.hairlineWidth, + }, + border_transparent: { + borderColor: "transparent", + }, + + /* + * Shadow + */ + shadow_sm: { + shadowRadius: 8, + shadowOpacity: 0.1, + elevation: 8, + }, + shadow_md: { + shadowRadius: 16, + shadowOpacity: 0.1, + elevation: 16, + }, + shadow_lg: { + shadowRadius: 32, + shadowOpacity: 0.1, + elevation: 24, + }, + shadow_elevated: { + shadowColor: "black", + shadowOpacity: 0.25, + shadowOffset: { width: 0, height: 3 }, + shadowRadius: 3.84, + elevation: 5, + }, + + /* + * Padding + */ + p_0: { + padding: 0, + }, + p_2xs: { + padding: tokens.space._2xs, + }, + p_xs: { + padding: tokens.space.xs, + }, + p_sm: { + padding: tokens.space.sm, + }, + p_md: { + padding: tokens.space.md, + }, + p_lg: { + padding: tokens.space.lg, + }, + p_xl: { + padding: tokens.space.xl, + }, + p_2xl: { + padding: tokens.space._2xl, + }, + p_3xl: { + padding: tokens.space._3xl, + }, + p_4xl: { + padding: tokens.space._4xl, + }, + p_5xl: { + padding: tokens.space._5xl, + }, + px_0: { + paddingLeft: 0, + paddingRight: 0, + }, + px_2xs: { + paddingLeft: tokens.space._2xs, + paddingRight: tokens.space._2xs, + }, + px_xs: { + paddingLeft: tokens.space.xs, + paddingRight: tokens.space.xs, + }, + px_sm: { + paddingLeft: tokens.space.sm, + paddingRight: tokens.space.sm, + }, + px_md: { + paddingLeft: tokens.space.md, + paddingRight: tokens.space.md, + }, + px_lg: { + paddingLeft: tokens.space.lg, + paddingRight: tokens.space.lg, + }, + px_xl: { + paddingLeft: tokens.space.xl, + paddingRight: tokens.space.xl, + }, + px_2xl: { + paddingLeft: tokens.space._2xl, + paddingRight: tokens.space._2xl, + }, + px_3xl: { + paddingLeft: tokens.space._3xl, + paddingRight: tokens.space._3xl, + }, + px_4xl: { + paddingLeft: tokens.space._4xl, + paddingRight: tokens.space._4xl, + }, + px_5xl: { + paddingLeft: tokens.space._5xl, + paddingRight: tokens.space._5xl, + }, + py_0: { + paddingTop: 0, + paddingBottom: 0, + }, + py_2xs: { + paddingTop: tokens.space._2xs, + paddingBottom: tokens.space._2xs, + }, + py_xs: { + paddingTop: tokens.space.xs, + paddingBottom: tokens.space.xs, + }, + py_sm: { + paddingTop: tokens.space.sm, + paddingBottom: tokens.space.sm, + }, + py_md: { + paddingTop: tokens.space.md, + paddingBottom: tokens.space.md, + }, + py_lg: { + paddingTop: tokens.space.lg, + paddingBottom: tokens.space.lg, + }, + py_xl: { + paddingTop: tokens.space.xl, + paddingBottom: tokens.space.xl, + }, + py_2xl: { + paddingTop: tokens.space._2xl, + paddingBottom: tokens.space._2xl, + }, + py_3xl: { + paddingTop: tokens.space._3xl, + paddingBottom: tokens.space._3xl, + }, + py_4xl: { + paddingTop: tokens.space._4xl, + paddingBottom: tokens.space._4xl, + }, + py_5xl: { + paddingTop: tokens.space._5xl, + paddingBottom: tokens.space._5xl, + }, + pt_0: { + paddingTop: 0, + }, + pt_2xs: { + paddingTop: tokens.space._2xs, + }, + pt_xs: { + paddingTop: tokens.space.xs, + }, + pt_sm: { + paddingTop: tokens.space.sm, + }, + pt_md: { + paddingTop: tokens.space.md, + }, + pt_lg: { + paddingTop: tokens.space.lg, + }, + pt_xl: { + paddingTop: tokens.space.xl, + }, + pt_2xl: { + paddingTop: tokens.space._2xl, + }, + pt_3xl: { + paddingTop: tokens.space._3xl, + }, + pt_4xl: { + paddingTop: tokens.space._4xl, + }, + pt_5xl: { + paddingTop: tokens.space._5xl, + }, + pb_0: { + paddingBottom: 0, + }, + pb_2xs: { + paddingBottom: tokens.space._2xs, + }, + pb_xs: { + paddingBottom: tokens.space.xs, + }, + pb_sm: { + paddingBottom: tokens.space.sm, + }, + pb_md: { + paddingBottom: tokens.space.md, + }, + pb_lg: { + paddingBottom: tokens.space.lg, + }, + pb_xl: { + paddingBottom: tokens.space.xl, + }, + pb_2xl: { + paddingBottom: tokens.space._2xl, + }, + pb_3xl: { + paddingBottom: tokens.space._3xl, + }, + pb_4xl: { + paddingBottom: tokens.space._4xl, + }, + pb_5xl: { + paddingBottom: tokens.space._5xl, + }, + pl_0: { + paddingLeft: 0, + }, + pl_2xs: { + paddingLeft: tokens.space._2xs, + }, + pl_xs: { + paddingLeft: tokens.space.xs, + }, + pl_sm: { + paddingLeft: tokens.space.sm, + }, + pl_md: { + paddingLeft: tokens.space.md, + }, + pl_lg: { + paddingLeft: tokens.space.lg, + }, + pl_xl: { + paddingLeft: tokens.space.xl, + }, + pl_2xl: { + paddingLeft: tokens.space._2xl, + }, + pl_3xl: { + paddingLeft: tokens.space._3xl, + }, + pl_4xl: { + paddingLeft: tokens.space._4xl, + }, + pl_5xl: { + paddingLeft: tokens.space._5xl, + }, + pr_0: { + paddingRight: 0, + }, + pr_2xs: { + paddingRight: tokens.space._2xs, + }, + pr_xs: { + paddingRight: tokens.space.xs, + }, + pr_sm: { + paddingRight: tokens.space.sm, + }, + pr_md: { + paddingRight: tokens.space.md, + }, + pr_lg: { + paddingRight: tokens.space.lg, + }, + pr_xl: { + paddingRight: tokens.space.xl, + }, + pr_2xl: { + paddingRight: tokens.space._2xl, + }, + pr_3xl: { + paddingRight: tokens.space._3xl, + }, + pr_4xl: { + paddingRight: tokens.space._4xl, + }, + pr_5xl: { + paddingRight: tokens.space._5xl, + }, + + /* + * Margin + */ + m_0: { + margin: 0, + }, + m_2xs: { + margin: tokens.space._2xs, + }, + m_xs: { + margin: tokens.space.xs, + }, + m_sm: { + margin: tokens.space.sm, + }, + m_md: { + margin: tokens.space.md, + }, + m_lg: { + margin: tokens.space.lg, + }, + m_xl: { + margin: tokens.space.xl, + }, + m_2xl: { + margin: tokens.space._2xl, + }, + m_3xl: { + margin: tokens.space._3xl, + }, + m_4xl: { + margin: tokens.space._4xl, + }, + m_5xl: { + margin: tokens.space._5xl, + }, + m_auto: { + margin: "auto", + }, + mx_0: { + marginLeft: 0, + marginRight: 0, + }, + mx_2xs: { + marginLeft: tokens.space._2xs, + marginRight: tokens.space._2xs, + }, + mx_xs: { + marginLeft: tokens.space.xs, + marginRight: tokens.space.xs, + }, + mx_sm: { + marginLeft: tokens.space.sm, + marginRight: tokens.space.sm, + }, + mx_md: { + marginLeft: tokens.space.md, + marginRight: tokens.space.md, + }, + mx_lg: { + marginLeft: tokens.space.lg, + marginRight: tokens.space.lg, + }, + mx_xl: { + marginLeft: tokens.space.xl, + marginRight: tokens.space.xl, + }, + mx_2xl: { + marginLeft: tokens.space._2xl, + marginRight: tokens.space._2xl, + }, + mx_3xl: { + marginLeft: tokens.space._3xl, + marginRight: tokens.space._3xl, + }, + mx_4xl: { + marginLeft: tokens.space._4xl, + marginRight: tokens.space._4xl, + }, + mx_5xl: { + marginLeft: tokens.space._5xl, + marginRight: tokens.space._5xl, + }, + mx_auto: { + marginLeft: "auto", + marginRight: "auto", + }, + my_0: { + marginTop: 0, + marginBottom: 0, + }, + my_2xs: { + marginTop: tokens.space._2xs, + marginBottom: tokens.space._2xs, + }, + my_xs: { + marginTop: tokens.space.xs, + marginBottom: tokens.space.xs, + }, + my_sm: { + marginTop: tokens.space.sm, + marginBottom: tokens.space.sm, + }, + my_md: { + marginTop: tokens.space.md, + marginBottom: tokens.space.md, + }, + my_lg: { + marginTop: tokens.space.lg, + marginBottom: tokens.space.lg, + }, + my_xl: { + marginTop: tokens.space.xl, + marginBottom: tokens.space.xl, + }, + my_2xl: { + marginTop: tokens.space._2xl, + marginBottom: tokens.space._2xl, + }, + my_3xl: { + marginTop: tokens.space._3xl, + marginBottom: tokens.space._3xl, + }, + my_4xl: { + marginTop: tokens.space._4xl, + marginBottom: tokens.space._4xl, + }, + my_5xl: { + marginTop: tokens.space._5xl, + marginBottom: tokens.space._5xl, + }, + my_auto: { + marginTop: "auto", + marginBottom: "auto", + }, + mt_0: { + marginTop: 0, + }, + mt_2xs: { + marginTop: tokens.space._2xs, + }, + mt_xs: { + marginTop: tokens.space.xs, + }, + mt_sm: { + marginTop: tokens.space.sm, + }, + mt_md: { + marginTop: tokens.space.md, + }, + mt_lg: { + marginTop: tokens.space.lg, + }, + mt_xl: { + marginTop: tokens.space.xl, + }, + mt_2xl: { + marginTop: tokens.space._2xl, + }, + mt_3xl: { + marginTop: tokens.space._3xl, + }, + mt_4xl: { + marginTop: tokens.space._4xl, + }, + mt_5xl: { + marginTop: tokens.space._5xl, + }, + mt_auto: { + marginTop: "auto", + }, + mb_0: { + marginBottom: 0, + }, + mb_2xs: { + marginBottom: tokens.space._2xs, + }, + mb_xs: { + marginBottom: tokens.space.xs, + }, + mb_sm: { + marginBottom: tokens.space.sm, + }, + mb_md: { + marginBottom: tokens.space.md, + }, + mb_lg: { + marginBottom: tokens.space.lg, + }, + mb_xl: { + marginBottom: tokens.space.xl, + }, + mb_2xl: { + marginBottom: tokens.space._2xl, + }, + mb_3xl: { + marginBottom: tokens.space._3xl, + }, + mb_4xl: { + marginBottom: tokens.space._4xl, + }, + mb_5xl: { + marginBottom: tokens.space._5xl, + }, + mb_auto: { + marginBottom: "auto", + }, + ml_0: { + marginLeft: 0, + }, + ml_2xs: { + marginLeft: tokens.space._2xs, + }, + ml_xs: { + marginLeft: tokens.space.xs, + }, + ml_sm: { + marginLeft: tokens.space.sm, + }, + ml_md: { + marginLeft: tokens.space.md, + }, + ml_lg: { + marginLeft: tokens.space.lg, + }, + ml_xl: { + marginLeft: tokens.space.xl, + }, + ml_2xl: { + marginLeft: tokens.space._2xl, + }, + ml_3xl: { + marginLeft: tokens.space._3xl, + }, + ml_4xl: { + marginLeft: tokens.space._4xl, + }, + ml_5xl: { + marginLeft: tokens.space._5xl, + }, + ml_auto: { + marginLeft: "auto", + }, + mr_0: { + marginRight: 0, + }, + mr_2xs: { + marginRight: tokens.space._2xs, + }, + mr_xs: { + marginRight: tokens.space.xs, + }, + mr_sm: { + marginRight: tokens.space.sm, + }, + mr_md: { + marginRight: tokens.space.md, + }, + mr_lg: { + marginRight: tokens.space.lg, + }, + mr_xl: { + marginRight: tokens.space.xl, + }, + mr_2xl: { + marginRight: tokens.space._2xl, + }, + mr_3xl: { + marginRight: tokens.space._3xl, + }, + mr_4xl: { + marginRight: tokens.space._4xl, + }, + mr_5xl: { + marginRight: tokens.space._5xl, + }, + mr_auto: { + marginRight: "auto", + }, + + /* + * Pointer events & user select + */ + pointer_events_none: { + pointerEvents: "none", + }, + pointer_events_auto: { + pointerEvents: "auto", + }, + user_select_none: { + userSelect: "none", + }, + user_select_text: { + userSelect: "text", + }, + user_select_all: { + userSelect: "all", + }, + outline_inset_1: { + outlineOffset: -1, + }, + + /* + * Text decoration + */ + underline: { + textDecorationLine: "underline", + }, + strike_through: { + textDecorationLine: "line-through", + }, + + /* + * Display + */ + hidden: { + display: "none", + }, +} as const; diff --git a/src/appStylingPrimitives/tokens.ts b/src/appStylingPrimitives/tokens.ts new file mode 100644 index 0000000..8ca1a59 --- /dev/null +++ b/src/appStylingPrimitives/tokens.ts @@ -0,0 +1,58 @@ +import { Platform } from "react-native"; +export const TRACKING = Platform.OS === "android" ? 0.1 : 0; + +export const space = { + _2xs: 2, + xs: 4, + sm: 8, + md: 12, + lg: 16, + xl: 20, + _2xl: 24, + _3xl: 28, + _4xl: 32, + _5xl: 40, +} as const; + +export const fontSize = { + _2xs: 10, + xs: 12, + sm: 14, + md: 16, + lg: 18, + xl: 20, + _2xl: 22, + _3xl: 26, + _4xl: 32, + _5xl: 40, +} as const; + +export const lineHeight = { + none: 1, + normal: 1.5, + relaxed: 1.625, +} as const; + +export const borderRadius = { + _2xs: 2, + xs: 4, + sm: 8, + md: 12, + lg: 16, + full: 999, +} as const; + +/** + * These correspond to Inter font files we actually load. + */ +export const fontWeight = { + thin: "100", + extralight: "200", + light: "300", + normal: "400", + medium: "500", + semibold: "600", + bold: "700", + extrabold: "800", + black: "900", +} as const; diff --git a/src/axios/index.ts b/src/axios/index.ts new file mode 100644 index 0000000..93586af --- /dev/null +++ b/src/axios/index.ts @@ -0,0 +1,72 @@ +import { LOG } from "@logger"; +import axios from "axios"; +import type { AppReduxStore } from "@/redux"; + +const log = LOG.extend("AxiosInstance"); + +let store: AppReduxStore; + +export const injectStoreIntoAxiosInstance = (_store: AppReduxStore) => { + store = _store; +}; + +export const axiosInstance = axios.create({ + // biome-ignore lint/style/useNamingConvention: + baseURL: process.env.EXPO_PUBLIC_API_URL, +}); + +axiosInstance.interceptors.request.use( + (config) => { + config.headers.authorization = `Bearer ${store.getState().auth.token.access}`; + config.auth = { + username: "admin", + password: "admin", + }; + + log.http({ "Request Interceptor Config": config }); + return config; + }, + (error) => { + log.error({ "Request Interceptor Error": error }); + return Promise.reject(error); + }, +); + +axiosInstance.interceptors.response.use( + (response) => { + log.http({ "Response Interceptor Response Data": response.data }); + return response; + }, + (error) => { + log.error({ "Response Interceptor Error": error }); + + if (error.response) { + const { status, data } = error.response; + switch (status) { + case 400: + log.error({ message: "Bad Request", status, data }); + break; + case 401: + log.error({ + message: "Unauthorized, setting auth status to False", + status, + data, + }); + // Handle unauthorized access, e.g., redirect to login + break; + case 404: + log.error({ message: "Not Found", status, data }); + break; + case 500: + log.error("Server Error:", "Please try again later"); + // Display a user-friendly message, log the error + break; + default: + log.error({ message: "Unknown Error", status, data }); + break; + } + } + + return Promise.reject(error); + }, +); diff --git a/src/components/Balance.tsx b/src/components/Balance.tsx new file mode 100644 index 0000000..8fc4088 --- /dev/null +++ b/src/components/Balance.tsx @@ -0,0 +1,55 @@ +import { asp as g } from "@asp/asp"; +import Entypo from "@expo/vector-icons/Entypo"; +import { ImageBackground } from "expo-image"; +import * as LocalAuthentication from "expo-local-authentication"; +import { type FC, useState } from "react"; +import type { ViewProps } from "react-native"; +import { Text, TouchableOpacity } from "react-native"; + +type BalanceProps = Omit & { amount: number }; + +export const Balance: FC = ({ style, amount = 0, ...rest }) => { + const [showBalance, setShowBalance] = useState(false); + + const handleLocalAuthentication = async () => { + console.log("handleLocalAuthentication :: start"); + if (showBalance) { + return setShowBalance(false); + } + const result = await LocalAuthentication.authenticateAsync(); + if (result.success) { + setShowBalance(true); + } + console.log("handleLocalAuthentication :: end", result); + }; + + return ( + + {showBalance ? ( + setShowBalance(false)}> + {amount} + + ) : ( + + )} + + ); +}; diff --git a/src/components/BalanceContainer.tsx b/src/components/BalanceContainer.tsx deleted file mode 100644 index 911ab6b..0000000 --- a/src/components/BalanceContainer.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import Box from "@components/bases/Box"; -import Text from "@components/bases/Text"; -import Card from "@re-card"; -import { images } from "@styles/Commons"; -import * as LocalAuthentication from "expo-local-authentication"; -import { useState } from "react"; -import { Image, TouchableOpacity } from "react-native"; - -type Props = { balance: number; label: string }; - -const BalanceContainer = ({ label, balance }: Props) => { - const [showBalance, setShowBalance] = useState(false); - - const handleLocalAuthentication = async () => { - console.log("handleLocalAuthentication :: start"); - if (showBalance) { - return setShowBalance(false); - } - const result = await LocalAuthentication.authenticateAsync(); - if (result.success) { - setShowBalance(true); - } - console.log("handleLocalAuthentication :: end", result); - }; - - return ( - - - - - - - - - {showBalance ? ( - - {balance} - - ) : ( - - - - )} - - - - {label} - - - ); -}; - -export default BalanceContainer; diff --git a/src/components/BarWithBeasyAndNotificationsIcon.tsx b/src/components/BarWithBeasyAndNotificationsIcon.tsx deleted file mode 100644 index 63ad568..0000000 --- a/src/components/BarWithBeasyAndNotificationsIcon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import {} from "react-native"; -import BeasyLogoIcon from "./BeasyLogoIcon"; -import NotificationIconButton from "./NotificationIconButton"; -import Box from "./bases/Box"; - -const BarWithBeasyAndNotificationsIcon = () => { - return ( - - - - - ); -}; - -export default BarWithBeasyAndNotificationsIcon; diff --git a/src/components/BarnoinPayBackground.tsx b/src/components/BarnoinPayBackground.tsx new file mode 100644 index 0000000..eabd218 --- /dev/null +++ b/src/components/BarnoinPayBackground.tsx @@ -0,0 +1,18 @@ +import { asp as g } from "@asp/asp"; +import { ImageBackground } from "expo-image"; +import type { FC } from "react"; +import type { ViewProps } from "react-native"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; + +export const BarnoinPayBackground: FC = ({ children, style, ...rest }) => { + const insets = useSafeAreaInsets(); + return ( + + {children} + + ); +}; diff --git a/src/components/BeasyLogoIcon.tsx b/src/components/BeasyLogoIcon.tsx index 9f41baf..b616cb4 100644 --- a/src/components/BeasyLogoIcon.tsx +++ b/src/components/BeasyLogoIcon.tsx @@ -1,10 +1,15 @@ +import { asp as g } from "@asp/asp"; import Box from "@components/bases/Box"; -import { images } from "@styles/Commons"; import { Image } from "react-native"; + const BeasyLogoIcon = () => { return ( - + ); }; diff --git a/src/components/Button.tsx b/src/components/Button.tsx index f8423d0..e260e5c 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,36 +1,42 @@ -import type { BoxProps, VariantProps } from "@shopify/restyle"; -import type { Theme } from "@themes/Theme"; -import { ActivityIndicator, TouchableOpacity } from "react-native"; -import ButtonBase from "./bases/ButtonBase"; -import Text from "./bases/Text"; +import { asp as g } from "@asp/asp"; +import type { FC } from "react"; +import { + ActivityIndicator, + Text, + type TextProps, + TouchableOpacity, + type TouchableOpacityProps, +} from "react-native"; -type Props = BoxProps & - VariantProps & - VariantProps & { - label: string; - onPress: () => void; - isLoading?: boolean; - }; +const DEFAULT_HEIGHT = 50; -const Button = ({ onPress, label, isLoading, textVariants, variant, ...rest }: Props) => { +type ContainerProps = TouchableOpacityProps & { + isLoading?: boolean; +}; + +export const Container: FC = ({ children, style, isLoading, onPress, ...rest }) => { return ( - - - {isLoading ? ( - - ) : ( - {label} - )} - + + {isLoading ? : children} ); }; -export default Button; +export const Label: FC = ({ children, style, ...rest }) => { + return ( + + {children} + + ); +}; diff --git a/src/components/ContainerBorderTopCurved.tsx b/src/components/ContainerBorderTopCurved.tsx deleted file mode 100644 index e330f7e..0000000 --- a/src/components/ContainerBorderTopCurved.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { containers } from "@styles/Commons"; -import { useEffect } from "react"; -import { Animated, Dimensions } from "react-native"; -import Box from "./bases/Box"; - -type Props = { children: React.ReactNode }; -const ContainerBorderTopCurved = ({ children }: Props) => { - const animated = new Animated.Value(0); - // biome-ignore lint/correctness/useExhaustiveDependencies: - useEffect(() => { - Animated.spring(animated, { - toValue: 1, - useNativeDriver: true, - }).start(); - }, []); - - return ( - - - {children} - - - ); -}; - -export default ContainerBorderTopCurved; diff --git a/src/components/GoBackIconButton.tsx b/src/components/GoBackIconButton.tsx deleted file mode 100644 index 05033b5..0000000 --- a/src/components/GoBackIconButton.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Box from "@components/bases/Box"; -import { Ionicons } from "@expo/vector-icons"; -import { TouchableOpacity } from "react-native"; - -type Props = { - onPress: () => void; -}; -const GoBackIconButton = ({ onPress }: Props) => { - return ( - - - - - - ); -}; - -export default GoBackIconButton; diff --git a/src/components/Input.tsx b/src/components/Input.tsx index 7ce7e0c..94b0ece 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -1,19 +1,70 @@ -import type { VariantProps } from "@shopify/restyle"; -import type { Theme } from "@themes/Theme"; -import type { TextInputProps } from "react-native"; -import { TextInput } from "react-native"; -import Box from "./bases/Box"; +import { asp as g } from "@asp/asp"; +import type { FC } from "react"; +import { + Text, + TextInput, + type TextInputProps, + type TextProps, + View, + type ViewProps, +} from "react-native"; -type Props = TextInputProps & VariantProps; +const DEFAULT_HEIGHT = 50; -const Input = ({ textVariants, ...rest }: Props) => { +export const Container: FC = ({ children, style, ...rest }) => { return ( - - - - - + + {children} + ); }; -export default Input; +export const Header: FC = ({ children, style, ...rest }) => { + return ( + + {children} + + ); +}; + +export const FieldContainer: FC = ({ children, style, ...rest }) => { + return ( + + {children} + + ); +}; + +export const Field: FC }> = ({ + style, + ref, + ...props +}) => { + return ( + + ); +}; diff --git a/src/components/InputWithTopLabel.tsx b/src/components/InputWithTopLabel.tsx deleted file mode 100644 index 25ca24e..0000000 --- a/src/components/InputWithTopLabel.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { VariantProps } from "@shopify/restyle"; -import type { Theme } from "@themes/Theme"; -import type { TextInputProps } from "react-native"; -import { TextInput } from "react-native"; -import Box from "./bases/Box"; -import Text from "./bases/Text"; - -type Props = TextInputProps & - VariantProps & { - label: string; - }; - -const InputWithTopLabel = ({ label, textVariants, ...rest }: Props) => { - return ( - - {label} - - - - - ); -}; - -export default InputWithTopLabel; diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx new file mode 100644 index 0000000..83458f7 --- /dev/null +++ b/src/components/Modal.tsx @@ -0,0 +1,64 @@ +import { asp as g } from "@asp/asp"; +import type { FC } from "react"; +import { Modal, type ModalProps, View, type ViewProps, type ViewStyle } from "react-native"; +import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context"; + +/** + * A view container that wraps a {@link SafeAreaView} and a {@link SafeAreaProvider}. + * This is useful for modal components that should be centered and have a safe area. + * + * @param {ViewProps} props The props to pass to the {@link View} component. + * @returns {React.ReactElement} The container component. + */ +export const SafeView: FC = ({ children, style, ...rest }) => { + return ( + + + {children} + + + ); +}; + +/** + * RnModal is a styled Modal component that provides a basic styling for the + * inner content of a modal. It centers the content horizontally and vertically + * and provides a light green background color with rounded corners. + * + * @param {JSX.Element | JSX.Element[]} children The content to be rendered + * inside the modal. + * @param {ViewStyle} style Optional style overrides for the modal's outer View. + * @param {ModalProps} rest Optional props. + * + * @returns A styled Modal component with the inner content. + */ +export const RnModal: FC = ({ children, style, ...rest }) => { + return ( + + {children} + + ); +}; + +/** + * OuterView is a styled View component that provides a basic styling for the + * inner content of a modal. It centers the content horizontally and vertically + * and provides a light green background color with rounded corners. + * + * @param {JSX.Element | JSX.Element[]} children The content to be rendered + * inside the modal. + * @param {ViewProps} style Optional style overrides. + * @param {ViewProps} rest Optional props. + * + * @returns A styled View component with the inner content. + */ +export const OuterView: FC = ({ children, style, ...rest }) => { + return ( + + {children} + + ); +}; diff --git a/src/components/NotificationIconButton.tsx b/src/components/NotificationIconButton.tsx deleted file mode 100644 index 7a49a63..0000000 --- a/src/components/NotificationIconButton.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import Box from "@components/bases/Box"; -import { Ionicons } from "@expo/vector-icons"; -const NotificationIconButton = () => { - return ( - - - - - - - ); -}; - -export default NotificationIconButton; diff --git a/src/components/PaymentOption.tsx b/src/components/PaymentOption.tsx deleted file mode 100644 index c83f6b6..0000000 --- a/src/components/PaymentOption.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import type { PaymentCode } from "@/utils/requests/types"; -import { images } from "@styles/Commons"; -import { Image, TouchableOpacity } from "react-native"; -import Box from "./bases/Box"; - -type PaymentOptions = "OM" | "MTN" | "FLOOZ" | "WAVE" | "CB"; - -type Props = { - onPress: () => void; - paymentMethod: PaymentCode; -}; - -const PaymentOptionContainer = ({ children }: { children: React.ReactNode }) => { - return ( - - {children} - - ); -}; - -const Orange = () => { - return ( - - ); -}; - -const Mtn = () => { - return ; -}; - -const Flooz = () => { - return ; -}; - -const Wave = () => { - return ; -}; - -const Cb = () => { - return ; -}; - -const PaymentOption = ({ onPress, paymentMethod }: Props) => { - return ( - - {paymentMethod === "OM" && } - {paymentMethod === "MTN" && } - {paymentMethod === "FLOOZ" && } - {paymentMethod === "WAVE" && } - {paymentMethod === "CB" && } - - ); -}; - -export default PaymentOption; diff --git a/src/components/PaymentsOptionsRendererTwoColumn.tsx b/src/components/PaymentsOptionsRendererTwoColumn.tsx deleted file mode 100644 index bd2dd39..0000000 --- a/src/components/PaymentsOptionsRendererTwoColumn.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import type React from "react"; -import { Dimensions } from "react-native"; -import Box from "./bases/Box"; - -// const PaymentsOptionsRendererTwoColumn = () => { -// return ( -// -// -// -// navigation.navigate("paymentAmountInputScreen")} -// paymentMethod={"OrangeMoney"} -// /> -// -// -// navigation.navigate("paymentAmountInputScreen")} -// paymentMethod={"MtnMoney"} -// /> -// -// -// -// -// navigation.navigate("paymentAmountInputScreen")} -// paymentMethod={"MoovMoney"} -// /> -// -// -// navigation.navigate("paymentAmountInputScreen")} -// paymentMethod={"WaveMoney"} -// /> -// -// -// -// navigation.navigate("paymentAmountInputScreen")} -// paymentMethod={"VisaCard"} -// /> -// -// -// ); -// }; - -const screenWidth = Dimensions.get("window").width; -const paymentOptionCardWidth = screenWidth / 2 - 30; -const paymentOptionCardHeight = paymentOptionCardWidth * 0.65; -const PaymentOptionContainer = ({ children }: { children: React.ReactNode }) => { - return ( - - {children} - - ); -}; - -// export default PaymentsOptionsRendererTwoColumn; diff --git a/src/components/TransactionInformationsItem.tsx b/src/components/TransactionInformationsItem.tsx deleted file mode 100644 index d6a0e43..0000000 --- a/src/components/TransactionInformationsItem.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import type { PaymentCode } from "@/utils/requests/types"; -import moment from "moment"; -import "moment/locale/fr"; -import PaymentOption from "./PaymentOption"; -import Box from "./bases/Box"; -import Text from "./bases/Text"; - -interface Props { - paymentType: PaymentCode; - reference: string; - date: string; - amount: number; - status: "SUCCESS" | "INITIATED" | "FAILED"; -} - -moment.locale("fr"); - -const TransactionInformationsItem = ({ paymentType, reference, date, amount, status }: Props) => { - const dateObject = Date.parse(date); - return ( - - - - {}} /> - - - {reference} - {moment(dateObject).fromNow()} - - - - - - - - ); -}; - -const AmountColorRenderer = ({ status, amount }: { status: string; amount: number }) => { - if (status === "SUCCESS") { - return {amount}; - } - if (status === "INITIATED") { - return {amount}; - } - return {amount}; -}; - -const AmountWrapper = ({ - color, - children, -}: { color: "secondary" | "softYellow" | "softRed"; children: React.ReactNode }) => { - return ( - - - {children} F - - - ); -}; - -export default TransactionInformationsItem; diff --git a/src/components/WrapperTopEdgeCurved.tsx b/src/components/WrapperTopEdgeCurved.tsx deleted file mode 100644 index a74ac8c..0000000 --- a/src/components/WrapperTopEdgeCurved.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type React from "react"; -import Box from "./bases/Box"; - -const WrapperTopEdgeCurved = ({ children }: { children?: React.ReactElement }) => { - return ( - - {children} - - ); -}; - -export default WrapperTopEdgeCurved; diff --git a/src/components/backgrounds/BackgroundGreenWhiteContentArea.tsx b/src/components/backgrounds/BackgroundGreenWhiteContentArea.tsx deleted file mode 100644 index 12a8070..0000000 --- a/src/components/backgrounds/BackgroundGreenWhiteContentArea.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { containers, images } from "@styles/Commons"; -import { ImageBackground, View } from "react-native"; - -type Props = { children: React.ReactNode }; - -const BackgroundGreenWhiteContentArea = ({ children }: Props) => { - return ( - - - {children} - - - ); -}; - -export default BackgroundGreenWhiteContentArea; diff --git a/src/components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea.tsx b/src/components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea.tsx deleted file mode 100644 index a440727..0000000 --- a/src/components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import BeasyLogoIcon from "@components/BeasyLogoIcon"; -import GoBackIconButton from "@components/GoBackIconButton"; -import WrapperTopEdgeCurved from "@components/WrapperTopEdgeCurved"; -import Box from "@components/bases/Box"; -import { useNavigation } from "@react-navigation/native"; -import type { ReactElement } from "react"; -import BackgroundDefault from "./BeasyDefaultBackground"; - -const BackgroundWithBeasyIconAndWhiteContentArea = ({ - children, - goBack = false, -}: { children?: ReactElement; goBack?: boolean }) => { - const navigation = useNavigation(); - return ( - - - - {goBack && navigation.goBack()} />} - - {children} - - ); -}; - -export default BackgroundWithBeasyIconAndWhiteContentArea; diff --git a/src/components/backgrounds/BeasyDefaultBackground.tsx b/src/components/backgrounds/BeasyDefaultBackground.tsx deleted file mode 100644 index 3e54f17..0000000 --- a/src/components/backgrounds/BeasyDefaultBackground.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { images } from "@styles/Commons"; -import { ImageBackground } from "react-native"; - -type Props = { children: React.ReactNode }; - -const BeasyDefaultBackground = ({ children }: Props) => { - return ( - - {children} - - ); -}; - -export default BeasyDefaultBackground; diff --git a/src/components/bases/ButtonBase.tsx b/src/components/bases/ButtonBase.tsx deleted file mode 100644 index 87885db..0000000 --- a/src/components/bases/ButtonBase.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { type BoxProps, type VariantProps, createRestyleComponent } from "@shopify/restyle"; -import type { Theme } from "@themes/Theme"; -import { buttonVariants } from "@themes/Variants"; -import Box from "./Box"; - -const ButtonBase = createRestyleComponent< - VariantProps & - BoxProps & { - children: React.ReactNode; - }, - Theme ->([buttonVariants], Box); - -export default ButtonBase; diff --git a/src/components/bases/Card.tsx b/src/components/bases/Card.tsx deleted file mode 100644 index 7393772..0000000 --- a/src/components/bases/Card.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type { Theme } from "@/themes/Theme"; -import Box from "@re-box"; -import { type VariantProps, createRestyleComponent, createVariant } from "@shopify/restyle"; - -const Card = createRestyleComponent< - VariantProps & React.ComponentProps, - Theme ->( - [ - createVariant({ - themeKey: "cardVariants", - defaults: { - margin: { - phone: "s", - tablet: "m", - }, - backgroundColor: "red", - }, - }), - ], - Box, -); -export default Card; diff --git a/src/components/bases/Text.tsx b/src/components/bases/Text.tsx deleted file mode 100644 index ad64fae..0000000 --- a/src/components/bases/Text.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import type { Theme } from "@/themes/Theme"; -import { createText } from "@shopify/restyle"; - -const Text = createText(); - -export default Text; diff --git a/src/components/containers/SafeAreaViewTopLeftRightFull.tsx b/src/components/containers/SafeAreaViewTopLeftRightFull.tsx deleted file mode 100644 index 4454c82..0000000 --- a/src/components/containers/SafeAreaViewTopLeftRightFull.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Box from "@components/bases/Box"; -import type React from "react"; -import {} from "react-native"; -import { SafeAreaView } from "react-native-safe-area-context"; - -const SafeAreaViewTopLeftRightFull = ({ children }: { children: React.ReactNode }) => { - return ( - - - {children} - - - ); -}; - -export default SafeAreaViewTopLeftRightFull; diff --git a/src/components/icons/CheckIcon.tsx b/src/components/icons/CheckIcon.tsx index 014924d..3182522 100644 --- a/src/components/icons/CheckIcon.tsx +++ b/src/components/icons/CheckIcon.tsx @@ -1,5 +1,5 @@ +import { asp as g } from "@asp/asp"; import Box from "@components/bases/Box"; -import { images } from "@styles/Commons"; import { Image } from "react-native"; const CheckIcon = () => { @@ -7,7 +7,8 @@ const CheckIcon = () => { ); diff --git a/src/components/icons/ErrorIcon.tsx b/src/components/icons/ErrorIcon.tsx index c3dc64e..c7eeb9f 100644 --- a/src/components/icons/ErrorIcon.tsx +++ b/src/components/icons/ErrorIcon.tsx @@ -1,5 +1,5 @@ +import { asp as g } from "@asp/asp"; import Box from "@components/bases/Box"; -import { images } from "@styles/Commons"; import { Image } from "react-native"; const ErrorIcon = () => { @@ -7,7 +7,8 @@ const ErrorIcon = () => { ); diff --git a/src/components/icons/InformationIcon.tsx b/src/components/icons/InformationIcon.tsx index 429b096..5cc263c 100644 --- a/src/components/icons/InformationIcon.tsx +++ b/src/components/icons/InformationIcon.tsx @@ -1,5 +1,5 @@ +import { asp as g } from "@asp/asp"; import Box from "@components/bases/Box"; -import { images } from "@styles/Commons"; import { Image } from "react-native"; const InformationIcon = () => { @@ -7,7 +7,8 @@ const InformationIcon = () => { ); diff --git a/src/components/modals/ErrorModal.tsx b/src/components/modals/ErrorModal.tsx deleted file mode 100644 index e932ea0..0000000 --- a/src/components/modals/ErrorModal.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { useModalsManagerContext } from "@/contexts/ModalsManagerContext"; -import Button from "@components/Button"; -import ErrorIcon from "@components/icons/ErrorIcon"; -import Box from "@re-box"; -import Card from "@re-card"; -import Text from "@re-text"; - -interface Props { - message?: string; - // onPress?: () => void; -} - -const ErrorModal = ({ message = "Une erreur s'est produite" }: Props) => { - const { closeModal } = useModalsManagerContext(); - return ( - - - - {message} - - -