@app-studio/web 0.3.7 → 0.3.12

package/dist/web.esm.js

@@ -1,6 +1,5 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { View, Element, Typography, useTheme, Input } from 'app-studio';
-export { View } from 'app-studio';
+import React, { useState, useRef, useEffect, useMemo, useCallback, Fragment } from 'react';
+import { View as View$1, Element, Typography, useTheme, Input, Image } from 'app-studio';
 import { Link as Link$1 } from 'react-router-dom';
 import format from 'date-fns/format';
 import { create } from 'zustand';
@@ -52,6 +51,34 @@ var useLinkState = function useLinkState() {
   };
 };
 
+var Top = function Top(props) {
+  return React.createElement(View$1, Object.assign({
+    marginBottom: "auto"
+  }, props));
+};
+var Bottom = function Bottom(props) {
+  return React.createElement(View$1, Object.assign({
+    marginTop: "auto"
+  }, props));
+};
+var Left = function Left(props) {
+  return React.createElement(View$1, Object.assign({
+    marginRight: "auto"
+  }, props));
+};
+var Right = function Right(props) {
+  return React.createElement(View$1, Object.assign({
+    marginLeft: "auto"
+  }, props));
+};
+var Inline = function Inline(props) {
+  return React.createElement(View$1, Object.assign({
+    display: 'inline-flex',
+    wordBreak: "break-word"
+  }, props));
+};
+var View = View$1;
+
 var _excluded = ["children", "wrap", "justify", "isReversed"];
 var HorizontalView = function HorizontalView(_ref) {
   var children = _ref.children,
@@ -2306,7 +2333,7 @@ var VerticalView = function VerticalView(_ref) {
     _ref$isReversed = _ref.isReversed,
     isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-  return React.createElement(View, Object.assign({
+  return React.createElement(View$1, Object.assign({
     display: "flex",
     flexWrap: wrap,
     flexDirection: isReversed ? 'column-reverse' : 'column',
@@ -2442,21 +2469,19 @@ var TextComponent = function TextComponent(props) {
  */
 var Text = TextComponent;
 
-var _excluded$e = ["children", "styles", "error"];
+var _excluded$e = ["children", "styles"];
 var HelperText = function HelperText(_ref) {
   var children = _ref.children,
     _ref$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {
       helperText: {}
     } : _ref$styles,
-    _ref$error = _ref.error,
-    error = _ref$error === void 0 ? false : _ref$error,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return React.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
     marginHorizontal: 0,
-    color: error ? 'theme.error' : 'theme.text.dark'
+    color: 'theme.text.dark'
   }, styles['helperText'], props), children);
 };
 
@@ -2471,9 +2496,12 @@ var FieldContainer = function FieldContainer(_ref) {
   return React.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
-  }, props), children, helperText && React.createElement(HelperText, Object.assign({
-    error: error
-  }, styles), helperText));
+  }, props), children, !error && helperText && React.createElement(HelperText, Object.assign({}, styles), helperText), error && React.createElement(Text, {
+    size: "xs",
+    marginVertical: 0,
+    marginHorizontal: 0,
+    color: 'theme.error'
+  }, error));
 };
 
 var Shapes = {
@@ -2564,7 +2592,7 @@ var FieldContent = function FieldContent(_ref) {
     borderStyle: "solid",
     alignItems: "center",
     borderColor: color,
-    backgroundColor: "trueGray.50",
+    backgroundColor: "color.trueGray.50",
     transition: "padding 0.2s ease",
     justifyContent: "space-between",
     fontSize: Typography.fontSizes[size],
@@ -2989,7 +3017,7 @@ var DatePickerView = function DatePickerView(_ref) {
     },
     fontSize: Typography.fontSizes[size],
     backgroundColor: 'transparent',
-    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
   }, styles['field']);
   return React.createElement(FieldContainer, {
@@ -3397,7 +3425,7 @@ var SelectBox = function SelectBox(_ref2) {
     paddingHorizontal: 0,
     fontSize: Typography.fontSizes[size],
     backgroundColor: 'transparent',
-    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : 'auto'
   }, styles['field'], styles['text']);
   return React.createElement(Text, Object.assign({}, fieldStyles), (selected === '' || selected && selected.length === 0) && !!placeholder ? placeholder : React.createElement(React.Fragment, null, typeof selected === 'string' ? selected : selected && selected.length > 0 && React.createElement(Horizontal, {
@@ -3515,7 +3543,7 @@ var MultiSelect = function MultiSelect(_ref5) {
     borderRadius: 4,
     alignItems: "center",
     fontSize: Typography.fontSizes[size],
-    backgroundColor: "trueGray.300",
+    backgroundColor: "color.trueGray.300",
     onClick: function onClick(event) {
       return event.stopPropagation();
     }
@@ -4012,7 +4040,7 @@ var TextAreaView = function TextAreaView(_ref) {
     },
     fontSize: Typography.fontSizes[size],
     backgroundColor: 'transparent',
-    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : 'auto'
   }, styles['field']);
   var handleHover = function handleHover() {
@@ -4297,31 +4325,43 @@ var Loader = LoaderComponent;
 
 var useModalStore = /*#__PURE__*/create(function (set) {
   return {
-    isOpen: false,
-    onClose: function onClose() {},
-    toggleModal: function toggleModal() {
-      return set(function (state) {
-        return {
-          isOpen: !state.isOpen
-        };
-      });
+    modal: false,
+    modalProps: {
+      isVisible: false
     },
-    setOpen: function setOpen(isOpen) {
-      return set(function () {
-        return {
-          isOpen: isOpen
-        };
+    overlayProps: {},
+    show: function show(modal, modalProps, overlayProps) {
+      if (modalProps === void 0) {
+        modalProps = {};
+      }
+      if (overlayProps === void 0) {
+        overlayProps = {};
+      }
+      if (modal) {
+        modalProps.isVisible = true;
+      }
+      set(function (state) {
+        return _extends({}, state, {
+          modal: modal,
+          modalProps: modalProps,
+          overlayProps: overlayProps
+        });
       });
     },
-    setOnClose: function setOnClose(onClose) {
-      return set(function () {
-        return {
-          onClose: onClose
-        };
+    hide: function hide() {
+      set(function (state) {
+        return _extends({}, state, {
+          modalProps: {
+            isVisible: false
+          }
+        });
       });
     }
   };
 });
+var hideModal = function hideModal() {
+  useModalStore.getState().hide();
+};
 
 var ContainerShapes = {
   sharp: {
@@ -4376,17 +4416,6 @@ var ModalOverlay = function ModalOverlay(_ref) {
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'center' : _ref$position,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
-  var setOpen = useModalStore(function (state) {
-    return state.setOpen;
-  });
-  var setOnClose = useModalStore(function (state) {
-    return state.setOnClose;
-  });
-  useEffect(function () {
-    setOnClose(onClose);
-    if (isOpen) setOpen();
-  });
-  if (!isOpen) return null;
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4454,9 +4483,7 @@ var ModalHeader = function ModalHeader(_ref3) {
     _ref3$buttonPosition = _ref3.buttonPosition,
     buttonPosition = _ref3$buttonPosition === void 0 ? 'right' : _ref3$buttonPosition,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
-  var onClose = useModalStore(function (state) {
-    return state.onClose;
-  });
+  var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = React.createElement(Button, {
     onClick: onClose,
     colorScheme: "transparent",
@@ -4503,6 +4530,33 @@ var ModalFooter = function ModalFooter(_ref5) {
   }, props), children);
 };
 
+var ModalLayout = function ModalLayout(_ref) {
+  var modals = _ref.modals;
+  var modalStore = useModalStore(function (_ref2) {
+    var modal = _ref2.modal,
+      modalProps = _ref2.modalProps,
+      overlayProps = _ref2.overlayProps;
+    return {
+      modal: modal,
+      modalProps: modalProps,
+      overlayProps: overlayProps
+    };
+  });
+  if (typeof modalStore.modal === 'boolean') {
+    return null;
+  }
+  var Modal = modals[modalStore.modal];
+  if (!Modal) {
+    console.error(modalStore.modal + " modal doesn't exist");
+    return null;
+  }
+  return React.createElement(Fragment, null, React.createElement(ModalOverlay, Object.assign({
+    isOpen: modalStore.modalProps.isVisible,
+    onClose: hideModal,
+    blur: 10
+  }, modalStore.overlayProps), Modal !== undefined && React.createElement(Modal, Object.assign({}, modalStore.modalProps))));
+};
+
 /**
  * It is a custom content overlay that appears on top of the main screen.
  */
@@ -4516,6 +4570,33 @@ Modal.Container = ModalContainer;
 Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
+Modal.Layout = ModalLayout;
+
+var _excluded$t = ["src", "color"],
+  _excluded2$3 = ["path"];
+var FileSVG = function FileSVG(_ref) {
+  var src = _ref.src,
+    color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+  var _useTheme = useTheme(),
+    getColor = _useTheme.getColor;
+  var Colorprops = color ? {
+    fill: getColor(color),
+    stroke: getColor(color)
+  } : {};
+  return React.createElement(Center, Object.assign({}, props), React.createElement(Image, Object.assign({}, Colorprops, {
+    content: 'url("' + src + '")',
+    width: "100%",
+    height: "100%"
+  })));
+};
+var FileImage = function FileImage(_ref2) {
+  var path = _ref2.path,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+  return React.createElement(Image, Object.assign({
+    src: path
+  }, props));
+};
 
-export { Button, Center, Checkbox, CountryPicker, DatePicker, Horizontal, Link, Loader, Modal, Password, Select, Switch, Text, TextArea, TextField, Vertical };
+export { Bottom, Button, Center, Checkbox, CountryPicker, DatePicker, FileImage, FileSVG, Horizontal, Inline, Left, Link, Loader, Modal, Password, Right, Select, Switch, Text, TextArea, TextField, Top, Vertical, View };
 //# sourceMappingURL=web.esm.js.map