@ccrf01/react-native-template 0.0.16

package/template/src/infrastructures/NetClient/interfaces/INetClient.ts

@@ -0,0 +1,6 @@
+import APIResponse from '../ApiResponse'
+
+export interface INetClient {
+  get<T>(path: string, params: Record<string, any>, headerParams: Record<string, string>): Promise<APIResponse<T>>
+  postJson<T>(path: string, json: Record<string, any>, headerParams: Record<string, string>): Promise<APIResponse<T>>
+}

package/template/src/infrastructures/Storage/IStorage.ts

@@ -0,0 +1,7 @@
+export interface IStorage {
+  getItem: (key: string) => Promise<string | null>
+  setItem: (key: string, value: string) => Promise<boolean>
+  removeItem: (key: string) => Promise<void>
+  getAllKeys: () => Promise<string[]>
+  clear: () => Promise<void>
+}

package/template/src/infrastructures/Storage/MMKVStorage.ts

@@ -0,0 +1,41 @@
+import { MMKV } from 'react-native-mmkv'
+
+import { IStorage } from '@/infrastructures/Storage/IStorage'
+
+const storage = new MMKV()
+
+export class MMKVStorage implements IStorage {
+  getItem = async (key: string) => {
+    const value = storage.getString(key)
+
+    return Promise.resolve(value ?? null)
+  }
+
+  setItem = async (key: string, value: string) => {
+    return new Promise<boolean>((resolve) => {
+      storage.set(key, value)
+
+      return resolve(true)
+    })
+  }
+
+  removeItem = async (key: string) => {
+    storage.delete(key)
+
+    return Promise.resolve()
+  }
+
+  getAllKeys = async () => {
+    const value = storage.getAllKeys()
+
+    return Promise.resolve(value)
+  }
+
+  clear = async () => {
+    storage.clearAll()
+
+    return Promise.resolve()
+  }
+}
+
+export { storage }

package/template/src/infrastructures/common/Timeout.ts

@@ -0,0 +1,27 @@
+class Timeout<T> {
+  timeout: number
+  timeoutID: NodeJS.Timeout|undefined
+  constructor(config: { ms?: number } = {}) {
+    this.timeout = config.ms || 10000
+    this.timeoutID = undefined
+  }
+
+  public start() {
+    return new Promise<T>((resolve, reject) => {
+      this.timeoutID = setTimeout(() => {
+        reject('timeout')
+        // this.clear();
+      }, this.timeout)
+    })
+  }
+
+  public clear() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    if (this.timeoutID !== undefined) {
+      clearTimeout(this.timeoutID)
+      this.timeoutID = undefined
+    }
+  }
+}
+
+export default Timeout

package/template/src/infrastructures/common/colorUtils.ts

