fln-espranza 1.0.0

package/components/SecondaryBaseLayout.tsx

@@ -0,0 +1,101 @@
+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;
+  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`, {}]}>
+      <StatusBar
+        style={Platform.OS === "android" ? "dark" : "light"}
+        animated
+      />
+
+      {/* HEADER */}
+      <View
+        style={[
+          tw`absolute top-0 right-0 left-0 pr-3 pt-2 z-10 w-full bg-white  ${title ? 'mb-1' : 'pb-0'}`,
+          // {height: 64},
+        ]}
+      >
+        {/* <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-4 `}>
+        {bottomButton}
+      </View> : <></>}
+    </View>
+  );
+}

package/components/Spacer.tsx

@@ -0,0 +1,13 @@
+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 } = props;
+  return <View style={tw.style(
+    "my-4",
+    xs && "my-1",
+    sm && "my-2",
+    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,61 @@
+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";
+
+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
+  
+
+};

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,23 @@
+{
+  "name": "fln-espranza",
+  "version": "1.0.0",
+  "description": "All components used inside FLN Project of Espranza Innovations",
+  "main": "index.js",
+  "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"
+  }
+}

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',
+  };