@bigbinary/neetoui-rn 0.0.45 → 0.0.46

package/lib/components/Toast.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Toast=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 _reactNativeToastMessage=_interopRequireDefault(require("react-native-toast-message"));var _config=require("../config");var _excluded=["toasterConfig"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Toast.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 Toast=function Toast(_ref){var toasterConfig=_ref.toasterConfig,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);return React.createElement(_reactNativeToastMessage.default,(0,_extends2.default)({},rest,{config:(0,_extends2.default)({},_config.defaultToasterConfig,toasterConfig),__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:10}}));};exports.Toast=Toast;Toast.show=_reactNativeToastMessage.default.show;Toast.hide=_reactNativeToastMessage.default.hide;Toast.propTypes={toasterConfig:_propTypes.default.object};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});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,"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,"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");var _Badge=require("./Badge");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");
+Object.defineProperty(exports,"__esModule",{value:true});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,"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,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});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");var _Badge=require("./Badge");var _Toast=require("./Toast");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");

package/lib/config/index.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"defaultToasterConfig",{enumerable:true,get:function get(){return _toasterConfig.defaultToasterConfig;}});var _toasterConfig=require("./toasterConfig");

package/lib/config/toasterConfig.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.defaultToasterConfig=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _reactNativeToastMessage=_interopRequireWildcard(require("react-native-toast-message"));var _reactNative=require("react-native");var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _theme=require("../theme");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/config/toasterConfig.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 CloseButton=function CloseButton(){return _react.default.createElement(_reactNative.Pressable,{style:styles.closeButtonStyle,onPress:_reactNativeToastMessage.default.hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:10,columnNumber:5}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-fill",size:25,color:_theme.theme.colors.background.white,__self:_this,__source:{fileName:_jsxFileName,lineNumber:11,columnNumber:7}}));};var defaultToasterConfig={success:function success(props){return _react.default.createElement(_reactNativeToastMessage.BaseToast,(0,_extends2.default)({},props,{style:styles.successStyle,leadingIconContainerStyle:styles.toasterBGColor,renderTrailingIcon:function renderTrailingIcon(){return _react.default.createElement(CloseButton,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:26,columnNumber:33}});},contentContainerStyle:styles.contentContainerStyle,text1Style:styles.text1Style,text2Style:styles.text2Style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:5}}));},error:function error(props){return _react.default.createElement(_reactNativeToastMessage.BaseToast,(0,_extends2.default)({},props,{style:styles.errorStyle,leadingIconContainerStyle:styles.toasterBGColor,renderTrailingIcon:function renderTrailingIcon(){return _react.default.createElement(CloseButton,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:37,columnNumber:33}});},contentContainerStyle:styles.contentContainerStyle,text1Style:styles.text1Style,text2Style:styles.text2Style,__self:_this,__source:{fileName:_jsxFileName,lineNumber:33,columnNumber:5}}));}};exports.defaultToasterConfig=defaultToasterConfig;defaultToasterConfig.success.displayName="Success";defaultToasterConfig.error.displayName="Error";var styles=_reactNative.StyleSheet.create({successStyle:{borderLeftColor:_theme.theme.colors.toast.success,backgroundColor:_theme.theme.colors.background.grey800},errorStyle:{borderLeftColor:_theme.theme.colors.toast.error,backgroundColor:_theme.theme.colors.background.grey800},toasterBGColor:{backgroundColor:_theme.theme.colors.background.grey800},contentContainerStyle:{paddingHorizontal:15,backgroundColor:_theme.theme.colors.background.grey800},text1Style:{fontSize:15,fontFamily:_theme.theme.fonts.inter700,color:_theme.theme.colors.font.white},text2Style:{fontSize:16,fontFamily:_theme.theme.fonts.inter700,color:_theme.theme.colors.font.white},closeButtonStyle:{justifyContent:"center",alignItems:"center",paddingRight:10,backgroundColor:_theme.theme.colors.background.grey800,shadowColor:_theme.theme.colors.background.grey800,flexDirection:"row",borderTopRightRadius:6,borderBottomRightRadius:6,shadowOffset:{width:0,height:0},shadowOpacity:0.1,shadowRadius:6,elevation:2}});

package/lib/theme/index.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.theme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var defaultColors={white:"#ffffff",black:"#000000",base:"#2f3941",danger:"#ff6969",menubackground:"#f4f5f7"};var greyVarients={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey800:"#2f3941"};var colors={font:(0,_extends2.default)({primary:"#1b1f23",secondary:"#828282"},defaultColors,greyVarients),background:(0,_extends2.default)({primary:"#ffffff",secondary:"#e4e4e7"},defaultColors,greyVarients),border:(0,_extends2.default)({primary:"#e4e4e7"},greyVarients,defaultColors)};var baseTheme={colors:colors,fonts:{inter400:"Inter-Regular",inter700:"Inter-Bold"},lineHeights:[24],fontSizes:{xs:10,s:12,m:14,l:18,xl:24,xxl:32}};baseTheme.lineHeights.note=baseTheme.lineHeights[0]+"px";var theme=(0,_extends2.default)({},baseTheme,{textStyles:{defaultTextStyle:{color:baseTheme.colors.font.primary},header:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.l,fontFamily:baseTheme.fonts.inter700},body:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.m},subtext:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.s},solid:{color:baseTheme.colors.font.white},inverse:{color:baseTheme.colors.font.base},text:{color:baseTheme.colors.font.base}},buttons:{solid:{backgroundColor:baseTheme.colors.background.base},inverse:{border:2,borderColor:baseTheme.colors.border.base,backgroundColor:baseTheme.colors.background.white},text:{color:baseTheme.colors.font.grey800,backgroundColor:baseTheme.colors.background.white}}});exports.theme=theme;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.theme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var defaultColors={white:"#ffffff",black:"#000000",base:"#2f3941",danger:"#ff6969",menubackground:"#f4f5f7"};var toastBorderColors={success:"#69C779",error:"#FE6301"};var greyVarients={grey:"#828282",grey100:"#f8f9f9",grey200:"#e9ebed",grey300:"#d8dcde",grey400:"#c2c8cc",grey500:"#87929d",grey600:"#68737d",grey800:"#2f3941"};var colors={font:(0,_extends2.default)({primary:"#1b1f23",secondary:"#828282"},defaultColors,greyVarients),background:(0,_extends2.default)({primary:"#ffffff",secondary:"#e4e4e7"},defaultColors,greyVarients),border:(0,_extends2.default)({primary:"#e4e4e7"},greyVarients,defaultColors),toast:(0,_extends2.default)({},toastBorderColors)};var baseTheme={colors:colors,fonts:{inter400:"Inter-Regular",inter700:"Inter-Bold"},lineHeights:[24],fontSizes:{xs:10,s:12,m:14,l:18,xl:24,xxl:32}};baseTheme.lineHeights.note=baseTheme.lineHeights[0]+"px";var theme=(0,_extends2.default)({},baseTheme,{textStyles:{defaultTextStyle:{color:baseTheme.colors.font.primary},header:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.l,fontFamily:baseTheme.fonts.inter700},body:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.m},subtext:{color:baseTheme.colors.font.primary,fontSize:baseTheme.fontSizes.s},solid:{color:baseTheme.colors.font.white},inverse:{color:baseTheme.colors.font.base},text:{color:baseTheme.colors.font.base}},buttons:{solid:{backgroundColor:baseTheme.colors.background.base},inverse:{border:2,borderColor:baseTheme.colors.border.base,backgroundColor:baseTheme.colors.background.white},text:{color:baseTheme.colors.font.grey800,backgroundColor:baseTheme.colors.background.white}}});exports.theme=theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -52,6 +52,7 @@
     "react-native-modal": "^13.0.0",
     "react-native-remix-icon": "^0.3.0",
     "react-native-switch-toggle": "^2.2.1",
