@bigbinary/neetoui-rn 0.0.268 → 0.0.270

package/src/components/Touchable.jsx

@@ -1,133 +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,
-  buttonStyle,
-  color,
-  layout,
-} from "styled-system";
-
-import Ripple from "./Ripple";
-
-import { getShadowStyles } from "../utils/utils";
-
-const StyledRipple = styled(Ripple)`
-  ${buttonStyle}
-  ${flexbox}
-  ${space}
-  ${border}
-  ${layout}
-  ${color}
-`;
-
-/**
- * Touchable component is a wrapper over Ripple.
- *
- * 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 { Touchable, Typography } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *     <Touchable
- *       bg="background.primary"
- *       width="100px"
- *       height="30px"
- *       rippleConfig={{
- *          opacity: 0.09,
- *          duration: 600,
- *          containerBorderRadius: moderateScale(50),
- *       }}
- *     >
- *       <Typography fontSize="10px">This is wrapped in Touchable component</Typography>
- *     </Touchable>
- *  );
- * }
- * ```
- *
- */
-
-const defaultRippleConfig = {
-  rippleCentered: false,
-  rippleSequential: true,
-  rippleFades: true,
-  rippleOutsideContainer: false,
-  rippleColor: "#000",
-  rippleOpacity: 0.09,
-  rippleDuration: 600,
-  rippleSize: 0,
-  rippleContainerBorderRadius: 0,
-};
-
-export const Touchable = React.forwardRef((props, ref) => {
-  const { children, elevation, rippleConfig, ...rest } = props;
-  const shadowStyles = elevation ? getShadowStyles(elevation) : {};
-
-  const rippleProps = {
-    ...defaultRippleConfig,
-    rippleCentered:
-      rippleConfig.isCentered ?? defaultRippleConfig.rippleCentered,
-    rippleSequential:
-      rippleConfig.isSequential ?? defaultRippleConfig.rippleSequential,
-    rippleFades: rippleConfig.shouldFade ?? defaultRippleConfig.rippleFades,
-    rippleOutsideContainer:
-      rippleConfig.shouldOverflowContainer ??
-      defaultRippleConfig.rippleOutsideContainer,
-    rippleColor: rippleConfig.color ?? defaultRippleConfig.rippleColor,
-    rippleOpacity: rippleConfig.opacity ?? defaultRippleConfig.rippleOpacity,
-    rippleDuration: rippleConfig.duration ?? defaultRippleConfig.rippleDuration,
-    rippleSize: rippleConfig.size ?? defaultRippleConfig.rippleSize,
-    rippleContainerBorderRadius: rest.borderRadius ? rest.borderRadius : 0,
-  };
-
-  return (
-    <StyledRipple ref={ref} style={shadowStyles} {...rippleProps} {...rest}>
-      {children}
-    </StyledRipple>
-  );
-});
-
-Touchable.propTypes = {
-  ...propTypes.flexbox,
-  ...propTypes.space,
-  ...propTypes.border,
-  ...propTypes.layout,
-  ...propTypes.color,
-  ...propTypes.buttonStyle,
-
-  children: PropTypes.node.isRequired,
-  elevation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  rippleConfig: PropTypes.shape({
-    isCentered: PropTypes.bool,
-    isSequential: PropTypes.bool,
-    shouldFade: PropTypes.bool,
-    shouldOverflowContainer: PropTypes.bool,
-    color: PropTypes.string,
-    opacity: PropTypes.number,
-    duration: PropTypes.number,
-    size: PropTypes.number,
-    containerBorderRadius: PropTypes.number,
-  }),
-};
-
-Touchable.defaultProps = {
-  rippleConfig: {},
-};
-
-Touchable.displayName = "Touchable";

package/src/components/TouchableWithoutFeedback.jsx

