@servesall/atoms 1.1.1 → 1.1.2

package/src/CountryFlatList/index.js

@@ -0,0 +1,151 @@
+import React, {
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+  useEffect,
+} from "react";
+import { countries } from "./Data";
+import { H4 } from "../Text";
+import { Margin, Box, MarginHorizontal, Row } from "../Layout";
+import Input from "../Inputs/InputNormal";
+import { theme } from "../Theme/definitions";
+import { View, TouchableHighlight, Image } from "react-native";
+
+import BottomSheet, { BottomSheetFlatList } from "@gorhom/bottom-sheet";
+
+const Item = ({ item, setSelected, variant }) => {
+  return (
+    <MarginHorizontal>
+      <View style={{ borderBottomWidth: 1, borderColor: theme.color10 }}>
+        <TouchableHighlight
+          activeOpacity={0.6}
+          underlayColor="#DDDDDD"
+          onPress={() => setSelected(item)}
+        >
+          <Margin>
+            <Row style={{ alignItems: "center" }}>
+              <Image
+                style={{ width: 50, height: 40 }}
+                source={{
+                  uri: item.src,
+                }}
+              />
+              <Row>
+                <Box style={{ flex: 4 }}>
+                  <MarginHorizontal>
+                    <H4>{item.name}</H4>
+                  </MarginHorizontal>
+                </Box>
+                {variant === "countryCode" && (
+                  <Box>
+                    <MarginHorizontal>
+                      <H4>{item.code}</H4>
+                    </MarginHorizontal>
+                  </Box>
+                )}
+              </Row>
+            </Row>
+          </Margin>
+        </TouchableHighlight>
+      </View>
+    </MarginHorizontal>
+  );
+};
+
+export default function NewCustomer({
+  variant,
+  onChange = () => {},
+  onClose = () => {},
+}) {
+  const [data, setData] = useState(countries);
+  const [noData, setNoData] = useState(false);
+  const [selected, setSelected] = useState(false);
+  const renderItem = ({ item }) => (
+    <Item
+      item={item}
+      selected={selected}
+      setSelected={setSelected}
+      variant={variant}
+    />
+  );
+
+  const sheetRef = useRef();
+
+  useEffect(() => {
+    if (selected) {
+      onChange(selected);
+      sheetRef.current?.close();
+      onClose();
+    }
+  }, [selected]);
+
+  const handleSheetChanges = useCallback((index) => {
+    if (index === -1) {
+      sheetRef.current?.close();
+      onClose();
+    }
+  }, []);
+
+  // variables
+  const snapPoints = useMemo(() => ["90%"], []);
+
+  const searchText = (e = "") => {
+    let text = e.toLowerCase();
+
+    let filteredName = countries.filter((item) => {
+      return item.name.toLowerCase().match(text);
+    });
+    if (!text || text === "") {
+      setData(countries);
+    } else if (!Array.isArray(filteredName) && !filteredName.length) {
+      // set no data flag to true so as to render flatlist conditionally
+      setNoData(true);
+    } else if (Array.isArray(filteredName)) {
+      setData(filteredName);
+      setNoData(false);
+    }
+  };
+
+  const defaultProps = {
+    keyboardVerticalOffset: 100,
+    borderColorIdle: theme.color7,
+    borderColorActive: theme.color2,
+    borderColorError: theme.color6,
+    textChange: (value) => {
+      searchText(value);
+    },
+  };
+
+  return (
+    <BottomSheet
+      index={0}
+      ref={sheetRef}
+      snapPoints={snapPoints}
+      onChange={handleSheetChanges}
+      enablePanDownToClose={true}
+      keyboardBehavior={"fillParent"}
+      ListEmptyComponent={<H4>Not found</H4>}
+    >
+      <Margin>
+        <Input autoFocus={false} {...defaultProps} error="Invalid">
+          <H4>Search</H4>
+        </Input>
+      </Margin>
+      <BottomSheetFlatList
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.name}
+        windowSize={3}
+        initialNumToRender={15}
+        maxToRenderPerBatch={4}
+        removeClippedSubviews={false}
+        getItemLayout={(data, index) => ({
+          length: 73,
+          offset: 73 * index,
+          index,
+        })}
+      />
+    </BottomSheet>
+  );
+}

package/src/ErrorText/ErrorText.style.js

