@bigbinary/neetoui-rn 0.0.111 → 0.0.114

package/README.md

@@ -1,6 +1,3 @@
-[![Netlify Status](https://api.netlify.com/api/v1/badges/1772e21c-61b9-4100-9b2e-9b0d1ce6a210/deploy-status)](https://app.netlify.com/sites/neetoui-rn/deploys)
-[![Netlify Status](https://api.netlify.com/api/v1/badges/717761ba-353e-4417-9860-86e49b78ac36/deploy-status)](https://app.netlify.com/sites/neetoui-rn-docs/deploys)
-
 **neetoUI-RN** is the library that drives the experience in all
 [neeto product's](https://neeto.com/) React Native application built at
 [BigBinary](https://www.bigbinary.com).
@@ -9,9 +6,9 @@
 
 Read the docs here.
 
-Docs: https://neetoui-rn-docs.netlify.app/
+Docs: https://neetoui-rn-docs.onrender.com/
 
-Storybook: https://neetoui-rn.netlify.app
+Storybook: https://neetoui-rn.onrender.com/
 
 ## Installation
 

package/lib/components/Divider.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Divider=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Divider.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var View=_native.default.View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.color,_styledSystem.layout);var Divider=function Divider(_ref){var rest=(0,_extends2.default)({},_ref);return React.createElement(View,(0,_extends2.default)({},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:35,columnNumber:10}}));};exports.Divider=Divider;Divider.defaultProps={color:"background.grey400"};Divider.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.color,_propTypes.default.layout,{height:_propTypes2.default.number,width:_propTypes2.default.number});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Divider=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var React=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["thickness","orientation","bg"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Divider.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var View=_native.default.View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.color,_styledSystem.layout);var Divider=function Divider(_ref){var thickness=_ref.thickness,orientation=_ref.orientation,bg=_ref.bg,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var isHorizontal=orientation==="horizontal";var lineStyles=isHorizontal?(0,_extends2.default)({},rest,{height:thickness}):(0,_extends2.default)({},rest,{width:thickness,flex:1});return thickness>0&&React.createElement(View,(0,_extends2.default)({bg:bg},lineStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:27}}));};exports.Divider=Divider;Divider.defaultProps={bg:"background.grey400",orientation:"horizontal",thickness:1};Divider.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.color,_propTypes.default.layout,{orientation:_propTypes2.default.oneOf(["horizontal","vertical"]),thickness:_propTypes2.default.oneOfType([_propTypes2.default.number,_propTypes2.default.string]),bg:_propTypes2.default.string});

