@ccrf01/react-native-template 0.0.16

package/template/src/theme/themes/default_dark/Variables.ts

@@ -0,0 +1,84 @@
+import { ThemeNavigationColors } from '@/theme/types'
+
+const ownColor = {
+  accent: 'rgb(150, 170, 140)',       // lighter accent to pop on dark bg
+  tintPrimary: '#FF9F45',             // warm tint still vibrant
+  buttonText: '#FFFFFF',              // white text for readability
+  iconColor: 'rgb(200, 205, 190)',    // lighter icons
+  transparent: 'rgba(0,0,0,0)',
+  negative: '#2b2b2b',                // dark gray background
+  onNegative: '#FFFFFF',              // white text on dark
+  inputBackground: '#1E1E1E',         // typical dark input background
+  statusBarBackgroundColor: 'rgba(0, 0, 0, .6)',
+  topBarBackgroundColor: '#2d1e24',   // darker variant of light theme pinkish
+  // Bottom Tab
+  bottomTabActiveTextColor: '#80CBC4',     // teal shade that stands out on dark
+  bottomTabInactiveTextColor: '#777777',   // muted gray
+  homeBottomTabBackgroundColor: '#0d47a1', // darker blue
+  rewardsBottomTabBackgroundColor: '#004d40', // darker teal
+  storeListBottomTabBackgroundColor: '#37474F', // dark slate
+
+  itemBackgroundColor: '#1E1A15',
+
+  grey: '#EBEBEB',
+  white: '#FFFFF',
+}
+
+const navColors: Partial<ThemeNavigationColors> = {
+  // React Navigation colors
+  card: 'rgb(18, 18, 18)',
+  text: 'rgb(229, 229, 231)',
+  border: 'rgb(39, 39, 41)',
+  notification: 'rgb(255, 69, 58)',
+
+  buttonText: 'rgb(226, 227, 220)',
+  statusBarBackgroundColor: 'rgba(48,63,159, 0.7)',
+
+  accent: 'rgb(84, 99, 77)',
+
+  // react-native-paper MD3 colors
+  primary: 'rgb(165, 200, 255)',
+  onPrimary: 'rgb(0, 49, 95)',
+  primaryContainer: 'rgb(0, 71, 134)',
+  onPrimaryContainer: 'rgb(212, 227, 255)',
+  secondary: 'rgb(188, 199, 220)',
+  onSecondary: 'rgb(39, 49, 65)',
+  secondaryContainer: 'rgb(61, 71, 88)',
+  onSecondaryContainer: 'rgb(216, 227, 248)',
+  tertiary: 'rgb(218, 189, 226)',
+  onTertiary: 'rgb(61, 40, 70)',
+  tertiaryContainer: 'rgb(85, 63, 93)',
+  onTertiaryContainer: 'rgb(247, 216, 255)',
+  error: 'rgb(255, 180, 171)',
+  onError: 'rgb(105, 0, 5)',
+  errorContainer: 'rgb(147, 0, 10)',
+  onErrorContainer: 'rgb(255, 180, 171)',
+  background: 'rgb(26, 28, 30)',
+  onBackground: 'rgb(227, 226, 230)',
+  surface: 'rgb(26, 28, 30)',
+  onSurface: 'rgb(227, 226, 230)',
+  surfaceVariant: 'rgb(67, 71, 78)',
+  onSurfaceVariant: 'rgb(195, 198, 207)',
+  outline: 'rgb(141, 145, 153)',
+  outlineVariant: 'rgb(67, 71, 78)',
+  shadow: 'rgb(0, 0, 0)',
+  scrim: 'rgb(0, 0, 0)',
+  inverseSurface: 'rgb(227, 226, 230)',
+  inverseOnSurface: 'rgb(47, 48, 51)',
+  inversePrimary: 'rgb(0, 95, 175)',
+  elevation: {
+    level0: 'transparent',
+    level1: 'rgb(33, 37, 41)',
+    level2: 'rgb(37, 42, 48)',
+    level3: 'rgb(41, 47, 55)',
+    level4: 'rgb(43, 49, 57)',
+    level5: 'rgb(46, 52, 62)',
+  },
+  surfaceDisabled: 'rgba(227, 226, 230, 0.12)',
+  onSurfaceDisabled: 'rgba(227, 226, 230, 0.38)',
+  backdrop: 'rgba(45, 49, 56, 0.4)',
+}
+
+const Colors: Partial<ThemeNavigationColors> = Object.assign(navColors, ownColor)
+
+export default { Colors }

