More polishes, adding own styles

src/app/components/FAB/ActionItem.tsx

@@ -8,18 +8,18 @@ export default function ActionItem(props: ActionItemProps) {
     name,
     text,
     icon,
-    color,
-    shadow,
-    animated,
-    buttonSize,
-    position,
-    textStyle,
-    textColor,
-    textProps,
-    textElevation,
-    textBackground,
-    textContainerStyle,
-    paddingTopBottom,
+    color = 'red',
+    shadow = {},
+    animated = true,
+    buttonSize = 40,
+    position = 'right',
+    textStyle = {},
+    textColor = 'black',
+    textProps = {},
+    textElevation = 5,
+    textBackground = 'white',
+    textContainerStyle = {},
+    paddingTopBottom = 8,
     onPress,
   } = props;
 
@@ -49,7 +49,7 @@ export default function ActionItem(props: ActionItemProps) {
             styles.textContainer,
             styles[`${position}TextContainer`],
             {
-              backgroundColor: textBackground || 'white',
+              backgroundColor: textBackground,
               elevation: textElevation,
               shadowOffset: {
                 height: textElevation,
@@ -82,7 +82,7 @@ export default function ActionItem(props: ActionItemProps) {
               backgroundColor: color,
               width: buttonSize,
               height: buttonSize,
-              borderRadius: (buttonSize || 40) / 2,
+              borderRadius: buttonSize / 2,
             },
             shadow,
           ]}

src/app/components/FAB/MainButton.tsx

@@ -144,10 +144,7 @@ export default function MainButton(Props: MainButtonProps) {
   return (
     <Animated.View
       pointerEvents="box-none"
-      style={[
-        styles.overlay,
-        { backgroundColor: 'transparent', display: visible ? 'flex' : 'none' },
-      ]}
+      style={[styles.overlay, { display: visible ? 'flex' : 'none' }]}
     >
       {active && showBackground && (
         <Pressable
@@ -177,20 +174,15 @@ export default function MainButton(Props: MainButtonProps) {
         >
           {actions.map((action) => (
             <ActionItem
-              paddingTopBottom={actionsPaddingTopBottom}
-              distanceToEdge={distanceToEdge}
               key={action.name}
-              shadow={shadowOptions}
-              tintColor="#fff"
               color={color}
-              buttonSize={40}
-              textElevation={5}
-              margin={8}
-              {...action}
               position={position}
+              shadow={shadowOptions}
               active={active}
-              onPress={pressAction}
               animated={animated}
+              onPress={pressAction}
+              paddingTopBottom={actionsPaddingTopBottom}
+              {...action}
             />
           ))}
         </Animated.View>
@@ -282,10 +274,7 @@ export default function MainButton(Props: MainButtonProps) {
               >
                 <View
                   style={[
-                    {
-                      width: 2,
-                      position: 'absolute',
-                    },
+                    styles.iconHorizontalContainer,
                     {
                       height: iconHeight,
                       backgroundColor: active ? color : iconColor,
@@ -294,10 +283,7 @@ export default function MainButton(Props: MainButtonProps) {
                 />
                 <View
                   style={[
-                    {
-                      height: 2,
-                      position: 'absolute',
-                    },
+                    styles.iconVerticalContainer,
                     {
                       width: iconWidth,
                       backgroundColor: active ? color : iconColor,
@@ -343,6 +329,7 @@ const styles = StyleSheet.create({
     top: 0,
     elevation: 0,
     zIndex: 0,
+    backgroundColor: 'transparent',
   },
   buttonContainer: {
     overflow: 'hidden',
@@ -365,4 +352,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  iconHorizontalContainer: {
+    width: 2,
+    position: 'absolute',
+    height: 15,
+  },
+  iconVerticalContainer: {
+    height: 2,
+    position: 'absolute',
+    width: 15,
+  },
 });

src/app/constants/Colors.ts

@@ -1,8 +1,21 @@
+import { default as colors } from '../assets/theme.json';
+
+type StatusOptions = 'primary' | 'success' | 'info' | 'warning' | 'danger';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const states: StatusOptions[] = [
+  'primary',
+  'success',
+  'info',
+  'warning',
+  'danger',
+];
+
 const tintColorLight = '#2f95dc';
 const tintColorDark = '#fff';
 
-const primary = '#fd7e14';
-const secondary = '#ffc107';
+const primary = colors['color-primary-500'];
+const secondary = colors['color-warning-500'];
 
 export default {
   light: {

src/app/constants/Styles.ts

@@ -0,0 +1,77 @@
+import { FlexStyle, StyleSheet } from 'react-native';
+
+type FlexStyleProp<T extends keyof FlexStyle> = Pick<FlexStyle, T>;
+
+type DisplayStyles = {
+  displayFlex: FlexStyleProp<'display'>;
+  displayNone: FlexStyleProp<'display'>;
+  flexOne: FlexStyleProp<'flex'>;
+  flexDirectionRow: FlexStyleProp<'flexDirection'>;
+  flexCenter: FlexStyleProp<'alignItems' | 'justifyContent'>;
+};
+
+type Num = 1 | 2 | 3 | 4 | 5;
+const NUMS: Num[] = [1, 2, 3, 4, 5];
+
+type GridType = 'margin' | 'padding';
+const GRIDS: GridType[] = ['margin', 'padding'];
+
+type AREA =
+  | ''
+  | 'Horizontal'
+  | 'Vertical'
+  | 'Top'
+  | 'Bottom'
+  | 'Left'
+  | 'Right';
+
+const AREAS: AREA[] = [
+  '',
+  'Horizontal',
+  'Vertical',
+  'Top',
+  'Bottom',
+  'Left',
+  'Right',
+];
+
+type GridStyles<T extends GridType> = {
+  [P in `${T}${AREA}${Num}`]: FlexStyleProp<`${T}${AREA}`>;
+};
+
+const PROVIDED_STYLES = <
+  DisplayStyles & GridStyles<'margin'> & GridStyles<'padding'>
+>{
+  displayFlex: {
+    display: 'flex',
+  },
+  displayNone: {
+    display: 'none',
+  },
+  flexOne: {
+    flex: 1,
+  },
+  flexDirectionRow: {
+    flexDirection: 'row',
+  },
+  flexCenter: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+};
+
+NUMS.forEach((num) =>
+  GRIDS.forEach((prop) =>
+    AREAS.forEach((area) => {
+      PROVIDED_STYLES[`${prop}${area}${num}`] = {
+        [`${prop}${area}`]: num * 10,
+      };
+    })
+  )
+);
+
+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/screens/StatsPage.tsx

@@ -5,7 +5,7 @@ import { LineChart, PieChart } from 'react-native-chart-kit';
 import { useAppContext } from '../contexts/AppContext';
 import { useThemeContext } from '../contexts/ThemeContext';
 import { PortionItem, TrackItem, TrackItems } from '../types/api';
-import ScreenLayout from '../constants/Layout';
+import Display from '../constants/Display';
 
 const CHART_CONFIG = {
   backgroundColor: '#e26a00',
@@ -40,7 +40,9 @@ export default function StatsPage() {
   const { items, headerAction } = useAppContext();
   const isAction = headerAction === 'Stats';
   const { theme } = useThemeContext();
-  const { width } = ScreenLayout.window;
+  const {
+    window: { width },
+  } = Display;
   const [frequency, setFrequency] = React.useState<number>(0);
 
   const renderPieData = (item: TrackItem) => ({

src/app/types/FAB.ts

@@ -52,29 +52,21 @@ export type MainButtonProps = {
 };
 
 export type ActionItemProps = {
-  tintColor: string;
   color: string;
   icon: IconOptions;
   name: Actions;
-  buttonSize?: number;
-  textContainerStyle?: ViewStyle;
   text?: string;
+  textColor?: string;
   textStyle?: TextStyle;
   textProps?: TextProps;
+  textElevation?: number;
   textBackground?: string;
-  textColor?: string;
-  shadow: Shadow;
-  textElevation: number;
-  position: 'left' | 'right' | 'center';
+  shadow?: Shadow;
+  position?: 'left' | 'right' | 'center';
   active: boolean;
-  distanceToEdge:
-    | number
-    | {
-        vertical: number;
-        horizontal: number;
-      };
-  paddingTopBottom: number;
-  margin: number;
   animated: boolean;
+  paddingTopBottom?: number;
+  buttonSize?: number;
+  textContainerStyle?: ViewStyle;
   onPress: (name?: Actions) => void;
 };