fln-espranza 0.0.1 → 0.0.2

package/components/EListPerson.tsx

@@ -1,40 +1,40 @@
-import React from "react";
-import { View } from "react-native";
-import tw from "../lib/tailwind";
-import Avatar from "./Avatar";
-import EText from "./EText";
-
-interface IProps {
-  name: string;
-  subtitle?: string;
-  noBorder?: boolean;
-  firstLetter?: string;
-}
-
-export default function EListPerson({
-  name,
-  subtitle,
-  noBorder,
-  firstLetter,
-}: IProps) {
-  return (
-    <View style={[tw`flex-row items-center justify-between`]}>
-      <Avatar size="sm" source={""} nameFirstLetter={firstLetter} />
-      <View
-        style={tw` ml-3 py-3 flex-1 ${
-          noBorder ? "" : "border-b border-slate-200"
-        }`}
-      >
-        <EText style={tw`font-bold text-slate-800 mb-0.5`} numberOfLines={1}>
-          {name}
-        </EText>
-
-        {subtitle ? (
-          <EText size="sm" style={tw`text-slate-500`}>
-            {subtitle}
-          </EText>
-        ) : null}
-      </View>
-    </View>
-  );
-}
+import React from "react";
+import { View } from "react-native";
+import tw from "../lib/tailwind";
+import Avatar from "./Avatar";
+import EText from "./EText";
+
+interface IProps {
+  name: string;
+  subtitle?: string;
+  noBorder?: boolean;
+  firstLetter?: string;
+}
+
+export default function EListPerson({
+  name,
+  subtitle,
+  noBorder,
+  firstLetter,
+}: IProps) {
+  return (
+    <View style={[tw`flex-row items-center justify-between`]}>
+      <Avatar size="sm" source={""} nameFirstLetter={firstLetter} />
+      <View
+        style={tw` ml-3 py-3 flex-1 ${
+          noBorder ? "" : "border-b border-slate-200"
+        }`}
+      >
+        <EText style={tw`font-bold text-slate-800 mb-0.5`} numberOfLines={1}>
+          {name}
+        </EText>
+
+        {subtitle ? (
+          <EText size="sm" style={tw`text-slate-500`}>
+            {subtitle}
+          </EText>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/components/EListSchool.tsx

@@ -1,35 +1,35 @@
-import React from "react";
-import { View } from "react-native";
-import tw from "../lib/tailwind";
-import EText from "./EText";
-
-interface IProps {
-  name: string;
-  code?: string;
-  district?: string;
-  noBorder?: boolean;
-}
-
-export default function EListSchool({
-  name,
-  code,
-  district,
-  noBorder,
-}: IProps) {
-  return (
-    <View style={tw`border-b border-slate-200 py-3`}>
-      <EText style={tw`font-bold text-slate-800 mb-0.5`} numberOfLines={1}>
-        {name}
-      </EText>
-      <View style={tw`flex-row items-center`}>
-        <EText size="sm" style={tw`text-slate-500`}>
-          {code}
-        </EText>
-        {district ? <><View style={tw`w-1 h-1 bg-slate-600 rounded-full mx-1.5`}></View>
-        <EText size="sm" style={tw`text-slate-500`}>
-          {district}
-        </EText></> : null}
-      </View>
-    </View>
-  );
-}
+import React from "react";
+import { View } from "react-native";
+import tw from "../lib/tailwind";
+import EText from "./EText";
+
+interface IProps {
+  name: string;
+  code?: string;
+  district?: string;
+  noBorder?: boolean;
+}
+
+export default function EListSchool({
+  name,
+  code,
+  district,
+  noBorder,
+}: IProps) {
+  return (
+    <View style={tw`border-b border-slate-200 py-3`}>
+      <EText style={tw`font-bold text-slate-800 mb-0.5`} numberOfLines={1}>
+        {name}
+      </EText>
+      <View style={tw`flex-row items-center`}>
+        <EText size="sm" style={tw`text-slate-500`}>
+          {code}
+        </EText>
+        {district ? <><View style={tw`w-1 h-1 bg-slate-600 rounded-full mx-1.5`}></View>
+        <EText size="sm" style={tw`text-slate-500`}>
+          {district}
+        </EText></> : null}
+      </View>
+    </View>
+  );
+}

package/components/EOtpInputBox.tsx

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

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

@@ -1,26 +1,26 @@
-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;
-    onPress?: () => void;
-}
-
-export default function EPillButton( { title, active, onPress }: IProps) {
-  return (
-      <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'],
-      }]}
-      onPress={onPress}
-      >
-        <EText size={"sm"} style={tw`font-normal ${active ? "text-white" : "text-slate-500"}`}>
-       {title}
-        </EText>
-    </TouchableOpacity>
-  )
-}
+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;
+    onPress?: () => void;
+}
+
+export default function EPillButton( { title, active, onPress }: IProps) {
+  return (
+      <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'],
+      }]}
+      onPress={onPress}
+      >
+        <EText size={"sm"} style={tw`font-normal ${active ? "text-white" : "text-slate-500"}`}>
+       {title}
+        </EText>
+    </TouchableOpacity>
+  )
+}

package/components/EProfile.tsx

