@bigbinary/neetoui-rn 0.0.123 → 0.0.126

package/src/components/SegmentPicker.js

@@ -0,0 +1,210 @@
+import PropTypes from "prop-types";
+import React, { useEffect, useCallback } from "react";
+import { Dimensions, StyleSheet } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { Typography, Touchable } from "@components";
+
+const defaultShadowStyle = {
+  shadowColor: "#000",
+  shadowOffset: {
+    width: 0,
+    height: 2,
+  },
+  shadowOpacity: 0.23,
+  shadowRadius: 2.62,
+
+  elevation: 4,
+};
+
+// eslint-disable-next-line neeto/no-dangling-constants
+const DEFAULT_SPRING_CONFIG = {
+  stiffness: 150,
+  damping: 20,
+  mass: 1,
+  overshootClamping: false,
+  restSpeedThreshold: 0.001,
+  restDisplacementThreshold: 0.001,
+};
+
+// So that it stretches in landscape mode.
+const width = Dimensions.get("screen").width - 32;
+
+/**
+ *
+ * A Segment Picker component that provides toggling between two or more views.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/segmentPicker/segmentpickers.png" />
+ * </div>
+ *
+ *   ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Container, SegmentPicker } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main(){
+ *   const [tabIndex, setTabIndex] = useState(1);
+ *
+ *  return (
+ *    <Container flex={1} alignItems="center" justifyContent="center">
+ *      <Container my={3}>
+ *        <SegmentPicker
+ *          tabs={["On", "Off"]}
+ *          currentIndex={tabIndex}
+ *          onChange={setTabIndex}
+ *        />
+ *      </Container>
+ *    </Container>
+ *  );
+ * }
+ * ```
+ */
+
+export const SegmentPicker = ({
+  tabs,
+  onChange,
+  currentIndex,
+  inactiveSegmentStyle,
+  activeSegmentStyle,
+  activeTextStyle,
+  inactiveTextStyle,
+  py,
+}) => {
+  const translateValue = (width - 4) / tabs?.length;
+  const tabTranslateValue = useSharedValue(0);
+
+  // useCallBack with an empty array as input, which will call inner lambda only once and memoize the reference for future calls
+  const memoizedTabPressCallback = useCallback(
+    index => {
+      onChange(index);
+    },
+    [onChange]
+  );
+
+  useEffect(() => {
+    tabTranslateValue.value = withSpring(
+      currentIndex * (translateValue * 1),
+      DEFAULT_SPRING_CONFIG
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentIndex]);
+
+  const tabTranslateAnimatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: tabTranslateValue.value }],
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[styles.defaultSegmentedControlWrapper, inactiveSegmentStyle]}
+    >
+      <Animated.View
+        style={[
+          styles.movingSegmentStyle,
+          activeSegmentStyle,
+          defaultShadowStyle,
+          StyleSheet.absoluteFill,
+          {
+            width: width / tabs?.length,
+          },
+          tabTranslateAnimatedStyles,
+        ]}
+      />
+
+      {tabs.map((label, index) => {
+        const currentIndexTextStyle =
+          currentIndex === index ? activeTextStyle : inactiveTextStyle;
+        return (
+          <Touchable
+            key={index}
+            flex={1}
+            elevation={6}
+            onPress={() => memoizedTabPressCallback(index)}
+            py={py}
+            activeOpacity={0.7}
+          >
+            <Typography
+              fontSize="xs"
+              textAlign="center"
+              color="font.grey800"
+              fontFamily="sf500"
+              {...currentIndexTextStyle}
+            >
+              {label}
+            </Typography>
+          </Touchable>
+        );
+      })}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  segmentedControlWrapper: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 8,
+    width: width,
+  },
+  defaultSegmentedControlWrapper: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 8,
+    backgroundColor: "#E5E5EA",
+    width: width,
+  },
+  movingSegmentStyle: {
+    top: 0,
+    marginVertical: 2,
+    marginHorizontal: 2,
+    borderRadius: 6,
+    backgroundColor: "#FFFFFF",
+  },
+});
+
+SegmentPicker.propTypes = {
+  /**
+   * Array of texts for the labels of each Segment/Tab.
+   */
+  tabs: PropTypes.arrayOf(PropTypes.string).isRequired,
+  /**
+   * Callback called with the new value when it changes.
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * Index value of the currently selected Segment/Tab.
+   */
+  currentIndex: PropTypes.number.isRequired,
+  /**
+   * To change the inactive segment container style.
+   */
+  inactiveSegmentStyle: PropTypes.object,
+  /**
+   * To change the active segment container style.
+   */
+  activeSegmentStyle: PropTypes.object,
+  /**
+   * To change the inactive segment font style.
+   */
+  inactiveTextStyle: PropTypes.object,
+  /**
+   * To change the active segment font style.
+   */
+  activeTextStyle: PropTypes.object,
+  py: PropTypes.number,
+};
+
+SegmentPicker.defaultProps = {
+  tabs: [],
+  onChange: () => {},
+  currentIndex: 0,
+  py: 12,
+};