+    "react-native-toast-message": "^2.1.0",
     "styled-components": "^5.3.3",
     "styled-system": "^5.1.5"
   },

package/src/components/Toast.js

@@ -0,0 +1,59 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import T from "react-native-toast-message";
+import { defaultToasterConfig } from "@config";
+
+/**
+ * Toast component is a wrapper over https://github.com/calintamas/react-native-toast-message.
+ *
+ *  ## Usage
+ * ```js
+ *import { Toast } from "@bigbinary/neetoui-rn";
+ *
+ *export function App(props) {
+ *  return (
+ *    <>
+ *      // Render at root component.
+ *      <Toast />
+ *    </>
+ *  );
+ *}
+ *
+ *
+ *import * as React from "react";
+ *import { Toast, Container, Button } from "@bigbinary/neetoui-rn";
+ *
+ *export default function Main() {
+ *  return (
+ *    <Container>
+ *      <Button
+ *        label="Error Test"
+ *        onPress={() => {
+ *          Toast.show({
+ *            type: "error",
+ *            position: "bottom",
+ *            text1: "Yay!",
+ *            text2: "Have a nice day! 😄",
+ *          });
+ *        }}
+ *      />
+ *    </Container>
+ *  );
+ *}
+ * ```
+ * @extends StyledSystems props /styled-system
+ */
+
+export const Toast = ({ toasterConfig, ...rest }) => {
+  return <T {...rest} config={{ ...defaultToasterConfig, ...toasterConfig }} />;
+};
+
+Toast.show = T.show;
+Toast.hide = T.hide;
+
+Toast.propTypes = {
+  /**
+   * configuration
+   */
+  toasterConfig: PropTypes.object,
+};

