fln-espranza 0.0.1 → 0.0.2

package/components/ETimeLineCard.tsx

@@ -1,68 +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="lg" style={[tw`font-bold`, { color: Colors['text-primary'] }]}>
-            {title}
-          </EText>
-          <EText size='sm' 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={16} />
-        </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>
-  )
-}
+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="lg" style={[tw`font-bold`, { color: Colors['text-primary'] }]}>
+            {title}
+          </EText>
+          <EText size='sm' 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={16} />
+        </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

@@ -1,37 +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>
-    );
+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/Loader.tsx

@@ -1,31 +1,31 @@
-import { SCREEN_WIDTH, SCREEN_HEIGHT } from '@gorhom/bottom-sheet'
-// import { Colors, EText } from 'fln-espranza'
-import EText from './EText';
-import React from 'react'
-import { View, ActivityIndicator } from 'react-native'
-import tw from '../lib/tailwind';
-import { Colors } from '../utils/Color';
-
-interface IProps{
-    show: boolean
-}
-
-export default function Loader({show}: IProps) {
-    return (
-        <>
-            {show ? <View style={[tw`absolute justify-center items-center z-10 bg-slate-100  `, {
-                opacity: 0.9,
-                width: SCREEN_WIDTH,
-                height: SCREEN_HEIGHT,
-            }]}>
-                <View style={[tw`h-24 w-32 bg-white px-2 py-3 justify-center items-center rounded-xl`]}>
-                    <ActivityIndicator size="large" color={Colors['primary-base']} />
-                    <EText size="base" style={tw`text-black`}>Loading...</EText>
-                </View>
-            </View>
-                :
-                <></>
-            }
-        </>
-    )
-}
+import { SCREEN_WIDTH, SCREEN_HEIGHT } from '@gorhom/bottom-sheet'
+// import { Colors, EText } from 'fln-espranza'
+import EText from './EText';
+import React from 'react'
+import { View, ActivityIndicator } from 'react-native'
+import tw from '../lib/tailwind';
+import { Colors } from '../utils/Color';
+
+interface IProps{
+    show: boolean
+}
+
+export default function Loader({show}: IProps) {
+    return (
+        <>
+            {show ? <View style={[tw`absolute justify-center items-center z-10 bg-slate-100  `, {
+                opacity: 0.9,
+                width: SCREEN_WIDTH,
+                height: SCREEN_HEIGHT,
+            }]}>
+                <View style={[tw`h-24 w-32 bg-white px-2 py-3 justify-center items-center rounded-xl`]}>
+                    <ActivityIndicator size="large" color={Colors['primary-base']} />
+                    <EText size="base" style={tw`text-black`}>Loading...</EText>
+                </View>
+            </View>
+                :
+                <></>
+            }
+        </>
+    )
+}

package/components/MenuItems.tsx

@@ -1,46 +1,46 @@
-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="base"
-          style={[
-            tw`font-medium `,
-            {
-              color: Colors["text-primary"],
-            },
-          ]}
-        >
-          {title ? title : "Dashboard"}
-        </EText>
-      </View>
-    </TouchableOpacity>
-  );
-}
+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="base"
+          style={[
+            tw`font-medium `,
+            {
+              color: Colors["text-primary"],
+            },
+          ]}
+        >
+          {title ? title : "Dashboard"}
+        </EText>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/components/PageHeader.tsx

@@ -1,129 +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>
-  );
-}
+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>
+  );
+}