codingpixel-expo-app 0.1.0

package/templates/base/src/ui/components/backgroundGradient/index.tsx

@@ -0,0 +1,24 @@
+import { LinearGradient } from "expo-linear-gradient";
+import React from "react";
+import { Dimensions } from "react-native";
+
+const { height } = Dimensions.get("window");
+
+const GRADIENT_STYLE = {
+  position: "absolute" as const,
+  top: 0,
+  left: 0,
+  right: 0,
+  height: height * 0.3,
+};
+
+const BackgroundGradient = () => {
+  return (
+    <LinearGradient
+      colors={["#2D85B71A", "#2D85B700"]}
+      style={GRADIENT_STYLE}
+    />
+  );
+};
+
+export default BackgroundGradient;

package/templates/base/src/ui/components/errorFallback/index.tsx

@@ -0,0 +1,40 @@
+import AppColumnView from "@appComponents/appColumnView";
+import AppPressable from "@appComponents/appPressable";
+import AppText from "@appComponents/appText";
+import AppWrapper from "@appComponents/appWrapper";
+import { Colors } from "@theme/colors";
+import { Fonts } from "@theme/fonts";
+import { FallbackProps } from "react-error-boundary";
+
+const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => (
+  <AppWrapper bgColor={Colors.BG_COLOR}>
+    <AppColumnView
+      flex={1}
+      alignItems="center"
+      justifyContent="center"
+      paddingHorizontal={24}
+      gap={12}
+    >
+      <AppText size={18} fontFamily={Fonts.SEMI_BOLD} color={Colors.GRAY_5} center>
+        Something went wrong
+      </AppText>
+      <AppText size={13} fontFamily={Fonts.REGULAR} color={Colors.GRAY_4} center>
+        {error instanceof Error ? error.message : String(error)}
+      </AppText>
+      <AppPressable
+        marginTop={8}
+        paddingHorizontal={20}
+        paddingVertical={12}
+        borderRadius={12}
+        backgroundColor={Colors.PRIMARY}
+        onPress={resetErrorBoundary}
+      >
+        <AppText size={14} fontFamily={Fonts.SEMI_BOLD} color={Colors.WHITE}>
+          Try Again
+        </AppText>
+      </AppPressable>
+    </AppColumnView>
+  </AppWrapper>
+);
+
+export default ErrorFallback;

package/templates/base/src/ui/iconComponents/IconFontAwesome6/index.tsx

@@ -0,0 +1,22 @@
+import { FontAwesome6 } from "@expo/vector-icons";
+import React from "react";
+
+const IconFontAwesome6 = ({
+  name,
+  size,
+  color,
+}: {
+  name: string;
+  size: number;
+  color: string;
+}) => {
+  return (
+    <FontAwesome6
+      name={name as keyof typeof FontAwesome6.glyphMap}
+      size={size}
+      color={color}
+    />
+  );
+};
+
+export default IconFontAwesome6;

package/templates/base/src/ui/iconComponents/IoniconsIcons/index.tsx

@@ -0,0 +1,33 @@
+import { RF } from "@theme/responsive";
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
+
+type GlyphName = keyof typeof Ionicons.glyphMap;
+
+const ICON_ALIASES: Record<string, GlyphName> = {
+  home: "home",
+  teams: "people",
+  schedule: "calendar",
+  messages: "chatbubbles",
+  payments: "card",
+};
+
+const IoniconsIcons = ({
+  icon,
+  color,
+  size = 20,
+}: {
+  icon: string;
+  color?: string;
+  size?: number;
+}) => {
+  const name: GlyphName =
+    ICON_ALIASES[icon] ??
+    (icon in Ionicons.glyphMap ? (icon as GlyphName) : "help-circle");
+
+  return (
+    <Ionicons name={name} size={RF(size)} color={color} />
+  );
+};
+
+export default IoniconsIcons;

package/templates/base/src/ui/iconComponents/antDesignicons/index.tsx

@@ -0,0 +1,22 @@
+import { AntDesign } from "@expo/vector-icons";
+import React from "react";
+
+const AndDesignIcons = ({
+  name,
+  size,
+  color,
+}: {
+  name: string;
+  size: number;
+  color: string;
+}) => {
+  return (
+    <AntDesign
+      name={name as keyof typeof AntDesign.glyphMap}
+      size={size}
+      color={color}
+    />
+  );
+};
+
+export default AndDesignIcons;

package/templates/base/src/ui/iconComponents/featherIcons/index.tsx