package/src/components/index.js

@@ -6,5 +6,6 @@ export { FAB } from "./FAB";
 export { ToggleSwitch } from "./ToggleSwitch";
 export { Avatar } from "./Avatar";
 export { Badge } from "./Badge";
+export { Toast } from "./Toast";
 export { BottomSheet } from "./BottomSheet";
 export { Chip } from "./Chip";

package/src/config/index.js

@@ -0,0 +1 @@
+export { defaultToasterConfig } from "./toasterConfig";

package/src/config/toasterConfig.js

@@ -0,0 +1,86 @@
+import React from "react";
+import Toast, { BaseToast } from "react-native-toast-message";
+import { Pressable, StyleSheet } from "react-native";
+import Icon from "react-native-remix-icon";
+
+import { theme } from "@theme";
+
+const CloseButton = () => {
+  return (
+    <Pressable style={styles.closeButtonStyle} onPress={Toast.hide}>
+      <Icon
+        name="ri-close-fill"
+        size={25}
+        color={theme.colors.background.white}
+      />
+    </Pressable>
+  );
+};
+
+export const defaultToasterConfig = {
+  success: props => (
+    <BaseToast
+      {...props}
+      style={styles.successStyle}
+      leadingIconContainerStyle={styles.toasterBGColor}
+      renderTrailingIcon={() => <CloseButton />}
+      contentContainerStyle={styles.contentContainerStyle}
+      text1Style={styles.text1Style}
+      text2Style={styles.text2Style}
+    />
+  ),
+  error: props => (
+    <BaseToast
+      {...props}
+      style={styles.errorStyle}
+      leadingIconContainerStyle={styles.toasterBGColor}
+      renderTrailingIcon={() => <CloseButton />}
+      contentContainerStyle={styles.contentContainerStyle}
+      text1Style={styles.text1Style}
+      text2Style={styles.text2Style}
+    />
+  ),
+};
+
+defaultToasterConfig.success.displayName = "Success";
+defaultToasterConfig.error.displayName = "Error";
+
+const styles = StyleSheet.create({
+  successStyle: {
+    borderLeftColor: theme.colors.toast.success,
+    backgroundColor: theme.colors.background.grey800,
+  },
+  errorStyle: {
+    borderLeftColor: theme.colors.toast.error,
+    backgroundColor: theme.colors.background.grey800,
+  },
+  toasterBGColor: { backgroundColor: theme.colors.background.grey800 },
+  contentContainerStyle: {
+    paddingHorizontal: 15,
+    backgroundColor: theme.colors.background.grey800,
+  },
+  text1Style: {
+    fontSize: 15,
+    fontFamily: theme.fonts.inter700,
+    color: theme.colors.font.white,
+  },
+  text2Style: {
+    fontSize: 16,
+    fontFamily: theme.fonts.inter700,
+    color: theme.colors.font.white,
+  },
+  closeButtonStyle: {
+    justifyContent: "center",
+    alignItems: "center",
+    paddingRight: 10,
+    backgroundColor: theme.colors.background.grey800,
+    shadowColor: theme.colors.background.grey800,
+    flexDirection: "row",
+    borderTopRightRadius: 6,
+    borderBottomRightRadius: 6,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    elevation: 2,
+  },
+});

package/src/theme/index.js

@@ -6,6 +6,11 @@ const defaultColors = {
   menubackground: "#f4f5f7",
 };
 
+const toastBorderColors = {
+  success: "#69C779",
+  error: "#FE6301",
+};
+
 const greyVarients = {
   grey: "#828282",
   grey100: "#f8f9f9",
@@ -35,6 +40,9 @@ const colors = {
     ...greyVarients,
     ...defaultColors,
   },
+  toast: {
+    ...toastBorderColors,
+  },
 };
 
 const baseTheme = {