@bigbinary/neetoui-rn 0.0.124 → 0.0.127

package/src/components/OnBoarding.js

@@ -0,0 +1,116 @@
+import React, { useRef, useState } from "react";
+import PropTypes from "prop-types";
+
+import { Button, Carousel, Container, Typography } from "@components";
+
+/**
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/carousel/carousel.png" />
+ * </div>
+ *
+ * This component supports below props categories from [styled-system ](/styled-system).
+ * <ul>
+ * <li>flexbox</li>
+ * <li>space</li>
+ * <li>border</li>
+ * <li>layout</li>
+ * <li>color</li>
+ * <li>buttonStyle</li>
+ * </ul>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from "react";
+ * import { OnBoarding } from "@bigbinary/neetoui-rn";
+ *
+ * export default function Main() {
+ *
+ *  return (
+ *    <OnBoarding
+ *      appLogo={Neeto}
+ *      slides={[
+ *          {title: "Welcome to neetoInovice", description: "Enter your daily ...", illustration:""},
+ *          {title: "", description: "", illustration:""}
+ *      ]}
+ *      onComplete={() =>{ console.log("Completed");}}
+ * />
+ *  );
+ * }
+ * ```
+ *
+ */
+
+export const OnBoarding = ({
+  appLogo: AppLogo,
+  slides,
+  onComplete,
+  logoWidth = 150,
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const onBoardingRef = useRef();
+
+  const handleOnPress = () => {
+    if (activeIndex !== slides.length - 1) {
+      onBoardingRef.current.snapToNext();
+      setActiveIndex(onBoardingRef.current._activeItem);
+    } else onComplete();
+  };
+
+  const renderItem = ({ item }) => {
+    return (
+      <Container flex={1} justifyContent="space-between">
+        <Container />
+        <Container alignItems="center" mx={24} my={12}>
+          {item.illustration}
+        </Container>
+        <Container alignItems="center" mx={24} my={12}>
+          <Typography fontFamily="sf700" fontSize="4xl" color="font.grey800">
+            {item.title}
+          </Typography>
+          <Typography
+            fontFamily="sf400"
+            fontSize="l"
+            color="font.grey500"
+            textAlign="center"
+          >
+            {item.description}
+          </Typography>
+        </Container>
+      </Container>
+    );
+  };
+
+  return (
+    <Container flex={1} mb={52} mt={27}>
+      <Container alignItems="center">
+        <AppLogo width={logoWidth} />
+      </Container>
+
+      <Container flex={1} justifyContent="center" alignItems="center">
+        <Carousel
+          carouselRef={onBoardingRef}
+          itemArray={slides}
+          onSnapToItem={index => {
+            setActiveIndex(index);
+          }}
+          renderItem={renderItem}
+        />
+      </Container>
+
+      <Container mx={24}>
+        <Button
+          label={activeIndex !== slides.length - 1 ? "Next" : "Get Started"}
+          onPress={handleOnPress}
+        />
+      </Container>
+    </Container>
+  );
+};
+
+OnBoarding.propTypes = {
+  appLogo: PropTypes.func.isRequired,
+  slides: PropTypes.array.isRequired,
+  onComplete: PropTypes.func.isRequired,
+  logoWidth: PropTypes.number,
+};

package/src/components/OtpInputs.js

@@ -53,7 +53,7 @@ const styles = {
   },
   defaultTextStyles: {
     fontSize: theme.fontSizes.xl,
-    fontFamily: theme.fonts.inter700,
+    fontFamily: theme.fonts.sf700,
   },
 };
 

package/src/components/Popover.js

@@ -45,7 +45,19 @@ PopOverItem.propTypes = {
   fontFamily: PropTypes.string,
   fontSize: PropTypes.oneOfType([
     PropTypes.number,
-    PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]),
+    PropTypes.oneOf([
+      "3xs",
+      "2xs",
+      "xs",
+      "s",
+      "m",
+      "l",
+      "xl",
+      "2xl",
+      "3xl",
+      "4xl",
+      "5xl",
+    ]),
   ]),
 };
 

package/src/components/RadioButton.js

@@ -1,14 +1,14 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import Proptypes from "prop-types";
+import { ThemeContext } from "styled-components/native";
 
