@bigbinary/neetoui-rn 0.0.268 → 0.0.270

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,
-};