package/template/src/theme/themes/default_dark/index.ts

@@ -0,0 +1,2 @@
+export { default as Images } from './Images'
+export { default as Variables } from './Variables'

package/template/src/theme/themes/index.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { Theme } from '@/theme/types'
+
+import * as default_dark from './default_dark'
+
+type Themes = { [key: string]: Partial<Theme> }
+
+export default { default_dark } as Themes

package/template/src/theme/types.ts

@@ -0,0 +1,152 @@
+import { Theme as NavigationThemeType } from '@react-navigation/native'
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import { MD3Theme as PaperThemeType } from 'react-native-paper'
+
+import { FontAlign, FontType, FontWithSize, MD3FontType } from '@/theme/Fonts'
+import { GutterType } from '@/theme/Gutters'
+import { ILayout } from '@/theme/Layout'
+
+import { Colors, ownColor } from './Variables'
+
+type Overwrite<T, NewT> = Omit<T, keyof NewT> & NewT
+
+type MergeStyleKeys<A, B, C = StyleType> = { [P in
+  `${Exclude<keyof A, symbol>}${Exclude<Capitalize<string & keyof B>, symbol>}`
+  ]: C; }
+
+// declare module '@/theme/types' {
+
+export type StyleType = TextStyle & ViewStyle & ImageStyle
+
+// export type ThemeColors = typeof Colors[keyof typeof Colors]
+
+
+// export type ThemeNavigationTheme = {
+//   dark: boolean
+//   colors: ThemeNavigationColors
+// }
+
+
+// export type ThemeNavigationColors = {
+//   primary: string
+//   background: string
+//   card: string
+//   text: string
+//   border: string
+//   notification: string
+// }
+
+type NavigationColors = NavigationThemeType['colors']
+type PaperColors = PaperThemeType['colors']
+type OwnColors = typeof ownColor
+type TColors = Overwrite<Overwrite<NavigationColors, PaperColors>, OwnColors>
+export type ThemeNavigationColors = TColors // PaperColors & NavigationColors & OwnColors
+export type ThemeNavigationFonts = PaperThemeType['fonts']
+
+type TNavigationTheme = Overwrite<NavigationThemeType, PaperThemeType>
+export type ThemeNavigationTheme = TNavigationTheme // NavigationThemeType & PaperThemeType
+export type ThemeNavigationThemeWithOwn = Overwrite<ThemeNavigationTheme, { colors: TColors }> // ThemeNavigationTheme & { colors: OwnColors }
+export type CustomPaperThemeType = Overwrite<PaperThemeType, { colors: TColors }>
+
+type MD3FontSizeKey = 'small' | 'medium' | 'large'
+type FontSizeKey = MD3FontSizeKey | 'xlarge' | 'xxlarge'
+export type ThemeFontSize = { [key in FontSizeKey]: number }
+type IconSizeKey = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
+export type ThemeIconSize = { [key in IconSizeKey]: number }
+// export type ThemeMetricsSizes = { [key: string]: number | string }
+export type MetricsSizeKey = 'tiny' | 'small' | 'medium' | 'large'
+export type ThemeMetricsSizes = { [key in MetricsSizeKey]: number }
+
+export enum FontScale {
+  SMALL = 'SMALL',
+  MEDIUM = 'MEDIUM',
+  LARGE = 'LARGE',
+}
+export type ThemeScaledFontSize = { [key in FontScale]: ThemeFontSize }
+export type ThemeParam = {
+  roundness: number
+  itemRoundness: number
+  animation: {
+    scale: number
+  }
+  headerHeight: number
+}
+
+export type ThemeVariables = {
+  Colors: ThemeNavigationColors
+  // NavigationColors: ThemeNavigationColors
+  FontSize: ThemeFontSize
+  IconSize: ThemeIconSize
+  MetricsSizes: ThemeMetricsSizes
+  ScaledFontSize: ThemeScaledFontSize
+  Param: ThemeParam
+}
+
+type MD3FontSizes = { [key in MD3FontSizeKey]: number }
+export type MD3Fonts = MergeStyleKeys<MD3FontType, MD3FontSizes, TextStyle> & { 'default': TextStyle }
+export type ThemeFonts = MergeStyleKeys<FontWithSize, ThemeFontSize, TextStyle> & MD3Fonts & FontAlign & FontType
+export type ThemeIcon = { [K in keyof ThemeIconSize as `${K}Icon`]: StyleType }
+// export type ThemeLayout = { [key: string]: StyleType }
+export type ThemeLayout<T> = {
+  [key in keyof T]: StyleType
+}
+export type ThemeGutters = MergeStyleKeys<ThemeMetricsSizes, GutterType>
+
+type ButtonType = 'base' | 'rounded' | 'outline' | 'contentIconOnly' | 'content' // |'outlineRounded'|'baseSecondary'|'roundedSecondary'|'outlineSecondary'|'outlineRoundedSecondary'
+export type ButtonsStyle = { [key in ButtonType]: StyleType }
+export type ThemeCommon = {
+  // [key: string]: StyleType
+  button: ButtonsStyle
+  textInput: StyleType
+}
+export type ThemeImages = { [key: string]: any }
+
+export type Theme = {
+  Colors: ThemeNavigationColors
+  // NavigationColors: ThemeNavigationColors
+  FontSize: ThemeFontSize
+  MetricsSizes: ThemeMetricsSizes
+  IconSize: ThemeIconSize
+  Fonts: ThemeFonts
+  Icons: ThemeIcon
+  Images: ThemeImages
+  Layout: ThemeLayout<ILayout>
+  Gutters: ThemeGutters
+  Common: ThemeCommon
+  Variables?: Partial<ThemeVariables>
+  NavigationTheme: NavigationThemeType
+  PaperTheme: CustomPaperThemeType
+  darkMode: boolean
+  Param: ThemeParam
+}
+export interface IThemeCommonParams {
+  Colors: ThemeNavigationColors
+  // NavigationColors: ThemeNavigationColors
+  FontSize: ThemeFontSize
+  MetricsSizes: ThemeMetricsSizes
+  Fonts: ThemeFonts
+  Images: ThemeImages
+  Layout: ThemeLayout<ILayout>
+  Gutters: ThemeGutters
+  Variables?: Partial<ThemeVariables>
+  Param?: Partial<ThemeParam>
+}
+// }
+const PADDING_VARIATIONS = {
+  padding: 'padding',
+  paddingL: 'paddingLeft',
+  paddingT: 'paddingTop',
+  paddingR: 'paddingRight',
+  paddingB: 'paddingBottom',
+  paddingH: 'paddingHorizontal',
+  paddingV: 'paddingVertical',
+} as const
+export type PaddingLiterals = keyof typeof PADDING_VARIATIONS
+export type NativePaddingKeyType = typeof PADDING_VARIATIONS[PaddingLiterals]
+
+export type Modifier<T extends string> = Partial<Record<T, boolean>>
+export type PaddingModifiers = Modifier<PaddingLiterals>
+
+
+export type ContainerModifiers = PaddingModifiers
+