@@ -1,43 +1,42 @@
-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>
-          {subjectName ? <EText style={[tw`mt-1 ${subTitleSize}`, { color: Colors['text-body'] }]}>
-            {subjectName}
-          </EText> : null}
-        </View>
-      </View>
-      {
-        children ? <>
-          {children}
-        </> : null
-      }
-
-    </View>
-  )
-}
+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={name.split(" ")[0].charAt(0)}
+        />
+        <View style={tw`ml-3`}>
+          <EText style={[tw`${titleSize}`, { color: Colors['text-primary'] }]}>{name}</EText>
+          {subjectName ? <EText style={[tw`mt-1 ${subTitleSize}`, { color: Colors['text-body'] }]}>
+            {subjectName}
+          </EText> : null}
+        </View>
+      </View>
+      {
+        children ? <>
+          {children}
+        </> : null
+      }
+
+    </View>
+  )
+}

package/components/ESegment.tsx

@@ -1,36 +1,36 @@
-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-full items-center w-1/2",
-        isActive && "bg-white shadow-lg shadow-slate-500 "
-      )}
-      onPress={onPress}
-    >
-      <View style={tw`items-center`}>
-      <EText size="sm" 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-full p-1 border border-slate-100 w-full`, {
-        backgroundColor: Colors["text-body"],
-      }]}
-    >
-      {props.children}
-    </View>
-  </View>
-  );
-}
+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-full items-center w-1/2",
+        isActive && "bg-white shadow-lg shadow-slate-500 "
+      )}
+      onPress={onPress}
+    >
+      <View style={tw`items-center`}>
+      <EText size="sm" 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-full p-1 border border-slate-100 w-full`, {
+        backgroundColor: Colors["text-body"],
+      }]}
+    >
+      {props.children}
+    </View>
+  </View>
+  );
+}

package/components/ETimeInput.tsx

@@ -1,55 +1,55 @@
-import moment from 'moment'
-import React, { useState } from 'react'
-import { View, TouchableOpacity } from 'react-native'
-import { ClockIcon } from 'react-native-heroicons/outline'
-import { onChange } from 'react-native-reanimated'
-import DateTimePicker from '@react-native-community/datetimepicker';
-import tw from '../../../lib/tailwind'
-import EText from './EText';
-import ELabel from './ELabel';
-
-interface IProps {
-    label: string;
-    value: string;
-    onChange: (value: string) => void;
-    style?: string;
-}
-
-export default function ETimeInput( { label, value,style, onChange }: IProps ) {
-    const [date, setDate] = useState(new Date());
-    const [show, setShow] = useState(false);
-
-    const handleOnChange = (event: any, selectedDate: any) => {
-        const currentDate = selectedDate;
-        setShow(false);
-        setDate(currentDate);
-        onChange(moment(currentDate).format("hh:mm A"));
-    }
-
-  return (
-
-    <View style={tw`flex-1 ${ style ? style : ""}`}>
-        <ELabel label={label} />
-        <TouchableOpacity
-            style={tw`h-12 rounded-lg px-4 flex-row justify-between items-center border border-slate-300 lowercase my-2 bg-white`}
-            onPress={() => setShow(true)}
-        >
-            <EText size={"sm"} style={tw`font-normal`}>
-                {
-                //  value ? value :   moment(date).format("hh:mm A")
-                value ? value : "Select Time"
-                }
-            </EText>
-            {show ? <DateTimePicker
-                testID="dateTimePicker"
-                value={date}
-                mode={"time"}
-                is24Hour={false}
-                onChange={handleOnChange}
-            /> : <></>}
-            <ClockIcon size={20} style={tw`text-slate-500`} />
-        </TouchableOpacity>
-    </View>
-  )
-}
-
+import moment from 'moment'
+import React, { useState } from 'react'
+import { View, TouchableOpacity } from 'react-native'
+import { ClockIcon } from 'react-native-heroicons/outline'
+import { onChange } from 'react-native-reanimated'
+import DateTimePicker from '@react-native-community/datetimepicker';
+import tw from '../../../lib/tailwind'
+import EText from './EText';
+import ELabel from './ELabel';
+
+interface IProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    style?: string;
+}
+
+export default function ETimeInput( { label, value,style, onChange }: IProps ) {
+    const [date, setDate] = useState(new Date());
+    const [show, setShow] = useState(false);
+
+    const handleOnChange = (event: any, selectedDate: any) => {
+        const currentDate = selectedDate;
+        setShow(false);
+        setDate(currentDate);
+        onChange(moment(currentDate).format("hh:mm A"));
+    }
+
+  return (
+
+    <View style={tw`flex-1 ${ style ? style : ""}`}>
+        <ELabel label={label} />
+        <TouchableOpacity
+            style={tw`h-12 rounded-lg px-4 flex-row justify-between items-center border border-slate-300 lowercase my-2 bg-white`}
+            onPress={() => setShow(true)}
+        >
+            <EText size={"sm"} style={tw`font-normal`}>
+                {
+                //  value ? value :   moment(date).format("hh:mm A")
+                value ? value : "Select Time"
+                }
+            </EText>
+            {show ? <DateTimePicker
+                testID="dateTimePicker"
+                value={date}
+                mode={"time"}
+                is24Hour={false}
+                onChange={handleOnChange}
+            /> : <></>}
+            <ClockIcon size={20} style={tw`text-slate-500`} />
+        </TouchableOpacity>
+    </View>
+  )
+}
+