@bigbinary/neetoui-rn 0.0.97 → 0.0.100

package/README.md

@@ -1,8 +1,9 @@
 [![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).
+**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).
 
 ## Documentation
 
@@ -80,8 +81,8 @@ You can use below commands for running storybook in different platforms:
 ## Auto Publish to NPM
 
 neetoUI-RN version gets patched, auto-incremented and auto-published to npm on
-new commit to master. You can checkout the `publish` workflow in Github actions to
-get a live update.
+new commit to master. You can checkout the `publish` workflow in Github actions
+to get a live update.
 
 ## Building Storybook
 

package/lib/components/CheckBox.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CheckBox=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["selected","onSelect","checkedComponent","checkedItemProp","disabled","label","labelComponent","labelProp","labelPosition","checkboxContainerProp"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/CheckBox.js";var LABEL_POSITIONS=["left","right"];var LabelComponent=function LabelComponent(_ref){var label=_ref.label,labelComponent=_ref.labelComponent,labelProp=_ref.labelProp;return labelComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},labelProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:28}}),label);};var CheckBox=function CheckBox(_ref2){var _ref2$selected=_ref2.selected,selected=_ref2$selected===void 0?false:_ref2$selected,_ref2$onSelect=_ref2.onSelect,onSelect=_ref2$onSelect===void 0?function(){}:_ref2$onSelect,_ref2$checkedComponen=_ref2.checkedComponent,checkedComponent=_ref2$checkedComponen===void 0?null:_ref2$checkedComponen,_ref2$checkedItemProp=_ref2.checkedItemProp,checkedItemProp=_ref2$checkedItemProp===void 0?{}:_ref2$checkedItemProp,_ref2$disabled=_ref2.disabled,disabled=_ref2$disabled===void 0?false:_ref2$disabled,_ref2$label=_ref2.label,label=_ref2$label===void 0?"Option":_ref2$label,_ref2$labelComponent=_ref2.labelComponent,labelComponent=_ref2$labelComponent===void 0?null:_ref2$labelComponent,_ref2$labelProp=_ref2.labelProp,labelProp=_ref2$labelProp===void 0?{}:_ref2$labelProp,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?"right":_ref2$labelPosition,_ref2$checkboxContain=_ref2.checkboxContainerProp,checkboxContainerProp=_ref2$checkboxContain===void 0?{}:_ref2$checkboxContain,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _react.default.createElement(_.Touchable,(0,_extends2.default)({disabled:disabled,onPress:onSelect,opacity:disabled?0.5:1,flexDirection:"row",alignItems:"center"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:5}}),labelPosition===LABEL_POSITIONS[0]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({mr:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}}):null,_react.default.createElement(_.Container,(0,_extends2.default)({borderColor:"background.base",borderWidth:1,borderRadius:5,justifyContent:"center",alignItems:"center",width:20,height:20},checkboxContainerProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:80,columnNumber:7}}),selected&&_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:91,columnNumber:11}},checkedComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},checkedItemProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:93,columnNumber:15}}),"\u2713"))),labelPosition===LABEL_POSITIONS[1]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({ml:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:9}}):null);};exports.CheckBox=CheckBox;CheckBox.propTypes={selected:_propTypes.default.bool.isRequired,onSelect:_propTypes.default.func.isRequired,disabled:_propTypes.default.bool,checkedComponent:_propTypes.default.element,checkedItemProp:_propTypes.default.object,label:_propTypes.default.string,labelProp:_propTypes.default.object,labelComponent:_propTypes.default.element,labelPosition:_propTypes.default.oneOf(LABEL_POSITIONS),checkboxContainerProp:_propTypes.default.object};LabelComponent.propTypes={label:_propTypes.default.string,labelComponent:_propTypes.default.element,labelProp:_propTypes.default.object};

package/lib/components/RadioButton.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.RadioButton=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["radioButtonWidth","radioButtonSelectedWidth","containerBg","innerActiveBg","innerInActiveBg","onSelect","selected","density","label","labelComponent","labelProp","labelPosition","disabled"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RadioButton.js";var LABEL_POSITIONS=["left","right"];var LabelComponent=function LabelComponent(_ref){var label=_ref.label,labelComponent=_ref.labelComponent,labelProp=_ref.labelProp;return labelComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},labelProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:28}}),label);};var RadioButton=function RadioButton(_ref2){var _ref2$radioButtonWidt=_ref2.radioButtonWidth,radioButtonWidth=_ref2$radioButtonWidt===void 0?20:_ref2$radioButtonWidt,_ref2$radioButtonSele=_ref2.radioButtonSelectedWidth,radioButtonSelectedWidth=_ref2$radioButtonSele===void 0?10:_ref2$radioButtonSele,_ref2$containerBg=_ref2.containerBg,containerBg=_ref2$containerBg===void 0?"background.grey":_ref2$containerBg,_ref2$innerActiveBg=_ref2.innerActiveBg,innerActiveBg=_ref2$innerActiveBg===void 0?"background.base":_ref2$innerActiveBg,_ref2$innerInActiveBg=_ref2.innerInActiveBg,innerInActiveBg=_ref2$innerInActiveBg===void 0?"background.secondary":_ref2$innerInActiveBg,_ref2$onSelect=_ref2.onSelect,onSelect=_ref2$onSelect===void 0?function(){}:_ref2$onSelect,_ref2$selected=_ref2.selected,selected=_ref2$selected===void 0?null:_ref2$selected,_ref2$density=_ref2.density,density=_ref2$density===void 0?5:_ref2$density,_ref2$label=_ref2.label,label=_ref2$label===void 0?"Option":_ref2$label,_ref2$labelComponent=_ref2.labelComponent,labelComponent=_ref2$labelComponent===void 0?null:_ref2$labelComponent,_ref2$labelProp=_ref2.labelProp,labelProp=_ref2$labelProp===void 0?{}:_ref2$labelProp,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?"right":_ref2$labelPosition,_ref2$disabled=_ref2.disabled,disabled=_ref2$disabled===void 0?false:_ref2$disabled,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _react.default.createElement(_.Touchable,(0,_extends2.default)({disabled:disabled,opacity:disabled?0.5:1,onPress:onSelect,flexDirection:"row",alignItems:"center",py:1},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:5}}),labelPosition===LABEL_POSITIONS[0]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({mr:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:73,columnNumber:9}}):null,_react.default.createElement(_.Container,{bg:containerBg,height:radioButtonWidth,width:radioButtonWidth,borderRadius:radioButtonWidth/2,justifyContent:"center",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:7}},_react.default.createElement(_.Container,{height:radioButtonSelectedWidth+density,width:radioButtonSelectedWidth+density,borderRadius:(radioButtonSelectedWidth+density)/2,bg:"background.white",justifyContent:"center",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:87,columnNumber:9}},_react.default.createElement(_.Container,{bg:selected?innerActiveBg:innerInActiveBg,height:radioButtonSelectedWidth,width:radioButtonSelectedWidth,borderRadius:radioButtonSelectedWidth/2,m:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:11}}))),labelPosition===LABEL_POSITIONS[1]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({ml:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:105,columnNumber:9}}):null);};exports.RadioButton=RadioButton;RadioButton.propTypes={onSelect:_propTypes.default.func.isRequired,selected:_propTypes.default.any.isRequired,label:_propTypes.default.string,labelProp:_propTypes.default.object,labelComponent:_propTypes.default.element,labelPosition:_propTypes.default.oneOf(LABEL_POSITIONS),disabled:_propTypes.default.bool,radioButtonWidth:_propTypes.default.number,radioButtonSelectedWidth:_propTypes.default.number,containerBg:_propTypes.default.string,innerActiveBg:_propTypes.default.string,innerInActiveBg:_propTypes.default.string,density:_propTypes.default.number};LabelComponent.propTypes={label:_propTypes.default.string,labelComponent:_propTypes.default.element,labelProp:_propTypes.default.object};

package/lib/components/RichTextEditor.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ScrollView=exports.RichTextEditor=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 _reactNativePellRichEditor=require("react-native-pell-rich-editor");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _hooks=require("../hooks");var _=require("./");var _excluded=["onChange","placeholderText","children","toolbarActions","editorProps","toolBarProps"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RichTextEditor.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 ScrollView=_native.default.ScrollView.attrs(function(){return{keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:true,showsHorizontalScrollIndicator:false,contentContainerStyle:{flexGrow:1}};})(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.flexbox,_styledSystem.border,_styledSystem.layout);exports.ScrollView=ScrollView;var RichTextEditor=function RichTextEditor(_ref){var onChange=_ref.onChange,placeholderText=_ref.placeholderText,children=_ref.children,toolbarActions=_ref.toolbarActions,editorProps=_ref.editorProps,toolBarProps=_ref.toolBarProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var richTextRef=(0,_react.useRef)();var keyboardHeight=(0,_hooks.useKeyboard)();var _useState=(0,_react.useState)(true),_useState2=(0,_slicedToArray2.default)(_useState,2),toolbarVisible=_useState2[0],setToolbar=_useState2[1];var showToolbar=keyboardHeight>0&&toolbarVisible;var computeToolbarActions=function computeToolbarActions(){var actionItems=[];toolbarActions==null?void 0:toolbarActions.map(function(actionItem){actionItems.push(_reactNativePellRichEditor.actions[actionItem]);});return actionItems;};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(ScrollView,(0,_extends2.default)({},rest==null?void 0:rest.editorWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:94,columnNumber:7}}),_react.default.createElement(_reactNativePellRichEditor.RichEditor,(0,_extends2.default)({placeholder:placeholderText,ref:richTextRef,onChange:onChange,useContainer:false,onFocus:function onFocus(){setToolbar(true);editorProps==null?void 0:editorProps.onFocusFn();},onBlur:function onBlur(){setToolbar(false);editorProps==null?void 0:editorProps.onBlurFn();}},editorProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:9}})),children),showToolbar&&_react.default.createElement(_.Container,(0,_extends2.default)({bottom:keyboardHeight,position:"absolute",width:"100%"},rest==null?void 0:rest.toolbarWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:9}}),_react.default.createElement(_reactNativePellRichEditor.RichToolbar,(0,_extends2.default)({editor:richTextRef,actions:computeToolbarActions()},toolBarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:11}}))));};exports.RichTextEditor=RichTextEditor;RichTextEditor.defaultProps={editorProps:{},toolBarProps:{},toolbarWrapperStyle:{},placeholderText:"Type here..."};RichTextEditor.propTypes={onChange:_propTypes.default.func.isRequired,children:_propTypes.default.node,placeholderText:_propTypes.default.string,toolbarActions:_propTypes.default.array.isRequired,editorProps:_propTypes.default.object,toolBarProps:_propTypes.default.object};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ScrollView=exports.RichTextEditor=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 _reactNativePellRichEditor=require("react-native-pell-rich-editor");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _hooks=require("../hooks");var _=require("./");var _excluded=["onChange","placeholderText","children","toolbarActions","editorProps","toolBarProps"];var _templateObject,_this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RichTextEditor.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 ScrollView=_native.default.ScrollView.attrs(function(){return{keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:true,showsHorizontalScrollIndicator:false,contentContainerStyle:{flexGrow:1}};})(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n  ","\n  ","\n  ","\n  ","\n"])),_styledSystem.space,_styledSystem.flexbox,_styledSystem.border,_styledSystem.layout);exports.ScrollView=ScrollView;var RichTextEditor=function RichTextEditor(_ref){var onChange=_ref.onChange,placeholderText=_ref.placeholderText,children=_ref.children,toolbarActions=_ref.toolbarActions,editorProps=_ref.editorProps,toolBarProps=_ref.toolBarProps,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var richTextRef=(0,_react.useRef)();var keyboardHeight=(0,_hooks.useKeyboard)();var _useState=(0,_react.useState)(true),_useState2=(0,_slicedToArray2.default)(_useState,2),toolbarVisible=_useState2[0],setToolbar=_useState2[1];var showToolbar=keyboardHeight>0&&toolbarVisible;var computeToolbarActions=function computeToolbarActions(){var actionItems=[];toolbarActions==null?void 0:toolbarActions.map(function(actionItem){actionItems.push(_reactNativePellRichEditor.actions[actionItem]);});return actionItems;};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(ScrollView,(0,_extends2.default)({},rest==null?void 0:rest.editorWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:94,columnNumber:7}}),showToolbar&&_react.default.createElement(_.Container,(0,_extends2.default)({width:"100%"},rest==null?void 0:rest.toolbarWrapperStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:11}}),_react.default.createElement(_reactNativePellRichEditor.RichToolbar,(0,_extends2.default)({editor:richTextRef,actions:computeToolbarActions()},toolBarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:13}}))),_react.default.createElement(_reactNativePellRichEditor.RichEditor,(0,_extends2.default)({placeholder:placeholderText,ref:richTextRef,onChange:onChange,useContainer:false,onFocus:function onFocus(){setToolbar(true);editorProps==null?void 0:editorProps.onFocusFn();},onBlur:function onBlur(){setToolbar(false);editorProps==null?void 0:editorProps.onBlurFn();}},editorProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:9}})),children));};exports.RichTextEditor=RichTextEditor;RichTextEditor.defaultProps={editorProps:{},toolBarProps:{},toolbarWrapperStyle:{},placeholderText:"Type here..."};RichTextEditor.propTypes={onChange:_propTypes.default.func.isRequired,children:_propTypes.default.node,placeholderText:_propTypes.default.string,toolbarActions:_propTypes.default.array.isRequired,editorProps:_propTypes.default.object,toolBarProps:_propTypes.default.object};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});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,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});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");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});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,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});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");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.97",
+  "version": "0.0.100",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "assets"
   ],
   "lint-staged": {
-    "src/**/*.{js,es6,jsx,ts,tsx}": [
+    "src/**/*.{js,es6,jsx,ts,tsx}|storybook/stories**/*.js": [
       "./node_modules/prettier/bin-prettier.js --write",
       "prettier --write",
       "eslint --fix"

package/src/components/CheckBox.js

@@ -0,0 +1,156 @@
+import React from "react";
+import Proptypes from "prop-types";
+
+import { Container, Typography, Touchable } from "@components";
+const LABEL_POSITIONS = ["left", "right"];
+
+const LabelComponent = ({ label, labelComponent, labelProp }) => {
+  return labelComponent || <Typography {...labelProp}>{label}</Typography>;
+};
+
+/**
+ *
+ * This component supports below props categories from [styled-system ](/styled-system).
+ * <ul>
+ * <li>flexbox</li>
+ * <li>space</li>
+ * <li>border</li>
+ * <li>layout</li>
+ * <li>color</li>
+ * <li>buttonStyle</li>
+ * </ul>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from "react";
+ * import { Container, CheckBox, Typography } from "@bigbinary/neetoui-rn";
+ *
+ * export default function Main() {
+ *  const [selected, setSelected] = React.useState(false);
+ *
+ *
+ *  return (
+ *    <Container>
+ *      <Container flexDirection="row" my={2}>
+ *        <CheckBox
+ *          selected={selected}
+ *          onSelect={() => setSelected(!selected)}
+ *          checkedComponent={
+ *            <Container width={10} height={10} bg="background.base" />
+ *          }
+ *          label="Agree"
+ *        />
+ *      </Container>
+ *    </Container>
+ *  );
+ * }
+ * ```
+ *
+ */
+
+export const CheckBox = ({
+  selected = false,
+  onSelect = () => {},
+  checkedComponent = null,
+  checkedItemProp = {},
+  disabled = false,
+  label = "Option",
+  labelComponent = null,
+  labelProp = {},
+  labelPosition = "right",
+  checkboxContainerProp = {},
+  ...rest
+}) => {
+  return (
+    <Touchable
+      disabled={disabled}
+      onPress={onSelect}
+      opacity={disabled ? 0.5 : 1}
+      flexDirection="row"
+      alignItems="center"
+      {...rest}
+    >
+      {labelPosition === LABEL_POSITIONS[0] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ mr: 2, ...labelProp }}
+        />
+      ) : null}
+      <Container
+        borderColor="background.base"
+        borderWidth={1}
+        borderRadius={5}
+        justifyContent="center"
+        alignItems="center"
+        width={20}
+        height={20}
+        {...checkboxContainerProp}
+      >
+        {selected && (
+          <Container>
+            {checkedComponent || (
+              <Typography {...checkedItemProp}>✓</Typography>
+            )}
+          </Container>
+        )}
+      </Container>
+      {labelPosition === LABEL_POSITIONS[1] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ ml: 2, ...labelProp }}
+        />
+      ) : null}
+    </Touchable>
+  );
+};
+
+CheckBox.propTypes = {
+  /**
+   * Whether checkbox is selected.
+   */
+  selected: Proptypes.bool.isRequired,
+  /**
+   * Function to execute on press.
+   */
+  onSelect: Proptypes.func.isRequired,
+  /**
+   * To disable the component.
+   */
+  disabled: Proptypes.bool,
+  /**
+   * Render custom checked component.
+   */
+  checkedComponent: Proptypes.element,
+  /**
+   * Check mark style.
+   */
+  checkedItemProp: Proptypes.object,
+  /**
+   * Text label to be shown with radio button.
+   */
+  label: Proptypes.string,
+  /**
+   * Props for the label.
+   */
+  labelProp: Proptypes.object,
+  /**
+   * Label can passed as a component as well.
+   */
+  labelComponent: Proptypes.element,
+  /**
+   * Position of label relative to the radio button. It can be either `left` or `right`
+   */
+  labelPosition: Proptypes.oneOf(LABEL_POSITIONS),
+  /**
+   * Extra param to customize checkbox container
+   */
+  checkboxContainerProp: Proptypes.object,
+};
+
+LabelComponent.propTypes = {
+  label: Proptypes.string,
+  labelComponent: Proptypes.element,
+  labelProp: Proptypes.object,
+};