-import { Container, Touchable, Typography } from "@components";
-const labelPositions = ["left", "right"];
-
-const LabelComponent = ({ label, labelComponent, labelProp }) => {
-  return labelComponent || <Typography {...labelProp}>{label}</Typography>;
-};
+import { Container, Typography, Touchable } from "@components";
 
 /**
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/radioButton/radioButton.png" />
+ * </div>
  *
  * This component supports below props categories from [styled-system ](/styled-system).
  * <ul>
@@ -26,149 +26,123 @@ const LabelComponent = ({ label, labelComponent, labelProp }) => {
  * import { Container, RadioButton } from "@bigbinary/neetoui-rn";
  *
  * export default function Main() {
- *  const [selected, setSelected] = useState(false);
+ *  const [selected1, setSelected1] = useState(true);
+ *  const [selected2, setSelected2] = useState(false);
  *
- *   return (
- *     <Container>
+ *  return (
+ *    <Container>
  *      <RadioButton
- *       selected={selected}
- *       onSelect={() => setSelected(!selected)}
- *       label="option label 1"
- *       labelPosition="left"
+ *        mt={2}
+ *        selected={selected1}
+ *        onSelect={() => setSelected1(prev => !prev)}
+ *        label={`Radio button marked as ${!selected1 ? "un" : ""}selected`}
  *      />
- *     </Container>
- *   );
- *  }
+ *      <RadioButton
+ *        mt={3}
+ *        selected={selected2}
+ *        onSelect={() => setSelected2(prev => !prev)}
+ *        label={`Radio button marked as ${!selected2 ? "un" : ""}selected`}
+ *      />
+ *      <RadioButton mt={3} disabled label="Disabled Radio button" />
+ *    </Container>
+ *  );
+ * }
  * ```
  *
  */
 
 export const RadioButton = ({
-  radioButtonWidth = 20,
-  radioButtonSelectedWidth = 10,
-  containerBg = "background.grey",
-  innerActiveBg = "background.base",
-  innerInActiveBg = "background.secondary",
-  onSelect = () => {},
-  selected = null,
-  density = 5,
-  label = "Option",
-  labelComponent = null,
-  labelProp = {},
-  labelPosition = "right",
-  disabled = false,
+  selected,
+  onSelect,
+  disabled,
+  label,
+  radioButtonStyle,
+  labelStyle,
   ...rest
 }) => {
+  const theme = useContext(ThemeContext);
+  const disabledProps = {
+    borderColor: theme.colors.border.secondary,
+    labelProps: {
+      color: theme.colors.font.grey400,
+    },
+  };
+  const selectedProps = {
+    borderWidth: 4,
+    borderColor: theme.colors.background.base,
+    labelProps: {
+      fontFamily: theme.fonts.sf500,
+      color: theme.colors.font.primary,
+    },
+  };
+  const unselectedProps = {
+    borderWidth: 2,
+    borderColor: theme.colors.border.secondary,
+    labelProps: {
+      fontFamily: theme.fonts.sf400,
+      color: theme.colors.font.secondary,
+    },
+  };
   return (
     <Touchable
       disabled={disabled}
-      opacity={disabled ? 0.5 : 1}
       onPress={onSelect}
       flexDirection="row"
       alignItems="center"
-      py={1}
       {...rest}
     >
-      {labelPosition === labelPositions[0] ? (
-        <LabelComponent
-          label={label}
-          labelComponent={labelComponent}
-          labelProp={{ mr: 2, ...labelProp }}
-        />
-      ) : null}
       <Container
-        bg={containerBg}
-        height={radioButtonWidth}
-        width={radioButtonWidth}
-        borderRadius={radioButtonWidth / 2}
-        justifyContent="center"
-        alignItems="center"
+        height={16}
+        width={16}
+        borderRadius={8}
+        bg={theme.colors.background.white}
+        {...(selected && selectedProps)}
+        {...(!selected && unselectedProps)}
+        {...(disabled && disabledProps)}
+        {...radioButtonStyle}
+      />
+      <Typography
+        ml={2}
+        fontSize="m"
+        {...(selected && selectedProps.labelProps)}
+        {...(!selected && unselectedProps.labelProps)}
+        {...(disabled && disabledProps.labelProps)}
+        {...labelStyle}
       >
-        <Container
-          height={radioButtonSelectedWidth + density}
-          width={radioButtonSelectedWidth + density}
-          borderRadius={(radioButtonSelectedWidth + density) / 2}
-          bg="background.white"
-          justifyContent="center"
-          alignItems="center"
-        >
-          <Container
-            bg={selected ? innerActiveBg : innerInActiveBg}
-            height={radioButtonSelectedWidth}
-            width={radioButtonSelectedWidth}
-            borderRadius={radioButtonSelectedWidth / 2}
-            m={1}
-          />
-        </Container>
-      </Container>
-      {labelPosition === labelPositions[1] ? (
-        <LabelComponent
-          label={label}
-          labelComponent={labelComponent}
-          labelProp={{ ml: 2, ...labelProp }}
-        />
-      ) : null}
+        {label}
+      </Typography>
     </Touchable>
   );
 };
 
 RadioButton.propTypes = {
   /**
-   * Function to execute on press.
-   */
-  onSelect: PropTypes.func.isRequired,
-  /**
-   * Whether radio is selected.
-   */
-  selected: PropTypes.any.isRequired,
-  /**
-   * Text label to be shown with radio button.
+   * Whether radio button is selected or not.
    */
-  label: PropTypes.string,
+  selected: Proptypes.bool.isRequired,
   /**
-   * Props for the label.
-   */
-  labelProp: PropTypes.object,
-  /**
-   * Label can passed as a component as well.
-   */
-  labelComponent: PropTypes.element,
-  /**
-   * Position of label relative to the radio button. It can be either `left` or `right`
-   */
-  labelPosition: PropTypes.oneOf(labelPositions),
-  /**
-   * Whether radio is disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Size of radio button.
-   */
-  radioButtonWidth: PropTypes.number,
-  /**
-   * Size of radio button when selected.
+   * Function to execute on press.
    */
-  radioButtonSelectedWidth: PropTypes.number,
+  onSelect: Proptypes.func.isRequired,
   /**
-   * Background color of radio button.
+   * To disable the component.
    */
-  containerBg: PropTypes.string,
+  disabled: Proptypes.bool,
   /**
-   * Color of radio button when selected.
+   * Text label to be shown with radio button.
    */
-  innerActiveBg: PropTypes.string,
+  label: Proptypes.string,
   /**
-   * Color of radio button when not selected.
+   * Customize radio button style.
    */
-  innerInActiveBg: PropTypes.string,
+  radioButtonStyle: Proptypes.object,
   /**
-   * Thickness of radio button container component.
+   * Customize label style.
    */
-  density: PropTypes.number,
+  labelStyle: Proptypes.object,
 };
 
