@bigbinary/neetoui-rn 0.0.269 → 0.0.270

package/src/components/NotificationPreferenceList.jsx

@@ -1,208 +0,0 @@
-import React from "react";
-
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-
-import {
-  Container,
-  Typography,
-  Divider,
-  ToggleSwitch,
-  Loader,
-} from "@components";
-
-/**
- *
- * Buttons are touchable elements used to interact with the screen and to trigger an action.
- *
- * <div class="screenshots">
- *   <img src="screenshots/notificationPreferenceList/notificationPreferenceList.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Container, NotificationPreferenceList } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  const [data, setData] = useState([]);
- * 
- *  const handleSwitch = (item, index) => {
- *    setData(prevData => {
- *      const newData = [...prevData];
- *      newData[index].enabled = !newData[index].enabled;
- *      return newData;
- *    });
- *  };
-
- *  useEffect(() => {
- *    setData([
- *      {
- *        label: "Preference 1",
- *        enabled: true,
- *        onSwitch: handleSwitch,
- *      },
- *      {
- *        label: "Preference 2",
- *        enabled: true,
- *        onSwitch: handleSwitch,
- *      },
- *      {
- *        label: "Preference 3",
- *        enabled: false,
- *        onSwitch: handleSwitch,
- *      },
- *      {
- *        label: "Preference 4",
- *        enabled: false,
- *        onSwitch: handleSwitch,
- *      },
- *      {
- *        label: "Preference 5",
- *        enabled: false,
- *        onSwitch: handleSwitch,
- *        LeftIcon: () => (
- *          <Icon
- *            name="ri-notification-2-line"
- *            size={moderateScale(20)}
- *            color={theme.colors.font.secondary}
- *          />
- *        ),
- *      },
- *    ]);
- *  }, []);
-
- *  return (
- *    <Container flex={1} alignItems="center" justifyContent="center">
- *      {data && <NotificationPreferenceList data={data} />}
- *    </Container>
- *  );
- * }
- * ```
- *
- */
-
-const lineHeight = moderateScale(22);
-export const NotificationPreferenceList = ({
-  isLoading,
-  data,
-  itemWrapperProps,
-  itemContainerProps,
-  labelContainerProps,
-  labelProps,
-  title,
-  titleProps,
-  ...rest
-}) => (
-  <Container width="100%">
-    <Container
-      alignItems="center"
-      flexDirection="row"
-      pb={moderateScale(8)}
-      pt={moderateScale(20)}
-    >
-      {!!title && (
-        <Typography
-          color="font.grey600"
-          fontSize="m"
-          lineHeight={`${lineHeight}px`}
-          {...titleProps}
-        >
-          {title}
-        </Typography>
-      )}
-      {isLoading && (
-        <Container
-          height={lineHeight}
-          justifyContent="center"
-          mx={moderateScale(8)}
-        >
-          <Loader />
-        </Container>
-      )}
-    </Container>
-    <Container
-      bg="background.secondary"
-      borderRadius={moderateScale(8)}
-      {...rest}
-    >
-      {data?.map((item, index) => {
-        const { label, enabled, onSwitch, LeftIcon } = item;
-        const isLastItem = index === data.length - 1;
-
-        return (
-          <Container key={index} px={moderateScale(16)} {...itemWrapperProps}>
-            <Container
-              alignItems="center"
-              flexDirection="row"
-              justifyContent="space-between"
-              py={moderateScale(12)}
-              {...itemContainerProps}
-            >
-              <Container
-                alignItems="center"
-                flex={1}
-                flexDirection="row"
-                {...labelContainerProps}
-              >
-                {LeftIcon && (
-                  <Container mr={moderateScale(8)}>
-                    <LeftIcon />
-                  </Container>
-                )}
-                <Typography
-                  flex={1}
-                  fontSize="l"
-                  mr={moderateScale(8)}
-                  {...labelProps}
-                >
-                  {label}
-                </Typography>
-              </Container>
-              <ToggleSwitch
-                value={enabled}
-                onValueChange={() => onSwitch(item, index)}
-              />
-            </Container>
-            {!isLastItem && <Divider bg="background.grey300" />}
-          </Container>
-        );
-      })}
-    </Container>
-  </Container>
-);
-
-NotificationPreferenceList.propTypes = {
-  /**
-   * Array of preference list
-   */
-  data: PropTypes.array.isRequired,
-  /**
-   * Customize outer container for each item
-   */
-  itemWrapperProps: PropTypes.object,
-  /**
-   * Customize inner container for each item
-   */
-  itemContainerProps: PropTypes.object,
-  /**
-   * Customize container for each item label
-   */
-  labelContainerProps: PropTypes.object,
-  /**
-   * Customize item label
-   */
-  labelProps: PropTypes.object,
-  /**
-   * Title value.
-   */
-  title: PropTypes.string,
-  /**
-   * Customize title style.
-   */
-  titleProps: PropTypes.string,
-  /**
-   * Show loader
-   */
-  isLoading: PropTypes.bool,
-};

