@bigbinary/neetoui-rn 0.0.269 → 0.0.270

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.269",
+  "version": "0.0.270",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -30,7 +30,6 @@
   },
   "files": [
     "lib",
-    "src",
     "react-native.config.js",
     "index.d.ts",
     "assets"

package/src/components/Accordion.jsx

@@ -1,266 +0,0 @@
-import React, {
-  useContext,
-  useState,
-  useRef,
-  useEffect,
-  useImperativeHandle,
-} from "react";
-import { Animated, StyleSheet } from "react-native";
-
-import { Down } from "@bigbinary/neeto-icons-rn";
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-import styled, { ThemeContext } from "styled-components/native";
-import {
-  buttonStyle,
-  flexbox,
-  space,
-  border,
-  color,
-  layout,
-} from "styled-system";
-
-import { Container } from "@components";
-
-const TouchableOpacity = styled.TouchableOpacity`
-  ${buttonStyle}
-  ${flexbox}
-  ${space}
-  ${border}
-  ${color}
-  ${layout}
-`;
-
-const AccordionBody = ({ isExpanded, children }) => {
-  const animationController = useRef(
-    new Animated.Value(isExpanded ? 1 : 0)
-  ).current;
-
-  const [viewHeight, setViewHeight] = useState(0);
-
-  useEffect(() => {
-    Animated.timing(animationController, {
-      duration: 300,
-      toValue: isExpanded ? 1 : 0,
-      useNativeDriver: false,
-    }).start();
-  }, [isExpanded]);
-
-  const bodyContentHeight = animationController.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, viewHeight],
-  });
-
-  const getLayout = event => {
-    const height = event.nativeEvent.layout.height;
-    setViewHeight(height);
-  };
-
-  return (
-    <Animated.View style={{ height: bodyContentHeight, overflow: "hidden" }}>
-      <Container position="absolute" width="100%" onLayout={getLayout}>
-        {children}
-      </Container>
-    </Animated.View>
-  );
-};
-
-/**
- * A component used to display an expandable list item.
- *
- * <div class="screenshots">
- *   <img src="screenshots/accordion/accordion.png" />
- * </div>
- *
- *  ## Usage
- * ```js
- * import * as React from 'react';
- * import { Container, Accordion } from '@bigbinary/neetoui-rn';
- *
- * export default function Main() {
- *  return (
- *    <Container>
- *     <Accordion
- *         header={() => (
- *           <Container flexDirection="row" alignItems="center">
- *             <Typography bg="#00BA8829" color="font.primary" p={moderateScale(1)}>
- *               Open
- *             </Typography>
- *             <Typography px={moderateScale(2)}>Low</Typography>
- *           </Container>
- *         )}
- *         iconProp={{
- *           IconLabel: () => (
- *             <Typography color="font.danger">Collapse</Typography>
- *           ),
- *           iconColor: theme.colors.font.danger,
- *         }}
- *       >
- *         <Container my={moderateScale(2)} p={moderateScale(3)} bg="background.grey100" borderRadius={moderateScale(8)}>
- *           <Typography color="font.primary">Body Content</Typography>
- *         </Container>
- *       </Accordion>
- *    </Container>
- *  );
- * }
- * ```
- *
- */
-
-export const Accordion = React.forwardRef(
-  (
-    {
-      header,
-      noBorder = false,
-      iconProp = {},
-      onStateChanged,
-      children,
-      position = "bottom",
-      shouldShowToggle = true,
-      headerContainerProps,
-      ...rest
-    },
-    ref
-  ) => {
-    const { Label, size, color } = iconProp;
-    const theme = useContext(ThemeContext);
-    const [isExpanded, setIsExpanded] = useState(false);
-    const animationController = useRef(
-      new Animated.Value(isExpanded ? 1 : 0)
-    ).current;
-
-    useEffect(() => {
-      Animated.timing(animationController, {
-        duration: 300,
-        toValue: isExpanded ? 1 : 0,
-        useNativeDriver: false,
-      }).start(() => {
-        !!onStateChanged && onStateChanged(isExpanded);
-      });
-    }, [isExpanded]);
-
-    const handleAnimation = () => {
-      setIsExpanded(!isExpanded);
-    };
-
-    useImperativeHandle(ref, () => ({
-      toggleAccordion: handleAnimation,
-      openAccordion: () => setIsExpanded(true),
-      closeAccordion: () => setIsExpanded(false),
-    }));
-
-    const arrowAngle = animationController.interpolate({
-      inputRange: [0, 1],
-      outputRange: ["0rad", `${Math.PI}rad`],
-    });
-
-    return (
-      <Container
-        {...(!noBorder && {
-          borderColor: "border.grey400",
-          borderWidth: moderateScale(1),
-          borderRadius: moderateScale(8),
-        })}
-        padding={moderateScale(12)}
-        width="100%"
-        {...rest}
-      >
-        {position === "top" && (
-          <AccordionBody isExpanded={isExpanded}>{children}</AccordionBody>
-        )}
-        <TouchableOpacity
-          style={styles.accordionContainer}
-          onPress={() => {
-            handleAnimation();
-          }}
-          {...headerContainerProps}
-        >
-          {!!header && <Container flexGrow={1}>{header()}</Container>}
-          {!!shouldShowToggle && (
-            <Container
-              alignItems="center"
-              flexDirection="row"
-              justifyContent="center"
-            >
-              {Label && <Label />}
-              <Animated.View
-                style={{
-                  alignItems: "flex-end",
-                  transform: [{ rotateZ: arrowAngle }],
-                }}
-              >
-                <Container>
-                  <Down
-                    color={color ?? theme.colors.font.grey700}
-                    size={size ?? moderateScale(24)}
-                  />
-                </Container>
-              </Animated.View>
-            </Container>
-          )}
-        </TouchableOpacity>
-        {position === "bottom" && (
-          <AccordionBody isExpanded={isExpanded}>{children}</AccordionBody>
-        )}
-      </Container>
-    );
-  }
-);
-
-AccordionBody.propTypes = {
-  isExpanded: PropTypes.bool.isRequired,
-  children: PropTypes.element,
-};
-
-Accordion.propTypes = {
-  /**
-   * Render a component on the header.
-   */
-  header: PropTypes.func,
-  /**
-   * Customize header container
-   */
-  headerContainerProps: PropTypes.object,
-  /**
-   * Renders the child component passed in the body of the accordion.
-   */
-  children: PropTypes.node,
-  /**
-   * Takes a boolean value based on which border is shown.
-   */
-  noBorder: PropTypes.bool,
-  /**
-   * Function that returns the current state.
-   */
-  onStateChanged: PropTypes.func,
-  /**
-   * Takes an object based on which the icon to expand/collapse can be customized.
-   * Label: Takes a component.
-   * size: Used to update the icon size.
-   * name: Used to update the default arrow icon.
-   * color: Used to update the default color of the icon.
-   */
-  iconProp: PropTypes.shape({
-    name: PropTypes.string,
-    Label: PropTypes.elementType,
-    size: PropTypes.number,
-    color: PropTypes.string,
-  }),
-  /**
-   * Determine whether the body should show at the top or bottom
-   */
-  position: PropTypes.string,
-  /**
-   * Can be set to false if custom toggle UI action item needs to be passed.
-   */
-  shouldShowToggle: PropTypes.bool,
-};
-
-const styles = StyleSheet.create({
-  accordionContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-});
-
-Accordion.displayName = "Accordion";

