@bigbinary/neetoui-rn 0.0.125 → 0.0.128

package/src/components/Button.js

@@ -1,15 +1,17 @@
-import * as React from "react";
+import React, { useContext } from "react";
 import propTypes from "@styled-system/prop-types";
-import { Typography, Container, Touchable } from "@components";
 import PropTypes from "prop-types";
+import { ThemeContext } from "styled-components/native";
+import { ActivityIndicator } from "react-native";
+
+import { 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/solidButtons.png" />
- *   <img src="screenshots/button/loaderButtons.png" />
+ *   <img src="screenshots/button/button.png" />
  * </div>
  *
  *  ## Usage
@@ -20,13 +22,35 @@ import PropTypes from "prop-types";
  * export default function Main() {
  *  return (
  *    <Container>
+ *      <Button my={9} label="Button1" />
+ *      <Button my={9} disabled label="Disabled Button2" />
+ *      <Button
+ *        my={9}
+ *        LeftIcon={() => <Icon name="ri-add-line" color="white" size={16} />}
+ *        label="Left Icon Button"
+ *      />
  *      <Button
  *        my={9}
- *        width={200}
- *        variant="solid"
- *        disabled
- *        label="Solid Button"
- *       />
+ *        RightIcon={() => <Icon name="ri-add-line" color="white" size={16} />}
+ *        label="Right Icon Button"
+ *      />
+ *      <Button my={9} variant="text" label="Text Button" />
+ *      <Button
+ *        my={9}
+ *        variant="text"
+ *        LeftIcon={() => (
+ *          <Icon name="ri-add-line" color={theme.fonts.primary} size={16} />
+ *        )}
+ *        label="Left Icon Text Button"
+ *      />
+ *      <Button
+ *        my={9}
+ *        variant="text"
+ *        RightIcon={() => (
+ *          <Icon name="ri-add-line" color={theme.fonts.primary} size={16} />
+ *        )}
+ *        label="Right Icon Text Button"
+ *      />
  *    </Container>
  *  );
  * }
@@ -34,63 +58,125 @@ import PropTypes from "prop-types";
  *
  */
 
-export const Button = React.forwardRef((props, ref) => {
+export const Button = props => {
   const {
+    variant,
+    label,
+    labelStyle,
     RightIcon,
     LeftIcon,
-    fontFamily,
-    color,
-    fontSize,
-    loadingText,
-    isLoading,
-    Loader,
     disabled,
-    variant,
+    isLoading,
     ...rest
   } = props;
-  let style = rest.style || {};
-  if (disabled || isLoading) {
-    style = { ...style, opacity: 0.5 };
-  }
+  const theme = useContext(ThemeContext);
+  const width = variant === "text" || variant === "danger-text" ? null : "100%";
+
+  const getButtonColors = () => {
+    switch (variant) {
+      case "solid":
+        return {
+          bg: theme.colors.background[disabled ? "grey400" : "base"],
+          border: theme.colors.background[disabled ? "grey400" : "base"],
+          color: theme.colors.background.white,
+          ripple: "white",
+        };
+      case "text":
+        return {
+          bg: "transparent",
+          border: "transparent",
+          color: theme.colors.font.primary,
+          ripple: "black",
+        };
+      case "danger":
+        return {
+          bg: theme.colors.background.danger,
+          border: theme.colors.background.danger,
+          color: theme.colors.background.white,
+          ripple: "white",
+        };
+      case "danger-inverse":
+        return {
+          bg: theme.colors.background.white,
+          border: theme.colors.background.danger,
+          color: theme.colors.background.danger,
+          ripple: "black",
+        };
+      case "danger-text":
+        return {
+          bg: "transparent",
+          border: "transparent",
+          color: theme.colors.background.danger,
+          ripple: "black",
+        };
+      default:
+        return {
+          bg: theme.colors.background[disabled ? "grey400" : "base"],
+          border: theme.colors.background[disabled ? "grey400" : "base"],
+          color: theme.colors.background.white,
+          ripple: "white",
+        };
+    }
+  };
+
+  const renderOpacity = () => {
+    if (
+      ["danger", "danger-inverse", "danger-text"].includes(variant) &&
+      disabled
+    )
+      return 0.5;
+    return 1;
+  };
+
+  const renderLoaderColor = () => {
+    if (["text", "danger", "danger-inverse", "danger-text"].includes(variant))
+      return "base";
+    return "white";
+  };
 
   return (
     <Touchable
-      {...(variant === "solid" && { rippleColor: "white" })}
-      ref={ref}
+      rippleColor={getButtonColors().ripple}
+      disabled={disabled}
+      bg={getButtonColors().bg}
+      height={45}
+      width={width}
+      borderRadius={8}
       flexDirection="row"
-      disabled={disabled || isLoading}
+      alignItems="center"
+      justifyContent="center"
+      borderColor={getButtonColors().border}
+      borderWidth={1}
+      opacity={renderOpacity()}
       {...rest}
-      variant={variant}
-      style={style}
     >
-      {Loader && isLoading && (
-        <Container mx={1}>
-          <Loader />
-        </Container>
+      {isLoading ? (
+        <ActivityIndicator
+          color={theme.colors.background[renderLoaderColor()]}
+        />
+      ) : (
+        <>
+          {LeftIcon && <LeftIcon />}
+          <Typography
+            textAlign="center"
+            mx={2}
+            color={getButtonColors().color}
+            fontSize="m"
+            fontFamily={theme.fonts.sf500}
+            {...labelStyle}
+          >
+            {label}
+          </Typography>
+          {RightIcon && <RightIcon />}
+        </>
       )}
-      {LeftIcon && <LeftIcon />}
-      <Typography
-        textAlign="center"
-        mx={1}
-        color={color}
-        fontFamily={fontFamily || "inter700"}
-        fontSize={fontSize || "s"}
-        textStyle={variant}
-      >
-        {isLoading ? loadingText : rest.label}
-      </Typography>
-      {RightIcon && <RightIcon />}
     </Touchable>
   );
-});
+};
 
 Button.defaultProps = {
   variant: "solid",
-  p: 12,
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: 2,
-  loadingText: "Loading…",
+  isLoading: false,
 };
 
 Button.propTypes = {
@@ -105,33 +191,38 @@ Button.propTypes = {
    */
   label: PropTypes.string.isRequired,
   /**
-   * Supported Type: 'text' | 'inverse' | 'solid'
+   * Supported Type: 'text' | 'solid'
    * You can change the mode to adjust the styling.
    *  <ul>
    *    <li>text - flat button without background or outline.</li>
-   *    <li>inverse - button with an outline.</li>
    *    <li>solid - button with a background color.</li>
    *  </ul>
    */
-  variant: PropTypes.oneOf(["text", "inverse", "solid"]),
+  variant: PropTypes.oneOf([
+    "text",
+    "solid",
+    "danger",
+    "danger-inverse",
+    "danger-text",
+  ]),
   /**
-   * Expects a component.
+   * Enable or Disable the button.
    */
-  RightIcon: PropTypes.elementType,
+  disabled: PropTypes.bool,
   /**
-   * Expects a component.
+   * Customize label style of the button.
    */
-  LeftIcon: PropTypes.elementType,
+  labelStyle: PropTypes.object,
   /**
-   * Custom text can be specified while loading if default one needs to changed.
+   * Render a component on the right side of the Label.
    */
-  loadingText: PropTypes.string,
+  RightIcon: PropTypes.elementType,
   /**
-   * Whether to show a loading indicator.
+   * Render a component on the left side of the Label.
    */
-  isLoading: PropTypes.bool,
+  LeftIcon: PropTypes.elementType,
   /**
-   * Expects a component. Is used to override the default loader.
+   * To show loading indicator on the button.
    */
-  Loader: PropTypes.elementType,
+  isLoading: PropTypes.bool,
 };

package/src/components/Carousel.js

@@ -0,0 +1,112 @@
+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";
+
+import { Container } from "@components";
+
+const { width } = Dimensions.get("screen");
+
+/**
+ *
+ * <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 { Carousel } from "@bigbinary/neetoui-rn";
+ *
+ * export default function Main() {
+ *
+ *  return (
+ *    <Carousel itemArray={[{url:"https://picsum.photos/200"}]} />
+ *  );
+ * }
+ * ```
+ *
+ */
+
+export const Carousel = ({
+  itemArray,
+  renderItem,
+  carouselRef,
+  onSnapToItem,
+}) => {
+  const { width } = useWindowDimensions();
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  return (
+    <Container>
+      <CarouselParent
+        ref={carouselRef}
+        data={itemArray}
+        renderItem={renderItem}
+        sliderWidth={width}
+        itemWidth={width}
+        onSnapToItem={index => {
+          onSnapToItem(index);
+          setActiveIndex(index);
+        }}
+      />
+
+      <Pagination
+        dotsLength={itemArray.length}
+        activeDotIndex={activeIndex}
+        dotStyle={styles.dotStyle}
+        inactiveDotStyle={styles.inactiveDotStyle}
+        inactiveDotOpacity={0.4}
+        inactiveDotScale={0.6}
+        dotContainerStyle={styles.dotContainerStyle}
+      />
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    height: width / 1.8,
+    width: width / 1.8,
+    resizeMode: "contain",
+    borderRadius: 20,
+  },
+  indicator: {
+    height: 12,
+    width: 12,
+    borderRadius: 10,
+    marginVertical: 20,
+    marginHorizontal: 5,
+    backgroundColor: "#49545C",
+    borderColor: "#FFFFFF",
+    borderWidth: 2,
+  },
+  dotStyle: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    marginHorizontal: 8,
+    backgroundColor: "#2F3941",
+  },
+  inactiveDotStyle: {
+    backgroundColor: "#D9D9D9",
+  },
+  dotContainerStyle: { marginHorizontal: 0 },
+});
+
+Carousel.propTypes = {
+  itemArray: PropTypes.array.isRequired,
+  renderItem: PropTypes.func.isRequired,
+  onSnapToItem: PropTypes.func,
+  carouselRef: PropTypes.object,
+};

package/src/components/CheckBox.js

@@ -1,15 +1,15 @@
-import React from "react";
+import React, { useContext } from "react";
 import Proptypes from "prop-types";
+import Icon from "react-native-remix-icon";
+import { ThemeContext } from "styled-components/native";
 
 import { Container, Typography, Touchable } from "@components";
 
-const labelPositions = ["left", "right"];
-
-const LabelComponent = ({ label, labelComponent, labelProp }) => {
-  return labelComponent || <Typography {...labelProp}>{label}</Typography>;
-};
-
 /**
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/checkbox/checkbox.png" />
+ * </div>
  *
  * This component supports below props categories from [styled-system ](/styled-system).
  * <ul>
@@ -24,24 +24,26 @@ const LabelComponent = ({ label, labelComponent, labelProp }) => {
  *  ## Usage
  * ```js
  * import * as React from "react";
- * import { Container, CheckBox, Typography } from "@bigbinary/neetoui-rn";
+ * import { Container, CheckBox } from "@bigbinary/neetoui-rn";
  *
  * export default function Main() {
- *  const [selected, setSelected] = React.useState(false);
- *
+ *  const [checked, setChecked] = useState(true);
  *
  *  return (
  *    <Container>
- *      <Container flexDirection="row" my={2}>
- *        <CheckBox
- *          selected={selected}
- *          onSelect={() => setSelected(!selected)}
- *          checkedComponent={
- *            <Container width={10} height={10} bg="background.base" />
- *          }
- *          label="Agree"
- *        />
- *      </Container>
+ *      <CheckBox
+ *        mt={2}
+ *        checked={checked1}
+ *        onSelect={() => setChecked1(prev => !prev)}
+ *        label={`Checkbox marked as ${!checked1 ? "un" : ""}checked`}
+ *      />
+ *      <CheckBox
+ *        mt={3}
+ *        checked={checked2}
+ *        onSelect={() => setChecked2(prev => !prev)}
+ *        label={`Checkbox marked as ${!checked2 ? "un" : ""}checked`}
+ *      />
+ *      <CheckBox mt={3} disabled label="Disabled checkbox" />
  *    </Container>
  *  );
  * }
@@ -50,68 +52,85 @@ const LabelComponent = ({ label, labelComponent, labelProp }) => {
  */
 
 export const CheckBox = ({
-  selected = false,
-  onSelect = () => {},
-  checkedComponent = null,
-  checkedItemProp = {},
-  disabled = false,
-  label = "Option",
-  labelComponent = null,
-  labelProp = {},
-  labelPosition = "right",
-  checkboxContainerProp = {},
+  checked,
+  onSelect,
+  disabled,
+  label,
+  checkboxStyle,
+  checkIconStyle,
+  labelStyle,
   ...rest
 }) => {
+  const theme = useContext(ThemeContext);
+  const disabledProps = {
+    bg: theme.colors.background[checked ? "grey400" : "white"],
+    labelProps: {
+      color: theme.colors.font.grey400,
+    },
+  };
+  const checkedProps = {
+    bg: theme.colors.background.base,
+    labelProps: {
+      fontFamily: theme.fonts.sf500,
+      color: theme.colors.font.primary,
+    },
+  };
+  const unCheckedProps = {
+    bg: theme.colors.background.white,
+    borderWidth: 1,
+    borderColor: theme.colors.border.secondary,
+    labelProps: {
+      fontFamily: theme.fonts.sf400,
+      color: theme.colors.font.secondary,
+    },
+  };
   return (
     <Touchable
       disabled={disabled}
       onPress={onSelect}
-      opacity={disabled ? 0.5 : 1}
       flexDirection="row"
       alignItems="center"
       {...rest}
     >
-      {labelPosition === labelPositions[0] ? (
-        <LabelComponent
-          label={label}
-          labelComponent={labelComponent}
-          labelProp={{ mr: 2, ...labelProp }}
-        />
-      ) : null}
       <Container
-        borderColor="background.base"
-        borderWidth={1}
-        borderRadius={5}
+        height={16}
+        width={16}
+        borderRadius={3}
         justifyContent="center"
         alignItems="center"
-        width={20}
-        height={20}
-        {...checkboxContainerProp}
+        {...(!checked && unCheckedProps)}
+        {...(checked && checkedProps)}
+        {...(disabled && disabledProps)}
+        {...checkboxStyle}
       >
-        {selected && (
-          <Container>
-            {checkedComponent || (
-              <Typography {...checkedItemProp}>✓</Typography>
-            )}
-          </Container>
+        {checked && (
+          <Icon
+            name="ri-check-line"
+            size={14}
+            color={theme.colors.font.white}
+            {...checkIconStyle}
+          />
         )}
       </Container>
-      {labelPosition === labelPositions[1] ? (
-        <LabelComponent
-          label={label}
-          labelComponent={labelComponent}
-          labelProp={{ ml: 2, ...labelProp }}
-        />
-      ) : null}
+      <Typography
+        ml={2}
+        fontSize="m"
+        {...(checked && checkedProps.labelProps)}
+        {...(!checked && unCheckedProps.labelProps)}
+        {...(disabled && disabledProps.labelProps)}
+        {...labelStyle}
+      >
+        {label}
+      </Typography>
     </Touchable>
   );
 };
 
 CheckBox.propTypes = {
   /**
-   * Whether checkbox is selected.
+   * Whether checkbox is checked or not.
    */
-  selected: Proptypes.bool.isRequired,
+  checked: Proptypes.bool.isRequired,
   /**
    * Function to execute on press.
    */
@@ -120,38 +139,25 @@ CheckBox.propTypes = {
    * To disable the component.
    */
   disabled: Proptypes.bool,
-  /**
-   * Render custom checked component.
-   */
-  checkedComponent: Proptypes.element,
-  /**
-   * Check mark style.
-   */
-  checkedItemProp: Proptypes.object,
   /**
    * Text label to be shown with radio button.
    */
   label: Proptypes.string,
   /**
-   * Props for the label.
+   * Customize checkbox style.
    */
-  labelProp: Proptypes.object,
+  checkboxStyle: Proptypes.object,
   /**
-   * Label can passed as a component as well.
+   * Customize check icon style.
    */
-  labelComponent: Proptypes.element,
+  checkIconStyle: Proptypes.object,
   /**
-   * Position of label relative to the radio button. It can be either `left` or `right`
+   * Customize label style.
    */
-  labelPosition: Proptypes.oneOf(labelPositions),
-  /**
-   * Extra param to customize checkbox container
-   */
-  checkboxContainerProp: Proptypes.object,
+  labelStyle: Proptypes.object,
 };
 
-LabelComponent.propTypes = {
-  label: Proptypes.string,
-  labelComponent: Proptypes.element,
-  labelProp: Proptypes.object,
+CheckBox.defaultProps = {
+  checked: false,
+  onSelect: () => {},
 };

package/src/components/Chip.js

@@ -76,7 +76,7 @@ export const Chip = ({
       {...rest.containerStyle}
     >
       {LeftIcon && <LeftIcon />}
-      <Typography mx={2} fontFamily="inter400" color={labelColor}>
+      <Typography mx={2} fontFamily="sf400" color={labelColor}>
         {label}
       </Typography>
       {onClose && (