@bigbinary/neetoui-rn 0.0.269 → 0.0.270

package/src/components/Button.jsx

@@ -1,275 +0,0 @@
-import React, { useContext } from "react";
-
-import propTypes from "@styled-system/prop-types";
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-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",
-  TEXT: "text",
-  DANGER: "danger",
-  DANGER_INVERSE: "danger-inverse",
-  DANGER_TEXT: "danger-text",
-});
-
-/**
- *
- * Buttons are touchable elements used to interact with the screen and to trigger an action.
- *
- * <div class="screenshots">
- *   <img src="screenshots/button/button.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Button, Container } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *      <Button my={moderateScale(9)} label="Button1" />
- *      <Button my={moderateScale(9)} disabled label="Disabled Button2" />
- *      <Button
- *        my={moderateScale(9)}
- *        LeftIcon={() => <Icon name="ri-add-line" color="white" size={moderateScale(16)} />}
- *        label="Left Icon Button"
- *      />
- *      <Button
- *        my={moderateScale(9)}
- *        RightIcon={() => <Icon name="ri-add-line" color="white" size={moderateScale(16)} />}
- *        label="Right Icon Button"
- *      />
- *      <Button my={moderateScale(9)} variant="text" label="Text Button" />
- *      <Button
- *        my={moderateScale(9)}
- *        variant="text"
- *        LeftIcon={() => (
- *          <Icon name="ri-add-line" color={theme.fonts.primary} size={moderateScale(16)} />
- *        )}
- *        label="Left Icon Text Button"
- *      />
- *      <Button
- *        my={moderateScale(9)}
- *        variant="text"
- *        RightIcon={() => (
- *          <Icon name="ri-add-line" color={theme.fonts.primary} size={moderateScale(16)} />
- *        )}
- *        label="Right Icon Text Button"
- *      />
- *    </Container>
- *  );
- * }
- * ```
- *
- */
-
-export const Button = React.forwardRef(
-  (
-    {
-      variant,
-      label,
-      labelStyle,
-      RightIcon,
-      LeftIcon,
-      disabled,
-      isLoading,
-      loadingText,
-      fontFamily,
-      color,
-      fontSize,
-      ...rest
-    },
-    ref
-  ) => {
-    const theme = useContext(ThemeContext);
-    const width =
-      variant === "text" || variant === "danger-text" ? null : "100%";
-
-    const getButtonColors = () => {
-      switch (variant) {
-        case BUTTON_VARIANTS.SOLID:
-          return {
-            bg: theme.colors.background[disabled ? "grey400" : "base"],
-            border: theme.colors.background[disabled ? "grey400" : "base"],
-            color: theme.colors.background.white,
-            ripple: "white",
-          };
-        case BUTTON_VARIANTS.SECONDARY:
-          return {
-            bg: "transparent",
-            border: theme.colors.background.base,
-            color: theme.colors.font.base,
-            ripple: theme.colors.background.base,
-          };
-        case BUTTON_VARIANTS.TEXT:
-          return {
-            bg: "transparent",
-            border: "transparent",
-            color: theme.colors.font.primary,
-            ripple: theme.colors.background.grey800,
-          };
-        case BUTTON_VARIANTS.DANGER:
-          return {
-            bg: theme.colors.background.danger,
-            border: theme.colors.background.danger,
-            color: theme.colors.background.white,
-            ripple: "white",
-          };
-        case BUTTON_VARIANTS.DANGER_INVERSE:
-          return {
-            bg: theme.colors.background.white,
-            border: theme.colors.background.danger,
-            color: theme.colors.background.danger,
-            ripple: theme.colors.background.grey800,
-          };
-        case BUTTON_VARIANTS.DANGER_TEXT:
-          return {
-            bg: "transparent",
-            border: "transparent",
-            color: theme.colors.background.danger,
-            ripple: theme.colors.background.grey800,
-          };
-        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 (
-        [
-          "text",
-          "secondary",
-          "danger",
-          "danger-inverse",
-          "danger-text",
-        ].includes(variant) &&
-        disabled
-      ) {
-        return 0.5;
-      }
-
-      return 1;
-    };
-
-    return (
-      <Touchable
-        alignItems="center"
-        bg={getButtonColors().bg}
-        borderColor={getButtonColors().border}
-        borderRadius={moderateScale(8)}
-        borderWidth={moderateScale(1)}
-        disabled={disabled || isLoading}
-        flexDirection="row"
-        height={moderateScale(48)}
-        justifyContent="center"
-        opacity={renderOpacity()}
-        px={width === null ? moderateScale(8) : undefined}
-        ref={ref}
-        rippleConfig={{ color: getButtonColors().ripple }}
-        width={width}
-        {...rest}
-      >
-        {isLoading ? (
-          <Container flexDirection="row">
-            <Loader color={getButtonColors().color} />
-            {!!loadingText && (
-              <Typography
-                color={color || getButtonColors().color}
-                fontFamily={fontFamily || theme.fonts.sf500}
-                fontSize={fontSize}
-                ml={moderateScale(8)}
-                textAlign="center"
-                {...labelStyle}
-              >
-                {loadingText}
-              </Typography>
-            )}
-          </Container>
-        ) : (
-          <>
-            {LeftIcon && <LeftIcon />}
-            <Typography
-              color={color || getButtonColors().color}
-              fontFamily={fontFamily || theme.fonts.sf500}
-              fontSize={fontSize}
-              mx={moderateScale(2)}
-              textAlign="center"
-              {...labelStyle}
-            >
-              {label}
-            </Typography>
-            {RightIcon && <RightIcon />}
-          </>
-        )}
-      </Touchable>
-    );
-  }
-);
-
-Button.defaultProps = {
-  variant: "solid",
-  isLoading: false,
-  loadingText: "",
-  fontSize: "m",
-};
-
-Button.propTypes = {
-  ...propTypes.buttonStyle,
-  ...propTypes.flexbox,
-  ...propTypes.space,
-  ...propTypes.border,
-  ...propTypes.layout,
-  ...propTypes.color,
-  /**
-   * Takes the text that needs to be displayed inside the button.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Supported Type: 'text' | 'solid'
-   * You can change the mode to adjust the styling.
-   *  <ul>
-   *    <li>text - flat button without background or outline.</li>
-   *    <li>solid - button with a background color.</li>
-   *  </ul>
-   */
-  variant: PropTypes.oneOf(Object.values(BUTTON_VARIANTS)),
-  /**
-   * Enable or Disable the button.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Customize label style of the button.
-   */
-  labelStyle: PropTypes.object,
-  /**
-   * Render a component on the right side of the Label.
-   */
-  RightIcon: PropTypes.elementType,
-  /**
-   * Render a component on the left side of the Label.
-   */
-  LeftIcon: PropTypes.elementType,
-  /**
-   * To show loading indicator on the button.
-   */
-  isLoading: PropTypes.bool,
-  /**
-   * To show loading text along with the loading indicator on the button.
-   */
-  loadingText: PropTypes.string,
-  fontFamily: PropTypes.string,
-  color: PropTypes.string,
-  fontSize: PropTypes.string,
-};
-Button.displayName = "Button";

package/src/components/ButtonGroup.jsx

@@ -1,120 +0,0 @@
-import * as React from "react";
-
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-
-import { Container, Typography, Touchable } from "@components";
-
-/**
- * ButtonGroup is a linear set of segments, each of which function as a button that can display a different view/or perform a different action.
- * <div class="screenshots">
- *   <img src="screenshots/buttonGroup/buttonGroup.png" />
- * </div>
- * 
- * ## Usage
- * ```js
- * import React, { useState } from 'react';
- * import { ButtonGroup } from '@bigbinary/neetoui-rn';
- * 
- * export default function Main(){
- *  const buttonItems = ["Button1", "Button2"];
- *  const [activeButton, setActiveButton] = useState(buttonItems[0]);
- *  
- *  return(
- *   <ButtonGroup
- *     buttonItems={buttonItems}
- *     onPress={setActiveButton}
- *     currentActiveBtn={activeButton}
- *    />    
- *  );
- * } 
-
- * ```
- */
-
-export const ButtonGroup = ({
-  activeColor,
-  inActiveColor,
-  buttonItems,
-  onPress,
-  currentActiveBtn,
-  wrapperStyle,
-  buttonStyle,
-  buttonTextStyle,
-}) => (
-  <Container
-    alignSelf="center"
-    border="1px solid"
-    borderColor={activeColor}
-    borderRadius={moderateScale(2)}
-    flexDirection="row"
-    justifyContent="space-between"
-    my={moderateScale(3)}
-    {...wrapperStyle}
-  >
-    {buttonItems.map(item => (
-      <Touchable
-        bg={item === currentActiveBtn ? activeColor : inActiveColor}
-        key={item}
-        p={moderateScale(2)}
-        px={moderateScale(3)}
-        onPress={() => {
-          if (item !== currentActiveBtn) {
-            onPress(item);
-          }
-        }}
-        {...buttonStyle}
-      >
-        <Typography
-          color={item === currentActiveBtn ? inActiveColor : activeColor}
-          {...buttonTextStyle}
-        >
-          {item}
-        </Typography>
-      </Touchable>
-    ))}
-  </Container>
-);
-
-ButtonGroup.defaultProps = {
-  activeColor: "background.grey600",
-  inActiveColor: "background.white",
-  wrapperStyle: {},
-  buttonTextStyle: { ellipsizeMode: "tail", numberOfLines: 1 },
-  buttonStyle: {},
-};
-
-ButtonGroup.propTypes = {
-  /**
-   * Sets active color to the selected button in buttonGroup.
-   */
-  activeColor: PropTypes.string,
-  /**
-   * Sets inActive color to the unselected button in buttonGroup.
-   */
-  inActiveColor: PropTypes.string,
-  /**
-   * Returns the current selected item on button press.
-   */
-  onPress: PropTypes.func.isRequired,
-  /**
-   * Array of button text.
-   */
-  buttonItems: PropTypes.array.isRequired,
-  /**
-   * Sets current active button.
-   */
-  currentActiveBtn: PropTypes.string.isRequired,
-  /**
-   * Styling for main container.
-   */
-  wrapperStyle: PropTypes.object,
-  /**
-   * Styling for button text.
-   */
-  buttonTextStyle: PropTypes.object,
-  /**
-   * Styling for button.
-   */
-  buttonStyle: PropTypes.object,
-};

package/src/components/Calendar.jsx

@@ -1,128 +0,0 @@
-import React, { useContext } from "react";
-
-import dayjs from "dayjs";
-import PropTypes from "prop-types";
-import { Calendar as RNCalender } from "react-native-calendars";
-import { moderateScale } from "react-native-size-matters";
-import { ThemeContext } from "styled-components/native";
-
-/**
- *
- * Calendar component built on top of [react-native-calendars](https://github.com/wix/react-native-calendars) with our custom theme.
- *
- * <div class="screenshots">
- *   <img src="screenshots/calendar/calendar.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import dayjs from "dayjs";
- * import { Calendar } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  const [selectedDate, setSelectedDate] = useState(dayjs());
- *  return (
- *    <Calendar
- *      selectedDate={selectedDate}
- *      onDayPress={({ dateString }) => setSelectedDate(dateString)}
- *    />
- *  );
- * }
- * ```
- *
- * Checkout <a href=" https://www.npmjs.com/package/react-native-calendars">react-native-calendars</a> package for all the available props
- */
-
-export const Calendar = ({ selectedDate, ...rest }) => {
-  delete rest.markedDates;
-  const theme = useContext(ThemeContext);
-  const isCurrentDay = dayjs(selectedDate).isSame(dayjs(), "D");
-
-  return (
-    <RNCalender
-      current={selectedDate}
-      firstDay={1}
-      key={selectedDate}
-      markedDates={{
-        [dayjs(selectedDate).format("YYYY-MM-DD")]: {
-          selected: true,
-        },
-      }}
-      theme={{
-        arrowColor: theme.colors.font.primary,
-        dotStyle: {
-          height: 0,
-          width: 0,
-          marginTop: 0,
-        },
-        "stylesheet.calendar.header": {
-          week: {
-            marginVertical: moderateScale(10),
-            flexDirection: "row",
-            justifyContent: "space-around",
-            alignItems: "center",
-            fontFamily: theme.fonts.sf600,
-          },
-          dayHeader: {
-            flex: 1,
-            textAlign: "center",
-            fontFamily: theme.fonts.sf600,
-            fontSize: theme.fontSizes.xs,
-            color: theme.colors.font.grey500,
-            textTransform: "uppercase",
-          },
-          monthText: {
-            fontFamily: theme.fonts.sf400,
-            fontSize: theme.fontSizes.l,
-            color: theme.colors.font.primary,
-          },
-        },
-        "stylesheet.day.basic": {
-          base: {
-            alignItems: "center",
-            justifyContent: "center",
-            height: moderateScale(26),
-            width: moderateScale(26),
-            borderRadius: moderateScale(5),
-            borderWidth: moderateScale(1),
-            borderColor: "transparent",
-          },
-          today: {
-            borderColor: isCurrentDay
-              ? "transparent"
-              : theme.colors.border.base,
-          },
-          selected: {
-            backgroundColor: theme.colors.background.purple100,
-          },
-          text: {
-            fontFamily: theme.fonts.sf400,
-            fontSize: theme.fontSizes.xs,
-            color: theme.colors.font.primary,
-            margin: 0,
-            padding: 0,
-          },
-          todayText: {
-            color: theme.colors.font.base,
-          },
-          selectedText: {
-            fontFamily: theme.fonts.sf600,
-            color: theme.colors.font.base,
-          },
-          disabledText: {
-            color: theme.colors.font.grey400,
-          },
-        },
-      }}
-      {...rest}
-    />
-  );
-};
-
-Calendar.propTypes = {
-  selectedDate: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.instanceOf(dayjs),
-  ]),
-};

