codingpixel-expo-app 0.1.0

package/templates/base/src/ui/appComponents/appRowView/index.tsx

@@ -0,0 +1,320 @@
+import { RF } from "@theme/responsive";
+import React from "react";
+import {
+  DimensionValue,
+  StyleProp,
+  View,
+  ViewProps,
+  ViewStyle,
+} from "react-native";
+
+type RowProps = ViewProps & {
+  children?: React.ReactNode;
+
+  padding?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingStart?: number;
+  paddingEnd?: number;
+
+  margin?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  marginStart?: number;
+  marginEnd?: number;
+
+  flex?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: number | DimensionValue;
+  flexWrap?: ViewStyle["flexWrap"];
+  alignItems?: ViewStyle["alignItems"];
+  justifyContent?: ViewStyle["justifyContent"];
+  alignSelf?: ViewStyle["alignSelf"];
+  alignContent?: ViewStyle["alignContent"];
+
+  columnGap?: number;
+  gap?: number;
+
+  width?: number | DimensionValue;
+  height?: number | DimensionValue;
+  minWidth?: number | DimensionValue;
+  maxWidth?: number | DimensionValue;
+  minHeight?: number | DimensionValue;
+  maxHeight?: number | DimensionValue;
+  aspectRatio?: number;
+
+  position?: ViewStyle["position"];
+  top?: number | DimensionValue;
+  bottom?: number | DimensionValue;
+  left?: number | DimensionValue;
+  right?: number | DimensionValue;
+  start?: number | DimensionValue;
+  end?: number | DimensionValue;
+  zIndex?: number;
+
+  backgroundColor?: string;
+  opacity?: number;
+  overflow?: ViewStyle["overflow"];
+  display?: ViewStyle["display"];
+  direction?: ViewStyle["direction"];
+
+  borderRadius?: number;
+  borderTopLeftRadius?: number;
+  borderTopRightRadius?: number;
+  borderBottomLeftRadius?: number;
+  borderBottomRightRadius?: number;
+  borderStartRadius?: number;
+  borderEndRadius?: number;
+
+  borderWidth?: number;
+  borderTopWidth?: number;
+  borderBottomWidth?: number;
+  borderLeftWidth?: number;
+  borderRightWidth?: number;
+  borderStartWidth?: number;
+  borderEndWidth?: number;
+
+  borderColor?: string;
+  borderTopColor?: string;
+  borderBottomColor?: string;
+  borderLeftColor?: string;
+  borderRightColor?: string;
+  borderStartColor?: string;
+  borderEndColor?: string;
+  borderStyle?: ViewStyle["borderStyle"];
+
+  shadowColor?: string;
+  shadowOffset?: { width: number; height: number };
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  elevation?: number;
+
+  transform?: ViewStyle["transform"];
+  backfaceVisibility?: ViewStyle["backfaceVisibility"];
+};
+
+const AppRowView: React.FC<RowProps> = ({
+  children,
+  style,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingStart,
+  paddingEnd,
+  margin,
+  marginHorizontal,
+  marginVertical,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  marginStart,
+  marginEnd,
+  flex,
+  flexGrow,
+  flexShrink,
+  flexBasis,
+  flexWrap,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  alignContent,
+  columnGap,
+  gap,
+
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  aspectRatio,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  start,
+  end,
+  zIndex,
+  backgroundColor,
+  opacity,
+  overflow,
+  display,
+  direction,
+  borderRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderStartRadius,
+  borderEndRadius,
+  borderWidth,
+  borderTopWidth,
+  borderBottomWidth,
+  borderLeftWidth,
+  borderRightWidth,
+  borderStartWidth,
+  borderEndWidth,
+  borderColor,
+  borderTopColor,
+  borderBottomColor,
+  borderLeftColor,
+  borderRightColor,
+  borderStartColor,
+  borderEndColor,
+  borderStyle,
+  shadowColor,
+  shadowOffset,
+  shadowOpacity,
+  shadowRadius,
+  elevation,
+  transform,
+  backfaceVisibility,
+  ...rest
+}) => {
+  const toDim = (v?: number | DimensionValue) =>
+    v === undefined
+      ? undefined
+      : typeof v === "number"
+        ? (RF(v) as unknown as DimensionValue)
+        : v;
+
+  const customStyle: ViewStyle = {
+    flexDirection: "row",
+
+    padding: padding !== undefined ? RF(padding) : undefined,
+    paddingHorizontal:
+      paddingHorizontal !== undefined ? RF(paddingHorizontal) : undefined,
+    paddingVertical:
+      paddingVertical !== undefined ? RF(paddingVertical) : undefined,
+    paddingTop: paddingTop !== undefined ? RF(paddingTop) : undefined,
+    paddingBottom: paddingBottom !== undefined ? RF(paddingBottom) : undefined,
+    paddingLeft: paddingLeft !== undefined ? RF(paddingLeft) : undefined,
+    paddingRight: paddingRight !== undefined ? RF(paddingRight) : undefined,
+    paddingStart: paddingStart !== undefined ? RF(paddingStart) : undefined,
+    paddingEnd: paddingEnd !== undefined ? RF(paddingEnd) : undefined,
+
+    margin: margin !== undefined ? RF(margin) : undefined,
+    marginHorizontal:
+      marginHorizontal !== undefined ? RF(marginHorizontal) : undefined,
+    marginVertical:
+      marginVertical !== undefined ? RF(marginVertical) : undefined,
+    marginTop: marginTop !== undefined ? RF(marginTop) : undefined,
+    marginBottom: marginBottom !== undefined ? RF(marginBottom) : undefined,
+    marginLeft: marginLeft !== undefined ? RF(marginLeft) : undefined,
+    marginRight: marginRight !== undefined ? RF(marginRight) : undefined,
+    marginStart: marginStart !== undefined ? RF(marginStart) : undefined,
+    marginEnd: marginEnd !== undefined ? RF(marginEnd) : undefined,
+
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis: flexBasis as any,
+    flexWrap,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    alignContent,
+
+    columnGap: columnGap !== undefined ? RF(columnGap) : undefined,
+    gap: gap !== undefined ? RF(gap) : undefined,
+
+    width: toDim(width),
+    height: toDim(height),
+    minWidth: toDim(minWidth),
+    maxWidth: toDim(maxWidth),
+    minHeight: toDim(minHeight),
+    maxHeight: toDim(maxHeight),
+    aspectRatio,
+
+    position,
+    top: toDim(top),
+    bottom: toDim(bottom),
+    left: toDim(left),
+    right: toDim(right),
+    start: toDim(start),
+    end: toDim(end),
+    zIndex,
+
+    backgroundColor,
+    opacity,
+    overflow,
+    display,
+    direction,
+
+    borderRadius: borderRadius !== undefined ? RF(borderRadius) : undefined,
+    borderTopLeftRadius:
+      borderTopLeftRadius !== undefined ? RF(borderTopLeftRadius) : undefined,
+    borderTopRightRadius:
+      borderTopRightRadius !== undefined ? RF(borderTopRightRadius) : undefined,
+    borderBottomLeftRadius:
+      borderBottomLeftRadius !== undefined
+        ? RF(borderBottomLeftRadius)
+        : undefined,
+    borderBottomRightRadius:
+      borderBottomRightRadius !== undefined
+        ? RF(borderBottomRightRadius)
+        : undefined,
+
+    borderWidth: borderWidth !== undefined ? RF(borderWidth) : undefined,
+    borderTopWidth:
+      borderTopWidth !== undefined ? RF(borderTopWidth) : undefined,
+    borderBottomWidth:
+      borderBottomWidth !== undefined ? RF(borderBottomWidth) : undefined,
+    borderLeftWidth:
+      borderLeftWidth !== undefined ? RF(borderLeftWidth) : undefined,
+    borderRightWidth:
+      borderRightWidth !== undefined ? RF(borderRightWidth) : undefined,
+    borderStartWidth:
+      borderStartWidth !== undefined ? RF(borderStartWidth) : undefined,
+    borderEndWidth:
+      borderEndWidth !== undefined ? RF(borderEndWidth) : undefined,
+
+    borderColor,
+    borderTopColor,
+    borderBottomColor,
+    borderLeftColor,
+    borderRightColor,
+    borderStartColor,
+    borderEndColor,
+    borderStyle,
+
+    shadowColor,
+    shadowOffset,
+    shadowOpacity,
+    shadowRadius,
+    elevation,
+
+    transform,
+    backfaceVisibility,
+  };
+
+  return (
+    <View
+      style={[
+        { flexDirection: "row" },
+        customStyle,
+        style as StyleProp<ViewStyle>,
+      ]}
+      {...rest}
+    >
+      {children}
+    </View>
+  );
+};
+
+export default AppRowView;