@@ -0,0 +1,22 @@
+import { Feather } from "@expo/vector-icons";
+import React from "react";
+
+const FeatherIcons = ({
+  name,
+  size,
+  color,
+}: {
+  name: string;
+  size: number;
+  color: string;
+}) => {
+  return (
+    <Feather
+      name={name as keyof typeof Feather.glyphMap}
+      size={size}
+      color={color}
+    />
+  );
+};
+
+export default FeatherIcons;

package/templates/base/src/ui/iconComponents/materialCommunityIcons/index.tsx

@@ -0,0 +1,24 @@
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import React from "react";
+
+interface IconMaterialCommunityProps {
+  name: string;
+  size: number;
+  color: string;
+}
+
+const IconMaterialCommunity = ({
+  name,
+  size,
+  color,
+}: IconMaterialCommunityProps) => {
+  return (
+    <MaterialCommunityIcons
+      name={name as keyof typeof MaterialCommunityIcons.glyphMap}
+      size={size}
+      color={color}
+    />
+  );
+};
+
+export default IconMaterialCommunity;

package/templates/base/src/ui/iconComponents/materialIcons/index.tsx

@@ -0,0 +1,23 @@
+import { MaterialIcons } from "@expo/vector-icons";
+import { RF } from "@theme/responsive";
+import React from "react";
+
+type GlyphName = keyof typeof MaterialIcons.glyphMap;
+
+const MaterialIconss = ({
+  icon,
+  color,
+  size = 20,
+}: {
+  icon: string;
+  color?: string;
+  size?: number;
+}) => {
+  const name: GlyphName = (
+    icon in MaterialIcons.glyphMap ? icon : "question"
+  ) as GlyphName;
+
+  return <MaterialIcons name={name} size={RF(size)} color={color} />;
+};
+
+export default MaterialIconss;

package/templates/base/src/ui/iconComponents/octiconsIcons/index.tsx

@@ -0,0 +1,23 @@
+import { Octicons } from "@expo/vector-icons";
+import { RF } from "@theme/responsive";
+import React from "react";
+
+type GlyphName = keyof typeof Octicons.glyphMap;
+
+const OcticonsIcons = ({
+  icon,
+  color,
+  size = 20,
+}: {
+  icon: string;
+  color?: string;
+  size?: number;
+}) => {
+  const name: GlyphName = (
+    icon in Octicons.glyphMap ? icon : "question"
+  ) as GlyphName;
+
+  return <Octicons name={name} size={RF(size)} color={color} />;
+};
+
+export default OcticonsIcons;

package/templates/base/src/ui/theme/allFileStyles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from "react-native";
+import { Colors } from "./colors";
+import { RF } from "./responsive";
+
+export const AllStyles = StyleSheet.create({
+  backdropAbsoluteBlur: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    elevation: 8,
+    zIndex: 1,
+  },
+  shadowBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    elevation: 8,
+    zIndex: 1,
+  },
+  modalBorderStyle: {
+    borderTopLeftRadius: RF(20),
+    borderTopRightRadius: RF(20),
+    backgroundColor: Colors.GRAY_1,
+  },
+  messageListContainer: { gap: RF(16), padding: RF(16) },
+  modalBackgroundColor: {
+    backgroundColor: Colors.GRAY_1,
+  },
+  fullWidthButton: {
+    width: "100%",
+  },
+  shadowOffset: { width: 0, height: 2 },
+});

package/templates/base/src/ui/theme/colors.ts