@@ -0,0 +1,18 @@
+import styled from "styled-components/native";
+
+export const Wrapper = styled.View`
+  flex: 1;
+  border-radius: ${(props) => props.theme.borderRadius};
+  padding: ${(props) => props.theme.padding};
+  border-width: 2px;
+  border-color: ${(props) => props.theme.red};
+  background-color: ${(props) => props.theme.redlight};
+  ${(props) => props.style};
+`;
+
+export const ErrorWrapper = styled.View`
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  ${(props) => props.style};
+`;

package/src/ErrorText/error.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"success","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[75,75,0]},"p":{"s":true,"x":{"a":1,"k":[{"t":0,"s":[76],"e":[76],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":18}]},"y":{"a":1,"k":[{"t":0,"s":[75.915],"e":[75.915],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":18}]}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":1,"k":[{"t":0,"s":[0,0],"e":[100,100],"i":{"x":[0.515,0.515],"y":[0.955,0.955]},"o":{"x":[0.455,0.455],"y":[0.03,0.03]}},{"t":18}]}},"shapes":[{"ty":"gr","nm":"success shape group","it":[{"ty":"rc","s":{"a":0,"k":[69,15]},"r":{"a":0,"k":7},"p":{"a":0,"k":[74.5,75.5]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[1,1,1,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,-100]},"p":{"a":0,"k":[180.566,74.793]},"r":{"a":0,"k":225.0005261478743}}]},{"ty":"gr","nm":"success shape group","it":[{"ty":"rc","s":{"a":0,"k":[69,15]},"r":{"a":0,"k":7},"p":{"a":0,"k":[74.5,75.5]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[1,1,1,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-31.566,74.793]},"r":{"a":0,"k":315.0121957629266}}]},{"ty":"gr","nm":"success shape group","it":[{"ty":"el","p":{"a":0,"k":[74,75]},"s":{"a":0,"k":[150,150]}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[1,0.4627450980392157,0.4588235294117647,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":18}],"op":18,"w":152,"h":153}

package/src/ErrorText/index.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Wrapper, ErrorWrapper } from "./ErrorText.style";
+import LottieView from "lottie-react-native";
+import error from "./error.json";
+
+const ErrorText = ({ children }) => {
+  return (
+    <Wrapper>
+      <ErrorWrapper>
+        <LottieView
+          style={{
+            height: 30,
+            width: 30,
+          }}
+          autoPlay={true}
+          loop={false}
+          source={error}
+        />
+      </ErrorWrapper>
+      {children}
+    </Wrapper>
+  );
+};
+
+export default ErrorText;

package/src/Icons/Assets/back_fat.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"back_fat","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[235,192.5,0]},"p":{"s":true,"x":{"a":0,"k":218.551},"y":{"a":0,"k":200}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[89.4,89.4]}},"shapes":[{"ty":"gr","nm":"back_fat shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[426.666667,149.333333],[145.664,149.333333],[222.165333,72.832],[221.645593,13.0210741],[161.834667,12.5013333],[12.5013333,161.834667],[12.5013333,222.165333],[161.834667,371.498667],[203.328312,383.133745],[233.800412,352.661646],[222.165333,311.168],[145.664,234.666667],[426.666667,234.666667],[469.333333,192]],"i":[[23.564148999999986,0],[0,0],[0,0],[16.457975000000005,16.4579754],[16.741499000000005,-16.16948091],[0,0],[-16.656296,-16.661327],[0,0],[-14.91752200000002,3.904659000000038],[-3.904658999999981,14.917521999999963],[11.091480999999987,10.712511000000006],[0,0],[0,0],[0,23.564148999999986]],"o":[[0,0],[0,0],[16.16948099999999,-16.741499199999993],[-16.457976000000002,-16.45797539],[0,0],[-16.656296,16.661327],[0,0],[10.712510000000009,11.091480999999987],[14.917522999999989,-3.9046579999999835],[3.9046590000000094,-14.917523000000017],[0,0],[0,0],[23.564148999999986,0],[0,-23.564148999999986]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0,0,0,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0.333,0]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":438,"h":400}

package/src/Icons/Assets/big_calendar.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"big_calendar","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[24,24,0]},"p":{"s":true,"x":{"a":0,"k":21.550500000000003},"y":{"a":0,"k":21.40500000000001}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[78.9,78.9]}},"shapes":[{"ty":"gr","nm":"big_calendar shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[30.0003213,6.00160764],[35.2497591,6.00160764],[42,12.7525738],[42,35.2490354],[35.2497591,42],[6.75024041,42],[0,35.2490354],[0,12.7525738],[6.75024041,6.00160764]],"i":[[0,0],[0,0],[0,-3.7287826200000005],[0,0],[3.7283828999999997,0],[0,0],[0,3.7287827000000036],[0,0],[-3.72838296,0]],"o":[[0,0],[3.7283828999999997,0],[0,0],[0,3.7287827000000036],[0,0],[-3.72838296,0],[0,0],[0,-3.7287826200000005],[0,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[11.9996787,6.00160764],[23.9993575,6.00160764]],"i":[[0,0],[0,0]],"o":[[0,0],[0,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[11.9996787,11.998716],[11.9996787,0]],"i":[[0,0],[0,0]],"o":[[0,0],[0,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[30.0003213,11.998716],[30.0003213,0]],"i":[[0,0],[0,0]],"o":[[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":100},"c":{"a":0,"k":[0,0,0,1]},"lc":2,"lj":2,"ml":1,"w":{"a":0,"k":5},"d":[{"n":"d","v":{"a":0,"k":0},"nm":"0"},{"n":"g","v":{"a":0,"k":0},"nm":"1"}]},{"ty":"fl","o":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"r":1},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[3,3]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":44,"h":43}

package/src/Icons/Assets/big_close.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"big_close","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[21.5,21.5,0]},"p":{"s":true,"x":{"a":0,"k":23.867499999999996},"y":{"a":0,"k":23.472}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[100,100,100]}},"shapes":[{"ty":"gr","nm":"big_close shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[14.5619128,2.52534118],[2.83295303,2.52534118],[2.83295303,14.254301],[9.67484616,21.0961941],[2.83295303,27.9380872],[2.83295303,39.6670469],[14.5619128,39.6670469],[21.4038059,32.8251538],[28.245699,39.6670469],[39.9746588,39.6670469],[39.9746588,27.9380872],[33.1347205,21.0942393],[39.9746588,14.254301],[39.9746588,2.52534118],[28.245699,2.52534118],[21.4038059,9.36723432]],"i":[[0,0],[3.2388627800000003,-3.238862807],[-3.2388628120000003,-3.238862899999999],[0,0],[0,0],[-3.2388628120000003,-3.2388627999999997],[-3.2388627999999997,3.238862900000001],[0,0],[0,0],[-3.238862900000001,3.238862900000001],[3.2388627999999997,3.2388628000000033],[0,0],[0,0],[3.2388627999999997,3.23886278],[3.238862900000001,-3.238862807],[0,0]],"o":[[-3.2388627999999997,-3.238862807],[-3.2388628120000003,3.23886278],[0,0],[0,0],[-3.2388628120000003,3.2388628000000033],[3.2388627800000003,3.238862900000001],[0,0],[0,0],[3.238862900000001,3.238862900000001],[3.2388627999999997,-3.2388627999999997],[0,0],[0,0],[3.2388627999999997,-3.238862899999999],[-3.238862900000001,-3.238862807],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":2,"c":{"a":0,"k":[0,0,0,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":48,"h":47}

package/src/Icons/Assets/big_good.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"big_good","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[33.5,29,0]},"p":{"s":true,"x":{"a":0,"k":23.867499879595638},"y":{"a":0,"k":21.201}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[67,67]}},"shapes":[{"ty":"gr","nm":"big_good shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[63.4597156,2.57146671],[64.6922839,16.6597872],[33.195691,54.195965],[27.3996564,57.5930589],[17.2316131,54.3381202],[2.44749806,36.719098],[3.68006639,22.6307774],[17.7683869,23.8633458],[25.1537097,32.6646783],[49.371395,3.80403505]],"i":[[-4.2307467000000045,-3.55001794],[3.5500179000000003,-4.2307466],[0,0],[2.188362299999998,-0.4139472000000026],[2.559617799999998,3.0504336999999992],[0,0],[-4.230746635,3.5500180000000015],[-3.5500179000000003,-4.230746700000001],[0,0],[0,0]],"o":[[4.230746599999996,3.55001794],[0,0],[-1.5432716999999982,1.8391994999999994],[-3.6152648999999997,0.9333999999999989],[0,0],[-3.55001794,-4.2307467000000045],[4.23074664,-3.5500179000000003],[0,0],[0,0],[3.5500180000000015,-4.23074664]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0,0,0,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-0.02,-0.144]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":48,"h":43}

package/src/Icons/Assets/big_pax.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"big_pax","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[20.5,23.5,0]},"p":{"s":true,"x":{"a":0,"k":20.267499999999995},"y":{"a":0,"k":21.405000000000005}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[85.7,85.7]}},"shapes":[{"ty":"gr","nm":"big_pax shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[32.2803658,13.7471471],[24.5022957,6],[16.7242255,13.7471471],[24.5022957,21.4942943]],"i":[[0,4.278631000000001],[4.2957091999999975,0],[0,-4.278630909999999],[-4.295709300000002,0]],"o":[[0,-4.278630909999999],[-4.295709300000002,0],[0,4.278631000000001],[4.2957091999999975,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[7,47],[7,35.2158662],[12.2501312,29.9866078],[36.7498688,29.9866078],[42,35.2158662],[42,47]],"i":[[0,0],[0,0],[-2.9006975500000003,0],[0,0],[0,-2.889165300000002],[0,0]],"o":[[0,0],[0,-2.889165300000002],[0,0],[2.9006974999999997,0],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":100},"c":{"a":0,"k":[0,0,0,1]},"lc":2,"lj":2,"ml":1,"w":{"a":0,"k":5},"d":[{"n":"d","v":{"a":0,"k":0},"nm":"0"},{"n":"g","v":{"a":0,"k":0},"nm":"1"}]},{"ty":"fl","o":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"r":1},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-4,-3]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":41,"h":43}

package/src/Icons/Assets/big_time.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"big_time","ip":0,"st":0,"ind":1,"hix":1,"ks":{"o":{"a":0,"k":100},"or":{"a":0,"k":[0,0,0]},"a":{"a":0,"k":[23,23,0]},"p":{"s":true,"x":{"a":0,"k":21.5505},"y":{"a":0,"k":21.405}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[85.39999999999999,85.39999999999999]}},"shapes":[{"ty":"gr","nm":"big_time shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[20.876201,1.49620657],[20.9420881,1.55132752],[20.9420881,1.55132752],[21.3044901,5.62463843],[13.6057757,15.1235423],[12.3048932,16.014121],[10.7141384,16.4705272],[10.6269448,16.4675238],[3.53391155,16.1130771],[0.689086312,13.0652812],[3.55665167,10.3042937],[3.6438452,10.3072971],[9.92753941,10.6212134],[16.9936109,1.90262316]],"i":[[-1.184376499999999,-0.959918826],[0,0],[0,0],[0.9991663000000024,-1.2328011600000002],[0,0],[0.4943180999999992,-0.15813429999999862],[0.5864805999999998,0.011105100000001755],[0.02904730000000022,0.0014515000000017153],[0,0],[-0.03062906799999998,1.6175723000000009],[-1.55428196,-0.029430700000000698],[-0.02904725000000008,-0.0014515999999993312],[0,0],[0,0]],"o":[[0,0],[0,0],[1.2011140000000005,1.03704244],[0,0],[-0.3511899000000014,0.4333083999999996],[-0.45629710000000046,0.29842550000000045],[-0.029078300000000112,-0.0005506000000004008],[0,0],[-1.61584602,-0.08074570000000136],[0.029430652999999918,-1.5542818999999994],[0.029078280000000234,0.0005505999999986244],[0,0],[0,0],[0.9599188000000005,-1.18437651]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":100},"r":1,"c":{"a":0,"k":[0,0,0,1]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[-100,100]},"p":{"a":0,"k":[40.237,20.812]},"r":{"a":0,"k":37.98710181717358}}]},{"ty":"gr","nm":"big_time shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[45.3359375,25.3346558],[25.3359375,5.33465576],[5.3359375,25.3346558],[25.3359375,45.3346558]],"i":[[0,11.045692299999999],[11.045696499999998,0],[0,-11.0456959],[-11.0456942,0]],"o":[[0,-11.0456959],[-11.0456942,0],[0,11.045692299999999],[11.045696499999998,0]]}}},{"ty":"st","o":{"a":0,"k":100},"c":{"a":0,"k":[0,0,0,1]},"lc":2,"lj":2,"ml":1,"w":{"a":0,"k":5},"d":[{"n":"d","v":{"a":0,"k":0},"nm":"0"},{"n":"g","v":{"a":0,"k":0},"nm":"1"}]},{"ty":"fl","o":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"r":1},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-2,-2]},"r":{"a":0,"k":0}}]},{"ty":"gr","nm":"big_time shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[0,0],[32,0],[32,32],[0,32]],"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]]}}},{"ty":"st","o":{"a":0,"k":0},"w":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"lc":3,"lj":1,"ml":1},{"ty":"fl","o":{"a":0,"k":0},"c":{"a":0,"k":[0,0,0,0]},"r":1},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"p":{"a":0,"k":[-2,-2]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":44,"h":43}

package/src/Icons/Assets/index.js

@@ -16,6 +16,7 @@ import home from "./home.json";
 import search from "./search.json";
 import account from "./account.json";
 import back from "./back.json";
+import back_fat from "./back_fat.json";
 import merchant_activity from "./merchant_activity.json";
 import merchant_date from "./merchant_date.json";
 import merchant_time from "./merchant_time.json";
@@ -74,6 +75,11 @@ import plus from "./plus.json";
 import minus from "./minus.json";
 import visible from "./visible.json";
 import nonVisible from "./non-visible.json";
+import big_close from "./big_close.json";
+import big_good from "./big_good.json";
+import big_time from "./big_time.json";
+import big_calendar from "./big_calendar.json";
+import big_pax from "./big_pax.json";
 
 const allCategories = {
   restaurants,
@@ -95,6 +101,7 @@ const allCategories = {
   search,
   account,
   back,
+  back_fat,
   merchant_activity,
   merchant_date,
   merchant_time,
@@ -151,6 +158,11 @@ const allCategories = {
   minus,
   visible,
   nonVisible,
+  big_close,
+  big_good,
+  big_time,
+  big_calendar,
+  big_pax,
 };
 
 export default allCategories;

package/src/Inputs/Animated/index.js

@@ -13,6 +13,7 @@ const Input = ({
   borderColorError,
   textChange = () => {},
   value,
+  defaultValue,
   multiline = false,
   numberOfLines = 1,
   maxLength = 1000,
@@ -24,7 +25,7 @@ const Input = ({
   error,
 }) => {
   const [isFocused, setIsFocused] = useState(false);
-  const [textValue, setTextValue] = useState(value);
+  const [textValue, setTextValue] = useState(value || defaultValue);
   const inputRef = useRef();
 
   useEffect(() => {
@@ -58,6 +59,7 @@ const Input = ({
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
           onChangeText={(text) => setTextValue(text)}
+          defaultValue={defaultValue}
           value={value}
           multiline={multiline}
           numberOfLines={numberOfLines}

package/src/Inputs/InputNormal/Animated.style.js

@@ -0,0 +1,23 @@
+import styled from "styled-components/native";
+
+export const InputWrapper = styled.Pressable`
+  min-height: 70px;
+`;
+
+export const InputElement = styled.TextInput`
+  min-height: 40px;
+  font-family: ${(props) => props.theme.fontFamily2};
+  font-size: ${(props) => props.theme.small};
+  color: ${(props) => props.theme.color2};
+  background-color: ${(props) =>
+    props.active ? props.theme.color1 : props.theme.color10};
+`;
+export const BorderWrapper = styled.View`
+  min-height: 70px;
+  padding-top: 26px;
+  border-width: 2px;
+  border-color: ${(props) => props.color};
+  border-radius: ${(props) => props.theme.borderRadiusSmall};
+  background-color: ${(props) =>
+    props.active ? props.theme.color1 : props.theme.color10};
+`;

package/src/Inputs/InputNormal/LineAnimation/LineAnimation.style.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components/native';
+
+export const BorderIdle = styled.View`
+  height: 4px;
+  background-color: ${(props) => props.color};
+  flex: 1;
+  position: absolute;
+  width: 100%;
+  z-index: 10;
+`;
+
+export const BorderActive = styled.View`
+  height: 4px;
+  background-color: ${(props) => props.color};
+  z-index: 11;
+`;

package/src/Inputs/InputNormal/LineAnimation/index.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { BorderIdle, BorderActive } from "./LineAnimation.style";
+import { Row } from "../../../Layout";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+const Line = ({
+  active,
+  borderColorIdle,
+  borderColorActive,
+  borderColorError,
+  hasError,
+}) => {
+  const widthActive = useSharedValue(0);
+
+  const animatedStyleWidthActive = useAnimatedStyle(() => {
+    return active
+      ? {
+          width: withTiming(widthActive.value, {
+            duration: 350,
+          }),
+        }
+      : {
+          width: withTiming(0, {
+            duration: 350,
+          }),
+        };
+  });
+
+  return (
+    <Row>
+      <BorderIdle
+        color={!hasError ? borderColorIdle : borderColorError}
+        onLayout={(e) => (widthActive.value = e.nativeEvent.layout.width)}
+      />
+      <Animated.View style={[{ zIndex: 11 }, animatedStyleWidthActive]}>
+        <BorderActive
+          color={!hasError ? borderColorActive : borderColorError}
+        />
+      </Animated.View>
+    </Row>
+  );
+};
+
+export default Line;

package/src/Inputs/InputNormal/Placeholder/index.js

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+const PlaceholderElement = React.memo(({ children, active }) => {
+  const top = useSharedValue(active ? 10 : 30);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      top: withTiming(top.value, {
+        duration: 250,
+        easing: Easing.bezier(0.19, 1.0, 0.22, 1.0),
+      }),
+    };
+  });
+
+  useEffect(() => {
+    if (active) {
+      top.value = 10;
+    }
+    if (!active) {
+      top.value = 30;
+    }
+  }, [active]);
+
+  return (
+    <Animated.View
+      style={[
+        {
+          position: "absolute",
+          zIndex: 1,
+          justifyContent: "center",
+        },
+        animatedStyle,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+});
+
+export default PlaceholderElement;

package/src/Inputs/InputNormal/index.js

@@ -0,0 +1,102 @@
+import React, { useEffect, useState, useRef } from "react";
+import { H4 } from "../../Text";
+import { MarginHorizontal } from "../../Layout";
+import { KeyboardAvoidingView, Platform } from "react-native";
+import { InputWrapper, InputElement, BorderWrapper } from "./Animated.style";
+import Placeholder from "./Placeholder";
+
+const Input = ({
+  children,
+  style,
+  borderColorIdle,
+  borderColorActive,
+  borderColorError,
+  textChange = () => {},
+  onPress = () => {},
+  value,
+  defaultValue,
+  multiline = false,
+  numberOfLines = 1,
+  maxLength = 1000,
+  autoFocus = false,
+  keyboardType,
+  editable = true,
+  keyboardVerticalOffset = 0,
+  hasError = false,
+  error,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [textValue, setTextValue] = useState(value || defaultValue);
+  const inputRef = useRef();
+
+  useEffect(() => {
+    textChange(textValue);
+  }, [textValue]);
+
+  useEffect(() => {
+    autoFocus && inputRef.current?.focus();
+  }, [autoFocus]);
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      keyboardVerticalOffset={keyboardVerticalOffset}
+    >
+      <InputWrapper
+        onPress={() => {
+          onPress();
+          editable && setIsFocused(true);
+          editable && inputRef.current?.focus();
+        }}
+      >
+        <BorderWrapper
+          active={isFocused}
+          color={
+            !hasError
+              ? isFocused
+                ? borderColorActive
+                : borderColorIdle
+              : borderColorError
+          }
+        >
+          <Placeholder
+            active={
+              isFocused ||
+              (textValue && textValue.length > 0) ||
+              (value && value.length > 0)
+            }
+          >
+            <MarginHorizontal>
+              {!hasError ? (
+                children
+              ) : (
+                <H4 color={borderColorError}>{error || hasError}</H4>
+              )}
+            </MarginHorizontal>
+          </Placeholder>
+
+          <MarginHorizontal>
+            <InputElement
+              ref={inputRef}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              onChangeText={(text) => setTextValue(text)}
+              defaultValue={defaultValue}
+              value={value}
+              multiline={multiline}
+              numberOfLines={numberOfLines}
+              maxLength={maxLength}
+              autoFocus={autoFocus}
+              keyboardType={keyboardType}
+              editable={editable}
+              active={isFocused}
+              style={style}
+            />
+          </MarginHorizontal>
+        </BorderWrapper>
+      </InputWrapper>
+    </KeyboardAvoidingView>
+  );
+};
+
+export default Input;