package/src/components/RadioButton.js

@@ -0,0 +1,174 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Container, Touchable, Typography } from "@components";
+const LABEL_POSITIONS = ["left", "right"];
+
+const LabelComponent = ({ label, labelComponent, labelProp }) => {
+  return labelComponent || <Typography {...labelProp}>{label}</Typography>;
+};
+
+/**
+ *
+ * This component supports below props categories from [styled-system ](/styled-system).
+ * <ul>
+ * <li>flexbox</li>
+ * <li>space</li>
+ * <li>border</li>
+ * <li>layout</li>
+ * <li>color</li>
+ * <li>buttonStyle</li>
+ * </ul>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from "react";
+ * import { Container, RadioButton } from "@bigbinary/neetoui-rn";
+ *
+ * export default function Main() {
+ *  const [selected, setSelected] = useState(false);
+ *
+ *   return (
+ *     <Container>
+ *      <RadioButton
+ *       selected={selected}
+ *       onSelect={() => setSelected(!selected)}
+ *       label="option label 1"
+ *       labelPosition="left"
+ *      />
+ *     </Container>
+ *   );
+ *  }
+ * ```
+ *
+ */
+
+export const RadioButton = ({
+  radioButtonWidth = 20,
+  radioButtonSelectedWidth = 10,
+  containerBg = "background.grey",
+  innerActiveBg = "background.base",
+  innerInActiveBg = "background.secondary",
+  onSelect = () => {},
+  selected = null,
+  density = 5,
+  label = "Option",
+  labelComponent = null,
+  labelProp = {},
+  labelPosition = "right",
+  disabled = false,
+  ...rest
+}) => {
+  return (
+    <Touchable
+      disabled={disabled}
+      opacity={disabled ? 0.5 : 1}
+      onPress={onSelect}
+      flexDirection="row"
+      alignItems="center"
+      py={1}
+      {...rest}
+    >
+      {labelPosition === LABEL_POSITIONS[0] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ mr: 2, ...labelProp }}
+        />
+      ) : null}
+      <Container
+        bg={containerBg}
+        height={radioButtonWidth}
+        width={radioButtonWidth}
+        borderRadius={radioButtonWidth / 2}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Container
+          height={radioButtonSelectedWidth + density}
+          width={radioButtonSelectedWidth + density}
+          borderRadius={(radioButtonSelectedWidth + density) / 2}
+          bg="background.white"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Container
+            bg={selected ? innerActiveBg : innerInActiveBg}
+            height={radioButtonSelectedWidth}
+            width={radioButtonSelectedWidth}
+            borderRadius={radioButtonSelectedWidth / 2}
+            m={1}
+          />
+        </Container>
+      </Container>
+      {labelPosition === LABEL_POSITIONS[1] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ ml: 2, ...labelProp }}
+        />
+      ) : null}
+    </Touchable>
+  );
+};
+
+RadioButton.propTypes = {
+  /**
+   * Function to execute on press.
+   */
+  onSelect: PropTypes.func.isRequired,
+  /**
+   * Whether radio is selected.
+   */
+  selected: PropTypes.any.isRequired,
+  /**
+   * Text label to be shown with radio button.
+   */
+  label: PropTypes.string,
+  /**
+   * Props for the label.
+   */
+  labelProp: PropTypes.object,
+  /**
+   * Label can passed as a component as well.
+   */
+  labelComponent: PropTypes.element,
+  /**
+   * Position of label relative to the radio button. It can be either `left` or `right`
+   */
+  labelPosition: PropTypes.oneOf(LABEL_POSITIONS),
+  /**
+   * Whether radio is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Size of radio button.
+   */
+  radioButtonWidth: PropTypes.number,
+  /**
+   * Size of radio button when selected.
+   */
+  radioButtonSelectedWidth: PropTypes.number,
+  /**
+   * Background color of radio button.
+   */
+  containerBg: PropTypes.string,
+  /**
+   * Color of radio button when selected.
+   */
+  innerActiveBg: PropTypes.string,
+  /**
+   * Color of radio button when not selected.
+   */
+  innerInActiveBg: PropTypes.string,
+  /**
+   * Thickness of radio button container component.
+   */
+  density: PropTypes.number,
+};
+
+LabelComponent.propTypes = {
+  label: PropTypes.string,
+  labelComponent: PropTypes.element,
+  labelProp: PropTypes.object,
+};