package/template/src/utils/encrypt-helper.ts

@@ -0,0 +1,118 @@
+import { Buffer } from 'buffer'
+// import { AES, CBC, PBKDF2, Pkcs7, WordArray } from 'crypto-es'
+// import * as CryptoJS from 'crypto-js'
+import RNCryptoJS from 'react-native-crypto-js'
+import { encryptRSA, generateRSAKeyPair } from 'rn-encryption'
+
+import logger from '@/infrastructures/common/logger'
+
+// TODO: get from api
+import { SystemInfo } from './sys-info-data'
+
+export class EncryptHelper {
+  public static encryptData(data: string): Promise<{
+    encryptedData: string
+    encryptedAesKey: string
+    iv: string
+  }> {
+    return new Promise<{
+      encryptedData: string
+      encryptedAesKey: string
+      iv: string
+    }>((resolve, reject) => {
+      const publicKey = SystemInfo.data.secKey || ''
+      const pemHeader = '-----BEGIN PUBLIC KEY-----'
+      const pemFooter = '-----END PUBLIC KEY-----'
+      const pemContents = publicKey.replace(pemHeader, '')
+        .replace(pemFooter, '')
+        .replace(/\n/g, '')
+      // 1. Generate random AES key and IV
+      const aesKey = RNCryptoJS.lib.WordArray.random(32) // 256-bit key
+      const iv = RNCryptoJS.lib.WordArray.random(16) // 128-bit IV
+      // const aesKey = PBKDF2('password', 'salt', { keySize: 256 / 32 })
+      // const iv = WordArray.random(128 / 8)
+
+      // 2. Encrypt data with AES
+      const encryptedData = RNCryptoJS.AES.encrypt(data, aesKey, {
+        iv: iv,
+        mode: RNCryptoJS.mode.CBC,
+        padding: RNCryptoJS.pad.Pkcs7,
+      }).toString()
+
+      // logger.log('encryptedData', encryptedData)
+      // const encryptedData = AES.encrypt('message', aesKey, { padding: Pkcs7, mode: CBC, iv: iv }).toString()
+
+      // 3. Encrypt AES key with RSA public key
+      // const encryptedAesKey = await this._rsaEncrypt(this._wordArrayToUint8Array(aesKey), publicKey)
+      // const encryptedAesKey = await RSA.encrypt(aesKey.toString(RNCryptoJS.enc.Utf8), publicKey)
+      const aesKeyString = aesKey.toString(RNCryptoJS.enc.Base64)
+      // logger.log('aesKeyString', aesKeyString)
+      const encryptedAesKey = encryptRSA(aesKeyString, pemContents)
+
+      // logger.log('encryptedAesKey', encryptedAesKey)
+
+      const result = {
+        encryptedData,
+        encryptedAesKey,
+        iv: RNCryptoJS.enc.Base64.stringify(iv),
+      }
+      resolve(result)
+    })
+
+  }
+
+  /*
+  private static async _rsaEncrypt(data: Uint8Array, publicKeyPem: string): Promise<string> {
+    const pemHeader = '-----BEGIN PUBLIC KEY-----'
+    const pemFooter = '-----END PUBLIC KEY-----'
+    const pemContents = publicKeyPem.replace(pemHeader, '').replace(pemFooter, '')
+      .trim()
+    const binaryDer = this._base64ToArrayBuffer(pemContents)
+    console.log('crypto', crypto)
+
+    const publicKey = await crypto.subtle.importKey(
+      'spki',
+      binaryDer,
+      { name: 'RSA-OAEP', hash: 'SHA-256' },
+      true,
+      ['encrypt'],
+    )
+
+    const encrypted = await crypto.subtle.encrypt(
+      { name: 'RSA-OAEP' },
+      publicKey,
+      Buffer.from(data),
+    )
+
+    return this._arrayBufferToBase64(encrypted)
+  }
+
+  private static _base64ToArrayBuffer(base64: string): ArrayBuffer {
+    const binaryString = atob(base64)
+    const bytes = new Uint8Array(binaryString.length)
+    for (let i = 0; i < binaryString.length; i++) {
+      bytes[i] = binaryString.charCodeAt(i)
+    }
+
+    return bytes.buffer
+  }
+
+  private static _arrayBufferToBase64(buffer: ArrayBuffer): string {
+    const bytes = new Uint8Array(buffer)
+
+    return btoa(String.fromCharCode(...bytes))
+  }
+
+  private static _wordArrayToUint8Array(wordArray: RNCryptoJS.lib.WordArray): Uint8Array {
+    const words = wordArray.words
+    const sigBytes = wordArray.sigBytes
+    const u8 = new Uint8Array(sigBytes)
+    for (let i = 0; i < sigBytes; i++) {
+      // eslint-disable-next-line no-bitwise
+      u8[i] = (words[i >>> 2] >>> (24 - (i % 4) * 8)) & 0xff
+    }
+
+    return u8
+  }
+  */
+}