package/templates/base/src/ui/appComponents/appSafeAreaInsets/index.tsx

@@ -0,0 +1,24 @@
+import { RF } from '@theme/responsive';
+import { ANDROID } from '@utils/constants';
+import React, { createContext, useContext } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const SafeAreaInsetsContext = createContext({});
+
+export const SafeAreaInsetsProvider = ({ children }: any) => {
+  let insets = useSafeAreaInsets();
+  let customInsets = { ...insets };
+  if (ANDROID) {
+    customInsets = { ...insets, bottom: insets?.bottom + RF(12) };
+  }
+
+  return (
+    <SafeAreaInsetsContext.Provider value={customInsets}>
+      {children}
+    </SafeAreaInsetsContext.Provider>
+  );
+};
+
+export const useSafeArea = () => {
+  return useContext(SafeAreaInsetsContext);
+};

package/templates/base/src/ui/appComponents/appScrollView/index.tsx

@@ -0,0 +1,166 @@
+import { RF } from '@theme/responsive';
+import React, { ComponentProps, forwardRef } from 'react';
+import { DimensionValue, ScrollView, ViewStyle } from 'react-native';
+
+type RNScrollViewProps = ComponentProps<typeof ScrollView>;
+
+interface ExtraStyleProps {
+  horizontal?: boolean;
+  showsHorizontalScrollIndicator?: boolean;
+  showsVerticalScrollIndicator?: boolean;
+  padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+
+  margin?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+
+  borderRadius?: number;
+
+  flex?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: number | DimensionValue;
+  flexWrap?: ViewStyle['flexWrap'];
+  flexDirection?: ViewStyle['flexDirection'];
+  alignItems?: ViewStyle['alignItems'];
+  justifyContent?: ViewStyle['justifyContent'];
+  alignSelf?: ViewStyle['alignSelf'];
+  gap?: number;
+
+  backgroundColor?: string;
+
+  height?: DimensionValue;
+  maxHeight?: DimensionValue;
+  minHeight?: DimensionValue;
+  maxWidth?: DimensionValue;
+  minWidth?: DimensionValue;
+  width?: DimensionValue;
+  aspectRatio?: number;
+}
+
+export type AppScrollViewProps = RNScrollViewProps & ExtraStyleProps;
+
+const AppScrollView = forwardRef<
+  React.ComponentRef<typeof ScrollView>,
+  AppScrollViewProps
+>(
+  (
+    {
+      children,
+      style,
+      contentContainerStyle,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      paddingHorizontal,
+      paddingVertical,
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      marginHorizontal,
+      marginVertical,
+      flex,
+      flexGrow,
+      flexShrink,
+      flexBasis,
+      flexWrap,
+      flexDirection,
+      alignItems,
+      justifyContent,
+      alignSelf,
+      gap,
+      backgroundColor,
+      borderRadius,
+      height,
+      maxHeight,
+      minHeight,
+      maxWidth,
+      minWidth,
+      width,
+      aspectRatio,
+      ...rest
+    },
+    ref,
+  ) => {
+    const toDim = (v?: number | DimensionValue) =>
+      v === undefined
+        ? undefined
+        : typeof v === 'number'
+        ? (RF(v) as unknown as DimensionValue)
+        : v;
+
+    const spacingStyle: ViewStyle = {
+      padding: padding !== undefined ? RF(padding) : undefined,
+      paddingTop: paddingTop !== undefined ? RF(paddingTop) : undefined,
+      paddingBottom:
+        paddingBottom !== undefined ? RF(paddingBottom) : undefined,
+      paddingLeft: paddingLeft !== undefined ? RF(paddingLeft) : undefined,
+      paddingRight: paddingRight !== undefined ? RF(paddingRight) : undefined,
+      paddingHorizontal:
+        paddingHorizontal !== undefined ? RF(paddingHorizontal) : undefined,
+      paddingVertical:
+        paddingVertical !== undefined ? RF(paddingVertical) : undefined,
+
+      margin: margin !== undefined ? RF(margin) : undefined,
+      marginTop: marginTop !== undefined ? RF(marginTop) : undefined,
+      marginBottom: marginBottom !== undefined ? RF(marginBottom) : undefined,
+      marginLeft: marginLeft !== undefined ? RF(marginLeft) : undefined,
+      marginRight: marginRight !== undefined ? RF(marginRight) : undefined,
+      marginHorizontal:
+        marginHorizontal !== undefined ? RF(marginHorizontal) : undefined,
+      marginVertical:
+        marginVertical !== undefined ? RF(marginVertical) : undefined,
+
+      borderRadius: borderRadius !== undefined ? RF(borderRadius) : undefined,
+
+      flex,
+      flexGrow,
+      flexShrink,
+      flexBasis: toDim(flexBasis),
+      flexDirection,
+      flexWrap,
+      alignItems,
+      justifyContent,
+      alignSelf,
+      gap: gap !== undefined ? RF(gap) : undefined,
+
+      backgroundColor,
+      height: toDim(height),
+      maxHeight: toDim(maxHeight),
+      minHeight: toDim(minHeight),
+      maxWidth: toDim(maxWidth),
+      minWidth: toDim(minWidth),
+      width: toDim(width),
+      aspectRatio: aspectRatio !== undefined ? RF(aspectRatio) : undefined,
+    };
+
+    return (
+      <ScrollView
+        ref={ref}
+        style={style}
+        contentContainerStyle={[spacingStyle, contentContainerStyle]}
+        {...rest}
+      >
+        {children}
+      </ScrollView>
+    );
+  },
+);
+
+AppScrollView.displayName = 'AppScrollView';
+
+export default AppScrollView;