@@ -0,0 +1,54 @@
+export const enum Colors {
+  PRIMARY = "#2E5A88",
+  PRIMARY_1 = "#436B94",
+  PRIMARY_2 = "#587BA0",
+  PRIMARY_3 = "#829CB8",
+  PRIMARY_4 = "#97ADC4",
+  PRIMARY_5 = "#ABBDCF",
+  PRIMARY_6 = "#C1CEDC",
+  PRIMARY_7 = "#D5DEE7",
+  PRIMARY_8 = "#EBEFF4",
+
+  SECONDARY = "#2D85B7",
+  SECONDARY_1 = "#4292BF",
+  SECONDARY_2 = "#579DC5",
+  SECONDARY_3 = "#6CAACD",
+  SECONDARY_4 = "#81B6D4",
+  SECONDARY_5 = "#96C2DB",
+  SECONDARY_6 = "#ABCEE2",
+  SECONDARY_7 = "#C0DBEA",
+  SECONDARY_8 = "#D5E7F1",
+  SECONDARY_9 = "#EAF3F8",
+
+  SUCCESS = "#22BB33",
+  SUCCESS_10_PERCENT = "#E9F9EB",
+  INFO = "#246BFD",
+  WARNING = "#BF6A02",
+  WARNING_10_PERCENT = "#FEF7EE",
+  ERROR = "#BB2124",
+  ERROR_10_PERCENT = "#F9E9EA",
+  DISABLED = "#AAAAAA",
+  DISABLED_BUTTON = "#693EC9",
+  NOTIFICATION = "#F75555",
+
+  PURPLE_TEN_PERCENT = "#F0ECFA",
+  PURPLE = "#693EC9",
+
+  GRAY_10 = "#303030",
+  GRAY_9 = "#3C3D3D",
+  GRAY_8 = "#444546",
+  GRAY_7 = "#4E4F50",
+  GRAY_6 = "#5B5D5F",
+  GRAY_5 = "#86888A",
+  GRAY_4 = "#AEB0B2",
+  GRAY_3 = "#D0D1D1",
+  GRAY_2 = "#E6E7E7",
+  GRAY_1 = "#F5F6F6",
+
+  WHITE = "#FFFFFF",
+  BORDER = "#D1D0D0",
+  BLACK = "#1A1A1A",
+
+  TRANSPARENT = "transparent",
+  BG_COLOR = "#FDFDFD",
+}

package/templates/base/src/ui/theme/fonts.ts

@@ -0,0 +1,3 @@
+// Generated at scaffold time by `patchLayout` (Phase 6) based on the user's
+// EXPO_PRIMARY_FONT / EXPO_SECONDARY_FONT answers.
+// @@FONTS_OBJECT@@

package/templates/base/src/ui/theme/responsive.ts

@@ -0,0 +1,27 @@
+import * as Device from "expo-device";
+import { Dimensions, PixelRatio } from "react-native";
+import { RFValue } from "react-native-responsive-fontsize";
+
+export const isTablet = Device.deviceType == Device.DeviceType.TABLET;
+const widthPercentageToDP = (widthPercent: any) => {
+  const screenWidth = Dimensions.get("window").width;
+  const elemWidth = parseFloat(widthPercent);
+  return PixelRatio.roundToNearestPixel((screenWidth * elemWidth) / 100);
+};
+const heightPercentageToDP = (heightPercent: any) => {
+  const screenHeight = Dimensions.get("window").height;
+  const elemHeight = parseFloat(heightPercent);
+  return PixelRatio.roundToNearestPixel((screenHeight * elemHeight) / 100);
+};
+const RFView = (value: number) => {
+  return RFValue(value * (isTablet ? 0.74 : 0.89));
+};
+const RFTextFont = (value: number) => {
+  return RFValue(value * (isTablet ? 0.69 : 0.89));
+};
+export {
+  heightPercentageToDP as HP,
+  RFView as RF,
+  RFTextFont as RFT,
+  widthPercentageToDP as WP,
+};

package/templates/bottom-sheet/src/ui/appComponents/BottomSheetKeyboardAwareScrollView/index.tsx

