@servesall/atoms 1.0.55 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servesall/atoms",
-  "version": "1.0.55",
+  "version": "1.1.0",
   "description": "Atoms for react-native",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
@@ -22,10 +22,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.18",
     "@killerwink/lottie-react-native-color": "^1.0.2",
-    "react-native-gesture-handler": "^1.10.3",
-    "react-native-reanimated": "^2.0.0",
     "react-native-status-bar-height": "^2.6.0",
-    "react-native-web": "^0.15.0",
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {

package/src/Buttons/FeedbackButton/FloatingButton.js

@@ -0,0 +1,90 @@
+import React, { useEffect } from "react";
+import { Dimensions } from "react-native";
+import { ButtonStyle } from "./FloatingButton.style";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  withSequence,
+  Easing,
+  withDelay,
+} from "react-native-reanimated";
+
+const RoundedBtn = ({
+  children,
+  active,
+  color,
+  onClick = () => {},
+  loading,
+  LoaderElement,
+  successElement,
+  success,
+  error,
+  errorElement,
+  leftElement = false,
+}) => {
+  const scale = useSharedValue(1);
+  const width = useSharedValue("100%");
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: scale.value,
+      transform: [
+        {
+          scale: scale.value,
+        },
+      ],
+    };
+  });
+
+  const animatedWidth = useAnimatedStyle(() => {
+    return {
+      width: width.value,
+    };
+  });
+
+  useEffect(() => {
+    if (loading) {
+      width.value = withTiming(70, {
+        duration: 250,
+      });
+    } else {
+      width.value = withDelay(
+        800,
+        withTiming("100%", {
+          duration: 250,
+        })
+      );
+    }
+  }, [loading]);
+
+  return (
+    <Animated.View style={[animatedStyle, animatedWidth]}>
+      <ButtonStyle
+        active={active}
+        color={color}
+        success={success}
+        error={error}
+        onPress={() => {
+          scale.value = withSequence(
+            withTiming(0.9, {
+              duration: 80,
+            }),
+            withTiming(1, {
+              duration: 200,
+              easing: Easing.in(Easing.elastic(1.4)),
+            })
+          );
+          onClick();
+        }}
+      >
+        {success && successElement}
+        {error && errorElement}
+        {!success && !error && loading && LoaderElement}
+        {!success && !error && !loading && children}
+      </ButtonStyle>
+    </Animated.View>
+  );
+};
+
+export default RoundedBtn;

package/src/Buttons/FeedbackButton/FloatingButton.style.js

@@ -0,0 +1,10 @@
+import styled from "styled-components/native";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+
+export const ButtonStyle = styled(TouchableWithoutFeedback)`
+  min-height: 60px;
+  border-radius: ${(props) => props.theme.borderRadius};
+  background-color: ${(props) =>
+    props.success || props.error ? "transparent" : props.color};
+  opacity: ${(props) => (props.active ? 1 : 0.7)};
+`;

package/src/Buttons/FeedbackButton/index.js

@@ -0,0 +1,120 @@
+import React, { useEffect } from "react";
+import { Dimensions } from "react-native";
+import { Center } from "../../Layout";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  Easing,
+} from "react-native-reanimated";
+import FloatingButton from "./FloatingButton";
+
+const AnimatedButton = ({
+  children,
+  active,
+  color,
+  onClick = () => {},
+  loading,
+  leftElement,
+  LoaderElement,
+  successElement,
+  success,
+  error,
+  errorElement,
+  style,
+}) => {
+  const scale = useSharedValue(1);
+  const width = useSharedValue("100%");
+  const height = useSharedValue("100%");
+  const right = useSharedValue(0);
+  const left = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: scale.value,
+      transform: [
+        {
+          scale: scale.value,
+        },
+      ],
+    };
+  });
+
+  const animatedAbsolute = useAnimatedStyle(() => {
+    return {
+      minWidth: width.value,
+      height: height.value,
+      right: right.value,
+      left: left.value,
+    };
+  });
+
+  useEffect(() => {
+    if (loading) {
+      width.value = withTiming(Dimensions.get("window").width, {
+        duration: 250,
+      });
+      height.value = withTiming(Dimensions.get("window").height, {
+        duration: 250,
+      });
+      right.value = withTiming(0, {
+        duration: 250,
+        easing: Easing.in(Easing.elastic(2)),
+      });
+    } else {
+      setTimeout(() => {
+        width.value = withTiming("100%", {
+          duration: 200,
+        });
+        height.value = withTiming("100%", {
+          duration: 200,
+        });
+        right.value = withTiming(0, {
+          duration: 200,
+          easing: Easing.in(Easing.elastic(2)),
+        });
+      }, 600);
+    }
+  }, [loading]);
+
+  return (
+    <Animated.View
+      style={[
+        {
+          flex: 1,
+          position: "absolute",
+          height: "auto",
+          minWidth: 70,
+          zIndex: 11,
+          backgroundColor:
+            loading || success || error
+              ? "rgba(255, 255, 255, 0.8)"
+              : "rgba(255, 255, 255, 0)",
+        },
+        animatedAbsolute,
+      ]}
+    >
+      <Center>
+        <Animated.View style={[animatedStyle]}>
+          <FloatingButton
+            active={active}
+            color={color}
+            onClick={onClick}
+            loading={loading}
+            leftElement={leftElement}
+            LoaderElement={LoaderElement}
+            successElement={successElement}
+            errorElement={errorElement}
+            success={success}
+            error={error}
+            style={style}
+          >
+            {children}
+          </FloatingButton>
+        </Animated.View>
+      </Center>
+    </Animated.View>
+  );
+};
+
+export default AnimatedButton;

