codingpixel-expo-app 0.1.0

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

@@ -0,0 +1,191 @@
+import AppColumnView from "@appComponents/appColumnView";
+import {
+  FlashListProps,
+  FlashListRef,
+  FlashList as ShopifyFlashList,
+} from "@shopify/flash-list";
+import { RF } from "@theme/responsive";
+import React from "react";
+import { DimensionValue, StyleProp, ViewStyle } from "react-native";
+
+type NumericOrDim = number | DimensionValue;
+
+export interface AppFlashListProps<T> extends Omit<
+  FlashListProps<T>,
+  "style" | "contentContainerStyle"
+> {
+  ref?: React.RefObject<FlashListRef<T>>;
+  flex?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: NumericOrDim;
+
+  flexWrap?: ViewStyle["flexWrap"];
+  flexDirection?: ViewStyle["flexDirection"];
+  alignItems?: ViewStyle["alignItems"];
+  justifyContent?: ViewStyle["justifyContent"];
+  alignSelf?: ViewStyle["alignSelf"];
+
+  width?: NumericOrDim;
+  height?: NumericOrDim;
+  minWidth?: NumericOrDim;
+  maxWidth?: NumericOrDim;
+  minHeight?: NumericOrDim;
+  maxHeight?: NumericOrDim;
+
+  padding?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  gap?: number;
+
+  margin?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+
+  borderRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  backgroundColor?: string;
+
+  position?: ViewStyle["position"];
+  top?: NumericOrDim;
+  right?: NumericOrDim;
+  bottom?: NumericOrDim;
+  left?: NumericOrDim;
+
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+const toDim = (v?: number | DimensionValue) =>
+  v === undefined
+    ? undefined
+    : typeof v === "number"
+      ? (RF(v) as unknown as DimensionValue)
+      : v;
+
+function buildContainerStyle<T>(props: AppFlashListProps<T>): ViewStyle {
+  const {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    flexWrap,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    gap,
+    margin,
+    marginHorizontal,
+    marginVertical,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    borderRadius,
+    borderWidth,
+    borderColor,
+    backgroundColor,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+  } = props;
+
+  return {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis: toDim(flexBasis),
+    flexWrap,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    alignSelf,
+
+    width: toDim(width),
+    height: toDim(height),
+    minWidth: toDim(minWidth),
+    maxWidth: toDim(maxWidth),
+    minHeight: toDim(minHeight),
+    maxHeight: toDim(maxHeight),
+
+    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,
+
+    gap: gap !== undefined ? RF(gap) : 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,
+
+    borderRadius: borderRadius !== undefined ? RF(borderRadius) : undefined,
+    borderWidth: borderWidth !== undefined ? RF(borderWidth) : undefined,
+    borderColor,
+    backgroundColor,
+
+    position,
+    top: toDim(top),
+    right: toDim(right),
+    bottom: toDim(bottom),
+    left: toDim(left),
+  };
+}
+
+export default function AppFlashList<T>(props: AppFlashListProps<T>) {
+  const { ref, style, contentContainerStyle, gap, children, ...rest } = props;
+
+  const containerStyle = buildContainerStyle(props);
+
+  const separator =
+    gap !== undefined
+      ? () => <AppColumnView height={gap} />
+      : undefined;
+
+  return (
+    <ShopifyFlashList
+      ref={ref}
+      {...(rest as FlashListProps<T>)}
+      ItemSeparatorComponent={rest.ItemSeparatorComponent ?? separator}
+      contentContainerStyle={[containerStyle, contentContainerStyle]}
+    >
+      {children}
+    </ShopifyFlashList>
+  );
+}

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

@@ -0,0 +1,172 @@
+import { RF } from "@theme/responsive";
+import React from "react";
+import {
+  DimensionValue,
+  FlatList,
+  FlatListProps,
+  StyleSheet,
+  ViewStyle,
+} from "react-native";
+
+const toDim = (v?: number | DimensionValue) =>
+  v === undefined
+    ? undefined
+    : typeof v === "number"
+      ? (RF(v) as DimensionValue)
+      : v;
+
+interface AppFlatListProps<ItemT> extends FlatListProps<ItemT> {
+  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?: ViewStyle["flexWrap"];
+  alignItems?: ViewStyle["alignItems"];
+  alignSelf?: ViewStyle["alignSelf"];
+  justifyContent?: ViewStyle["justifyContent"];
+  alignContent?: ViewStyle["alignContent"];
+  flexDirection?: ViewStyle["flexDirection"];
+
+  width?: number | DimensionValue;
+  height?: number | DimensionValue;
+  minWidth?: number | DimensionValue;
+  maxWidth?: number | DimensionValue;
+  minHeight?: number | DimensionValue;
+  maxHeight?: number | DimensionValue;
+
+  borderRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+
+  position?: ViewStyle["position"];
+  top?: number | DimensionValue;
+  bottom?: number | DimensionValue;
+  left?: number | DimensionValue;
+  right?: number | DimensionValue;
+}
+
+function AppFlatList<ItemT = any>(props: AppFlatListProps<ItemT>) {
+  const {
+    style,
+    contentContainerStyle,
+    horizontal,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginHorizontal,
+    marginVertical,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    flexWrap,
+    alignItems,
+    alignSelf,
+    justifyContent,
+    alignContent,
+    flexDirection,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    borderRadius,
+    borderWidth,
+    borderColor,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    ...rest
+  } = props;
+
+  const resolvedContentStyle: ViewStyle = {
+    margin: margin ? RF(margin) : undefined,
+    marginTop: marginTop ? RF(marginTop) : undefined,
+    marginBottom: marginBottom ? RF(marginBottom) : undefined,
+    marginLeft: marginLeft ? RF(marginLeft) : undefined,
+    marginRight: marginRight ? RF(marginRight) : undefined,
+    marginHorizontal: marginHorizontal ? RF(marginHorizontal) : undefined,
+    marginVertical: marginVertical ? RF(marginVertical) : undefined,
+
+    padding: padding ? RF(padding) : undefined,
+    paddingTop: paddingTop ? RF(paddingTop) : undefined,
+    paddingBottom: paddingBottom ? RF(paddingBottom) : undefined,
+    paddingLeft: paddingLeft ? RF(paddingLeft) : undefined,
+    paddingRight: paddingRight ? RF(paddingRight) : undefined,
+    paddingHorizontal: paddingHorizontal ? RF(paddingHorizontal) : undefined,
+    paddingVertical: paddingVertical ? RF(paddingVertical) : undefined,
+    gap: gap ? RF(gap) : undefined,
+
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis: toDim(flexBasis),
+    flexWrap,
+    alignItems,
+    alignSelf,
+    justifyContent,
+    alignContent,
+    flexDirection: flexDirection || (horizontal ? "row" : "column"),
+
+    width: toDim(width),
+    height: toDim(height),
+    minWidth: toDim(minWidth),
+    maxWidth: toDim(maxWidth),
+    minHeight: toDim(minHeight),
+    maxHeight: toDim(maxHeight),
+
+    borderRadius: borderRadius ? RF(borderRadius) : undefined,
+    borderWidth: borderWidth ? RF(borderWidth) : undefined,
+    borderColor,
+
+    position,
+    top: toDim(top),
+    bottom: toDim(bottom),
+    left: toDim(left),
+    right: toDim(right),
+  };
+
+  return (
+    <FlatList
+      {...rest}
+      horizontal={horizontal}
+      style={style}
+      contentContainerStyle={StyleSheet.flatten([
+        resolvedContentStyle,
+        contentContainerStyle,
+      ])}
+    />
+  );
+}
+
+export default AppFlatList;

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

@@ -0,0 +1,105 @@
+import { RF } from "@theme/responsive";
+import { Image, ImageContentFit, ImageLoadEventData } from "expo-image";
+import React, { useState } from "react";
+import {
+  ActivityIndicator,
+  DimensionValue,
+  ImageStyle,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import AppColumnView from "../appColumnView";
+import AppPressable from "../appPressable";
+
+const IMAGE_FILL_STYLE = { width: "100%" as const, height: "100%" as const };
+
+interface AppIconProps extends Omit<
+  Partial<React.ComponentProps<typeof AppPressable>>,
+  "path"
+> {
+  path?: string | number;
+  uri?: string;
+  resizeMode?: ImageContentFit;
+  customStyle?: StyleProp<ImageStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  tintColor?: string;
+  loader?: React.ReactNode;
+  activityIndicatorColor?: string;
+  width?: number | DimensionValue;
+  height?: number | DimensionValue;
+  size?: number;
+  borderRadius?: number;
+  onLoad?: (e: ImageLoadEventData) => void;
+}
+
+const AppIcon: React.FC<AppIconProps> = ({
+  path,
+  uri,
+  resizeMode = "cover",
+  customStyle,
+  containerStyle,
+  tintColor,
+  loader,
+  activityIndicatorColor = "#999",
+  width = 24,
+  height = 24,
+  size,
+  borderRadius,
+  onPress,
+  onLoad,
+  ...pressableProps
+}) => {
+  const toDim = (v?: number | DimensionValue) =>
+    v === undefined
+      ? undefined
+      : typeof v === "number"
+        ? (RF(v) as unknown as DimensionValue)
+        : v;
+  const [loading, setLoading] = useState<boolean>(false);
+  const source = uri ? { uri } : path;
+
+  return (
+    <AppPressable
+      disabled={!onPress}
+      onPress={onPress}
+      width={size ? RF(size) : toDim(width)}
+      height={size ? RF(size) : toDim(height)}
+      borderRadius={
+        size ? RF(size / 2) : borderRadius ? RF(borderRadius) : undefined
+      }
+      style={containerStyle}
+      overflow="hidden"
+      {...pressableProps}
+    >
+      <Image
+        source={source}
+        contentFit={resizeMode}
+        style={[IMAGE_FILL_STYLE, customStyle]}
+        tintColor={tintColor}
+        onLoadStart={() => setLoading(true)}
+        onLoadEnd={() => setLoading(false)}
+        onLoad={onLoad}
+      />
+
+      {loading && (
+        <AppColumnView
+          position="absolute"
+          top={0}
+          left={0}
+          width="100%"
+          height="100%"
+          justifyContent="center"
+          alignItems="center"
+        >
+          {loader ? (
+            loader
+          ) : (
+            <ActivityIndicator size="small" color={activityIndicatorColor} />
+          )}
+        </AppColumnView>
+      )}
+    </AppPressable>
+  );
+};
+
+export default AppIcon;

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

@@ -0,0 +1,226 @@
+import { Colors } from "@theme/colors";
+import { Fonts } from "@theme/fonts";
+import { RF } from "@theme/responsive";
+
+import { ANDROID } from "@utils/constants";
+import React, { forwardRef, useState } from "react";
+import { Platform, StyleSheet, TextInputProps, ViewStyle } from "react-native";
+import AppColumnView from "../appColumnView";
+import AppPressable from "../appPressable";
+import AppRowView from "../appRowView";
+import AppText from "../appText";
+import CustomTextInput from "../customTextInput";
+
+interface InputProp extends TextInputProps {
+  title: any;
+  visible?: any;
+  titleColor: string;
+  containerStyle: ViewStyle;
+  HeadingTitle: string;
+  titleSize: number;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  inputProps: TextInputProps;
+  error: any;
+  errorStyle: any;
+  showPassword: boolean;
+  toggleShowPassword: () => void;
+  key: any;
+  iconColor: string;
+  required: boolean;
+  onRightPress: () => void;
+  setKeyPress: (key: string) => void;
+  disableContainerPress: boolean;
+  mainContainerStyle: any;
+  inputStyle: any;
+  tintColor: any;
+  charLimit: number;
+  value: any;
+  displayError: boolean;
+  placeHolderColor?: string;
+  inputType?: string;
+  keyboardNumberic?: boolean;
+  isFocused?: boolean;
+  setValue?: any;
+  cancelIcon?: any;
+  scrollEnabled?: boolean;
+  titleConStyle?: ViewStyle | any;
+  titleFontFamily?: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderWidth?: number;
+  inputColor?: string;
+  borderRadius?: number;
+  disabled?: boolean;
+}
+
+const AppInput = forwardRef((props: Partial<InputProp>, ref: any) => {
+  const {
+    titleSize = 15,
+    title,
+    titleColor = Colors.BLACK,
+    leftIcon,
+    rightIcon,
+    error,
+    containerStyle,
+    errorStyle,
+    showPassword,
+    value,
+    toggleShowPassword,
+    iconColor,
+    key,
+    required,
+    onRightPress,
+    inputType,
+    multiline,
+    setKeyPress,
+    editable = true,
+    disableContainerPress,
+    mainContainerStyle,
+    inputStyle,
+    tintColor,
+    visible = true,
+    charLimit,
+    displayError = true,
+    placeHolderColor = Colors.GRAY_4,
+    keyboardNumberic = false,
+    setValue = () => {},
+    cancelIcon,
+    scrollEnabled = false,
+    titleConStyle,
+    titleFontFamily = Fonts.MEDIUM,
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    inputColor,
+    borderRadius,
+    disabled,
+    ...restProps
+  } = props;
+  const labelSize = 15;
+  const [isFocus, setIsFocus] = useState(false);
+
+  return (
+    visible && (
+      <AppColumnView marginBottom={12} style={mainContainerStyle}>
+        <AppRowView justifyContent="space-between" style={titleConStyle}>
+          {!!title && (
+            <AppText
+              fontFamily={titleFontFamily}
+              size={titleSize}
+              color={!editable ? Colors.GRAY_5 : titleColor}
+              marginBottom={8}
+            >
+              {title}
+              <AppText
+                size={titleSize}
+                color={required && !editable ? Colors.ERROR : Colors.ERROR}
+                fontFamily={titleFontFamily}
+              >
+                {required ? " *" : ""}
+              </AppText>
+            </AppText>
+          )}
+          {!!charLimit && (
+            <AppText size={labelSize}>
+              {value?.length > 0 && value.length}
+              <AppText size={labelSize} color={Colors.GRAY_3} marginBottom={8}>
+                {value?.length > 0 && "/"}
+                {charLimit}
+              </AppText>
+            </AppText>
+          )}
+        </AppRowView>
+        <AppPressable
+          flexDirection="row"
+          alignItems="center"
+          paddingHorizontal={ANDROID ? 16 : 18}
+          padding={ANDROID ? 6 : 12}
+          backgroundColor={
+            disabled ? Colors.GRAY_1 : (backgroundColor ?? Colors.WHITE)
+          }
+          borderRadius={borderRadius ?? 8}
+          borderWidth={borderWidth ?? 1}
+          borderColor={
+            borderColor ? borderColor : isFocus ? Colors.PRIMARY : Colors.GRAY_2
+          }
+          style={[containerStyle, multiline && styles.flexStart]}
+          disabled={disableContainerPress}
+          onPress={onRightPress}
+        >
+          {leftIcon && (
+            <AppColumnView marginRight={12}>{leftIcon}</AppColumnView>
+          )}
+          <CustomTextInput
+            ref={ref}
+            value={value}
+            maxLength={charLimit || props.maxLength}
+            pointerEvents={editable ? "auto" : "none"}
+            textContentType="oneTimeCode"
+            keyboardType={keyboardNumberic ? "number-pad" : "default"}
+            flex={1}
+            paddingRight={14}
+            fontFamily={Fonts.MEDIUM}
+            color={inputColor ?? Colors.GRAY_10}
+            fontSize={14}
+            paddingVertical={ANDROID ? 0 : 4}
+            style={[
+              multiline && styles.multiline,
+              multiline && {
+                textAlignVertical: "top",
+                paddingTop: Platform.OS === "ios" ? 0 : 0,
+              },
+              inputStyle,
+            ]}
+            placeholderTextColor={placeHolderColor}
+            onKeyPress={(e) => setKeyPress && setKeyPress(e.nativeEvent.key)}
+            autoCorrect={false}
+            scrollEnabled={!multiline || scrollEnabled}
+            onFocus={() => setIsFocus(true)}
+            onBlur={() => setIsFocus(false)}
+            multiline={multiline}
+            {...restProps}
+          />
+
+          {!!rightIcon && (
+            <AppColumnView marginLeft={12}>{rightIcon}</AppColumnView>
+          )}
+        </AppPressable>
+        {!!error && displayError && (
+          <AppText
+            italic
+            color={Colors.ERROR}
+            size={12}
+            marginTop={8}
+            fontFamily={Fonts.MEDIUM}
+            style={errorStyle}
+          >
+            {error}
+          </AppText>
+        )}
+      </AppColumnView>
+    )
+  );
+});
+
+const styles = StyleSheet.create({
+  multiline: {
+    textAlignVertical: "top",
+    height: RF(80),
+    lineHeight: RF(19),
+    ...(Platform.OS === "ios" && {
+      paddingTop: 0,
+      paddingBottom: 0,
+    }),
+  },
+  flexStart: {
+    alignItems: "flex-start",
+    borderRadius: RF(12),
+    ...(Platform.OS === "ios" && {
+      paddingTop: 12,
+      paddingBottom: 12,
+    }),
+  },
+});
+
+export default AppInput;