-LabelComponent.propTypes = {
-  label: PropTypes.string,
-  labelComponent: PropTypes.element,
-  labelProp: PropTypes.object,
+RadioButton.defaultProps = {
+  selected: false,
+  onSelect: () => {},
 };

package/src/components/SearchBar.js

@@ -0,0 +1,134 @@
+import React, { useEffect, useRef, useState } from "react";
+import { TextInput, Animated, StyleSheet } from "react-native";
+import PropTypes from "prop-types";
+import Icon from "react-native-remix-icon";
+
+import { Container, Button } from "@components";
+import { useDebounce } from "@hooks";
+import { theme } from "@theme";
+
+/**
+ * SearchBars are used to search or filter items.
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Container, SearchBar } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *      <SearchBar placeholder="Search" onChangeText={() => {}} />
+ *    </Container>
+ *  );
+ * }
+ * ```
+ */
+
+export const SearchBar = props => {
+  const {
+    placeholder = "Search",
+    onChangeText = () => {},
+    debounceDelay = 1000,
+    ...rest
+  } = props;
+  const inputRef = useRef();
+  const [searchText, setSearchText] = useState("");
+  const debouncedSearchTextValue = useDebounce(
+    searchText,
+    Number(debounceDelay)
+  );
+  const searchAnimationController = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    onChangeText(debouncedSearchTextValue);
+  }, [debouncedSearchTextValue, onChangeText]);
+
+  const animateSearchInput = val => {
+    Animated.timing(searchAnimationController, {
+      toValue: val,
+      duration: 350,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const searchInputWidth = searchAnimationController.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["100%", "85%"],
+  });
+
+  const onCancelHandle = () => {
+    animateSearchInput(0);
+    setSearchText("");
+    inputRef.current.blur();
+  };
+
+  return (
+    <Container flexDirection="row" alignItems="center">
+      <Animated.View
+        style={{
+          ...styles.inputContainerStyles,
+          width: searchInputWidth,
+        }}
+      >
+        <Container px={10}>
+          <Icon
+            name="ri-search-line"
+            size={20}
+            color={theme.colors.font.grey600}
+          />
+        </Container>
+        <TextInput
+          ref={inputRef}
+          value={searchText}
+          onChangeText={setSearchText}
+          onFocus={() => {
+            animateSearchInput(1);
+          }}
+          onBlur={() => {
+            if (!searchText) animateSearchInput(0);
+          }}
+          placeholder={placeholder}
+          fontSize={16}
+          flex={1}
+          placeholderTextColor={theme.colors.font.grey600}
+          color="font.primary"
+          {...rest.searchbarProps}
+        />
+      </Animated.View>
+      <Animated.View
+        style={{
+          opacity: searchAnimationController,
+        }}
+      >
+        <Button variant="text" label="Cancel" onPress={onCancelHandle} />
+      </Animated.View>
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  inputContainerStyles: {
+    height: 42,
+    borderWidth: 1,
+    borderColor: theme.colors.border.grey400,
+    borderRadius: 8,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});
+
+SearchBar.propTypes = {
+  /**
+   * Set the placeholder text
+   */
+  placeholder: PropTypes.string,
+  /**
+   * Method to fire when text is changed
+   */
+  onChangeText: PropTypes.func.isRequired,
+  /**
+   * Takes numeric value which is used to set the debounce delay
+   */
+  debounceDelay: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};