@bigbinary/neetoui-rn 0.0.268 → 0.0.270

package/src/components/SegmentedTopBar/index.jsx

@@ -1,128 +0,0 @@
-import React, {
-  createRef,
-  useState,
-  useMemo,
-  useRef,
-  useLayoutEffect,
-} from "react";
-import { StyleSheet, View } from "react-native";
-
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-
-import { theme } from "@theme";
-
-import { Indicator } from "./Indicator";
-import { Tab } from "./Tab";
-
-/**
- *
- * A Segment Picker component that provides toggling between two or more views.
- *
- * <div class="screenshots">
- *   <img src="screenshots/toptabbar/toptabbar-1.png" />
- *   <img src="screenshots/toptabbar/toptabbar-2.png" />
- * </div>
- *
- *   ## Usage
- * ```js
- * import * as React from 'react';
- * import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
- * import { NavigationContainer } from "@react-navigation/native";
- *
- * import { SegmentedTopBar } from '@bigbinary/neetoui-rn';
- *
- * const Tab = createMaterialTopTabNavigator();
- *
- * export default function Main(){
- *
- *  return (
- *    <NavigationContainer>
- *      <Tab.Navigator tabBar={props => <SegmentedTopBar {...props} />} >
- *        <Tab.Screen
- *          name="Home"
- *          component={HomeScreen}
- *        />
- *
- *        <Tab.Screen
- *          name="Settings"
- *          component={SettingsScreen}
- *        />
- *      </Tab.Navigator>
- *    </NavigationContainer>
- *  );
- * }
- * ```
- */
-
-export const SegmentedTopBar = ({
-  state: { routes, index },
-  navigation,
-  height,
-  descriptors,
-}) => {
-  const containerRef = useRef();
-
-  const [measures, setMeasures] = useState([]);
-
-  const tabsData = useMemo(
-    () =>
-      routes.map(({ key, name }) => {
-        const { options } = descriptors[key];
-        const label = options.tabBarLabel ?? options.title ?? name;
-
-        return { label, value: name, ref: createRef() };
-      }),
-    []
-  );
-
-  useLayoutEffect(() => {
-    const _measures = [];
-
-    tabsData.forEach(({ ref }) => {
-      ref.current.measureLayout(containerRef.current, (x, y, width, height) => {
-        _measures.push({ x, y, width, height });
-
-        if (_measures.length === tabsData.length) {
-          setMeasures(_measures);
-        }
-      });
-    });
-  }, [measures.length]);
-
-  return (
-    <View height={height} ref={containerRef} style={styles.container}>
-      {measures.length > 0 && <Indicator measure={measures[index]} />}
-      {tabsData.map(({ label, value, ref }) => (
-        <Tab
-          flex={tabsData.length > 3 ? label.length : 1}
-          key={value}
-          label={label}
-          navigation={navigation}
-          ref={ref}
-          value={value}
-        />
-      ))}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    borderRadius: moderateScale(6),
-    backgroundColor: theme.colors.background.secondary,
-  },
-});
-
-SegmentedTopBar.propTypes = {
-  state: PropTypes.object,
-  height: PropTypes.number,
-  navigation: PropTypes.object,
-  descriptors: PropTypes.object,
-};
-
-SegmentedTopBar.defaultProps = {
-  tabs: [],
-  height: moderateScale(36),
-};

package/src/components/SocialButton.jsx

