dgrcorrientes-modulos 1.0.0

package/src/stories/Form/UploadFileItem/UploadFileItem.tsx

@@ -0,0 +1,89 @@
+import './UploadFileItem.scss';
+import {ProgressBar, IProgressBar} from '../../Elements/ProgressBar/ProgressBar';
+import {IButton, Button} from '../../Elements/Button/Button';
+import {formatFileSize, getIconForFile} from '../../../utils/functions';
+import {IIcon, Icon} from '../../Elements/Icon/Icon';
+
+export interface IUploadFileItem extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // BASE
+  /**Archivo */
+  file?: File;
+  /**Nombre del archivo */
+  file_name?: string;
+  /**Tamaño en bytes */
+  file_size?: number;
+  progressBar?: IProgressBar;
+  showBar: boolean;
+
+  // IS-OPTIONS
+
+  // EVENTS
+  onPreview?: (file: File) => void;
+  onDelete?: (file: File) => void;
+
+  // GENERIC
+  className?: string;
+}
+
+export const UploadFileItem = ({
+  className,
+  progressBar,
+  showBar,
+  file,
+  file_name,
+  file_size,
+  onPreview,
+  onDelete,
+  ...props
+}: IUploadFileItem) => {
+  return (
+    <div className="elv-component elv-uploadfile" {...props}>
+      <div className={['uploadfile p-4 is-flex is-align-items-center is-relative ', `${className ? ' ' + className : ''}`].join('')}>
+        <div className="mr-5">{file_name && <Icon icon={getIconForFile(file_name)} className="has-tc-primary-600" size="24px" />}</div>
+        <div className="uploadfile__info is-flex-direction-column ">
+          <div className="is-flex is-justify-content-space-between is-align-items-center ">
+            <div className="is-flex is-align-items-center">
+              {file_name ? (
+                <p className="file_name is-size-7">{file_name}</p>
+              ) : file ? (
+                <p className="file_name is-size-7">{file.name}</p>
+              ) : (
+                <></>
+              )}
+              <span className="uploadfile__elipse has-background-grey mt-2 mr-2 ml-2"></span>
+              <Button
+                label="Previsualizar"
+                fill="unstyled"
+                className="preview"
+                onClick={() => {
+                  file && onPreview ? onPreview(file) : null;
+                }}
+              />
+            </div>
+
+            {file_size ? (
+              <div className="is-size-7">{formatFileSize(file_size)}</div>
+            ) : file ? (
+              <div className="is-size-7">{formatFileSize(file.size)}</div>
+            ) : (
+              <></>
+            )}
+          </div>
+          {showBar && (
+            <div className="uploadfile__progress pt-2">
+              <ProgressBar {...progressBar}></ProgressBar>
+            </div>
+          )}
+        </div>
+        <div
+          className="uploadfile__icon is-absolute"
+          onClick={() => {
+            file && onDelete ? onDelete(file) : null;
+          }}
+        >
+          <Icon icon="fa-solid fa-circle-xmark fa-2xl" />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/stories/Form/UploadFiles/UploadFiles.scss

@@ -0,0 +1,17 @@
+@import '/src/sass/utilities/variables';
+
+.elv-uploadfiles {
+  .uploadfiles {
+    &__data {
+      color: $truegray-400;
+    }
+
+    &__download {
+      width: 483px;
+    }
+
+    .dragging {
+      border: 1px dashed black;
+    }
+  }
+}

package/src/stories/Form/UploadFiles/UploadFiles.stories.tsx

@@ -0,0 +1,32 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {UploadFiles} from './UploadFiles';
+
+export default {
+  title: 'Form/UploadFiles',
+  component: UploadFiles,
+  args: {
+    labelSelection: 'Seleccioná un archivo o arrastralo acá',
+    labelData: 'JPG, PNG ó PDF, tamaño máximo 10MB',
+    maxSizeInMB: 5,
+    maxFiles: 3,
+    defaultFiles: [new File(['archivo1'], 'archivo1.pdf'), new File(['archivo2'], 'archivo2.pdf')],
+    onPreviewFile(file) {
+      console.log('Preview: ' + file.name);
+    },
+    onDeleteFile(file) {
+      console.log('Se eliminó: ' + file.name);
+    },
+    onErrorExtensions(file) {
+      alert('Extensión no permitida');
+    },
+    onErrorSize(file) {
+      alert('Se excedió del tamaño máximo');
+    },
+    acceptedExtensions: ['txt', 'pdf'],
+  },
+} as ComponentMeta<typeof UploadFiles>;
+
+const Template: ComponentStory<typeof UploadFiles> = args => <UploadFiles {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};

package/src/stories/Form/UploadFiles/UploadFiles.tsx

@@ -0,0 +1,177 @@
+import './UploadFiles.scss';
+import {UploadFileItem, IUploadFileItem} from '../UploadFileItem/UploadFileItem';
+import {FormEvent, useState} from 'react';
+import {Icon} from '../../Elements/Icon/Icon';
+
+export interface IUploadFiles extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // BASE
+  labelSelection?: string;
+  labelData?: string;
+  maxSizeInMB: number;
+  maxFiles: number;
+  screenshot: string;
+  icon: string;
+  number: string;
+  progressUpload: number[];
+  // IS-OPTIONS
+  defaultFiles?: File[];
+  acceptedExtensions?: string[];
+
+  // EVENTS
+  onProgressFile?: (file: File) => void;
+  onPreviewFile?: (file: File) => void;
+  onDeleteFile?: (file: File) => void;
+
+  onErrorSize?: (file: File) => void;
+  onErrorExtensions?: (file: File) => void;
+
+  // GENERIC
+  className?: string;
+}
+
+export const UploadFiles = ({
+  className,
+  labelSelection,
+  labelData,
+  maxSizeInMB,
+  maxFiles,
+  progressUpload,
+  defaultFiles,
+  acceptedExtensions,
+  onProgressFile,
+  onPreviewFile,
+  onDeleteFile,
+  onErrorSize,
+  onErrorExtensions,
+  ...props
+}: IUploadFiles) => {
+  const [dragging, setDragging] = useState(false);
+  // const [progress, setProgress] = useState(0);
+  // const [uploadedFile, setUploadedFile] = useState(null);
+  const [fileList, setFileList] = useState<File[]>(() => {
+    if (!acceptedExtensions || acceptedExtensions?.length === 0) {
+      return defaultFiles || [];
+    } else {
+      // Si acceptedExtensions tiene extensiones específicas, filtra defaultFiles por esas extensiones
+      return (defaultFiles || []).filter(file => {
+        const extension = file.name.split('.').pop()?.toLowerCase();
+        return acceptedExtensions?.includes(extension || '');
+      });
+    }
+  });
+
+  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDragging(false);
+
+    const newFiles = e.dataTransfer.files;
+
+    if (newFiles) {
+      handleNewFiles(newFiles);
+    }
+  };
+
+  const onFileDrop = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newFiles = e.target.files;
+
+    if (newFiles) {
+      handleNewFiles(newFiles);
+    }
+  };
+
+  const handleNewFiles = (newFiles: FileList) => {
+    if (newFiles.length <= maxFiles && fileList.length + newFiles.length <= maxFiles) {
+      for (let index = 0; index < newFiles.length; index++) {
+        const newFile = newFiles[index];
+        const fileNameParts = newFile.name.split('.');
+        const extension = fileNameParts.length > 1 ? fileNameParts.pop()?.toLowerCase() : '';
+
+        // Verificar si la extensión está permitida
+        if (acceptedExtensions?.length === 0 || acceptedExtensions?.includes(extension || '')) {
+          if (newFile.size <= maxSizeInMB * 1024 * 1024) {
+            onProgressFile && onProgressFile(newFile);
+          } else {
+            // alert('El archivo es demasiado grande. El tamaño máximo es de ' + maxSizeInMB + ' megabytes.');
+            onErrorSize && onErrorSize(newFile);
+            return;
+          }
+
+          setFileList(prevFileList => [...prevFileList, newFile]);
+        } else {
+          // alert('La extensión del archivo no está permitida.');
+          onErrorExtensions && onErrorExtensions(newFile);
+          return;
+        }
+      }
+    } else {
+      alert('La cantidad de archivos exceden el máximo que es: ' + maxFiles + '.');
+      return;
+    }
+  };
+
+  const removeFileFromList = (fileToRemove: File) => {
+    const updatedList = fileList.filter(file => file !== fileToRemove);
+    setFileList(updatedList);
+  };
+
+  return (
+    <div className="elv-component elv-uploadfiles" {...props}>
+      <div
+        className={[
+          'uploadfiles is-flex is-flex-direction-column is-align-items-center is-gap-4 p-5',
+          `${className ? ' ' + className : ''}`,
+        ].join('')}
+      >
+        <div
+          className={`uploadfiles__files file ${dragging ? 'dragging' : ''}`}
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDragOver={e => e.preventDefault()}
+          onDrop={handleDrop}
+        >
+          <label htmlFor="file-input" className="file-label">
+            <input id="file-input" className="file-input" type="file" name="resume" onChange={onFileDrop} multiple />
+            <span className="file-cta px-6 py-5 is-flex-direction-column">
+              <span className="file-icon">
+                <Icon icon="fas fa-upload has-text-grey-dark mb-3"></Icon>
+              </span>
+              <span className="file-label has-text-grey-dark">{labelSelection}</span>
+            </span>
+          </label>
+        </div>
+        <div className="uploadfiles__data">{labelData}</div>
+        {fileList.length > 0 ? (
+          <div>
+            {fileList.map((item, index) => (
+              <div key={index} className="uploadfiles__download mb-3">
+                <UploadFileItem
+                  showBar={progressUpload && progressUpload[index] && progressUpload[index] !== 100 ? true : false}
+                  file={item}
+                  file_name={item.name}
+                  file_size={item.size}
+                  onPreview={file => {
+                    onPreviewFile && onPreviewFile(file);
+                  }}
+                  onDelete={file => {
+                    onDeleteFile && onDeleteFile(file);
+                    removeFileFromList(file);
+                  }}
+                  progressBar={{value: progressUpload && progressUpload[index] ? progressUpload[index] : 0}}
+                />
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};

package/src/stories/Layout/Footer/Footer.scss

@@ -0,0 +1,129 @@
+@import '/src/sass/utilities/variables';
+
+.elv-footer {
+  width: 100%;
+
+  .footer-component {
+    border-top: 4px solid $truegray-200;
+    background-color: $white;
+    min-width: 320px;
+
+    &__container {
+      gap: 16px;
+      padding-top: 24px;
+      padding-bottom: 24px;
+
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+
+      @media screen and (max-width: 870px) {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      @media screen and (max-width: $mobile) {
+        grid-template-columns: 1fr;
+        gap: 48px;
+        align-items: center;
+        justify-content: center;
+      }
+
+      @media screen and (max-width: $desktopFullHd) {
+        padding-left: 10%;
+        padding-right: 10%;
+      }
+
+      @media screen and (min-width: $desktopFullHd) {
+        padding-left: 320px;
+        padding-right: 320px;
+      }
+
+      .button {
+        padding: 2px;
+      }
+
+      .column-item {
+        gap: 16px;
+
+        &__title {
+          font-weight: $fw-medium;
+          font-size: 24px;
+          width: 100%;
+        }
+      }
+
+      .final-item {
+        gap: 19px;
+
+        &__title {
+          padding-bottom: 2px;
+          font-weight: $fw-medium;
+          font-size: 24px;
+        }
+
+        &__phoneNumber {
+          font-size: 20px;
+          font-weight: $fw-medium;
+        }
+      }
+    }
+
+    &__end {
+      background-color: $truegray-100;
+      padding-top: 16px;
+      padding-bottom: 16px;
+
+      @media screen and (max-width: $desktopFullHd) {
+        padding-left: 10%;
+        padding-right: 10%;
+      }
+
+      @media screen and (min-width: $desktopFullHd) {
+        padding-left: 320px;
+        padding-right: 320px;
+      }
+
+      .logos {
+        gap: 24px;
+        padding-bottom: 16px;
+
+        @media screen and (max-width: $mobile) {
+          flex-direction: column;
+        }
+      }
+
+      .copy {
+        gap: 16px;
+        font-size: 12px;
+        color: $text-400;
+
+        &__text {
+          padding-top: 3px;
+        }
+
+        .button {
+          padding: 0px;
+          font-size: 12px;
+          color: $text-400;
+        }
+
+        @media screen and (max-width: $mobile) {
+          margin-top: 1rem;
+          flex-direction: column;
+        }
+
+        .end-button-links {
+          gap: 16px;
+
+          &__item {
+            padding-left: 10px;
+            border-left: 1px solid $truegray-400;
+          }
+
+          @media screen and (max-width: $mobile) {
+            // gap: 0px;
+          }
+        }
+      }
+    }
+  }
+}

package/src/stories/Layout/Footer/Footer.stories.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {Footer} from './Footer';
+
+import logo_gobierno_corrientes from '../../assets/logo_gobierno_corrientes.svg';
+import logo_rentas_corrientes from '../../assets/logo_rentas_corrientes.svg';
+
+export default {
+  title: 'Layout/Footer',
+  component: Footer,
+  args: {
+    columnItems: [
+      {
+        title: 'Normativas',
+        buttonLinks: [
+          {label: 'Resoluciones', fill: 'unstyled', type: 'button', onClick: () => console.log('Resoluciones Clicked')},
+          {label: 'Decretos', fill: 'unstyled', type: 'button', onClick: () => console.log('Decretos Clicked')},
+          {label: 'Leyes', fill: 'unstyled', type: 'button', onClick: () => console.log('Leyes Clicked')},
+        ],
+        finalLink: {
+          label: 'Más normativas',
+          fill: 'link',
+          type: 'button',
+          onClick: () => console.log('Más normativas Clicked'),
+        },
+      },
+      {
+        title: 'Información útil',
+        buttonLinks: [
+          {label: 'Inmobiliario Rural', fill: 'unstyled', type: 'button', onClick: () => console.log('Resoluciones Clicked')},
+          {label: 'Denuncias', fill: 'unstyled', type: 'button', onClick: () => console.log('Decretos Clicked')},
+          {label: 'Gestión de Calidad', fill: 'unstyled', type: 'button', onClick: () => console.log('Leyes Clicked')},
+          {label: 'Gestión transparente', fill: 'unstyled', type: 'button', onClick: () => console.log('Leyes Clicked')},
+          {label: 'Responsabilidad Social', fill: 'unstyled', type: 'button', onClick: () => console.log('Leyes Clicked')},
+        ],
+        finalLink: {label: 'Más enlaces', fill: 'link', type: 'button', onClick: () => console.log('Más enlaces Clicked')},
+      },
+      {
+        title: 'Preguntas frecuentes',
+        buttonLinks: [
+          {label: 'Pagos', fill: 'unstyled', type: 'button', onClick: () => console.log('Pagos Clicked')},
+          {
+            label: 'Gestiones y solicitudes',
+            fill: 'unstyled',
+            type: 'button',
+            onClick: () => console.log('Gestiones y solicitudes Clicked'),
+          },
+          {label: 'Agentes', fill: 'unstyled', type: 'button', onClick: () => console.log('Agentes Clicked')},
+          {label: 'Sellos', fill: 'unstyled', type: 'button', onClick: () => console.log('Sellos Clicked')},
+        ],
+        finalLink: {label: 'Más preguntas', fill: 'link', type: 'button', onClick: () => console.log('Más preguntas Clicked')},
+      },
+    ],
+    finalItem: {
+      title: 'Rentas, está con vos',
+      buttonLinks: [
+        {
+          label: 'Chateá con nosotros',
+          icon: 'fa-regular fa-message',
+          fill: 'unstyled',
+          type: 'button',
+          onClick: () => console.log('Chateá con nosotros Clicked'),
+        },
+        {
+          label: 'Rentas Corrientes',
+          icon: 'fa-brands fa-square-facebook',
+          fill: 'unstyled',
+          type: 'button',
+          onClick: () => console.log('Rentas Corrientes Clicked'),
+        },
+        {
+          label: 'Contanos tu experiencia',
+          icon: 'fa-regular fa-envelope',
+          fill: 'unstyled',
+          type: 'button',
+          onClick: () => console.log('Contanos tu experiencia Clicked'),
+        },
+        {
+          label: 'Denuncias',
+          icon: 'fa-solid fa-triangle-exclamation',
+          fill: 'unstyled',
+          type: 'button',
+          onClick: () => console.log('Contanos tu experiencia Clicked'),
+        },
+      ],
+      phoneNumber: '0800-444-8008',
+    },
+    logo_1: logo_gobierno_corrientes,
+    logo_2: logo_rentas_corrientes,
+    endButtonLinks: [
+      {label: 'Resoluciones', fill: 'unstyled', type: 'button', onClick: () => console.log('Resoluciones Clicked')},
+      {label: 'Decretos', fill: 'unstyled', type: 'button', onClick: () => console.log('Decretos Clicked')},
+      {label: 'Leyes', fill: 'unstyled', type: 'button', onClick: () => console.log('Leyes Clicked')},
+    ],
+  },
+} as ComponentMeta<typeof Footer>;
+
+const Template: ComponentStory<typeof Footer> = args => <Footer {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};

package/src/stories/Layout/Footer/Footer.tsx

@@ -0,0 +1,81 @@
+import './Footer.scss';
+import {Button, IButton} from '../../Elements/Button/Button';
+import {generateRandomKey} from '../../../utils/functions';
+
+export interface IFooter extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  columnItems?: {title: string; buttonLinks: IButton[]; finalLink: IButton}[];
+  finalItem?: {title: string; buttonLinks: IButton[]; phoneNumber: string};
+
+  //Footer END
+  logo_1: string;
+  logo_2: string;
+  endButtonLinks: IButton[];
+  className?: string;
+}
+
+export const Footer = ({columnItems, finalItem, logo_1, logo_2, endButtonLinks, className, ...props}: IFooter) => {
+  var today = new Date();
+  var year = today.getFullYear();
+
+  return (
+    <div className={`elv-component elv-footer`} {...props}>
+      <div className={`footer-component is-flex is-flex-direction-column ${className ? className : ''}`}>
+        <div className="footer-component__container">
+          {columnItems && (
+            <>
+              {columnItems.map(col => (
+                <div key={generateRandomKey()} className="column-item is-flex is-flex-direction-column">
+                  <p className="column-item__title">{col.title}</p>
+                  {col.buttonLinks.map(but => (
+                    <span key={generateRandomKey()} className="column-item__button">
+                      <Button {...but}></Button>
+                    </span>
+                  ))}
+                  <span className="column-item__final">
+                    <Button {...col.finalLink}></Button>
+                  </span>
+                </div>
+              ))}
+            </>
+          )}
+
+          {finalItem && (
+            <div className="final-item is-flex is-flex-direction-column">
+              <p className="final-item__title">{finalItem.title}</p>
+              {finalItem.buttonLinks.map(but => (
+                <span key={generateRandomKey()} className="final-item__button">
+                  <Button {...but}></Button>
+                </span>
+              ))}
+              <p className="final-item__phoneNumber">{finalItem.phoneNumber}</p>
+            </div>
+          )}
+        </div>
+        <div className="footer-component__end">
+          <div className="logos is-flex">
+            <img src={logo_1} alt="" width={'155px'} height={'37px'} />
+            <img src={logo_2} alt="" width={'261px'} height={'37px'} />
+          </div>
+          <div className="copy is-flex">
+            <div className="copy__text is-flex">
+              <p>Copyright&copy; {year} - Rentas Corrientes</p>
+            </div>
+            {endButtonLinks && (
+              <div className="end-button-links is-flex">
+                {endButtonLinks.map(but => (
+                  <div key={generateRandomKey()} className="end-button-links__item is-flex">
+                    {/* <span className="end-button-links__separator"></span> */}
+                    <span key={but.label} className="end-button-links__button">
+                      <Button {...but}></Button>
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};