@bigbinary/neetoui-rn 0.0.26 → 0.0.30

package/lib/components/Avatar.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Avatar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var React=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _=require("./");var _excluded=["name","size","bgColor","fontColor","imageUrl"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Avatar.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 Avatar=function Avatar(_ref){var name=_ref.name,_ref$size=_ref.size,size=_ref$size===void 0?80:_ref$size,_ref$bgColor=_ref.bgColor,bgColor=_ref$bgColor===void 0?"background.grey200":_ref$bgColor,_ref$fontColor=_ref.fontColor,fontColor=_ref$fontColor===void 0?"font.grey600":_ref$fontColor,imageUrl=_ref.imageUrl,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var acronym=name.split(/\s/).reduce(function(response,word){return response+=word.slice(0,1);},"").slice(0,2);var fontSize=size/2-8;var styles={profileImage:{height:size,width:size,alignSelf:"center",borderRadius:size/2}};return React.createElement(React.Fragment,null,imageUrl?React.createElement(_reactNative.Image,(0,_extends2.default)({style:styles.profileImage,source:{uri:imageUrl}},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:9}})):React.createElement(_.Container,(0,_extends2.default)({bg:bgColor,width:size,height:size,borderRadius:size/2},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:9}}),React.createElement(_.Typography,{fontFamily:"inter700",fontSize:fontSize>14?fontSize:14,color:fontColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:45,columnNumber:11}},acronym)));};exports.Avatar=Avatar;Avatar.defaultProps={alignItems:"center",justifyContent:"center"};Avatar.propTypes={name:_propTypes.default.string.isRequired,size:_propTypes.default.number,bgColor:_propTypes.default.string,fontColor:_propTypes.default.string,imageUrl:_propTypes.default.string};

