99x#24 : migrating utilities to ts. defining seperate dir for types

package.json

@@ -25,6 +25,7 @@
         "@babel/plugin-proposal-class-properties": "^7.4.0",
         "@babel/plugin-transform-flow-strip-types": "^7.4.0",
         "@react-native-community/toolbar-android": "0.1.0-rc.2",
+        "@types/react-native": "^0.63.0",
         "@types/react-native-vector-icons": "^6.4.5",
         "create-react-class": "^15.6.3",
         "husky": "^1.3.1",

src/types/index.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Type declarations
+ * Before introducing a new type, please check for existing types in the list.
+ */
+
+/**
+ * Resulting object shape of the size calulation
+ */
+export interface SizeStringsTypes {
+    small: number;
+    default: number;
+    large: number;
+}
+
+/**
+ * Size of the button, fontSizes, buttonPadding, roundRadius, iconSize are
+ * picked from predefined sizes small, default and large.
+ */
+export type SizeShapeTypes = "small" | "default" | "large";
+
+/**
+ * Resulting object shape for default font identifiers
+ */
+export interface FontSizeObjTypes {
+    h1: number;
+    h2: number;
+    h3: number;
+    h4: number;
+    h5: number;
+    h6: number;
+    p: number;
+    callout: number;
+    sub_heading: number;
+    footnote: number;
+    caption_big: number;
+    caption_small: number;
+}
+
+/**
+ * Acceptable font size text identifier.
+ */
+export type FontTypes =
+    | "h1"
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6"
+    | "p"
+    | "callout"
+    | "sub_heading"
+    | "footnote"
+    | "caption_big"
+    | "caption_small";
+
+/**
+ * Shape and types of the mobile device screen information.
+ */
+export interface DeviceVariables {
+    width: number;
+    height: number;
+    Inset: {
+        portrait: {
+            topInset: number;
+            leftInset: number;
+            rightInset: number;
+            bottomInset: number;
+        };
+        landscape: {
+            topInset: number;
+            leftInset: number;
+            rightInset: number;
+            bottomInset: number;
+        };
+    };
+}

src/utils/color.ts

@@ -20,7 +20,7 @@ export const commonColors = {
     })
 };
 
