@servesall/atoms 1.1.6 → 1.1.9

package/package.json

@@ -1,19 +1,16 @@
 {
   "name": "@servesall/atoms",
-  "version": "1.1.6",
+  "version": "1.1.9",
   "description": "Atoms for react-native",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
-  "directories": {
-    "doc": "docs"
-  },
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npm i --legacy-peer-deps && rollup -c && npm publish"
+    "build": "npm i && rollup -c && npm publish"
   },
   "repository": {
     "type": "git",
@@ -26,8 +23,7 @@
     "react-native-reanimated": "*"
   },
   "dependencies": {
-    "react-native-status-bar-height": "^2.6.0",
-    "styled-components": "^5.3.5"
+    "react-native-status-bar-height": "^2.6.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",
@@ -40,7 +36,6 @@
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "react-native-reanimated": "^2.8.0",
     "rollup": "^2.72.1",
     "rollup-plugin-node-polyfills": "^0.2.1"
   },

package/src/Buttons/RoundedButton/RoundedButton.style.js

@@ -5,8 +5,11 @@ export const ButtonWrapper = styled.View``;
 export const ButtonStyle = styled.Pressable`
   min-height: ${(props) => (props.size === "big" ? "60px" : "54px")};
   width: 100%;
-  border-radius: ${(props) => props.theme.borderRadiusMedium};
-  background-color: ${(props) => props.color};
-  opacity: ${(props) => (props.active ? 1 : 0.7)};
+  border-radius: ${(props) =>
+    props.smallBorder
+      ? props.theme.borderRadiusSmall
+      : props.theme.borderRadiusMedium};
+  background-color: ${(props) =>
+    props.active ? props.color : props.theme.greyButton};
   ${(props) => props.style};
 `;

package/src/Buttons/RoundedButton/index.js

