@ccrf01/react-native-template 0.0.16

package/template/package.json

@@ -0,0 +1,156 @@
+{
+  "name": "ProjectName",
+  "version": "0.0.1",
+  "build": "1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios --simulator 'iPhone 17 Pro Max'",
+    "lint": "eslint .",
+    "start:dev": "npm run watch-del; APP_ENV=development react-native start",
+    "start:prod": "npm run watch-del; APP_ENV=production react-native start",
+    "test": "jest",
+    "watch-del": "watchman watch-del-all"
+  },
+  "dependencies": {
+    "@emotion/native": "^11.11.0",
+    "@emotion/react": "^11.14.0",
+    "@freakycoder/react-native-bounceable": "^2.1.0",
+    "@hookform/resolvers": "^5.2.1",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-community/blur": "^4.4.1",
+    "@react-native-community/datetimepicker": "^8.6.0",
+    "@react-native-community/hooks": "^100.1.0",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@react-native-community/toolbar-android": "^0.2.1",
+    "@react-native-masked-view/masked-view": "^0.3.2",
+    "@react-native-picker/picker": "^2.11.4",
+    "@react-native-vector-icons/ant-design": "^12.4.0",
+    "@react-native-vector-icons/common": "^12.4.0",
+    "@react-native-vector-icons/evil-icons": "^12.4.0",
+    "@react-native-vector-icons/fontawesome6": "^12.3.0",
+    "@react-native-vector-icons/ionicons": "^12.3.0",
+    "@react-native-vector-icons/lucide": "^12.4.0",
+    "@react-native-vector-icons/material-design-icons": "^12.4.0",
+    "@react-native/new-app-screen": "0.83.1",
+    "@react-navigation/bottom-tabs": "^7.10.1",
+    "@react-navigation/drawer": "^7.7.13",
+    "@react-navigation/elements": "^2.9.5",
+    "@react-navigation/material-top-tabs": "^7.4.13",
+    "@react-navigation/native": "^7.1.28",
+    "@react-navigation/native-stack": "^7.9.2",
+    "@react-navigation/stack": "^7.6.16",
+    "@reduxjs/toolkit": "^2.11.2",
+    "apisauce": "^3.2.2",
+    "buffer": "^6.0.3",
+    "cli-color": "^2.0.4",
+    "crypto-es": "^3.1.2",
+    "deepmerge": "^4.3.1",
+    "formik": "^2.4.9",
+    "i18next": "^25.7.4",
+    "immutable": "^5.1.4",
+    "intl-pluralrules": "^2.0.1",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.6.0",
+    "react": "19.2.0",
+    "react-i18next": "^16.5.3",
+    "react-native": "0.83.1",
+    "react-native-auto-size-text": "^1.1.1",
+    "react-native-blob-util": "^0.24.6",
+    "react-native-crypto-js": "^1.0.0",
+    "react-native-device-info": "^15.0.1",
+    "react-native-encrypted-storage": "^4.0.3",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-get-random-values": "^2.0.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-localize": "^3.6.1",
+    "react-native-material-ripple": "^0.9.1",
+    "react-native-mmkv": "^3.3.1",
+    "react-native-modal": "^14.0.0-rc.1",
+    "react-native-modalize": "^2.1.1",
+    "react-native-pager-view": "^8.0.0",
+    "react-native-paper": "^5.14.5",
+    "react-native-permissions": "^5.4.4",
+    "react-native-pressable-opacity": "^1.0.10",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-render-html": "^6.3.4",
+    "react-native-root-siblings": "^5.0.1",
+    "react-native-safe-area-context": "^5.6.2",
+    "react-native-screens": "^4.20.0",
+    "react-native-svg": "^15.15.1",
+    "react-native-wheel-pick": "^1.2.6",
+    "react-native-worklets": "^0.7.2",
+    "react-redux": "^9.2.0",
+    "react-usestateref": "^2.0.0",
+    "redux": "^5.0.1",
+    "redux-persist": "^6.0.0",
+    "redux-saga": "^1.4.2",
+    "regenerator-runtime": "^0.14.1",
+    "reselect": "^5.1.1",
+    "rn-encryption": "^3.0.7",
+    "rn-material-ui-textfield": "^1.0.9",
+    "tinycolor2": "^1.6.0",
+    "tsyringe": "^4.10.0",
+    "typesafe-actions": "^5.1.0",
+    "yup": "^1.7.1",
+    "zod": "^4.2.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-private-methods": "^7.27.1",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "20.0.0",
+    "@react-native-community/cli-platform-android": "20.0.0",
+    "@react-native-community/cli-platform-ios": "20.0.0",
+    "@react-native/babel-preset": "0.83.1",
+    "@react-native/eslint-config": "0.83.1",
+    "@react-native/metro-config": "0.83.1",
+    "@react-native/typescript-config": "0.83.0",
+    "@types/cli-color": "^2.0.6",
+    "@types/d3": "^7.4.3",
+    "@types/d3-shape": "^3.1.7",
+    "@types/jest": "^29.5.13",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^24.3.1",
+    "@types/qs": "^6.14.0",
+    "@types/react": "^19.2.0",
+    "@types/react-native-crypto-js": "^1.0.3",
+    "@types/react-native-vector-icons": "^6.4.18",
+    "@types/react-test-renderer": "^19.1.0",
+    "@types/tinycolor2": "^1.4.6",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "eslint": "^8.19.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-import-newlines": "^1.4.0",
+    "eslint-plugin-jsdoc": "^55.4.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-newline-destructuring": "^1.2.2",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-sort-destructure-keys": "^2.0.0",
+    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
+    "jest": "^29.6.3",
+    "plist": "^3.1.0",
+    "prettier": "2.8.8",
+    "react-native-dotenv": "^3.4.11",
+    "react-native-svg-transformer": "^1.5.1",
+    "react-test-renderer": "19.2.0",
+    "reactotron-react-native": "^5.1.16",
+    "reactotron-react-native-mmkv": "^0.2.8",
+    "reactotron-redux": "^3.2.0",
+    "semver": "^7.7.2",
+    "typescript": "^5.8.3"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "volta": {
+    "node": "22.19.0"
+  }
+}