-export function shadeColor(color:string, percent:number):string {
+export function shadeColor(color: string, percent: number): string {
     let R = parseInt(color.substring(1, 3), 16);
     let G = parseInt(color.substring(3, 5), 16);
     let B = parseInt(color.substring(5, 7), 16);

src/utils/getIconType.ts

@@ -1,4 +1,4 @@
-import {ComponentType} from 'react';
+import { ComponentType } from "react";
 import ZocialIcon from "react-native-vector-icons/Zocial";
 import OcticonIcon from "react-native-vector-icons/Octicons";
 import MaterialIcon from "react-native-vector-icons/MaterialIcons";
@@ -11,19 +11,19 @@ import FAIcon from "react-native-vector-icons/FontAwesome";
 import SimpleLineIcon from "react-native-vector-icons/SimpleLineIcons";
 import FeatherIcon from "react-native-vector-icons/Feather";
 import AntIcon from "react-native-vector-icons/AntDesign";
-import {IconProps} from 'react-native-vector-icons/Icon'
+import { IconProps } from "react-native-vector-icons/Icon";
 
-export interface CustomIcons{
-    [id:string]: string;
+export interface CustomIcons {
+    [id: string]: string;
 }
 
-const customIcons:CustomIcons = {};
+const customIcons: CustomIcons = {};
 
-export const registerCustomIconType = (id:string, customIcon:string) => {
+export const registerCustomIconType = (id: string, customIcon: string) => {
     customIcons[id] = customIcon;
 };
 
-export default (type:string):ComponentType<IconProps>|string => {
+export default (type: string): ComponentType<IconProps> | string => {
     switch (type) {
         case "zocial":
             return ZocialIcon;

src/utils/platform.ts

@@ -1,7 +1,7 @@
-import { Platform } from "react-native";
 import { deviceVariables } from "../variables/deviceVariables";
+import { Platform } from "react-native";
 
-export function isIphoneX():boolean {
+export function isIphoneX(): boolean {
     return (
         Platform.OS === "ios" &&
         !Platform.isPad &&

src/utils/touchable.ts

@@ -5,18 +5,23 @@ import {
     TouchableOpacityProps,
     TouchableNativeFeedbackProps
 } from "react-native";
-import { ComponentType } from 'react';
+import { ComponentType } from "react";
 
 import { shadeColor } from "./color";
 
-export function getTouchableComponent(useNativeFeedback:boolean = true):ComponentType<TouchableOpacityProps|TouchableNativeFeedbackProps>{
+export function getTouchableComponent(
+    useNativeFeedback: boolean = true
+): ComponentType<TouchableOpacityProps | TouchableNativeFeedbackProps> {
     if (useNativeFeedback === true && Platform.OS === "android") {
         return TouchableNativeFeedback;
     }
     return TouchableOpacity;
 }
 
-export function getRippleProps(color:string, useNativeFeedback:boolean = true) {
+export function getRippleProps(
+    color: string,
+    useNativeFeedback: boolean = true
+) {
     // less than API 21 don't support Ripple
     if (
         useNativeFeedback === true &&

src/variables/buttonSizeVariables.ts

@@ -0,0 +1,45 @@
+import { SizeStringsTypes, SizeShapeTypes } from "../types";
+
+const defaultFontSize: number = 16;
+const defaultButtonPadding: number = 10;
+const defaultRoundRadius: number = 20;
+const defaultIconSize: number = 20;
+
+const fontSizes: SizeStringsTypes = {
+    small: defaultFontSize * 0.8,
+    default: defaultFontSize,
+    large: defaultFontSize * 1.3
+};
+
+const buttonPadding: SizeStringsTypes = {
+    small: defaultButtonPadding * 0.8,
+    default: defaultButtonPadding,
+    large: defaultButtonPadding * 1.3
+};
+
+const roundRadius: SizeStringsTypes = {
+    small: defaultRoundRadius * 0.8,
+    default: defaultRoundRadius,
+    large: defaultRoundRadius * 1.3
+};
+
+const iconSize: SizeStringsTypes = {
+    small: defaultIconSize * 0.8,
+    default: defaultIconSize,
+    large: defaultIconSize * 1.3
+};
+
+export function getFontSize(size: SizeShapeTypes) {
+    return fontSizes[size];
+}
+
+export function getButtonPadding(size: SizeShapeTypes) {
+    return buttonPadding[size];
+}
+export function getRoundRadius(size: SizeShapeTypes) {
+    return roundRadius[size];
+}
+
+export function getIconSize(size: SizeShapeTypes) {
+    return iconSize[size];
+}

src/variables/deviceVariables.ts

@@ -1,27 +1,9 @@
 import { Dimensions } from "react-native";
+import { DeviceVariables } from "../types";
 
 const { width, height } = Dimensions.get("window");
 
-export interface DeviceVariables{
-    width:number,
-    height:number,
-    Inset:{
-        portrait:{
-            topInset:number,
-            leftInset:number,
-            rightInset:number,
-            bottomInset:number,
-        },
-        landscape:{
-            topInset:number,
-            leftInset:number,
-            rightInset:number,
-            bottomInset:number,
-        }
-    }
-}
-
-export const deviceVariables:DeviceVariables = {
+export const deviceVariables: DeviceVariables = {
     width,
     height,
     Inset: {

src/variables/textSizeVariables.js → src/variables/textSizeVariables.ts

@@ -1,7 +1,8 @@
 import React, { Component } from "react";
 import { Platform } from "react-native";
+import { FontTypes } from "../types";
 
-const fontSizes = {
+const fontSizes: any = {
     ...Platform.select({
         android: {
             h1: 96,
@@ -34,6 +35,6 @@ const fontSizes = {
     })
 };
 
-export function getFontSize(size) {
+export function getFontSize(size: FontTypes) {
     return fontSizes[size];
 }