fln-espranza 1.0.0

package/components/EOtpInputBox.tsx

@@ -0,0 +1,49 @@
+import { View, Image, TextInput, TextInputProps } from "react-native";
+import React, { useState } from "react";
+import EText from "./EText";
+import tw from "../lib/tailwind";
+import { AtSymbolIcon } from "react-native-heroicons/outline";
+import { Colors } from "../utils/Color";
+
+interface EInputProps extends TextInputProps {
+  label?: string;
+  icon?:string;
+  val?: string;
+  setVal?: any;
+  maxLength?: number;
+  reff?: any;
+}
+
+export default function EOtpInput({label, icon,val,setVal, maxLength, reff, ...props }:EInputProps) {
+  const [hasFocus, setHasFocus] = useState(false);
+  return (
+    <View>
+      <EText size="sm" style={tw`font-bold opacity-50`}>
+        {label}
+      </EText>
+      <View
+        style={tw`bg-[${Colors["primary-light"]}] h-12 rounded-lg px-4 flex-row items-center border border-blue-100 ${
+          hasFocus ? `border-black bg-white shadow-lg shadow-blue-400` : ""
+        }`}
+      >
+        {icon ? <Image
+          source={icon}
+          style={[
+            tw`mr-2 opacity-40 ${hasFocus ? "opacity-100 tint-blue-700" : ""}`,
+            { width: 24, height: 24 },
+          ]}
+        /> : null}
+        <TextInput
+          {...props}
+          style={[tw`flex-1 text-base`, { lineHeight: 20 }]}
+          onFocus={() => setHasFocus(!hasFocus)}
+          onBlur={() => setHasFocus(!hasFocus)}
+          placeholderTextColor={"#AEB3BC"}
+          onChangeText={(val) => setVal(val)}
+          maxLength={maxLength} 
+          ref={reff}
+        />
+      </View>
+    </View>
+  );
+}

package/components/EPageDescription.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import tw from '../lib/tailwind'
+import { Colors } from '../utils/Color';
+import EText from './EText';
+
+interface IProps{
+    text: string;
+}
+
+export default function EPageDescription({text}: IProps) {
+  return (
+    <EText
+        size='sm'
+        style={[tw`font-normal`, {color: Colors['text-body']}]}
+    >
+        {text}
+    </EText>
+  )
+}

package/components/EPillButton.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { TouchableOpacity, View } from 'react-native'
+import tw from '../lib/tailwind'
+import { Colors } from '../utils/Color';
+import EText from './EText';
+
+interface IProps {
+    title: string;
+    active?: boolean;
+}
+
+export default function EPillButton( { title, active }: IProps) {
+  return (
+    // <TouchableOpacity style={tw`px-4 py-3 mr-3 border rounded-lg border-slate-300 
+    // ${active ? "bg-purple-900 border-purple-900" : "border-slate-300"}`}>
+      <TouchableOpacity style={[tw`px-4 py-3 mr-2 border rounded-lg border-slate-300`, {
+        backgroundColor: active ? Colors['secondary-base'] : "transparent",
+        borderColor: active ? Colors['secondary-base'] : Colors['border'],
+      }]}>
+        <EText size={"sm"} style={tw`font-normal ${active ? "text-white" : "text-slate-500"}`}>
+       {title}
+        </EText>
+    </TouchableOpacity>
+  )
+}

package/components/EProfile.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View } from 'react-native';
+import tw from '../lib/tailwind';
+import { Colors } from '../utils/Color';
+import Avatar from './Avatar';
+import EText from './EText';
+
+interface IProps {
+  name: string;
+  subjectName: string;
+  border?: boolean;
+  children?: JSX.Element;
+  titleSize: string;
+  subTitleSize: string;
+
+}
+
+export default function EProfile({ name, subjectName, border, children, titleSize, subTitleSize }: IProps) {
+  return (
+    <View style={[tw`flex-row items-center justify-between py-3 ${border ? "border-b" : ""}`, {borderBottomColor: Colors.border}]}>
+      <View style={tw`flex-row items-center`}>
+        <Avatar
+          size="sm"
+          source={""}
+          nameFirstLetter={"J"}
+          bg={"sky-400"}
+        />
+        <View style={tw`ml-3`}>
+          <EText style={[tw`${titleSize}`, { color: Colors['text-primary'] }]}>{name}</EText>
+          <EText style={[tw`mt-1 ${subTitleSize}`, { color: Colors['text-body'] }]}>
+            {subjectName}
+          </EText>
+        </View>
+      </View>
+      {
+        children ? <>
+          {children}
+        </> : null
+      }
+
+    </View>
+  )
+}

package/components/ESegment.tsx

