@servesall/atoms 1.0.51 → 1.0.57

package/src/Icons/Assets/toursResources.json

@@ -0,0 +1,228 @@
+{
+  "ip": 0,
+  "fr": 60,
+  "v": "5.1.20",
+  "assets": [],
+  "layers": [
+    {
+      "ty": 4,
+      "nm": "toursResources",
+      "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": [13, 9, 0] },
+        "p": {
+          "s": true,
+          "x": { "a": 0, "k": 13.621 },
+          "y": { "a": 0, "k": 12.04 }
+        },
+        "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": "toursResources shape group",
+          "it": [
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": false,
+                  "v": [
+                    [6.20812066, 22.4253184],
+                    [9.14678701, 24.2866516],
+                    [12.0907873, 22.4133174]
+                  ],
+                  "i": [
+                    [0, 0],
+                    [-1.2986666400000004, 0],
+                    [-0.5186667000000007, 1.1066666000000005]
+                  ],
+                  "o": [
+                    [0.5199999800000006, 1.1000000000000014],
+                    [1.3026666899999988, 0],
+                    [0, 0]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": true,
+                  "v": [
+                    [28.2907867, 21.0373179],
+                    [25.041453, 17.7879842],
+                    [21.7921206, 21.0373179],
+                    [25.041453, 24.2866516]
+                  ],
+                  "i": [
+                    [0, 1.7945572999999975],
+                    [1.794557300000001, 0],
+                    [0, -1.7945571999999999],
+                    [-1.7945571999999999, 0]
+                  ],
+                  "o": [
+                    [0, -1.7945571999999999],
+                    [-1.7945571999999999, 0],
+                    [0, 1.7945572999999975],
+                    [1.794557300000001, 0]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": false,
+                  "v": [
+                    [22.2654533, 15.0493177],
+                    [19.708121, 7.71331787],
+                    [16.1534538, 7.71331787]
+                  ],
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": false,
+                  "v": [
+                    [11.5601203, 10.597318],
+                    [8.48812071, 10.597318],
+                    [5.54412047, 9.3053182],
+                    [4.90012042, 8.60531807]
+                  ],
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0.7573333599999996, 0.8239999999999998],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [-1.1186666400000007, 0],
+                    [0, 0],
+                    [0, 0]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": false,
+                  "v": [
+                    [25.041453, 14.4373182],
+                    [18.5867869, 19.6506513],
+                    [18.5894547, 19.6506513],
+                    [14.5841204, 19.6506513],
+                    [9.14545441, 14.2119853],
+                    [3.70678711, 19.6506513],
+                    [14.5841204, 19.6506513]
+                  ],
+                  "i": [
+                    [0, 0],
+                    [0.6373333000000017, -2.9786666000000004],
+                    [0, 0],
+                    [0, 0],
+                    [3.0039999900000005, 0],
+                    [0, -3.0040000000000013],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [-3.1693333999999993, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, -3.0040000000000013],
+                    [-3.0040000299999994, 0],
+                    [0, 0],
+                    [0, 0]
+                  ]
+                }
+              }
+            },
+            {
+              "ty": "sh",
+              "ks": {
+                "a": 0,
+                "k": {
+                  "c": false,
+                  "v": [
+                    [24.296121, 10.597318],
+                    [24.296121, 8.60531807]
+                  ],
+                  "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": 1 },
+              "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, -7] },
+              "r": { "a": 0, "k": 0 }
+            }
+          ]
+        }
+      ],
+      "op": 1
+    }
+  ],
+  "op": 1,
+  "w": 28,
+  "h": 25
+}

