fln-espranza 0.0.1

package/.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

package/Readme.md

@@ -0,0 +1 @@
+# All components which is used to develop the FLN-Espranza Project.

package/components/Avatar.tsx

@@ -0,0 +1,42 @@
+import { View, Image, ImageProps } from "react-native";
+import React from "react";
+import tw from "../lib/tailwind";
+import EText from "./EText";
+
+interface AvatarProps {
+  size?: "xxs" | "xs" | "sm" | "lg" | "5xl";
+  source: string;
+  nameFirstLetter?: string;
+  textColor?: string;
+}
+
+export default function Avatar({ size, source, nameFirstLetter, textColor }: AvatarProps) {
+    let colors = [
+     "#00BE9B",
+     "#0993BF",
+     "#64748B",
+     "#3F3D84",
+     "#0993BF",
+     "#525252",
+     "#EA580C",
+     "#2D3A5D",
+    ]
+
+    let color = colors[Math.floor(Math.random() * colors.length)]
+  return (
+    <View
+      style={tw.style(
+        "flex items-center justify-center w-16 h-16 rounded-full overflow-hidden",
+        size === "lg" && "w-16 h-16",
+        size === "sm" && "w-12 h-12",
+        size === "xs" && "w-10 h-10",
+        size === "xxs" && "w-7 h-7",
+        size === "5xl" && "w-20 h-20",
+        `bg-[${color}]`
+      )}
+    >
+      {source ? <Image style={tw`w-full h-full `} source={source} /> : 
+      <EText style={tw`text-2xl font-extrabold text-white`}>{nameFirstLetter}</EText>}
+    </View>
+  );
+}

package/components/BaseLayout.tsx

