fln-espranza 1.0.0

package/Readme.md

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

package/components/Avatar.tsx

@@ -0,0 +1,31 @@
+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;
+  bg?: string;
+  textColor?: string;
+}
+
+export default function Avatar({ size, source, nameFirstLetter, bg, textColor }: AvatarProps) {
+  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 ? `bg-${bg}` : "bg-gray-200"
+      )}
+    >
+      {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,93 @@
+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";
+
+const Drawer = ({ navigation }: any) => {
+  return (
+    <ScrollView
+      scrollEnabled={true}
+      showsVerticalScrollIndicator={false}
+      style={{
+        position: 'relative',
+        backgroundColor: '#fff',
+      }}>
+      <View style={tw`mx-4`}>
+        <Spacer height={30} />
+
+        <View style={tw`flex w-full mt-5`}>
+          <View style={tw`flex-row items-center`}>
+            <Avatar
+              size="sm"
+              source={""}
+              nameFirstLetter={"J"}
+              bg={"sky-400"}
+            />
+            <View style={tw`ml-3`}>
+              <EText size={"xl"} style={tw`font-bold -mt-1`}>{"Anita Kumar"}</EText>
+              <EText size="sm" style={[tw`font-normal`, {
+                color: Colors["text-body"]
+              }]}>
+                {"Mentor"}
+              </EText>
+            </View>
+          </View>
+        </View>
+
+        <Spacer height={30} />
+        <MenuItems
+          title={"Dashboard"}
+          icon={<HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />}
+        />
+        <MenuItems
+          title={"School Visit"}
+          icon={<CalendarIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />}
+        />
+        <MenuItems
+          title={"Review Meeting"}
+          icon={<TemplateIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />}
+        />
+        <MenuItems
+          title={"Mentoring Resources"}
+          icon={<ViewBoardsIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />}
+        />
+        <MenuItems
+          title={"Cluster Performance"}
+          icon={<TemplateIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />}
+        />
+        <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,27 @@
+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;
+    completed?: boolean;
+    color?: string;
+    textColor?: string;
+    size: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "title";
+    fontWeight: string;
+    padding: string;
+}
+
+export default function EBadge({ text, completed, color, textColor, size, fontWeight, padding }: IProps) {
+    return (
+        <View style={[tw` rounded-full flex-row ${padding}`, {backgroundColor: color}]}>
+            {completed ? <CheckCircleIcon style={tw`text-white mr-1`} size={16} /> : null}
+            <EText size={size} style={tw`${fontWeight} ${textColor ? textColor : ""}`}>
+                {text}
+            </EText>
+        </View>
+    )
+}

package/components/EButton.tsx

@@ -0,0 +1,81 @@
+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";
+}
+
+export default function EButton({
+  // label,
+  children,
+  iconL,
+  iconR,
+  secondary,
+  inline,
+  small,
+  type,
+  ...props
+}: EButtonProps) {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      {...props}
+      style={[tw`${inline ? "items-start" : ""}`, {}]}
+    >
+      <View
+        style={[
+          tw`h-14 flex-row justify-center items-center px-8 rounded-full ${
+            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={small ? "sm" : ""}
+          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>
+  );
+}
+
+// style={[
+//   tw` ${
+//     withoutbackground ? "" : " shadow-md shadow-green-500 rounded-full"
+//   } flex items-center justify-center ${
+//     small ? "h-12 px-4" : "h-14 px-6 "
+//   } ${secondary ? "bg-purple-500 shadow-none" : ""}`,
+//   {
+//     backgroundColor: withoutbackground
+//       ? "transparent"
+//       : Colors["primary-base"],
+//   },
+// ]}

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} rounded-full ${
+          shadow ? "shadow-xl shadow-slate-400" : ""
+        }`}
+      >
+        {type === "close" ? (
+          <XIcon size={20} style={tw`text-${iconColor}`} />
+        ) : (
+          <ArrowNarrowLeftIcon size={20} style={tw`text-${iconColor}`} />
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}

package/components/EDateAndTimeCard.tsx

@@ -0,0 +1,43 @@
+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";
+
+export default function EDateAndTimeCard() {
+  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`}>
+          {"12"}
+        </EText>
+        <EText size="xs" style={tw`font-bold text-white`}>
+          {"DEC"}
+        </EText>
+      </View>
+      <View style={tw`ml-3`}>
+        <EText size="base" style={tw`font-bold text-black opacity-80 -mb-1`}>
+          {"Wednesday"}
+        </EText>
+        <View style={tw`flex-row justify-center items-center mt-2`}>
+          <ClockIcon size={16} style={tw`text-slate-400`} />
+          <EText
+            size="sm"
+            style={tw`ml-1 text-slate-400 font-medium`}
+            numberOfLines={2}
+          >
+            {"9:00am - 10:00am"}
+          </EText>
+        </View>
+      </View>
+    </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} opacity-${opacity}`, {}]}
+      />
+    </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>
+  );
+}

package/components/EInput.tsx

@@ -0,0 +1,55 @@
+import { View, Text, TextInput, TextInputProps } from "react-native";
+import React, { useState } from "react";
+import tw from "../lib/tailwind";
+import EText from "./EText";
+import { SearchIcon } from "react-native-heroicons/solid";
+import { Colors } from "../utils/Color";
+
+interface EInputProps extends TextInputProps {
+  label?: string;
+  size?: "lg";
+  hasBackground?: boolean;
+  icon?: JSX.Element;
+}
+
+export default function EInput({
+  label,
+  size,
+  style,
+  hasBackground,
+  icon,
+  ...props
+}: EInputProps) {
+  const [hasFocus, setHasFocus] = useState(false);
+  return (
+    <View style={[tw`mb-4`, {}]}>
+      {label ? (
+        <EText size="xs" style={[tw`font-semibold`, {
+          color: Colors["text-primary"]
+        }]}>
+          {label}
+        </EText>
+      ) : null}
+
+      <View
+        style={tw`h-12 rounded-lg px-4 flex-row items-center border border-slate-300 lowercase mt-2 ${
+          hasFocus ? "border-black" : ""
+        }`}
+      >
+        <TextInput
+          style={[tw`text-sm font-normal text-slate-500 h-full w-full `, {
+            color: Colors["text-placeholder"]
+          }]}
+          {...props}
+          onFocus={() => setHasFocus(!hasFocus)}
+          onBlur={() => setHasFocus(!hasFocus)}
+        />
+        {
+          icon ?
+            <>{icon}</>
+            : null
+        }
+      </View>
+    </View>
+  );
+}

package/components/ELabel.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import tw from '../lib/tailwind'
+import EText from './EText';
+
+interface IProps{
+    label: string;
+}
+
+export default function ELabel( {label }: IProps ) {
+  return (
+    <EText style={tw`text-sm font-semibold text-slate-500`}>
+        {label}
+    </EText>
+  )
+}