fln-espranza 0.0.1

package/components/PageHeader.tsx

@@ -0,0 +1,129 @@
+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`}>
+        <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={24}
+                // onPress={() => navigation.navigate("Dashboard")}
+                style={tw`text-slate-900 mt-2`}
+              />
+              :
+
+              <EButtonIcon
+                iconColor={curved ? "white" : "tint-slate-900"}
+                size={24}
+                // onPress={() => navigation.navigate("Dashboard")}
+                onPress={() => navigation.goBack()}
+              />
+            }
+          </Animated.View>
+          <View style={tw`flex-1 items-center`}>
+            <EText
+              size="base"
+              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>
+  );
+}

package/components/ProgressBar.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated,StyleSheet, View } from 'react-native';
+import tw from "../lib/tailwind";
+import { Colors } from "../utils/Color";
+
+interface IProps{
+    progress: number;
+}
+
+export default function ProgressBar( {progress}: IProps) {
+
+
+    const barWidth = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        Animated.spring(barWidth, {
+            toValue: progress,
+            bounciness: 0,
+            speed: 7,
+            useNativeDriver: false,
+        }).start();
+    }, [progress]);
+    return (
+        <View style={[tw`h-2 w-14 bg-[${Colors['primary-light']}] overflow-hidden mr-2`, {
+            borderRadius: 40,
+        }]}>
+            <Animated.View
+                style={[StyleSheet.absoluteFill, { backgroundColor: Colors['primary-base'], width: barWidth }]}
+
+            />
+        </View>
+    )
+}

package/components/SecondaryBaseLayout.tsx

@@ -0,0 +1,120 @@
+import {
+  View,
+  ImageBackground,
+  Dimensions,
+  Animated,
+  ScrollView,
+  Platform,
+} 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,
+  PageHeaderSecondary,
+} 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 | JSX.Element[];
+  iconEnd?: JSX.Element;
+  noScroll?: boolean;
+  bottomButton?: JSX.Element;
+  border?: boolean;
+  menuButton?: boolean;
+}
+
+export default function SecondaryBaseLayout({
+  title,
+  subtitle,
+  curved,
+  headerContent,
+  children,
+  noScroll,
+  iconEnd,
+  bottomButton,
+  border,
+  menuButton,
+}: BaseLayoutProps) {
+  const insets = useSafeAreaInsets();
+
+  const navigation = useNavigation();
+
+  return (
+    <View
+      style={[
+        tw`flex-1 bg-white`,
+        {
+          paddingBottom: Platform.OS === "ios" ? insets.bottom : 0,
+          paddingTop: Platform.OS === "ios" ? 20 : 0,
+        },
+      ]}
+    >
+      <StatusBar style="dark" animated />
+
+      {/* HEADER */}
+      <View
+        style={[
+          tw`absolute top-0 right-0 left-0 pt-2 z-10 w-full bg-white  ${
+            title ? "mb-1" : "pb-0"
+          }`,
+        ]}
+      >
+        {/* <PageHeaderSecondary
+          title={title}
+          subtitle={subtitle}
+          button={
+            <EButtonIcon
+              type="close"
+              iconColor="slate-800"
+              onPress={() => navigation.goBack()}
+            />
+          }
+        /> */}
+        <PageHeader
+          border={border}
+          title={title}
+          subtitle={subtitle}
+          curved={curved}
+          iconEnd={iconEnd}
+          menuButton={menuButton}
+        >
+          {headerContent}
+        </PageHeader>
+      </View>
+      <ScrollView
+        style={[
+          tw`flex-1`,
+          { paddingBottom: insets.bottom, paddingTop: !title ? 80 : 80 },
+        ]}
+        showsVerticalScrollIndicator={false}
+        decelerationRate={"fast"}
+        contentContainerStyle={{
+          paddingBottom: SCROLL_PADDING_BOTTOM,
+        }}
+      >
+        {children}
+      </ScrollView>
+      {bottomButton ? (
+        <View style={tw` px-4 mb-6 `}>{bottomButton}</View>
+      ) : (
+        <></>
+      )}
+    </View>
+  );
+}

package/components/Spacer.tsx

@@ -0,0 +1,14 @@
+import { View, Text } from "react-native";
+import React from "react";
+import tw from '../lib/tailwind'
+
+export default function Spacer(props: any) {
+  const { sm, lg, xs, md } = props;
+  return <View style={tw.style(
+    "my-4",
+    xs && "my-1",
+    sm && "my-2",
+    md && "my-3",
+    lg && "my-6"
+  )} />;
+}

package/components/Timer.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useState } from "react";
+import { TouchableOpacity } from "react-native";
+import tw from "../lib/tailwind";
+import { Colors } from "../utils/Color";
+import EText from "./EText";
+
+interface IProps {
+    time: number;
+    text: string;
+    subtext: string;
+    handleGetOTP: () => void;
+    sendOtp: boolean;
+    email: string;
+  }
+
+export default function Timer({ time, text, subtext, sendOtp, handleGetOTP,email }: IProps) {
+
+    const [timer, setTimer] = useState(time);
+    React.useEffect(() => {
+      setTimer(30);
+      return () => {
+        setTimer(0);
+      }
+    }, [sendOtp]);
+  
+    React.useEffect(() => {
+      timer > 0 &&
+        setTimeout(() => {
+          setTimer(timer - 1);
+        }, 1000);
+
+        return () => {
+          clearTimeout();
+        }
+    }, [timer]);
+
+    return(
+
+        <>
+       {timer > 0 ? <TouchableOpacity style={[tw`mt-2`, {}]}>
+            <EText size="sm" style={[tw`font-bold text-[${Colors["text-primary"]}]`, {}]}>
+            {timer > 0 && `${text}${timer >= 10 ? timer : "0" + timer}`}
+            </EText>
+        </TouchableOpacity> : 
+        <TouchableOpacity style={[tw`mt-2`, {}]} 
+            onPress={() =>  handleGetOTP()}
+        >
+            <EText size="sm" style={[tw`font-bold text-[${Colors["text-primary"]}]`, {}]}>
+            {subtext}
+            </EText>
+        </TouchableOpacity>
+        }
+        </>
+        
+    )
+}

package/components/index.tsx

@@ -0,0 +1,65 @@
+import Avatar from "./Avatar";
+import BaseLayout from "./BaseLayout";
+import Container from "./Container";
+import Drawer from "./Drawer";
+import EBadge from "./EBadge";
+import EButton from "./EButton";
+import EButtonIcon from "./EButtonIcon";
+import EDateAndTimeCard from "./EDateAndTimeCard";
+import EIcon from "./EIcon";
+import EInfoBox from "./EInfoBox";
+import EInput from "./EInput";
+import ELabel from "./ELabel";
+import EOtpInput from "./EOtpInputBox";
+import EPageDescription from "./EPageDescription";
+import EPillButton from "./EPillButton";
+import EProfile from "./EProfile";
+import ESegment from "./ESegment";
+import { ESegmentItem } from "./ESegment";
+import ETimeLineCard from "./ETimeLineCard";
+import ListFormView from "./ListFormView";
+import MenuItems from "./MenuItems";
+import SecondaryBaseLayout from "./SecondaryBaseLayout";
+import Timer from "./Timer";
+import EText from "./EText";
+import ModalLayout from "./ModalLayout";
+import PageHeader from "./PageHeader";
+import PageHeaderSecondary from "./PageHeaderSecondary";
+import Spacer from "./Spacer";
+import ProgressBar from "./ProgressBar";
+import Loader from "./Loader";
+
+export {
+  Avatar,
+  BaseLayout,
+  Container,
+  Drawer,
+  EButton,
+  EButtonIcon,
+  EIcon,
+  EInput,
+  EText,
+  ModalLayout,
+  PageHeader,
+  PageHeaderSecondary,
+  ESegment,
+  ESegmentItem,
+  Spacer,
+  EInfoBox,
+  EBadge,
+  EDateAndTimeCard,
+  ELabel,
+  EOtpInput,
+  EPageDescription,
+  ETimeLineCard,
+  ListFormView,
+  MenuItems,
+  EPillButton,
+  EProfile,
+  SecondaryBaseLayout,
+  Timer,
+  ProgressBar,
+  Loader
+  
+
+};

package/index.ts

@@ -0,0 +1,76 @@
+import Avatar from "./components/Avatar";
+import BaseLayout from "./components/BaseLayout";
+import Container from "./components/Container";
+import Drawer from "./components/Drawer";
+import EBadge from "./components/EBadge";
+import EButton from "./components/EButton";
+import EButtonIcon from "./components/EButtonIcon";
+import EDateAndTimeCard from "./components/EDateAndTimeCard";
+import EIcon from "./components/EIcon";
+import EInfoBox from "./components/EInfoBox";
+import EInput from "./components/EInput";
+import ELabel from "./components/ELabel";
+import EOtpInput from "./components/EOtpInputBox";
+import EPageDescription from "./components/EPageDescription";
+import EPillButton from "./components/EPillButton";
+import EProfile from "./components/EProfile";
+import ESegment from "./components/ESegment";
+import { ESegmentItem } from "./components/ESegment";
+import ETimeLineCard from "./components/ETimeLineCard";
+import ListFormView from "./components/ListFormView";
+import MenuItems from "./components/MenuItems";
+import SecondaryBaseLayout from "./components/SecondaryBaseLayout";
+import Timer from "./components/Timer";
+import EText from "./components/EText";
+import ModalLayout from "./components/ModalLayout";
+import PageHeader from "./components/PageHeader";
+import PageHeaderSecondary from "./components/PageHeaderSecondary";
+import Spacer from "./components/Spacer";
+import { Colors } from "./utils/Color";
+import ProgressBar from "./components/ProgressBar";
+import Loader from "./components/Loader";
+import ETimeInput from "./components/ETimeInput";
+import EDateInput from "./components/EDateInput";
+import EErrorText from "./components/EErrorText";
+import EListPerson from "./components/EListPerson";
+import EListSchool from "./components/EListSchool";
+
+export {
+  Avatar,
+  BaseLayout,
+  Container,
+  Drawer,
+  EButton,
+  EButtonIcon,
+  EIcon,
+  EInput,
+  EText,
+  ModalLayout,
+  PageHeader,
+  PageHeaderSecondary,
+  ESegment,
+  ESegmentItem,
+  Spacer,
+  EInfoBox,
+  EBadge,
+  EDateAndTimeCard,
+  ELabel,
+  EOtpInput,
+  EPageDescription,
+  ETimeLineCard,
+  ListFormView,
+  MenuItems,
+  EPillButton,
+  EProfile,
+  SecondaryBaseLayout,
+  Timer,
+  ProgressBar,
+  Loader,
+  ETimeInput,
+  EDateInput,
+  EErrorText,
+  Colors,
+  EListPerson,
+  EListSchool
+
+};

package/lib/tailwind.js

@@ -0,0 +1,8 @@
+// lib/tailwind.js
+import { create } from 'twrnc';
+
+// create the customized version...
+const tw = create(require(`../tailwind.config.js`)); // <- your path may differ
+
+// ... and then this becomes the main function your app uses
+export default tw;

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "fln-espranza",
+  "version": "0.0.1",
+  "description": "All components used inside FLN Project of Espranza Innovations",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "expo": "~45.0.0",
+    "expo-status-bar": "~1.3.0",
+    "react": "17.0.2",
+    "react-native": "0.68.2",
+    "react-native-safe-area-context": "4.2.4",
+    "twrnc": "^3.3.2",
+    "@react-navigation/drawer": "^6.5.0",
+    "@react-navigation/native": "^6.0.10",
+    "@react-navigation/native-stack": "^6.6.2",
+    "react-native-heroicons": "^2.2.0",
+    "moment": "^2.29.4",
+    "@react-native-community/datetimepicker": "6.1.2",
+    "react-native-reanimated": "~2.8.0"
+  }
+}

package/tailwind.config.js

@@ -0,0 +1,33 @@
+// tailwind.config.js
+const {
+  plugin
+} = require('twrnc');
+
+// or, you can use tailwinds plugin function:
+// const plugin = require('tailwindcss/plugin');
+
+module.exports = {
+  plugins: [
+    plugin(({
+      addUtilities
+    }) => {
+      addUtilities({
+        'list-title': 'font-bold',
+        'list-body': 'opacity-60',
+        'list-date': 'opacity-30'
+      })
+    })
+  ],
+  theme: {
+    fontFamily: {},
+    extend: {
+      spacing: {
+        '8xl': '96rem',
+        '9xl': '128rem',
+      },
+      borderRadius: {
+        '4xl': '2rem',
+      }
+    }
+  },
+}

package/utils/Color.ts

@@ -0,0 +1,15 @@
+export const Colors = {
+    "primary-base": '#218C74',
+    "primary-light": '#F4F9F8',
+    "secondary-base": '#3F3D84',
+    "secondary-light": '#F5F5F9',
+    "blue": '#0993BF',
+    "border": '#E0E6EC',
+    "warning": '#FFCB66',
+    "success": '#00BE9B',
+    "text-primary": '#2D3A5D',
+    "text-body": '#64748B',
+    "text-placeholder": '#CBD5E1',
+    "text-secondary": "#585F68",
+    "white": '#FFFFFF',
+  };