techsbcn-storybook 0.7.6 → 0.9.1

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

@@ -10,6 +10,7 @@ interface SelectAsyncFieldProps {
     disabled?: boolean;
     onChange?: (value: number, name: string) => void;
     onChangeValue?: (value: number) => void;
+    onChangeOption?: (value: number, label: string) => void;
     searchPromise: (filters: SearchFilters) => Promise<any>;
     invalid?: boolean;
     isClearable?: boolean;

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

@@ -10,9 +10,9 @@ interface ChangePasswordFormProps {
     };
     valuesText: {
         buttonText: string;
-        textPassword: string;
+        labelPassword: string;
         placeholderPassword?: string;
-        textSamePassword: string;
+        labelSamePassword: string;
         placeholderSamePassword?: string;
     };
 }

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

@@ -10,9 +10,9 @@ interface LoginFormProps {
     };
     valuesText: {
         buttonText: string;
-        textLogin: string;
+        labelLogin: string;
         placeholderLogin?: string;
-        textPassword: string;
+        labelPassword: string;
         placeholderPassword?: string;
     };
 }

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

@@ -9,7 +9,7 @@ interface resetPasswordFormProps {
     };
     valuesText: {
         buttonText: string;
-        text: string;
+        label: string;
         placeholder?: string;
     };
 }

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

@@ -11,6 +11,7 @@ export interface SearchComponentProps {
         singleFilter?: any;
         doubleFilter?: DoubleFilter;
     }[];
+    enableAfter?: boolean;
 }
 interface DoubleFilter {
     label?: string;

package/dist/components/wrappers/MainWrapperComponent/MainWrapperComponent.d.ts

@@ -4,7 +4,7 @@ import './MainWrapperComponent.scss';
 interface MainWrapperComponentProps {
     loading?: boolean;
     loadingChildren?: boolean;
-    headerProps: SearchComponentProps;
+    headerProps?: SearchComponentProps;
     divider?: boolean;
 }
 export declare const MainWrapperComponent: React.FC<MainWrapperComponentProps>;

package/dist/components/wrappers/TabsComponent/TabsComponent.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import './TabsComponent.scss';
+interface TabsComponentProps {
+    tabActive: number;
+    tabs: TabLabel[];
+    tabsComponent: TabComponent[];
+}
+interface TabLabel {
+    label: string;
+    value: number;
+}
+interface TabComponent {
+    component: React.ReactNode;
+    value: number;
+}
+export declare const TabsComponent: React.FC<TabsComponentProps>;
+export {};

package/dist/index.d.ts

@@ -16,3 +16,4 @@ export * from './components/forms/LoginForm';
 export * from './components/forms/ChangePasswordForm';
 export * from './components/forms/ResetPasswordForm';
 export * from './components/modals/ModalComponent';
+export * from './components/wrappers/TabsComponent/TabsComponent';

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

@@ -16,6 +16,7 @@ var reactSelectAsyncPaginate = require('react-select-async-paginate');
 var yup = require('yup');
 var reactHookForm = require('react-hook-form');
 var yup$1 = require('@hookform/resolvers/yup');
+var lab = require('@mui/lab');
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -130,17 +131,17 @@ var SearchComponent = function SearchComponent(props) {
     className: "search-component " + props.className
   }, React__default.createElement(material.Grid, {
     container: true,
-    spacing: 2,
     alignItems: "center"
   }, React__default.createElement(material.Grid, {
     item: true,
-    xs: 4
+    xs: props.actions ? 6 : 12,
+    md: 4
   }, React__default.createElement(material.Box, {
-    pl: 1,
-    className: "main-background-color-after title"
+    px: 1,
+    className: (props.enableAfter ? 'main-background-color-after' : '') + " title"
   }, props.title)), props.actions && React__default.createElement(material.Grid, {
     item: true,
-    xs: 8,
+    xs: props.title ? 6 : 12,
     sx: {
       display: {
         xs: 'block',
@@ -198,6 +199,12 @@ var SearchComponent = function SearchComponent(props) {
     alignItems: "center"
   }, React__default.createElement(material.Box, {
     ml: "auto",
+    sx: (props.searchBar || props.filters) && {
+      mt: {
+        xs: 2,
+        md: 0
+      }
+    },
     display: "flex",
     width: "100%"
   }, props.searchBar, props.filters && React__default.createElement(material.Box, {
@@ -232,7 +239,7 @@ var SearchComponent = function SearchComponent(props) {
   })))));
 };
 
-var css_248z$2 = ".main-wrapper-component {\n  background-color: white;\n  box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);\n}\n.main-wrapper-component .title.main-background-color-after {\n  color: #000;\n  font-size: calc(21px + (23 - 21) * calc(100vw - 300px)/1300) !important;\n  font-weight: 400;\n  position: relative;\n}\n.main-wrapper-component .title.main-background-color-after:after {\n  content: \"\";\n  position: absolute;\n  left: -17px;\n  top: 0;\n  width: 4px;\n  height: 30px;\n}\n.main-wrapper-component .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.main-wrapper-component .wrapper-actions .btn-action .MuiButton-root {\n  width: max-content;\n}\n.main-wrapper-component .wrapper-actions .btn-action svg {\n  font-size: 40px;\n}";
+var css_248z$2 = ".main-wrapper-component {\n  background-color: white;\n  box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);\n}\n.main-wrapper-component .main-background-color-after {\n  position: relative;\n}\n.main-wrapper-component .main-background-color-after:after {\n  content: \"\";\n  position: absolute;\n  left: -17px;\n  top: -4px;\n  width: 4px;\n  height: 30px;\n}\n.main-wrapper-component .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.main-wrapper-component .wrapper-actions .btn-action .MuiButton-root {\n  width: max-content;\n}\n.main-wrapper-component .wrapper-actions .btn-action svg {\n  font-size: 40px;\n}";
 styleInject(css_248z$2);
 
 var MainWrapperComponent = function MainWrapperComponent(props) {
@@ -241,18 +248,28 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
     py: 2
   }, props.loading ? React__default.createElement(_.Box, {
     display: "flex",
-    alignItems: "center",
+    justifyContent: "center",
     px: 2
-  }, React__default.createElement(_.CircularProgress, null)) : React__default.createElement(React__default.Fragment, null, React__default.createElement(_.Box, {
-    mb: 1,
+  }, React__default.createElement(_.CircularProgress, {
+    className: "circular-progress-main-color"
+  })) : React__default.createElement(React__default.Fragment, null, props.headerProps && React__default.createElement(_.Box, {
+    mb: props.divider ? 1 : 0,
     px: 2
-  }, React__default.createElement(SearchComponent, Object.assign({}, props.headerProps))), props.divider && React__default.createElement(_.Divider, null), props.children && !props.loadingChildren ? React__default.createElement(_.Box, {
+  }, React__default.createElement(SearchComponent, Object.assign({}, props.headerProps, {
+    enableAfter: true
+  }))), props.divider && React__default.createElement(_.Divider, null), props.children && !props.loadingChildren ? React__default.createElement(_.Box, {
+    pt: props.headerProps ? 2 : 0,
     px: 2
-  }, props.children) : props.loadingChildren ? React__default.createElement(_.Box, {
+  }, React__default.createElement(_.Box, {
+    className: "" + (props.headerProps ? '' : 'main-background-color-after')
+  }, props.children)) : props.loadingChildren ? React__default.createElement(_.Box, {
     display: "flex",
-    alignItems: "center",
+    justifyContent: "center",
+    pt: props.headerProps ? 2 : 0,
     px: 2
-  }, React__default.createElement(_.CircularProgress, null)) : React__default.createElement(React__default.Fragment, null)));
+  }, React__default.createElement(_.CircularProgress, {
+    className: "circular-progress-main-color"
+  })) : React__default.createElement(React__default.Fragment, null)));
 };
 
 var css_248z$3 = ".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 .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: 100%;\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: inline-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: 300px;\n  }\n}";
