dgrcorrientes-modulos 1.0.0

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

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

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

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