@ccrf01/react-native-template 0.0.16

package/template/src/theme/Fonts.ts

@@ -0,0 +1,196 @@
+/**
+ * This file contains all application's style relative to fonts
+ */
+import { StyleSheet } from 'react-native'
+
+import logger from '@/infrastructures/common/logger'
+import {
+  FontScale,
+  MD3Fonts,
+  StyleType,
+  ThemeFonts,
+  ThemeFontSize,
+  ThemeVariables,
+} from '@/theme/types'
+import { normalize } from '@/utils'
+
+type FontWithSizeName = 'text' | 'buttonText' | 'textInput'
+export type FontWithSize = {[key in FontWithSizeName]: StyleType}
+export type FontAlign = {
+  textCenter: StyleType
+  textVCenter: StyleType
+  textJustify: StyleType
+  textLeft: StyleType
+  textRight: StyleType
+}
+
+export type MD3FontType = {
+  display: StyleType
+  headline: StyleType
+  title: StyleType
+  label: StyleType
+  body: StyleType
+}
+
+type CustomFontName =
+  'textShadow'|
+  'settingText'
+
+type CustomFontType = {[key in CustomFontName]: StyleType}
+export type FontType = MD3FontType & CustomFontType
+
+export type MergeThemeFonts = ThemeFonts & {
+  // titleFontStyle: TextStyle
+}
+
+/**
+ *
+ * @param Theme can be spread like {Colors, Gutters, Layout, Common, ...args}
+ * @return {*}
+ * @param fontScale
+ */
+export default  ({ Colors: colors, ScaledFontSize: scaledFontSize }: ThemeVariables, fontScale: FontScale): MergeThemeFonts => {
+  const fontSize = scaledFontSize[fontScale]
+  const md3Fonts: MD3Fonts = {
+    displaySmall: {
+      fontSize: scaledFontSize[FontScale.SMALL].xxlarge,
+      letterSpacing: 0,
+      lineHeight: 44,
+    },
+    displayMedium: {
+      fontSize: scaledFontSize[FontScale.MEDIUM].xxlarge,
+      letterSpacing: 0,
+      lineHeight: 52,
+    },
+    displayLarge: {
+      fontSize: scaledFontSize[FontScale.LARGE].xxlarge,
+      letterSpacing: 0,
+      lineHeight: 64,
+    },
+    headlineSmall: {
+      fontSize: scaledFontSize[FontScale.SMALL].xlarge,
+      letterSpacing: 0,
+      fontWeight: '400',
+      lineHeight: 32,
+    },
+    headlineMedium: {
+      fontSize: scaledFontSize[FontScale.MEDIUM].xlarge,
+      fontWeight: '400',
+      letterSpacing: 0,
+      lineHeight: 36,
+    },
+    headlineLarge: {
+      fontSize: scaledFontSize[FontScale.LARGE].xlarge,
+      fontWeight: '400',
+      letterSpacing: 0,
+      lineHeight: 44,
+    },
+    titleSmall: { fontSize: scaledFontSize[FontScale.SMALL].large, fontWeight: 'bold' },
+    titleMedium: { fontSize: scaledFontSize[FontScale.MEDIUM].large, fontWeight: 'bold' },
+    titleLarge: { fontSize: scaledFontSize[FontScale.LARGE].large, fontWeight: 'bold' },
+    labelSmall: { fontSize: scaledFontSize[FontScale.SMALL].small },
+    labelMedium: { fontSize: scaledFontSize[FontScale.MEDIUM].small },
+    labelLarge: { fontSize: scaledFontSize[FontScale.LARGE].small },
+    bodySmall: { fontSize: scaledFontSize[FontScale.SMALL].medium },
+    bodyMedium: { fontSize: normalize(scaledFontSize[FontScale.MEDIUM].medium) },
+    bodyLarge: { fontSize: scaledFontSize[FontScale.LARGE].medium },
+    default: { fontSize: scaledFontSize[FontScale.MEDIUM].medium },
+  }
+
+  return StyleSheet.create<ThemeFonts & FontAlign & MD3Fonts>({
+    display: {
+      fontSize: fontSize.xxlarge,
+      fontWeight: '400',
+    },
+    headline: {
+      fontSize: fontSize.xlarge,
+      fontWeight: '400',
+    },
+    title: {
+      fontSize: fontSize.large,
+      fontWeight: '500',
+    },
+    label: {
+      fontSize: fontSize.small,
+      fontWeight: '500',
+    },
+    body: {
+      fontSize: fontSize.medium,
+      fontWeight: '400',
+    },
+    textSmall: {
+      fontSize: fontSize.small,
+      color: colors.text,
+    },
+    textMedium: {
+      fontSize: fontSize.medium,
+      color: colors.text,
+    },
+    textLarge: {
+      fontSize: fontSize.large,
+      color: colors.text,
+    },
+    textXlarge: {
+      fontSize: fontSize.xlarge,
+      color: colors.text,
+    },
+    textXxlarge: {
+      fontSize: fontSize.xxlarge,
+      color: colors.text,
+    },
+    buttonTextSmall: {
+      fontSize: fontSize.small,
+    },
+    buttonTextMedium: {
+      fontSize: fontSize.medium,
+    },
+    buttonTextLarge: {
+      fontSize: fontSize.large,
+    },
+    buttonTextXlarge: {
+      fontSize: fontSize.xlarge,
+    },
+    buttonTextXxlarge: {
+      fontSize: fontSize.xxlarge,
+    },
+    textInputSmall: {
+      fontSize: fontSize.small - 2,
+    },
+    textInputMedium: {
+      fontSize: fontSize.medium - 2,
+    },
+    textInputLarge: {
+      fontSize: fontSize.large - 2,
+    },
+    textInputXlarge: {
+      fontSize: fontSize.xlarge - 2,
+    },
+    textInputXxlarge: {
+      fontSize: fontSize.xxlarge - 2,
+    },
+    textCenter: { textAlign: 'center' },
+    textVCenter: { textAlignVertical: 'center' },
+    textJustify: { textAlign: 'justify' },
+    textLeft: { textAlign: 'left' },
+    textRight: { textAlign: 'right' },
+    ...md3Fonts,
+
+    // Custom Font
+    textShadow: {
+      color: '#fff',
+      textShadowColor: 'rgba(0, 0, 0, 0.75)',
+      textShadowOffset: { width: 1, height: 1 },
+      textShadowRadius: 2,
+    },
+    settingText: {
+      fontSize: normalize(20),
+      fontWeight: '600',
+    },
+  })
+
+  // return Object.assign(styles, {
+  //   bodyFontStyle,
+  //   buttonFontStyle,
+  //   titleFontStyle,
+  // }) as MergeThemeFonts
+}

