@dropi/react-native-design-system 0.2.9 → 0.2.10

package/lib/molecules/Tags/DefaultTag/DefaultTag.d.ts

@@ -0,0 +1,11 @@
+import { IconName } from 'dropi-lib-icons';
+type TagType = 'primary' | 'secondary';
+type TagState = 'default' | 'success' | 'info' | 'warning' | 'red' | 'neutral';
+interface Props {
+    type: TagType;
+    label: string;
+    state?: TagState;
+    icon?: IconName;
+}
+export declare const DefaultTag: ({ type, label, state, icon }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/Tags/DefaultTag/DefaultTag.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultTag = void 0;
+var _reactNative = require("react-native");
+var _constants = require("../../../constants");
+var _atoms = require("../../../atoms");
+var _reactNative2 = _interopRequireDefault(require("dropi-lib-icons/react-native"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TAG_BACKGROUND_COLORS = {
+  primary: {
+    default: _constants.colors['Primary-500'].light,
+    success: _constants.colors['Success-500'].light,
+    info: _constants.colors['Info-500'].light,
+    warning: _constants.colors['Warning-500'].light,
+    red: _constants.colors['Error-500'].light,
+    neutral: _constants.colors['Gray-500'].light
+  },
+  secondary: {
+    default: _constants.colors['Primary-100'].light,
+    success: _constants.colors['Success-50'].light,
+    info: _constants.colors['Info-50'].light,
+    warning: _constants.colors['Warning-50'].light,
+    red: _constants.colors['Error-50'].light,
+    neutral: _constants.colors['Gray-50'].light
+  }
+};
+const getBackgroundColor = (type, state) => {
+  return TAG_BACKGROUND_COLORS[type][state];
+};
+const DefaultTag = ({
+  type,
+  label,
+  state = 'default',
+  icon
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: getBackgroundColor(type, state)
+    }],
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative2.default, {
+      name: icon,
+      size: _constants.sizes.s,
+      color: type === 'primary' ? _constants.colors['White'].light : getBackgroundColor('primary', state),
+      style: {
+        marginRight: 4
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_atoms.Body, {
+      numberOfLines: 1,
+      type: "s-medium",
+      style: {
+        color: type === 'primary' ? _constants.colors['White'].light : getBackgroundColor('primary', state)
+      },
+      children: [" ", label, " "]
+    })]
+  });
+};
+exports.DefaultTag = DefaultTag;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: _constants.radius["border-5"],
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    maxWidth: 160,
+    alignSelf: 'flex-start'
+  }
+});

package/lib/molecules/Tags/DefaultTag/index.d.ts

@@ -0,0 +1 @@
+export * from './DefaultTag';

package/lib/molecules/Tags/DefaultTag/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _DefaultTag = require("./DefaultTag");
+Object.keys(_DefaultTag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DefaultTag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DefaultTag[key];
+    }
+  });
+});

package/lib/molecules/Tags/OrderTag/OrderTag.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    status: string;
+    limitedWidth?: boolean;
+}
+export declare const OrderTag: ({ status, limitedWidth }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/Tags/OrderTag/OrderTag.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OrderTag = void 0;
+var _reactNative = require("react-native");
+var _constants = require("../../../constants");
+var _atoms = require("../../../atoms");
+var _jsxRuntime = require("react/jsx-runtime");
+const STATUS_BACKGROUND_COLORS = {
+  'ENTREGADO': _constants.colors['Success-700'].light,
+  'EN TRANSITO': _constants.colors['Success-600'].light,
+  'GUIA_GENERADA': _constants.colors['Info-500'].light,
+  'RECOGIDO POR DROPI': _constants.colors['Info-700'].light,
+  'ENTREGADO A TRANSPORTADORA': _constants.colors['Success-400'].light,
+  'PENDIENTE': _constants.colors['Warning-600'].light,
+  'PENDIENTE CONFIRMACION': _constants.colors['Warning-500'].light,
+  'NOVEDAD': _constants.colors['Error-600'].light,
+  'DEVOLUCION': _constants.colors['Error-800'].light,
+  'CANCELADO': _constants.colors['Gray-400'].light
+};
+const getBackgroundColor = status => {
+  return STATUS_BACKGROUND_COLORS[status] || _constants.colors.Black.light;
+};
+const OrderTag = ({
+  status,
+  limitedWidth = false
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.orderStatusTag, {
+      backgroundColor: getBackgroundColor(status),
+      maxWidth: limitedWidth ? 112 : '100%'
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_atoms.Body, {
+      type: "xs-medium",
+      numberOfLines: 1,
+      style: styles.statusText,
+      children: status
+    })
+  });
+};
+exports.OrderTag = OrderTag;
+const styles = _reactNative.StyleSheet.create({
+  orderStatusTag: {
+    maxWidth: 112,
+    borderRadius: _constants.radius["border-5"],
+    paddingHorizontal: _constants.spacing['size-2'],
+    paddingVertical: _constants.spacing['size-1'],
+    alignSelf: 'flex-start'
+  },
+  statusText: {
+    color: _constants.colors.White.light,
+    textAlign: 'center'
+  }
+});

package/lib/molecules/Tags/OrderTag/index.d.ts

@@ -0,0 +1 @@
+export * from './OrderTag';

package/lib/molecules/Tags/OrderTag/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _OrderTag = require("./OrderTag");
+Object.keys(_OrderTag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _OrderTag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _OrderTag[key];
+    }
+  });
+});

package/lib/molecules/Tags/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DefaultTag';
+export * from './OrderTag';

package/lib/molecules/Tags/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _DefaultTag = require("./DefaultTag");
+Object.keys(_DefaultTag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DefaultTag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DefaultTag[key];
+    }
+  });
+});
+var _OrderTag = require("./OrderTag");
+Object.keys(_OrderTag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _OrderTag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _OrderTag[key];
+    }
+  });
+});

package/lib/molecules/Toasts/FeedbackToast/FeedbackToast.js

@@ -81,7 +81,8 @@ const FeedbackToast = exports.FeedbackToast = /*#__PURE__*/(0, _react.forwardRef
       style: {
         flexDirection: 'row',
         flex: 1,
-        paddingVertical: _constants.spacing['size-4']
+        paddingVertical: _constants.spacing['size-4'],
+        justifyContent: 'space-between'
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: {

package/lib/molecules/index.d.ts

@@ -4,3 +4,4 @@ export * from './RadioButtons';
 export * from './Search';
 export * from './Tooltip';
 export * from './Toasts';
+export * from './Tags';

package/lib/molecules/index.js

@@ -68,4 +68,15 @@ Object.keys(_Toasts).forEach(function (key) {
       return _Toasts[key];
     }
   });
+});
+var _Tags = require("./Tags");
+Object.keys(_Tags).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tags[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tags[key];
+    }
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",