@@ -0,0 +1,35 @@
+import { View, Text, Pressable, TouchableOpacity } from "react-native";
+import React from "react";
+import tw from '../lib/tailwind'
+import EText from "./EText";
+import { Colors } from "../utils/Color";
+
+export function ESegmentItem(props: any) {
+  const { onPress, label, isActive } = props;
+  return (
+    <TouchableOpacity
+      style={tw.style(
+        "py-1.5 px-4 rounded items-center w-1/2",
+        isActive && "bg-white shadow-lg shadow-slate-500 "
+      )}
+    >
+      <View style={tw`items-center`}>
+      <EText size="xs" style={tw`font-bold ${!isActive ? "text-white": ""}`}>{label}</EText>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+export default function ESegment(props: any) {
+  return (
+    <View style={tw`justify-center items-center`}>
+      <View
+        style={[tw`flex-row rounded-md p-0.5 border border-slate-100 w-full`, {
+          backgroundColor: Colors["text-body"],
+        }]}
+      >
+        {props.children}
+      </View>
+    </View>
+  );
+}

package/components/EText.tsx

@@ -0,0 +1,41 @@
+import { Text, TextProps } from "react-native";
+import React from "react";
+import tw from "../lib/tailwind";
+
+interface ETextProps extends TextProps {
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "title";
+  muted?: boolean;
+  style?: any;
+  children: any;
+}
+
+export default function EText({
+  size,
+  muted,
+  style, 
+  children,
+  ...props
+}: ETextProps) {
+  return (
+    <Text
+      {...props}
+      style={[
+        tw.style(
+          "text-base leading-6",
+          size === "xs" && "text-xs",
+          size === "sm" && "text-sm",
+          size === "base" && "text-base",
+          size == "lg" && "font-semibold text-lg",
+          size === "xl" && "font-bold text-xl",
+          size === "2xl" && "font-bold text-2xl",
+          size === "3xl" && "font-bold text-3xl",
+          size === "title" && "font-extrabold text-title text-2xl",
+          muted && "opacity-40"
+        ),
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}

package/components/ETimeLineCard.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { Dimensions, TouchableOpacity, View } from 'react-native'
+import { ChevronRightIcon } from 'react-native-heroicons/solid';
+import tw from '../lib/tailwind'
+import { Colors } from '../utils/Color';
+import EBadge from './EBadge'
+import EButton from './EButton';
+import EDateAndTimeCard from './EDateAndTimeCard'
+import EText from './EText'
+
+interface IProps {
+  title: string;
+  description: string;
+  completed: boolean;
+  skipButton?: boolean;
+  onPress?: () => void;
+}
+
+export default function ETimeLineCard({ title, description, completed, skipButton, onPress }: IProps) {
+  return (
+    <TouchableOpacity
+      onPress={() =>  onPress && onPress()}
+      style={[
+        tw` rounded-lg p-4 mb-3 w-full border border}`,
+        {
+          backgroundColor: completed ? Colors['primary-light']  : Colors['white'],
+          borderColor: completed ? Colors['primary-base'] : Colors['border'],
+        }
+      ]}
+    >
+
+      <View style={tw`flex-row justify-between `}>
+        <View style={tw`flex-1`}>
+          <EText size="base" style={[tw`font-bold`, { color: Colors['text-primary'] }]}>
+            {title}
+          </EText>
+          <EText size='xs' muted style={[tw`font-normal mt-1`, {color: Colors['text-body']}]}>
+            {description}
+          </EText>
+        </View>
+        <View style={tw`ml-4`}>
+          <ChevronRightIcon style={[tw``,{ color: Colors['text-body']}]} size={20} />
+        </View>
+      </View>
+
+      <View style={tw`mt-6 flex-row items-center justify-between`}>
+        <EBadge
+          completed={completed}
+          text={completed ? "Complete" : "Pending"}
+          color={completed ? Colors['primary-base'] : Colors.warning}
+          textColor={completed ? "text-white" : ""}
+          size="xs"
+          padding='py-1 px-3'
+          fontWeight='font-bold'
+        />
+
+        {
+          skipButton ? (
+            <TouchableOpacity>
+              <EText size="sm" style={[tw`ml-2 font-semibold`, {color: Colors['primary-base']}]}>
+                Skip
+              </EText>
+            </TouchableOpacity>) : null
+        }
+      </View>
+    </TouchableOpacity>
+  )
+}

package/components/ListFormView.tsx

@@ -0,0 +1,37 @@
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    Image,
+    TouchableOpacityProps,
+  } from "react-native";
+  import React from "react";
+  import tw from "../lib/tailwind";
+  import EText from "./EText";
+import { Colors } from "../utils/Color";
+//   import { Tag } from "..";
+  
+  interface ListFormViewProps {
+    label: string;
+    description: string;
+  }
+  
+  export default function ListFormView({
+    label,
+    description,
+  }: ListFormViewProps) {
+    return (
+      <View style={tw`flex-row items-center justify-between py-3 border-b border-[${Colors.border}]`}>
+        <View style={tw``}>
+          <EText size="sm" style={tw`font-normal text-[${Colors["text-secondary"]}]`}>
+            {label}
+          </EText>
+        </View>
+        <View style={tw`flex-1 ml-4 items-end`}>
+          <EText size="sm" style={tw`font-normal text-[${Colors["text-primary"]}]`}>
+            {description}
+          </EText>
+        </View>
+      </View>
+    );
+  }

package/components/MenuItems.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { TouchableOpacity, View } from 'react-native'
+import { HomeIcon } from 'react-native-heroicons/solid'
+import tw from '../lib/tailwind'
+import { Colors } from '../utils/Color'
+import EText from './EText'
+
+interface IProps {
+    title?: string
+    icon?: JSX.Element
+    onPress?: () => void
+}
+
+export default function MenuItems( { title, icon, onPress }: IProps ) {
+    return (
+        <TouchableOpacity style={tw`flex-row items-center` } onPress={onPress}>
+            {/* <HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} /> */}
+            {
+                icon ? 
+                icon
+                :
+                <HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} /> 
+            }
+            <View style={[tw`py-4 ml-4 mr-8 w-[80%]`, {
+                borderBottomWidth: 1,
+                borderBottomColor: Colors.border,
+            }]}>
+                <EText size="sm" style={[tw`font-medium `, {
+                    color: Colors["text-primary"]
+                }]}>
+                    {/* {"Dashboard"} */}
+                    {
+                        title ?
+                        title
+                        :
+                        "Dashboard"
+                    }
+                    </EText>
+            </View>
+        </TouchableOpacity>
+    )
+}

package/components/ModalLayout.tsx

@@ -0,0 +1,81 @@
+import {
+  View,
+  Dimensions,
+  ScrollView,
+  Platform,
+} from "react-native";
+import React, { } from "react";
+import Constants from "expo-constants";
+import tw from "../lib/tailwind";
+import EButtonIcon from "./EButtonIcon";
+import { StatusBar } from "expo-status-bar";
+import PageHeaderSecondary from "./PageHeaderSecondary";
+import { useNavigation } from "@react-navigation/native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Container } from ".";
+
+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 ModalLayoutProps {
+  title: string;
+  subtitle?: string;
+  children?: JSX.Element;
+  bottomButton?: JSX.Element;
+}
+
+export default function ModalLayout({
+  title,
+  subtitle,
+  children,
+  bottomButton,
+}: ModalLayoutProps) {
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+  return (
+    <View style={[tw`flex-1 bg-white`, {}]}>
+      <StatusBar
+        style={Platform.OS === "android" ? "dark" : "light"}
+        animated
+      />
+
+      {/* HEADER */}
+      <View
+        style={[
+          tw`absolute top-0 right-0 left-0 px-6 pr-3 pt-2 z-10 w-full bg-white  ${title ? 'pb-1' : 'pb-0'}`,
+          // {height: 64},
+        ]}
+      >
+        <PageHeaderSecondary
+          title={title}
+          subtitle={subtitle}
+          button={
+            <EButtonIcon
+              type="close"
+              iconColor="slate-800"
+              onPress={() => navigation.goBack()}
+            />
+          }
+        />
+      </View>
+      <ScrollView
+        style={[
+          tw`flex-1`,
+          { paddingBottom: insets.bottom, paddingTop: title ? 80 : 56 },
+        ]}
+        showsVerticalScrollIndicator={false}
+        decelerationRate={"fast"}
+        contentContainerStyle={{
+          paddingBottom: SCROLL_PADDING_BOTTOM,
+        }}
+      >
+        {children}
+      </ScrollView>
+      {bottomButton ? <View style={tw` px-6 mb-4 `}>
+        {bottomButton}
+      </View> : <></>}
+    </View>
+  );
+}

package/components/PageHeader.tsx

@@ -0,0 +1,139 @@
+import { View, Animated, Dimensions, Image } from "react-native";
+import React, { useEffect, useRef } from "react";
+import tw from "../lib/tailwind";
+import { useNavigation } from "@react-navigation/native";
+import EButtonIcon from "./EButtonIcon";
+import EText from "./EText";
+import Constants from "expo-constants";
+import { MenuIcon } from "react-native-heroicons/outline";
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const HEADER_HEIGHT = 90;
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  curved?: boolean;
+  children?: JSX.Element;
+  iconEnd?: JSX.Element;
+  border?: boolean;
+  menuButton?: boolean;
+}
+
+export default function PageHeader({
+  title,
+  subtitle,
+  curved,
+  children,
+  iconEnd,
+  border,
+  menuButton,
+}: PageHeaderProps) {
+  const navigation = useNavigation();
+
+  const translateX = useRef(new Animated.Value(60)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.spring(translateX, {
+      toValue: 0,
+      stiffness: 40,
+      damping: 10,
+      useNativeDriver: true,
+    }).start();
+    Animated.spring(opacity, {
+      toValue: 1,
+      delay: 250,
+      useNativeDriver: true,
+    }).start();
+  });
+  return (
+    <View style={[tw`${curved ? "-mb-2" : ""} ${border ? "border-b border-slate-300" : ""} `, {}]}>
+      <View style={tw`overflow-hidden`}>
+        {curved ? (
+          <Image
+            resizeMode="cover"
+            // source={require("../assets/images/bg-header.jpg")}
+            style={[
+              tw`absolute w-full h-full`,
+              { width: SCREEN_WIDTH, borderBottomRightRadius: 32 },
+            ]}
+          />
+        ) : null}
+        <Animated.View
+          style={[
+            tw`flex-row pr-4 pl-3 pb-3`,
+            {
+              paddingTop: Constants.statusBarHeight + 8,
+              transform: [{ translateX }],
+              opacity,
+            },
+          ]}
+        >
+          <Animated.View
+            style={[tw`-mt-2 left-3 absolute `, { transform: [{ translateX }], opacity, paddingTop: Constants.statusBarHeight + 8 }]}
+          >
+            {menuButton ?
+              <MenuIcon
+                onPress={() => navigation?.openDrawer()}
+                size={20}
+                // onPress={() => navigation.navigate("Dashboard")}
+                style={tw`text-slate-900 mt-2`}
+              />
+              :
+
+              <EButtonIcon
+                iconColor={curved ? "white" : "tint-slate-900"}
+                size={20}
+                // onPress={() => navigation.navigate("Dashboard")}
+                onPress={() => navigation.goBack()}
+              />
+            }
+          </Animated.View>
+          <View style={tw`flex-1 items-center`}>
+            <EText
+              size="sm"
+              style={tw.style("text-black font-semibold ", curved && "text-white ")}
+            >
+              {title}
+            </EText>
+            {subtitle ? (
+              <EText
+                style={tw.style(
+                  "text-slate-800 opacity-40 font-semibold mt-0.25",
+                  curved && "text-white "
+                )}
+              >
+                {subtitle}
+              </EText>
+            ) : null}
+          </View>
+
+          {iconEnd ? (
+            <View style={[tw`mt-0.5 items-center justify-center`, {}]}>
+              {iconEnd}
+            </View>
+          ) : null}
+        </Animated.View>
+        {children ? <View style={tw.style("pb-6")}>{children}</View> : null}
+      </View>
+
+      {/* MASK */}
+      {curved ? (
+        <View
+          style={[
+            tw``,
+            { height: 32, width: SCREEN_WIDTH, backgroundColor: "#0547FA" },
+          ]}
+        >
+          <View
+            style={[
+              tw`bg-white -z-0`,
+              { height: 64, width: SCREEN_WIDTH, borderTopLeftRadius: 32 },
+            ]}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/components/PageHeaderSecondary.tsx

@@ -0,0 +1,44 @@
+import { View, Text, Platform } from "react-native";
+import React from "react";
+import tw from "../lib/tailwind";
+import EText from "./EText";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+interface PageHeaderSecondaryProps {
+  title?: string;
+  subtitle?: string;
+  button?: JSX.Element;
+}
+export default function PageHeaderSecondary({
+  title,
+  subtitle,
+  button,
+}: PageHeaderSecondaryProps) {
+  const insets = useSafeAreaInsets();
+  return (
+    <View
+      style={[
+        tw`flex-row justify-between items-center bg-white`,
+        {
+          paddingTop: Platform.OS === "android" ? insets.top + 8 : 8,
+        },
+      ]}
+    >
+      <View style={tw` flex-1 justify-center items-center`}>
+        {title ? (
+          <EText size="base" style={tw`font-semibold`}>
+            {title}
+          </EText>
+        ) : null}
+        {subtitle ? (
+          <EText muted style={tw`mt-0.25 font-semibold`}>
+            {subtitle}
+          </EText>
+        ) : null}
+      </View>
+      <View style={[tw`absolute right-3`, {
+        paddingTop: Platform.OS === "android" ? insets.top + 8 : 8,
+      }]}>{button}</View>
+    </View>
+  );
+}