techsbcn-storybook 0.2.2 → 0.5.0

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

@@ -5,15 +5,15 @@ interface LoginFormProps {
     bottomComponent?: React.ReactNode;
     loading: boolean;
     requiredText: {
-        requiredTextMail: string;
+        requiredTextLogin: string;
         requiredTextPassword: string;
     };
     valuesText: {
         buttonText: string;
-        text1: string;
-        placeholder1?: string;
-        text2: string;
-        placeholder2?: string;
+        textLogin: string;
+        placeholderLogin?: string;
+        textPassword: string;
+        placeholderPassword?: string;
     };
 }
 export declare const LoginForm: React.FC<LoginFormProps>;

package/dist/components/layouts/DrawerLayout/DrawerSidebar/DrawerSidebar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './DrawerSidebar.scss';
+interface DrawerSidebarProps {
+    onHide?: () => void;
+    open?: boolean;
+}
+export declare const DrawerSidebar: React.FC<DrawerSidebarProps>;
+export {};

package/dist/components/layouts/MainLayoutSimple/MainLayoutSimple.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './MainLayoutSimple.scss';
+interface MainLayoutSimpleProps {
+    lateralComponent?: React.ReactNode;
+    mainComponent: any;
+    headerComponent?: React.ReactNode;
+}
+export declare const MainLayoutSimple: React.FC<MainLayoutSimpleProps>;
+export {};

package/dist/components/layouts/Standard/AppHeader/AppHeader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './AppHeader.scss';
+interface AppHeaderProps {
+    handleDrawerOpen: () => void;
+}
+export declare const AppHeader: React.FC<AppHeaderProps>;
+export {};

package/dist/components/layouts/Standard/AppSidebar/AppSidebar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './AppSidebar.scss';
+interface AppSidebarProps {
+    onHide?: () => void;
+    open?: boolean;
+}
+export declare const AppSidebar: React.FC<AppSidebarProps>;
+export {};

package/dist/components/modals/ModalComponent.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonComponentProps } from '../fields/ButtonComponent/ButtonComponent';
+interface ModalComponentProps {
+    idClass?: string;
+    setShow: boolean;
+    title?: string;
+    modalSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+    fullWidth?: boolean;
+    fullScreen?: boolean;
+    submitButton?: ButtonComponentProps;
+    cancelButton?: ButtonComponentProps;
+    loading?: boolean;
+    onHide: () => void;
+    dividers?: boolean;
+}
+export declare const ModalComponent: React.FC<ModalComponentProps>;
+export {};

package/dist/components/navigation/VerticalNav/VerticalNav.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './VerticalNav.scss';
+export declare enum NavigationType {
+    Item = 0,
+    Collapse = 1
+}
+export interface NavigationProps {
+    id: string;
+    title?: string;
+    route?: string;
+    type?: NavigationType;
+    persmisionAvailable?: string | string[];
+    children?: NavigationProps[] | NavigationProps;
+}
+interface VerticalNavProps {
+    items: NavigationProps[];
+    userPermisions?: string[];
+    onHide?: () => void;
+}
+export declare const VerticalNav: React.FC<VerticalNavProps>;
+export {};

package/dist/components/navigation/VerticalNav/VerticalNavItem.d.ts

@@ -0,0 +1,9 @@
+import { NavigationProps } from './VerticalNav';
+import React from 'react';
+interface VerticalNavItemProps {
+    item: NavigationProps;
+    userPermisions?: string[];
+    onHide?: () => void;
+}
+declare const _default: React.NamedExoticComponent<VerticalNavItemProps>;
+export default _default;

package/dist/components/navigation/VerticalNav/VerticalNavItemCollapse.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NavigationProps } from './VerticalNav';
+interface VerticalNavItemCollapseProps {
+    item: NavigationProps;
+    userPermisions?: string[];
+    onHide?: () => void;
+}
+declare const _default: React.NamedExoticComponent<VerticalNavItemCollapseProps>;
+export default _default;

