@bigbinary/neetoui-rn 0.0.223 → 0.0.225

package/src/components/{Button.js → Button.jsx}

@@ -1,11 +1,12 @@
-/* eslint-disable @bigbinary/neeto/no-dangling-constants */
 import React, { useContext } from "react";
+
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
 import { ThemeContext } from "styled-components/native";
 
 import { Typography, Touchable, Container, Loader } from "@components";
 
+// eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
 export const BUTTON_VARIANTS = Object.freeze({
   SOLID: "solid",
   SECONDARY: "secondary",
@@ -144,25 +145,27 @@ export const Button = ({
         variant
       ) &&
       disabled
-    )
+    ) {
       return 0.5;
+    }
+
     return 1;
   };
 
   return (
     <Touchable
-      rippleColor={getButtonColors().ripple}
-      disabled={disabled || isLoading}
+      alignItems="center"
       bg={getButtonColors().bg}
-      height={48}
-      width={width}
+      borderColor={getButtonColors().border}
       borderRadius={8}
+      borderWidth={1}
+      disabled={disabled || isLoading}
       flexDirection="row"
-      alignItems="center"
+      height={48}
       justifyContent="center"
-      borderColor={getButtonColors().border}
-      borderWidth={1}
       opacity={renderOpacity()}
+      rippleColor={getButtonColors().ripple}
+      width={width}
       {...rest}
     >
       {isLoading ? (
@@ -170,11 +173,11 @@ export const Button = ({
           <Loader color={getButtonColors().color} />
           {!!loadingText && (
             <Typography
-              textAlign="center"
-              mx={2}
               color={color || getButtonColors().color}
-              fontSize={fontSize}
               fontFamily={fontFamily || theme.fonts.sf500}
+              fontSize={fontSize}
+              mx={2}
+              textAlign="center"
               {...labelStyle}
             >
               {loadingText}
@@ -185,11 +188,11 @@ export const Button = ({
         <>
           {LeftIcon && <LeftIcon />}
           <Typography
-            textAlign="center"
-            mx={2}
             color={color || getButtonColors().color}
-            fontSize={fontSize}
             fontFamily={fontFamily || theme.fonts.sf500}
+            fontSize={fontSize}
+            mx={2}
+            textAlign="center"
             {...labelStyle}
           >
             {label}

package/src/components/{ButtonGroup.js → ButtonGroup.jsx}

@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import PropTypes from "prop-types";
 
 import { Container, Typography, Touchable } from "@components";
@@ -39,44 +40,40 @@ export const ButtonGroup = ({
   wrapperStyle,
   buttonStyle,
   buttonTextStyle,
-}) => {
-  return (
-    <Container
-      my={3}
-      border="1px solid"
-      borderRadius={2}
-      borderColor={activeColor}
-      flexDirection="row"
-      justifyContent="space-between"
-      alignSelf="center"
-      {...wrapperStyle}
-    >
-      {buttonItems.map(item => {
-        return (
-          <Touchable
-            key={item}
-            bg={item === currentActiveBtn ? activeColor : inActiveColor}
-            p={2}
-            px={3}
-            onPress={() => {
-              if (item !== currentActiveBtn) {
-                onPress(item);
-              }
-            }}
-            {...buttonStyle}
-          >
-            <Typography
-              color={item === currentActiveBtn ? inActiveColor : activeColor}
-              {...buttonTextStyle}
-            >
-              {item}
-            </Typography>
-          </Touchable>
-        );
-      })}
-    </Container>
-  );
-};
+}) => (
+  <Container
+    alignSelf="center"
+    border="1px solid"
+    borderColor={activeColor}
+    borderRadius={2}
+    flexDirection="row"
+    justifyContent="space-between"
+    my={3}
+    {...wrapperStyle}
+  >
+    {buttonItems.map(item => (
+      <Touchable
+        bg={item === currentActiveBtn ? activeColor : inActiveColor}
+        key={item}
+        p={2}
+        px={3}
+        onPress={() => {
+          if (item !== currentActiveBtn) {
+            onPress(item);
+          }
+        }}
+        {...buttonStyle}
+      >
+        <Typography
+          color={item === currentActiveBtn ? inActiveColor : activeColor}
+          {...buttonTextStyle}
+        >
+          {item}
+        </Typography>
+      </Touchable>
+    ))}
+  </Container>
+);
 
 ButtonGroup.defaultProps = {
   activeColor: "background.grey600",

package/src/components/{Calendar.js → Calendar.jsx}

@@ -1,8 +1,9 @@
 import React, { useContext } from "react";
+
 import dayjs from "dayjs";
 import PropTypes from "prop-types";
-import { ThemeContext } from "styled-components/native";
 import { Calendar as RNCalender } from "react-native-calendars";
+import { ThemeContext } from "styled-components/native";
 
 /**
  *
@@ -39,9 +40,9 @@ export const Calendar = ({ selectedDate, ...rest }) => {
 
   return (
     <RNCalender
-      key={selectedDate}
       current={selectedDate}
       firstDay={1}
+      key={selectedDate}
       markedDates={{
         [dayjs(selectedDate).format("YYYY-MM-DD")]: {
           selected: true,

package/src/components/{Card.js → Card.jsx}

@@ -1,10 +1,12 @@
 import * as React from "react";
-import PropTypes from "prop-types";
 import { StyleSheet, TouchableOpacity } from "react-native";
+
+import PropTypes from "prop-types";
 import styled from "styled-components/native";
 import { flexbox, space, border, color, layout } from "styled-system";
 
 import { theme } from "@theme";
+
 import { getShadowStyles } from "../utils/utils";
 
 const StyledTouchableOpacity = styled(TouchableOpacity)`
@@ -52,10 +54,11 @@ export const Card = ({ children, elevation, ...rest }) => {
   const shadowStyles = elevation ? getShadowStyles(elevation) : {};
 
   const cardStyles = { ...styles.defaultShadows, ...shadowStyles };
+
   return (
     <StyledTouchableOpacity
-      style={cardStyles}
       activeOpacity={rest.onPress ? 0.2 : 1}
+      style={cardStyles}
       {...rest}
     >
       {children}

package/src/components/{Carousel.js → Carousel.jsx}

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { StyleSheet, Dimensions, useWindowDimensions } from "react-native";
+
 import PropTypes from "prop-types";
 import CarouselParent, { Pagination } from "react-native-snap-carousel";
 
@@ -51,25 +52,24 @@ export const Carousel = ({
   return (
     <Container flex={1} {...containerStyle}>
       <CarouselParent
-        ref={carouselRef}
         data={itemArray}
+        itemWidth={width}
+        ref={carouselRef}
         renderItem={renderItem}
         sliderWidth={width}
-        itemWidth={width}
         onSnapToItem={index => {
           onSnapToItem(index);
           setActiveIndex(index);
         }}
       />
-
       <Pagination
-        dotsLength={itemArray.length}
         activeDotIndex={activeIndex}
+        dotContainerStyle={styles.dotContainerStyle}
         dotStyle={styles.dotStyle}
-        inactiveDotStyle={styles.inactiveDotStyle}
+        dotsLength={itemArray.length}
         inactiveDotOpacity={1}
         inactiveDotScale={1}
-        dotContainerStyle={styles.dotContainerStyle}
+        inactiveDotStyle={styles.inactiveDotStyle}
       />
     </Container>
   );

package/src/components/{CheckBox.js → CheckBox.jsx}

@@ -1,4 +1,5 @@
 import React, { useContext } from "react";
+
 import Proptypes from "prop-types";
 import Icon from "react-native-remix-icon";
 import { ThemeContext } from "styled-components/native";
@@ -68,6 +69,7 @@ export const CheckBox = ({
       color: theme.colors.font.grey400,
     },
   };
+
   const checkedProps = {
     bg: theme.colors.background.base,
     labelProps: {
@@ -75,6 +77,7 @@ export const CheckBox = ({
       color: theme.colors.font.primary,
     },
   };
+
   const unCheckedProps = {
     bg: theme.colors.background.white,
     borderWidth: 1,
@@ -84,21 +87,22 @@ export const CheckBox = ({
       color: theme.colors.font.secondary,
     },
   };
+
   return (
     <Touchable
+      alignItems="center"
       disabled={disabled}
-      onPress={onSelect}
       flexDirection="row"
-      alignItems="center"
       flexShrink={1}
+      onPress={onSelect}
       {...rest}
     >
       <Container
-        height={16}
-        width={16}
+        alignItems="center"
         borderRadius={3}
+        height={16}
         justifyContent="center"
-        alignItems="center"
+        width={16}
         {...(!checked && unCheckedProps)}
         {...(checked && checkedProps)}
         {...(disabled && disabledProps)}
@@ -106,17 +110,17 @@ export const CheckBox = ({
       >
         {checked && (
           <Icon
+            color={theme.colors.font.white}
             name="ri-check-line"
             size={14}
-            color={theme.colors.font.white}
             {...checkIconStyle}
           />
         )}
       </Container>
       <Typography
-        ml={2}
-        fontSize="m"
         flex={1}
+        fontSize="m"
+        ml={2}
         {...(checked && checkedProps.labelProps)}
         {...(!checked && unCheckedProps.labelProps)}
         {...(disabled && disabledProps.labelProps)}

package/src/components/{Chip.js → Chip.jsx}

@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import PropTypes from "prop-types";
 import Icon from "react-native-remix-icon";
 
@@ -63,37 +64,35 @@ export const Chip = ({
   closeIcon,
   containerStyle,
   closeIconContainerStyle,
-}) => {
-  return (
-    <Touchable
-      flexDirection="row"
-      p={2}
-      borderRadius={20}
-      alignItems="center"
-      onPress={onChipPress}
-      disabled={!onChipPress || isDisabled}
-      {...(variant && variantStyleObj[variant])}
-      {...(isDisabled && { opacity: 0.5 })}
-      {...containerStyle}
-    >
-      {LeftIcon && <LeftIcon />}
-      <Typography mx={2} fontFamily="sf400" color={labelColor}>
-        {label}
-      </Typography>
-      {onClose && (
-        <Touchable
-          bg={closeIconBackground}
-          borderRadius={10}
-          disabled={isDisabled}
-          onPress={onClose}
-          {...closeIconContainerStyle}
-        >
-          <Icon name={closeIcon} size={closeIconSize} color={closeIconColor} />
-        </Touchable>
-      )}
-    </Touchable>
-  );
-};
+}) => (
+  <Touchable
+    alignItems="center"
+    borderRadius={20}
+    disabled={!onChipPress || isDisabled}
+    flexDirection="row"
+    p={2}
+    onPress={onChipPress}
+    {...(variant && variantStyleObj[variant])}
+    {...(isDisabled && { opacity: 0.5 })}
+    {...containerStyle}
+  >
+    {LeftIcon && <LeftIcon />}
+    <Typography color={labelColor} fontFamily="sf400" mx={2}>
+      {label}
+    </Typography>
+    {onClose && (
+      <Touchable
+        bg={closeIconBackground}
+        borderRadius={10}
+        disabled={isDisabled}
+        onPress={onClose}
+        {...closeIconContainerStyle}
+      >
+        <Icon color={closeIconColor} name={closeIcon} size={closeIconSize} />
+      </Touchable>
+    )}
+  </Touchable>
+);
 
 Chip.defaultProps = {
   variant: "outlined",

package/src/components/{Container.js → Container.jsx}

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { flexbox, space, border, color, layout } from "styled-system";
-import styled from "styled-components/native";
+
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
+import styled from "styled-components/native";
+import { flexbox, space, border, color, layout } from "styled-system";
 
 const View = styled.View`
   ${flexbox}
@@ -12,9 +13,9 @@ const View = styled.View`
   ${layout}
 `;
 
-export const Container = ({ children, ...rest }) => {
-  return <View {...rest}>{children}</View>;
-};
+export const Container = ({ children, ...rest }) => (
+  <View {...rest}>{children}</View>
+);
 
 Container.defaultProps = {
   color: "background.primary",

package/src/components/{Divider.js → Divider.jsx}

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { flexbox, space, color, layout } from "styled-system";
-import styled from "styled-components/native";
+
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
+import styled from "styled-components/native";
+import { flexbox, space, color, layout } from "styled-system";
 
 /**
  *

package/src/components/{FAB.js → FAB.jsx}

@@ -1,5 +1,5 @@
-/* eslint-disable @bigbinary/neeto/no-dangling-constants */
 import * as React from "react";
+
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
 
@@ -44,6 +44,7 @@ import { theme } from "@theme";
  * @extends StyledSystems props /styled-system
  */
 
+// eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
 export const FAB = ({ Icon, bg, disabled, variant, onPress, ...rest }) => {
   const shadowStyle = {
     shadowColor: theme.colors.background.grey800,
@@ -65,9 +66,9 @@ export const FAB = ({ Icon, bg, disabled, variant, onPress, ...rest }) => {
     <Touchable
       {...(variant !== "inverse" ? { bg } : {})}
       disabled={disabled}
+      style={[style, shadowStyle]}
       variant={variant}
       onPress={onPress}
-      style={[style, shadowStyle]}
       {...(variant !== "inverse" ? { borderColor: bg } : {})}
       {...rest}
     >

package/src/components/{FlashList.js → FlashList.jsx}

@@ -1,7 +1,9 @@
-/* eslint-disable react/display-name */
-/* eslint-disable react/prop-types */
 import React, { useCallback, useContext, useEffect } from "react";
+import { Dimensions, RefreshControl } from "react-native";
+
 import { FlashList as ShopifyFlashList } from "@shopify/flash-list";
+import PropTypes from "prop-types";
+import ContentLoader, { Rect } from "react-content-loader/native";
 import Animated, {
   cancelAnimation,
   Extrapolation,
@@ -11,26 +13,24 @@ import Animated, {
   withSequence,
   withTiming,
 } from "react-native-reanimated";
-import PropTypes from "prop-types";
-import ContentLoader, { Rect } from "react-content-loader/native";
 import { ThemeContext } from "styled-components/native";
-import { Dimensions, RefreshControl } from "react-native";
 
 import { useRefreshByUser } from "@hooks";
 
 const { width } = Dimensions.get("screen");
 const Placeholder = () => {
   const theme = useContext(ThemeContext);
+
   return (
     <ContentLoader
-      marginHorizontal={15}
-      height="60"
-      width={400}
-      viewBox="0 0 400 50"
       backgroundColor={theme.colors.lightgrey}
       foregroundColor={theme.colors.grey300}
+      height="60"
+      marginHorizontal={15}
+      viewBox="0 0 400 50"
+      width={400}
     >
-      <Rect x="0" rx="5" ry="5" width={width - 30} height="50" />
+      <Rect height="50" rx="5" ry="5" width={width - 30} x="0" />
     </ContentLoader>
   );
 };
@@ -56,13 +56,19 @@ export const FlashList = React.forwardRef(
 
     return (
       <FadeInFlatList
-        ref={ref}
-        key={isLoading}
-        animationDuration={animationDuration}
         SkeletonComponent={SkeletonComponent}
-        isLoading={isLoading}
-        extraData={{ isLoading, placeHolderItemCount }}
+        animationDuration={animationDuration}
         data={isLoading ? dummyData : data}
+        extraData={{ isLoading, placeHolderItemCount }}
+        isLoading={isLoading}
+        key={isLoading}
+        placeHolderItemCount={placeHolderItemCount}
+        ref={ref}
+        keyExtractor={(item, index) =>
+          isLoading || !keyExtractor
+            ? index.toString()
+            : keyExtractor(item, index)
+        }
         refreshControl={
           onRefresh && (
             <RefreshControl
@@ -71,12 +77,6 @@ export const FlashList = React.forwardRef(
             />
           )
         }
-        placeHolderItemCount={placeHolderItemCount}
-        keyExtractor={(item, index) => {
-          return isLoading || !keyExtractor
-            ? index.toString()
-            : keyExtractor(item, index);
-        }}
         {...rest}
         onEndReached={isLoading ? undefined : onEndReached}
       />
@@ -84,7 +84,8 @@ export const FlashList = React.forwardRef(
   }
 );
 
-// eslint-disable-next-line react/display-name
+FlashList.displayName = "FlashList";
+
 const FadeInFlatList = React.forwardRef(
   (
     {
@@ -98,38 +99,33 @@ const FadeInFlatList = React.forwardRef(
   ) => {
     const value = useSharedValue(0);
 
-    const FadeInComponent = useCallback(
-      ({ index, children }) => {
-        const inputRange = [index - 1, index, index + 1, index + 2];
-        const animatedStyles = useAnimatedStyle(() => {
-          return {
-            opacity: interpolate(
+    const FadeInComponent = useCallback(({ index, children }) => {
+      const inputRange = [index - 1, index, index + 1, index + 2];
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const animatedStyles = useAnimatedStyle(() => ({
+        opacity: interpolate(
+          value.value,
+          inputRange,
+          [0, 0.6, 1, 1],
+          Extrapolation.CLAMP
+        ),
+        transform: [
+          {
+            translateX: interpolate(
               value.value,
               inputRange,
-              [0, 0.6, 1, 1],
+              [25, 15, 10, 0],
               Extrapolation.CLAMP
             ),
-            transform: [
-              {
-                translateX: interpolate(
-                  value.value,
-                  inputRange,
-                  [25, 15, 10, 0],
-                  Extrapolation.CLAMP
-                ),
-              },
-            ],
-          };
-        });
-
-        return <Animated.View style={animatedStyles}>{children}</Animated.View>;
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      []
-    );
+          },
+        ],
+      }));
+
+      return <Animated.View style={animatedStyles}>{children}</Animated.View>;
+    }, []);
 
-    const Item = ({ item }) => {
-      return item?.extraData?.isLoading ? (
+    const Item = ({ item }) =>
+      item?.extraData?.isLoading ? (
         <FadeInComponent index={item.index}>
           {SkeletonComponent || <Placeholder />}
         </FadeInComponent>
@@ -138,15 +134,17 @@ const FadeInFlatList = React.forwardRef(
           {originalRenderItem(item)}
         </FadeInComponent>
       );
+
+    Item.propTypes = {
+      item: PropTypes.object,
     };
 
-    const renderItem = item => {
-      return isLoading || item.index < props.placeHolderItemCount ? (
+    const renderItem = item =>
+      isLoading || item.index < props.placeHolderItemCount ? (
         <Item item={item} />
       ) : (
         originalRenderItem(item)
       );
-    };
 
     useEffect(() => {
       value.value = 0;
@@ -162,13 +160,14 @@ const FadeInFlatList = React.forwardRef(
       return () => {
         cancelAnimation(value);
       };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [animationDuration, value, isLoading]);
 
     return <ShopifyFlashList ref={ref} {...props} renderItem={renderItem} />;
   }
 );
 
+FadeInFlatList.displayName = "FadeInFlatList";
+
 FlashList.propTypes = {
   SkeletonComponent: PropTypes.element,
   animationDuration: PropTypes.number,
@@ -179,3 +178,5 @@ FlashList.propTypes = {
   onEndReached: PropTypes.func,
   keyExtractor: PropTypes.func,
 };
+
+FadeInFlatList.propTypes = FlashList.propTypes;

package/src/components/FlatList.js

@@ -1,5 +1,5 @@
-import { flexbox, space, border, color, layout } from "styled-system";
 import styled from "styled-components/native";
+import { flexbox, space, border, color, layout } from "styled-system";
 
 export const FlatList = styled.FlatList`
   ${flexbox}