package/src/components/ActionIcon.jsx

@@ -1,76 +0,0 @@
-import React from "react";
-
-import PropTypes from "prop-types";
-import { moderateScale } from "react-native-size-matters";
-
-import { theme } from "@theme";
-
-import { Loader } from "./Loader";
-import { Touchable } from "./Touchable";
-import { Typography } from "./Typography";
-
-export const ActionIcon = ({
-  isLoading = false,
-  icon: Icon,
-  onPress,
-  size = moderateScale(24),
-  color = theme.colors.font.grey800,
-  disabled = false,
-  label,
-  iconProps,
-  ...rest
-}) => (
-  <Touchable
-    alignItems="center"
-    aspectRatio={1}
-    disabled={disabled || isLoading}
-    height={moderateScale(40)}
-    justifyContent="center"
-    maxHeight={moderateScale(64)}
-    maxWidth={moderateScale(64)}
-    opacity={disabled ? 0.5 : 1}
-    onPress={onPress}
-    {...rest}
-  >
-    {isLoading ? <Loader /> : <Icon color={color} size={size} {...iconProps} />}
-    {!!label && (
-      <Typography
-        color="font.grey600"
-        fontFamily="sf400"
-        fontSize="4xs"
-        mt={moderateScale(2)}
-      >
-        {label}
-      </Typography>
-    )}
-  </Touchable>
-);
-
-ActionIcon.propTypes = {
-  /**
-   * The icon that should be displayed
-   */
-  icon: PropTypes.elementType,
-  /**
-   * The Func that should be triggered on click of the action icon
-   */
-  onPress: PropTypes.func,
-  /** To customize the size of the icon
-   */
-  size: PropTypes.number,
-  /** To customize the color of the icon
-   */
-  color: PropTypes.string,
-  /** To set the disabled state
-   */
-  disabled: PropTypes.bool,
-  /** The label that should be displayed next to the icon
-   */
-  label: PropTypes.string,
-  /** To display the loading state
-   */
-  isLoading: PropTypes.bool,
-  /** To additionally customize the icon
-   */
-  iconProps: PropTypes.object,
-};

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