package/dist/components/navigation/components/UserInfo.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface UserInfoProps {
+    fool?: string;
+}
+declare const UserInfo: React.FC<UserInfoProps>;
+export default UserInfo;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+interface SearchComponentProps {
+    className?: string;
+    title?: string;
+    searchBar?: React.ReactNode;
+    actions?: {
+        children: any;
+    }[];
+    filters?: {
+        singleFilter?: any;
+        doubleFilter?: DoubleFilter;
+    }[];
+}
+interface DoubleFilter {
+    label?: string;
+    firstFilter: any;
+    secondFilter: any;
+}
+declare const DoubleFilter: (filters: DoubleFilter) => JSX.Element;
+declare const SearchComponent: React.FC<SearchComponentProps>;
+export default SearchComponent;

package/dist/helpers/CheckPermission.d.ts

@@ -0,0 +1 @@
+export declare const checkPermission: (persmisionAvailable?: any, userRoles?: any) => boolean;

package/dist/helpers/GroupBy.d.ts

@@ -0,0 +1 @@
+export declare const GroupBy: (xs: any[], f: (arg0: any) => any) => any;

package/dist/helpers/index.d.ts

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

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 export * from './components/wrappers/PublicFormWrapper/PublicFormWrapper';
+export * from './components/layouts/MainLayoutSimple/MainLayoutSimple';
+export * from './components/navigation/VerticalNav/VerticalNav';
+export * from './components/layouts/Standard/AppSidebar/AppSidebar';
+export * from './components/layouts/DrawerLayout/DrawerSidebar/DrawerSidebar';
+export * from './components/layouts/Standard/AppHeader/AppHeader';
 export * from './components/fields/ButtonComponent/ButtonComponent';
 export * from './components/fields/TextFieldComponent/TextFieldComponent';
 export * from './components/forms/LoginForm';
 export * from './components/forms/ChangePasswordForm';
 export * from './components/forms/ResetPasswordForm';
+export * from './components/modals/ModalComponent';

package/dist/stories/Layouts/MainLayoutSimple.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, Story } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story<import("@storybook/react").Args>;
+export declare const SidebarLayout: Story;
+export declare const SidebarAndHeaderLayout: Story;
+export declare const DrawerSidebarAndHeaderLayout: Story;

package/dist/stories/{thing/Thing.stories.d.ts → Modal/Modal.stories.d.ts}

@@ -1,5 +1,4 @@
 import { Meta, Story } from '@storybook/react';
-import { ThingProps } from './Thing';
 declare const meta: Meta;
 export default meta;
-export declare const Default: Story<ThingProps>;
+export declare const Basic: Story<import("@storybook/react").Args>;

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

@@ -8,10 +8,12 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var material = require('@mui/material');
 var _ = require('@mui/material/');
+var reactRouterDom = require('react-router-dom');
+var iconsMaterial = require('@mui/icons-material');
+var MenuIcon = _interopDefault(require('@mui/icons-material/Menu'));
 var yup = require('yup');
 var reactHookForm = require('react-hook-form');
 var yup$1 = require('@hookform/resolvers/yup');
-var iconsMaterial = require('@mui/icons-material');
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -58,9 +60,265 @@ var PublicFormWrapper = function PublicFormWrapper(props) {
   }, props.children)));
 };
 
-var css_248z$1 = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  box-shadow: none !important;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white !important;\n}\n.MuiButton-root .MuiButton-label {\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white !important;\n}";
+var css_248z$1 = ".main-layout-simple {\n  width: 100%;\n}\n.main-layout-simple .main-wrapper {\n  width: 100%;\n  min-height: 100vh;\n  height: fit-content;\n  position: relative;\n}";
 styleInject(css_248z$1);
 
