dgrcorrientes-modulos 1.0.2 → 1.0.4

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

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

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

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

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

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

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

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