@@ -0,0 +1,82 @@
+import color from 'tinycolor2'
+
+const hex2RGB = (hex: string): number[] => {
+  if (hex.charAt(0) === '#') {
+    hex = hex.substring(1)
+  }
+  if ((hex.length < 2) || (hex.length > 6)) {
+    return []
+  }
+  const values = hex.split('')
+  let r
+  let g
+  let b
+
+  if (hex.length === 2) {
+    r = parseInt(values[0].toString() + values[1].toString(), 16)
+    g = r
+    b = r
+  } else if (hex.length === 3) {
+    r = parseInt(values[0].toString() + values[0].toString(), 16)
+    g = parseInt(values[1].toString() + values[1].toString(), 16)
+    b = parseInt(values[2].toString() + values[2].toString(), 16)
+  } else if (hex.length === 6) {
+    r = parseInt(values[0].toString() + values[1].toString(), 16)
+    g = parseInt(values[2].toString() + values[3].toString(), 16)
+    b = parseInt(values[4].toString() + values[5].toString(), 16)
+  } else {
+    return []
+  }
+
+  return [r, g, b]
+}
+
+const hex2RGBColor = (hex: string, opacity: number = 1.0) => {
+  const rgb: number[] = hex2RGB(hex)
+  if (rgb.length === 3) {
+    return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`
+  }
+
+  return false
+}
+
+const isDark = ({ backgroundColor, dark }: {
+  dark?: boolean
+  backgroundColor?: string
+}) => {
+  if (typeof dark === 'boolean') {
+    return dark
+  }
+
+  if (backgroundColor === 'transparent') {
+    return false
+  }
+
+  if (backgroundColor !== 'transparent') {
+    return !color(backgroundColor)
+      .isLight()
+  }
+
+  return false
+}
+
+const rgbToHex = (rgb: string, forceRemoveAlpha = false) => {
+  const rgbArray = rgb.split(',')
+  const r = parseInt(rgbArray[0].split('(')[1], 10)
+  const g = parseInt(rgbArray[1], 10)
+  const b = parseInt(rgbArray[2], 10)
+  const a = forceRemoveAlpha ? 1 : parseFloat(rgbArray[3])
+  const alpha = parseFloat(rgbArray[3])
+
+  return {
+    hex: color({ r, g, b }).toHex(),
+    alpha,
+  }
+}
+
+export {
+  hex2RGB,
+  hex2RGBColor,
+  isDark,
+  rgbToHex,
+}

package/template/src/infrastructures/common/dateUtils.ts

@@ -0,0 +1,39 @@
+import moment from 'moment'
+
+import { Locale } from '@/configs/constants/type'
+
+const formatDate = (date: Date, format: string = 'YYYY-MM-DD HH:mm:ss') => {
+  const momentDate = moment(date)
+
+  return momentDate.format(format)
+}
+
+const parseDate = (dateText?: string, format: string = 'YYYY-MM-DD') => {
+  if (dateText === undefined) {
+    return undefined
+  }
+  const momentDate = moment(dateText, format)
+
+  return momentDate.toDate()
+}
+
+
+const convertDateTextObject = (dateText?: string, fromFormat: string = 'YYYY-MM-DD', lang: Locale = Locale.enUS, toEnMonthFormat = 'MMM') => {
+  if (dateText === undefined) {
+    return undefined
+  }
+  const momentDate = moment(dateText, fromFormat)
+  const monthFormat = lang === Locale.enUS ? toEnMonthFormat : 'M'
+
+  return {
+    year: momentDate.format('YYYY'),
+    month: momentDate.format(monthFormat),
+    day: momentDate.format('D'),
+  }
+}
+
+export {
+  convertDateTextObject,
+  formatDate,
+  parseDate,
+}

package/template/src/infrastructures/common/logger.ts

@@ -0,0 +1,115 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable no-console */
+import { REACT_APP_DEBUG } from '@env'
+import { ApiResponse } from 'apisauce'
+import { AxiosResponse } from 'axios'
+import clc from 'cli-color'
+
+import { ITypedMap } from '@/models'
+
+import APIResponse from '../NetClient/ApiResponse'
+
+const log = (message?: any, ...para: any[]) => {
+  if (REACT_APP_DEBUG === 'true') {
+    if (para === undefined || para === null || para.length === 0) {
+      console.log(`${clc.greenBright(message)}`)
+    } else if (para && para.length === 1) {
+      console.log(`${clc.greenBright(message)}`, para[0])
+    } else {
+      console.log(`${clc.greenBright(message)}`, para)
+    }
+  }
+}
+const debug = (message?: any, ...para: any[]): void => {
+  if (REACT_APP_DEBUG === 'true') {
+    if (para === undefined || para === null || para.length === 0) {
+      console.debug(`${clc.green(message)}`)
+    } else if (para && para.length === 1) {
+      console.debug(`${clc.green(message)}`, para[0])
+    } else {
+      console.debug(`${clc.green(message)}`, para)
+    }
+  }
+}
+const info = (message: string): void => {
+  if (REACT_APP_DEBUG === 'true') console.log(clc.greenBright(message))
+}
+
+const warn = (message: string): void => {
+  if (REACT_APP_DEBUG === 'true') console.log(clc.yellow(message))
+}
+
+const error = (message: string, errorObj?: any): void => {
+  if (REACT_APP_DEBUG === 'true') {
+    console.log(clc.red(message))
+    if (errorObj) {
+      console.log(errorObj)
+    }
+  }
+}
+
+const request = (method: string, headerParams: Record<string, unknown>, url: string, formBody?: string): void => {
+  if (REACT_APP_DEBUG === 'true') {
+    const bodyString = method !== 'GET' ? `${clc.greenBright('\nRequest [Body]')}${!formBody ? clc.greenBright('  <Empty>') : clc.greenBright(`\n${JSON.stringify(JSON.parse(formBody), [''], 2)}`)}` : ''
+    const requestSymbol = `${clc.greenBright('Request ==> ')}`
+
+    console.log(`\n
+${clc.blackBright('=============================< ')}${requestSymbol}${(clc.blackBright('>=================================\n'))}
+${clc.xterm(132)(`Request [Method]: ${method}`)}
+${clc.green(`Request [Url]: ${url}`)}
+${clc.cyan('Request [Header]')}${!headerParams ? clc.cyan('  <Empty>') : clc.cyan(`\n${JSON.stringify(headerParams, null, 2)}\n`)}${bodyString}
+${clc.blackBright('\n========================================================================')}
+`)
+  }
+}
+
+const resp = (response: Response | AxiosResponse | ApiResponse<any>): void => {
+  if (REACT_APP_DEBUG === 'true') {
+    const responseSymbol = `${clc.greenBright('<== Response ')}`
+
+    const url = response instanceof Response ? response.url : response.config?.url
+
+    console.log(`\n
+${clc.blackBright('=============================< ')}${responseSymbol}${(clc.blackBright('>=================================\n'))}
+${clc.green(`Response [Url]: ${url}`)}
+${clc.yellow(`Response [Status Code]: ${response.status}`)}
+${clc.cyan('Response [Header]')}
+${clc.cyan(response.headers ? JSON.stringify(response.headers, null, 2) : '')} \n
+${clc.blackBright('========================================================================')}
+`)
+  }
+}
+
+const responseBody = (respBody: Record<string, unknown>): void => {
+  if (REACT_APP_DEBUG === 'true') {
+    console.log(`\n
+${clc.greenBright('Response [Body]:')}
+${clc.greenBright(JSON.stringify(respBody, null, 2))} \n
+${clc.blackBright('========================================================================')}
+`)
+  }
+}
+
+const object = (message: string, obj: Record<string, unknown> | ITypedMap<any>): void => {
+  if (REACT_APP_DEBUG === 'true') {
+    console.log(`\n
+  ${clc.blackBright('=============================< ')}${message}${(clc.blackBright('>=================================\n'))}
+${clc.greenBright(JSON.stringify(obj, null, 2))} \n
+${clc.blackBright('========================================================================')}
+`)
+  }
+}
+
+export default {
+  log,
+  info,
+  debug,
+  warn,
+  error,
+  request,
+  resp,
+  responseBody,
+  object,
+}
+

package/template/src/locales/en-US/general.json

@@ -0,0 +1,26 @@
+{
+  "app_name": "ProjectName",
+  "button": {
+    "cancel": "Cancel",
+    "choose": "Choose",
+    "confirm": "Confirm",
+    "done": "Done",
+    "edit": "Edit",
+    "learn_more": "Learn More",
+    "ok": "OK",
+    "redeem": "Redeem",
+    "reset": "Reset",
+    "retry": "Retry",
+    "show_more": "Show More",
+    "submit": "Submit",
+    "save": "Save"
+  },
+  "date_display": "{{day}} {{month}} {{year}}",
+  "loading": "Loading...",
+  "placeholder": {
+    "search": "Search"
+  },
+  "version": "App Version",
+  "version_string": "{{version_name}}",
+  "version_stringb": "{{version_name}} (Build {{build}})"
+}

package/template/src/locales/en-US/index.ts

@@ -0,0 +1,9 @@
+import * as general from './general.json'
+import * as screens from './screens.json'
+import * as setting from './setting.json'
+
+export default {
+  general,
+  screens,
+  setting,
+}

package/template/src/locales/en-US/screens.json

@@ -0,0 +1,4 @@
+{
+  "home": "Home",
+  "settings": "Settings"
+}

package/template/src/locales/en-US/setting.json

@@ -0,0 +1,3 @@
+{
+  "language": "Language"
+}

package/template/src/locales/i18n.ts

@@ -0,0 +1,109 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/naming-convention */
+import 'intl-pluralrules'
+
+import { REACT_APP_DEBUG as DEBUG } from '@env'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import i18n, { LanguageDetectorAsyncModule, Services } from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import * as RNLocalize from 'react-native-localize'
+
+import { Locale } from '@/configs/constants/type'
+import { StorageKey } from '@/configs/constants/type/StorageKey.type'
+import logger from '@/infrastructures/common/logger'
+
+import en_US from './en-US/index'
+// import zh_CN from './zh-CN/index'
+import zh_TW from './zh-TW/index'
+
+const i18nOptions: Record<any, any> = {
+  compatibilityJSON: 'v4',
+  lng: 'zh_TW',
+  fallbackLng: 'zh_TW',
+  debug: DEBUG === 'true',
+  keySeparator: '.',
+  nsSeparator: ':',
+  interpolation: { escapeValue: false }, // not needed for react as it escapes by default
+  resources: {
+    en_US: en_US,
+    // zh_CN: zh_CN,
+    zh_TW: zh_TW,
+  },
+  react: {
+    // wait: true,
+    useSuspense: true,
+    bindI18n: 'languageChanged loaded',
+    bindI18nStore: 'added removed',
+    nsMode: 'default',
+  },
+}
+
+export const findBestMatchedDeviceLanguage = (deviceLocale: string) => {
+  let appLang = Locale.enUS
+  switch (deviceLocale) {
+    case (new RegExp(/^en/).exec(deviceLocale) || {}).input:
+      appLang = Locale.enUS
+      break
+    case (new RegExp(/^zh-HK/).exec(deviceLocale) || new RegExp(/^zh-Hant/).exec(deviceLocale) || {}).input:
+      appLang = Locale.zhTW
+      break
+    // case (new RegExp(/^zh-CN/).exec(deviceLocale) || new RegExp(/^zh-Hans/).exec(deviceLocale) || {}).input:
+    //   appLang = Locale.zhCN
+    //   break
+  }
+
+  return appLang
+}
+
+const languageDetector: LanguageDetectorAsyncModule = {
+  type: 'languageDetector',
+  // If this is set to true, your detect function receives a callback function that you should call with your language,
+  // useful to retrieve your language stored in AsyncStorage for example
+  async: true,
+  init: (
+    _services: Services,
+    _detectorOptions: object,
+    _i18nextOptions: object,
+  ) => {
+    /* use services and options */
+  },
+  detect: (callback: (lng: string) => void) => {
+    void AsyncStorage.getItem(StorageKey.appLang)
+      .then((value: string | null) => {
+        if (value === undefined || value === null) {
+          const preferredLocale = RNLocalize.getLocales()[0]
+          const deviceLocale = preferredLocale.languageTag
+          const bestLng = findBestMatchedDeviceLanguage(deviceLocale)
+
+          logger.log('i18n detector bestLng', bestLng)
+          callback(bestLng)
+
+          return
+        } else {
+          logger.log('i18n detector AsyncStorage APP_LANG', value)
+          callback(value)
+
+          return
+        }
+      })
+  },
+  cacheUserLanguage: (lng: string) => {
+    void AsyncStorage.setItem(StorageKey.appLang, lng)
+    logger.log('i18n detector cacheUserLanguage', lng)
+
+    return
+  },
+}
+
+void i18n
+  .use(languageDetector)
+  .use(initReactI18next)
+  .init(i18nOptions)
+  .then(() => {
+    // init
+  })
+  .finally(() => {
+    // finally
+  })
+
+export default i18n

package/template/src/locales/zh-TW/general.json

@@ -0,0 +1,26 @@
+{
+  "app_name": "ProjectName",
+  "button": {
+    "cancel": "取消",
+    "choose": "選擇",
+    "confirm": "確認",
+    "done": "完成",
+    "edit": "修改",
+    "learn_more": "查看詳情",
+    "ok": "好",
+    "redeem": "兌換",
+    "reset": "重設",
+    "retry": "重試",
+    "show_more": "顯示更多",
+    "submit": "提交",
+    "save": "儲存"
+  },
+  "date_display": "{{year}}年{{month}}月{{day}}日",
+  "loading": "載入中...",
+  "placeholder": {
+    "search": "搜尋"
+  },
+  "version": "版本",
+  "version_string": "{{version_name}}",
+  "version_stringb": "{{version_name}} (Build {{build}})"
+}

package/template/src/locales/zh-TW/index.ts

@@ -0,0 +1,9 @@
+import * as general from './general.json'
+import * as screens from './screens.json'
+import * as setting from './setting.json'
+
+export default {
+  general,
+  screens,
+  setting,
+}

package/template/src/locales/zh-TW/screens.json

@@ -0,0 +1,4 @@
+{
+  "home": "主頁",
+  "settings": "設定"
+}

package/template/src/locales/zh-TW/setting.json

@@ -0,0 +1,3 @@
+{
+  "language": "語言"
+}

package/template/src/models/index.ts

@@ -0,0 +1,5 @@
+import { List, Map } from 'immutable'
+
+export interface ITypedMap<T> extends Map<string, any> {
+  get<I extends keyof T>(key: I & string): T[I]
+}

package/template/src/models/request.model.ts

@@ -0,0 +1,50 @@
+import { SerializedError } from '@reduxjs/toolkit'
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query'
+
+export interface IBaseResponse<T> {
+  timestamp: number
+  success: boolean
+  code: number
+  message: string
+  result: T
+}
+
+export interface IBaseRequestWithSign extends IBaseRequest {
+  noncr: number
+  timestamp: number
+  sign: string
+}
+
+export interface IBaseRequest {
+  language?: string
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  _ts?: number // use to refresh cache
+}
+
+export type IRequest<T> = T & IBaseRequest
+
+type IPageable = {
+  pageIndex?: number
+  pageSize?: number
+}
+export type IPageableRequest<T> = IRequest<T> & IPageable
+
+export type IResponseError = {
+  status: number
+  message: string
+  data: {
+    code: number
+    message: string
+    success: boolean
+  }
+  exception?: string
+}
+
+export type IUseFetchData<T> = {
+  isFetching: boolean
+  isLoading: boolean
+  isSuccess: boolean
+  refetch: () => any
+  data?: T
+  error: FetchBaseQueryError | SerializedError | undefined
+}

package/template/src/navigators/DrawerNav/DrawerContent.tsx

@@ -0,0 +1,66 @@
+import { DrawerContentComponentProps, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Linking, ScrollView, TouchableOpacity, View } from 'react-native'
+import { Text } from 'react-native-paper'
+import Icon from 'react-native-paper/src/components/Icon'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { images } from '@/assets'
+import { IconX, PressableOpacity } from '@/components/basic'
+import useTheme from '@/hooks/useTheme'
+import logger from '@/infrastructures/common/logger'
+import { AppRoutes } from '@/navigators/types'
+
+import DrawerItem from './DrawerItem'
+
+const DrawerContent = (props: DrawerContentComponentProps) => {
+  const insets = useSafeAreaInsets()
+  const { Colors, Fonts, Gutters, Layout } = useTheme()
+  const { t } = useTranslation()
+
+  const { navigation, state } = props
+  const { index, routes } = state
+  const currentRouteName = routes[index].name
+
+  const gotoSettings = () => {
+    navigation.navigate(AppRoutes.SettingsScreen)
+    navigation.closeDrawer()
+  }
+
+  const navigateTo = (routeName: string) => {
+    navigation.navigate(routeName)
+    navigation.closeDrawer()
+  }
+
+  const closeDrawer = () => {
+    navigation.closeDrawer()
+  }
+
+  return (
+    <DrawerContentScrollView {...props}>
+      {/* <DrawerItemList {...props}/> */}
+      <View
+        style={[Layout.row, Layout.fill, Layout.justifyContentEnd, Gutters.smallHPadding]}
+      >
+        {/* <Icon size={40} source={images.menu_settings} /> */}
+        <PressableOpacity onPress={closeDrawer}>
+          <IconX size={40} color={Colors.text} origin={IconX.ANT_DESIGN} name="close" />
+        </PressableOpacity>
+      </View>
+      <DrawerItem
+        label={({ color, focused }) => <Text style={[{ color }]}>{`${t('screens:home')}`}</Text>}
+        icon={({ color, focused, size }) => <IconX size={40} color={color} origin={IconX.ANT_DESIGN} name={'home'} />}
+        // labelStyle={[Fonts.drawerItem, { color: currentRouteName === AppRoutes.DrawerMain ? Colors.primary : Colors.text }]}
+        focused={currentRouteName === `${AppRoutes.MainBottomTabNav}`}
+        activeTintColor={Colors.primary}
+        inactiveTintColor={Colors.text}
+        activeBackgroundColor={Colors.transparent}
+        onPress={() => navigateTo(AppRoutes.MainBottomTabNav)}
+      />
+    </DrawerContentScrollView>
+  )
+
+}
+
+export default DrawerContent