package/lib/components/Input.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TextInput=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));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=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["label","message","error","onFocus","onBlur","inline","brandRight","brandLeft","disabled"];var _templateObject,_templateObject2,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.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 TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography);exports.TextInput=TextInput;var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var InputText=function InputText(_ref){var theme=_ref.theme,text=_ref.text;return _react.default.createElement(_.Container,{bg:theme.colors.background.menubackground,justifyContent:"center",px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:3}},_react.default.createElement(_.Typography,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:5}},text));};var LabelText=function LabelText(_ref2){var inline=_ref2.inline,label=_ref2.label;return _react.default.createElement(_.Typography,{numberOfLines:1,textStyle:"subtext",mb:inline?"12px":"7px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:43,columnNumber:3}},label);};var ErrorMessage=function ErrorMessage(_ref3){var error=_ref3.error,message=_ref3.message,theme=_ref3.theme;if(error){return _react.default.createElement(_.Typography,{textStyle:"subtext",color:theme.colors.font.danger,__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:7}},message);}return null;};var Input=function Input(_ref4){var _ref4$label=_ref4.label,label=_ref4$label===void 0?"":_ref4$label,_ref4$message=_ref4.message,message=_ref4$message===void 0?"":_ref4$message,_ref4$error=_ref4.error,error=_ref4$error===void 0?false:_ref4$error,onFocus=_ref4.onFocus,onBlur=_ref4.onBlur,_ref4$inline=_ref4.inline,inline=_ref4$inline===void 0?false:_ref4$inline,brandRight=_ref4.brandRight,brandLeft=_ref4.brandLeft,_ref4$disabled=_ref4.disabled,disabled=_ref4$disabled===void 0?false:_ref4$disabled,rest=(0,_objectWithoutProperties2.default)(_ref4,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocus=_useState2[0],setIsFocus=_useState2[1];var borderColor=error?theme.colors.border.danger:theme.colors.border.primary;var handleFocus=function handleFocus(e){onFocus&&onFocus(e);setIsFocus(true);};var handleBlur=function handleBlur(e){onBlur&&onBlur(e);setIsFocus(false);};var focusStyles=isFocus&&{borderRadius:4,borderColor:error?"rgba(255, 105, 105, 0.3)":theme.colors.border.grey400,borderWidth:inline?"0px":"3px",borderStyle:"solid"};var disabledStyles=disabled&&{opacity:0.5,bg:theme.colors.background.secondary};var inlineInputStyles=isFocus&&{backgroundColor:error?theme.colors.border.danger:theme.colors.border.base};return _react.default.createElement(_.Container,{mb:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:112,columnNumber:5}},!inline&&_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:113,columnNumber:19}}),_react.default.createElement(_.Container,(0,_extends2.default)({},focusStyles,disabledStyles,{flexDirection:inline?"row":"column",onBlur:handleBlur,onFocus:handleFocus,__self:_this,__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:7}}),inline&&_react.default.createElement(_.Container,{alignSelf:"flex-end",maxWidth:100,px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:11}},_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:13}})),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:126,columnNumber:9}},brandLeft&&_react.default.createElement(InputText,{theme:theme,text:brandLeft,__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:25}}),_react.default.createElement(TextInput,(0,_extends2.default)({height:40,flex:1,textStyle:"subtext"},rest,{border:!inline&&borderColor,editable:!disabled,color:error?theme.colors.font.danger:theme.colors.font.primary,__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:11}})),brandRight&&_react.default.createElement(InputText,{theme:theme,text:brandRight,__self:_this,__source:{fileName:_jsxFileName,lineNumber:137,columnNumber:26}}))),inline&&_react.default.createElement(View,(0,_extends2.default)({backgroundColor:theme.colors.border.primary,height:1},inlineInputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:141,columnNumber:9}})),_react.default.createElement(ErrorMessage,{theme:theme,error:error,message:message,__self:_this,__source:{fileName:_jsxFileName,lineNumber:147,columnNumber:7}}));};exports.Input=Input;Input.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.buttonStyle,{label:_propTypes2.default.string.isRequired,message:_propTypes2.default.string,error:_propTypes2.default.bool,inline:_propTypes2.default.bool,brandRight:_propTypes2.default.string,brandLeft:_propTypes2.default.string,disabled:_propTypes2.default.bool,children:_propTypes2.default.node});InputText.propTypes={text:_propTypes2.default.string};LabelText.propTypes={inline:_propTypes2.default.bool,label:_propTypes2.default.string};ErrorMessage.propTypes={error:_propTypes2.default.bool,message:_propTypes2.default.string};TextInput.defaultProps={height:40,border:1,px:2,fontFamily:"inter400",fontSize:"14px",borderRadius:2};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TextInput=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));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=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["label","message","error","onFocus","onBlur","inline","brandRight","brandLeft","disabled"];var _templateObject,_templateObject2,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.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 TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography);exports.TextInput=TextInput;var View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Input=function Input(_ref){var _ref$label=_ref.label,label=_ref$label===void 0?"":_ref$label,_ref$message=_ref.message,message=_ref$message===void 0?"":_ref$message,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,onFocus=_ref.onFocus,onBlur=_ref.onBlur,_ref$inline=_ref.inline,inline=_ref$inline===void 0?false:_ref$inline,brandRight=_ref.brandRight,brandLeft=_ref.brandLeft,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isFocus=_useState2[0],setIsFocus=_useState2[1];var borderColor=error?theme.colors.border.danger:theme.colors.border.primary;var handleFocus=function handleFocus(e){onFocus&&onFocus(e);setIsFocus(true);};var handleBlur=function handleBlur(e){onBlur&&onBlur(e);setIsFocus(false);};var focusStyles=isFocus&&{borderRadius:4,borderColor:error?"rgba(255, 105, 105, 0.3)":theme.colors.border.grey400,borderWidth:inline?"0px":"3px",borderStyle:"solid"};var disabledStyles=disabled&&{opacity:0.5,bg:theme.colors.background.secondary};var inlineInputStyles=isFocus&&{backgroundColor:error?theme.colors.border.danger:theme.colors.border.base};return _react.default.createElement(_.Container,{mb:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:5}},!inline&&_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:19}}),_react.default.createElement(_.Container,(0,_extends2.default)({},focusStyles,disabledStyles,{flexDirection:inline?"row":"column",onBlur:handleBlur,onFocus:handleFocus,__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:7}}),inline&&_react.default.createElement(_.Container,{alignSelf:"flex-end",maxWidth:100,px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:119,columnNumber:11}},_react.default.createElement(LabelText,{inline:inline,label:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:13}})),_react.default.createElement(_.Container,{flexDirection:"row",width:"100%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:9}},brandLeft&&_react.default.createElement(InputText,{theme:theme,text:brandLeft,__self:_this,__source:{fileName:_jsxFileName,lineNumber:124,columnNumber:25}}),_react.default.createElement(TextInput,(0,_extends2.default)({height:40,flex:1,textStyle:"subtext"},rest,{border:!inline&&borderColor,editable:!disabled,color:error?theme.colors.font.danger:theme.colors.font.primary,__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:11}})),brandRight&&_react.default.createElement(InputText,{theme:theme,text:brandRight,__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:26}}))),inline&&_react.default.createElement(View,(0,_extends2.default)({backgroundColor:theme.colors.border.primary,height:1},inlineInputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:138,columnNumber:9}})),_react.default.createElement(ErrorMessage,{theme:theme,error:error,message:message,__self:_this,__source:{fileName:_jsxFileName,lineNumber:144,columnNumber:7}}));};exports.Input=Input;var InputText=function InputText(_ref2){var theme=_ref2.theme,text=_ref2.text;return _react.default.createElement(_.Container,{bg:theme.colors.background.menubackground,justifyContent:"center",px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:150,columnNumber:3}},text&&_react.default.createElement(_.Typography,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:14}},text));};var LabelText=function LabelText(_ref3){var inline=_ref3.inline,label=_ref3.label;return _react.default.createElement(_.Typography,{numberOfLines:1,textStyle:"subtext",mb:inline?"12px":"7px",__self:_this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:3}},label);};var ErrorMessage=function ErrorMessage(_ref4){var error=_ref4.error,message=_ref4.message,theme=_ref4.theme;if(error){return _react.default.createElement(_.Typography,{textStyle:"subtext",color:theme.colors.font.danger,__self:_this,__source:{fileName:_jsxFileName,lineNumber:172,columnNumber:7}},message);}return null;};Input.propTypes=(0,_extends2.default)({},_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.buttonStyle,{label:_propTypes2.default.string.isRequired,message:_propTypes2.default.string,error:_propTypes2.default.bool,inline:_propTypes2.default.bool,brandRight:_propTypes2.default.string,brandLeft:_propTypes2.default.string,disabled:_propTypes2.default.bool,children:_propTypes2.default.node});InputText.propTypes={text:_propTypes2.default.string};LabelText.propTypes={inline:_propTypes2.default.bool,label:_propTypes2.default.string};ErrorMessage.propTypes={error:_propTypes2.default.bool,message:_propTypes2.default.string};TextInput.defaultProps={height:40,border:1,px:2,fontFamily:"inter400",fontSize:"14px",borderRadius:2};

