techsbcn-storybook 0.2.2 → 0.3.0

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import './MainLayoutSimple.scss';
+interface MainLayoutSimpleProps {
+    lateralComponent?: React.ReactNode;
+    mainComponent: any;
+}
+export declare const MainLayoutSimple: React.FC<MainLayoutSimpleProps>;
+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/DrawerLayout/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/navigation/VerticalNav/VerticalNav.d.ts

@@ -0,0 +1,20 @@
+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[];
+}
+export declare const VerticalNav: React.FC<VerticalNavProps>;
+export {};

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NavigationProps } from './VerticalNav';
+interface VerticalNavItemCollapseProps {
+    item: NavigationProps;
+    userPermisions?: string[];
+}
+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,10 @@
 export * from './components/wrappers/PublicFormWrapper/PublicFormWrapper';
+export * from './components/layouts/MainLayoutSimple/MainLayoutSimple';
+export * from './components/navigation/VerticalNav/VerticalNav';
+export * from './components/navigation/DrawerLayout/AppSidebar/AppSidebar';
 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,5 @@
+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 LateralComponent: Story<import("@storybook/react").Args>;

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,11 @@ 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 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 +59,235 @@ 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 && React__default.createElement(_.Box, {
+    className: "lateral-component"
+  }, props.lateralComponent), React__default.createElement(_.Box, {
+    className: "main-wrapper"
+  }, 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 _useState = React.useState(false),
+      hover = _useState[0],
+      setHover = _useState[1];
+
+  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"
+  }, React__default.createElement(material.Box, {
+    p: 2,
+    className: "nav-item " + (hover ? 'main-color' : ''),
+    onMouseEnter: function onMouseEnter() {
+      return setHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHover(false);
+    }
+  }, React__default.createElement(material.Box, {
+    className: "nav-item-text " + (hover ? 'main-color' : '')
+  }, 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];
+
+  var _useState2 = React.useState(false),
+      hover = _useState2[0],
+      setHover = _useState2[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  " + (hover ? 'main-color' : '') + " " + (open ? 'open' : '') + " " + (needsToBeOpened(pathname, props.item) ? 'active' : ''),
+    onClick: handleClick,
+    onMouseEnter: function onMouseEnter() {
+      return setHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHover(false);
+    }
+  }, React__default.createElement(material.Box, {
+    className: "nav-item-text " + (hover ? 'main-color' : '')
+  }, 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
+    }), item.type === exports.NavigationType.Item && React__default.createElement(VerticalNavItem$1, {
+      item: item,
+      userPermisions: props.userPermisions
+    }));
+  })))));
+};
+
+var VerticalNavItemCollapse$1 = /*#__PURE__*/React__default.memo(VerticalNavItemCollapse);
+
+var css_248z$2 = ".vertical-navigation {\n  background: transparent;\n  color: #a9b7d0;\n}\n.vertical-navigation .nav-item {\n  cursor: pointer;\n}\n.vertical-navigation .nav-item svg {\n  font-size: 32px;\n}\n.vertical-navigation .nav-item:hover {\n  color: #04a9f5;\n}\n.vertical-navigation .nav-item:hover .nav-item-text {\n  color: #04a9f5;\n}\n.vertical-navigation .active .nav-item {\n  background-color: #333f54;\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
+    }), item.type === exports.NavigationType.Item && React__default.createElement(VerticalNavItem$1, {
+      item: item,
+      userPermisions: props.userPermisions
+    }));
+  }));
+};
+
+var css_248z$3 = ".app-sidebar {\n  width: 19rem;\n  background-color: #3f4d67;\n  box-shadow: 1px 0 20px 0 #3f4d67;\n  z-index: 1029;\n  color: #a9b7d0;\n}";
+styleInject(css_248z$3);
+
+var AppSidebar = function AppSidebar(props) {
+  return React__default.createElement(material.Box, {
+    height: "100%",
+    className: "app-sidebar"
+  }, React__default.createElement(material.Drawer, {
+    anchor: 'left',
+    className: "drawer-nav",
+    open: props.open,
+    onClose: props.onHide,
+    sx: {
+      display: {
+        xs: 'block',
+        lg: 'none'
+      }
+    }
+  }, props.children), React__default.createElement(material.Box, {
+    position: "sticky",
+    top: "0",
+    sx: {
+      display: {
+        xs: 'none',
+        lg: 'block'
+      }
+    }
+  }, props.children));
+};
+
+var css_248z$4 = ".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: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$4);
+
 var ButtonComponent = function ButtonComponent(props) {
   return React__default.createElement(_.Button, {
     type: props.type && props.type,
@@ -76,8 +303,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$5 = ".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$5);
 
 var TextFieldComponent = function TextFieldComponent(props) {
   return React__default.createElement(_.Box, {
@@ -390,10 +617,65 @@ 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.AppSidebar = AppSidebar;
 exports.ButtonComponent = ButtonComponent;
 exports.ChangePasswordForm = ChangePasswordForm;
 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