package/template/src/@types/emotion.d.ts

@@ -0,0 +1,12 @@
+import '@emotion/react'
+
+import {ThemeNavigationColors, ThemeMetricsSizes, ThemeParam} from '@/theme/types'
+
+declare module '@emotion/react' {
+  export interface Theme {
+    colors: ThemeNavigationColors;
+    size: ThemeMetricsSizes;
+    param: ThemeParam;
+    roundness: number;
+  }
+}

package/template/src/@types/env.d.ts

@@ -0,0 +1,3 @@
+declare module '@env' {
+  export const REACT_APP_DEBUG: string;
+}

package/template/src/@types/redux-persist-transform-immutable.d.ts

@@ -0,0 +1 @@
+declare module 'redux-persist-transform-immutable';

package/template/src/@types/typing.d.ts

@@ -0,0 +1,17 @@
+declare module '*.json' {
+  const value: any;
+  export default value;
+}
+
+declare module "*.svg" {
+  import React from 'react';
+  import { SvgProps } from "react-native-svg";
+  const content: React.FC<SvgProps>;
+  export default content;
+}
+
+declare module '*.png' {
+  import { ImageSourcePropType } from 'react-native'
+  const content: ImageSourcePropType
+  export default content
+}

package/template/src/AppContainer.tsx

