Merge pull request #120 from ineshbose/issue/116-bootstrapping_styles

Bootstrapped styles

src/app/components/EditScreenInfo.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Linking, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Linking, TouchableOpacity, View } from 'react-native';
 import { Text } from '@ui-kitten/components';
+import createStyle from '../constants/Styles';
 import { MonoText } from './StyledText';
 
 export default function EditScreenInfo({ path }: { path: string }) {
@@ -41,7 +42,7 @@ export default function EditScreenInfo({ path }: { path: string }) {
   );
 }
 
-const styles = StyleSheet.create({
+const styles = createStyle({
   getStartedContainer: {
     alignItems: 'center',
     marginHorizontal: 50,

src/app/components/FAB/ActionItem.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { StyleSheet, Animated, Pressable } from 'react-native';
+import { Animated, Pressable } from 'react-native';
 import { Button, Icon, Layout, Text } from '@ui-kitten/components';
 import { ActionItemProps } from '../../types/FAB';
+import createStyle from '../../constants/Styles';
 
 export default function ActionItem(props: ActionItemProps) {
   const {
@@ -26,10 +27,18 @@ export default function ActionItem(props: ActionItemProps) {
   const animation = React.useRef(new Animated.Value(0)).current;
 
   return (
-    <Pressable style={styles.container} onPress={() => onPress(name)}>
+    <Pressable
+      style={[styles.container, styles.flex1, styles.flexDirectionColumn]}
+      onPress={() => onPress(name)}
+    >
       <Animated.View
         style={[
-          styles.actionContainer,
+          styles.container,
+          styles.flex1,
+          styles.flexDirectionRow,
+          styles.alignItemsCenter,
+          styles.paddingLeft0,
+          styles.paddingRight0,
           animated
             ? {
                 marginBottom: animation.interpolate({
@@ -78,6 +87,8 @@ export default function ActionItem(props: ActionItemProps) {
           onPress={() => onPress(name)}
           style={[
             styles.button,
+            styles.alignItemsCenter,
+            styles.justifyContentCenter,
             {
               backgroundColor: color,
               width: buttonSize,
@@ -93,19 +104,9 @@ export default function ActionItem(props: ActionItemProps) {
   );
 }
 
-const styles = StyleSheet.create({
+const styles = createStyle({
   container: {
     elevation: 0,
-    flex: 1,
-    flexDirection: 'column',
-  },
-  actionContainer: {
-    elevation: 0,
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingLeft: 0,
-    paddingRight: 0,
   },
   textContainer: {
     paddingHorizontal: 8,
@@ -125,8 +126,6 @@ const styles = StyleSheet.create({
     lineHeight: 20,
   },
   button: {
-    alignItems: 'center',
-    justifyContent: 'center',
     elevation: 5,
   },
 });

src/app/components/FAB/MainButton.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  StyleSheet,
   Animated,
   LayoutAnimation,
   Keyboard,
@@ -10,6 +9,7 @@ import {
 import { Button, Icon } from '@ui-kitten/components';
 import { MainButtonProps } from '../../types/FAB';
 import { RootActionParamList } from '../../types/navigation';
+import createStyle from '../../constants/Styles';
 import ActionItem from './ActionItem';
 
 const DEFAULT_SHADOW_PROPS = {
@@ -224,7 +224,9 @@ export default function MainButton(Props: MainButtonProps) {
         <Pressable style={[styles.button, sizeStyle]} onPress={animateButton}>
           <Animated.View
             style={[
-              styles.buttonTextContainer,
+              styles.flex1,
+              styles.alignItemsCenter,
+              styles.justifyContentCenter,
               sizeStyle,
               {
                 transform: [
@@ -294,7 +296,7 @@ export default function MainButton(Props: MainButtonProps) {
   );
 }
 
-const styles = StyleSheet.create({
+const styles = createStyle({
   actions: {
     position: 'absolute',
     bottom: 85,
@@ -342,11 +344,6 @@ const styles = StyleSheet.create({
   rightButton: {},
   leftButton: {},
   centerButton: {},
-  buttonTextContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   iconHorizontalContainer: {
     width: 2,
     position: 'absolute',

src/app/constants/Styles/display.ts

@@ -0,0 +1,13 @@
+import { DisplayType } from '../../types/styles';
+
+const DISPLAYS: DisplayType['options'][] = ['None', 'Flex'];
+
+const displayStyles = <DisplayType['styles']>{};
+
+DISPLAYS.forEach((display) => {
+  displayStyles[`display${display}`] = {
+    display: <Lowercase<typeof display>>display.toLowerCase(),
+  };
+});
+
+export default displayStyles;

src/app/constants/Styles/flex.ts

@@ -0,0 +1,76 @@
+import {
+  AlignType,
+  AlignTypes,
+  FlexDirectionType,
+  FlexStyles,
+  JustifyContentType,
+  StyleNumValues,
+} from '../../types/styles';
+
+const flexStyles = <FlexStyles>{};
+
+const NUMS: StyleNumValues[] = [0, 1, 2, 3, 4, 5];
+
+NUMS.forEach((num) => {
+  flexStyles[`flex${num}`] = {
+    flex: num,
+  };
+});
+
+const DIRECTIONS: FlexDirectionType['options'][] = [
+  'Row',
+  'Column',
+  'Column-reverse',
+  'Row-reverse',
+];
+
+DIRECTIONS.forEach((direction) => {
+  flexStyles[`flexDirection${direction}`] = {
+    flexDirection: <Lowercase<typeof direction>>direction.toLowerCase(),
+  };
+});
+
+type OptionMap = { [K in AlignTypes]: AlignType[Lowercase<K>]['options'][] };
+
+const ALIGNMENTS: OptionMap = {
+  Content: [
+    'Center',
+    'Flex-end',
+    'Flex-start',
+    'Space-around',
+    'Space-between',
+    'Stretch',
+  ],
+  Items: ['Baseline', 'Center', 'Flex-end', 'Flex-start', 'Stretch'],
+  Self: ['Auto', 'Baseline', 'Center', 'Flex-end', 'Flex-start', 'Stretch'],
+};
+
+const alignTypes: AlignTypes[] = ['Content', 'Items', 'Self'];
+
+alignTypes.forEach((alignType) =>
+  ALIGNMENTS[alignType].forEach((alignment) => {
+    // @ts-ignore
+    flexStyles[`align${alignType}${alignment}`] = {
+      [`align${alignType}`]: <Lowercase<typeof alignment>>(
+        alignment.toLowerCase()
+      ),
+    };
+  })
+);
+
+const justifyTypes: JustifyContentType['options'][] = [
+  'Center',
+  'Flex-end',
+  'Flex-start',
+  'Space-around',
+  'Space-between',
+  'Space-evenly',
+];
+
+justifyTypes.forEach((justifyType) => {
+  flexStyles[`justifyContent${justifyType}`] = {
+    justifyContent: <Lowercase<typeof justifyType>>justifyType.toLowerCase(),
+  };
+});
+
+export default flexStyles;

src/app/constants/Styles/index.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+import { GlobalStyleSheet } from '../../types/styles';
+import displayStyles from './display';
+import flexStyles from './flex';
+import spacingStyles from './spacing';
+
+const PROVIDED_STYLES = <GlobalStyleSheet>{
+  ...spacingStyles,
+  ...displayStyles,
+  ...flexStyles,
+};
+
+export default function createStyle<
+  T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>
+>(styles: T | StyleSheet.NamedStyles<T>) {
+  return StyleSheet.create({ ...PROVIDED_STYLES, ...styles });
+}

src/app/constants/Styles/spacing.ts

@@ -0,0 +1,34 @@
+import {
+  SpacingDirections,
+  SpacingStyles,
+  SpacingTypes,
+  StyleNumValues,
+} from '../../types/styles';
+
+const NUMS: StyleNumValues[] = [0, 1, 2, 3, 4, 5];
+
+const SPACINGS: SpacingTypes[] = ['margin', 'padding'];
+
+const DIRECTIONS: SpacingDirections[] = [
+  '',
+  'Horizontal',
+  'Vertical',
+  'Top',
+  'Bottom',
+  'Left',
+  'Right',
+];
+
+const spacingStyles = <SpacingStyles>{};
+
+NUMS.forEach((num) =>
+  SPACINGS.forEach((spacing) =>
+    DIRECTIONS.forEach((direction) => {
+      spacingStyles[`${spacing}${direction}${num}`] = {
+        [`${spacing}${direction}`]: num * 16,
+      };
+    })
+  )
+);
+
+export default spacingStyles;

src/app/navigation/BottomTabNavigator.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, ImageProps, Pressable, StyleSheet, View } from 'react-native';
+import { Image, ImageProps, Pressable, View } from 'react-native';
 import {
   getFocusedRouteNameFromRoute,
   ParamListBase,
@@ -36,6 +36,7 @@ import {
   TabConfig,
 } from '../types/navigation';
 import FAB from '../components/FAB';
+import createStyle from '../constants/Styles';
 import ActionNavigator from './ActionNavigator';
 
 const BottomTab = createBottomTabNavigator<RootTabParamList>();
@@ -95,10 +96,11 @@ export default function BottomTabNavigator({
   const navigationLeftAccessory = (props: {} | undefined) => (
     <Pressable
       {...props}
-      style={[styles.topActionsContainer, styles.appIconContainer]}
+      style={[styles.flexDirectionRow, styles.alignItemsCenter]}
       onPress={() => navigation.navigate('Home')}
     >
       <Image
+        // @ts-ignore
         style={styles.appIcon}
         source={{
           uri: 'https://portion-mate-glasgow.readthedocs.io/en/latest/assets/logo.png',
@@ -137,7 +139,7 @@ export default function BottomTabNavigator({
     props: {} | undefined,
     { route: { name } }: BottomTabHeaderProps
   ) => (
-    <View style={styles.topActionsContainer} {...props}>
+    <View style={styles.flexDirectionRow} {...props}>
       {headerButtonIcons[name] && (
         <Button
           appearance="ghost"
@@ -244,13 +246,7 @@ export default function BottomTabNavigator({
   );
 }
 
-const styles = StyleSheet.create({
-  topActionsContainer: {
-    flexDirection: 'row',
-  },
-  appIconContainer: {
-    alignItems: 'center',
-  },
+const styles = createStyle({
   appIcon: {
     height: 30,
     width: 30,