@@ -1,106 +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 AppleLogo from "@assets/icons/apple-logo.svg";
-import GoogleLogo from "@assets/icons/google-logo.svg";
-import { Container, Typography, Touchable, Loader } from "@components";
-
-/**
- *
- * Buttons are touchable elements used to interact with the screen and to trigger an action.
- *
- * <div class="screenshots">
- *   <img src="screenshots/socialButton/socialButtons.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Container, SocialButton } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *      <SocialButton variant="apple" my={moderateScale(9)} />
- *      <SocialButton variant="google" />
- *    </Container>
- *  );
- * }
- * ```
- *
- */
-
-export const SocialButton = ({
-  variant,
-  disabled,
-  labelStyle,
-  isLoading,
-  ...rest
-}) => {
-  const theme = useContext(ThemeContext);
-  const capitalize = str => `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
-
-  return (
-    <Touchable
-      alignItems="center"
-      bg="transparent"
-      borderColor={theme.colors.border.grey800}
-      borderRadius={moderateScale(8)}
-      borderWidth={moderateScale(1)}
-      disabled={disabled}
-      height={moderateScale(48)}
-      justifyContent="center"
-      rippleConfig={{ color: theme.colors.background.grey800 }}
-      width="100%"
-      {...rest}
-    >
-      {isLoading ? (
-        <Loader color={theme.colors.background.grey800} />
-      ) : (
-        <>
-          <Container left={moderateScale(17)} position="absolute">
-            {variant === "apple" && <AppleLogo />}
-            {variant === "google" && <GoogleLogo />}
-          </Container>
-          <Typography
-            color={theme.colors.font.primary}
-            fontFamily={theme.fonts.sf500}
-            fontSize="m"
-            {...labelStyle}
-          >
-            Continue with {capitalize(variant)}
-          </Typography>
-        </>
-      )}
-    </Touchable>
-  );
-};
-
-SocialButton.propTypes = {
-  ...propTypes.buttonStyle,
-  ...propTypes.flexbox,
-  ...propTypes.space,
-  ...propTypes.border,
-  ...propTypes.layout,
-  ...propTypes.color,
-  /**
-   * Supported Type: 'apple' | 'google'
-   */
-  variant: PropTypes.oneOf(["apple", "google"]),
-  /**
-   * Enable or Disable the button
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Customize label style of the button
-   */
-  labelStyle: PropTypes.object,
-  /**
-   * Button loading status
-   */
-  isLoading: PropTypes.bool,
-};

package/src/components/Toast.jsx

@@ -1,195 +0,0 @@
-import * as React from "react";
-import { useContext, useEffect } from "react";
-import { useWindowDimensions } from "react-native";
-
-import { Close } from "@bigbinary/neeto-icons-rn";
-import PropTypes from "prop-types";
-import DeviceInfo from "react-native-device-info";
-import { moderateScale } from "react-native-size-matters";
-import T from "react-native-toast-message";
-import { ThemeContext } from "styled-components/native";
-
-import ErrorIcon from "@assets/icons/error.svg";
-import InfoIcon from "@assets/icons/info.svg";
-import SuccessIcon from "@assets/icons/success.svg";
-import WarningIcon from "@assets/icons/warning.svg";
-import { Container, Typography, Card, Touchable } from "@components";
-import { defaultToasterConfig } from "@config";
-
-let timer;
-const ToastComponent = ({ type, text1, text2, hide, isVisible }) => {
-  const theme = useContext(ThemeContext);
-  const { width } = useWindowDimensions();
-
-  useEffect(() => {
-    if (isVisible) {
-      timer = setTimeout(() => {
-        hide();
-      }, 4000);
-    }
-
-    return;
-  }, [isVisible, hide]);
-
-  const Icon = () => {
-    switch (type) {
-      case "success":
-        return <SuccessIcon />;
-      case "warning":
-        return <WarningIcon />;
-      case "info":
-        return <InfoIcon />;
-      case "error":
-        return <ErrorIcon />;
-    }
-
-    return null;
-  };
-
-  return (
-    <Card
-      alignItems="center"
-      bg={theme.colors.background.secondary}
-      borderRadius={moderateScale(16)}
-      elevation={10}
-      flexDirection="row"
-      minHeight={moderateScale(60)}
-      mt={DeviceInfo.hasDynamicIsland() ? moderateScale(10) : 0}
-      mx={moderateScale(10)}
-      px={moderateScale(10)}
-      width={width - moderateScale(20)}
-      onPressIn={() => {
-        clearTimeout(timer);
-      }}
-    >
-      <Container
-        alignItems="center"
-        bg={theme.colors.toast[type]}
-        borderRadius={moderateScale(10)}
-        height={moderateScale(42)}
-        justifyContent="center"
-        width={moderateScale(42)}
-      >
-        <Icon />
-      </Container>
-      <Container flex={1} ml={moderateScale(10)} py={moderateScale(3)}>
-        {text1 && (
-          <Typography
-            fontColor={theme.colors.font.primary}
-            fontFamily={theme.fonts.sf600}
-            fontSize="l"
-          >
-            {text1}
-          </Typography>
-        )}
-        {text2 && (
-          <Typography
-            fontColor={theme.colors.font.secondary}
-            fontFamily={theme.fonts.sf400}
-            fontSize="xs"
-          >
-            {text2}
-          </Typography>
-        )}
-      </Container>
-      <Touchable
-        hitSlop={{
-          top: moderateScale(5),
-          right: moderateScale(5),
-          bottom: moderateScale(5),
-          left: moderateScale(5),
-        }}
-        onPress={() => {
-          clearTimeout(timer);
-          hide();
-        }}
-      >
-        <Close color={theme.colors.font.grey500} size={moderateScale(22)} />
-      </Touchable>
-    </Card>
-  );
-};
-
-ToastComponent.propTypes = {
-  type: PropTypes.string,
-  text1: PropTypes.string,
-  text2: PropTypes.string,
-  hide: PropTypes.func,
-  isVisible: PropTypes.bool,
-};
-
-/**
- * Toast component is a wrapper over https://github.com/calintamas/react-native-toast-message.
- *
- * <div class="screenshots">
- *   <img src="screenshots/toast/toast-1.png" />
- *   <img src="screenshots/toast/toast-2.png" />
- *   <img src="screenshots/toast/toast-3.png" />
- *   <img src="screenshots/toast/toast-4.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- *import { Toast } from "@bigbinary/neetoui-rn";
- *
- *export function App(props) {
- *  return (
- *    <>
- *      // Render at root component.
- *      <Toast />
- *    </>
- *  );
- *}
- *
- *
- *import * as React from "react";
- *import { moderateScale } from "react-native-size-matters";
- *import { Toast, Container, Button } from "@bigbinary/neetoui-rn";
- *
- *export default function Main() {
- *  return (
- *    <Container>
- *      <Button
- *        label="Error Test"
- *        onPress={() => {
- *          Toast.show({
- *            type: "error",
- *            text1: "Yay!",
- *            text2: "Have a nice day! 😄",
- *          });
- *        }}
- *      />
- *    </Container>
- *  );
- *}
- * ```
- * @extends StyledSystems props /styled-system
- */
-
-export const Toast = ({ toasterConfig, ...rest }) => {
-  const customConfig = {
-    success: ToastComponent,
-    warning: ToastComponent,
-    info: ToastComponent,
-    error: ToastComponent,
-  };
-
-  return (
-    <T
-      {...rest}
-      autoHide={false}
-      config={{ ...defaultToasterConfig, ...customConfig, ...toasterConfig }}
-      position="top"
-    />
-  );
-};
-
-Toast.show = T.show;
-Toast.hide = T.hide;
-
-Toast.propTypes = {
-  /**
-   * configuration
-   */
-  toasterConfig: PropTypes.object,
-};

package/src/components/ToggleSwitch.jsx

@@ -1,112 +0,0 @@
-import React, { useContext, useEffect, useRef } from "react";
-import { Animated } from "react-native";
-
-import { Check, Close } from "@bigbinary/neeto-icons-rn";
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-import { ThemeContext } from "styled-components/native";
-
-import { Container, Touchable } from "@components";
-
-/**
- * ToggleSwitch component is a simple switch toggle component describes what is being switched ON/OFF.
- *
- * <div class="screenshots">
- *   <img src="screenshots/toggleswitch/switchstyles.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React, {useState} from 'react';
- * import { Typography, Container } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  const [switchOne, setSwitchOne] = useState(true);
- *
- *  return (
- *    <Container>
- *     <ToggleSwitch
- *      value={switchOne}
- *      setValue={() => setSwitchOne(prevValue => !prevValue)}
- *     />
- *   </Container>
- *  );
- * }
- * ```
- */
-
-export const ToggleSwitch = ({ value, onValueChange, disabled }) => {
-  const theme = useContext(ThemeContext);
-  const animatedPosition = useRef(
-    new Animated.Value(value ? moderateScale(1) : 0)
-  ).current;
-
-  useEffect(() => {
-    startAnimation();
-  }, [value]);
-
-  const startAnimation = () => {
-    Animated.timing(animatedPosition, {
-      toValue: value ? moderateScale(18) : 0,
-      duration: 300,
-      useNativeDriver: false,
-    }).start();
-  };
-
-  const containerBg = value
-    ? theme.colors.background.purple500
-    : "background.grey300";
-
-  const iconColor = value
-    ? theme.colors.background.purple500
-    : theme.colors.font.grey500;
-
-  const Icon = value ? Check : Close;
-
-  return (
-    <Touchable
-      bg={containerBg}
-      borderRadius={moderateScale(70)}
-      disabled={disabled}
-      height={moderateScale(24)}
-      hitSlop={10}
-      justifyContent="center"
-      opacity={disabled ? 0.5 : 1}
-      px={moderateScale(5)}
-      width={moderateScale(44)}
-      onPress={() => onValueChange(!value)}
-    >
-      <Animated.View style={{ transform: [{ translateX: animatedPosition }] }}>
-        <Container
-          alignItems="center"
-          bg="background.white"
-          borderRadius={moderateScale(8)}
-          height={moderateScale(16)}
-          justifyContent="center"
-          width={moderateScale(16)}
-        >
-          <Icon
-            color={iconColor}
-            size={moderateScale(18)}
-            viewBox={value ? "0 0 22 27" : "0 0 25 25"}
-          />
-        </Container>
-      </Animated.View>
-    </Touchable>
-  );
-};
-
-ToggleSwitch.propTypes = {
-  /**
-   * Value of the switch, true means 'on', false means 'off'.
-   */
-  value: PropTypes.bool.isRequired,
-  /**
-   * Callback called with the new value when it changes.
-   */
-  onValueChange: PropTypes.func,
-  /**
-   * Disable toggling the switch.
-   */
-  disabled: PropTypes.bool,
-};

package/src/components/TopBar.jsx

@@ -1,147 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { ScrollView, StyleSheet } from "react-native";
-
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-
-import { Container, Touchable, Typography } from "@components";
-import { theme } from "@theme";
-
-/**
- *
- * Buttons are touchable elements used to interact with the screen and to trigger an action.
- *
- * <div class="screenshots">
- *   <img src="screenshots/toptabbar/toptabbar-1.png" />
- *   <img src="screenshots/toptabbar/toptabbar-2.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React, { useEffect, useState } from 'react';
- * import { Button, TopBar } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  const [activeTab, setActiveTab] = useState(0);
- *
- *  useEffect(() => {
- *    console.log("Active tab is ", itemList[activeTab]);
- *  }, [activeTab]);
- *
- *  return (
- *    <>
- *      <TopBar
- *        data={itemList}
- *        activeIndex={activeTab}
- *        onActiveTabChange={index => {
- *          setActiveTab(index);
- *        }}
- *      />
- *
- *      <Button label="Switch to `Expired` tab" onPress={() => setActiveTab(2)} />
- *    </>
- *  );
- * }
- * ```
- *
- */
-
-export const TopBar = ({
-  data,
-  activeIndex = 0,
-  onActiveTabChange = () => {},
-  activeTabTextStyle,
-  activeTabContainerStyle,
-  inActiveTabTextStyle,
-  inActiveTabContainerStyle,
-  tabContainerStyle,
-}) => {
-  const [selectedIndex, setSelectedIndex] = useState(activeIndex);
-
-  useEffect(() => {
-    onActiveTabChange(selectedIndex);
-  }, [selectedIndex]);
-
-  useEffect(() => {
-    setSelectedIndex(activeIndex);
-  }, [activeIndex]);
-
-  return (
-    <Container
-      height={moderateScale(50)}
-      style={[styles.defaultTabContainerStyle, tabContainerStyle]}
-    >
-      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-        {data.map((item, index) => (
-          <Touchable
-            alignItems="center"
-            justifyContent="center"
-            key={index}
-            style={
-              selectedIndex === index
-                ? {
-                    ...styles.defaultActiveContainerStyle,
-                    ...activeTabContainerStyle,
-                  }
-                : {
-                    ...styles.defaultInActiveTabContainerStyle,
-                    ...inActiveTabContainerStyle,
-                  }
-            }
-            onPress={() => setSelectedIndex(index)}
-          >
-            <Typography
-              style={
-                selectedIndex === index
-                  ? {
-                      ...styles.defaultActiveTabTextStyle,
-                      ...activeTabTextStyle,
-                    }
-                  : {
-                      ...styles.defaultInActiveTabTextStyle,
-                      ...inActiveTabTextStyle,
-                    }
-              }
-            >
-              {item}
-            </Typography>
-          </Touchable>
-        ))}
-      </ScrollView>
-    </Container>
-  );
-};
-
-const styles = StyleSheet.create({
-  defaultActiveContainerStyle: {
-    backgroundColor: theme.colors.background.grey800,
-    marginHorizontal: moderateScale(10),
-    paddingHorizontal: moderateScale(10),
-    marginVertical: moderateScale(5),
-    borderRadius: moderateScale(5),
-  },
-  defaultInActiveTabContainerStyle: {
-    backgroundColor: theme.colors.background.white,
-    marginHorizontal: moderateScale(20),
-  },
-  defaultActiveTabTextStyle: {
-    color: theme.colors.font.white,
-  },
-  defaultInActiveTabTextStyle: {
-    color: theme.colors.font.grey800,
-  },
-  defaultTabContainerStyle: {
-    backgroundColor: theme.colors.font.white,
-  },
-});
-
-TopBar.propTypes = {
-  data: PropTypes.array.isRequired,
-  activeIndex: PropTypes.number,
-  onActiveTabChange: PropTypes.func.isRequired,
-  activeTabTextStyle: PropTypes.object,
-  activeTabContainerStyle: PropTypes.object,
-  inActiveTabTextStyle: PropTypes.object,
-  inActiveTabContainerStyle: PropTypes.object,
-  tabContainerStyle: PropTypes.object,
-};