@@ -14,6 +14,7 @@ const RoundedBtn = ({
   onClick = () => {},
   style,
   size = "big",
+  smallBorder = false,
   hitSlop = 0,
 }) => {
   const scale = useSharedValue(1);
@@ -32,6 +33,7 @@ const RoundedBtn = ({
   return (
     <Animated.View style={[animatedStyle]}>
       <ButtonStyle
+        smallBorder={smallBorder}
         hitSlop={hitSlop}
         size={size}
         active={active}

package/src/CountryFlatList/index.js

@@ -31,14 +31,14 @@ const Item = ({ item, setSelected, variant }) => {
                   uri: item.src,
                 }}
               />
-              <Row>
+              <Row style={{ alignItems: "center" }}>
                 <Box style={{ flex: 4 }}>
                   <MarginHorizontal>
                     <H4>{item.name}</H4>
                   </MarginHorizontal>
                 </Box>
                 {variant === "countryCode" && (
-                  <Box>
+                  <Box style={{ flex: 3 }}>
                     <MarginHorizontal>
                       <H4>{item.code}</H4>
                     </MarginHorizontal>

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

@@ -20,4 +20,15 @@ export const BorderWrapper = styled.View`
   border-radius: ${(props) => props.theme.borderRadiusSmall};
   background-color: ${(props) =>
     props.active ? props.theme.color1 : props.theme.color10};
+  ${({ isRightBound, isLeftBound, active }) => {
+    if (isRightBound) {
+      if (!active) {
+        return "borderTopRightRadius: 0px; borderBottomRightRadius: 0px; border-right-width: 0px;";
+      }
+      return "borderTopRightRadius: 0px; borderBottomRightRadius: 0px;";
+    }
+    if (isLeftBound) {
+      return "borderTopLeftRadius: 0px; borderBottomLeftRadius: 0px;";
+    }
+  }}
 `;

package/src/Inputs/InputNormal/index.js

@@ -24,6 +24,8 @@ const Input = ({
   keyboardVerticalOffset = 0,
   hasError = false,
   error,
+  isRightBound = false,
+  isLeftBound = false,
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [textValue, setTextValue] = useState(value || defaultValue);
@@ -50,6 +52,8 @@ const Input = ({
         }}
       >
         <BorderWrapper
+          isRightBound={isRightBound}
+          isLeftBound={isLeftBound}
           active={isFocused}
           color={
             !hasError

package/src/Inputs/PhoneNumber/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/PhoneNumber/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/PhoneNumber/index.js

@@ -0,0 +1,151 @@
+import React, { useEffect, useState, useRef } from "react";
+import { H4 } from "../../Text";
+import { MarginHorizontal, Row, Box } from "../../Layout";
+import { KeyboardAvoidingView, Platform } from "react-native";
+import { InputWrapper, InputElement, BorderWrapper } from "./Animated.style";
+import Placeholder from "./Placeholder";
+
+const InputPhone = ({
+  children,
+  style,
+  borderColorIdle,
+  borderColorActive,
+  borderColorError,
+  textChangePrefix = () => {},
+  textChangeNumber = () => {},
+  onPress = () => {},
+  valuePrefix,
+  valueNumber,
+  defaultValuePrefix,
+  defaultValueNumber,
+  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(valuePrefix || defaultValuePrefix);
+  const [isFocusedPrefix, setIsFocusedPrefix] = useState(false);
+  const [textPrefixValue, setTextPrefixValue] = useState(
+    valueNumber || defaultValueNumber
+  );
+  const inputRef = useRef();
+
+  useEffect(() => {
+    textChangeNumber(textValue);
+  }, [textValue]);
+
+  useEffect(() => {
+    textChangePrefix(textPrefixValue);
+  }, [textPrefixValue]);
+
+  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
+          }
+        >
+          <Row style={{ backgroundColor: "red", width: "100%" }}>
+            <Box>
+              <Placeholder
+                active={
+                  isFocusedPrefix ||
+                  (textPrefixValue && textPrefixValue.length > 0) ||
+                  (valuePrefix && valuePrefix.length > 0)
+                }
+              >
+                <MarginHorizontal>
+                  {!hasError ? (
+                    children[0]
+                  ) : (
+                    <H4 color={borderColorError}>{error || hasError}</H4>
+                  )}
+                </MarginHorizontal>
+              </Placeholder>
+            </Box>
+            <Box>
+              <Placeholder
+                active={
+                  isFocused ||
+                  (textValue && textValue.length > 0) ||
+                  (valueNumber && valueNumber.length > 0)
+                }
+              >
+                <MarginHorizontal>
+                  {!hasError ? (
+                    children[1]
+                  ) : (
+                    <H4 color={borderColorError}>{error || hasError}</H4>
+                  )}
+                </MarginHorizontal>
+              </Placeholder>
+            </Box>
+          </Row>
+
+          <MarginHorizontal>
+            <Row>
+              <InputElement
+                onFocus={() => setIsFocusedPrefix(true)}
+                onBlur={() => setIsFocusedPrefix(false)}
+                onChangeText={(text) => setTextPrefixValue(text)}
+                defaultValue={defaultValuePrefix}
+                value={valuePrefix}
+                multiline={multiline}
+                numberOfLines={numberOfLines}
+                maxLength={maxLength}
+                autoFocus={autoFocus}
+                keyboardType={keyboardType}
+                editable={editable}
+                active={isFocusedPrefix}
+                style={style}
+              />
+              <InputElement
+                ref={inputRef}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
+                onChangeText={(text) => setTextValue(text)}
+                defaultValue={defaultValueNumber}
+                value={valueNumber}
+                multiline={multiline}
+                numberOfLines={numberOfLines}
+                maxLength={maxLength}
+                autoFocus={autoFocus}
+                keyboardType={keyboardType}
+                editable={editable}
+                active={isFocused}
+                style={style}
+              />
+            </Row>
+          </MarginHorizontal>
+        </BorderWrapper>
+      </InputWrapper>
+    </KeyboardAvoidingView>
+  );
+};
+
+export default InputPhone;

package/src/Inputs/index.js

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

package/src/Theme/definitions/colors.js

@@ -36,6 +36,7 @@ const colors = {
   greenLight: "#F3FFFC",
   greenDark: "#236A56",
   greyText: "#b2bec3",
+  greyButton: "#94A3A9",
   red: "#ff7675",
   redlight: "#FFFAF9",
   redDark: "#9C4140",

package/src/index.js

@@ -22,7 +22,13 @@ import {
   Box,
   RoundedTopBox,
 } from "./Layout";
-import { Input, AnimatedPlaceholder, InputOtp, InputNormal } from "./Inputs";
+import {
+  Input,
+  AnimatedPlaceholder,
+  InputOtp,
+  InputNormal,
+  InputPhone,
+} from "./Inputs";
 import {
   TextBtn,
   RoundedBtn,
@@ -78,6 +84,7 @@ export {
   InputNormal,
   AnimatedPlaceholder,
   InputOtp,
+  InputPhone,
   TextBtn,
   RoundedBtn,
   RoundBtn,

package/src/Inputs/PhoneNumber/PrefixPicker/index.js

@@ -1,200 +0,0 @@
-import React, { useMemo, useCallback, useState, useEffect } from "react";
-import { View, StatusBar } from "react-native";
-import {
-  FullScreen,
-  Center,
-  Loader,
-  Success,
-  Error,
-  Switch,
-  Row,
-  Box,
-  Margin,
-  MarginHorizontal,
-  MarginVertical,
-  Padding,
-  H4,
-  H2,
-  H3,
-  RoundedBtn,
-  ErrorText,
-  MarginRight,
-  MarginBottom,
-  PaddingVertical,
-  PaddingTop,
-  useThemeContext,
-  Input,
-} from "@servesall/atoms";
-import BottomSheet, {
-  BottomSheetScrollView,
-  BottomSheetFooter,
-} from "@gorhom/bottom-sheet";
-import { useNavigation } from "@react-navigation/native";
-import { useSubmitHook } from "@servesall/organisms";
-import {
-  UserRolesQueryProvider,
-  useUserRoles,
-  UPDATE_MERCHANT_USER,
-} from "@servesall/merchantglobalstate";
-import LottieView from "lottie-react-native";
-
-export default function NewUser({ data }) {
-  const { merchant } = data;
-  const [selectedRole, setSelectedRole] = useState(false);
-  const [userPhoneNumber, setUserPhoneNumber] = useState("");
-  const [userPrefix, setUserPrefix] = useState("+356");
-  const theme = useThemeContext();
-  const navigation = useNavigation();
-
-  const { submitForm, loading, success, error, errorText } = useSubmitHook({
-    gql: UPDATE_MERCHANT_USER,
-    formState: { isValid: true, isDirty: true },
-  });
-
-  useEffect(() => {
-    success && setTimeout(() => navigation.goBack(), 1000);
-  }, [success]);
-
-  const submit = () => {};
-
-  // variables
-  const snapPoints = useMemo(() => ["90%"], []);
-
-  // callbacks
-  const handleSheetChanges = useCallback((index) => {
-    if (index === -1) {
-      navigation.goBack();
-    }
-  }, []);
-
-  const renderFooter = useCallback(
-    (props) => (
-      <BottomSheetFooter {...props} bottomInset={0}>
-        <View
-          style={{
-            backgroundColor: theme.color1,
-            borderTopWidth: 2,
-            borderColor: theme.color7,
-          }}
-        >
-          <Margin>
-            <RoundedBtn
-              active={
-                userPrefix !== "" && userPhoneNumber !== "" && selectedRole
-              }
-              size="small"
-              color={theme.color2}
-              onClick={submit}
-            >
-              <Center>
-                <H3 color={theme.color1}>Save</H3>
-              </Center>
-            </RoundedBtn>
-          </Margin>
-        </View>
-      </BottomSheetFooter>
-    ),
-    [selectedRole, userPhoneNumber, userPrefix]
-  );
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        backgroundColor: "rgba(0, 0, 0, 0.4)",
-      }}
-    >
-      <StatusBar barStyle="dark-content" backgroundColor="rgba(0, 0, 0, 0.4)" />
-
-      <BottomSheet
-        index={0}
-        snapPoints={snapPoints}
-        onChange={handleSheetChanges}
-        enablePanDownToClose={true}
-        footerComponent={renderFooter}
-      >
-        <BottomSheetScrollView contentContainerStyle={{ paddingBottom: 100 }}>
-          {loading && (
-            <FullScreen style={{ backgroundColor: "rgba(255, 255, 255, 0.8)" }}>
-              <Center>
-                <Loader color={theme.color2} />
-              </Center>
-            </FullScreen>
-          )}
-
-          {success && (
-            <FullScreen style={{ backgroundColor: "rgba(255, 255, 255, 0.8)" }}>
-              <Center>
-                <Success />
-              </Center>
-            </FullScreen>
-          )}
-
-          {error && (
-            <FullScreen style={{ backgroundColor: "rgba(255, 255, 255, 0.8)" }}>
-              <Center>
-                <Error />
-              </Center>
-            </FullScreen>
-          )}
-          <Box>
-            <View style={{ borderBottomWidth: 2, borderColor: theme.color7 }}>
-              <Margin style={{ alignItems: "center" }}>
-                <LottieView
-                  style={{
-                    width: 80,
-                  }}
-                  autoPlay={true}
-                  loop={true}
-                  source={adduser}
-                />
-                <PaddingTop>
-                  <H3>Add a new user to {merchant.profile.name}</H3>
-                </PaddingTop>
-              </Margin>
-            </View>
-
-            <Margin>
-              {errorText && (
-                <PaddingVertical>
-                  <ErrorText>
-                    <Center>
-                      <Padding>
-                        <H4 color={theme.red}>{errorText}</H4>
-                      </Padding>
-                    </Center>
-                  </ErrorText>
-                </PaddingVertical>
-              )}
-            </Margin>
-
-            <MarginBottom>
-              <Margin>
-                <H3>User phone number</H3>
-              </Margin>
-              <UserPhone
-                theme={theme}
-                setUserPhoneNumber={setUserPhoneNumber}
-                setUserPrefix={setUserPrefix}
-                userPrefix={userPrefix}
-              />
-            </MarginBottom>
-
-            <Margin>
-              <PaddingVertical>
-                <H3>Choose Role</H3>
-              </PaddingVertical>
-              <UserRolesQueryProvider>
-                <Roles
-                  selectedRole={selectedRole}
-                  setSelectedRole={setSelectedRole}
-                  theme={theme}
-                />
-              </UserRolesQueryProvider>
-            </Margin>
-          </Box>
-        </BottomSheetScrollView>
-      </BottomSheet>
-    </View>
-  );
-}