package/src/components/OnBoarding.jsx

@@ -1,134 +0,0 @@
-import React, { useRef, useState } from "react";
-
-import PropTypes from "prop-types";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { moderateScale } from "react-native-size-matters";
-
-import { Button, Carousel, Container, Typography } from "@components";
-
-/**
- *
- * <div class="screenshots">
- *   <img src="screenshots/onboarding/onboarding.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 { 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 = moderateScale(150),
-}) => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const onBoardingRef = useRef();
-  const { bottom } = useSafeAreaInsets();
-
-  const handleOnPress = () => {
-    if (activeIndex !== slides.length - 1) {
-      onBoardingRef.current.snapToNext();
-      setActiveIndex(onBoardingRef.current._activeItem);
-    } else onComplete();
-  };
-
-  const renderItem = ({ item }) => (
-    <Container flex={1} justifyContent="space-between">
-      <Container
-        alignItems="center"
-        flex={1}
-        justifyContent="center"
-        mx={moderateScale(24)}
-        my={moderateScale(12)}
-      >
-        {item.illustration}
-      </Container>
-      <Container
-        alignItems="center"
-        mx={moderateScale(24)}
-        my={moderateScale(12)}
-      >
-        <Typography
-          color="font.grey800"
-          fontFamily="sf700"
-          fontSize="4xl"
-          textAlign="center"
-        >
-          {item.title}
-        </Typography>
-        <Typography
-          color="font.grey500"
-          fontFamily="sf400"
-          fontSize="l"
-          textAlign="center"
-        >
-          {item.description}
-        </Typography>
-      </Container>
-    </Container>
-  );
-
-  return (
-    <Container bg="background.white" flex={1}>
-      <Container alignItems="center">
-        <AppLogo width={logoWidth} />
-      </Container>
-      <Container alignItems="center" flex={1}>
-        <Carousel
-          carouselRef={onBoardingRef}
-          itemArray={slides}
-          renderItem={renderItem}
-          onSnapToItem={index => {
-            setActiveIndex(index);
-          }}
-        />
-      </Container>
-      <Container
-        mb={bottom === 0 ? moderateScale(16) : 0}
-        mx={moderateScale(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/OrganizationItem.jsx

@@ -1,110 +0,0 @@
-import React from "react";
-import { Linking } from "react-native";
-
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-
-import { Container, Typography } from "@components";
-
-/**
- *
- * Buttons are touchable elements used to interact with the screen and to trigger an action.
- *
- * <div class="screenshots">
- *   <img src="screenshots/organizationItem/organizationItem.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { OrganizationItem } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <OrganizationItem name="BigBinary Solutions Pvt. Ltd." />
- *  );
- * }
- * ```
- *
- */
-
-export const OrganizationItem = ({
-  label,
-  labelContainerProps,
-  labelProps,
-  name,
-  nameProps,
-  subdomain,
-  subdomainProps,
-  ...rest
-}) => (
-  <Container
-    bg="background.secondary"
-    borderRadius={moderateScale(6)}
-    justifyContent="space-between"
-    px={moderateScale(12)}
-    py={moderateScale(12)}
-    width="100%"
-    {...rest}
-  >
-    <Container alignItems="center" flexDirection="row" {...labelContainerProps}>
-      <Typography
-        color="font.grey800"
-        fontFamily="sf500"
-        fontSize="s"
-        {...labelProps}
-      >
-        {label || "Organization"}
-      </Typography>
-    </Container>
-    <Typography
-      color="font.grey"
-      fontFamily="sf500"
-      fontSize="m"
-      mt="8px"
-      {...nameProps}
-    >
-      {name}
-    </Typography>
-    <Typography
-      color="font.grey"
-      fontFamily="sf500"
-      fontSize="m"
-      onPress={() => Linking.openURL(`https://${subdomain}`)}
-      {...subdomainProps}
-    >
-      {subdomain}
-    </Typography>
-  </Container>
-);
-
-OrganizationItem.propTypes = {
-  /**
-   * Organization label
-   */
-  label: PropTypes.string,
-  /**
-   * Customize label container
-   */
-  labelContainerProps: PropTypes.object,
-  /**
-   * Customize label
-   */
-  labelProps: PropTypes.object,
-  /**
-   * Organization name
-   */
-  name: PropTypes.string.isRequired,
-  /**
-   * Customize name
-   */
-  nameProps: PropTypes.object,
-  /**
-   * Subdomain
-   */
-  subdomain: PropTypes.string.isRequired,
-  /**
-   * Customize Subdomain
-   */
-  subdomainProps: PropTypes.object,
-};