package/template/src/utils/index.ts

@@ -0,0 +1,76 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+import { Dimensions, PixelRatio, Platform } from 'react-native'
+
+import logger from '@/infrastructures/common/logger'
+
+const { height: screenHeight, width: screenWidth } = Dimensions.get('screen')
+const dimen = Dimensions.get('window')
+const isIphoneX = (
+  Platform.OS === 'ios' &&
+  !Platform.isPad &&
+  !Platform.isTV &&
+  ((dimen.height === 780 || dimen.width === 780)
+    || (dimen.height === 812 || dimen.width === 812)
+    || (dimen.height === 844 || dimen.width === 844)
+    || (dimen.height === 896 || dimen.width === 896)
+    || (dimen.height === 926 || dimen.width === 926))
+)
+
+const isIOS = Platform.OS === 'ios'
+const { height: windowHeight, width: windowWidth } = dimen
+const scale = windowWidth / 428
+
+logger.log('width', { windowWidth, screenWidth })
+logger.log('scale', scale)
+
+const isSmallDevice = () => {
+  return screenWidth <= 390
+}
+
+const normalize = (size: number, maxSize?: number, minSize?: number) => {
+  let newSize = size * scale
+  const _maxSize = maxSize ? maxSize : size * 1.2
+  const _minSize = minSize ? minSize : size * 0.8
+  if (newSize > _maxSize) {
+    newSize = _maxSize
+  }
+  if (newSize < _minSize) {
+    newSize = _minSize
+  }
+
+  if (Platform.OS === 'ios') {
+    return Math.round(PixelRatio.roundToNearestPixel(newSize))
+  } else {
+    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
+  }
+}
+
+const cleanUnderscoreProps = (obj: any): any => {
+  if (obj) {
+    for (const key in obj) {
+      if (key.startsWith('_')) {
+        delete obj[key]
+      } else if (Array.isArray(obj[key])) {
+        obj[key].forEach((item: any) => {
+          cleanUnderscoreProps(item)
+        })
+      } else if (obj[key] && typeof obj[key] === 'object') {
+        cleanUnderscoreProps(obj[key])
+      }
+    }
+  }
+
+  return obj
+}
+
+
+export {
+  cleanUnderscoreProps,
+  isIOS,
+  isIphoneX,
+  isSmallDevice,
+  normalize,
+  screenHeight,
+  screenWidth,
+}
+

