dgrcorrientes-modulos 1.0.0

package/src/stories/Layout/Header/Header.scss

@@ -0,0 +1,190 @@
+@import '/src/sass/utilities/variables';
+
+.navbar-container {
+  box-shadow: 0px 6px 10px rgba(14, 31, 53, 0.12), 0px 12px 18px rgba(14, 31, 53, 0.2), 0px 20px 40px -1px rgba(14, 31, 53, 0.12);
+  border-radius: 0px 0px 16px 16px;
+  background-color: $white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  position: relative;
+  min-width: 320px;
+
+  .navbar {
+    height: 60px;
+    background-color: transparent;
+
+    @media screen and (max-width: $breakpoint_header1_5) {
+      margin-left: 20px !important;
+      margin-right: 20px !important;
+    }
+
+    @media screen and (max-width: $breakpoint_header4_logo) {
+      margin-left: 10px !important;
+      margin-right: 10px !important;
+    }
+
+    @media screen and (max-width: $breakpoint_header2) {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .navbar-brand {
+      display: flex;
+      align-items: center;
+
+      .navbar-burger {
+        display: none;
+        margin-left: 0 !important;
+
+        @media screen and (max-width: $breakpoint_header3_burger) {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+
+    .navbar-menu {
+      @media screen and (max-width: $breakpoint_header3_burger) {
+        position: absolute;
+        top: 120%;
+        left: -5px;
+        width: calc(100% + 10px);
+        border-radius: 0px 0px 16px 16px;
+        box-shadow: 0px 6px 10px rgba(14, 31, 53, 0.12), 0px 12px 18px rgba(14, 31, 53, 0.2), 0px 20px 40px -1px rgba(14, 31, 53, 0.12);
+      }
+
+      .navbar-start {
+        padding-left: 70px;
+
+        @media screen and (max-width: $breakpoint_header1) {
+          padding-left: 10px;
+        }
+
+        .item-text {
+          font-size: 14px;
+        }
+      }
+    }
+
+    .navbar-end {
+      padding-left: 50px;
+
+      .user-mobile {
+        border-left: 1px solid $truegray-200;
+        margin: 10px 0px 8px 15px;
+        padding-left: 20px;
+
+        @media screen and (max-width: $breakpoint_header4_logo) {
+          border-left: none;
+          padding-left: 0px;
+        }
+
+        .fa_icon {
+          color: $darkText;
+
+          &:hover {
+            color: $primary-600;
+          }
+        }
+      }
+
+      @media screen and (max-width: $breakpoint_header1) {
+        padding-left: 20px;
+      }
+
+      @media screen and (max-width: $breakpoint_header2) {
+        .icon-functions {
+          padding-right: 9px !important;
+        }
+      }
+
+      .icon-functions {
+        gap: 15px;
+        padding-right: 25px;
+
+        @media screen and (max-width: $breakpoint_header4_logo) {
+          gap: 8px;
+        }
+
+        .item-icon {
+          position: relative;
+          display: flex;
+          align-items: center;
+
+          &__badge-notif {
+            position: absolute;
+            bottom: 47%;
+            left: 47%;
+            pointer-events: none;
+
+            .badge {
+              border-radius: 50%;
+              font-size: 10px;
+              padding-left: 5px;
+              padding-right: 5px;
+            }
+          }
+        }
+      }
+
+      .user-sec {
+        border-left: 1px solid $truegray-200;
+        cursor: pointer;
+        padding-left: 15px;
+
+        &__text {
+          font-size: 14px;
+          padding-right: 14px;
+
+          .names {
+            color: $darkText;
+          }
+
+          .description {
+            font-size: 10px;
+            text-align: right;
+            color: $text-500;
+          }
+        }
+
+        &__icons {
+          gap: 20px;
+          color: $darkText;
+
+          .user-icon {
+            position: relative;
+
+            &__state {
+              position: absolute;
+              bottom: 70%;
+              left: 47%;
+              pointer-events: none;
+
+              .badge {
+                border-radius: 50%;
+                font-size: 10px;
+                padding-left: 5px;
+                padding-right: 5px;
+              }
+            }
+          }
+        }
+      }
+
+      .drop-component {
+        display: none;
+        position: absolute;
+        top: 100%;
+        right: 0px;
+        z-index: 100;
+
+        &.is-active {
+          display: block;
+        }
+      }
+    }
+  }
+}

package/src/stories/Layout/Header/Header.stories.tsx

@@ -0,0 +1,223 @@
+import React from 'react';
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+
+import {Header} from './Header';
+import {Tooltip} from '../../Components/Tooltip/Tooltip';
+
+import logo_rentas_corrientes from '../../assets/logo_rentas_corrientes.svg';
+import logo_rentas_corrientes_compacto from '../../assets/logo_rentas_corrientes_compacto.svg';
+
+export default {
+  title: 'Layout/Header',
+  component: Header,
+  args: {
+    logo: {
+      src: logo_rentas_corrientes,
+      width: '100%',
+      height: '37px',
+      onClick: () => {
+        console.log('Logo Clicked');
+      },
+    },
+    logoMobile: {
+      src: logo_rentas_corrientes_compacto,
+      width: '100%',
+      height: '37px',
+      onClick: () => {
+        console.log('Logo Clicked');
+      },
+    },
+    navItems: [
+      {
+        label: 'Pagar',
+        onClick: () => {
+          console.log('Pagar Clicked');
+        },
+      },
+      {
+        label: 'Liquidación de tasas',
+        onClick: () => {
+          console.log('Liquidación de tasas Clicked');
+        },
+      },
+      {
+        label: 'Trámites',
+        onClick: () => {
+          console.log('Trámites Clicked');
+        },
+      },
+      {
+        label: 'Centro de ayuda',
+        onClick: () => {
+          console.log('Centro de ayuda Clicked');
+        },
+      },
+    ],
+    buttonLogin: {
+      type: 'button',
+      color: 'primary',
+      fill: 'solid',
+      loading: false,
+      disabled: false,
+      label: 'Iniciar Sesión',
+      icon: 'fa-solid fa-user',
+      onClick: () => console.log('Iniciar sesión Clicked'),
+    },
+  },
+} as ComponentMeta<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = args => <Header {...args} />;
+
+export const NotUser = Template.bind({});
+NotUser.args = {
+  logged: false,
+  iconFunctions: [
+    {
+      uniqueValue: 'buscar',
+      buttonIcon: {
+        type: 'button',
+        size: 'medium',
+        fill: 'unstyled',
+        icon: 'fa-solid fa-magnifying-glass',
+        onClick: () => console.log('Lupa Clicked'),
+        isOnlyIcon: true,
+      },
+      iconDropComponent: (
+        <Tooltip
+          active
+          contentType="text"
+          text="Usá esta Base Imponible para tu declaración de Bienes Personales 2020"
+          trianglePos="none"
+        />
+      ),
+    },
+    {
+      uniqueValue: 'ubicacion',
+      buttonIcon: {
+        type: 'button',
+        size: 'medium',
+        fill: 'unstyled',
+        icon: 'fa-solid fa-location-dot',
+        onClick: () => console.log('Location Clicked'),
+        isOnlyIcon: true,
+      },
+      iconDropComponent: (
+        <Tooltip
+          active
+          contentType="text"
+          text="Usá esta Base Imponible para tu declaración de Bienes Personales 2020"
+          trianglePos="none"
+        />
+      ),
+    },
+  ],
+  notUserDropComponent: (
+    <Tooltip active contentType="text" text="Usá esta Base Imponible para tu declaración de Bienes Personales 2020" trianglePos="none" />
+  ),
+};
+
+export const Logged = Template.bind({});
+Logged.args = {
+  logged: true,
+  iconFunctions: [
+    {
+      uniqueValue: 'buscar',
+      buttonIcon: {
+        type: 'button',
+        size: 'medium',
+        fill: 'unstyled',
+        icon: 'fa-solid fa-magnifying-glass',
+        onClick: () => console.log('Lupa Clicked'),
+        isOnlyIcon: true,
+      },
+      iconDropComponent: (
+        <Tooltip
+          active
+          contentType="text"
+          text="Usá esta Base Imponible para tu declaración de Bienes Personales 2020"
+          trianglePos="none"
+        />
+      ),
+    },
+    {
+      uniqueValue: 'ubicacion',
+      buttonIcon: {
+        type: 'button',
+        size: 'medium',
+        fill: 'unstyled',
+        icon: 'fa-solid fa-location-dot',
+        onClick: () => console.log('Location Clicked'),
+        isOnlyIcon: true,
+      },
+      iconDropComponent: (
+        <Tooltip
+          active
+          contentType="text"
+          text="Usá esta Base Imponible para tu declaración de Bienes Personales 2020"
+          trianglePos="none"
+        />
+      ),
+    },
+    {
+      uniqueValue: 'notificaciones',
+      buttonIcon: {
+        type: 'button',
+        size: 'medium',
+        fill: 'unstyled',
+        icon: 'fa-regular fa-bell',
+        onClick: () => console.log('Campana Clicked'),
+        isOnlyIcon: true,
+      },
+      badge: {
+        text: '5',
+        color: 'primary',
+      },
+      iconDropComponent: (
+        <Tooltip
+          active
+          contentType="text"
+          text="Usá esta Base Imponible para tu declaración de Bienes Personales 2020"
+          trianglePos="none"
+        />
+      ),
+    },
+    {
+      uniqueValue: 'mensajes',
+      buttonIcon: {
+        type: 'button',
+        size: 'medium',
+        fill: 'unstyled',
+        icon: 'fa-regular fa-envelope',
+        onClick: () => console.log('Mensajes Clicked'),
+        isOnlyIcon: true,
+      },
+      badge: {
+        text: '5',
+        color: 'primary',
+      },
+      iconDropComponent: (
+        <Tooltip
+          active
+          contentType="text"
+          text="Usá esta Base Imponible para tu declaración de Bienes Personales 2020"
+          trianglePos="none"
+        />
+      ),
+    },
+  ],
+  userInfo: {
+    name: 'Juan',
+    lastName: 'Martinez',
+    description: 'Contador Público',
+    avatar: {
+      icon: {
+        type: 'fa_icon',
+        icon: 'fa-solid fa-user',
+      },
+      stateColor: '#287D3C',
+    },
+    userDropComponent: (
+      <Tooltip active contentType="text" text="Usá esta Base Imponible para tu declaración de Bienes Personales 2020" trianglePos="none" />
+    ),
+  },
+};

package/src/stories/Layout/Header/Header.tsx

@@ -0,0 +1,278 @@
+import React, {createRef, useEffect, useRef, useState} from 'react';
+import './Header.scss';
+import {Icon, IIcon} from '../../Elements/Icon/Icon';
+import {IButton, Button} from '../../Elements/Button/Button';
+import {Badge, BadgeProps} from '../../Elements/Badge/Badge';
+import {generateRandomKey} from '../../../utils/functions';
+import burger from '/src/stories/assets/burger.svg';
+
+export interface IHeader extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  logo?: {src: string; width: string; height: string; onClick?: () => void};
+  logoMobile?: {src: string; width: string; height: string; onClick?: () => void};
+  navItems?: {label: string; onClick?: () => void}[];
+  iconFunctions?: {uniqueValue: string; buttonIcon: IButton; badge?: BadgeProps; iconDropComponent?: React.ReactNode}[];
+  //NotUser
+  buttonLogin?: IButton;
+  //Logged
+  userInfo: {
+    name: string;
+    lastName: string;
+    description: string;
+    avatar?: {icon?: IIcon; img?: {src: string}; stateColor?: string};
+    onUserClick?: () => void;
+    userDropComponent?: React.ReactNode;
+  };
+  notUserDropComponent?: React.ReactNode;
+
+  // boolean
+  logged?: boolean;
+
+  // react
+  className?: string;
+}
+
+export const Header = ({
+  className,
+  logged,
+  logo,
+  logoMobile,
+  navItems,
+  iconFunctions,
+  buttonLogin,
+  userInfo,
+  notUserDropComponent,
+  ...props
+}: IHeader) => {
+  const [expandedBurger, setExpandedBurger] = useState(false);
+  const [userExpanded, setUserExpanded] = useState(false);
+  const [breakpoint2, setBreakpoint2] = useState<boolean>(window.innerWidth < 1217);
+  const [breakpoint4, setBreakpoint4] = useState<boolean>(window.innerWidth < 654);
+
+  // =============================== ICONS FUNCTIONS ===============================
+  const [activeIcon, setActiveIcon] = useState<string | null>(null);
+  const [iconStates, setIconStates] = useState<{[key: string]: {active: boolean; name: string | null}}>(
+    iconFunctions?.reduce((acc, item) => ({...acc, [item.uniqueValue]: {active: false, name: null}}), {}) ?? {},
+  );
+  const iconFunctionContainerRef = useRef<HTMLDivElement>(null);
+  const iconFunctionRefs = iconFunctions?.map(() => useRef<HTMLDivElement>(null));
+
+  const handleIconClick = (iconName: string) => {
+    setActiveIcon(prevActiveIcon => (prevActiveIcon === iconName ? null : iconName));
+    setIconStates(prevIconStates => ({
+      ...Object.keys(prevIconStates).reduce((acc, key) => {
+        acc[key] = {active: key === iconName, name: prevIconStates[key].name};
+        return acc;
+      }, {} as {[key: string]: {active: boolean; name: string | null}}),
+    }));
+  };
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        Object.values(iconStates).some(icon => icon.active) &&
+        !event.defaultPrevented &&
+        !iconFunctionContainerRef.current?.contains(event.target as Node)
+      ) {
+        setIconStates(prevIconStates =>
+          Object.keys(prevIconStates).reduce((acc, key) => ({...acc, [key]: {active: false, name: prevIconStates[key].name}}), {}),
+        );
+        setActiveIcon(null);
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [iconFunctionContainerRef, iconStates]);
+
+  // =============================== REF USER ===============================
+  const userDropRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (userDropRef.current && !userDropRef.current.contains(event.target as Node)) {
+        setUserExpanded(false);
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [userDropRef]);
+
+  useEffect(() => {
+    // Función para manejar cambios de tamaño de la ventana
+    function handleResize() {
+      setBreakpoint2(window.innerWidth < 1217);
+      setBreakpoint4(window.innerWidth < 654);
+    }
+
+    // Agregar un event listener para cambios de tamaño de la ventana
+    window.addEventListener('resize', handleResize);
+
+    // Limpiar el event listener al desmontar el componente
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <div className="elv-component elv-header" {...props}>
+      <div className={`navbar-container ${className ? className : ''}`}>
+        <nav className="navbar container" role="navigation" aria-label="main navigation">
+          <div className="navbar-brand">
+            <a
+              role="button"
+              className={`navbar-burger ${expandedBurger ? 'is-active' : ''}`}
+              aria-label="menu"
+              aria-expanded="false"
+              data-target="rentas-ctes-header"
+              onClick={() => setExpandedBurger(!expandedBurger)}
+            >
+              <img src={burger} alt="Burger SVG" />
+            </a>
+            {logo && (
+              <>
+                {breakpoint4 ? (
+                  <a
+                    className="navbar-item px-1"
+                    onClick={() => {
+                      logoMobile?.onClick && logoMobile.onClick();
+                    }}
+                  >
+                    <img src={logoMobile?.src} alt="Logo Header" height={logo.height} width={logo.width} />
+                  </a>
+                ) : (
+                  <a
+                    className="navbar-item pt-0"
+                    onClick={() => {
+                      logo?.onClick && logo.onClick();
+                    }}
+                  >
+                    <img src={logo.src} alt="Logo Header" height={logo.height} width={logo.width} />
+                  </a>
+                )}
+              </>
+            )}
+          </div>
+
+          <div id="rentas-ctes-header" className={`navbar-menu ${expandedBurger ? 'is-active' : ''}`}>
+            <div className="navbar-start">
+              {navItems &&
+                navItems.map(item => (
+                  <a key={generateRandomKey()} className="navbar-item item-text" onClick={item.onClick}>
+                    {item.label}
+                  </a>
+                ))}
+            </div>
+          </div>
+          <div className="navbar-end is-flex">
+            <div className="icon-functions is-flex" ref={iconFunctionContainerRef}>
+              {iconFunctions &&
+                iconFunctions.map((item, index) => (
+                  <div key={generateRandomKey()} className={['item-icon '].join('')} ref={iconFunctionRefs && iconFunctionRefs[index]}>
+                    <span>
+                      <Button
+                        {...item.buttonIcon}
+                        onClick={() => {
+                          handleIconClick(item.uniqueValue);
+                          item.buttonIcon?.onClick;
+                        }}
+                      />
+                    </span>
+                    {item.badge && (
+                      <>
+                        <span className="item-icon__badge-notif">
+                          <Badge {...item.badge}></Badge>
+                        </span>
+                      </>
+                    )}
+                    {item.iconDropComponent && (
+                      <div
+                        className={`drop-component drop-component__icon ${
+                          iconStates[item.uniqueValue] && iconFunctions[index].uniqueValue === activeIcon ? 'is-active' : ''
+                        }`}
+                      >
+                        {item.iconDropComponent}
+                      </div>
+                    )}
+                  </div>
+                ))}
+            </div>
+
+            {logged ? (
+              <>
+                {breakpoint2 ? (
+                  <div className="navbar-item user-mobile is-flex is-align-items-center" ref={userDropRef}>
+                    <div className="user-mobile__icon">
+                      <Icon icon="far fa-user" size="20px" className="pb-1 is-clickable" onClick={() => setUserExpanded(!userExpanded)} />
+                    </div>
+                    {userInfo.userDropComponent && (
+                      <div className={`drop-component drop-component__user ${userExpanded && 'is-active'}`}>
+                        {userInfo.userDropComponent}
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <div className="navbar-item user-desktop" ref={userDropRef}>
+                    <div className="user-sec is-flex is-align-items-center" onClick={() => setUserExpanded(!userExpanded)}>
+                      <div className="user-sec__text">
+                        <p className="names">
+                          Hola, {userInfo.name} {userInfo.lastName}
+                        </p>
+                        <p className="description">{userInfo.description}</p>
+                      </div>
+                      <div className="user-sec__icons is-flex">
+                        {userInfo.avatar?.icon ? (
+                          <div className="user-icon">
+                            <Icon icon={userInfo.avatar.icon.icon}></Icon>
+
+                            {userInfo.avatar.stateColor && (
+                              <span className="user-icon__state">
+                                <Icon icon="fa fa-circle" color={userInfo.avatar.stateColor} size="10px" />
+                              </span>
+                            )}
+                          </div>
+                        ) : (
+                          <img src={userInfo.avatar?.img?.src} width={'16px'} height={'16px'} style={{borderRadius: '50%'}}></img>
+                        )}
+                        <Icon icon="fa-solid fa-chevron-down"></Icon>
+                      </div>
+                    </div>
+
+                    {userInfo.userDropComponent && (
+                      <div className={`drop-component drop-component__user ${userExpanded && 'is-active'}`}>
+                        {userInfo.userDropComponent}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </>
+            ) : (
+              <>
+                {breakpoint2 ? (
+                  <div className="navbar-item user-mobile is-flex is-align-items-center" ref={userDropRef}>
+                    <div className="user-mobile__icon">
+                      <Icon icon="far fa-user" size="20px" className="pb-1 is-clickable" onClick={() => setUserExpanded(!userExpanded)} />
+                    </div>
+                    {notUserDropComponent && (
+                      <div className={`drop-component drop-component__user ${userExpanded && 'is-active'}`}>{notUserDropComponent}</div>
+                    )}
+                  </div>
+                ) : (
+                  <div className="navbar-item">
+                    <Button {...buttonLogin} />
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </nav>
+      </div>
+    </div>
+  );
+};

package/src/stories/Layout/HeaderTable/HeaderTable.scss

@@ -0,0 +1,21 @@
+@import '/src/sass/utilities/variables';
+
+.elv-header-table {
+  display: inline-flex;
+  align-items: center;
+
+  .header-table {
+    gap: 16px;
+  }
+
+  .menuButton {
+    position: relative;
+
+    &__dropComponent {
+      position: absolute;
+      right: 0px;
+      top: 100%;
+      z-index: 100;
+    }
+  }
+}