package/templates/base/src/ui/appComponents/appSkeleton/index.tsx

@@ -0,0 +1,22 @@
+import { Colors } from "@theme/colors";
+import Skeleton, { ISkeletonProps } from "react-native-reanimated-skeleton";
+
+const AppSkeleton = ({
+  boneColor = Colors.GRAY_2,
+  highlightColor = Colors.WHITE,
+  animationType = "shiver",
+  duration = 1000,
+  ...props
+}: ISkeletonProps) => {
+  return (
+    <Skeleton
+      boneColor={boneColor}
+      highlightColor={highlightColor}
+      animationType={animationType}
+      duration={duration}
+      {...props}
+    />
+  );
+};
+
+export default AppSkeleton;

package/templates/base/src/ui/appComponents/appStatusBar/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {StatusBar, StatusBarProps} from 'react-native';
+
+const AppStatusBar: React.FC<StatusBarProps> = props => {
+  return <StatusBar {...props} />;
+};
+
+export default AppStatusBar;

package/templates/base/src/ui/appComponents/appTabHeader/index.tsx

@@ -0,0 +1,111 @@
+import AppColumnView from "@appComponents/appColumnView";
+import AppIcon from "@appComponents/appIcon";
+import AppPressable from "@appComponents/appPressable";
+import AppRowView from "@appComponents/appRowView";
+import AppText from "@appComponents/appText";
+import { Images } from "@assets";
+import AvatarBlock from "@components/avatarBlock";
+import IoniconsIcons from "@icons/IoniconsIcons";
+import OcticonsIcons from "@icons/octiconsIcons";
+import { Colors } from "@theme/colors";
+import { Fonts } from "@theme/fonts";
+import { useRouter } from "expo-router";
+import React from "react";
+
+interface IAppTabHeader {
+  title: string;
+  subTitle: string;
+  onPressDownload?: () => void;
+  onFilterPress?: () => void;
+  avatarUri: string | null;
+  onNotificationPress?: () => void;
+  subTitleIcon?: React.ReactNode;
+}
+
+const AppTabHeader = (props: IAppTabHeader) => {
+  const {
+    avatarUri,
+    onPressDownload,
+    onFilterPress,
+    onNotificationPress,
+    title,
+    subTitle,
+    subTitleIcon,
+  } = props;
+  const router = useRouter();
+
+  return (
+    <AppRowView
+      justifyContent="space-between"
+      alignItems="flex-start"
+      marginBottom={12}
+    >
+      <AppColumnView flex={1} paddingRight={12}>
+        <AppText size={16} fontFamily={Fonts.BOLD} color={Colors.BLACK}>
+          {title}
+        </AppText>
+        <AppRowView alignItems="center" gap={6}>
+          {subTitleIcon}
+          <AppText size={12} fontFamily={Fonts.MEDIUM} color={Colors.GRAY_6}>
+            {subTitle}
+          </AppText>
+        </AppRowView>
+      </AppColumnView>
+
+      <AppRowView alignItems="center" gap={12}>
+        {onNotificationPress ? (
+          <AppPressable onPress={onNotificationPress} hitSlop={10}>
+            <AppColumnView>
+              <AppIcon path={Images.notification} size={22} />
+              <AppColumnView
+                position="absolute"
+                top={0}
+                right={0}
+                width={12}
+                height={12}
+                borderRadius={6}
+                backgroundColor={Colors.NOTIFICATION}
+              />
+            </AppColumnView>
+          </AppPressable>
+        ) : onFilterPress ? (
+          <AppPressable onPress={onFilterPress} hitSlop={10}>
+            <AppColumnView
+              height={40}
+              width={40}
+              borderRadius={10}
+              backgroundColor={Colors.GRAY_1}
+              alignItems="center"
+              justifyContent="center"
+            >
+              <IoniconsIcons
+                icon="options-outline"
+                color={Colors.GRAY_5}
+                size={22}
+              />
+            </AppColumnView>
+          </AppPressable>
+        ) : onPressDownload ? (
+          <AppPressable
+            onPress={onPressDownload}
+            hitSlop={10}
+            height={44}
+            width={44}
+            borderRadius={22}
+            backgroundColor={Colors.GRAY_1}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <OcticonsIcons icon="download" color={Colors.GRAY_5} size={22} />
+          </AppPressable>
+        ) : null}
+        <AvatarBlock
+          avatarUri={avatarUri}
+          onPressProfile={() => router.push("/(coach)/basic-info")}
+        />
+      </AppRowView>
+    </AppRowView>
+  );
+};
+
+export default AppTabHeader;