@@ -0,0 +1,109 @@
+import { Theme as EmotionTheme, ThemeProvider as EmotionThemeProvider } from '@emotion/react'
+import React, { useCallback, useEffect } from 'react'
+import * as RNLocalize from 'react-native-localize'
+import { Provider as PaperProvider } from 'react-native-paper'
+import { RootSiblingParent } from 'react-native-root-siblings'
+import { useDispatch, useSelector } from 'react-redux'
+
+import LoadingOverlay from '@/components/basic/LoadingOverlay'
+import { ThemeContext } from '@/contexts/ThemeContext'
+import useAppState from '@/hooks/useAppState'
+import useBuildTheme from '@/hooks/useBuildTheme'
+import logger from '@/infrastructures/common/logger'
+import i18n, { findBestMatchedDeviceLanguage } from '@/locales/i18n'
+import AppNavigationContainer from '@/navigators'
+import { setInitiated } from '@/redux/reducers/nonPersistSlice'
+import { setLocale } from '@/redux/reducers/settingSlice'
+import { selectInitiated } from '@/redux/selectors/nonPersist'
+import { selectLocale } from '@/redux/selectors/setting'
+
+const AppContainer = (): React.ReactElement => {
+  const dispatch = useDispatch()
+  const theme = useBuildTheme()
+  const { Colors, MetricsSizes, NavigationTheme, PaperTheme } = theme
+  const initiated = useSelector(selectInitiated)
+  const lang = useSelector(selectLocale)
+  const appState = useAppState({})
+
+  React.useEffect(() => {
+    logger.debug('AppContainer: appState: ', appState)
+  }, [appState])
+
+  const emotionTheme: EmotionTheme = {
+    colors: PaperTheme.colors,
+    size: MetricsSizes,
+    roundness: PaperTheme.roundness,
+    param: theme.Param,
+  }
+
+  // TODO: Linking handler for Deep Linking
+  // TODO: Receive Push Notification handler
+
+  useEffect(() => {
+    logger.log('lang: ', lang)
+    logger.log(`i18n.language: ${i18n.language ? i18n.language : 'null'}`)
+    const preferredLocale = RNLocalize.getLocales()[0]
+    const deviceLocale = preferredLocale.languageTag
+    logger.log('deviceLocale: ' + deviceLocale)
+
+    // Set app locale as device's locale
+    if (lang === null || lang === undefined) {
+      setupLocale(deviceLocale)
+    } else {
+      i18n.changeLanguage(lang)
+        .then(() => {
+          dispatch(setInitiated(true))
+        })
+        .catch((error) => {
+
+        })
+        .finally(() => {
+          // finally
+        })
+    }
+    // RNLocalize.addEventListener('change', handleLocalizationChange)
+
+    // return () => {
+    //   RNLocalize.removeEventListener('change', handleLocalizationChange)
+    // }
+  }, [lang])
+
+  const handleLocalizationChange = () => {
+    const preferredLocale = RNLocalize.getLocales()[0]
+    const deviceLocale = preferredLocale.languageTag
+    logger.log('handleLocalizationChange deviceLocale: ' + deviceLocale)
+    setupLocale(deviceLocale)
+  }
+
+  const setupLocale = useCallback((deviceLocale: string) => {
+    const appLang = findBestMatchedDeviceLanguage(deviceLocale)
+    logger.log(`appLang: ${appLang}`)
+    i18n.changeLanguage(appLang)
+      .then(() => {
+        dispatch(setLocale(appLang))
+        dispatch(setInitiated(true))
+      })
+      .catch((error) => {
+
+      })
+      .finally(() => {
+        // finally
+      })
+  }, [])
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <EmotionThemeProvider theme={emotionTheme}>
+        <PaperProvider theme={PaperTheme}>
+          <RootSiblingParent>
+            {initiated ? <AppNavigationContainer theme={NavigationTheme} /> : <></>}
+            <LoadingOverlay indicatorColor={Colors.primary} />
+          </RootSiblingParent>
+        </PaperProvider>
+      </EmotionThemeProvider>
+    </ThemeContext.Provider>
+  )
+}
+
+export default AppContainer
+AppContainer.displayName = 'AppContainer'

package/template/src/assets/index.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+import { ImageRequireSource, ImageSourcePropType } from 'react-native'
+
+const _images = {
+  cloud: require('./images/143.png') as ImageRequireSource,
+}
+
+type ImagesType = typeof _images
+export type IImage = { [P in keyof ImagesType]: ImageRequireSource }
+
+export const images: IImage = _images as IImage