@@ -1,51 +0,0 @@
-import React, { useRef } from "react";
-import { TouchableWithoutFeedback as RNTouchableWithoutFeedback } from "react-native";
-
-import PropTypes from "prop-types";
-
-const TouchableWithoutFeedback = ({ onPress, onPressIn, ...props }) => {
-  const _touchActivatePositionRef = useRef(null);
-
-  function _onPressIn(e) {
-    const { pageX, pageY } = e.nativeEvent;
-
-    _touchActivatePositionRef.current = {
-      pageX,
-      pageY,
-    };
-
-    onPressIn?.(e);
-  }
-
-  function _onPress(e) {
-    const { pageX, pageY } = e.nativeEvent;
-
-    const absX = Math.abs(_touchActivatePositionRef?.current?.pageX - pageX);
-    const absY = Math.abs(_touchActivatePositionRef?.current?.pageY - pageY);
-
-    const dragged = absX > 2 || absY > 2;
-    if (!dragged) {
-      onPress?.(e);
-    }
-  }
-
-  return (
-    <RNTouchableWithoutFeedback
-      onPress={_onPress}
-      onPressIn={_onPressIn}
-      {...props}
-    >
-      {props.children}
-    </RNTouchableWithoutFeedback>
-  );
-};
-
-TouchableWithoutFeedback.defaultProps = {};
-
-TouchableWithoutFeedback.propTypes = {
-  onPress: PropTypes.func,
-  onPressIn: PropTypes.func,
-  children: PropTypes.element.isRequired,
-};
-
-export default TouchableWithoutFeedback;

package/src/components/Typography.jsx

@@ -1,93 +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 {
-  space,
-  layout,
-  flexbox,
-  typography,
-  color,
-  textStyle,
-  position,
-  system,
-} from "styled-system";
-
-export const Text = styled.Text`
-  ${textStyle}
-  ${space}
-  ${layout}
-  ${flexbox}
-  ${typography}
-  ${color}
-  ${position}
-  ${system({
-    textDecoration: {
-      property: "textDecoration",
-      cssProperty: "textDecoration",
-    },
-    textTransform: { property: "textTransform", cssProperty: "textTransform" },
-  })}
-`;
-
-/**
- * Typography component is a primitive text component which 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>typography</li>
- * <li>color</li>
- * <li>textStyle</li>
- * </ul>
- *
- * <div class="screenshots">
- *   <img src="screenshots/typography/colors.png" />
- *   <img src="screenshots/typography/fontfamilies.png" />
- * </div>
- *
- * <div class="screenshots">
- *   <img src="screenshots/typography/fontsizes.png" />
- *   <img src="screenshots/typography/textstyles.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Typography, Container } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *     <Typography>
- *         This is basic example of Typography
- *      </Typography>
- *     </Container>
- *  );
- * }
- * ```
- *
- * @extends StyledSystems props /styled-system
- */
-
-export const Typography = ({ children, ...rest }) => (
-  <Text {...rest}>{children}</Text>
-);
-
-Typography.propTypes = {
-  ...propTypes.space,
-  ...propTypes.layout,
-  ...propTypes.flexbox,
-  ...propTypes.typography,
-  ...propTypes.color,
-  ...propTypes.textStyle,
-  children: PropTypes.node,
-};
-
-Typography.defaultProps = {
-  textStyle: "defaultTextStyle",
-};

package/src/components/index.js