+var MainLayoutSimple = function MainLayoutSimple(props) {
+  return React__default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "row",
+    className: "main-layout-simple"
+  }, props.lateralComponent && props.lateralComponent, React__default.createElement(_.Box, {
+    className: "main-wrapper"
+  }, props.headerComponent && props.headerComponent, React__default.createElement(_.Box, {
+    className: "" + (props.lateralComponent ? 'split-container' : '')
+  }, React__default.createElement(_.Container, {
+    maxWidth: false
+  }, props.mainComponent))));
+};
+
+var checkPermission = function checkPermission(persmisionAvailable, userRoles) {
+  if (persmisionAvailable === null || persmisionAvailable === undefined || persmisionAvailable.length === 0) {
+    return true;
+  }
+
+  if (userRoles && Array.isArray(userRoles) && Array.isArray(persmisionAvailable)) {
+    return persmisionAvailable.some(function (r) {
+      return userRoles.indexOf(r) >= 0;
+    });
+  }
+
+  return userRoles.indexOf(persmisionAvailable) >= 0;
+};
+
+var VerticalNavItem = function VerticalNavItem(props) {
+  var _useLocation = reactRouterDom.useLocation(),
+      pathname = _useLocation.pathname;
+
+  var hasPermission = React.useMemo(function () {
+    return checkPermission(props.item.persmisionAvailable, props.userPermisions);
+  }, [props.item.persmisionAvailable, props.userPermisions]);
+
+  if (!hasPermission) {
+    return null;
+  }
+
+  return React__default.createElement(reactRouterDom.NavLink, {
+    to: props.item.route || '',
+    className: "nav-link-item",
+    onClick: props.onHide
+  }, React__default.createElement(material.Box, {
+    p: 2,
+    className: "nav-item " + (reactRouterDom.matchPath({
+      path: props.item.route || ''
+    }, pathname) ? 'main-background-color' : '')
+  }, React__default.createElement(material.Box, {
+    className: "nav-item-text"
+  }, props.item.title)));
+};
+
+var VerticalNavItem$1 = /*#__PURE__*/React__default.memo(VerticalNavItem);
+
+var needsToBeOpened = function needsToBeOpened(pathname, item) {
+  if (pathname) {
+    return isUrlInChildren(item, pathname);
+  }
+
+  return false;
+};
+
+var isUrlInChildren = function isUrlInChildren(parent, url) {
+  if (!parent.children) {
+    return false;
+  }
+
+  for (var i = 0; i < parent.children.length; i++) {
+    if (parent.children[i].children) {
+      if (isUrlInChildren(parent.children[i], url)) {
+        return true;
+      }
+    }
+
+    if (parent.children[i].route === url || url.includes(parent.children[i].route)) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+var VerticalNavItemCollapse = function VerticalNavItemCollapse(props) {
+  var _useLocation = reactRouterDom.useLocation(),
+      pathname = _useLocation.pathname;
+
+  var _useState = React.useState(function () {
+    return needsToBeOpened(pathname, props.item);
+  }),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  React.useEffect(function () {
+    if (needsToBeOpened(pathname, props.item)) {
+      setOpen(true);
+    }
+  }, [pathname, props]);
+
+  var handleClick = function handleClick() {
+    setOpen(!open);
+  };
+
+  var hasPermission = React.useMemo(function () {
+    return checkPermission(props.item.persmisionAvailable, props.userPermisions);
+  }, [props.item.persmisionAvailable, props.userPermisions]);
+
+  if (!hasPermission) {
+    return null;
+  }
+
+  return React__default.createElement(material.Box, {
+    className: "nav-item-collapse"
+  }, React__default.createElement(material.Box, {
+    p: 2,
+    display: "flex",
+    alignContent: "flex-end",
+    alignItems: "center",
+    className: "nav-item " + (open ? 'open' : '') + " " + (needsToBeOpened(pathname, props.item) ? 'active' : ''),
+    onClick: handleClick
+  }, React__default.createElement(material.Box, {
+    className: "nav-item-text"
+  }, props.item.title), React__default.createElement(material.Box, {
+    ml: "auto",
+    display: "flex"
+  }, open ? React__default.createElement(iconsMaterial.ExpandMore, null) : React__default.createElement(iconsMaterial.ChevronRight, null))), props.item.children && Array.isArray(props.item.children) && React__default.createElement(material.Collapse, {
+    "in": open,
+    className: "collapse-children"
+  }, React__default.createElement(material.Box, null, React__default.createElement(material.Grid, {
+    container: true
+  }, props.item.children.map(function (item) {
+    return React__default.createElement(material.Grid, {
+      item: true,
+      key: item.id,
+      xs: 12
+    }, item.type === exports.NavigationType.Collapse && React__default.createElement(VerticalNavItemCollapse, {
+      item: item,
+      userPermisions: props.userPermisions,
+      onHide: props.onHide
+    }), item.type === exports.NavigationType.Item && React__default.createElement(VerticalNavItem$1, {
+      item: item,
+      userPermisions: props.userPermisions,
+      onHide: props.onHide
+    }));
+  })))));
+};
+
+var VerticalNavItemCollapse$1 = /*#__PURE__*/React__default.memo(VerticalNavItemCollapse);
+
+var css_248z$2 = ".vertical-navigation {\n  background: transparent;\n  color: white;\n}\n.vertical-navigation .nav-item {\n  cursor: pointer;\n}\n.vertical-navigation .nav-item svg {\n  font-size: 28px;\n}\n.vertical-navigation .nav-item {\n  padding: 12px;\n}\n.vertical-navigation .nav-item:hover {\n  background-color: #333f54;\n}\n.vertical-navigation .active .nav-item {\n  background-color: #04a9f5;\n  border-radius: 0 25px 25px 0;\n  margin-right: 16px;\n}\n.vertical-navigation .active .nav-item .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover {\n  color: white !important;\n}\n.vertical-navigation .active .nav-item:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active {\n  background-color: #333f54;\n}\n.vertical-navigation .nav-item-collapse .active .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .active:hover .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open {\n  background-color: #333f54;\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .open .nav-item-text {\n  color: white !important;\n}\n.vertical-navigation .nav-item-collapse .collapse-children {\n  background-color: #39465e;\n}\n.vertical-navigation .nav-item-collapse .collapse-children .nav-item-text {\n  padding-left: 16px;\n  padding-right: 16px;\n}";
+styleInject(css_248z$2);
+
+(function (NavigationType) {
+  NavigationType[NavigationType["Item"] = 0] = "Item";
+  NavigationType[NavigationType["Collapse"] = 1] = "Collapse";
+})(exports.NavigationType || (exports.NavigationType = {}));
+
+var VerticalNav = function VerticalNav(props) {
+  return React__default.createElement(material.Grid, {
+    container: true,
+    className: "vertical-navigation"
+  }, props.items.map(function (item) {
+    return React__default.createElement(material.Grid, {
+      item: true,
+      key: item.id,
+      xs: 12,
+      md: 12,
+      className: "grid-item-navigation"
+    }, item.type === exports.NavigationType.Collapse && React__default.createElement(VerticalNavItemCollapse$1, {
+      item: item,
+      userPermisions: props.userPermisions,
+      onHide: props.onHide
+    }), item.type === exports.NavigationType.Item && React__default.createElement(VerticalNavItem$1, {
+      item: item,
+      userPermisions: props.userPermisions,
+      onHide: props.onHide
+    }));
+  }));
+};
+
+var css_248z$3 = ".app-sidebar {\n  width: 17rem;\n  background-color: #3f4d67;\n  box-shadow: 1px 0 20px 0 #3f4d67;\n  z-index: 1029;\n  color: white;\n}";
+styleInject(css_248z$3);
+
+var AppSidebar = function AppSidebar(props) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Drawer, {
+    anchor: 'left',
+    className: "drawer-nav",
+    open: props.open,
+    onClose: props.onHide,
+    sx: {
+      display: {
+        xs: 'block',
+        lg: 'none'
+      }
+    }
+  }, React__default.createElement(material.Box, {
+    height: "100%",
+    className: "app-sidebar"
+  }, props.children)), React__default.createElement(material.Box, {
+    sx: {
+      display: {
+        xs: 'none',
+        lg: 'block'
+      }
+    }
+  }, React__default.createElement(material.Box, {
+    height: "100%",
+    className: "app-sidebar"
+  }, React__default.createElement(material.Box, {
+    position: "sticky",
+    top: "0"
+  }, props.children))));
+};
+
+var css_248z$4 = ".drawer-sidebar {\n  width: 17rem;\n  background-color: #3f4d67;\n  box-shadow: 1px 0 20px 0 #3f4d67;\n  z-index: 1029;\n  color: white;\n}";
+styleInject(css_248z$4);
+
+var DrawerSidebar = function DrawerSidebar(props) {
+  return React__default.createElement(material.Drawer, {
+    anchor: 'left',
+    className: "drawer-nav",
+    open: props.open,
+    onClose: props.onHide
+  }, React__default.createElement(material.Box, {
+    height: "100%",
+    className: "drawer-sidebar"
+  }, props.children));
+};
+
+var css_248z$5 = ".app-bar {\n  background-color: white !important;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n  color: black !important;\n}";
+styleInject(css_248z$5);
+
+var AppHeader = function AppHeader(props) {
+  return React__default.createElement(material.AppBar, {
+    position: "sticky",
+    className: "app-bar main-backgound-body"
+  }, React__default.createElement(material.Toolbar, {
+    className: "app-toolbar"
+  }, React__default.createElement(material.IconButton, {
+    sx: {
+      display: {
+        xs: 'block',
+        lg: 'none'
+      }
+    },
+    edge: "start",
+    color: "inherit",
+    "aria-label": "open drawer",
+    onClick: props.handleDrawerOpen
+  }, React__default.createElement(MenuIcon, null)), props.children));
+};
+
+var css_248z$6 = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  box-shadow: none !important;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root.btn-modal-cancel.Mui-disabled {\n  background-color: #666666c4 !important;\n  color: #030303b4 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white !important;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white !important;\n}";
+styleInject(css_248z$6);
+
 var ButtonComponent = function ButtonComponent(props) {
   return React__default.createElement(_.Button, {
     type: props.type && props.type,
@@ -76,8 +334,8 @@ var ButtonComponent = function ButtonComponent(props) {
   }) : props.label);
 };
 
-var css_248z$2 = ".text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 22px !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: grey !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n}";
-styleInject(css_248z$2);
+var css_248z$7 = ".text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 22px !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: grey !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n}";
+styleInject(css_248z$7);
 
 var TextFieldComponent = function TextFieldComponent(props) {
   return React__default.createElement(_.Box, {
@@ -130,7 +388,7 @@ TextFieldComponent.defaultProps = {
 
 var LoginForm = function LoginForm(props) {
   var LoginSchema = yup.object().shape({
-    email: yup.string().required(props.requiredText.requiredTextMail),
+    login: yup.string().required(props.requiredText.requiredTextLogin),
     password: yup.string().required(props.requiredText.requiredTextPassword)
   });
 
@@ -163,20 +421,20 @@ var LoginForm = function LoginForm(props) {
     item: true
   }, React__default.createElement(reactHookForm.Controller, {
     control: control,
-    name: 'email',
+    name: 'login',
     render: function render(_ref) {
-      var _errors$email;
+      var _errors$login;
 
       var _ref$field = _ref.field,
           _onChange = _ref$field.onChange,
           name = _ref$field.name,
           ref = _ref$field.ref;
       return React__default.createElement(TextFieldComponent, {
-        label: props.valuesText.text1,
-        placeholder: props.valuesText.placeholder1,
-        autoComplete: "email",
-        error: !!errors.email,
-        helperText: (_errors$email = errors.email) == null ? void 0 : _errors$email.message,
+        label: props.valuesText.textLogin,
+        placeholder: props.valuesText.placeholderLogin,
+        autoComplete: "login",
+        error: !!errors.login,
+        helperText: (_errors$login = errors.login) == null ? void 0 : _errors$login.message,
         name: name,
         inputRef: ref,
         onChange: function onChange(e) {
@@ -197,8 +455,8 @@ var LoginForm = function LoginForm(props) {
           name = _ref2$field.name,
           ref = _ref2$field.ref;
       return React__default.createElement(TextFieldComponent, {
-        label: props.valuesText.text2,
-        placeholder: props.valuesText.placeholder2,
+        label: props.valuesText.textPassword,
+        placeholder: props.valuesText.placeholderPassword,
         type: showPassword ? 'text' : 'password',
         error: !!errors.password,
         helperText: (_errors$password = errors.password) == null ? void 0 : _errors$password.message,
@@ -390,10 +648,67 @@ var ResetPasswordForm = function ResetPasswordForm(props) {
   }, props.bottomComponent));
 };
 
+var ModalComponent = function ModalComponent(props) {
+  return React__default.createElement(material.Dialog, {
+    open: props.setShow,
+    id: props.idClass,
+    fullWidth: props.fullWidth,
+    fullScreen: props.fullScreen,
+    maxWidth: props.modalSize,
+    className: "modal-component",
+    "aria-labelledby": "modal-title",
+    "aria-describedby": "modal-description",
+    onClose: props.onHide,
+    scroll: "body",
+    PaperProps: {
+      sx: {
+        overflowY: 'unset'
+      }
+    }
+  }, React__default.createElement(material.DialogTitle, {
+    id: "modal-title"
+  }, React__default.createElement(material.Box, {
+    display: "flex",
+    alignItems: "center"
+  }, props.title, props.onHide && React__default.createElement(material.Box, {
+    sx: {
+      margin: '-1rem -1rem -1rem auto'
+    }
+  }, React__default.createElement(material.IconButton, {
+    "aria-label": "close",
+    onClick: props.onHide
+  }, React__default.createElement(iconsMaterial.Close, null))))), React__default.createElement(material.DialogContent, {
+    sx: {
+      overflowY: 'unset'
+    },
+    id: "modal-description",
+    dividers: props.dividers
+  }, props.children), React__default.createElement(material.DialogActions, null, props.cancelButton && React__default.createElement(ButtonComponent, Object.assign({
+    disabled: props.loading,
+    className: "btn-modal-cancel " + (props.cancelButton.className ? props.cancelButton.className : ''),
+    onClick: props.cancelButton.onClick ? props.cancelButton.onClick : props.onHide
+  }, props.cancelButton)), props.submitButton && React__default.createElement(ButtonComponent, Object.assign({
+    className: "btn-modal-submit main-background-color " + (props.submitButton.className ? props.submitButton.className : ''),
+    loading: props.loading
+  }, props.submitButton))));
+};
+ModalComponent.defaultProps = {
+  modalSize: 'sm',
+  fullWidth: true,
+  loading: false,
+  dividers: true
+};
+
+exports.AppHeader = AppHeader;
+exports.AppSidebar = AppSidebar;
 exports.ButtonComponent = ButtonComponent;
 exports.ChangePasswordForm = ChangePasswordForm;
+exports.DrawerSidebar = DrawerSidebar;
 exports.LoginForm = LoginForm;
+exports.MainLayoutSimple = MainLayoutSimple;
+exports.ModalComponent = ModalComponent;
 exports.PublicFormWrapper = PublicFormWrapper;
 exports.ResetPasswordForm = ResetPasswordForm;
 exports.TextFieldComponent = TextFieldComponent;
+exports.VerticalNav = VerticalNav;
 //# sourceMappingURL=techsbcn-storybook.cjs.development.js.map