dgrcorrientes-modulos 1.0.3 → 1.0.4

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

@@ -1,190 +0,0 @@
-@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

@@ -1,223 +0,0 @@
-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

@@ -1,278 +0,0 @@
-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

@@ -1,21 +0,0 @@
-@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;
-    }
-  }
-}