dgrcorrientes-modulos 1.0.0

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

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

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

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

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

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

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

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

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