techsbcn-storybook 0.13.4 → 0.14.2

package/dist/components/fields/SelectFieldComponent/SelectAsyncField.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SearchFilters } from '../../../interfaces';
 import './SelectField.scss';
+declare type MenuPlacement = 'bottom' | 'auto' | 'top';
 interface SelectAsyncFieldProps {
     name: string;
     placeholder?: string;
@@ -18,6 +19,7 @@ interface SelectAsyncFieldProps {
     filters?: any;
     inputRef?: React.Ref<any>;
     label?: string;
+    menuPlacement?: MenuPlacement;
 }
 export declare const SelectAsyncField: React.FunctionComponent<SelectAsyncFieldProps>;
 export {};

package/dist/components/fields/SelectFieldComponent/SelectField.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import './SelectField.scss';
+declare type MenuPlacement = 'bottom' | 'auto' | 'top';
 interface SelectFieldProps {
     name: string;
     placeholder?: string;
@@ -16,6 +17,8 @@ interface SelectFieldProps {
     isSearchable?: boolean;
     inputRef?: React.Ref<any>;
     label?: string;
+    menuPlacement?: MenuPlacement;
+    isLoading?: boolean;
 }
 export declare const SelectField: React.FunctionComponent<SelectFieldProps>;
 export {};

package/dist/components/fields/TextFieldComponent/TextFieldComponent.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './TextFieldComponent.scss';
 export declare type InputType = 'text' | 'radio' | 'checkbox' | 'textarea' | 'submit' | 'date' | 'hidden' | 'number' | 'range' | 'password' | 'time' | 'file';
-interface TextFieldComponentProps {
+export interface TextFieldComponentProps {
     id?: string;
     label?: string;
     name?: string;
@@ -31,4 +31,3 @@ interface TextFieldComponentProps {
     noBorders?: boolean;
 }
 export declare const TextFieldComponent: React.FC<TextFieldComponentProps>;
-export {};

package/dist/components/fields/TextSimpleComponent/TextSimpleComponent.d.ts

@@ -11,6 +11,7 @@ interface TextSimpleComponentProps {
     noBorders?: boolean;
     fullWidth?: boolean;
     noMargin?: boolean;
+    isLoading?: boolean;
 }
 export declare const TextSimpleComponent: React.FC<TextSimpleComponentProps>;
 export {};

package/dist/components/forms/ChangePasswordForm.d.ts

@@ -6,6 +6,7 @@ interface ChangePasswordFormProps {
     bottomComponent?: React.ReactNode;
     requiredText: {
         requiredTextPassword: string;
+        requiredPasswordPolices: string;
         requiredTextSamePassword: string;
     };
     valuesText: {

package/dist/components/tables/ImageTableComponent/ImageTableComponent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ImageTableComponentProps {
+    readFile: (guid: string) => Promise<any>;
+    guid: string;
+    convertImage?: (result: any) => string;
+}
+declare const ImageTableComponent: React.FC<ImageTableComponentProps>;
+export default ImageTableComponent;

package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ObjectKey } from '../../../interfaces';
 import './SimpleTableComponent.scss';
-import { InputType } from '../../fields/TextFieldComponent/TextFieldComponent';
+import { TextFieldComponentProps } from '../../fields/TextFieldComponent/TextFieldComponent';
 interface SimpleTableComponentProps {
     rows: any[];
     values: ObjectKey;
@@ -42,8 +42,8 @@ interface ColumnProps {
     isImage?: {
         isUrl?: boolean;
         isGuid?: {
-            guid: boolean;
-            action: (guid: string) => string;
+            readFile: (guid: string) => Promise<any>;
+            convertImage?: (content: any) => string;
         };
     };
     isActiveFunction?: {
@@ -65,7 +65,7 @@ interface ActionProps {
 }
 interface EditableCellProps {
     isTextField?: {
-        type?: InputType;
+        textFieldProps?: TextFieldComponentProps;
         onCellValueChange: (data: any) => void;
     };
     isSelectField?: {

package/dist/components/tables/TableComponent/TableComponent.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SearchFilters, ObjectKey } from '../../../interfaces';
 import './TableComponent.scss';
-import { InputType } from '../../fields/TextFieldComponent/TextFieldComponent';
+import { TextFieldComponentProps } from '../../fields/TextFieldComponent/TextFieldComponent';
 interface TableComponentProps {
     rows: any[];
     values: ObjectKey;
@@ -44,8 +44,8 @@ interface ColumnProps {
     isImage?: {
         isUrl?: boolean;
         isGuid?: {
-            guid: boolean;
-            action: (guid: string) => string;
+            readFile: (guid: string) => Promise<any>;
+            convertImage?: (content: any) => string;
         };
     };
     isActiveFunction?: {
@@ -67,7 +67,7 @@ interface ActionProps {
 }
 interface EditableCellProps {
     isTextField?: {
-        type?: InputType;
+        textFieldProps?: TextFieldComponentProps;
         onCellValueChange: (data: any) => void;
     };
     isSelectField?: {

package/dist/data/_globalization/es.d.ts

@@ -49,6 +49,7 @@ declare var _default: {
     requiredMail: string;
     requiredPassword: string;
     requiredSamePassword: string;
+    requiredPasswordPolices: string;
     UserAlreadyExistsException: string;
     EntityDoesNotExistException: string;
     NotAuthorizedException: string;

package/dist/helpers/FileDownloader.d.ts

@@ -0,0 +1,5 @@
+export declare const downloadFileBlob: (binaryString: any) => void;
+export declare const redirectDownload: (url: any, fileName: string) => void;
+export declare const getImageByBlob: (binaryString: any) => string;
+export declare const getImageByBase64: (content: string) => string;
+export declare const toBase64: (file: Blob) => Promise<string>;

package/dist/helpers/index.d.ts

@@ -1,2 +1,3 @@
 export * from './CheckPermission';
 export * from './GroupBy';
+export * from './FileDownloader';

package/dist/techsbcn-storybook.cjs.development.js

@@ -259,10 +259,12 @@ var css_248z$3 = ".main-wrapper-component {\n  background-color: white;\n  box-s
 styleInject(css_248z$3);
 
 var MainWrapperComponent = function MainWrapperComponent(props) {
-  return React__default.createElement(React__default.Fragment, null, props.loadingProgressBar && React__default.createElement(LinearProgressComponent, null), React__default.createElement(_.Box, {
+  return React__default.createElement(_.Box, {
     className: "main-wrapper-component",
     height: "100%"
   }, React__default.createElement(_.Box, {
+    height: "4px"
+  }, props.loadingProgressBar && React__default.createElement(LinearProgressComponent, null)), React__default.createElement(_.Box, {
     py: 2
   }, props.loading ? React__default.createElement(_.Box, {
     display: "flex",
@@ -287,7 +289,7 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
     px: 2
   }, React__default.createElement(_.CircularProgress, {
     className: "circular-progress-main-color"
-  })) : React__default.createElement(React__default.Fragment, null)))));
+  })) : React__default.createElement(React__default.Fragment, null))));
 };
 
 var css_248z$4 = ".table-component .paper-container {\n  box-shadow: none;\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root {\n  padding: 0 !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .Mui-checked {\n  color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n  color: #212529 !important;\n}\n.table-component .paper-container .table-container {\n  max-height: 68vh;\n  border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container .table-column:last-child {\n  border-right: none !important;\n  border-radius: 0 5px 5px 0;\n}\n.table-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: 1rem !important;\n  padding: 10px !important;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 2px solid #e0e0e0;\n}\n.table-component .paper-container .table-container .table-column .table-header-cell {\n  color: black;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-component .paper-container .table-container .table-rows.row-click {\n  cursor: pointer;\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows .Mui-selected {\n  background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n  padding: 6px !important;\n  overflow: hidden;\n}\n.table-component .paper-container .table-container .table-rows .img-table {\n  width: 100%;\n  height: 110px;\n}\n.table-component .paper-container .table-container .table-rows .img-table img {\n  object-fit: contain;\n}\n.table-component .paper-container .table-container .table-rows .actions {\n  float: right;\n}\n.table-component .paper-container .table-container .table-rows .btn-action {\n  color: rgba(0, 0, 0, 0.54);\n  display: inline-block;\n  text-decoration: none;\n  font-size: 1.6em !important;\n  padding: 0px 7px;\n  cursor: pointer;\n}\n.table-component .paper-container .MuiTable-root.loading {\n  opacity: 0.5;\n}\n.table-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n  width: 80px !important;\n  height: 80px !important;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 5px;\n  margin: auto;\n  color: grey;\n}\n.table-component .paper-container .MuiTablePagination-root {\n  overflow: unset;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiToolbar-root {\n  justify-content: center !important;\n  flex-wrap: wrap;\n  padding: 0px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiTablePagination-spacer {\n  flex: 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page {\n  border-radius: 0px;\n  margin: 1px;\n  color: white !important;\n  background-color: #3f4d67;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page.Mui-selected {\n  background-color: #3299C7;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li button {\n  padding: 14px;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-child(2) .MuiPaginationItem-page {\n  border-radius: 5px 0 0 5px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-last-child(2) .MuiPaginationItem-page {\n  border-radius: 0 5px 5px 0 !important;\n}\n@media (max-width: 992px) {\n  .table-component .paper-container .table-container {\n    max-height: 60vh;\n    border-top: 1px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .MuiTable-root {\n    border-collapse: collapse !important;\n  }\n  .table-component .paper-container .table-container .MuiTableHead-root {\n    display: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows {\n    border-bottom: 2px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n    width: auto;\n    border-bottom: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n    font-size: 1rem;\n    vertical-align: top;\n    width: 50%;\n    height: auto;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n    display: inline-block;\n  }\n  .table-component .paper-container .table-container .table-rows .table-cell {\n    display: block !important;\n  }\n  .table-component .paper-container .table-container .table-rows .format-value {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 50%;\n    max-width: 299px;\n  }\n}";
@@ -361,6 +363,36 @@ TextFieldComponent.defaultProps = {
   type: 'text'
 };
 
+var ImageTableComponent = function ImageTableComponent(props) {
+  var _useState = React.useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
+
+  var _useState2 = React.useState(),
+      image = _useState2[0],
+      setImage = _useState2[1];
+
+  React.useEffect(function () {
+    setLoading(true);
+    props.readFile(props.guid).then(function (result) {
+      setImage(props.convertImage ? props.convertImage(result) : result);
+      setLoading(false);
+    });
+  }, [props]);
+  return React__default.createElement(material.Box, {
+    className: "images-table-component"
+  }, loading ? React__default.createElement(material.Box, {
+    textAlign: "center"
+  }, React__default.createElement(material.CircularProgress, {
+    className: "main-color"
+  })) : React__default.createElement(material.Avatar, {
+    alt: "-",
+    src: image,
+    className: "img-table",
+    variant: "square"
+  }));
+};
+
 var TableComponent = function TableComponent(props) {
   var _props$isCheckTable7, _props$isCheckTable8, _props$isCheckTable9;
 
@@ -489,6 +521,12 @@ var TableComponent = function TableComponent(props) {
           className: "img-table",
           variant: "square"
         });
+      } else if (column.isImage.isGuid) {
+        return React__default.createElement(ImageTableComponent, {
+          guid: value,
+          readFile: column.isImage.isGuid.readFile,
+          convertImage: column.isImage.isGuid.convertImage
+        });
       }
     }
 
@@ -557,12 +595,11 @@ var TableComponent = function TableComponent(props) {
         setUpdate();
       };
 
-      return React__default.createElement(TextFieldComponent, {
-        type: editableCell.isTextField.type,
+      return React__default.createElement(TextFieldComponent, Object.assign({}, editableCell.isTextField.textFieldProps, {
         onChange: handleTextFieldChange,
         name: fieldName,
         defaultValue: value
-      });
+      }));
     } else {
       return value;
     }
@@ -865,6 +902,12 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
           className: "img-table",
           variant: "square"
         });
+      } else if (column.isImage.isGuid) {
+        return React__default.createElement(ImageTableComponent, {
+          guid: value,
+          readFile: column.isImage.isGuid.readFile,
+          convertImage: column.isImage.isGuid.convertImage
+        });
       }
     }
 
@@ -933,12 +976,11 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
         setUpdate();
       };
 
-      return React__default.createElement(TextFieldComponent, {
-        type: editableCell.isTextField.type,
+      return React__default.createElement(TextFieldComponent, Object.assign({}, editableCell.isTextField.textFieldProps, {
         onChange: handleTextFieldChange,
         name: fieldName,
         defaultValue: value
-      });
+      }));
     } else {
       return value;
     }
@@ -1479,7 +1521,10 @@ var TextSimpleComponent = function TextSimpleComponent(props) {
     width: "" + (props.fullWidth ? 'auto' : 'fit-content')
   }, props.startIcon && React__default.createElement(_.Box, {
     mr: 1
-  }, props.startIcon), props.value, props.endIcon && React__default.createElement(_.Box, {
+  }, props.startIcon), props.isLoading ? React__default.createElement(_.CircularProgress, {
+    className: "circular-progress-main-color",
+    size: 20
+  }) : props.value, props.endIcon && React__default.createElement(_.Box, {
     ml: "" + (props.fullWidth ? 'auto' : 1)
   }, props.endIcon)), props.helperText && React__default.createElement(_.Box, {
     className: "helper-text " + (props.error ? 'has-error' : '')
@@ -1516,13 +1561,16 @@ var SelectField = function SelectField(props) {
     ref: props.inputRef,
     isDisabled: props.disabled,
     isClearable: props.isClearable,
-    isSearchable: props.isSearchable
+    isSearchable: props.isSearchable,
+    isLoading: props.isLoading,
+    menuPlacement: props.menuPlacement
   }), props.helperText && React__default.createElement("div", {
     className: "helper-text " + (props.invalid ? 'has-error' : '')
   }, props.helperText));
 };
 SelectField.defaultProps = {
-  isClearable: true
+  isClearable: true,
+  menuPlacement: 'auto'
 };
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -2409,13 +2457,15 @@ var SelectAsyncField = function SelectAsyncField(props) {
     selectRef: props.inputRef,
     isDisabled: props.disabled,
     isClearable: props.isClearable,
-    loadOptions: loadOptions
+    loadOptions: loadOptions,
+    menuPlacement: props.menuPlacement
   }), props.helperText && React__default.createElement("div", {
     className: "helper-text " + (props.invalid ? 'has-error' : '')
   }, props.helperText));
 };
 SelectAsyncField.defaultProps = {
-  isClearable: true
+  isClearable: true,
+  menuPlacement: 'auto'
 };
 
 var LoginForm = function LoginForm(props) {
@@ -2441,10 +2491,6 @@ var LoginForm = function LoginForm(props) {
       trigger = _useForm.trigger,
       errors = _useForm.formState.errors;
 
-  var onHandleKeyChange = function onHandleKeyChange(event) {
-    if (event.key === 'Enter') props.onClick(getValues());
-  };
-
   return React__default.createElement(material.Box, {
     m: 2
   }, props.topComponent && React__default.createElement(material.Box, {
@@ -2485,17 +2531,22 @@ var LoginForm = function LoginForm(props) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
-                    _context.next = 2;
+                    if (!(e.key === 'Enter')) {
+                      _context.next = 5;
+                      break;
+                    }
+
+                    _context.next = 3;
                     return trigger();
 
-                  case 2:
+                  case 3:
                     result = _context.sent;
 
                     if (result) {
-                      onHandleKeyChange(e);
+                      props.onClick(getValues());
                     }
 
-                  case 4:
+                  case 5:
                   case "end":
                     return _context.stop();
                 }
@@ -2541,17 +2592,22 @@ var LoginForm = function LoginForm(props) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
                   case 0:
-                    _context2.next = 2;
+                    if (!(e.key === 'Enter')) {
+                      _context2.next = 5;
+                      break;
+                    }
+
+                    _context2.next = 3;
                     return trigger();
 
-                  case 2:
+                  case 3:
                     result = _context2.sent;
 
                     if (result) {
-                      onHandleKeyChange(e);
+                      props.onClick(getValues());
                     }
 
-                  case 4:
+                  case 5:
                   case "end":
                     return _context2.stop();
                 }
@@ -2584,7 +2640,7 @@ var LoginForm = function LoginForm(props) {
 
 var ChangePasswordForm = function ChangePasswordForm(props) {
   var validationSchema = yup.object().shape({
-    password: yup.string().required(props.requiredText.requiredTextPassword),
+    password: yup.string().required(props.requiredText.requiredTextPassword).matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{6,})/, props.requiredText.requiredPasswordPolices),
     passwordConfirmation: yup.string().when('password', function (password, schema) {
       if (password) return schema.required(props.requiredText.requiredTextPassword);
     }).oneOf([yup.ref('password'), null], props.requiredText.requiredTextSamePassword)
@@ -2611,10 +2667,6 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
     event.preventDefault();
   };
 
-  var onHandleKeyChange = function onHandleKeyChange(event) {
-    if (event.key === 'Enter') props.onClick(getValues());
-  };
-
   return React__default.createElement(_.Box, {
     m: 2
   }, props.topComponent && React__default.createElement(_.Box, {
@@ -2655,17 +2707,22 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
-                    _context.next = 2;
+                    if (!(e.key === 'Enter')) {
+                      _context.next = 5;
+                      break;
+                    }
+
+                    _context.next = 3;
                     return trigger();
 
-                  case 2:
+                  case 3:
                     result = _context.sent;
 
                     if (result) {
-                      onHandleKeyChange(e);
+                      props.onClick(getValues());
                     }
 
-                  case 4:
+                  case 5:
                   case "end":
                     return _context.stop();
                 }
@@ -2717,17 +2774,22 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
                   case 0:
-                    _context2.next = 2;
+                    if (!(e.key === 'Enter')) {
+                      _context2.next = 5;
+                      break;
+                    }
+
+                    _context2.next = 3;
                     return trigger();
 
-                  case 2:
+                  case 3:
                     result = _context2.sent;
 
                     if (result) {
-                      onHandleKeyChange(e);
+                      props.onClick(getValues());
                     }
 
-                  case 4:
+                  case 5:
                   case "end":
                     return _context2.stop();
                 }
@@ -2773,10 +2835,6 @@ var ResetPasswordForm = function ResetPasswordForm(props) {
       trigger = _useForm.trigger,
       errors = _useForm.formState.errors;
 
-  var onHandleKeyChange = function onHandleKeyChange(event) {
-    if (event.key === 'Enter') props.onClick(getValues());
-  };
-
   return React__default.createElement(material.Box, {
     m: 2
   }, props.topComponent && React__default.createElement(material.Box, {
@@ -2811,17 +2869,22 @@ var ResetPasswordForm = function ResetPasswordForm(props) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
-                    _context.next = 2;
+                    if (!(e.key === 'Enter')) {
+                      _context.next = 5;
+                      break;
+                    }
+
+                    _context.next = 3;
                     return trigger();
 
-                  case 2:
+                  case 3:
                     result = _context.sent;
 
                     if (result) {
-                      onHandleKeyChange(e);
+                      props.onClick(getValues());
                     }
 
-                  case 4:
+                  case 5:
                   case "end":
                     return _context.stop();
                 }