package/src/components/Card.jsx

@@ -1,90 +0,0 @@
-import * as React from "react";
-import { StyleSheet, TouchableOpacity } from "react-native";
-
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-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)`
-  ${flexbox}
-  ${space}
- ${border}
- ${color}
- ${layout}
-`;
-
-/**
- * This component is wrapper over Container component.
- * This component supports below props categories from [styled-system ](/styled-system).
- *
- *
- * <ul>
- * <li>flexbox</li>
- * <li>space</li>
- * <li>border</li>
- * <li>color</li>
- * <li>layout</li>
- * </ul>
- *
- * <div class="screenshots">
- *   <img src="screenshots/card/shadows.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Card, Typography } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *     <Card height="100px" width="100px" bg="background.danger" elevation={moderateScale(8)}>
- *       <Typography fontSize="14px">Card</Typography>
- *     </Card>
- *  );
- * }
- * ```
- *
- */
-
-export const Card = ({ children, elevation, ...rest }) => {
-  const shadowStyles = elevation ? getShadowStyles(elevation) : {};
-
-  const cardStyles = { ...styles.defaultShadows, ...shadowStyles };
-
-  return (
-    <StyledTouchableOpacity
-      activeOpacity={rest.onPress ? 0.2 : 1}
-      style={cardStyles}
-      {...rest}
-    >
-      {children}
-    </StyledTouchableOpacity>
-  );
-};
-
-Card.propTypes = {
-  /**
-   * To change the shadow styles based on elevation.
-   * Valid elevation values (0-21).
-   */
-  elevation: PropTypes.number,
-  children: PropTypes.node,
-};
-
-export const styles = StyleSheet.create({
-  defaultShadows: {
-    shadowColor: theme.colors.background.grey800,
-    shadowOffset: {
-      width: 0,
-      height: moderateScale(2),
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: moderateScale(3.84),
-    elevation: 5,
-  },
-});