package/template/src/utils/sys-info-data.ts

@@ -0,0 +1,17 @@
+export interface ISystemInfoData {
+  env?: string
+  team?: string
+  sessionTimeout?: number
+  secKey?: string
+  version?: string
+}
+
+export class SystemInfo {
+  public static data: ISystemInfoData = {
+    env: 'PRD',
+    team: 'Cms',
+    sessionTimeout: 3600,
+    secKey: '-----BEGIN PUBLIC KEY-----\nMIIBojANBgkqhkiG9w0BAQEFAAOCAY8AMIIBigKCAYEA4o7iA/kr5qFDzfkIJH6k\nONynGjefJESnQk+NFLtxFHmENLDObtCA0+u72pvJ0RCbxyth69aNDQ1mehlRxwc6\nPiQhNOcf2U58Pu98/QzXWixVGa3mWXBDZ5ci511ECUEt3Olh587VPmRk8F0m92dT\nh/fqGARPQ+bvsFWjEptXTbEQ1qlVIjTY1cmwsRrMr+DLA9VSLrFWsmuDMyBR0Gj7\n+yZ0oxAcUFgfvTDwyDgFrpiM4iAQt9OefrTFjcyyZC5zgAjdrqOJCjgnbdE5lgdL\naGIwIKbB1WIVrsFelfTJ15iz73ml/aP9Op/+ylWBpLzPHkROy57NRiii1NSudzeX\n/h9Kb8avynZEyjCgGPqPT0I7OYkaRZER8ylFpShNrXJijZXl97joeUOjOSuQzwAW\nSgt+dSTUr5u4Q8nGe4qD1XhZpwK4rgOkMVMOwfjsTmByERqogypdxKfGhslR6gZG\nmrqI6G15DXFK2E2Zcr0SJhY6Sx2LF1twFdvnD4sarGyjAgMBAAE=\n-----END PUBLIC KEY-----\n',
+    version: '1.0.0 (0)',
+  } // assigned by core.service.initializr()
+}

package/template/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "extends": "@react-native/typescript-config",
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "**/node_modules",
+    "**/Pods"
+  ],
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+    "types": [
+      "jest",
+      "react-test-renderer",
+      "node"
+    ],
+    /* Completeness */
+    "skipLibCheck": true, /* Skip type checking all .d.ts files. */
+    "target": "esnext",
+    "lib": [
+      "es2019"
+    ],
+    "jsx": "react-native",
+    "typeRoots": [
+      "./node_modules/@types",
+      "src/@types"
+    ],
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    /* Type Checking */
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+}

package/template.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  // Placeholder used to rename and replace in files
+  // package.json, index.json, android/, ios/
+  placeholderName: "ProjectName",
+
+  // Directory with template
+  templateDir: "./template"
+};