@bigbinary/neetoui-rn 0.0.269 → 0.0.271

package/src/components/Alert.jsx

@@ -1,262 +0,0 @@
-import React, { useState } from "react";
-import { StyleSheet } from "react-native";
-
-import Modal from "react-native-modal";
-import { moderateScale } from "react-native-size-matters";
-
-import { Typography, Container, Button } from "@components";
-
-const useAlertHook = () => {
-  const [isVisible, setIsVisible] = React.useState(false);
-  const [params, setParams] = useState({});
-
-  const {
-    title = "",
-    description = "",
-    isCancelable = true,
-    onDismiss,
-    buttons = [],
-  } = params;
-
-  const show = React.useCallback(params => {
-    setParams(params);
-    setIsVisible(true);
-  }, []);
-
-  const hide = React.useCallback(() => {
-    setIsVisible(false);
-  }, []);
-
-  const hideOnBackPressDrop = React.useCallback(() => {
-    if (isCancelable) {
-      hide();
-    }
-
-    if (onDismiss && isCancelable) {
-      onDismiss();
-    }
-  }, [hide, isCancelable, onDismiss]);
-
-  return {
-    isVisible,
-    show,
-    hide,
-    hideOnBackPressDrop,
-    title,
-    description,
-    isCancelable,
-    buttons,
-  };
-};
-
-let rootLevelRef = null;
-
-/**
- * Launches an alert dialog with the specified title and message.
- * Optionally provide a list of buttons.
- * Tapping any button will fire the respective onPress callback and dismiss the alert.
- * By default, the only button will be an 'OK' button.
- * <div class="screenshots">
- *   <img src="screenshots/alert/alert-1.png" />
- *   <img src="screenshots/alert/alert-2.png" />
- *   <img src="screenshots/alert/alert-3.png" />
- *   <img src="screenshots/alert/alert-4.png" />
- *   <img src="screenshots/alert/alert-5.png" />
- *   <img src="screenshots/alert/alert-6.png" />
- * </div>
- *
- *
- *  ## Usage
- * ```js
- *import * as React from "react";
- *import { moderateScale } from "react-native-size-matters";
- *import { Alert } from "@bigbinary/neetoui-rn";
- *export function App(props) {
- *  return (
- *    <>
- *      // Render at root component.
- *      <Alert />
- *    </>
- *  );
- *}
- *
- *import * as React from "react";
- *import { moderateScale } from "react-native-size-matters";
- *import { Alert, Button } from "@bigbinary/neetoui-rn";
- *
- *export default function Main() {
- *  return (
- *    <Button
- *      width={moderateScale(200)}
- *      my={moderateScale(10)}
- *      label="Three Buttons"
- *      onPress={() => {
- *        Alert.show({
- *          title: "Enjoying our app ?",
- *          description: "Do you wannna rate us on app store ?",
- *          buttons: [
- *            {
- *              label: "Yay!",
- *              onPress: () => {},
- *            },
- *            {
- *              label: "No",
- *              onPress: () => {},
- *            },
- *            {
- *              label: "Ask me later",
- *              onPress: () => {},
- *            },
- *          ],
- *          isCancelable: false,
- *          onDismiss: () => {},
- *        });
- *      }}
- *    />
- *  );
- *}
- *
- * ```
- */
-
-export const Alert = () => {
-  const {
-    isVisible,
-    show,
-    hide,
-    buttons,
-    hideOnBackPressDrop,
-    title,
-    description,
-  } = useAlertHook();
-
-  const [
-    button1 = {
-      label: "OK",
-      onPress: () => {},
-      variant: "solid",
-    },
-    button2,
-    button3,
-  ] = buttons;
-
-  const ref = React.useRef(null);
-
-  React.useImperativeHandle(
-    ref,
-    React.useCallback(
-      () => ({
-        show,
-      }),
-      [show]
-    )
-  );
-
-  React.useEffect(() => {
-    rootLevelRef = ref.current;
-  }, [ref]);
-
-  return (
-    <Modal
-      hideModalContentWhileAnimating
-      useNativeDriver
-      isVisible={isVisible}
-      style={styles.modalStyle}
-      onBackdropPress={hideOnBackPressDrop}
-    >
-      <Container
-        alignItems="center"
-        bg="background.primary"
-        borderRadius={moderateScale(8)}
-        justifyContent="center"
-        padding={moderateScale(18)}
-        width="90%"
-      >
-        <Typography color="font.grey800" fontFamily="sf600" fontSize="3xl">
-          {title}
-        </Typography>
-        <Container alignItems="center" justifyContent="center">
-          <Typography
-            color="font.grey500"
-            fontFamily="sf400"
-            fontSize="s"
-            py={moderateScale(20)}
-            textAlign="center"
-          >
-            {description}
-          </Typography>
-        </Container>
-        <Container
-          flexDirection="row"
-          justifyContent="space-around"
-          width="100%"
-        >
-          {button2 && (
-            <Button
-              borderRadius={moderateScale(8)}
-              borderWidth={moderateScale(1)}
-              fontFamily="sf400"
-              fontSize="m"
-              height={moderateScale(35)}
-              label={button2.label}
-              minWidth={moderateScale(110)}
-              p={0}
-              variant={button2.variant || "text"}
-              width={undefined}
-              onPress={() => {
-                button2.onPress?.();
-                hide();
-              }}
-            />
-          )}
-          {button1 && (
-            <Button
-              borderRadius={moderateScale(8)}
-              fontFamily="sf400"
-              fontSize="m"
-              height={moderateScale(35)}
-              label={button1.label}
-              minWidth={moderateScale(110)}
-              p={0}
-              variant={button1.variant}
-              width={undefined}
-              onPress={() => {
-                button1.onPress?.();
-                hide();
-              }}
-            />
-          )}
-        </Container>
-        {button3 && (
-          <Button
-            borderRadius={moderateScale(8)}
-            borderWidth={moderateScale(1)}
-            fontFamily="sf400"
-            fontSize="m"
-            height={moderateScale(35)}
-            label={button3.label}
-            minWidth={moderateScale(110)}
-            mt={moderateScale(20)}
-            p={0}
-            variant={button3.variant}
-            onPress={() => {
-              button3.onPress?.();
-              hide();
-            }}
-          />
-        )}
-      </Container>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modalStyle: {
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
-
-Alert.show = params => {
-  rootLevelRef.show(params);
-};

package/src/components/AnimatedImage.jsx

@@ -1,140 +0,0 @@
-import React, { useState } from "react";
-
-import PropTypes from "prop-types";
-import RNFImage from "react-native-fast-image";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { moderateScale } from "react-native-size-matters";
-import styled from "styled-components/native";
-import { flexbox, space, border, color, layout } from "styled-system";
-
-import ImagePlaceholder from "@assets/images/image-placeholder.svg";
-import { Container, Loader } from "@components";
-
-import { theme } from "../theme";
-
-const StyledImage = styled(RNFImage)`
-  ${flexbox}
-  ${space}
-  ${border}
-  ${color}
-  ${layout}
-`;
-
-/**
- * AnimatedImage can be used to display a placeholder before image is loaded with animation.
- *
- * <div class="screenshots">
- *   <img src="screenshots/avatar/images.png" />
- *   <img src="screenshots/avatar/texts.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Typography, Avatar } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *     <AnimatedImage
- *      imageHeight={moderateScale(139)}
- *      imageWidth={moderateScale(255)}
- *      imageUrl="https://picsum.photos/255/139"
- *     />
- *   </Container>
- *  );
- * }
- * ```
- */
-
-const borderRadius = moderateScale(10);
-export const AnimatedImage = ({
-  imageHeight = 139,
-  imageWidth = 255,
-  imageUrl,
-  ...rest
-}) => {
-  const opacity = useSharedValue(0);
-  const [isImageLoaded, setIsImageLoaded] = useState(false);
-
-  const profileImageStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(opacity.value, {
-      duration: 300,
-      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-    }),
-    height: imageHeight,
-    width: imageWidth,
-    alignSelf: "center",
-    borderRadius,
-  }));
-
-  return (
-    <Container
-      alignItems="center"
-      borderRadius={moderateScale(10)}
-      justifyContent="center"
-      overflow="hidden"
-    >
-      <Animated.View style={profileImageStyle}>
-        <StyledImage
-          height={imageHeight}
-          width={imageWidth}
-          source={{
-            uri: imageUrl,
-            headers: {
-              Accept: "*/*",
-              "Content-Type": "application/json",
-              Pragma: "no-cache",
-            },
-          }}
-          onLoad={() => {
-            setIsImageLoaded(true);
-            opacity.value = 1;
-          }}
-          onLoadStart={() => {
-            setIsImageLoaded(false);
-            opacity.value = 0;
-          }}
-          {...rest}
-        />
-      </Animated.View>
-      {!isImageLoaded && (
-        <Container position="absolute">
-          <ImagePlaceholder />
-          <Container
-            bottom={moderateScale(15)}
-            position="absolute"
-            right={moderateScale(15)}
-          >
-            <Loader color={theme.colors.font.grey600} />
-          </Container>
-        </Container>
-      )}
-    </Container>
-  );
-};
-
-AnimatedImage.defaultProps = {
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-AnimatedImage.propTypes = {
-  /**
-   * Height for image.
-   */
-  imageHeight: PropTypes.number | PropTypes.string,
-  /**
-   * Width for image.
-   */
-  imageWidth: PropTypes.number,
-  /**
-   * Url to display the Image. It accepts a standard React Native Image source prop Or a function that returns an Image.
-   */
-  imageUrl: PropTypes.string,
-};

package/src/components/Avatar.jsx

@@ -1,144 +0,0 @@
-import React from "react";
-import { StyleSheet } from "react-native";
-
-import PropTypes from "prop-types";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { moderateScale } from "react-native-size-matters";
-
-import { Typography, Container } from "@components";
-
-/**
- * Avatars can be used to represent people in a graphical way.
- *
- * <div class="screenshots">
- *   <img src="screenshots/avatar/images.png" />
- *   <img src="screenshots/avatar/texts.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Typography, Avatar } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *     <Avatar
- *      variant={"medium"}
- *      name="Oliver Smith"
- *      imageUrl="https://www.himalmag.com/wp-content/uploads/2019/07/sample-profile-picture.png"
- *     />
- *   </Container>
- *  );
- * }
- * ```
- */
-
-export const Avatar = ({
-  name,
-  variant = "medium",
-  bgColor = "background.lightBlue100",
-  fontColor = "font.darkBlue100",
-  imageUrl,
-  ...rest
-}) => {
-  const opacity = useSharedValue(0);
-  const acronym = name
-    ?.split(/\s/)
-    .reduce((response, word) => (response += word.slice(0, 1)), "")
-    .slice(0, 2);
-
-  const getSizes = () => {
-    switch (variant) {
-      case "extra-small":
-        return [moderateScale(24), moderateScale(8)];
-      case "small":
-        return [moderateScale(36), moderateScale(12)];
-      case "medium":
-        return [moderateScale(48), moderateScale(14)];
-      default:
-        return [moderateScale(48), moderateScale(14)];
-    }
-  };
-
-  const [avatarSize, avatarFontSize] = getSizes();
-
-  const profileImageStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(opacity.value, {
-      duration: 300,
-      easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-    }),
-    height: avatarSize,
-    width: avatarSize,
-    alignSelf: "center",
-    borderRadius: avatarSize / 2,
-  }));
-
-  return (
-    <Container
-      bg={bgColor}
-      borderRadius={avatarSize / 2}
-      height={avatarSize}
-      width={avatarSize}
-      {...rest}
-      flexDirection="row"
-    >
-      <Container style={styles.acronym}>
-        <Typography
-          color={fontColor}
-          fontFamily="sf400"
-          fontSize={avatarFontSize}
-        >
-          {acronym.toUpperCase()}
-        </Typography>
-      </Container>
-      <Animated.Image
-        source={{ uri: imageUrl }}
-        style={profileImageStyle}
-        onLoad={() => (opacity.value = 1)}
-        {...rest}
-      />
-    </Container>
-  );
-};
-
-const styles = StyleSheet.create({
-  acronym: {
-    position: "absolute",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});
-
-Avatar.defaultProps = {
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-Avatar.propTypes = {
-  /**
-   * Name to obtain user initials to show as the text in the Avatar.
-   */
-  name: PropTypes.string,
-  /**
-   * variant of the avatar: `medium` or `small`
-   */
-  variant: PropTypes.oneOf(["medium", "small", "extra-small"]),
-  /**
-   * Custom color for the avatar.
-   */
-  bgColor: PropTypes.string,
-  /**
-   * Custom color for the text.
-   */
-  fontColor: PropTypes.string,
-  /**
-   * Image to display for the Avatar. It accepts a standard React Native Image source prop Or a function that returns an Image.
-   */
-  imageUrl: PropTypes.string,
-};

package/src/components/Badge.jsx

@@ -1,97 +0,0 @@
-import React from "react";
-
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-
-import { Typography, Container } from "@components";
-
-/**
- *
- * 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/badge/badges.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Badge, Container } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *       <Badge
- *          content="test"
- *          size={moderateScale(32)}
- *          fontSize="12px"
- *          badgeColor="background.secondary"
- *          color="font.secondary"
- *        />
- *    </Container>
- *  );
- * }
- * ```
- *
- */
-
-export const Badge = ({
-  badgeColor = "background.base",
-  content,
-  size = moderateScale(21),
-  fontSize = "xs",
-  fontFamily = "sf400",
-  color = "font.white",
-  ...rest
-}) =>
-  size > 0 && (
-    <Container
-      alignItems="center"
-      bg={badgeColor}
-      borderRadius={moderateScale(15)}
-      justifyContent="center"
-      px={moderateScale(6)}
-      py={moderateScale(1)}
-      {...rest}
-    >
-      {!!content && (
-        <Typography color={color} fontFamily={fontFamily} fontSize={fontSize}>
-          {content}
-        </Typography>
-      )}
-    </Container>
-  );
-
-Badge.propTypes = {
-  /**
-   * Custom badge content color.
-   */
-  color: PropTypes.string,
-  /**
-   * Custom badge background color.
-   */
-  badgeColor: PropTypes.string,
-  /**
-   * To change content of the badge
-   */
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Custom badge size.
-   */
-  size: PropTypes.number,
-  /**
-   * Custom font-size for badge content.
-   */
-  fontSize: PropTypes.string,
-  /**
-   * Custom font-family for badge content.
-   */
-  fontFamily: PropTypes.string,
-};