@@ -776,7 +793,7 @@ var UserInfo = function UserInfo(props) {
   }, React__default.createElement(material.Box, {
     display: "flex",
     alignItems: "center"
-  }, props.photoURL ? React__default.createElement(material.Avatar, {
+  }, props.photoURL && props.photoURL !== undefined ? React__default.createElement(material.Avatar, {
     className: "avatar-user",
     src: props.photoURL
   }) : React__default.createElement(material.Avatar, {
@@ -893,7 +910,7 @@ var DrawerSidebar = function DrawerSidebar(props) {
   }, props.footerComponents))));
 };
 
-var css_248z$9 = ".app-bar {\n  background-color: white !important;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n  color: black !important;\n}\n.app-bar .header-logo {\n  max-height: 64px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}\n.app-bar img {\n  max-height: 64px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}";
+var css_248z$9 = ".app-bar {\n  background-color: white !important;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n  color: black !important;\n}\n.app-bar .header-logo {\n  max-height: 59px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}\n.app-bar img {\n  max-height: 59px;\n  height: 100%;\n  min-height: 56px;\n  width: 100%;\n}";
 styleInject(css_248z$9);
 
 var AppHeader = function AppHeader(props) {
@@ -1907,6 +1924,11 @@ var SelectAsyncField = function SelectAsyncField(props) {
       props.onChangeValue && props.onChangeValue(option && option.length > 0 ? option.map(function (o) {
         return o.value;
       }) : option ? option.value : option);
+      props.onChangeOption && props.onChangeOption(option && option.length > 0 ? option.map(function (o) {
+        return o.value;
+      }) : option ? option.value : option, option && option.length > 0 ? option.map(function (o) {
+        return o.label;
+      }) : option ? option.label : option);
     },
     selectRef: props.inputRef,
     isDisabled: props.disabled,
@@ -1964,7 +1986,7 @@ var LoginForm = function LoginForm(props) {
           name = _ref$field.name,
           ref = _ref$field.ref;
       return React__default.createElement(TextFieldComponent, {
-        label: props.valuesText.textLogin,
+        label: props.valuesText.labelLogin,
         placeholder: props.valuesText.placeholderLogin,
         autoComplete: "login",
         error: !!errors.login,
@@ -1989,7 +2011,7 @@ var LoginForm = function LoginForm(props) {
           name = _ref2$field.name,
           ref = _ref2$field.ref;
       return React__default.createElement(TextFieldComponent, {
-        label: props.valuesText.textPassword,
+        label: props.valuesText.labelPassword,
         placeholder: props.valuesText.placeholderPassword,
         type: showPassword ? 'text' : 'password',
         error: !!errors.password,
@@ -2066,7 +2088,7 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
           name = _ref$field.name,
           ref = _ref$field.ref;
       return React__default.createElement(TextFieldComponent, {
-        label: props.valuesText.textPassword,
+        label: props.valuesText.labelPassword,
         type: showPassword ? 'text' : 'password',
         error: !!errors.password,
         placeholder: props.valuesText.placeholderPassword,
@@ -2097,7 +2119,7 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
           name = _ref2$field.name,
           ref = _ref2$field.ref;
       return React__default.createElement(TextFieldComponent, {
-        label: props.valuesText.textSamePassword,
+        label: props.valuesText.labelSamePassword,
         placeholder: props.valuesText.placeholderSamePassword,
         type: showPassword ? 'text' : 'password',
         error: !!errors.passwordConfirmation,
@@ -2157,7 +2179,7 @@ var ResetPasswordForm = function ResetPasswordForm(props) {
           name = _ref$field.name,
           ref = _ref$field.ref;
       return React__default.createElement(TextFieldComponent, {
-        label: props.valuesText.text,
+        label: props.valuesText.label,
         placeholder: props.valuesText.placeholder,
         autoComplete: "email",
         error: !!errors.email,
@@ -2233,6 +2255,42 @@ ModalComponent.defaultProps = {
   dividers: true
 };
 
+var css_248z$d = ".tabs-component .Mui-selected {\n  color: white !important;\n  border: none !important;\n  background-color: #3299C7;\n}\n.tabs-component .MuiTabs-indicator {\n  display: none;\n}\n.tabs-component .MuiTab-root {\n  margin: 2px 2px 0px;\n  border: 1px solid #00000038;\n  border-bottom: none;\n  border-radius: 5% 5% 0% 0%;\n  color: rgba(0, 0, 0, 0.54);\n}\n.tabs-component .MuiTabPanel-root {\n  border: 1px solid #00000038;\n  margin: 0px 2px 0px;\n  border-radius: 0% 5px 5px 5px;\n}";
+styleInject(css_248z$d);
+
+var TabsComponent = function TabsComponent(props) {
+  var _React$useState = React__default.useState(props.tabActive.toString()),
+      value = _React$useState[0],
+      setValue = _React$useState[1];
+
+  var handleChange = function handleChange(_event, newValue) {
+    setValue(newValue);
+  };
+
+  return React__default.createElement(MainWrapperComponent, null, React__default.createElement(material.Box, {
+    className: "tabs-component"
+  }, React__default.createElement(lab.TabContext, {
+    value: value
+  }, React__default.createElement(lab.TabList, {
+    onChange: handleChange
+  }, props.tabs.sort(function (a, b) {
+    return a.value - b.value;
+  }).map(function (tabLabel) {
+    return React__default.createElement(material.Tab, {
+      key: tabLabel.value,
+      label: tabLabel.label,
+      value: tabLabel.value.toString()
+    });
+  })), props.tabsComponent.sort(function (a, b) {
+    return a.value - b.value;
+  }).map(function (tabComponent) {
+    return React__default.createElement(lab.TabPanel, {
+      key: tabComponent.value,
+      value: tabComponent.value.toString()
+    }, tabComponent.component);
+  }))));
+};
+
 exports.AppHeader = AppHeader;
 exports.AppSidebar = AppSidebar;
 exports.ButtonComponent = ButtonComponent;
@@ -2248,6 +2306,7 @@ exports.SearchComponent = SearchComponent;
 exports.SelectAsyncField = SelectAsyncField;
 exports.SelectField = SelectField;
 exports.TableComponent = TableComponent;
+exports.TabsComponent = TabsComponent;
 exports.TextFieldComponent = TextFieldComponent;
 exports.UserInfo = UserInfo;
 exports.VerticalNav = VerticalNav;