package/lib/components/OtpInputs.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _theme=require("../theme");var _=require("./");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var styles={inputStyles:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"},defaultContainerStyles:{margin:2,borderRadius:6,borderWidth:1,borderColor:_theme.theme.colors.background.secondary,backgroundColor:_theme.theme.colors.background.white,justifyContent:"center",alignItems:"center",minHeight:45,minWidth:45},defaultTextStyles:{fontSize:_theme.theme.fontSizes.xl,fontFamily:_theme.theme.fonts.inter700}};var OtpInputs=function OtpInputs(_ref){var _ref$handleChange=_ref.handleChange,handleChange=_ref$handleChange===void 0?function(){}:_ref$handleChange,_ref$numberOfInputs=_ref.numberOfInputs,numberOfInputs=_ref$numberOfInputs===void 0?4:_ref$numberOfInputs,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,_ref$code=_ref.code,code=_ref$code===void 0?"":_ref$code,containerStyles=_ref.containerStyles,textStyles=_ref.textStyles;var inputRef=_react.default.useRef();(0,_react.useEffect)(function(){_reactNative.InteractionManager.runAfterInteractions(function(){if(inputRef!=null&&inputRef.current){inputRef.current.focus();}});},[inputRef]);return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:5}},_react.default.createElement(_.Touchable,{onPress:function onPress(){inputRef&&inputRef.current.focus();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:80,columnNumber:7}},_react.default.createElement(_.Container,{flexDirection:"row",alignItems:"center",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:85,columnNumber:9}},Array(numberOfInputs).fill().map(function(number,index){return _react.default.createElement(_.Container,(0,_extends2.default)({key:index},styles.defaultContainerStyles,containerStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:94,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({accessibilityLabel:"otp",color:error?_theme.theme.colors.font.danger:_theme.theme.colors.font.secondary},styles.defaultTextStyles,textStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:19}}),code[index]||""));}),_react.default.createElement(_.Input,(0,_extends2.default)({keyboardType:"phone-pad",selectionColor:"transparent",autoFocus:true,onChangeText:function onChangeText(value){if(!isNaN(value)){if(value.length<=numberOfInputs){handleChange&&handleChange(value);}if(value.length>=numberOfInputs){return _reactNative.Keyboard.dismiss();}}},ref:inputRef,value:code||""},styles.inputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:11}})))));};exports.OtpInputs=OtpInputs;OtpInputs.defaultProps={containerStyles:{},textStyles:{}};OtpInputs.propTypes={code:_propTypes.default.string.isRequired,numberOfInputs:_propTypes.default.number.isRequired,handleChange:_propTypes.default.func.isRequired,error:_propTypes.default.bool,containerStyles:_propTypes.default.object,textStyles:_propTypes.default.object};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _theme=require("../theme");var _=require("./");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var styles={inputStyles:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"},defaultContainerStyles:{margin:2,borderRadius:6,borderWidth:1,borderColor:_theme.theme.colors.background.secondary,backgroundColor:_theme.theme.colors.background.white,justifyContent:"center",alignItems:"center",minHeight:45,minWidth:45},defaultTextStyles:{fontSize:_theme.theme.fontSizes.xl,fontFamily:_theme.theme.fonts.inter700}};var OtpInputs=function OtpInputs(_ref){var _ref$handleChange=_ref.handleChange,handleChange=_ref$handleChange===void 0?function(){}:_ref$handleChange,_ref$numberOfInputs=_ref.numberOfInputs,numberOfInputs=_ref$numberOfInputs===void 0?4:_ref$numberOfInputs,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,_ref$code=_ref.code,code=_ref$code===void 0?"":_ref$code,containerStyles=_ref.containerStyles,textStyles=_ref.textStyles;var inputRef=_react.default.useRef();(0,_react.useEffect)(function(){_reactNative.InteractionManager.runAfterInteractions(function(){if(inputRef!=null&&inputRef.current){inputRef.current.focus();}});},[inputRef]);return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:5}},_react.default.createElement(_.Touchable,{onPress:function onPress(){_reactNative.Keyboard.dismiss();inputRef&&inputRef.current.focus();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:80,columnNumber:7}},_react.default.createElement(_.Container,{flexDirection:"row",alignItems:"center",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:86,columnNumber:9}},Array(numberOfInputs).fill().map(function(number,index){return _react.default.createElement(_.Container,(0,_extends2.default)({key:index},styles.defaultContainerStyles,containerStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({accessibilityLabel:"otp",color:error?_theme.theme.colors.font.danger:_theme.theme.colors.font.secondary},styles.defaultTextStyles,textStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:100,columnNumber:19}}),code[index]||""));}),_react.default.createElement(_.Input,(0,_extends2.default)({keyboardType:"phone-pad",selectionColor:"transparent",autoFocus:true,onChangeText:function onChangeText(value){if(!isNaN(value)){if(value.length<=numberOfInputs){handleChange&&handleChange(value);}if(value.length>=numberOfInputs){return _reactNative.Keyboard.dismiss();}}},ref:inputRef,value:code||""},styles.inputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:115,columnNumber:11}})))));};exports.OtpInputs=OtpInputs;OtpInputs.defaultProps={containerStyles:{},textStyles:{}};OtpInputs.propTypes={code:_propTypes.default.string.isRequired,numberOfInputs:_propTypes.default.number.isRequired,handleChange:_propTypes.default.func.isRequired,error:_propTypes.default.bool,containerStyles:_propTypes.default.object,textStyles:_propTypes.default.object};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.111",
+  "version": "0.0.114",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/Divider.js

@@ -8,6 +8,10 @@ import PropTypes from "prop-types";
  *
  * Divider is a separator line that can be used between two different sections.
  *
+ * <div class="screenshots">
+ *   <img src="screenshots/divider/divider.png" />
+ * </div>
+ *
  *   ## Usage
  * ```js
  * import * as React from 'react';
@@ -16,7 +20,7 @@ import PropTypes from "prop-types";
  * export default function Main(){
  *  return (
  *   <Container>
- *     <Divider flex={1} height={1}/>
+ *     <Divider orientation="vertical" thickness={1}/>
  *   </Container>
  *  );
  * }
@@ -31,12 +35,26 @@ const View = styled.View`
   ${layout}
 `;
 
-export const Divider = ({ ...rest }) => {
-  return <View {...rest} />;
+export const Divider = ({ thickness, orientation, bg, ...rest }) => {
+  const isHorizontal = orientation === "horizontal";
+  const lineStyles = isHorizontal
+    ? {
+        ...rest,
+        height: thickness,
+      }
+    : {
+        ...rest,
+        width: thickness,
+        flex: 1,
+      };
+
+  return thickness > 0 && <View bg={bg} {...lineStyles} />;
 };
 
 Divider.defaultProps = {
-  color: "background.grey400",
+  bg: "background.grey400",
+  orientation: "horizontal",
+  thickness: 1,
 };
 
 Divider.propTypes = {
@@ -45,11 +63,15 @@ Divider.propTypes = {
   ...propTypes.color,
   ...propTypes.layout,
   /**
-   * To specify the height of the divider line
+   * To specify whether the line needs to horizontal or vertical
+   */
+  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+  /**
+   * To specify the thickness of divider
    */
-  height: PropTypes.number,
+  thickness: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
-   * To specify the width of the divider line
+   * To specify the color of divider
    */
-  width: PropTypes.number,
+  bg: PropTypes.string,
 };

package/src/components/OtpInputs.js

@@ -79,6 +79,7 @@ export const OtpInputs = ({
     <Container>
       <Touchable
         onPress={() => {
+          Keyboard.dismiss();
           inputRef && inputRef.current.focus();
         }}
       >