@@ -1,45 +0,0 @@
-export { Button } from "./Button";
-export { SocialButton } from "./SocialButton";
-export { Container } from "./Container";
-export { Typography } from "./Typography";
-export { Input } from "./Input";
-export { FAB } from "./FAB";
-export { ToggleSwitch } from "./ToggleSwitch";
-export { Avatar } from "./Avatar";
-export { Badge } from "./Badge";
-export { Toast } from "./Toast";
-export { Alert } from "./Alert";
-export { BottomSheet } from "./BottomSheet";
-export { Chip } from "./Chip";
-export { ParentView } from "./ParentView";
-export { RichTextEditor } from "./RichTextEditor";
-export { ButtonGroup } from "./ButtonGroup";
-export { OtpInputs } from "./OtpInputs";
-export { Popover } from "./Popover";
-export { Touchable } from "./Touchable";
-export { Card } from "./Card";
-export { TopBar } from "./TopBar";
-export { RadioButton } from "./RadioButton";
-export { CheckBox } from "./CheckBox";
-export { MultiSelect } from "./MultiSelect";
-export { Divider } from "./Divider";
-export { FlatList } from "./FlatList";
-export { ScrollView } from "./ScrollView";
-export { SegmentedTopBar } from "./SegmentedTopBar";
-export { ListItem } from "./ListItem";
-export { Carousel } from "./Carousel";
-export { OnBoarding } from "./OnBoarding";
-export { SearchBar } from "./SearchBar";
-export { Accordion } from "./Accordion";
-export { Calendar } from "./Calendar";
-export { FlashList } from "./FlashList";
-export { BottomTabBar } from "./BottomTabBar";
-export { AnimatedImage } from "./AnimatedImage";
-export { NotificationPreferenceList } from "./NotificationPreferenceList";
-export { OrganizationItem } from "./OrganizationItem";
-export { ChatInput } from "./ChatInput/ChatInput";
-export { Loader } from "./Loader";
-export { InputEmailChip } from "./InputEmailChip";
-export { LineLoader } from "./LineLoader";
-export { ActionIcon } from "./ActionIcon";
-export { NotificationIcon } from "./NotificationIcon";

package/src/config/index.js

@@ -1 +0,0 @@
-export { defaultToasterConfig } from "./toasterConfig";

package/src/config/toasterConfig.jsx

@@ -1,142 +0,0 @@
-import React from "react";
-import { Pressable, StyleSheet } from "react-native";
-
-import { Close } from "@bigbinary/neeto-icons-rn";
-import { moderateScale } from "react-native-size-matters";
-import Toast, { BaseToast } from "react-native-toast-message";
-
-import { theme } from "@theme";
-
-const CloseButton = () => (
-  <Pressable style={styles.closeButtonStyle} onPress={Toast.hide}>
-    <Close color={theme.colors.background.white} size={moderateScale(22)} />
-  </Pressable>
-);
-
-export const defaultToasterConfig = {
-  success: props => (
-    <BaseToast
-      {...props}
-      contentContainerStyle={styles.contentContainerStyle}
-      leadingIconContainerStyle={styles.toasterBGColor}
-      renderTrailingIcon={() => <CloseButton />}
-      text1NumberOfLines={10}
-      text1Style={styles.text1Style}
-      text2NumberOfLines={10}
-      text2Style={styles.text2Style}
-      touchableContainerProps={{
-        style: [styles.touchableContainerProps, styles.successStyle],
-      }}
-    />
-  ),
-  error: props => (
-    <BaseToast
-      {...props}
-      contentContainerStyle={styles.contentContainerStyle}
-      leadingIconContainerStyle={styles.toasterBGColor}
-      renderTrailingIcon={() => <CloseButton />}
-      text1NumberOfLines={10}
-      text1Style={styles.text1Style}
-      text2NumberOfLines={10}
-      text2Style={styles.text2Style}
-      touchableContainerProps={{
-        style: [styles.touchableContainerProps, styles.errorStyle],
-      }}
-    />
-  ),
-  info: props => (
-    <BaseToast
-      {...props}
-      contentContainerStyle={styles.contentContainerStyle}
-      leadingIconContainerStyle={styles.toasterBGColor}
-      renderTrailingIcon={() => <CloseButton />}
-      text1NumberOfLines={10}
-      text1Style={styles.text1Style}
-      text2NumberOfLines={10}
-      text2Style={styles.text2Style}
-      touchableContainerProps={{
-        style: [styles.touchableContainerProps, styles.infoStyle],
-      }}
-    />
-  ),
-  warning: props => (
-    <BaseToast
-      {...props}
-      contentContainerStyle={styles.contentContainerStyle}
-      leadingIconContainerStyle={styles.toasterBGColor}
-      renderTrailingIcon={() => <CloseButton />}
-      text1NumberOfLines={10}
-      text1Style={styles.text1Style}
-      text2NumberOfLines={10}
-      text2Style={styles.text2Style}
-      touchableContainerProps={{
-        style: [styles.touchableContainerProps, styles.warningStyle],
-      }}
-    />
-  ),
-};
-
-defaultToasterConfig.success.displayName = "Success";
-defaultToasterConfig.error.displayName = "Error";
-
-const styles = StyleSheet.create({
-  touchableContainerProps: {
-    flexDirection: "row",
-    flex: 1,
-    paddingVertical: 10,
-    width: 340,
-    borderRadius: 6,
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.1,
-    shadowRadius: 6,
-    elevation: 2,
-    backgroundColor: "#FFF",
-    borderLeftWidth: 5,
-    borderLeftColor: "#D8D8D8",
-  },
-  successStyle: {
-    borderLeftColor: theme.colors.toast.success,
-    backgroundColor: theme.colors.background.grey800,
-  },
-  errorStyle: {
-    borderLeftColor: theme.colors.toast.error,
-    backgroundColor: theme.colors.background.grey800,
-  },
-  infoStyle: {
-    borderLeftColor: theme.colors.toast.info,
-    backgroundColor: theme.colors.background.grey800,
-  },
-  warningStyle: {
-    borderLeftColor: theme.colors.toast.warning,
-    backgroundColor: theme.colors.background.grey800,
-  },
-  toasterBGColor: { backgroundColor: theme.colors.background.grey800 },
-  contentContainerStyle: {
-    paddingHorizontal: 15,
-    backgroundColor: theme.colors.background.grey800,
-  },
-  text1Style: {
-    fontSize: 15,
-    fontFamily: theme.fonts.sf700,
-    color: theme.colors.font.white,
-  },
-  text2Style: {
-    fontSize: 16,
-    fontFamily: theme.fonts.sf700,
-    color: theme.colors.font.white,
-  },
-  closeButtonStyle: {
-    justifyContent: "center",
-    alignItems: "center",
-    paddingRight: 10,
-    backgroundColor: theme.colors.background.grey800,
-    shadowColor: theme.colors.background.grey800,
-    flexDirection: "row",
-    borderTopRightRadius: 6,
-    borderBottomRightRadius: 6,
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.1,
-    shadowRadius: 6,
-    elevation: 2,
-  },
-});

