app-expo-cli 1.0.5 → 1.0.7

package/template/src/lib/buttons/Or.tsx

@@ -0,0 +1,27 @@
+import { Text, View } from "react-native";
+
+import React from "react";
+import tw from "../tailwind";
+
+interface IOR {
+  containerStyle?: {};
+  title?: string;
+  titleStyle?: {};
+  lineStyle?: {};
+}
+
+const Or = ({ containerStyle, title, titleStyle, lineStyle }: IOR) => {
+  return (
+    <View
+      style={[tw`items-center gap-3 justify-center flex-row `, containerStyle]}
+    >
+      <View style={[tw`border-[.2px] flex-1 border-[#888888]`, lineStyle]} />
+      <Text style={[tw`text-xs font-InterRegular text-gray-300`, titleStyle]}>
+        {title || "Or"}
+      </Text>
+      <View style={[tw`border-[.2px] flex-1 border-[#888888]`, lineStyle]} />
+    </View>
+  );
+};
+
+export default Or;

package/template/src/lib/buttons/SimpleButton.tsx

@@ -0,0 +1,45 @@
+import { Text, TouchableOpacity } from "react-native";
+
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import tw from "../tailwind";
+
+interface SimpleButtonProps {
+  onPress?: () => void;
+  svgIcon?: any;
+  svgHeight?: number;
+  svgWidth?: number;
+  title?: string;
+  titleStyle?: any;
+  containerStyle?: any;
+}
+
+const SimpleButton = ({
+  containerStyle,
+  onPress,
+  svgIcon,
+  title,
+  titleStyle,
+  svgHeight = 16,
+  svgWidth = 16,
+}: SimpleButtonProps) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.5}
+      style={[
+        tw`border-2 border-[#E8E8EA] px-3 py-1 flex-row items-center rounded-full`,
+        containerStyle,
+      ]}
+    >
+      {title && (
+        <Text style={[tw`text-primary font-RobotoBold text-xs`, titleStyle]}>
+          {title}
+        </Text>
+      )}
+      {svgIcon && <SvgXml height={svgHeight} width={svgWidth} xml={svgIcon} />}
+    </TouchableOpacity>
+  );
+};
+
+export default SimpleButton;

package/template/src/lib/buttons/TButton.tsx

@@ -0,0 +1,70 @@
+import { ActivityIndicator, Text, TouchableOpacity } from "react-native";
+
+import { LinearGradient } from "expo-linear-gradient";
+import React from "react";
+import tw from "../tailwind";
+
+interface IButton {
+  containerStyle?: {};
+  titleStyle?: {};
+  title?: string;
+  isLoading?: boolean;
+  onPress?: () => void;
+  loadingColor?: string;
+  disabled?: boolean;
+  offGradient?: boolean;
+  gradinLayoutStyle?: {};
+}
+
+const TButton = ({
+  containerStyle,
+  title,
+  titleStyle,
+  isLoading,
+  onPress,
+  loadingColor,
+  disabled,
+  offGradient,
+  gradinLayoutStyle,
+}: IButton) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={isLoading || disabled}
+      // activeOpacity={0.5}
+      style={[
+        tw` h-14 flex-row justify-center items-center gap-3 rounded-full   ${
+          disabled ? "opacity-60" : "opacity-100"
+        }`,
+        containerStyle,
+      ]}
+    >
+      <LinearGradient
+        // Background Linear Gradient
+        colors={
+          offGradient ? ["transparent", "transparent"] : ["#FF8787", "#8578B4"]
+        }
+        style={[
+          tw`w-full h-full flex-row justify-center items-center gap-3 rounded-full`,
+          gradinLayoutStyle,
+        ]}
+      >
+        {isLoading && (
+          <ActivityIndicator color={loadingColor ? loadingColor : "white"} />
+        )}
+        {title && (
+          <Text
+            style={[
+              tw`text-white font-InterSemiBold text-base text-center `,
+              titleStyle,
+            ]}
+          >
+            {title}
+          </Text>
+        )}
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+};
+
+export default TButton;

package/template/src/lib/cards/Card.tsx

