@bigbinary/neetoui-rn 0.0.125 → 0.0.126

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">

package/src/components/index.js

@@ -1,4 +1,5 @@
 export { Button } from "./Button";
+export { SocialButton } from "./SocialButton";
 export { Container } from "./Container";
 export { Typography } from "./Typography";
 export { Input } from "./Input";
@@ -25,3 +26,8 @@ export { MultiSelect } from "./MultiSelect";
 export { Divider } from "./Divider";
 export { FlatList } from "./FlatList";
 export { ScrollView } from "./ScrollView";
+export { SegmentPicker } from "./SegmentPicker";
+export { ListItem } from "./ListItem";
+export { Carousel } from "./Carousel";
+export { OnBoarding } from "./OnBoarding";
+export { SearchBar } from "./SearchBar";

package/src/config/toasterConfig.js

@@ -121,12 +121,12 @@ const styles = StyleSheet.create({
   },
   text1Style: {
     fontSize: 15,
-    fontFamily: theme.fonts.inter700,
+    fontFamily: theme.fonts.sf700,
     color: theme.colors.font.white,
   },
   text2Style: {
     fontSize: 16,
-    fontFamily: theme.fonts.inter700,
+    fontFamily: theme.fonts.sf700,
     color: theme.colors.font.white,
   },
   closeButtonStyle: {

package/src/hooks/index.js

@@ -1 +1,2 @@
 export { useKeyboard } from "./useKeyboard";
+export { useDebounce } from "./useDebounce";

package/src/hooks/useDebounce.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+
+export function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/theme/index.js

@@ -1,19 +1,19 @@
 const defaultColors = {
   white: "#ffffff",
   black: "#000000",
-  base: "#2f3941",
+  base: "#4557F8",
   danger: "#ff6969",
-  menubackground: "#f4f5f7",
+  menubackground: "#F6F6FA",
 };
 
 const toastBorderColors = {
-  success: "#5cb85c",
-  error: "#d9534f",
-  info: "#5bc0de",
-  warning: "#f0ad4e",
+  success: "#00BA88",
+  error: "#F56A58",
+  info: "#276EF1",
+  warning: "#F3CD82",
 };
 
-const greyVarients = {
+const greyVariants = {
   grey: "#828282",
   grey100: "#f8f9f9",
   grey200: "#e9ebed",
@@ -21,27 +21,48 @@ const greyVarients = {
   grey400: "#c2c8cc",
   grey500: "#87929d",
   grey600: "#68737d",
+  grey700: "#49545C",
   grey800: "#2f3941",
 };
 
+const purpleVariants = {
+  purple800: "#342DF4",
+  purple700: "#4557F8",
+  purple600: "#7280FA",
+  purple500: "#5E5CE6",
+};
+
+const greenVariants = {
+  green800: "#00956D",
+  green700: "#00BA88",
+  green600: "#33C8A0",
+  green500: "#34C759",
+};
+
 const colors = {
   font: {
-    primary: "#1b1f23",
-    secondary: "#828282",
+    primary: "#2F3941",
+    secondary: "#49545C",
     ...defaultColors,
-    ...greyVarients,
+    ...greyVariants,
+    ...purpleVariants,
+    ...greenVariants,
   },
   background: {
     parentView: "#ffffff",
     primary: "#ffffff",
-    secondary: "#e4e4e7",
+    secondary: "#F6F6FA",
     ...defaultColors,
-    ...greyVarients,
+    ...greyVariants,
+    ...purpleVariants,
+    ...greenVariants,
   },
   border: {
-    primary: "#e4e4e7",
-    ...greyVarients,
+    primary: "#E9EBED",
+    secondary: "#C2C8CC",
+    ...greyVariants,
     ...defaultColors,
+    ...purpleVariants,
   },
   toast: {
     ...toastBorderColors,
@@ -54,25 +75,30 @@ const baseTheme = {
     // We can add below commented fonts later as follows. Also add font faces in index.web.js for the web.
     // https://www.bigbinary.com/learn-react-native/adding-custom-fonats
 
-    // inter100: "Inter-Thin",
-    // inter200: "Inter-ExtraLight",
-    // inter300: "Inter-Light",
-    // inter500: "Inter-Medium",
-    // inter600: "Inter-SemiBold",
-    // inter800: "Inter-ExtraBold",
-    // inter900: "Inter-Black",
+    // sf100: "SFProText-Thin",
+    // sf200: "SFProText-ExtraLight",
+    // sf300: "SFProText-Light",
+    // sf800: "SFProText-ExtraBold",
+    // sf900: "SFProText-Black",
 
-    inter400: "Inter-Regular",
-    inter700: "Inter-Bold",
+    sf400: "SFProText-Regular",
+    sf500: "SFProText-Medium",
+    sf600: "SFProText-Semibold",
+    sf700: "SFProText-Bold",
   },
   lineHeights: [24],
   fontSizes: {
-    xs: 10,
-    s: 12,
-    m: 14,
-    l: 18,
-    xl: 24,
-    xxl: 32,
+    "3xs": 10,
+    "2xs": 12,
+    xs: 13,
+    s: 14,
+    m: 15,
+    l: 16,
+    xl: 17,
+    "2xl": 18,
+    "3xl": 20,
+    "4xl": 22,
+    "5xl": 30,
   },
 };
 
@@ -87,16 +113,21 @@ export const theme = {
     },
     header: {
       color: baseTheme.colors.font.primary,
-      fontSize: baseTheme.fontSizes.l,
-      fontFamily: baseTheme.fonts.inter700,
+      fontSize: baseTheme.fontSizes["3xl"],
+      fontFamily: baseTheme.fonts.sf700,
+    },
+    modalHeader: {
+      color: baseTheme.colors.font.black,
+      fontSize: baseTheme.fontSizes["xl"],
+      fontFamily: baseTheme.fonts.sf600,
     },
     body: {
-      color: baseTheme.colors.font.primary,
-      fontSize: baseTheme.fontSizes.m,
+      color: baseTheme.colors.font.grey500,
+      fontSize: baseTheme.fontSizes.s,
     },
     subtext: {
       color: baseTheme.colors.font.primary,
-      fontSize: baseTheme.fontSizes.s,
+      fontSize: baseTheme.fontSizes["2xs"],
     },
 
     // buttonTextStyles