package/template/src/theme/Gutters.ts

@@ -0,0 +1,63 @@
+import { StyleSheet } from 'react-native'
+
+import { StyleType, ThemeGutters, ThemeMetricsSizes, ThemeVariables } from '@/theme/types'
+
+export type GutterType = {
+  BMargin: StyleType
+  TMargin: StyleType
+  RMargin: StyleType
+  LMargin: StyleType
+  VMargin: StyleType
+  HMargin: StyleType
+  Margin: StyleType
+  BPadding: StyleType
+  TPadding: StyleType
+  RPadding: StyleType
+  LPadding: StyleType
+  VPadding: StyleType
+  HPadding: StyleType
+  Padding: StyleType
+}
+/**
+ * Generate Styles depending on MetricsSizes vars availabled at ./Theme/Variables
+ * Styles are like :
+ * <size><direction><op>: {
+ * <op><direction>: <value>
+ * }
+ * where:
+ * <size>: is the key of the variable included in MetricsSizes
+ * <direction>: can be ['Bottom','Top','Right','Left','Horizontal','Vertical']
+ * <op>: can be ['Margin', 'Padding']
+ * <value>: is the value of the <size>
+ */
+
+/**
+ *
+ * @param Theme can be spread like {Colors, NavigationColors, Gutters, Layout, Common, ...args}
+ * @return {*}
+ */
+export default  ({ MetricsSizes: metricsSizes }: ThemeVariables): ThemeGutters => {
+  return StyleSheet.create({
+    ...Object.entries(metricsSizes).reduce(
+      (acc, [key, value]) => ({
+        ...acc,
+        /* Margins */
+        [`${key}BMargin`]: { marginBottom: value },
+        [`${key}TMargin`]: { marginTop: value },
+        [`${key}RMargin`]: { marginRight: value },
+        [`${key}LMargin`]: { marginLeft: value },
+        [`${key}VMargin`]: { marginVertical: value },
+        [`${key}HMargin`]: { marginHorizontal: value },
+        /* Paddings */
+        [`${key}BPadding`]: { paddingBottom: value },
+        [`${key}TPadding`]: { paddingTop: value },
+        [`${key}RPadding`]: { paddingRight: value },
+        [`${key}LPadding`]: { paddingLeft: value },
+        [`${key}VPadding`]: { paddingVertical: value },
+        [`${key}HPadding`]: { paddingHorizontal: value },
+        [`${key}Padding`]: { padding: value },
+      }),
+      {},
+    ),
+  }) as ThemeGutters
+}