package/src/contexts/index.js

@@ -1,3 +0,0 @@
-import React from "react";
-
-export const ProviderContext = React.createContext(null);

package/src/hooks/index.js

@@ -1,3 +0,0 @@
-export { useKeyboard } from "./useKeyboard";
-export { useDebounce } from "./useDebounce";
-export { useRefreshByUser } from "./useRefreshByUser";

package/src/hooks/useDebounce.js

@@ -1,17 +0,0 @@
-import { useState, useEffect } from "react";
-
-export function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}

package/src/hooks/useKeyboard.js

@@ -1,33 +0,0 @@
-import { useEffect, useState } from "react";
-import { Keyboard } from "react-native";
-
-export function useKeyboard() {
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
-
-  function onKeyboardDidShow(e) {
-    setKeyboardHeight(e.endCoordinates.height);
-  }
-
-  function onKeyboardDidHide() {
-    setKeyboardHeight(0);
-  }
-
-  useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener(
-      "keyboardDidShow",
-      onKeyboardDidShow
-    );
-
-    const keyboardDidHideListener = Keyboard.addListener(
-      "keyboardDidHide",
-      onKeyboardDidHide
-    );
-
-    return () => {
-      keyboardDidHideListener.remove();
-      keyboardDidShowListener.remove();
-    };
-  }, []);
-
-  return keyboardHeight;
-}

package/src/hooks/useRefreshByUser.js

@@ -1,20 +0,0 @@
-import { useState } from "react";
-
-export function useRefreshByUser(refetch) {
-  const [isRefetchingByUser, setIsRefetchingByUser] = useState(false);
-
-  async function refetchByUser() {
-    setIsRefetchingByUser(true);
-
-    try {
-      await refetch();
-    } finally {
-      setIsRefetchingByUser(false);
-    }
-  }
-
-  return {
-    isRefetchingByUser,
-    refetchByUser,
-  };
-}

package/src/index.js

@@ -1,2 +0,0 @@
-export * from "./components";
-export * from "./theme";