package/template/src/components/basic/BackButton/index.tsx

@@ -0,0 +1,34 @@
+import React, { FunctionComponent } from 'react'
+// import Icon from 'react-native-vector-icons/MaterialIcons';
+import { TouchableOpacity } from 'react-native'
+
+import { PressableOpacity } from '@/components/basic'
+import useTheme from '@/hooks/useTheme'
+import { Theme } from '@/theme/types'
+
+import IconX from '../Icons'
+
+
+interface IBackButtonProps {
+  onPress: () => void
+  color?: string
+}
+const BackButton: FunctionComponent<IBackButtonProps> = ({ color, onPress }: IBackButtonProps) => {
+  const { Colors, Gutters } = useTheme()
+  const { accent, onPrimary } = Colors
+
+  return (
+    <PressableOpacity
+      onPress={onPress}
+      style={[]}
+    >
+      <IconX
+        origin={IconX.MATERIAL_DESIGN_ICONS}
+        name={'arrow-back-ios'}
+        color={color ? color : onPrimary}
+        size={32}
+      />
+    </PressableOpacity>
+  )
+}
+export default BackButton

package/template/src/components/basic/Body/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { View, ViewStyle } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import Svg, { Path } from 'react-native-svg'
+
+import useTheme from '@/hooks/useTheme'
+
+interface IBodyProps {
+  insetBottom?: boolean
+  children: React.ReactNode[] | React.ReactNode
+  style?: ViewStyle | ViewStyle[]
+  withRoundedTopRight?: boolean
+  topRightColor?: string
+}
+
+const Body: React.FC<IBodyProps> = ({ children, insetBottom = false, style = {}, topRightColor, withRoundedTopRight = false }: IBodyProps) => {
+  const insets = useSafeAreaInsets()
+  const { Colors, Fonts, Gutters, Layout } = useTheme()
+  const defaultTopRightColor = topRightColor ?? Colors.primary
+
+  const path = React.useMemo(
+    () =>
+      [
+        'M 0 0',
+        'C 0 0 50 0 50 50',
+        'L 50 0',
+        'L 0 0',
+      ].join(' '),
+    []
+  )
+
+  return (
+    <View
+      style={[
+        Layout.fill,
+        Layout.column,
+        Layout.fullWidth,
+        { height: '100%' },
+        // Gutters.tinyTPadding,
+        insetBottom ? { paddingBottom: insets.bottom } : {},
+        withRoundedTopRight ? {
+          backgroundColor: 'white',
+          // borderTopRightRadius:40,
+          // paddingTop: 28,
+        } : {},
+        style,
+      ]}
+    >
+      {children}
+      {/* {withRoundedTopRight && (
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+          }}
+          pointerEvents="none"
+        >
+          <Svg width={50} height={50} viewBox="0 0 50 50">
+            <Path fill={defaultTopRightColor} stroke={defaultTopRightColor} d={path} />
+          </Svg>
+        </View>
+      )} */}
+    </View>
+  )
+}
+
+export default React.memo(Body)

package/template/src/components/basic/Button/index.tsx