package/src/Icons/Assets/visible.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"visible","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":[9,6.5,0]},"p":{"s":true,"x":{"a":0,"k":49.999999524764874},"y":{"a":0,"k":50.00049965677462}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[499.09999999999997,499.09999999999997]}},"shapes":[{"ty":"gr","nm":"visible shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[11.6667023,5.9460001],[8.99970245,8.61299992],[6.33270264,5.9460001],[8.99970245,3.27900028]],"i":[[0,0],[1.4730000500000013,0],[0,1.4730000499999996],[-1.4730000499999996,0]],"o":[[0,1.4730000499999996],[-1.4730000499999996,0],[0,-1.4730000500000004],[0,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":true,"v":[[8.99970245,0.61328125],[17.2494068,5.94653273],[8.99970245,11.2797823],[0.75,5.94653273]],"i":[[-3.6723422999999995,0],[-1.4162720999999987,-3.1443119100000003],[3.672342350000001,0],[1.41627145,3.14431142]],"o":[[3.672342350000001,0],[-1.4162720999999987,3.14431142],[-3.6723422999999995,0],[1.41627145,-3.1443119100000003]]}}},{"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":1.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":[0,1]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":100,"h":100}

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled from "styled-components/native";
 
 export const InputWrapper = styled.Pressable`
   min-height: 80px;
@@ -7,8 +7,9 @@ export const InputWrapper = styled.Pressable`
 export const InputElement = styled.TextInput`
   margin-top: 26px;
   min-height: 50px;
-  font-family: ${props => props.theme.fontFamily2};
-  font-size: ${props => props.theme.small};
+  font-family: ${(props) => props.theme.fontFamily2};
+  font-size: ${(props) => props.theme.small};
+  color: ${(props) => props.theme.color2};
 `;
 export const BorderWrapper = styled.View`
   height: 4px;

package/src/Inputs/Animated/index.js

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

package/src/Layout/Layout.style.js

@@ -87,6 +87,12 @@ export const PaddingVerticalElement = styled.View`
   ${(props) => props.style};
 `;
 
+export const PaddingTopElement = styled.View`
+  padding-top: ${(props) => props.theme.padding};
+  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
 export const RowElement = styled.View`
   flex-direction: row;
   ${(props) => props.style};

package/src/Layout/PaddingTop.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { PaddingTopElement } from "./Layout.style";
+
+const PaddingTop = ({ children, style, direction = false }) => {
+  return (
+    <PaddingTopElement style={style} flexDirection={direction}>
+      {children}
+    </PaddingTopElement>
+  );
+};
+
+export default PaddingTop;

package/src/Layout/index.js

@@ -9,6 +9,7 @@ import MarginTop from "./MarginTop";
 import Padding from "./Padding";
 import PaddingHorizontal from "./PaddingHorizontal";
 import PaddingVertical from "./PaddingVertical";
+import PaddingTop from "./PaddingTop";
 import Row from "./Row";
 import Stretch from "./Stretch";
 import FullScreen from "./FullScreen";
@@ -26,6 +27,7 @@ export {
   Padding,
   PaddingHorizontal,
   PaddingVertical,
+  PaddingTop,
   Row,
   Stretch,
   FullScreen,

package/src/Switch/index.js

@@ -0,0 +1,79 @@
+import React, { useState, useEffect, useRef } from "react";
+import { View } from "react-native";
+import LottieView from "lottie-react-native";
+import switchIcon from "./switch.json";
+import { RoundedBtn } from "../Buttons";
+import colors from "../Theme/definitions/colors";
+import { Center } from "../Layout";
+
+const CheckMark = ({ isEnabled, micro }) => {
+  const loadingRef = useRef();
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: micro ? -7 : 10,
+        right: micro ? -7 : 10,
+        width: 30,
+        height: 30,
+        borderRadius: 15,
+        borderWidth: 1,
+        borderColor: isEnabled ? colors.color1 : colors.color10,
+        backgroundColor: colors.color1,
+      }}
+    >
+      <Center>
+        {isEnabled && (
+          <LottieView
+            ref={loadingRef}
+            style={{
+              height: 30,
+              width: 30,
+            }}
+            autoPlay={true}
+            loop={false}
+            source={switchIcon}
+          />
+        )}
+      </Center>
+    </View>
+  );
+};
+
+export default function Switch({
+  children,
+  enabled = true,
+  value = false,
+  onValueChange = () => {},
+  micro = false,
+  style,
+}) {
+  const [isEnabled, setIsEnabled] = useState(value);
+  const toggleSwitch = () => {
+    enabled &&
+      setIsEnabled((previousState) => {
+        onValueChange(!previousState);
+        return !previousState;
+      });
+  };
+
+  useEffect(() => {
+    setIsEnabled(value);
+  }, [value]);
+
+  return (
+    <RoundedBtn
+      style={{
+        borderWidth: 1,
+        borderColor: isEnabled ? colors.color15 : colors.color10,
+        opacity: enabled ? 1 : 0.6,
+        ...style,
+      }}
+      color={colors.color1}
+      onClick={toggleSwitch}
+    >
+      <CheckMark isEnabled={isEnabled} micro={micro} />
+      {children}
+    </RoundedBtn>
+  );
+}

package/src/Switch/switch.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":[50],"e":[50.05400195600987],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":12}]},"y":{"a":1,"k":[{"t":0,"s":[50],"e":[49.946001956009866],"i":{"x":[0.515],"y":[0.955]},"o":{"x":[0.455],"y":[0.03]}},{"t":12}]}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":1,"k":[{"t":0,"s":[11,11],"e":[66.7,66.7],"i":{"x":[0.515,0.515],"y":[0.955,0.955]},"o":{"x":[0.455,0.455],"y":[0.03,0.03]}},{"t":12}]}},"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":[85.2835427,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":2,"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":[-28.156,92.301]},"r":{"a":0,"k":310.02746294528845}}]},{"ty":"gr","nm":"success shape group","it":[{"ty":"rc","s":{"a":0,"k":[43,15]},"r":{"a":0,"k":7},"p":{"a":0,"k":[58.5,85.6007333]}},{"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":[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":[85.687,-14.236]},"r":{"a":0,"k":50.019215514920866}}]},{"ty":"gr","nm":"success shape group","it":[{"ty":"el","p":{"a":0,"k":[75,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":2,"c":{"a":0,"k":[0.3333333333333333,0.9372549019607843,0.7686274509803922,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.784,0]},"r":{"a":0,"k":0}}]}],"op":12}],"op":12,"w":100,"h":100}

package/src/Theme/definitions/colors.js

@@ -1,19 +1,31 @@
 const colors = {
   color1: "#FFFFFF",
-  color2: "#2d3436",
+  color2: "#000000",
   color3: "#74b9ff",
+  color3light: "#E1F0FF",
   color4: "#0984e3",
   color5: "#ffeaa7",
+  color5light: "#FFF9E5",
+  color5border: "#E4E0D2",
   color6: "#ff7675",
+  color6light: "#FFDCDB",
   color7: "#dfe6e9",
-  color8: "#fafafa",
+  color8: "#F8F9FB",
   color9: "#FFA15F",
-  color10: "#f6f7fb",
+  color9light: "#FFF0E6",
+  color9border: "#DDD1C9",
+  color10: "#F2F3F7",
   color11: "#00b894",
+  color11light: "#EEFFFC",
+  color11border: "#D2E3E0",
   color12: "#a29bfe",
+  color12light: "#F5F4FF",
+  color12border: "#DFDDEA",
   color13: "#fab1a0",
   color14: "#00b894",
   color15: "#00cec9",
   color16: "#636e72",
+  color17: "#6c5ce7",
+  color18: "#81ecec",
 };
 export default colors;

package/src/Theme/definitions/fonts.js

@@ -1,5 +1,5 @@
 const fonts = {
-  xsmall: "12px",
+  xsmall: "16px",
   lhXsmall: "15px",
   small: "18px",
   lhSmall: "21px",

package/src/Theme/definitions/layout.js

@@ -1,7 +1,7 @@
 const layout = {
-  margin: '20px',
-  padding: '10px',
-  borderRadius: '8px',
-  borderRadiusSmall: '8px'
+  margin: "16px",
+  padding: "10px",
+  borderRadius: "8px",
+  borderRadiusSmall: "8px",
 };
 export default layout;

package/src/index.js

@@ -12,6 +12,7 @@ import {
   Padding,
   PaddingHorizontal,
   PaddingVertical,
+  PaddingTop,
   Row,
   Stretch,
   FullScreen,
@@ -32,6 +33,7 @@ import Icon from "./Icons";
 import FlatList from "./FlatList";
 import Header from "./Header";
 import BottomNavBar from "./BottomNavBar";
+import Switch from "./Switch";
 
 export {
   ThemeWrapper,
@@ -53,6 +55,7 @@ export {
   Padding,
   PaddingHorizontal,
   PaddingVertical,
+  PaddingTop,
   Row,
   Stretch,
   FullScreen,
@@ -72,4 +75,5 @@ export {
   FlatList,
   Header,
   BottomNavBar,
+  Switch,
 };