@@ -0,0 +1,174 @@
+import { View, ImageBackground, Dimensions, Animated } from "react-native";
+import React, { useEffect, useRef, useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import tw from "../lib/tailwind";
+import EText from "./EText";
+import { StatusBar } from "expo-status-bar";
+import { Container, EButton, EButtonIcon, PageHeader } from ".";
+import Constants from "expo-constants";
+import { useNavigation } from "@react-navigation/native";
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const SCREEN_HEIGHT = Dimensions.get("window").height;
+const HEADER_HEIGHT = Constants.statusBarHeight + 60;
+const SCROLL_PADDING_BOTTOM = 100;
+
+interface BaseLayoutProps {
+  title: string;
+  subtitle?: string;
+  curved?: boolean;
+  headerContent?: JSX.Element;
+  children?: JSX.Element;
+  iconEnd?: JSX.Element;
+  noScroll?: boolean;
+  bottomButton?: JSX.Element;
+  border?: boolean;
+  menuButton?: boolean;
+}
+
+export default function BaseLayout({
+  title,
+  subtitle,
+  curved,
+  headerContent,
+  children,
+  noScroll,
+  iconEnd,
+  bottomButton,
+  border,
+  menuButton,
+}: BaseLayoutProps) {
+  const insets = useSafeAreaInsets();
+  const [headerScrolled, setHeaderScrolled] = useState(false);
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.spring(scrollY, {
+      toValue: headerScrolled ? 0 : -40,
+      speed: 2,
+      delay: 1,
+      bounciness: 1,
+      useNativeDriver: true,
+    }).start();
+
+    Animated.spring(opacity, {
+      toValue: headerScrolled ? 0.975 : 0,
+      speed: 2,
+      delay: 1,
+      bounciness: 1,
+      useNativeDriver: true,
+    }).start();
+  }, [headerScrolled]);
+
+  const navigation = useNavigation();
+
+  return (
+    <View
+      style={[
+        tw`flex-1 bg-white`,
+        {
+          paddingBottom: noScroll ? 0 : insets.bottom,
+        },
+      ]}
+    >
+      <StatusBar
+        style={headerScrolled ? "light" : curved ? "light" : "dark"}
+        animated
+      />
+      {/* COLLAPSED HEADER */}
+      <Animated.View
+        style={[
+          tw`absolute top-0 left-0 right-0 bg-white z-10 shadow-2xl`,
+          {
+            transform: [{ translateY: scrollY }],
+            opacity,
+          },
+        ]}
+      >
+        <ImageBackground
+          style={[tw`flex-1`, {}]}
+          source={require("../assets/images/bg-header.jpg")}
+        >
+          <View
+            style={[
+              tw`flex-1 pl-3 pb-3 flex-row items-center`,
+              { paddingTop: Constants.statusBarHeight + 4 },
+            ]}
+          >
+            <EButtonIcon
+              iconColor={"white"}
+              size={20}
+              onPress={() => navigation.goBack()}
+            />
+            <View style={tw`ml-2`}>
+              <EText size="base" style={tw`font-semibold text-white mb-0.5`}>
+                {title}
+              </EText>
+              {subtitle ? (
+                <EText
+                  size="xs"
+                  style={tw`font-semibold text-white opacity-40`}
+                >
+                  {subtitle}
+                </EText>
+              ) : null}
+            </View>
+          </View>
+        </ImageBackground>
+      </Animated.View>
+
+      {noScroll ? (
+        <View style={tw`flex-1`}>
+          <PageHeader
+            title={title}
+            subtitle={subtitle}
+            curved={curved}
+            iconEnd={iconEnd}
+          >
+            {headerContent}
+          </PageHeader>
+          {children}
+        </View>
+      ) : (
+        <Animated.ScrollView
+          onScroll={(event) => {
+            const scrolling = event.nativeEvent.contentOffset.y;
+            scrolling > 60 ? setHeaderScrolled(true) : setHeaderScrolled(false);
+          }}
+          style={[
+            tw`flex-1`,
+            { minHeight: SCREEN_HEIGHT, paddingBottom: SCROLL_PADDING_BOTTOM },
+          ]}
+          scrollEventThrottle={16}
+          showsVerticalScrollIndicator={false}
+          decelerationRate={"fast"}
+          //   fadingEdgeLength={1s00}
+          // alwaysBounceVertical={false}
+          contentContainerStyle={{
+            paddingBottom: SCROLL_PADDING_BOTTOM,
+          }}
+        >
+          <PageHeader
+            menuButton={menuButton}
+            title={title}
+            subtitle={subtitle}
+            curved={curved}
+            iconEnd={iconEnd}
+            border={border}
+          >
+            {headerContent}
+          </PageHeader>
+          {children}
+        </Animated.ScrollView>
+      )}
+      {bottomButton ? (
+        <Container style={tw`flex-1 justify-end mb-4 `}>
+          {bottomButton}
+        </Container>
+      ) : (
+        <></>
+      )}
+    </View>
+  );
+}

package/components/Container.tsx

@@ -0,0 +1,12 @@
+import { View, Text } from "react-native";
+import React from "react";
+import tw from "../lib/tailwind";
+
+export default function Container(props: any) {
+  const { fullWidth, style } = props;
+  return (
+    <View style={tw.style("flex-1 px-4 ", fullWidth && "px-0 ", style)}>
+      {props.children}
+    </View>
+  );
+}

