@servesall/atoms 1.1.0 → 1.1.5

package/src/Inputs/index.js

@@ -1,5 +1,6 @@
 import Input from "./Animated";
 import AnimatedPlaceholder from "./AnimatedPlaceholder";
-import InputOtp from './Otp';
+import InputOtp from "./Otp";
+import InputNormal from "./InputNormal";
 
-export { Input, AnimatedPlaceholder, InputOtp };
+export { Input, AnimatedPlaceholder, InputOtp, InputNormal };

package/src/Layout/Layout.style.js

@@ -99,6 +99,12 @@ export const PaddingTopElement = styled.View`
   ${(props) => props.style};
 `;
 
+export const PaddingBottomElement = styled.View`
+  padding-bottom: ${(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/PaddingBottom.js

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

package/src/Layout/index.js

@@ -11,6 +11,7 @@ import Padding from "./Padding";
 import PaddingHorizontal from "./PaddingHorizontal";
 import PaddingVertical from "./PaddingVertical";
 import PaddingTop from "./PaddingTop";
+import PaddingBottom from "./PaddingBottom";
 import Row from "./Row";
 import Stretch from "./Stretch";
 import FullScreen from "./FullScreen";
@@ -32,6 +33,7 @@ export {
   PaddingHorizontal,
   PaddingVertical,
   PaddingTop,
+  PaddingBottom,
   Row,
   Stretch,
   FullScreen,

package/src/Loader/index.js

@@ -1,10 +1,9 @@
-import React, {useRef} from 'react';
-import LottieView from 'lottie-react-native';
-import loader from './loader.json';
-import {LoaderWrapper} from './Loading.style';
-import changeSVGColor from '@killerwink/lottie-react-native-color';
+import React, { useRef } from "react";
+import LottieView from "lottie-react-native";
+import loader from "./loader.json";
+import { LoaderWrapper } from "./Loading.style";
 
-export default function Loader({color, style}) {
+export default function Loader({ color, style }) {
   const loadingRef = useRef();
 
   return (
@@ -14,13 +13,18 @@ export default function Loader({color, style}) {
         style={{
           height: 100,
           width: 100,
-            ...style,
+          ...style,
         }}
         autoPlay={true}
         loop={true}
-        source={changeSVGColor(loader, color)}
+        colorFilters={[
+          {
+            keypath: "LOADER",
+            color: color,
+          },
+        ]}
+        source={loader}
       />
     </LoaderWrapper>
   );
-};
-
+}

package/src/SlideToConfirm/Swipe.style.js

@@ -0,0 +1,24 @@
+import styled from "styled-components/native";
+import Animated from "react-native-reanimated";
+
+export const Wrapper = styled.View`
+  flex: 1;
+`;
+
+export const RoundWrapper = styled(Animated.View)`
+  width: 100%;
+  border-radius: ${(props) => props.theme.borderRadius};
+  overflow: hidden;
+  padding: 8px;
+  border-width: 2px;
+  ${(props) => props.style};
+`;
+
+export const RoundSlider = styled.View`
+  width: 62px;
+  height: 52px;
+  background-color: ${(props) => props.theme.color1};
+  border-radius: ${(props) => props.theme.borderRadiusMedium};
+  border-width: 2px;
+  ${(props) => props.style};
+`;

package/src/SlideToConfirm/index.js

@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from "react";
+import { Wrapper, RoundWrapper, RoundSlider } from "./Swipe.style";
+import { PanGestureHandler } from "react-native-gesture-handler";
+import Animated, {
+  useAnimatedGestureHandler,
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  interpolate,
+  Extrapolate,
+  interpolateColor,
+  runOnJS,
+} from "react-native-reanimated";
+import { theme } from "../Theme/definitions";
+
+const BTN_WIDTH = 62;
+const BTN_PADDING = 16;
+const BTN_BORDER = 4;
+const GRACE_DISTANCE = 15;
+
+const WIDTH_TO_REMOVE = BTN_WIDTH + BTN_PADDING + GRACE_DISTANCE + BTN_BORDER;
+const WIDTH_FINAL = BTN_WIDTH + BTN_PADDING + BTN_BORDER;
+
+const SwipeButton = ({
+  children,
+  borderColor,
+  backgroundColor,
+  swipeChild,
+  onChange = () => {},
+}) => {
+  const [toggled, setToggled] = useState(false);
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    toggled && onChange();
+  }, [toggled]);
+
+  const onLayout = (event) => {
+    const { width } = event.nativeEvent.layout;
+    setWidth(width);
+  };
+
+  const x = useSharedValue(0);
+
+  const gestureHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx) => {
+      ctx.startX = x.value;
+    },
+    onActive: (event, ctx) => {
+      if (event.translationY > 60 || event.translationY < -60) {
+        x.value = withSpring(0);
+      } else {
+        if (ctx.startX + event.translationX > width - WIDTH_TO_REMOVE) {
+          x.value = width - WIDTH_FINAL;
+          runOnJS(setToggled)(true);
+        } else {
+          x.value = ctx.startX + event.translationX;
+        }
+      }
+    },
+    onEnd: (_) => {
+      if (toggled) {
+        x.value = width - WIDTH_FINAL;
+      } else {
+        x.value = withSpring(0);
+      }
+    },
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: x.value,
+        },
+      ],
+    };
+  });
+
+  const InterpolateXInput = [0, width];
+
+  const colorWave = useAnimatedStyle(() => {
+    return {
+      width: x.value + BTN_WIDTH + BTN_PADDING,
+      opacity: interpolate(x.value, InterpolateXInput, [0, 1]),
+    };
+  });
+
+  const animatedBorder = useAnimatedStyle(() => {
+    return {
+      borderColor: interpolateColor(
+        x.value,
+        [0, width - WIDTH_FINAL],
+        [theme.color7, borderColor]
+      ),
+    };
+  });
+
+  const animatedText = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        x.value,
+        InterpolateXInput,
+        [1, 0],
+        Extrapolate.CLAMP
+      ),
+      transform: [
+        {
+          translateX: x.value,
+        },
+      ],
+    };
+  });
+
+  return (
+    <Wrapper onLayout={onLayout}>
+      <RoundWrapper style={[animatedBorder]}>
+        <Animated.View
+          style={[
+            colorWave,
+            {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: BTN_WIDTH + BTN_PADDING,
+              backgroundColor: backgroundColor,
+              borderTopRightRadius: 12,
+              borderBottomRightRadius: 12,
+            },
+          ]}
+        />
+        <Animated.View
+          style={[
+            animatedText,
+            {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: BTN_WIDTH + BTN_PADDING,
+            },
+          ]}
+        >
+          {children}
+        </Animated.View>
+        <PanGestureHandler onGestureEvent={gestureHandler}>
+          <Animated.View style={[animatedStyle]}>
+            <RoundSlider style={{ backgroundColor, borderColor }}>
+              {swipeChild}
+            </RoundSlider>
+          </Animated.View>
+        </PanGestureHandler>
+      </RoundWrapper>
+    </Wrapper>
+  );
+};
+
+export default SwipeButton;

package/src/Switch/index.js

@@ -6,7 +6,7 @@ import { RoundedBtn } from "../Buttons";
 import colors from "../Theme/definitions/colors";
 import { Center } from "../Layout";
 
-const CheckMark = ({ isEnabled, micro }) => {
+const CheckMark = ({ fat, isEnabled, micro }) => {
   const loadingRef = useRef();
   return (
     <View
@@ -17,8 +17,8 @@ const CheckMark = ({ isEnabled, micro }) => {
         width: 30,
         height: 30,
         borderRadius: 15,
-        borderWidth: 1,
-        borderColor: isEnabled ? colors.color1 : colors.color10,
+        borderWidth: fat ? 2 : 1,
+        borderColor: isEnabled ? colors.color1 : colors.color7,
         backgroundColor: colors.color1,
       }}
     >
@@ -46,6 +46,7 @@ export default function Switch({
   value = false,
   onValueChange = () => {},
   micro = false,
+  fat = false,
   radio = false,
   borderColor = false,
   style,
@@ -66,22 +67,22 @@ export default function Switch({
   return (
     <RoundedBtn
       style={{
-        borderWidth: 1,
+        borderWidth: fat ? 2 : 1,
         borderColor: isEnabled
           ? borderColor
             ? borderColor
             : colors.color15
           : borderColor
           ? borderColor
-          : colors.color10,
+          : colors.color7,
         opacity: enabled ? 1 : 0.6,
         ...style,
       }}
       color="transparent"
       onClick={toggleSwitch}
     >
-      <CheckMark isEnabled={isEnabled} micro={micro} />
       {children}
+      <CheckMark fat={fat} isEnabled={isEnabled} micro={micro} />
     </RoundedBtn>
   );
 }

package/src/Text/Text.style.js

@@ -32,7 +32,7 @@ export const H4 = styled.Text`
   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.xsmall};