package/src/components/RichTextEditor.js

@@ -92,6 +92,15 @@ export const RichTextEditor = ({
   return (
     <>
       <ScrollView {...rest?.editorWrapperStyle}>
+        {showToolbar && (
+          <Container width="100%" {...rest?.toolbarWrapperStyle}>
+            <RichToolbar
+              editor={richTextRef}
+              actions={computeToolbarActions()}
+              {...toolBarProps}
+            />
+          </Container>
+        )}
         <RichEditor
           placeholder={placeholderText}
           ref={richTextRef}
@@ -110,20 +119,6 @@ export const RichTextEditor = ({
 
         {children}
       </ScrollView>
-      {showToolbar && (
-        <Container
-          bottom={keyboardHeight}
-          position="absolute"
-          width="100%"
-          {...rest?.toolbarWrapperStyle}
-        >
-          <RichToolbar
-            editor={richTextRef}
-            actions={computeToolbarActions()}
-            {...toolBarProps}
-          />
-        </Container>
-      )}
     </>
   );
 };

package/src/components/index.js

@@ -18,3 +18,5 @@ export { Popover } from "./Popover";
 export { Touchable } from "./Touchable";
 export { Card } from "./Card";
 export { TopBar } from "./TopBar";
+export { RadioButton } from "./RadioButton";
+export { CheckBox } from "./CheckBox";