package/template/src/theme/Icons.ts

@@ -0,0 +1,28 @@
+/**
+ * This file contains all application's style relative to fonts
+ */
+import { StyleSheet } from 'react-native'
+
+import { ThemeIcon, ThemeVariables } from '@/theme/types'
+
+/**
+ *
+ * @param Theme can be spread like {Colors, Gutters, Layout, Common, ...args}
+ * @return {*}
+ */
+export default  ({ IconSize: iconSize }: ThemeVariables): ThemeIcon => {
+  return StyleSheet.create({
+    ...Object.entries(iconSize).reduce(
+      (acc, [key, value]) => ({
+        ...acc,
+        /* Margins */
+        [`${key}Icon`]: {
+          width: value,
+          height: value,
+        },
+      }),
+      {},
+    ),
+  }) as ThemeIcon
+}
+

package/template/src/theme/Images.ts

@@ -0,0 +1,13 @@
+import { ThemeImages, ThemeVariables } from '@/theme/types'
+
+/**
+ *
+ * @param Theme can be spread like {Colors, Gutters, Layout, Common, ...args}
+ * @return {*}
+ */
+export default ({}: ThemeVariables): ThemeImages => {
+  // {
+  //   logo: require('@/Assets/Images/TOM.png'),
+  // }
+  return {}
+}

package/template/src/theme/Layout.ts