package/components/Drawer.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { ScrollView, View, TouchableOpacity } from "react-native";
+import { HomeIcon,CalendarIcon, TemplateIcon, ViewBoardsIcon } from 'react-native-heroicons/solid';
+import { StyleSheet } from 'react-native';
+import tw from "../lib/tailwind";
+import EText from "./EText";
+import Spacer from "./Spacer";
+import Avatar from "./Avatar";
+import { Colors } from "../utils/Color";
+import MenuItems from "./MenuItems";
+
+type menuItems = {
+    title: string,
+    icon: any,
+    screen: string,
+} 
+
+interface IProps{
+    name: string,
+    profile: string,
+    menuItems: menuItems[];
+    navigation: any;
+}
+
+const Drawer = ({name,profile, menuItems,navigation }: IProps) => {
+  return (
+    <ScrollView
+      scrollEnabled={true}
+      showsVerticalScrollIndicator={false}
+      style={{
+        position: 'relative',
+        backgroundColor: '#ffffff',
+      }}>
+      <View style={tw`mx-4 pt-4`}>
+        <Spacer height={30} />
+
+        <View style={tw`flex w-full mt-5`}>
+          <View style={tw`flex-row items-center`}>
+            <Avatar
+              size="sm"
+              source={""}
+              nameFirstLetter={name?.split("")[0]}
+            />
+            <View style={tw`ml-3`}>
+              <EText size={"xl"} style={tw`font-bold -mt-1`}>{name}</EText>
+              <EText size="sm" style={[tw`font-normal`, {
+                color: Colors["text-body"]
+              }]}>
+                {profile}
+              </EText>
+            </View>
+          </View>
+        </View>
+
+        <Spacer height={30} />
+        {
+          menuItems.map((item, index) => {
+            return (
+              <MenuItems
+                key={index}
+                title={item.title}
+                icon={item.icon}
+                onPress={() => navigation.navigate(item.screen)}
+              />
+            )
+          })
+        }
+        <Spacer />
+        <Spacer />
+        <MenuItems
+          title="Profile"
+          onPress={() => navigation.navigate("ProfileScreen")}
+        />
+        <MenuItems
+          title="Settings"
+        />
+        <MenuItems
+          title="Logout"
+        />
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#fff',
+    padding: 10,
+  },
+  logoStyle: {
+    height: 20,
+    width: '80%',
+    alignSelf: 'center',
+  },
+});
+
+export default Drawer;

package/components/EBadge.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { View } from 'react-native'
+import tw from '../lib/tailwind';
+import EText from './EText';
+import { CheckCircleIcon } from 'react-native-heroicons/solid';
+
+
+interface IProps {
+    text: string;
+    color?: string;
+    completed?: boolean;
+}
+
+export default function EBadge({ text, completed, color  }: IProps) {
+    return (
+        <View style={[tw`rounded-full flex-row p-1 px-2 ${completed ? 'bg-green-600' : color}`, ]}>
+            {completed ? <CheckCircleIcon style={tw`text-white -ml-1 mr-1`} size={16} /> : null}
+            <EText size='xs' style={tw`font-semibold text-white`}>
+                {text}
+            </EText>
+        </View>
+    )
+}

package/components/EButton.tsx

@@ -0,0 +1,73 @@
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from "react-native";
+import React from "react";
+import tw from "../lib/tailwind";
+import EText from "./EText";
+import { Colors } from "../utils/Color";
+
+interface EButtonProps extends TouchableOpacityProps {
+  iconL?: JSX.Element;
+  iconR?: JSX.Element;
+  secondary?: boolean;
+  inline?: boolean;
+  small?: boolean;
+  type?: "secondary" | "clear" | "primary";
+  disabled?: boolean;
+  children: any;
+}
+
+export default function EButton({
+  // label,
+  children,
+  iconL,
+  iconR,
+  secondary,
+  inline,
+  small,
+  type,
+  disabled,
+  ...props
+}: EButtonProps) {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      disabled={disabled}
+      {...props}
+      style={[tw`${inline ? "items-start" : ""}`, {}]}
+    >
+      <View
+        style={[
+          tw`h-14 flex-row justify-center items-center px-8 rounded-full ${disabled ? "opacity-60" : ""} ${
+            type === "clear"
+              ? "bg-transparent"
+              : type === "secondary"
+              ? `bg-[${Colors["secondary-base"]}] self-start px-5 h-11`
+              : `bg-[${Colors["primary-base"]}]`
+          }`,
+        ]}
+      >
+        {/* ICON LEFT */}
+        {iconL ? <View style={tw`mr-1 -ml-2`}>{iconL}</View> : null}
+        {/* LABEL */}
+        <EText
+          size={"base"}
+          style={[
+            tw`font-semibold ${
+              type === "clear" ? `text-[${Colors["primary-base"]}]` : "text-white"
+            }`,
+          ]}
+        >
+          {children } 
+        </EText>
+
+        {/* ICON RIGHT */}
+        {iconR ? <View style={tw`ml-1 -mr-2`}>{iconR}</View> : null}
+      </View>
+    </TouchableOpacity>
+  );
+}
+

