@bigbinary/neetoui-rn 0.0.269 → 0.0.271

package/src/components/ChatInput/MentionsInputWrapper.jsx

@@ -1,155 +0,0 @@
-import React, { forwardRef, useContext, useState } from "react";
-import { ScrollView, StyleSheet } from "react-native";
-
-import PropTypes from "prop-types";
-import { MentionInput } from "react-native-controlled-mentions";
-import { moderateScale } from "react-native-size-matters";
-import { ThemeContext } from "styled-components/native";
-
-import {
-  Touchable,
-  Avatar,
-  Typography,
-  Card,
-  Divider,
-  Container,
-} from "@components";
-
-export const MentionsInputWrapper = forwardRef(
-  ({ suggestions, shouldShowSuggestions, ...rest }, ref) => {
-    const [visibleMentionsCount, setVisibleMentionsCount] = useState(0);
-    const theme = useContext(ThemeContext);
-
-    const heightOfMention = moderateScale(50);
-    const mentionsListHeight = visibleMentionsCount * heightOfMention;
-
-    const renderSuggestions = ({ keyword, onSuggestionPress }) => {
-      if (!shouldShowSuggestions) return null;
-
-      if (keyword === null) {
-        if (visibleMentionsCount !== 0) setVisibleMentionsCount(0);
-
-        return null;
-      }
-
-      const filteredSuggestions = suggestions.filter(suggestion =>
-        suggestion.name
-          .toLocaleLowerCase()
-          .includes(keyword?.toLocaleLowerCase())
-      );
-
-      setVisibleMentionsCount(
-        filteredSuggestions.length > 4 ? 4 : filteredSuggestions.length
-      );
-
-      return (
-        <Card elevation={4}>
-          <ScrollView
-            contentInset={{ bottom: moderateScale(20) }}
-            keyboardShouldPersistTaps="always"
-            contentContainerStyle={{
-              ...(filteredSuggestions.length === 0
-                ? { height: 0 }
-                : {
-                    height: mentionsListHeight,
-                    justifyContent: "flex-end",
-                    borderRadius: moderateScale(10),
-                    backgroundColor: theme.colors.background.grey100,
-                  }),
-            }}
-          >
-            {filteredSuggestions.map((suggestion, index) => {
-              const { name, imageUrl } = suggestion;
-
-              return (
-                <Touchable
-                  bg="background.grey100"
-                  width="100%"
-                  {...(index === 0 && {
-                    borderTopLeftRadius: moderateScale(10),
-                    borderTopRightRadius: moderateScale(10),
-                  })}
-                  {...(index === filteredSuggestions.length - 1 && {
-                    borderBottomLeftRadius: moderateScale(10),
-                    borderBottomRightRadius: moderateScale(10),
-                  })}
-                  height={heightOfMention}
-                  key={index}
-                  px={moderateScale(10)}
-                  onPress={() => onSuggestionPress(suggestion)}
-                >
-                  <Container alignItems="center" flex={1} flexDirection="row">
-                    <Avatar
-                      imageUrl={imageUrl}
-                      mr={moderateScale(8)}
-                      name={name}
-                      variant="extra-small"
-                    />
-                    <Typography
-                      color="font.primary"
-                      flex={1}
-                      fontFamily="sf400"
-                      fontSize="xs"
-                    >
-                      {name}
-                    </Typography>
-                  </Container>
-                  {index !== filteredSuggestions.length - 1 && (
-                    <Divider bg="border.primary" width="100%" />
-                  )}
-                </Touchable>
-              );
-            })}
-          </ScrollView>
-        </Card>
-      );
-    };
-
-    return (
-      <MentionInput
-        inputRef={ref}
-        placeholderTextColor={theme.colors.font.grey400}
-        style={{ color: theme.colors.font.grey800 }}
-        suggestions={suggestions}
-        containerStyle={[
-          styles.mentionsTextInputStyle,
-          {
-            minHeight: moderateScale(60) + mentionsListHeight,
-          },
-        ]}
-        partTypes={[
-          {
-            isInsertSpaceAfterMention: true,
-            allowedSpacesCount: 0,
-            trigger: "@",
-            renderSuggestions,
-            textStyle: {
-              fontFamily: theme.fonts.sf700,
-              color: theme.colors.font.base,
-            },
-          },
-        ]}
-        {...rest}
-      />
-    );
-  }
-);
-
-MentionsInputWrapper.displayName = "MentionsInputWrapper";
-const styles = StyleSheet.create({
-  mentionsTextInputStyle: {
-    marginVertical: moderateScale(10),
-    flex: 1,
-    width: "100%",
-  },
-});
-
-MentionsInputWrapper.propTypes = {
-  shouldShowSuggestions: PropTypes.bool,
-  suggestions: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      imageUrl: PropTypes.string,
-    })
-  ),
-};