@@ -0,0 +1,106 @@
+import { StyleSheet } from 'react-native'
+
+import { StyleType, ThemeLayout, ThemeVariables } from '@/theme/types'
+
+const layoutStyle = {
+  /* Column Layouts */
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  columnReverse: { flexDirection: 'column-reverse' },
+  colCenter: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  colVCenter: {
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  colHCenter: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  /* Row Layouts */
+  row: { flexDirection: 'row' },
+  rowReverse: { flexDirection: 'row-reverse' },
+  rowCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rowVCenter: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  rowHCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  /* Default Layouts */
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  alignItemsCenter: { alignItems: 'center' },
+  alignItemsEnd: { alignItems: 'flex-end' },
+  alignItemsStart: { alignItems: 'flex-start' },
+  alignItemsStretch: { alignItems: 'stretch' },
+  justifyContentStart: { justifyContent: 'flex-start' },
+  justifyContentEnd: { justifyContent: 'flex-end' },
+  justifyContentCenter: { justifyContent: 'center' },
+  justifyContentAround: { justifyContent: 'space-around' },
+  justifyContentBetween: { justifyContent: 'space-between' },
+  scrollSpaceAround: {
+    flexGrow: 1,
+    justifyContent: 'space-around',
+  },
+  scrollSpaceBetween: {
+    flexGrow: 1,
+    justifyContent: 'space-between',
+  },
+  selfStretch: { alignSelf: 'stretch' },
+  selfFlexStart: { alignSelf: 'flex-start' },
+  /* Sizes Layouts */
+  fill: { flex: 1 },
+  fullSize: {
+    height: '100%',
+    width: '100%',
+  },
+  fullWidth: { width: '100%' },
+  fullHeight: { height: '100%' },
+  /* Operation Layout */
+  mirror: { transform: [{ scaleX: -1 }] },
+  rotate90: { transform: [{ rotate: '90deg' }] },
+  rotate90Inverse: { transform: [{ rotate: '-90deg' }] },
+  flexWrap: { flexWrap: 'wrap' },
+
+  abs: {
+    position: 'absolute',
+  },
+  absFill: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  htmlRender: {
+    p: {
+      marginTop: 0,
+    },
+  },
+}
+type LayoutStyleType = typeof layoutStyle
+export type ILayout = { [P in keyof LayoutStyleType]: StyleType }
+/**
+ *
+ * @param Theme can be spread like {Colors, Gutters, Layout, Common, ...args}
+ * @return {*}
+ */
+export default ({}: ThemeVariables): ThemeLayout<ILayout> => {
+  const layout = StyleSheet.create(layoutStyle as ILayout)
+
+  return layout
+}

package/template/src/theme/Variables.ts

@@ -0,0 +1,167 @@
+/**
+ * This file contains the application's variables.
+ *
+ * Define color, sizes, etc. here instead of duplicating them throughout the components.
+ * That allows to change them more easily later on.
+ */
+
+import {
+  FontScale,
+  ThemeFontSize,
+  ThemeIconSize,
+  ThemeMetricsSizes,
+  ThemeNavigationColors,
+  ThemeScaledFontSize,
+} from '@/theme/types'
+
+export const ownColor = {
+  accent: 'rgb(84, 99, 77)',
+  tintPrimary: '#E87B00',
+  buttonText: '#101010',
+  iconColor: 'rgb(67, 72, 63)',
+  transparent: 'rgba(0,0,0,0)',
+  negative: '#e3e3e3',
+  onNegative: '#000000',
+  inputBackground: '#FFFFFF',
+  // statusBarBackgroundColor: 'rgba(2, 110, 0, .6)',
+  statusBarBackgroundColor: 'rgba(0, 0, 0, .0)',
+  topBarBackgroundColor: '#f0ced7',
+  // Bottom Tab
+  bottomTabActiveTextColor: '#009688',
+  bottomTabInactiveTextColor: '#A8A8A8',
+  homeBottomTabBackgroundColor: '#1565c0',
+  rewardsBottomTabBackgroundColor: '#009688',
+  storeListBottomTabBackgroundColor: '#607D8B',
+
+  itemBackgroundColor: '#F5EFE6',
+
+  grey: '#EBEBEB',
+  white: '#FFFFF',
+}
+
+const navColors: Partial<ThemeNavigationColors> = {
+  // React Navigation colors
+  border: '#ccc',
+  text: 'rgb(82, 82, 82)',
+  card: '#FFFFFF',
+  notification: '#FF0000',
+
+  // Paper MD3 colors
+  primary: 'rgb(0, 95, 175)',
+  onPrimary: 'rgb(255, 255, 255)',
+  primaryContainer: 'rgb(212, 227, 255)',
+  onPrimaryContainer: 'rgb(0, 28, 58)',
+  secondary: 'rgb(84, 95, 113)',
+  onSecondary: 'rgb(255, 255, 255)',
+  secondaryContainer: 'rgb(216, 227, 248)',
+  onSecondaryContainer: 'rgb(17, 28, 43)',
+  tertiary: 'rgb(110, 86, 118)',
+  onTertiary: 'rgb(255, 255, 255)',
+  tertiaryContainer: 'rgb(247, 216, 255)',
+  onTertiaryContainer: 'rgb(39, 20, 48)',
+  error: 'rgb(186, 26, 26)',
+  onError: 'rgb(255, 255, 255)',
+  errorContainer: 'rgb(255, 218, 214)',
+  onErrorContainer: 'rgb(65, 0, 2)',
+  background: 'rgb(253, 252, 255)',
+  onBackground: 'rgb(26, 28, 30)',
+  surface: 'rgb(253, 252, 255)',
+  onSurface: 'rgb(26, 28, 30)',
+  surfaceVariant: 'rgb(224, 226, 236)',
+  onSurfaceVariant: 'rgb(67, 71, 78)',
+  outline: 'rgb(116, 119, 127)',
+  outlineVariant: 'rgb(195, 198, 207)',
+  shadow: 'rgb(0, 0, 0)',
+  scrim: 'rgb(0, 0, 0)',
+  inverseSurface: 'rgb(47, 48, 51)',
+  inverseOnSurface: 'rgb(241, 240, 244)',
+  inversePrimary: 'rgb(165, 200, 255)',
+  elevation: {
+    level0: 'transparent',
+    level1: 'rgb(240, 244, 251)',
+    level2: 'rgb(233, 239, 249)',
+    level3: 'rgb(225, 235, 246)',
+    level4: 'rgb(223, 233, 245)',
+    level5: 'rgb(218, 230, 244)',
+  },
+  surfaceDisabled: 'rgba(26, 28, 30, 0.12)',
+  onSurfaceDisabled: 'rgba(26, 28, 30, 0.38)',
+  backdrop: 'rgba(45, 49, 56, 0.4)',
+}
+
+/**
+ * Colors
+ */
+export const Colors: Partial<ThemeNavigationColors> = Object.assign(navColors, ownColor)
+
+/**
+ * FontSize
+ */
+export const FontSize: ThemeFontSize = {
+  small: 13,
+  medium: 18,
+  large: 22,
+  xlarge: 29,
+  xxlarge: 43,
+}
+export const ScaledFontSize: ThemeScaledFontSize = {
+  [FontScale.SMALL]: {
+    small: 11,
+    medium: 12,
+    large: 14,
+    xlarge: 24,
+    xxlarge: 36,
+  },
+  [FontScale.MEDIUM]: {
+    small: 13,
+    medium: 18,
+    large: 22,
+    xlarge: 29,
+    xxlarge: 43,
+  },
+  [FontScale.LARGE]: {
+    small: 15,
+    medium: 22,
+    large: 30,
+    xlarge: 40,
+    xxlarge: 57,
+  },
+}
+
+export const IconSize: ThemeIconSize = {
+  small: 24,
+  medium: 32,
+  large: 45,
+  xlarge: 60,
+  xxlarge: 90,
+}
+
+/**
+ * Metrics Sizes
+ */
+const tiny = 7
+const small = tiny * 2
+const medium = small * 2
+const large = medium * 2
+export const MetricsSizes: ThemeMetricsSizes = {
+  tiny,
+  small,
+  medium,
+  large,
+}
+const roundness = 4
+export default {
+  Colors,
+  IconSize,
+  // FontSize,
+  ScaledFontSize,
+  MetricsSizes,
+  Param: {
+    itemRoundness: 20,
+    roundness,
+    animation: {
+      scale: 1.0,
+    },
+    headerHeight: 48,
+  },
+}

package/template/src/theme/components/Buttons.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native'
+
+import { ButtonsStyle, IThemeCommonParams } from '@/theme/types'
+
+export default ({ Colors: colors, Gutters: gutters, Layout: layout, Param: param }: IThemeCommonParams): ButtonsStyle => {
+  const roundness = param?.roundness || 4
+  const borderRadius = roundness * 6
+  const base = {
+    borderRadius: borderRadius,
+  }
+  const rounded = {
+    ...base,
+    borderRadius: borderRadius,
+  }
+  const outline = {
+    ...base,
+    borderRadius: borderRadius,
+    borderWidth: 1,
+  }
+  const content = {
+    ...layout.row,
+    minWidth: 40,
+    minHeight: 40,
+  }
+  const contentIconOnly = {
+    ...content,
+    minWidth: 40,
+  }
+
+  return StyleSheet.create({
+    base,
+    content,
+    contentIconOnly,
+    rounded,
+    outline: { ...outline },
+  })
+}

package/template/src/theme/index.ts

@@ -0,0 +1,8 @@
+export { default as Common } from './Common'
+export { default as Fonts } from './Fonts'
+export { default as Gutters } from './Gutters'
+export { default as Icons } from './Icons'
+export { default as Images } from './Images'
+export { default as Layout } from './Layout'
+export { default as themes } from './themes'
+export { default as DefaultVariables } from './Variables'

package/template/src/theme/metrics.ts

@@ -0,0 +1,57 @@
+import { Dimensions, Platform } from 'react-native'
+const { height, width } = Dimensions.get('window')
+
+const metrics = {
+  s5: 5,
+  s8: 8,
+  s10: 10,
+  s16: 16,
+  s20: 20,
+  s30: 30,
+  s40: 40,
+  s50: 50,
+  s60: 60,
+
+  borderWidth: 0.4,
+
+  horizontalLineHeight: 1,
+
+  screenWidth: width < height ? width : height,
+  screenHeight: width < height ? height : width,
+  drawerWidth: (4 / 5) * width,
+  navBarHeight: Platform.OS === 'ios' ? 64 : 54,
+
+  buttonRadius: 4,
+
+  icons: {
+    tiny: 15,
+    small: 32,
+    medium: 40,
+    large: 48,
+    xl: 56,
+  },
+
+  images: {
+    small: 20,
+    medium: 40,
+    large: 60,
+    logo: 200,
+  },
+
+  iconButton: { padding: 4 },
+
+  padding: {
+    all: 10,
+    horizontal: 10,
+    vertical: 8,
+  },
+
+  size: {
+    tiny: 5,
+    small: 10,
+    regular: 15,
+    large: 20,
+  },
+}
+
+export default metrics

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

@@ -0,0 +1,7 @@
+/**
+ * Images should be stored in the `App/Images` directory and referenced using variables defined here.
+ */
+
+export default () => {
+  return { logo: { uri: 'https://thecodingmachine.github.io/react-native-boilerplate/img/TOM-small.png' } }
+}