@@ -0,0 +1,111 @@
+import {
+  SCROLLABLE_TYPE,
+  createBottomSheetScrollableComponent,
+  type BottomSheetScrollViewMethods,
+} from '@gorhom/bottom-sheet';
+import type { BottomSheetScrollViewProps } from '@gorhom/bottom-sheet/src/components/bottomSheetScrollable/types';
+import React, { memo } from 'react';
+import { DimensionValue, StyleProp, ViewStyle } from 'react-native';
+import {
+  KeyboardAwareScrollView,
+  KeyboardAwareScrollViewProps,
+} from 'react-native-keyboard-controller';
+import Reanimated from 'react-native-reanimated';
+
+const toDim = (v?: number | DimensionValue) =>
+  v === undefined
+    ? undefined
+    : typeof v === 'number'
+    ? (v as DimensionValue)
+    : v;
+
+type ExtraStyleProps = {
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  margin?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+  padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  gap?: number;
+  flex?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: number | DimensionValue;
+  flexWrap?: 'wrap' | 'nowrap';
+  width?: number | DimensionValue;
+  height?: number | DimensionValue;
+  minHeight?: number | DimensionValue;
+  maxHeight?: number | DimensionValue;
+  minWidth?: number | DimensionValue;
+  maxWidth?: number | DimensionValue;
+};
+
+type CombinedProps = BottomSheetScrollViewProps &
+  KeyboardAwareScrollViewProps &
+  ExtraStyleProps;
+
+const AnimatedScrollView =
+  Reanimated.createAnimatedComponent<KeyboardAwareScrollViewProps>(
+    KeyboardAwareScrollView,
+  );
+
+const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<
+  BottomSheetScrollViewMethods,
+  BottomSheetScrollViewProps
+>(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView);
+
+const BottomSheetKeyboardAwareScrollView = memo(
+  ({ style, contentContainerStyle, ...rest }: CombinedProps) => {
+    const resolvedStyle: ViewStyle = {
+      margin: rest.margin,
+      marginTop: rest.marginTop,
+      marginBottom: rest.marginBottom,
+      marginLeft: rest.marginLeft,
+      marginRight: rest.marginRight,
+      marginHorizontal: rest.marginHorizontal,
+      marginVertical: rest.marginVertical,
+      padding: rest.padding,
+      paddingTop: rest.paddingTop,
+      paddingBottom: rest.paddingBottom,
+      paddingLeft: rest.paddingLeft,
+      paddingRight: rest.paddingRight,
+      paddingHorizontal: rest.paddingHorizontal,
+      paddingVertical: rest.paddingVertical,
+      gap: rest.gap,
+      flex: rest.flex,
+      flexGrow: rest.flexGrow,
+      flexShrink: rest.flexShrink,
+      flexBasis: toDim(rest.flexBasis),
+      flexWrap: rest.flexWrap,
+      width: toDim(rest.width),
+      height: toDim(rest.height),
+      minHeight: toDim(rest.minHeight),
+      maxHeight: toDim(rest.maxHeight),
+      minWidth: toDim(rest.minWidth),
+      maxWidth: toDim(rest.maxWidth),
+    };
+
+    return (
+      <BottomSheetScrollViewComponent
+        {...rest}
+        style={style}
+        contentContainerStyle={[resolvedStyle, contentContainerStyle]}
+      />
+    );
+  },
+);
+
+BottomSheetKeyboardAwareScrollView.displayName =
+  'BottomSheetKeyboardAwareScrollView';
+
+export default BottomSheetKeyboardAwareScrollView;

package/templates/bottom-sheet/src/ui/appComponents/appBottomSheetBackdrop/index.tsx

@@ -0,0 +1,27 @@
+import { BottomSheetBackdrop } from "@gorhom/bottom-sheet";
+import React from "react";
+
+interface IAppButtonSheetBackdrop {
+  props: any;
+  disappearsOnIndex?: number;
+  appearsOnIndex?: number;
+  opacity?: number;
+}
+
+const AppButtonSheetBackdrop = ({
+  props,
+  disappearsOnIndex = -1,
+  appearsOnIndex = 0,
+  opacity = 0.8,
+}: IAppButtonSheetBackdrop) => {
+  return (
+    <BottomSheetBackdrop
+      {...props}
+      disappearsOnIndex={disappearsOnIndex}
+      appearsOnIndex={appearsOnIndex}
+      opacity={opacity}
+    />
+  );
+};
+
+export default AppButtonSheetBackdrop;

package/templates/bottom-sheet/src/ui/appComponents/appBottomSheetScrollView/index.tsx

@@ -0,0 +1,99 @@
+import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
+import { RF } from "@theme/responsive";
+import React, { ComponentProps, forwardRef } from "react";
+import { ViewStyle } from "react-native";
+
+type BottomSheetScrollViewProps = ComponentProps<typeof BottomSheetScrollView>;
+
+interface ExtraStyleProps {
+  padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+
+  gap?: number;
+
+  margin?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+}
+
+export type AppBottomSheetScrollViewProps = BottomSheetScrollViewProps &
+  ExtraStyleProps;
+
+const AppBottomSheetScrollView = forwardRef<
+  React.ComponentRef<typeof BottomSheetScrollView>,
+  AppBottomSheetScrollViewProps
+>(
+  (
+    {
+      children,
+      style,
+      contentContainerStyle,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      marginHorizontal,
+      marginVertical,
+      ...rest
+    },
+    ref,
+  ) => {
+    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,
+
+      gap: gap !== undefined ? RF(gap) : 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,
+    };
+
+    return (
+      <BottomSheetScrollView
+        ref={ref}
+        style={style}
+        contentContainerStyle={[spacingStyle, contentContainerStyle]}
+        {...rest}
+      >
+        {children}
+      </BottomSheetScrollView>
+    );
+  },
+);
+
+AppBottomSheetScrollView.displayName = "AppBottomSheetScrollView";
+
+export default AppBottomSheetScrollView;