dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Layout/Sidebar/Sidebar.tsx

@@ -1,129 +0,0 @@
-import React, {useEffect, useRef, useState} from 'react';
-import './Sidebar.scss';
-import {Search, ISearch} from '../../Form/Search/Search';
-import {Button, IButton} from '../../Elements/Button/Button';
-import {Pagination, IPagination} from '../../Components/Pagination/Pagination';
-import {generateRandomKey} from '../../../utils/functions';
-
-export interface ISidebar extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  buttonShow: IButton;
-  title: string;
-  search?: ISearch;
-
-  listOfComponents: React.ReactNode[];
-  listLineSeparation: boolean;
-  listClassName: string;
-
-  itemsPerPage: number;
-
-  // boolean
-  show: boolean;
-
-  // events
-  onShow?: () => void;
-  onClose?: () => void;
-
-  // react
-  className?: string;
-}
-
-export const Sidebar = ({
-  className,
-  buttonShow,
-  title,
-  show,
-  search,
-  itemsPerPage = 5,
-  listClassName = '',
-  listOfComponents,
-  listLineSeparation = false,
-  onShow,
-  onClose,
-  ...props
-}: ISidebar) => {
-  const [showState, setShowState] = useState(show);
-  const [page, setPage] = useState(1);
-  const [componentHeight, setComponentHeight] = useState(0);
-  const componentRef = useRef<HTMLDivElement>(null);
-  const listItemsRef = useRef<HTMLDivElement>(null);
-  const [itemsPerPageState, setItemsPerPageState] = useState(itemsPerPage);
-
-  useEffect(() => {
-    setShowState(show);
-  }, [show]);
-
-  useEffect(() => {
-    setItemsPerPageState(itemsPerPage);
-  }, [itemsPerPage]);
-
-  const minHeight = `${itemsPerPage * componentHeight + itemsPerPage}px`;
-
-  return (
-    <div className="elv-component elv-sidebar" {...props}>
-      {!showState && (
-        <div className="is-flex is-justify-content-end">
-          <Button
-            {...buttonShow}
-            onClick={() => {
-              setShowState(true);
-              onShow && onShow();
-            }}
-          ></Button>
-        </div>
-      )}
-      {showState && (
-        <div
-          className="modal-background"
-          onClick={() => {
-            setShowState(false);
-            onClose && onClose();
-          }}
-        ></div>
-      )}
-      <div className={`sidebar-container is-flex is-flex-direction-column ${showState ? 'is-open' : ''} ${className ? className : ''}`}>
-        <div className="sidebar-container__header is-flex is-align-items-center">
-          <Button
-            fill="unstyled"
-            icon="fa-solid fa-xmark"
-            size="medium"
-            onClick={() => {
-              setShowState(false);
-              onClose && onClose();
-            }}
-          ></Button>
-          <p className="title is-5">{title}</p>
-        </div>
-        {search && (
-          <div className="sidebar-container__search">
-            <Search {...search}></Search>
-          </div>
-        )}
-        <div
-          ref={listItemsRef}
-          className={`sidebar-container__list is-flex is-flex-direction-column is-gap-4 ${listClassName} `}
-          style={{minHeight}}
-        >
-          {listOfComponents.slice((page - 1) * itemsPerPage, page * itemsPerPage).map((comp, index) => (
-            <div key={generateRandomKey()} ref={componentRef} className={`listItem ${listLineSeparation ? ' line-separation' : ''}`}>
-              {comp}
-            </div>
-          ))}
-        </div>
-        <div className="sidebar-container__pagination is-flex is-justify-content-center is-align-items-end">
-          {listOfComponents?.length > itemsPerPage && (
-            <Pagination
-              onChangePage={value => {
-                setPage(value);
-              }}
-              minItemsPerPage={itemsPerPageState}
-              totalItems={listOfComponents.length}
-              showTotals={true}
-              isColumn
-            ></Pagination>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/Layout/SidebarEmpty/SidebarEmpty.scss

@@ -1,64 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-sidebarEmpty {
-  .sidebar-container {
-    box-shadow: -15px 0px 40px -1px rgba(14, 31, 53, 0.2);
-    border-radius: 16px 0px 0px 16px;
-    background-color: $white;
-    height: 100%;
-    position: fixed;
-    width: 315px;
-    top: 0;
-    z-index: 10000;
-
-    &__header {
-      padding: 10px 0px;
-      border-bottom: 1px solid $truegray-300;
-    }
-    &__button {
-      width: 24px;
-    }
-    &__content {
-      height: 100%;
-    }
-
-    &--right {
-      right: -315px;
-      transition: right 0.3s ease-in-out;
-      border-radius: 16px 0px 0px 16px;
-
-      &.is-open {
-        right: 0;
-      }
-      @media screen and (max-width: $mobile) {
-        right: -80%;
-        width: 80%;
-      }
-    }
-
-    &--left {
-      left: -315px;
-      transition: left 0.3s ease-in-out;
-      border-radius: 0px 16px 16px 0px;
-
-      &.is-open {
-        left: 0;
-      }
-      @media screen and (max-width: $mobile) {
-        left: -80%;
-        width: 80%;
-      }
-    }
-
-    .button-container {
-      gap: 16px;
-      box-shadow: 1px -6px 16px 0px rgba(151, 151, 151, 0.25);
-      border-radius: 0px 0px 0px 16px;
-      padding-top: 30px;
-
-      @media screen and (max-width: $mobile) {
-        padding-left: 0px !important;
-      }
-    }
-  }
-}

package/src/stories/Layout/SidebarEmpty/SidebarEmpty.stories.tsx

@@ -1,26 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {SidebarEmpty} from './SidebarEmpty';
-
-export default {
-  title: 'Layout/SidebarEmpty',
-  component: SidebarEmpty,
-  args: {
-    buttonShow: {
-      label: 'Mostrar',
-      fill: 'solid',
-      color: 'primary',
-      icon: 'fa-solid fa-chevron-left',
-    },
-    title: 'Agregar actividad',
-    optionalButton: {fill: 'outline', color: 'secondary', size: 'normal', label: 'Cancelar'},
-    optionalButton2: {fill: 'solid', color: 'tertiary', size: 'normal', label: 'Agregar'},
-    position: 'right',
-    show: true,
-    footerbutton: true,
-  },
-} as ComponentMeta<typeof SidebarEmpty>;
-
-const Template: ComponentStory<typeof SidebarEmpty> = args => <SidebarEmpty {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {};

package/src/stories/Layout/SidebarEmpty/SidebarEmpty.tsx

@@ -1,100 +0,0 @@
-import './SidebarEmpty.scss';
-import {Button, IButton} from '../../Elements/Button/Button';
-import {Checkbox, ICheckbox} from '../../Form/Checkbox/Checkbox';
-import {useEffect, useState} from 'react';
-
-export interface ISidebarEmpty extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // BASE
-  title: string;
-  show: boolean;
-  button: IButton;
-  buttonShow: IButton;
-  optionalButton: IButton;
-  optionalButton2: IButton;
-  children?: React.ReactNode;
-  position: 'left' | 'right';
-  footerbutton: boolean;
-
-  // IS-OPTIONS
-
-  // EVENTS
-
-  // GENERIC
-  className?: string;
-}
-
-export const SidebarEmpty = ({
-  className,
-  title,
-  show,
-  button,
-  buttonShow,
-  optionalButton,
-  optionalButton2,
-  children,
-  position = 'right',
-  footerbutton,
-  ...props
-}: ISidebarEmpty) => {
-  const [showState, setShowState] = useState(show);
-
-  useEffect(() => {
-    setShowState(show);
-  }, [show]);
-
-  return (
-    <div className="elv-component elv-sidebarEmpty" {...props}>
-      {!showState && (
-        <div className="is-flex is-justify-content-end">
-          <Button
-            {...buttonShow}
-            onClick={() => {
-              setShowState(true);
-            }}
-          ></Button>
-        </div>
-      )}
-      {showState && (
-        <div
-          className="modal-background"
-          onClick={() => {
-            setShowState(false);
-          }}
-        ></div>
-      )}
-      <div
-        className={[
-          `sidebar-container is-flex is-flex-direction-column is-justify-content-space-between ${showState ? 'is-open' : ''}`,
-          ` sidebar-container--${position}`,
-          `${className ? ' ' + className : ''}`,
-        ].join('')}
-      >
-        <div>
-          <div className="sidebar-container__header is-flex is-align-items-center mb-6 is-gap-4">
-            <div className="sidebar-container__button mr-3">
-              <Button
-                {...button}
-                fill="unstyled"
-                icon="fa-solid fa-xmark"
-                size="medium"
-                onClick={() => {
-                  setShowState(false);
-                }}
-              ></Button>
-            </div>
-            <p className="title is-5 has-text-link-dark">{title}</p>
-          </div>
-          <div className="sidebar-container__content">{children}</div>
-        </div>
-        {footerbutton && (
-          <div>
-            <div className="button-container is-flex pl-5 pb-5">
-              <div className="button-container__opt ml-5">{optionalButton && <Button {...optionalButton}></Button>}</div>
-              <div className="button-container__opt">{optionalButton2 && <Button {...optionalButton2}></Button>}</div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/stories/Layout/Subtitle/Subtitle.scss

@@ -1,88 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.subtitle-component {
-  display: flex;
-  justify-content: space-between;
-
-  &--border-bot-gray {
-    border-bottom: 1px solid $truegray-300;
-  }
-
-  &__left {
-    gap: 5px;
-    padding-bottom: 10px;
-
-    .left-backButton {
-      .button {
-        font-size: 20px;
-        padding-top: 10px;
-      }
-    }
-
-    .left-texts {
-      &__principal {
-        gap: 16px;
-
-        &__rectangle {
-          width: 24px;
-          height: 16px;
-          background-color: $primary-600;
-        }
-
-        &__label {
-          font-weight: $fw-heavy;
-          font-size: 24px;
-          line-height: 33px;
-
-          &--lg {
-            font-size: 32px;
-          }
-        }
-      }
-
-      &__description {
-        color: $text-600;
-      }
-    }
-  }
-
-  &__right {
-    gap: 15px;
-
-    .right-linkButton {
-      .button {
-        padding: 0px;
-      }
-    }
-
-    .right-switcher {
-      gap: 10px;
-
-      &__label {
-        font-size: 14px;
-        color: $text-600;
-      }
-    }
-
-    .right-editButtons {
-      gap: 30px;
-
-      &__addButton {
-        .button {
-          color: $primary-600;
-        }
-      }
-
-      &__removeButton {
-        .button {
-          color: $error-600;
-        }
-      }
-    }
-
-    .right-label {
-      font-weight: $fw-semibold;
-      font-size: 18px;
-    }
-  }
-}

package/src/stories/Layout/Subtitle/Subtitle.stories.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import icon from '../../Elements/Icon/icono.svg';
-
-import {Subtitle} from './Subtitle';
-
-export default {
-  title: 'Layout/Subtitle',
-  component: Subtitle,
-  args: {
-    border: true,
-  },
-} as ComponentMeta<typeof Subtitle>;
-
-const Template: ComponentStory<typeof Subtitle> = args => <Subtitle {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {label: 'Datos de contacto'};
-
-export const Example_SVG_Icon = Template.bind({});
-Example_SVG_Icon.args = {label: 'Datos de contacto', leftIcon: {icon: icon, type: 'svg_icon', size: '18px'}};
-
-export const AllPropsActive = Template.bind({});
-AllPropsActive.args = {
-  label: 'Datos de contacto',
-  leftIcon: {icon: 'fa-solid fa-car', size: '18px'},
-  rectangle: true,
-  linkButton: {
-    label: 'Ver más',
-    size: 'small',
-    fill: 'link',
-    type: 'button',
-    onClick: () => console.log('Añadir Clicked'),
-  },
-  iconButton: {
-    size: 'medium',
-    fill: 'unstyled',
-    icon: 'fa-solid fa-magnifying-glass',
-    type: 'button',
-    onClick: () => console.log('Añadir Clicked'),
-  },
-  description: 'Descargá el comprobante. Encontrá más información',
-  switcherLabel: 'Ver disponibles',
-  switcher: {size: 'md', disabled: false, defaultChecked: true, onCheck: check => console.log('Switcher Check ' + check)},
-  labelRight: '$ 12.000.662',
-};

package/src/stories/Layout/Subtitle/Subtitle.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import './Subtitle.scss';
-import {Icon, IIcon} from '../../Elements/Icon/Icon';
-import {Button, IButton} from '../../Elements/Button/Button';
-import {Switch, ISwitch} from '../../Form/Switch/Switch';
-
-export interface ISubtitle extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  size?: 'md' | 'lg';
-  //LEFT
-  label?: string;
-  backButton?: IButton;
-  leftIcon?: IIcon;
-  rectangle?: boolean;
-  description?: string;
-  actionButtons?: IButton[];
-  //RIGHT
-  addButton?: IButton;
-  removeButton?: IButton;
-  linkButton?: IButton;
-  iconButton?: IButton;
-  switcherLabel?: string;
-  switcher?: ISwitch;
-  labelRight?: string;
-
-  // boolean
-  border?: boolean;
-
-  // react
-  className?: string;
-}
-
-export const Subtitle = ({
-  className,
-  border,
-  size,
-  label,
-  description,
-  backButton,
-  leftIcon,
-  rectangle,
-  actionButtons,
-  addButton,
-  removeButton,
-  linkButton,
-  iconButton,
-  switcherLabel,
-  switcher,
-  labelRight,
-  ...props
-}: ISubtitle) => {
-  return (
-    <div className="elv-component elv-subtitle" {...props}>
-      <div className={`subtitle-component ${border && 'subtitle-component--border-bot-gray'} ${className ? className : ''}`}>
-        <div className="subtitle-component__left is-flex is-justify-content-start is-align-items-start">
-          {backButton && (
-            <div className="left-backButton">
-              <Button {...backButton}></Button>
-            </div>
-          )}
-          <div className="left-texts">
-            <div className="left-texts__principal is-flex is-align-items-center">
-              {leftIcon && <Icon {...leftIcon}></Icon>}
-              {rectangle && <span className="left-texts__principal__rectangle"></span>}
-              {label && <p className={`left-texts__principal__label left-texts__principal__label--${size}`}>{label}</p>}
-            </div>
-            {description && <p className={`left-texts__description left-texts__description--${size}`}>{description}</p>}
-          </div>
-        </div>
-        <div className="subtitle-component__right is-flex is-align-items-center">
-          {addButton || removeButton ? (
-            <div className="right-editButtons is-flex">
-              {addButton && (
-                <span className="right-editButtons__addButton">
-                  <Button {...addButton}></Button>
-                </span>
-              )}
-              {removeButton && (
-                <span className="right-editButtons__removeButton">
-                  <Button {...removeButton}></Button>
-                </span>
-              )}
-            </div>
-          ) : (
-            <></>
-          )}
-          {linkButton && (
-            <span className="right-linkButton">
-              <Button {...linkButton}></Button>
-            </span>
-          )}
-          {iconButton && (
-            <span>
-              <Button {...iconButton}></Button>
-            </span>
-          )}
-          {switcher && (
-            <div className="right-switcher is-flex is-align-items-center">
-              {switcherLabel && <p className="right-switcher__label">{switcherLabel}</p>}
-              <Switch {...switcher}></Switch>
-            </div>
-          )}
-          {labelRight && <p className="right-label">{labelRight}</p>}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/Layout/Title/Title.scss

@@ -1,79 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.title-component-container {
-  min-width: 320px;
-
-  &__backButton {
-    width: 100%;
-  }
-
-  .title-component {
-    gap: 5px;
-
-    &--center {
-      align-items: center;
-      text-align: center;
-    }
-
-    &--right {
-      align-items: end;
-      text-align: right;
-    }
-
-    &__subtitle {
-      font-size: 14px;
-      line-height: 20px;
-      color: $text-400;
-    }
-
-    &__title {
-      font-size: 32px;
-      font-weight: $fw-heavy;
-      color: $text-900;
-    }
-
-    &__content {
-      &--center {
-        align-items: center;
-        text-align: center;
-      }
-
-      &--right {
-        align-items: end;
-        text-align: right;
-      }
-
-      &--backButton {
-        max-width: 700px;
-      }
-    }
-
-    &__description {
-      font-weight: $fw-regular;
-    }
-
-    &__secondDescription {
-      padding-top: 20px;
-      font-weight: $fw-regular;
-    }
-
-    &__actionButtons {
-      padding-top: 28px;
-      padding-bottom: 28px;
-      gap: 10px;
-
-      .button {
-        font-weight: $fw-medium;
-      }
-    }
-
-    &__button {
-      margin-top: 10px;
-    }
-
-    &__search {
-      width: 100%;
-      max-width: 600px;
-    }
-  }
-}