package/src/Buttons/TextButton/LineAnimation/LineAnimation.style.js

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

package/src/Buttons/TextButton/TextButton.style.js

@@ -1,8 +1,15 @@
-import styled from 'styled-components/native';
+import styled from "styled-components/native";
 
-export const ButtonWrapper = styled.Pressable`
-`;
+export const ButtonWrapper = styled.Pressable``;
 
 export const BorderWrapper = styled.View`
-  height: 4px;
+  height: 18px;
+  position: absolute;
+  width: 100%;
+  bottom: 10;
+  z-index: 0;
+`;
+
+export const ChildWrapper = styled.View`
+  z-index: 2;
 `;

package/src/Buttons/TextButton/index.js

@@ -1,32 +1,40 @@
-import React, {useState, useEffect} from 'react';
-import {ButtonWrapper, BorderWrapper} from './TextButton.style';
-import LineAnimation from './LineAnimation';
+import React, { useState, useEffect } from "react";
+import { ButtonWrapper, BorderWrapper, ChildWrapper } from "./TextButton.style";
+import LineAnimation from "./LineAnimation";
 
-const TextBtn = ({children, active, disabled = false, borderColorActive, borderColorIdle, onClick=() => {}, style}) => {
+const TextBtn = ({
+  children,
+  active,
+  disabled = false,
+  borderColorActive,
+  borderColorIdle,
+  onClick = () => {},
+  style,
+}) => {
+  const [isActive, setIsActive] = useState(active);
 
-    const [isActive, setIsActive] = useState(active);
+  useEffect(() => {
+    setIsActive(active);
+  }, [active]);
 
-    useEffect(() => {
-        setIsActive(active);
-      }, [active]);
-
-    return (
-        <ButtonWrapper
-            disabled={disabled}
-            onPress={() => {
-                onClick();
-                active !== false && setIsActive(true);
-            }}>
-            {children}
-            <BorderWrapper>
-                <LineAnimation
-                    active={isActive}
-                    borderColorActive={borderColorActive}
-                    borderColorIdle={borderColorIdle}
-                />
-            </BorderWrapper>
-        </ButtonWrapper>
-    );
+  return (
+    <ButtonWrapper
+      disabled={disabled}
+      onPress={() => {
+        onClick();
+        active !== false && setIsActive(true);
+      }}
+    >
+      <ChildWrapper>{children}</ChildWrapper>
+      <BorderWrapper>
+        <LineAnimation
+          active={isActive}
+          borderColorActive={borderColorActive}
+          borderColorIdle={borderColorIdle}
+        />
+      </BorderWrapper>
+    </ButtonWrapper>
+  );
 };
 
 export default TextBtn;

package/src/Buttons/index.js

@@ -3,5 +3,13 @@ import RoundedBtn from "./RoundedButton";
 import RoundBtn from "./RoundButton";
 import FloatingBtn from "./FloatingButton";
 import AnimatedButton from "./AnimatedButton";
+import FeedbackButton from "./FeedbackButton";
 
-export { TextBtn, RoundedBtn, RoundBtn, FloatingBtn, AnimatedButton };
+export {
+  TextBtn,
+  RoundedBtn,
+  RoundBtn,
+  FloatingBtn,
+  AnimatedButton,
+  FeedbackButton,
+};

package/src/Icons/Assets/index.js

@@ -72,6 +72,8 @@ import sportsResources from "./sportsResources.json";
 import toursResources from "./toursResources.json";
 import plus from "./plus.json";
 import minus from "./minus.json";
+import visible from "./visible.json";
+import nonVisible from "./non-visible.json";
 
 const allCategories = {
   restaurants,
@@ -147,6 +149,8 @@ const allCategories = {
   toursResources,
   plus,
   minus,
+  visible,
+  nonVisible,
 };
 
 export default allCategories;

package/src/Icons/Assets/non-visible.json

@@ -0,0 +1 @@
+{"ip":0,"fr":60,"v":"5.1.20","assets":[],"layers":[{"ty":4,"nm":"not-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":[11,11,0]},"p":{"s":true,"x":{"a":0,"k":49.99999870020041},"y":{"a":0,"k":49.99999870020041}},"rx":{"a":0,"k":0},"ry":{"a":0,"k":0},"rz":{"a":0,"k":0},"s":{"a":0,"k":[459.70000000000005,459.70000000000005]}},"shapes":[{"ty":"gr","nm":"not-visible shape group","it":[{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[11.3699694,4.71196842],[10.0009689,4.61196876],[1.5779686,9.94596863],[3.33296847,12.4649687]],"i":[[0,0],[0.46499999999999986,0],[1.4989999500000002,-3.1510000199999997],[-0.7139999800000001,-0.7330000000000005]],"o":[[-0.44700000000000095,-0.06599999999999984],[-3.7209999200000006,0],[0.4449999900000001,0.935999970000001],[0,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[8.6669693,15.184968],[10.0009689,15.2799692],[18.4239693,9.94596863],[16.6679688,7.42596817]],"i":[[0,0],[-0.4529999799999995,0],[-1.4989999999999988,3.1510000700000003],[0.7149998999999987,0.7329999799999998]],"o":[[0.4350000000000005,0.062000000000001165],[3.721,0],[-0.4450000000000003,-0.9359999899999991],[0,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[7.38896847,9.40796852],[9.45996857,7.33396816]],"i":[[0,0],[-1.0399999599999994,0.21399999999999952]],"o":[[0.21300000000000008,-1.0399999600000012],[0,0]]}}},{"ty":"sh","ks":{"a":0,"k":{"c":false,"v":[[19.3329697,0.66796875],[0.66796875,19.3329697]],"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.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":[1,1]},"r":{"a":0,"k":0}}]}],"op":1}],"op":1,"w":100,"h":100}

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/Box.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { BoxElement } from "./Layout.style";
+
+const Box = ({ children, color = "", style, direction = false }) => {
+  return (
+    <BoxElement
+      style={{ backgroundColor: color, ...style }}
+      flexDirection={direction}
+    >
+      {children}
+    </BoxElement>
+  );
+};
+
+export default Box;

package/src/Layout/Layout.style.js

@@ -69,6 +69,12 @@ export const MarginTopElement = styled.View`
   ${(props) => props.style};
 `;
 
+export const MarginRightElement = styled.View`
+  margin-right: ${(props) => props.theme.margin};
+  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
 export const PaddingElement = styled.View`
   padding: ${(props) => props.theme.padding};
   flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
@@ -105,6 +111,12 @@ export const StretchElement = styled.View`
   ${(props) => props.style};
 `;
 
+export const BoxElement = styled.View`
+  flex: 1;
+  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  ${(props) => props.style};
+`;
+
 export const FullScreenElement = styled.View`
   position: absolute;
   top: 0;

package/src/Layout/MarginRight.js

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

package/src/Layout/RoundedTopBox.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { BoxElement } from "./Layout.style";
+
+const RoundedTopBox = ({ children, color = "", style, direction = false }) => {
+  return (
+    <BoxElement
+      style={{
+        backgroundColor: color,
+        borderTopLeftRadius: 30,
+        borderTopRightRadius: 30,
+        overflow: "hidden",
+        ...style,
+      }}
+      flexDirection={direction}
+    >
+      {children}
+    </BoxElement>
+  );
+};
+
+export default RoundedTopBox;