@@ -0,0 +1,175 @@
+import { ActivityIndicator, Text, TouchableOpacity, View } from "react-native";
+
+import { AnimatedImage } from "react-native-ui-lib";
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import tw from "../tailwind";
+
+export interface ICardProps {
+  children?: React.ReactNode;
+  containerStyle?: any;
+  cardStyle?: any;
+  component?: React.ReactNode;
+  OuterComponent?: React.ReactNode;
+  onPress?: () => void;
+
+  layoutStyle?: any;
+}
+
+const Card = ({
+  children,
+  cardStyle,
+  component,
+  containerStyle,
+  OuterComponent,
+  layoutStyle,
+  onPress,
+}: ICardProps) => {
+  return (
+    <View style={[tw`flex-row items-center justify-between`, layoutStyle]}>
+      <TouchableOpacity
+        activeOpacity={0.6}
+        disabled={!onPress}
+        onPress={onPress}
+        style={[
+          tw`bg-primary600 p-2 rounded-md flex-row justify-between items-center flex-1`,
+          cardStyle,
+        ]}
+      >
+        <View style={[tw``, containerStyle]}>{children}</View>
+        {component && <View>{component}</View>}
+      </TouchableOpacity>
+      {OuterComponent && <View>{OuterComponent}</View>}
+    </View>
+  );
+};
+
+export interface ICardImageProps {
+  source: { uri: string };
+  containerStyle?: any;
+  imageStyle?: any;
+  children?: React.ReactNode;
+}
+
+Card.Image = ({
+  source,
+  containerStyle,
+  imageStyle,
+  children,
+}: ICardImageProps) => {
+  return (
+    <>
+      {children ? (
+        children
+      ) : (
+        <>
+          <AnimatedImage
+            containerStyle={[
+              tw`aspect-square   items-center rounded-md`,
+              containerStyle,
+            ]}
+            errorSource={source}
+            // onError={e => console.log(e)}
+            animationDuration={500}
+            style={[tw`aspect-square  rounded-md`, imageStyle]}
+            loader={<ActivityIndicator color="white" size={"small"} />}
+            source={
+              source?.uri
+                ? source
+                : require("../../assets/images/icons/no_image.png")
+            }
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export interface ICardDetailsProps {
+  children?: React.ReactNode;
+  containerStyle?: any;
+  detailsContainerStyle?: any;
+  svgStyle?: any;
+  textStyle?: any;
+  data?: Array<{
+    title?: string;
+    icons?: React.ReactNode;
+    titleStyle?: any;
+  }>;
+}
+
+Card.Details = ({
+  children,
+  data,
+  containerStyle,
+  detailsContainerStyle,
+  svgStyle,
+  textStyle,
+}: ICardDetailsProps) => {
+  return (
+    <>
+      {children ? (
+        children
+      ) : (
+        <View style={[tw`justify-start  gap-1 `, containerStyle]}>
+          {data?.map((item, index) => {
+            return (
+              <View
+                key={index}
+                style={[
+                  tw`flex-row items-center gap-1.5`,
+                  detailsContainerStyle,
+                ]}
+              >
+                {item?.icons && <SvgXml xml={item.icons} {...svgStyle} />}
+                {item?.title && (
+                  <Text
+                    numberOfLines={1}
+                    style={[
+                      tw`text-white font-DegularDisplayRegular text-sm `,
+                      item.titleStyle,
+                    ]}
+                  >
+                    {item.title}
+                  </Text>
+                )}
+              </View>
+            );
+          })}
+        </View>
+      )}
+    </>
+  );
+};
+
+interface CardButtonProps {
+  total: number;
+  checkedIn: number;
+  onPress?: () => void;
+}
+
+Card.Button = ({ checkedIn, total, onPress }: CardButtonProps) => {
+  return (
+    <>
+      <TouchableOpacity
+        activeOpacity={0.6}
+        disabled={total == 0}
+        onPress={onPress}
+        style={tw`px-2  ${
+          total == 0 ? "bg-green-900" : "bg-green-600"
+        } rounded-lg h-10 items-center justify-center`}
+      >
+        <Text
+          style={tw` ${
+            // checkedIn === total ? 'text-white400' : 'text-white50'
+            "text-white50"
+          }  font-RobotoBlack`}
+        >
+          Checked in {checkedIn}/{total}
+        </Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+export default Card;

package/template/src/lib/cards/OptionSelect.tsx

@@ -0,0 +1,44 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+
+import tw from "../tailwind";
+
+interface IOptionSelectProps {
+  setSelectOption: Dispatch<SetStateAction<string>>;
+  data: Array<string>;
+  selectOption: string;
+  containerStyle?: any;
+  selectStyle?: any;
+  textstyle?: any;
+}
+
+const OptionSelect = ({
+  data,
+  selectOption,
+  setSelectOption,
+  containerStyle,
+  selectStyle,
+  textstyle,
+}: IOptionSelectProps) => {
+  return (
+    <View style={[tw`flex-row justify-between gap-2`, containerStyle]}>
+      {data.map((item, index) => (
+        <TouchableOpacity
+          key={index}
+          style={[
+            tw`p-2  rounded-lg items-center justify-center flex-1`,
+            selectStyle,
+            selectOption === item && tw`bg-primary40`,
+          ]}
+          onPress={() => setSelectOption(item)}
+        >
+          <Text style={[tw`text-white50 text-xs font-RobotoBold`, textstyle]}>
+            {item}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+export default OptionSelect;

package/template/src/lib/cards/SearchCard.tsx

@@ -0,0 +1,35 @@
+import { IconSearchGray } from "@/icons/icons";
+import React from "react";
+import { View } from "react-native";
+import InputText from "../inputs/InputText";
+import tw from "../tailwind";
+
+interface SearchCardProps {
+  setSearch?: React.Dispatch<React.SetStateAction<string>>;
+  search?: string;
+  placeholder?: string;
+  containerStyle?: any;
+  fieldStyle?: any;
+  focusSTyle?: any;
+  Component?: React.ReactNode;
+  ref?: any;
+  label?: string;
+  onPress?: () => void;
+}
+
+const SearchCard = ({ search, setSearch }: SearchCardProps) => {
+  return (
+    <View style={tw`h-12 px-2`}>
+      <InputText
+        svgFirstIcon={IconSearchGray}
+        value={search}
+        onChangeText={(text) => setSearch && setSearch(text)}
+        placeholder="Search"
+        style={tw`text-black`}
+        containerStyle={tw` border border-gray-500 rounded-full h-12 flex-1`}
+      />
+    </View>
+  );
+};
+
+export default SearchCard;

package/template/src/lib/editor/TextEditor.tsx

@@ -0,0 +1,81 @@
+import {
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  Text,
+} from "react-native";
+import {
+  RichEditor,
+  RichToolbar,
+  actions,
+} from "react-native-pell-rich-editor";
+
+import { _HIGHT } from "@/src/utils/utils";
+import React from "react";
+import tw from "../tailwind";
+
+const handleHead = ({ tintColor }: any) => (
+  <Text style={{ color: tintColor }}>H1</Text>
+);
+
+const handleLink = ({ tintColor }: any) => (
+  <Text style={{ color: tintColor }}>Link</Text>
+);
+
+interface TextEditorProps {
+  onChange?: (descriptionText: string) => void;
+  onFocus?: (isEditing: boolean) => void;
+  value?: string;
+}
+
+const TextEditor = ({ onChange, onFocus, value }: TextEditorProps) => {
+  const richText = React.useRef<null>(null);
+  return (
+    <SafeAreaView>
+      <ScrollView>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          style={{ flex: 1 }}
+        >
+          <RichToolbar
+            style={tw`bg-transparent border border-secondary  rounded-t-md`}
+            editor={richText}
+            actions={[
+              actions.setBold,
+              actions.setItalic,
+              actions.setUnderline,
+              actions.heading1,
+              actions.insertBulletsList,
+              actions.insertOrderedList,
+              actions.insertLink,
+            ]}
+            iconMap={{
+              [actions.heading1]: handleHead,
+              [actions.insertLink]: handleLink,
+            }}
+          />
+          <RichEditor
+            initialHeight={_HIGHT * 0.3}
+            initialContentHTML={value}
+            placeholder="Write your caption"
+            style={tw`bg-transparent border border-t-0 border-secondary rounded-b-md p-2 text-white`}
+            editorStyle={tw`bg-transparent border border-secondary rounded-md p-2 text-white`}
+            ref={richText}
+            onChange={(text) => {
+              onChange && onChange(text);
+            }}
+            onFocus={() => {
+              onFocus && onFocus(true);
+            }}
+            onBlur={() => {
+              onFocus && onFocus(false);
+            }}
+          />
+        </KeyboardAvoidingView>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default TextEditor;

package/template/src/lib/expend/ExpendComponent.tsx

@@ -0,0 +1,36 @@
+import { Text, View } from "react-native";
+
+import { ExpandableSection } from "react-native-ui-lib";
+import { IFaq } from "../../redux/interface/additional";
+import { IconDownArrow } from "../../icons/icons";
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import tw from "../tailwind";
+
+const ExpendComponent = ({ item }: { item: IFaq }) => {
+  const [expend, setExpended] = React.useState(false);
+  return (
+    <View style={tw`mx-[4%] gap-2 py-5 border-b border-b-black100`}>
+      <ExpandableSection
+        expanded={expend}
+        sectionHeader={
+          <View style={tw`flex-row justify-between items-center`}>
+            <Text style={tw`text-black900 font-RobotoBold text-base`}>
+              {item.question}
+            </Text>
+            <SvgXml xml={IconDownArrow} />
+          </View>
+        }
+        onPress={() => setExpended(!expend)}
+      >
+        <View style={tw`my-2`}>
+          <Text style={tw`text-black600 font-DegularDisplayRegular text-sm`}>
+            {item.answer}
+          </Text>
+        </View>
+      </ExpandableSection>
+    </View>
+  );
+};
+
+export default ExpendComponent;