package/src/components/Select.js

@@ -37,7 +37,7 @@ const DropdownItem = ({
       {...(isSelectedItem && selectedItemContainerStyle)}
     >
       <Typography
-        fontFamily="inter400"
+        fontFamily="sf400"
         fontSize="s"
         color={isSelectedItem ? "font.white" : "font.grey"}
         {...itemLabelStyle}
@@ -158,7 +158,9 @@ export const Select = ({
     dropdownContainerStyle?.maxHeight ||
     defaultDropdownItemHeight * Math.min(filteredOptions?.length, 6) +
       (isSearchable ? searchInputHeight + 10 : 0) +
-      (isOptionsEmpty ? emptyOptionsPlaceholderHeight : 0) +
+      (isOptionsEmpty && !(isSearchedOptionsEmpty && showCreateOption)
+        ? emptyOptionsPlaceholderHeight
+        : 0) +
       (isSearchedOptionsEmpty && showCreateOption
         ? emptySearchedOptionsHeight
         : 0);
@@ -213,7 +215,7 @@ export const Select = ({
   return (
     <Container {...containerStyle}>
       <Typography
-        fontFamily="inter400"
+        fontFamily="sf400"
         mb={1}
         fontSize="s"
         color="font.base"
@@ -235,7 +237,7 @@ export const Select = ({
           {...inputContainerStyle}
           {...rest}
         >
-          <Typography fontFamily="inter400" fontSize="s" color="font.grey">
+          <Typography fontFamily="sf400" fontSize="s" color="font.grey">
             {selectedOptionLabel || placeholder}
           </Typography>
           {isLoading ? (
@@ -277,7 +279,7 @@ export const Select = ({
                   />
                 </Container>
               )}
-              {isOptionsEmpty && (
+              {isOptionsEmpty && !(isSearchedOptionsEmpty && showCreateOption) && (
                 <Container
                   height={emptyOptionsPlaceholderHeight}
                   justifyContent="center"
@@ -285,7 +287,7 @@ export const Select = ({
                   {...emptyOptionsContainerStyle}
                 >
                   <Typography
-                    fontFamily="inter400"
+                    fontFamily="sf400"
                     fontSize="s"
                     color="font.grey"
                     {...emptyOptionsLabelStyle}
@@ -309,7 +311,7 @@ export const Select = ({
                     />
                   ) : (
                     <Typography
-                      fontFamily="inter400"
+                      fontFamily="sf400"
                       fontSize="s"
                       color="font.grey"
                       {...createSearchedOptionLabelStyle}

package/src/components/SocialButton.js

@@ -0,0 +1,89 @@
+import React, { useContext } from "react";
+import propTypes from "@styled-system/prop-types";
+import PropTypes from "prop-types";
+import { ThemeContext } from "styled-components/native";
+
+import AppleLogo from "@assets/icons/apple-logo.svg";
+import GoogleLogo from "@assets/icons/google-logo.svg";
+import { Container, Typography, Touchable } from "@components";
+
+/**
+ *
+ * Buttons are touchable elements used to interact with the screen and to trigger an action.
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/button/socialButtons.png" />
+ * </div>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Container, SocialButton } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *      <SocialButton variant="apple" my={9} />
+ *      <SocialButton variant="google" />
+ *    </Container>
+ *  );
+ * }
+ * ```
+ *
+ */
+
+export const SocialButton = props => {
+  const { variant, disabled, labelStyle, ...rest } = props;
+  const theme = useContext(ThemeContext);
+  const capitalize = str => `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
+
+  return (
+    <Touchable
+      rippleColor="black"
+      disabled={disabled}
+      bg="transparent"
+      height={45}
+      width="100%"
+      borderRadius={8}
+      borderWidth={1}
+      borderColor={theme.colors.border.black}
+      alignItems="center"
+      justifyContent="center"
+      {...rest}
+    >
+      <Container position="absolute" left={17}>
+        {variant === "apple" && <AppleLogo />}
+        {variant === "google" && <GoogleLogo />}
+      </Container>
+      <Typography
+        color={theme.colors.font.primary}
+        fontSize="m"
+        fontFamily={theme.fonts.sf500}
+        {...labelStyle}
+      >
+        Continue with {capitalize(variant)}
+      </Typography>
+    </Touchable>
+  );
+};
+
+SocialButton.propTypes = {
+  ...propTypes.buttonStyle,
+  ...propTypes.flexbox,
+  ...propTypes.space,
+  ...propTypes.border,
+  ...propTypes.layout,
+  ...propTypes.color,
+  /**
+   * Supported Type: 'apple' | 'google'
+   */
+  variant: PropTypes.oneOf(["apple", "google"]),
+  /**
+   * Enable or Disable the button
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Customize label style of the button
+   */
+  labelStyle: PropTypes.object,
+};

package/src/components/Toast.js

@@ -2,7 +2,82 @@ import * as React from "react";
 import PropTypes from "prop-types";
 import T from "react-native-toast-message";
 import { defaultToasterConfig } from "@config";
-import { useKeyboard } from "@react-native-community/hooks";
+import { useContext } from "react";
+import { ThemeContext } from "styled-components/native";
+import { useWindowDimensions } from "react-native";
+
+import SuccessIcon from "@assets/icons/success.svg";
+import WarningIcon from "@assets/icons/warning.svg";
+import InfoIcon from "@assets/icons/info.svg";
+import ErrorIcon from "@assets/icons/error.svg";
+import { Container, Typography } from "@components";
+
+const ToastComponent = ({ type, text1, text2 }) => {
+  const theme = useContext(ThemeContext);
+  const { width } = useWindowDimensions();
+  const Icon = () => {
+    switch (type) {
+      case "success":
+        return <SuccessIcon />;
+      case "warning":
+        return <WarningIcon />;
+      case "info":
+        return <InfoIcon />;
+      case "error":
+        return <ErrorIcon />;
+    }
+  };
+  return (
+    <Container
+      width={width - 20}
+      height={60}
+      borderRadius={16}
+      bg={theme.colors.background.secondary}
+      flexDirection="row"
+      alignItems="center"
+      px={10}
+      mx={10}
+    >
+      <Container
+        height={42}
+        width={42}
+        borderRadius={10}
+        bg={theme.colors.toast[type]}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Icon />
+      </Container>
+
+      <Container ml={10}>
+        {text1 && (
+          <Typography
+            fontFamily={theme.fonts.sf600}
+            fontSize="m"
+            fontColor={theme.colors.font.primary}
+          >
+            {text1}
+          </Typography>
+        )}
+        {text2 && (
+          <Typography
+            fontFamily={theme.fonts.sf400}
+            fontSize="xs"
+            fontColor={theme.colors.font.secondary}
+          >
+            {text2}
+          </Typography>
+        )}
+      </Container>
+    </Container>
+  );
+};
+
+ToastComponent.propTypes = {
+  type: PropTypes.string,
+  text1: PropTypes.string,
+  text2: PropTypes.string,
+};
 
 /**
  * Toast component is a wrapper over https://github.com/calintamas/react-native-toast-message.
@@ -32,7 +107,6 @@ import { useKeyboard } from "@react-native-community/hooks";
  *        onPress={() => {
  *          Toast.show({
  *            type: "error",
- *            position: "bottom",
  *            text1: "Yay!",
  *            text2: "Have a nice day! 😄",
  *          });
@@ -45,43 +119,24 @@ import { useKeyboard } from "@react-native-community/hooks";
  * @extends StyledSystems props /styled-system
  */
 
-let globalKeyboardState;
-// let toastOffsetValue;
-
 export const Toast = ({ toasterConfig, ...rest }) => {
-  const keyboard = useKeyboard();
-  // const screenDimensions = useDimensions().screen;
-
-  React.useEffect(() => {
-    globalKeyboardState = keyboard;
-    // toastOffsetValue =
-    //   Platform.OS === "ios"
-    //     ? screenDimensions.height - (globalKeyboardState.keyboardHeight + 50)
-    //     : screenDimensions.height - (globalKeyboardState.keyboardHeight + 130);
-  }, [keyboard]);
+  const customConfig = {
+    success: ToastComponent,
+    warning: ToastComponent,
+    info: ToastComponent,
+    error: ToastComponent,
+  };
 
   return (
     <T
       {...rest}
-      config={{ ...defaultToasterConfig, ...toasterConfig }}
-      position="bottom"
+      config={{ ...defaultToasterConfig, ...customConfig, ...toasterConfig }}
+      position="top"
     />
   );
 };
 
-Toast.show = params => {
-  // Rendering Toasts on top whenever keyboard is active.
-  if (globalKeyboardState.keyboardShown) {
-    T.show({
-      ...params,
-      position: "top",
-      // topOffset: toastOffsetValue,
-    });
-  } else {
-    T.show(params);
-  }
-};
-
+Toast.show = T.show;
 Toast.hide = T.hide;
 
 Toast.propTypes = {

package/src/components/ToggleSwitch.js

@@ -1,13 +1,13 @@
-import React, { useContext } from "react";
-import SwitchToggle from "react-native-switch-toggle";
+import React, { useContext, useEffect, useRef } from "react";
 import { ThemeContext } from "styled-components/native";
-import { StyleSheet } from "react-native";
+import { Animated } from "react-native";
 import PropTypes from "prop-types";
+import Icon from "react-native-remix-icon";
 
-import { Typography, Container } from "@components";
+import { Container, Touchable } from "@components";
 
 /**
- * ToggleSwitch component is a simple switch toggle component from react-native-switch-toggle along with a label which describes what is being switched ON/OFF.
+ * ToggleSwitch component is a simple switch toggle component describes what is being switched ON/OFF.
  *
  * <div class="screenshots">
  *   <img src="screenshots/toggleswitch/switchstyles.png" />
@@ -26,7 +26,6 @@ import { Typography, Container } from "@components";
  *     <ToggleSwitch
  *      value={switchOne}
  *      setValue={() => setSwitchOne(prevValue => !prevValue)}
- *      label="Conversation assigned to my group"
  *     />
  *   </Container>
  *  );
@@ -34,75 +33,59 @@ import { Typography, Container } from "@components";
  * ```
  */
 
-const Label = ({ label, textStyles }) => {
-  return (
-    <Typography textStyle="subtext" {...textStyles}>
-      {label}
-    </Typography>
-  );
-};
-
-export const ToggleSwitch = ({
-  value,
-  onValueChange,
-  label,
-  disabled,
-  labelPosition,
-  ...rest
-}) => {
+export const ToggleSwitch = ({ value, onValueChange, disabled }) => {
   const theme = useContext(ThemeContext);
+  const animatedPosition = useRef(new Animated.Value(value ? 1 : 0)).current;
+
+  useEffect(() => {
+    startAnimation();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  const startAnimation = () => {
+    Animated.timing(animatedPosition, {
+      toValue: value ? 20 : 0,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  };
 
-  const circleColorOn = disabled
-    ? theme.colors.background.grey500
-    : theme.colors.background.white;
-  const circleColorOff = disabled
-    ? theme.colors.background.menubackground
-    : theme.colors.background.white;
+  const containerBg = value ? "#5E5CE6" : "background.grey300";
+  const iconColor = value ? "#5E5CE6" : theme.colors.font.grey500;
 
   return (
-    <Container
-      flexDirection="row"
-      borderColor={theme.colors.border.primary}
-      alignItems="center"
-      {...rest.wrapperStyles}
+    <Touchable
+      disabled={disabled}
+      onPress={() => onValueChange(!value)}
+      width={44}
+      height={24}
+      bg={containerBg}
+      justifyContent="center"
+      px={1}
+      borderRadius={70}
+      opacity={disabled ? 0.5 : 1}
     >
-      {labelPosition === "left" && (
-        <Label label={label} textStyles={rest.textStyles} />
-      )}
-      <SwitchToggle
-        switchOn={value}
-        onPress={() => !disabled && onValueChange()}
-        circleColorOn={circleColorOn}
-        circleColorOff={circleColorOff}
-        backgroundColorOff={theme.colors.background.grey200}
-        backgroundColorOn={theme.colors.background.grey800}
-        containerStyle={styles.containerStyle}
-        circleStyle={styles.circleStyle}
-        {...rest.switchStyles}
-      />
-      {labelPosition === "right" && (
-        <Label label={label} textStyles={rest.textStyles} />
-      )}
-    </Container>
+      <Animated.View style={{ transform: [{ translateX: animatedPosition }] }}>
+        <Container
+          bg="background.white"
+          width={16}
+          height={16}
+          borderRadius={8}
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Icon
+            name={`ri-${value ? "check" : "close"}-line`}
+            size={12}
+            color={iconColor}
+          />
+        </Container>
+      </Animated.View>
+    </Touchable>
   );
 };
 
-ToggleSwitch.defaultProps = {
-  labelPosition: "left",
-  wrapperStyles: {},
-  switchStyles: {},
-  textStyles: { mr: 2 },
-};
-
 ToggleSwitch.propTypes = {
-  /**
-   * The text to use for the floating label.
-   */
-  label: PropTypes.string,
-  /**
-   * Prop that handles the label position.
-   */
-  labelPosition: PropTypes.string,
   /**
    * Value of the switch, true means 'on', false means 'off'.
    */
@@ -115,35 +98,4 @@ ToggleSwitch.propTypes = {
    * Disable toggling the switch.
    */
   disabled: PropTypes.bool,
-  /**
-   * Prop to handle custom wrapper styles.
-   */
-  wrapperStyles: PropTypes.object,
-  /**
-   * Prop to handle custom switch styles.
-   */
-  switchStyles: PropTypes.object,
-  /**
-   * Prop to handle custom text styles.
-   */
-  textStyles: PropTypes.object,
 };
-
-Label.propTypes = {
-  label: PropTypes.string,
-  textStyles: PropTypes.object,
-};
-
-const styles = StyleSheet.create({
-  containerStyle: {
-    width: 38,
-    height: 18,
-    borderRadius: 10,
-    padding: 2,
-  },
-  circleStyle: {
-    width: 14,
-    height: 14,
-    borderRadius: 7,
-  },
-});

package/src/components/Typography.js

@@ -45,8 +45,8 @@ export const Text = styled.Text`
  * </ul>
  *
  * <div class="screenshots">
- *   <img src="screenshots/typography/fontsizes.png" />
- *   <img src="screenshots/typography/textstyles.png" />
+ *   <img src="screenshots/typography/colors.png" />
+ *   <img src="screenshots/typography/fontfamilies.png" />
  * </div>
  *
  * <div class="screenshots">