@servesall/atoms 1.0.57 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servesall/atoms",
-  "version": "1.0.57",
+  "version": "1.1.1",
   "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": {
@@ -33,7 +30,7 @@
     "react-native": ">= 0.63.2",
     "react-native-reanimated": ">=2.0.0-rc.3",
     "react-native-gesture-handler": ">= 1.10.1",
-    "lottie-react-native": "^4.0.2"
+    "lottie-react-native": ">= 4.0.2"
   },
   "devDependencies": {
     "@babel/cli": "7.8.4",

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/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;

package/src/Layout/index.js

@@ -6,6 +6,7 @@ import MarginHorizontal from "./MarginHorizontal";
 import MarginVertical from "./MarginVertical";
 import MarginBottom from "./MarginBottom";
 import MarginTop from "./MarginTop";
+import MarginRight from "./MarginRight";
 import Padding from "./Padding";
 import PaddingHorizontal from "./PaddingHorizontal";
 import PaddingVertical from "./PaddingVertical";
@@ -14,6 +15,8 @@ import Row from "./Row";
 import Stretch from "./Stretch";
 import FullScreen from "./FullScreen";
 import WebSmallWrapper from "./WebSmallWrapper";
+import Box from "./Box";
+import RoundedTopBox from "./RoundedTopBox";
 
 export {
   Center,
@@ -24,6 +27,7 @@ export {
   MarginVertical,
   MarginBottom,
   MarginTop,
+  MarginRight,
   Padding,
   PaddingHorizontal,
   PaddingVertical,
@@ -32,4 +36,6 @@ export {
   Stretch,
   FullScreen,
   WebSmallWrapper,
+  Box,
+  RoundedTopBox,
 };

package/src/Switch/index.js

@@ -46,6 +46,8 @@ export default function Switch({
   value = false,
   onValueChange = () => {},
   micro = false,
+  radio = false,
+  borderColor = false,
   style,
 }) {
   const [isEnabled, setIsEnabled] = useState(value);
@@ -53,7 +55,7 @@ export default function Switch({
     enabled &&
       setIsEnabled((previousState) => {
         onValueChange(!previousState);
-        return !previousState;
+        return !radio ? !previousState : true;
       });
   };
 
@@ -65,11 +67,17 @@ export default function Switch({
     <RoundedBtn
       style={{
         borderWidth: 1,
-        borderColor: isEnabled ? colors.color15 : colors.color10,
+        borderColor: isEnabled
+          ? borderColor
+            ? borderColor
+            : colors.color15
+          : borderColor
+          ? borderColor
+          : colors.color10,
         opacity: enabled ? 1 : 0.6,
         ...style,
       }}
-      color={colors.color1}
+      color="transparent"
       onClick={toggleSwitch}
     >
       <CheckMark isEnabled={isEnabled} micro={micro} />

package/src/Text/H5.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { H5 } from "./Text.style";
+
+const H5Text = ({
+  children,
+  style,
+  align = "left",
+  color,
+  fontFamily,
+  ...rest
+}) => {
+  return (
+    <H5
+      {...rest}
+      style={style}
+      align={align}
+      color={color}
+      fontFamily={fontFamily}
+    >
+      {children}
+    </H5>
+  );
+};
+
+H5Text.propTypes = {
+  style: PropTypes.object,
+};
+
+export default H5Text;

package/src/Text/Text.style.js

@@ -36,6 +36,15 @@ export const H4 = styled.Text`
   ${(props) => props.style};
 `;
 
+export const H5 = styled.Text`
+  font-size: ${(props) => props.theme.xssmall};
+  font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};
+  text-align: ${(props) => props.align};
+  color: ${(props) => props.color || props.theme.color2};
+  line-height: ${(props) => props.theme.xssmall};
+  ${(props) => props.style};
+`;
+
 export const Span = styled.Text`
   font-size: ${(props) => props.theme.small};
   font-family: ${(props) => props.fontFamily || props.theme.fontFamily1};

package/src/Text/index.js

@@ -1,8 +1,9 @@
-import H1 from './H1';
-import H2 from './H2';
-import H3 from './H3';
-import H4 from './H4';
-import P from './P';
-import Span from './Span';
+import H1 from "./H1";
+import H2 from "./H2";
+import H3 from "./H3";
+import H4 from "./H4";
+import H5 from "./H5";
+import P from "./P";
+import Span from "./Span";
 
-export { H1, H2, H3, H4, P, Span };
+export { H1, H2, H3, H4, H5, P, Span };

package/src/Theme/definitions/colors.js

@@ -1,6 +1,6 @@
 const colors = {
   color1: "#FFFFFF",
-  color2: "#000000",
+  color2: "#020202",
   color3: "#74b9ff",
   color3light: "#E1F0FF",
   color4: "#0984e3",
@@ -12,15 +12,17 @@ const colors = {
   color7: "#dfe6e9",
   color8: "#F8F9FB",
   color9: "#FFA15F",
-  color9light: "#FFF0E6",
+  color9light: "#F9F0EA",
+  color9dark: "#804F2D",
   color9border: "#DDD1C9",
   color10: "#F2F3F7",
   color11: "#00b894",
   color11light: "#EEFFFC",
   color11border: "#D2E3E0",
-  color12: "#a29bfe",
+  color12: "#9F8CD1",
   color12light: "#F5F4FF",
   color12border: "#DFDDEA",
+  color12dark: "#584E74",
   color13: "#fab1a0",
   color14: "#00b894",
   color15: "#00cec9",

package/src/Theme/definitions/fonts.js

@@ -1,4 +1,5 @@
 const fonts = {
+  xssmall: "14px",
   xsmall: "16px",
   lhXsmall: "15px",
   small: "18px",

package/src/index.js

@@ -1,5 +1,5 @@
 import { ThemeWrapper, useThemeContext } from "./Theme";
-import { H1, H2, H3, H4, P, Span } from "./Text";
+import { H1, H2, H3, H4, H5, P, Span } from "./Text";
 import {
   Center,
   CenterLeft,
@@ -9,6 +9,7 @@ import {
   MarginVertical,
   MarginBottom,
   MarginTop,
+  MarginRight,
   Padding,
   PaddingHorizontal,
   PaddingVertical,
@@ -17,6 +18,8 @@ import {
   Stretch,
   FullScreen,
   WebSmallWrapper,
+  Box,
+  RoundedTopBox,
 } from "./Layout";
 import { Input, AnimatedPlaceholder, InputOtp } from "./Inputs";
 import {
@@ -25,6 +28,7 @@ import {
   RoundBtn,
   FloatingBtn,
   AnimatedButton,
+  FeedbackButton,
 } from "./Buttons";
 import Loader from "./Loader";
 import Success from "./Success";
@@ -42,6 +46,7 @@ export {
   H2,
   H3,
   H4,
+  H5,
   P,
   Span,
   Center,
@@ -52,6 +57,7 @@ export {
   MarginVertical,
   MarginBottom,
   MarginTop,
+  MarginRight,
   Padding,
   PaddingHorizontal,
   PaddingVertical,
@@ -60,6 +66,8 @@ export {
   Stretch,
   FullScreen,
   WebSmallWrapper,
+  Box,
+  RoundedTopBox,
   Input,
   AnimatedPlaceholder,
   InputOtp,
@@ -68,6 +76,7 @@ export {
   RoundBtn,
   FloatingBtn,
   AnimatedButton,
+  FeedbackButton,
   Loader,
   Success,
   Error,