package/src/components/CheckBox.jsx

@@ -1,150 +0,0 @@
-import React, { useContext } from "react";
-
-import {
-  Checkbox as CheckboxIcon,
-  CheckboxInactive,
-} from "@bigbinary/neeto-icons-rn";
-import Proptypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-import { ThemeContext } from "styled-components/native";
-
-import { Typography, Touchable } from "@components";
-
-/**
- *
- * <div class="screenshots">
- *   <img src="screenshots/checkbox/checkbox.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 { moderateScale } from "react-native-size-matters";
- * import { Container, CheckBox } from "@bigbinary/neetoui-rn";
- *
- * export default function Main() {
- *  const [checked, setChecked] = useState(true);
- *
- *  return (
- *    <Container>
- *      <CheckBox
- *        mt={moderateScale(2)}
- *        checked={checked1}
- *        onSelect={() => setChecked1(prev => !prev)}
- *        label={`Checkbox marked as ${!checked1 ? "un" : ""}checked`}
- *      />
- *      <CheckBox
- *        mt={moderateScale(3)}
- *        checked={checked2}
- *        onSelect={() => setChecked2(prev => !prev)}
- *        label={`Checkbox marked as ${!checked2 ? "un" : ""}checked`}
- *      />
- *      <CheckBox mt={moderateScale(3)} disabled label="Disabled checkbox" />
- *    </Container>
- *  );
- * }
- * ```
- *
- */
-
-export const CheckBox = ({
-  checked,
-  onSelect,
-  disabled,
-  label,
-  checkIconStyle,
-  labelStyle,
-  ...rest
-}) => {
-  const theme = useContext(ThemeContext);
-  const disabledProps = {
-    labelProps: {
-      color: theme.colors.font.grey400,
-    },
-  };
-
-  const checkedProps = {
-    labelProps: {
-      fontFamily: theme.fonts.sf600,
-    },
-  };
-
-  const unCheckedProps = {
-    labelProps: {
-      fontFamily: theme.fonts.sf400,
-    },
-  };
-
-  const Icon = checked ? CheckboxIcon : CheckboxInactive;
-
-  return (
-    <Touchable
-      alignItems="center"
-      disabled={disabled}
-      flexDirection="row"
-      flexShrink={1}
-      py={moderateScale(8)}
-      onPress={onSelect}
-      {...rest}
-    >
-      <Typography
-        flex={1}
-        fontSize="m"
-        lineHeight={`${moderateScale(22)}px`}
-        {...(checked && checkedProps.labelProps)}
-        {...(!checked && unCheckedProps.labelProps)}
-        {...(disabled && disabledProps.labelProps)}
-        {...labelStyle}
-      >
-        {label}
-      </Typography>
-      <Icon
-        color={theme.colors.font.primary}
-        size={moderateScale(22)}
-        {...checkIconStyle}
-      />
-    </Touchable>
-  );
-};
-
-CheckBox.propTypes = {
-  /**
-   * Whether checkbox is checked or not.
-   */
-  checked: Proptypes.bool.isRequired,
-  /**
-   * Function to execute on press.
-   */
-  onSelect: Proptypes.func.isRequired,
-  /**
-   * To disable the component.
-   */
-  disabled: Proptypes.bool,
-  /**
-   * Text label to be shown with radio button.
-   */
-  label: Proptypes.string,
-  /**
-   * Customize check icon style.
-   */
-  checkIconStyle: Proptypes.object,
-  /**
-   * Customize label style.
-   */
-  labelStyle: Proptypes.object,
-};
-
-CheckBox.defaultProps = {
-  checked: false,
-  onSelect: () => {},
-};

package/src/components/Chip.jsx