package/src/components/OtpInputs.jsx

@@ -1,194 +0,0 @@
-import React, { useEffect } from "react";
-import { InteractionManager, Keyboard } 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,
-  buttonStyle,
-  typography,
-  color,
-} from "styled-system";
-
-import { Container, Typography } from "@components";
-
-import { theme } from "../theme";
-
-const TextInput = styled.TextInput`
-  ${flexbox}
-  ${space}
-  ${border}
-  ${buttonStyle}
-  ${typography}
-  ${color}
-`;
-
-const styles = {
-  inputStyles: {
-    fontSize: 0,
-    backgroundColor: "transparent",
-    color: "transparent",
-    width: "100%",
-    height: "100%",
-    position: "absolute",
-  },
-  defaultContainerStyles: {
-    margin: moderateScale(2),
-    borderRadius: moderateScale(8),
-    backgroundColor: theme.colors.background.white,
-    justifyContent: "center",
-    alignItems: "center",
-    minHeight: moderateScale(42),
-    minWidth: moderateScale(42),
-  },
-  defaultTextStyles: {
-    fontSize: theme.fontSizes.xl,
-    fontFamily: theme.fonts.sf700,
-  },
-};
-
-/**
- *
- * One-Time password input component.
- *
- * <div class="screenshots">
- *   <img src="screenshots/otp/otp.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Container, OtpInputs, Typography} from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- * const [code, setCode] = useState("");
- * return (
- *   <Container flex={1} justifyContent="center" alignItems="center">
- *      <OtpInputs code={code} numberOfInputs={6} handleChange={setCode} />
- *      <Typography py={moderateScale(10)} fontSize="xl">
- *        {`Your entered OTP is ${code}`}
- *      </Typography>
- *    </Container>
- *  );
- * ```
- */
-
-export const OtpInputs = ({
-  handleChange = () => {},
-  numberOfInputs = 4,
-  error = false,
-  code = "",
-  containerStyles,
-  textStyles,
-}) => {
-  const inputRef = React.useRef();
-  useEffect(() => {
-    // Must run after animations for keyboard to automatically open
-    InteractionManager.runAfterInteractions(() => {
-      if (inputRef?.current) {
-        inputRef.current.focus();
-      }
-    });
-  }, [inputRef]);
-
-  return (
-    <Container>
-      <Container
-        alignItems="center"
-        flexDirection="row"
-        justifyContent="center"
-        onTouchEnd={() => {
-          Keyboard.dismiss();
-          inputRef && inputRef.current.focus();
-        }}
-      >
-        {Array(numberOfInputs)
-          .fill()
-          .map((_number, index) => (
-            <Container
-              key={index}
-              borderColor={
-                code.length - 1 === index
-                  ? theme.colors.border.purple500
-                  : theme.colors.border.secondary
-              }
-              borderWidth={
-                code.length - 1 === index
-                  ? moderateScale(1.5)
-                  : moderateScale(1)
-              }
-              {...styles.defaultContainerStyles}
-              {...containerStyles}
-            >
-              <Typography
-                accessibilityLabel="otp"
-                color={
-                  error ? theme.colors.font.danger : theme.colors.font.purple500
-                }
-                {...styles.defaultTextStyles}
-                {...textStyles}
-              >
-                {code[index] || ""}
-              </Typography>
-            </Container>
-          ))}
-        <TextInput
-          autoFocus
-          keyboardType="phone-pad"
-          ref={inputRef}
-          selectionColor="transparent"
-          value={code || ""}
-          onChangeText={value => {
-            if (!isNaN(value)) {
-              if (value.length <= numberOfInputs) {
-                handleChange && handleChange(value);
-              }
-
-              if (value.length >= numberOfInputs) {
-                return Keyboard.dismiss();
-              }
-            }
-
-            return null;
-          }}
-          {...styles.inputStyles}
-        />
-      </Container>
-    </Container>
-  );
-};
-
-OtpInputs.defaultProps = {
-  containerStyles: {},
-  textStyles: {},
-};
-
-OtpInputs.propTypes = {
-  /**
-   * This would be OTP code.
-   */
-  code: PropTypes.string.isRequired,
-  /**
-   * Number of Input Fields.
-   */
-  numberOfInputs: PropTypes.number.isRequired,
-  /**
-   * Callback called when code is changed.
-   */
-  handleChange: PropTypes.func.isRequired,
-  /**
-   * If true, code will be shown in red color.
-   */
-  error: PropTypes.bool,
-  /**
-   * To change the styles of main container.
-   */
-  containerStyles: PropTypes.object,
-  /**
-   * To change the styles of OTP text.
-   */
-  textStyles: PropTypes.object,
-};