dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Layout/HeaderTable/HeaderTable.stories.tsx

@@ -1,112 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-
-import {HeaderTable} from './HeaderTable';
-import {Tooltip} from '../../Components/Tooltip/Tooltip';
-
-export default {
-  title: 'Layout/HeaderTable',
-  component: HeaderTable,
-  args: {
-    menuDropComponent: (
-      <Tooltip active contentType="text" text="Usá esta Base Imponible para tu declaración de Bienes Personales 2020" trianglePos="none" />
-    ),
-  },
-} as ComponentMeta<typeof HeaderTable>;
-
-const Template: ComponentStory<typeof HeaderTable> = args => <HeaderTable {...args} />;
-
-export const Example1 = Template.bind({});
-Example1.args = {
-  search: {
-    size: 'normal',
-    placeholder: 'Buscar...',
-    backgroundColor: '#F5F5F5',
-    buttonSearch: {
-      fill: 'solid',
-      icon: 'fa-solid fa-magnifying-glass',
-      type: 'button',
-      onClick: () => console.log('Button Clicked'),
-    },
-    onChange: value => console.log(value),
-  },
-  selectList: [
-    {
-      size: 'md',
-      fill: 'outline',
-      placeholder: 'Default Select',
-      defaultValue: '1',
-      options: [
-        {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-        {value: '2', label: 'Option 2'},
-        {value: '3', label: 'Option 3'},
-      ],
-      onChangeSelect: value => {
-        console.log('Select changed' + ' ' + value);
-      },
-    },
-    {
-      size: 'md',
-      fill: 'outline',
-      placeholder: 'Default Select',
-      options: [
-        {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-        {value: '2', label: 'Option 2'},
-        {value: '3', label: 'Option 3'},
-      ],
-      onChangeSelect: value => {
-        console.log('Select changed' + ' ' + value);
-      },
-    },
-    {
-      size: 'md',
-      fill: 'outline',
-      placeholder: 'Default Select',
-      options: [
-        {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-        {value: '2', label: 'Option 2'},
-        {value: '3', label: 'Option 3'},
-      ],
-      onChangeSelect: value => {
-        console.log('Select changed' + ' ' + value);
-      },
-    },
-  ],
-  button: {
-    fill: 'solid',
-    color: 'primary',
-    label: 'Button',
-    icon: 'fa-solid fa-plus',
-  },
-  menuButton: {
-    fill: 'unstyled',
-    size: 'medium',
-    color: 'primary',
-    icon: 'fa-solid fa-ellipsis-vertical',
-  },
-};
-
-export const Example2 = Template.bind({});
-Example2.args = {
-  search: {
-    size: 'normal',
-    placeholder: 'Buscar...',
-    backgroundColor: '#F5F5F5',
-    buttonSearch: {
-      fill: 'solid',
-      icon: 'fa-solid fa-magnifying-glass',
-      type: 'button',
-      onClick: () => console.log('Button Clicked'),
-    },
-    onChange: value => console.log(value),
-  },
-  pagination: {
-    totalItems: 340,
-    minItemsPerPage: 10,
-    onChangePage: page => {
-      console.log('Page selected: ' + page);
-    },
-    onChangeShowedItems: showedItems => {
-      console.log('ShowedItems: ' + showedItems);
-    },
-  },
-};

package/src/stories/Layout/HeaderTable/HeaderTable.tsx

@@ -1,72 +0,0 @@
-import {Search, ISearch} from '../../Form/Search/Search';
-import {Pagination, IPagination} from '../../Components/Pagination/Pagination';
-import {Select, ISelect} from '../../Form/Select/Select';
-import {Button, IButton} from '../../Elements/Button/Button';
-import './HeaderTable.scss';
-import {useEffect, useRef, useState} from 'react';
-import {generateRandomKey} from '../../../utils/functions';
-
-export interface IHeaderTable extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  search?: ISearch;
-  pagination?: IPagination;
-  selectList?: ISelect[];
-  button?: IButton;
-  menuButton?: IButton;
-  menuDropComponent?: React.ReactNode;
-
-  // react
-  className?: string;
-}
-
-export const HeaderTable = ({className, search, pagination, selectList, button, menuButton, menuDropComponent, ...props}: IHeaderTable) => {
-  const [menuExpanded, setMenuExpanded] = useState(false);
-
-  const menuDropRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (menuDropRef.current && !menuDropRef.current.contains(event.target as Node)) {
-        setMenuExpanded(false);
-      }
-    }
-
-    document.addEventListener('click', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [menuDropRef]);
-
-  return (
-    <div className={`elv-component elv-header-table ${className ? className : ''}`} {...props}>
-      <div className="header-table is-flex">
-        {search && (
-          <span>
-            <Search {...search}></Search>
-          </span>
-        )}
-        {selectList &&
-          selectList.map(selec => (
-            <span key={generateRandomKey()}>
-              <Select {...selec}></Select>
-            </span>
-          ))}
-        {pagination && <Pagination {...pagination}></Pagination>}
-        {button && <Button {...button}></Button>}
-        {menuButton && (
-          <div ref={menuDropRef} className="menuButton">
-            <Button
-              {...menuButton}
-              onClick={() => {
-                setMenuExpanded(!menuExpanded);
-                menuButton.onClick && menuButton.onClick();
-              }}
-            ></Button>
-
-            {menuDropComponent && menuExpanded && <div className="menuButton__dropComponent">{menuDropComponent}</div>}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/stories/Layout/Sidebar/Sidebar.scss

@@ -1,50 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-sidebar {
-  .sidebar-container {
-    box-shadow: 0px 90px 200px rgba(5, 29, 61, 0.12);
-    border-radius: 16px 0px 0px 16px;
-    padding: 20px 0px 56px 0px;
-    position: fixed;
-    top: 0;
-    right: -315px;
-    width: 315px;
-    height: 100%;
-    transition: right 0.3s ease-in-out;
-    display: block;
-    background-color: $white;
-    z-index: 10000;
-    // overflow: hidden;
-
-    &.is-open {
-      right: 0;
-    }
-
-    &__header {
-      gap: 16px;
-      padding: 0px 16px 20px 16px;
-      border-bottom: 1px solid $truegray-100;
-
-      .title {
-        color: $primary-600;
-      }
-    }
-
-    &__search {
-      padding: 25px 16px 6px 16px;
-    }
-
-    &__list {
-      .line-separation {
-        border-bottom: 1px solid $truegray-300;
-      }
-    }
-
-    &__pagination {
-      position: fixed;
-      bottom: 0;
-      padding: 25px;
-      background-color: $white;
-    }
-  }
-}