@@ -1,180 +0,0 @@
-import React from "react";
-
-import { Close } from "@bigbinary/neeto-icons-rn";
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-
-import { Typography, Touchable, Container } from "@components";
-
-const variantStyleObj = {
-  solid: {
-    bg: "background.grey200",
-  },
-  outlined: {
-    bg: "background.white",
-    border: "1px solid",
-    borderColor: "border.grey200",
-  },
-};
-
-/**
- *
- * Chips are compact elements that represent an input, attribute, or action.
- *
- * <div class="screenshots">
- *   <img src="screenshots/chip/chip.png" />
- * </div>
- *
- *   ## Usage
- * ```js
- * import * as React from 'react';
- * import { Chip, Container, Typography } from '@bigbinary/neetoui-rn';
- *
- * export default function Main(){
- *  return (
- *   <Container>
- *     <Chip
- *      label="Outlined Chip"
- *      LeftIcon={() => <Typography>📣</Typography>}
- *      variant="outlined"
- *      onChipPress={() => {
- *       alert("Chip pressed");
- *      }}
- *      onClose={() => {
- *        alert("On Close clicked");
- *       }}
- *    />
- *   </Container>
- *  );
- * }
- * ```
- *
- */
-
-const commonContainerStyle = {
-  alignItems: "center",
-  borderRadius: moderateScale(20),
-  flexDirection: "row",
-};
-
-export const Chip = ({
-  label,
-  LeftIcon,
-  variant,
-  labelColor,
-  closeIconBackground,
-  closeIconColor,
-  onClose,
-  onChipPress,
-  isDisabled,
-  closeIconSize,
-  closeIcon: CloseIcon,
-  closeIconProps,
-  containerStyle,
-  closeIconContainerStyle,
-}) => (
-  <Container
-    {...commonContainerStyle}
-    {...(variant && variantStyleObj[variant])}
-    {...(isDisabled && { opacity: 0.5 })}
-    {...containerStyle}
-    m={0}
-    p={0}
-  >
-    <Touchable
-      disabled={!onChipPress || isDisabled}
-      overflow="hidden"
-      px={moderateScale(4)}
-      py={moderateScale(2)}
-      onPress={onChipPress}
-      {...commonContainerStyle}
-      {...containerStyle}
-    >
-      {LeftIcon && <LeftIcon />}
-      <Typography color={labelColor} fontFamily="sf400" mx={moderateScale(2)}>
-        {label}
-      </Typography>
-    </Touchable>
-    {onClose && (
-      <Container
-        bg={closeIconBackground}
-        borderRadius={closeIconSize}
-        m={moderateScale(3)}
-        p={moderateScale(1)}
-        {...closeIconContainerStyle}
-      >
-        <Touchable disabled={isDisabled} onPress={onClose}>
-          <CloseIcon
-            color={closeIconColor}
-            size={closeIconSize}
-            {...closeIconProps}
-          />
-        </Touchable>
-      </Container>
-    )}
-  </Container>
-);
-
-Chip.defaultProps = {
-  variant: "outlined",
-  labelColor: "font.primary",
-  closeIconBackground: "background.grey500",
-  closeIconColor: "white",
-  closeIconProps: { viewBox: "0 0 25 25" },
-  isDisabled: false,
-  closeIconSize: moderateScale(14),
-  closeIcon: Close,
-};
-
-Chip.propTypes = {
-  /**
-   * Takes the text that needs to be displayed inside the chip.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Expects a component. Used to set left Icon or Avatar.
-   */
-  LeftIcon: PropTypes.elementType,
-  /**
-   * Supported variant: 'outlined' | 'solid'
-   */
-  variant: PropTypes.string,
-  /**
-   * Sets chip text color.
-   */
-  labelColor: PropTypes.string,
-  /**
-   * Sets close Icon background color.
-   */
-  closeIconBackground: PropTypes.string,
-  /**
-   * Sets close Icon color.
-   */
-  closeIconColor: PropTypes.string,
-  /**
-   * Expects a function to execute on close icon press. The close icon appears only when the onClose prop is specified.
-   */
-  onClose: PropTypes.func,
-  /**
-   * Used to set the size of the close icon.
-   */
-  closeIconSize: PropTypes.number,
-  /**
-   * Close icon can be specified if default one needs to changed. Only supports neeto-icons.
-   */
-  closeIcon: PropTypes.elementType,
-  /**
-   * Add additional customization to close icon.
-   */
-  closeIconProps: PropTypes.object,
-  /**
-   * Expects a function to execute on chip press.
-   */
-  onChipPress: PropTypes.func,
-  /**
-   * Whether the chip is disabled. A disabled chip has a overlay and onPress is not called on touch.
-   */
-  isDisabled: PropTypes.bool,
-  containerStyle: PropTypes.object,
-  closeIconContainerStyle: PropTypes.object,
-};

package/src/components/Container.jsx