package/components/EButtonIcon.tsx

@@ -0,0 +1,37 @@
+import { View, TouchableOpacity, TouchableOpacityProps } from "react-native";
+import React from "react";
+import tw from "../lib/tailwind";
+import { ArrowNarrowLeftIcon, XIcon } from "react-native-heroicons/solid";
+
+interface EButtonIconProps extends TouchableOpacityProps {
+  type?: "close";
+  backgroundColor?: string;
+  iconColor?: string | "slate-900";
+  size?: number | 20;
+  shadow?: boolean;
+}
+
+export default function EButtonIcon({
+  type,
+  backgroundColor,
+  iconColor,
+  size,
+  shadow,
+  ...props
+}: EButtonIconProps) {
+  return (
+    <TouchableOpacity {...props}>
+      <View
+        style={tw`h-9 w-9 items-center justify-center bg-${backgroundColor ? backgroundColor : ""} rounded-full ${
+          shadow ? "shadow-xl shadow-slate-400" : ""
+        }`}
+      >
+        {type === "close" ? (
+          <XIcon size={20} style={tw`text-${iconColor? iconColor: ""}`} />
+        ) : (
+          <ArrowNarrowLeftIcon size={20} style={tw`text-${iconColor? iconColor : ""}`} />
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}

package/components/EDateAndTimeCard.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { View } from "react-native";
+import { ClockIcon } from "react-native-heroicons/solid";
+import tw from "../lib/tailwind";
+import { Colors } from "../utils/Color";
+import EText from "./EText";
+
+interface IProps{
+    date: string;
+    month: string;
+    day: string;
+    time: string;
+
+}
+
+export default function EDateAndTimeCard( {date, month, day, time}: IProps) {
+  return (
+    <View
+      style={[tw`flex-row pb-4 border-b`, { borderBottomColor: Colors.border }]}
+    >
+      <View
+        style={[
+          tw`rounded-xl mb-2 px-3 py-1 items-center justify-center`,
+          { backgroundColor: Colors["primary-base"] },
+        ]}
+      >
+        <EText size="xl" style={tw`font-bold text-white -mb-1`}>
+          {date}
+        </EText>
+        <EText size="xs" style={tw`font-bold text-white`}>
+          {month}
+        </EText>
+      </View>
+      <View style={tw`ml-3`}>
+        <EText size="base" style={tw`font-bold text-black opacity-80 -mb-1`}>
+          {day}
+        </EText>
+        <View style={tw`flex-row justify-center items-center mt-2`}>
+          <ClockIcon size={14} style={tw`text-slate-400`} />
+          <EText
+            size="sm"
+            style={tw`ml-0.5 text-slate-400 font-medium`}
+          >
+            {time}
+          </EText>
+        </View>
+      </View>
+    </View>
+  );
+}

package/components/EDateInput.tsx

@@ -0,0 +1,55 @@
+import moment from 'moment'
+import React, { useState } from 'react'
+import { View, TouchableOpacity } from 'react-native'
+import { ClockIcon } from 'react-native-heroicons/solid'
+import { onChange } from 'react-native-reanimated'
+import DateTimePicker from '@react-native-community/datetimepicker';
+import tw from '../../../lib/tailwind'
+import { CalendarIcon } from 'react-native-heroicons/outline';
+import  EText  from './EText';
+import ELabel from './ELabel';
+
+interface IProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    style?: string;
+    maxDate?: Date;
+    minDate?: Date;
+}
+
+export default function EDateInput({ label, value, style, maxDate, minDate, onChange }: IProps) {
+    const [show, setShow] = useState(false);
+
+    const handleOnChange = (event: any, selectedDate: any) => {
+        const currentDate = selectedDate;
+        setShow(false);
+        onChange(currentDate)
+    }
+
+    return (
+
+        <View style={tw`flex-1 ${style ? style : ""}`}>
+            <ELabel label={label} />
+            <TouchableOpacity
+                style={tw`h-12 rounded-lg px-4 flex-row justify-between items-center border border-slate-300 lowercase my-2 bg-white`}
+                onPress={() => setShow(true)}
+            >
+                <EText size={"sm"} style={tw`font-normal`}>
+                    {
+                        value ? moment(value).format("DD/MM/YYYY") : "Select Date"
+                    }
+                </EText>
+                {show ? <DateTimePicker
+                    testID="dateTimePicker"
+                    value={value ? new Date(value) : new Date()}
+                    mode={"date"}
+                    onChange={handleOnChange}
+                    minimumDate={minDate}
+                    maximumDate={maxDate}
+                /> : <></>}
+                <CalendarIcon size={20} style={tw`text-slate-500`} />
+            </TouchableOpacity>
+        </View>
+    )
+}

package/components/EErrorText.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import tw from '../lib/tailwind';
+import EText from './EText';
+
+
+interface IProps {
+    error: string;
+}
+
+export default function EErrorText( { error }: IProps ) {
+  return (
+    <View>
+        <EText size={"xs"} style={tw`text-red-500`}>
+            {error}
+        </EText>
+    </View>
+  )
+}

package/components/EIcon.tsx

@@ -0,0 +1,28 @@
+import { View, Text, Image, ImagePropTypes, ImageProps } from "react-native";
+import React from "react";
+import tw from "../lib/tailwind";
+
+interface EIconProps extends ImageProps {
+  source: string;
+  size?: number | 24;
+  tintColor?: string | "slate-900";
+  opacity?: number;
+  style?: string,
+}
+
+export default function EIcon({
+  source,
+  size,
+  tintColor,
+  opacity,
+  style,
+}: EIconProps) {
+  return (
+    <View style={[{height: size, width: size}, style]}>
+      <Image
+        source={source}
+        style={[tw`w-full h-full tint-${tintColor ? tintColor : "slate-900"} opacity-${opacity ? opacity : "100"}`, {}]}
+      />
+    </View>
+  );
+}

package/components/EInfoBox.tsx

@@ -0,0 +1,41 @@
+import { View, Text } from "react-native";
+import React from "react";
+import tw from "../lib/tailwind";
+import EText from "./EText";
+import { Style } from "twrnc/dist/esm/types";
+
+interface InfoBoxProps {
+  title?: string;
+  icon: JSX.Element;
+  children: string;
+  color?: string;
+  style?: Style;
+  childTextColor?: string;
+}
+
+export default function InfoBox({
+  title,
+  icon,
+  color,
+  children,
+  style,
+  childTextColor,
+}: InfoBoxProps) {
+  return (
+    <View style={[tw.style("rounded-lg"), style]}>
+      <View style={tw`flex-row`}>
+        <View style={tw`w-5 h-5 mr-1`}>{icon}</View>
+        <View style={tw`flex-1`}>
+          {title ? (
+            <EText size="sm" style={tw`font-semibold mb-1 text-${color ? color : "white"}`}>
+              {title}
+            </EText>
+          ) : null}
+          <EText size="xs" style={[tw`font-medium`, {color: childTextColor}]}>
+            {children}
+          </EText>
+        </View>
+      </View>
+    </View>
+  );
+}