package/lib/components/ToggleSwitch.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ToggleSwitch=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNativeSwitchToggle=_interopRequireDefault(require("react-native-switch-toggle"));var _native=require("styled-components/native");var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["value","onValueChange","label","disabled"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ToggleSwitch.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 ToggleSwitch=function ToggleSwitch(_ref){var value=_ref.value,onValueChange=_ref.onValueChange,label=_ref.label,disabled=_ref.disabled,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var circleColorOn=disabled?theme.colors.background.grey500:theme.colors.background.white;var circleColorOff=disabled?theme.colors.background.menubackground:theme.colors.background.white;return _react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",borderColor:theme.colors.border.primary,alignItems:"center"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:58,columnNumber:5}}),_react.default.createElement(_.Typography,{flex:0.8,textStyle:"subtext",__self:_this,__source:{fileName:_jsxFileName,lineNumber:64,columnNumber:7}},label),_react.default.createElement(_.Container,{flex:0.2,alignItems:"flex-end",__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:7}},_react.default.createElement(_reactNativeSwitchToggle.default,(0,_extends2.default)({switchOn:value,onPress:function onPress(){return!disabled&&onValueChange();},circleColorOn:circleColorOn,circleColorOff:circleColorOff,backgroundColorOff:theme.colors.background.grey200,backgroundColor:theme.colors.background.grey800,containerStyle:styles.containerStyle,circleStyle:styles.circleStyle},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:9}}))));};exports.ToggleSwitch=ToggleSwitch;ToggleSwitch.defaultProps={borderWidth:1,borderRadius:2,p:3};ToggleSwitch.propTypes={label:_propTypes.default.string.isRequired,value:_propTypes.default.bool.isRequired,onValueChange:_propTypes.default.func,disabled:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({containerStyle:{width:38,height:18,borderRadius:10,padding:2},circleStyle:{width:14,height:14,borderRadius:7}});

package/lib/components/Typography.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Typography=exports.Text=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 _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["children"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Typography.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 Text=_native.default.Text(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position);exports.Text=Text;var Typography=function Typography(_ref){var children=_ref.children,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(Text,(0,_extends2.default)({},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:10}}),children);};exports.Typography=Typography;Typography.propTypes=(0,_extends2.default)({},_propTypes.default.space,_propTypes.default.layout,_propTypes.default.flexbox,_propTypes.default.typography,_propTypes.default.color,_propTypes.default.textStyle,{children:_propTypes2.default.node.isRequired});Typography.defaultProps={textStyle:"defaultTextStyle"};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Typography=exports.Text=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 _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _propTypes=_interopRequireDefault(require("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _excluded=["children"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Typography.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 Text=_native.default.Text(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));exports.Text=Text;var Typography=function Typography(_ref){var children=_ref.children,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(Text,(0,_extends2.default)({},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:10}}),children);};exports.Typography=Typography;Typography.propTypes=(0,_extends2.default)({},_propTypes.default.space,_propTypes.default.layout,_propTypes.default.flexbox,_propTypes.default.typography,_propTypes.default.color,_propTypes.default.textStyle,{children:_propTypes2.default.node.isRequired});Typography.defaultProps={textStyle:"defaultTextStyle"};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.26",
+  "version": "0.0.30",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -47,6 +47,7 @@
   "peerDependencies": {},
   "dependencies": {
     "@styled-system/prop-types": "^5.1.5",
+    "react-native-switch-toggle": "^2.2.1",
     "styled-components": "^5.3.3",
     "styled-system": "^5.1.5"
   },

package/src/components/Avatar.js

@@ -0,0 +1,69 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { Image } from "react-native";
+
+import { Typography, Container } from "@components";
+
+export const Avatar = ({
+  name,
+  size = 80,
+  bgColor = "background.grey200",
+  fontColor = "font.grey600",
+  imageUrl,
+  ...rest
+}) => {
+  const acronym = name
+    .split(/\s/)
+    .reduce((response, word) => (response += word.slice(0, 1)), "")
+    .slice(0, 2);
+  const fontSize = size / 2 - 8;
+
+  const styles = {
+    profileImage: {
+      height: size,
+      width: size,
+      alignSelf: "center",
+      borderRadius: size / 2,
+    },
+  };
+  return (
+    <>
+      {imageUrl ? (
+        <Image
+          style={styles.profileImage}
+          source={{ uri: imageUrl }}
+          {...rest}
+        />
+      ) : (
+        <Container
+          bg={bgColor}
+          width={size}
+          height={size}
+          borderRadius={size / 2}
+          {...rest}
+        >
+          <Typography
+            fontFamily="inter700"
+            fontSize={fontSize > 14 ? fontSize : 14}
+            color={fontColor}
+          >
+            {acronym}
+          </Typography>
+        </Container>
+      )}
+    </>
+  );
+};
+
+Avatar.defaultProps = {
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+Avatar.propTypes = {
+  name: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  bgColor: PropTypes.string,
+  fontColor: PropTypes.string,
+  imageUrl: PropTypes.string,
+};

package/src/components/Input.js

@@ -29,36 +29,33 @@ const View = styled.View`
   ${layout}
 `;
 
-const InputText = ({ theme, text }) => (
-  <Container
-    bg={theme.colors.background.menubackground}
-    justifyContent="center"
-    px={2}
-  >
-    <Typography>{text}</Typography>
-  </Container>
-);
-
-const LabelText = ({ inline, label }) => (
-  <Typography
-    numberOfLines={1}
-    textStyle="subtext"
-    mb={inline ? "12px" : "7px"}
-  >
-    {label}
-  </Typography>
-);
-
-const ErrorMessage = ({ error, message, theme }) => {
-  if (error) {
-    return (
-      <Typography textStyle="subtext" color={theme.colors.font.danger}>
-        {message}
-      </Typography>
-    );
-  }
-  return null;
-};
+/**
+ *
+ * This component supports below props categories from [styled-system ](/styled-system).
+ * <ul>
+ * <li>flexbox</li>
+ * <li>space</li>
+ * <li>border</li>
+ * <li>buttonStyle</li>
+ * <li>brandLeft</li>
+ * <li>typography</li>
+ * </ul>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Input, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  return (
+ *    <Container>
+ *     <Input brandLeft="example" error={true} message="example error" />
+ *    </Container>
+ *  );
+ * }
+ * ```
+ *
+ */
 
 export const Input = ({
   label = "",
@@ -149,17 +146,69 @@ export const Input = ({
   );
 };
 
+const InputText = ({ theme, text }) => (
+  <Container
+    bg={theme.colors.background.menubackground}
+    justifyContent="center"
+    px={2}
+  >
+    {text && <Typography>{text}</Typography>}
+  </Container>
+);
+
+const LabelText = ({ inline, label }) => (
+  <Typography
+    numberOfLines={1}
+    textStyle="subtext"
+    mb={inline ? "12px" : "7px"}
+  >
+    {label}
+  </Typography>
+);
+
+const ErrorMessage = ({ error, message, theme }) => {
+  if (error) {
+    return (
+      <Typography textStyle="subtext" color={theme.colors.font.danger}>
+        {message}
+      </Typography>
+    );
+  }
+  return null;
+};
+
 Input.propTypes = {
   ...propTypes.flexbox,
   ...propTypes.space,
   ...propTypes.border,
   ...propTypes.buttonStyle,
+  /**
+   * The text to use for the floating label.
+   */
   label: PropTypes.string.isRequired,
+  /**
+   * To display error/info messages
+   */
   message: PropTypes.string,
+  /**
+   * Whether to style the TextInput with error style.
+   */
   error: PropTypes.bool,
+  /**
+   * Changes input layout to inline
+   */
   inline: PropTypes.bool,
+  /**
+   * Display brand to the right of input
+   */
   brandRight: PropTypes.string,
+  /**
+   * Display brand to the left of input
+   */
   brandLeft: PropTypes.string,
+  /**
+   * If true, user won't be able to interact with the component.
+   */
   disabled: PropTypes.bool,
   children: PropTypes.node,
 };

package/src/components/ToggleSwitch.js

@@ -0,0 +1,121 @@
+import React, { useContext } from "react";
+import SwitchToggle from "react-native-switch-toggle";
+import { ThemeContext } from "styled-components/native";
+import { StyleSheet } from "react-native";
+import PropTypes from "prop-types";
+
+import { Typography, Container } from "@components";
+
+/**
+ * ToggleSwitch component is a simple switch toggle component from react-native-switch-toggle along with a label which describes what is being switched ON/OFF.
+ *
+ * This component supports below props categories from [styled-system ](/styled-system).
+ *
+ * <div class="screenshots">
+ *   <img src="screenshots/toggleswitch/switchstyles.png" />
+ * </div>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React, {useState} from 'react';
+ * import { Typography, Container } from '@bigbinary/neetoui-rn';
+ *
+ * export default function Main() {
+ *  const [switchOne, setSwitchOne] = useState(true);
+ *
+ *  return (
+ *    <Container>
+ *     <ToggleSwitch
+ *      value={switchOne}
+ *      setValue={() => setSwitchOne(prevValue => !prevValue)}
+ *      label="Conversation assigned to my group"
+ *     />
+ *   </Container>
+ *  );
+ * }
+ * ```
+ *
+ * @extends StyledSystems props /styled-system
+ */
+
+export const ToggleSwitch = ({
+  value,
+  onValueChange,
+  label,
+  disabled,
+  ...rest
+}) => {
+  const theme = useContext(ThemeContext);
+
+  const circleColorOn = disabled
+    ? theme.colors.background.grey500
+    : theme.colors.background.white;
+  const circleColorOff = disabled
+    ? theme.colors.background.menubackground
+    : theme.colors.background.white;
+
+  return (
+    <Container
+      flexDirection="row"
+      borderColor={theme.colors.border.primary}
+      alignItems="center"
+      {...rest}
+    >
+      <Typography flex={0.8} textStyle="subtext">
+        {label}
+      </Typography>
+      <Container flex={0.2} alignItems="flex-end">
+        <SwitchToggle
+          switchOn={value}
+          onPress={() => !disabled && onValueChange()}
+          circleColorOn={circleColorOn}
+          circleColorOff={circleColorOff}
+          backgroundColorOff={theme.colors.background.grey200}
+          backgroundColor={theme.colors.background.grey800}
+          containerStyle={styles.containerStyle}
+          circleStyle={styles.circleStyle}
+          {...rest}
+        />
+      </Container>
+    </Container>
+  );
+};
+
+ToggleSwitch.defaultProps = {
+  borderWidth: 1,
+  borderRadius: 2,
+  p: 3,
+};
+
+ToggleSwitch.propTypes = {
+  /**
+   * The text to use for the floating label.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Value of the switch, true means 'on', false means 'off'.
+   */
+  value: PropTypes.bool.isRequired,
+  /**
+   * Callback called with the new value when it changes.
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * Disable toggling the switch.
+   */
+  disabled: PropTypes.bool,
+};
+
+const styles = StyleSheet.create({
+  containerStyle: {
+    width: 38,
+    height: 18,
+    borderRadius: 10,
+    padding: 2,
+  },
+  circleStyle: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+  },
+});

package/src/components/Typography.js

@@ -8,6 +8,7 @@ import {
   color,
   textStyle,
   position,
+  system,
 } from "styled-system";
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
@@ -20,6 +21,13 @@ export const Text = styled.Text`
   ${typography}
   ${color}
   ${position}
+  ${system({
+    textDecoration: {
+      property: "textDecoration",
+      cssProperty: "textDecoration",
+    },
+    textTransform: { property: "textTransform", cssProperty: "textTransform" },
+  })}
 `;
 
 /**

package/src/components/index.js

@@ -3,3 +3,5 @@ export { Container } from "./Container";
 export { Typography } from "./Typography";
 export { Input } from "./Input";
 export { FAB } from "./FAB";
+export { ToggleSwitch } from "./ToggleSwitch";
+export { Avatar } from "./Avatar";