+  line-height: ${(props) => props.theme.small};
   ${(props) => props.style};
 `;
 

package/src/Theme/definitions/colors.js

@@ -1,6 +1,6 @@
 const colors = {
   color1: "#FFFFFF",
-  color2: "#020202",
+  color2: "#2d3436",
   color3: "#74b9ff",
   color3light: "#E1F0FF",
   color4: "#0984e3",
@@ -19,7 +19,7 @@ const colors = {
   color11: "#00b894",
   color11light: "#EEFFFC",
   color11border: "#D2E3E0",
-  color12: "#9F8CD1",
+  color12: "#6c5ce7",
   color12light: "#F5F4FF",
   color12border: "#DFDDEA",
   color12dark: "#584E74",
@@ -29,5 +29,22 @@ const colors = {
   color16: "#636e72",
   color17: "#6c5ce7",
   color18: "#81ecec",
+  darkYellow: "#fdcb6e",
+  darkYellowLight: "#FFF2D9",
+  darkYellowDark: "#8C6F39",
+  green: "#55efc4",
+  greenLight: "#F3FFFC",
+  greenDark: "#236A56",
+  greyText: "#b2bec3",
+  red: "#ff7675",
+  redlight: "#FFFAF9",
+  redDark: "#9C4140",
+  blue: "#74b9ff",
+  blueLight: "#E1F0FF",
+  darkBlue: "#0984e3",
+  darkBlueLight: "#CFEAFF",
+  purple: "#6c5ce7",
+  purpleLight: "#F9F8FF",
+  purpleDark: "#372E78",
 };
 export default colors;

package/src/Theme/definitions/layout.js

@@ -2,6 +2,7 @@ const layout = {
   margin: "16px",
   padding: "10px",
   borderRadius: "8px",
+  borderRadiusMedium: "16px",
   borderRadiusSmall: "8px",
 };
 export default layout;

package/src/index.js

@@ -14,6 +14,7 @@ import {
   PaddingHorizontal,
   PaddingVertical,
   PaddingTop,
+  PaddingBottom,
   Row,
   Stretch,
   FullScreen,
@@ -21,7 +22,7 @@ import {
   Box,
   RoundedTopBox,
 } from "./Layout";
-import { Input, AnimatedPlaceholder, InputOtp } from "./Inputs";
+import { Input, AnimatedPlaceholder, InputOtp, InputNormal } from "./Inputs";
 import {
   TextBtn,
   RoundedBtn,
@@ -29,6 +30,7 @@ import {
   FloatingBtn,
   AnimatedButton,
   FeedbackButton,
+  AnimatedRoundedButton,
 } from "./Buttons";
 import Loader from "./Loader";
 import Success from "./Success";
@@ -38,6 +40,9 @@ import FlatList from "./FlatList";
 import Header from "./Header";
 import BottomNavBar from "./BottomNavBar";
 import Switch from "./Switch";
+import SwipeButton from "./SlideToConfirm";
+import ErrorText from "./ErrorText";
+import CountryList from "./CountryFlatList";
 
 export {
   ThemeWrapper,
@@ -62,6 +67,7 @@ export {
   PaddingHorizontal,
   PaddingVertical,
   PaddingTop,
+  PaddingBottom,
   Row,
   Stretch,
   FullScreen,
@@ -69,6 +75,7 @@ export {
   Box,
   RoundedTopBox,
   Input,
+  InputNormal,
   AnimatedPlaceholder,
   InputOtp,
   TextBtn,
@@ -85,4 +92,8 @@ export {
   Header,
   BottomNavBar,
   Switch,
+  SwipeButton,
+  ErrorText,
+  AnimatedRoundedButton,
+  CountryList,
 };