@@ -1,31 +0,0 @@
-import * as React from "react";
-
-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}
-  ${space}
-  ${border}
-  ${color}
-  ${layout}
-`;
-
-export const Container = ({ children, ...rest }) => (
-  <View {...rest}>{children}</View>
-);
-
-Container.defaultProps = {
-  color: "background.primary",
-};
-
-Container.propTypes = {
-  ...propTypes.flexbox,
-  ...propTypes.space,
-  ...propTypes.border,
-  ...propTypes.color,
-  ...propTypes.layout,
-  children: PropTypes.node,
-};

package/src/components/Divider.jsx

@@ -1,79 +0,0 @@
-import * as React from "react";
-
-import propTypes from "@styled-system/prop-types";
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-import styled from "styled-components/native";
-import { flexbox, space, color, layout } from "styled-system";
-
-/**
- *
- * Divider is a separator line that can be used between two different sections.
- *
- * <div class="screenshots">
- *   <img src="screenshots/divider/divider.png" />
- * </div>
- *
- *   ## Usage
- * ```js
- * import * as React from 'react';
- * import { Divider } from '@bigbinary/neetoui-rn';
- *
- * export default function Main(){
- *  return (
- *   <Container>
- *     <Divider orientation="vertical" thickness={moderateScale(1)}/>
- *   </Container>
- *  );
- * }
- * ```
- *
- */
-
-const View = styled.View`
-  ${flexbox}
-  ${space}
-  ${color}
-  ${layout}
-`;
-
-export const Divider = ({ thickness, orientation, bg, ...rest }) => {
-  const isHorizontal = orientation === "horizontal";
-  const lineStyles = isHorizontal
-    ? {
-        ...rest,
-        height: thickness,
-      }
-    : {
-        ...rest,
-        width: thickness,
-        flex: 1,
-      };
-
-  return thickness > 0 && <View bg={bg} {...lineStyles} />;
-};
-
-Divider.defaultProps = {
-  bg: "background.grey400",
-  orientation: "horizontal",
-  thickness: moderateScale(1),
-};
-
-Divider.propTypes = {
-  ...propTypes.flexbox,
-  ...propTypes.space,
-  ...propTypes.color,
-  ...propTypes.layout,
-  /**
-   * To specify whether the line needs to horizontal or vertical
-   */
-  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
-  /**
-   * To specify the thickness of divider
-   */
-  thickness: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * To specify the color of divider
-   */
-  bg: PropTypes.string,
-};

package/src/components/FAB.jsx

@@ -1,113 +0,0 @@
-import * as React from "react";
-
-import propTypes from "@styled-system/prop-types";
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-
-import { Touchable } from "@components";
-import { theme } from "@theme";
-/**
- * FAB component is a floating action button which represents the primary action in an application and is built on top of styled-system.
- *
- * This component supports below props categories from [styled-system ](/styled-system).
- *
- * <ul>
- * <li>space</li>
- * <li>layout</li>
- * <li>flexbox</li>
- * <li>color</li>
- * <li>textStyle</li>
- * <li>buttonStyle</li>
- * </ul>
- *
- * <div class="screenshots">
- *   <img src="screenshots/fab/buttonstyles.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { FAB, Container, Typography } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *        <FAB
- *          Icon={() => {
- *            return <Typography>🔔</Typography>;
- *          }}
- *        />
- *     </Container>
- *  );
- * }
- * ```
- *
- * @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,
-    shadowOffset: {
-      width: 0,
-      height: moderateScale(2),
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: moderateScale(3.84),
-    elevation: 5,
-  };
-
-  let style = rest.style || {};
-  if (disabled) {
-    style = { ...style, opacity: 0.5 };
-  }
-
-  return (
-    <Touchable
-      {...(variant !== "inverse" ? { bg } : {})}
-      disabled={disabled}
-      style={[style, shadowStyle]}
-      variant={variant}
-      onPress={onPress}
-      {...(variant !== "inverse" ? { borderColor: bg } : {})}
-      {...rest}
-    >
-      <Icon />
-    </Touchable>
-  );
-};
-
-FAB.defaultProps = {
-  variant: "solid",
-  size: moderateScale(56),
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: moderateScale(28),
-};
-
-FAB.propTypes = {
-  ...propTypes.flexbox,
-  ...propTypes.position,
-  ...propTypes.space,
-  ...propTypes.border,
-  ...propTypes.layout,
-  ...propTypes.color,
-  /**
-   * Icon to display for the Button.
-   */
-  Icon: PropTypes.elementType.isRequired,
-  /**
-   * Function to execute on press.
-   */
-  onPress: PropTypes.func.isRequired,
-  /**
-   * String to set background color.
-   */
-  bg: PropTypes.string,
-  /**
-   * Boolean to disable button.
-   */
-  disabled: PropTypes.bool,
-  variant: PropTypes.string,
-};