@@ -0,0 +1,181 @@
+import React, { useCallback } from 'react'
+import { StyleProp, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
+import {
+  Button as PButton,
+  ButtonProps,
+  IconButton,
+  Surface,
+  Text,
+  TouchableRipple,
+} from 'react-native-paper'
+import { IconSource } from 'react-native-paper/src/components/Icon'
+import color from 'tinycolor2'
+
+import useTheme from '@/hooks/useTheme'
+import logger from '@/infrastructures/common/logger'
+
+import { getButtonColor } from './utils'
+
+export type ButtonType = 'text' | 'round' | 'outline' | 'contain' | 'icon'
+
+export interface IButtonProps {
+  onPress?: () => void | Promise<void>
+  // isRound?: boolean
+  type?: ButtonType
+  text?: string
+  buttonSize?: 'small' | 'medium' | 'large'
+  isPrimary?: boolean
+  buttonColor?: string
+  textColor?: string
+  borderColor?: string
+  style?: ViewStyle | ViewStyle[]
+  contentStyle?: ViewStyle | ViewStyle[]
+  textStyle?: TextStyle | TextStyle[]
+  icon?: IconSource | React.ReactElement // React.ReactElement|string
+  iconSize?: number
+  disabled?: boolean
+  textColorOnTextOnly?: boolean
+}
+const Button: React.FC<IButtonProps> = ({
+  borderColor: customBorderColor,
+  buttonColor: customButtonColor,
+  buttonSize = 'small',
+  contentStyle,
+  disabled = false,
+  icon,
+  iconSize,
+  isPrimary = true,
+  onPress = () => { },
+  style,
+  text,
+  textColor: customTextColor,
+  textColorOnTextOnly = false,
+  textStyle,
+  type = 'text',
+}: IButtonProps) => {
+  const theme = useTheme()
+  const [tempDisable, setTempDisable] = React.useState(false)
+  const {
+    Colors,
+    Common,
+    darkMode,
+    Fonts,
+    Gutters,
+    Layout,
+  } = theme
+  const isMode = React.useCallback(
+    (typeToCompare: ButtonType) => {
+      return type === typeToCompare
+    },
+    [type]
+  )
+  const mode = React.useMemo(() => {
+    if (type === 'round') {
+      return 'contained'
+    }
+    if (type === 'contain') {
+      return 'contained-tonal'
+    }
+    if (type === 'outline') {
+      return 'outlined'
+    }
+
+    return 'text'
+  }, [type])
+  let _textColor = customTextColor
+  if (textColorOnTextOnly) {
+    _textColor = undefined
+  }
+  const { backgroundColor, borderColor, textColor } = getButtonColor(isMode, Colors, darkMode, isPrimary, type, disabled, _textColor, customButtonColor, customBorderColor, textColorOnTextOnly)
+  let _buttonStyle = Object.assign({}, Common.button.base)
+  let _contentStyle = Object.assign({}, Common.button.content)
+  if (isMode('icon')) {
+    _contentStyle = Object.assign(_contentStyle, Common.button.contentIconOnly)
+  }
+  if (isMode('outline')) {
+    _buttonStyle = Object.assign(_buttonStyle, {
+      ...Common.button.outline,
+      borderColor,
+    })
+  }
+
+  switch (buttonSize) {
+    case 'medium':
+      _contentStyle = Object.assign(_contentStyle, { minHeight: 60 })
+      _buttonStyle = Object.assign(_buttonStyle, { borderRadius: 30 })
+      break
+    case 'large':
+      break
+  }
+
+  const onPressHandler = useCallback(() => {
+    if (tempDisable) {
+      return
+    }
+    setTempDisable(true)
+    setTimeout(() => {
+      setTempDisable(false)
+    }, 500)
+    void onPress()
+  }, [tempDisable])
+
+  if (type === 'icon' && icon !== undefined) {
+    const rippleColor = color(textColor).setAlpha(0.12)
+      .toPercentageRgbString()
+
+    /* return (
+      <TouchableRipple
+        style={[
+          Common.button.base,
+          _buttonStyle,
+          // { backgroundColor: backgroundColor },
+          style ? style : {},
+          {
+            borderRadius: 20,
+          },
+        ]}
+        onPress={onPress}
+        // activeOpacity={0.6}
+        disabled={disabled}
+        rippleColor={rippleColor}
+      >
+        <View style={[_contentStyle, { alignItems: 'center', justifyContent: 'center' }, contentStyle]}>
+          {icon !== undefined && icon}
+        </View>
+      </TouchableRipple>
+    ) */
+    return (
+      <IconButton
+        onPress={() => void onPress()}
+        disabled={disabled}
+        style={[{ borderRadius: 12, margin: 0 }, style]}
+        size={iconSize || 24}
+        containerColor={backgroundColor}
+        icon={React.isValidElement(icon) ? (props) => icon : (icon)}
+        iconColor={textColor}
+      />
+    )
+  }
+
+  return (
+    <PButton
+      mode={mode}
+      onPress={onPressHandler}
+      disabled={disabled}
+      style={[
+        Common.button.base,
+        _buttonStyle,
+        style ? style : {},
+      ]}
+      contentStyle={[_contentStyle, contentStyle]}
+      labelStyle={[textStyle ? textStyle : {}, textColorOnTextOnly && customTextColor ? { color: customTextColor } : {}]}
+      textColor={textColor}
+      buttonColor={backgroundColor}
+      icon={React.isValidElement(icon) ? (props) => icon : (icon as IconSource)}
+    >
+      {text ? text : ''}
+    </PButton>
+  )
+}
+
+export default Button

package/template/src/components/basic/Button/utils.ts

@@ -0,0 +1,78 @@
+import { black, white } from 'react-native-paper/src/styles/themes/v2/colors'
+
+import { isDark } from '@/infrastructures/common/colorUtils'
+import { ThemeNavigationColors } from '@/theme/types'
+
+import { ButtonType } from './index'
+
+const getButtonColor = (isType: (type: ButtonType) => boolean, colors: ThemeNavigationColors, darkMode: boolean, isPrimary: boolean, type: ButtonType, disabled?: boolean, customTextColor?: string, customButtonColor?: string, customBorderColor?: string, textColorOnTextOnly?: boolean) => {
+  const backgroundColor = getButtonBackgroundColor(isType, colors, darkMode, isPrimary, type, disabled, customButtonColor)
+  const borderColor = getBorderColor(isType, colors, darkMode, isPrimary, type, disabled, customTextColor, customButtonColor, customBorderColor)
+  const textColor = getTextColor(isType, colors, darkMode, isPrimary, type, disabled, customTextColor, backgroundColor, textColorOnTextOnly)
+
+  return {
+    backgroundColor,
+    borderColor,
+    textColor,
+  }
+}
+const getButtonBackgroundColor = (isType: (type: ButtonType) => boolean, colors: ThemeNavigationColors, darkMode: boolean, isPrimary: boolean, type: ButtonType, disabled?: boolean, customButtonColor?: string) => {
+  if (customButtonColor && !disabled) {
+    return customButtonColor
+  }
+
+  if (disabled) {
+    if (isType('outline') || isType('text')) {
+      return 'transparent'
+    }
+
+    return colors.surfaceDisabled
+  }
+  if (isType('round')) {
+    return colors.primary
+  }
+  if (isType('contain')) {
+    return colors.secondaryContainer
+  }
+
+  return 'transparent'
+}
+const getBorderColor = (isType: (type: ButtonType) => boolean, colors: ThemeNavigationColors, darkMode: boolean, isPrimary: boolean, type: ButtonType, disabled?: boolean, customTextColor?: string, customButtonColor?: string, customBorderColor?: string) => {
+  if (disabled && isType('outline')) {
+    return colors.surfaceDisabled
+  }
+  if ((customBorderColor || customTextColor) && isType('outline')) {
+    return customBorderColor || customTextColor
+  }
+  if (isType('outline')) {
+    return colors.primary
+  }
+
+  return 'transparent'
+}
+const getTextColor = (isType: (type: ButtonType) => boolean, colors: ThemeNavigationColors, darkMode: boolean, isPrimary: boolean, type: ButtonType, disabled?: boolean, customTextColor?: string, backgroundColor?: string, textColorOnTextOnly?: boolean) => {
+  if (customTextColor && !disabled) {
+    return customTextColor
+  }
+  if (disabled) {
+    return colors.onSurfaceDisabled
+  }
+  if (darkMode) {
+    if (isType('round') || isType('contain')) {
+      return isDark({ dark: darkMode, backgroundColor }) ? white : black
+    }
+  }
+  if (isType('outline') || isType('text') || isType('icon')) {
+    return colors.primary
+  }
+  if (isType('round')) {
+    return colors.onPrimary
+  }
+  if (isType('contain')) {
+    return colors.onSecondaryContainer
+  }
+}
+
+export {
+  getButtonColor,
+}