dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Components/CompleteDiary/CompleteDiary.tsx

@@ -1,394 +0,0 @@
-import {useEffect, useRef, useState} from 'react';
-import {Button} from '../../Elements/Button/Button';
-import {Icon} from '../../Elements/Icon/Icon';
-import './CompleteDiary.scss';
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-import {Tooltip} from '../Tooltip/Tooltip';
-
-export interface ICompleteDiary {
-  // BASE
-  title?: string;
-  labelName?: string;
-  labelCuit?: string;
-  labelStatus?: string;
-  shifts: IShifts[];
-  changeDate?: string;
-  labelAll?: string;
-  labelPresent?: string;
-  labelMissing?: string;
-  labelCatered?: string;
-  iconText?: string;
-  scheduleRest: IScheduleRest;
-
-  // IS-OPTIONS
-  showDiary?: boolean;
-
-  // EVENTS
-  onCancel?: () => void;
-  onAttend?: () => void;
-  onEllipse?: () => void;
-  onDate?: (date: Date | null) => void;
-
-  // GENERIC
-  className?: string;
-}
-export interface IShifts {
-  hour?: number;
-  minute?: string;
-  name?: string;
-  cuit?: string;
-  status?: 'Presente' | 'Ausente' | 'Atendido';
-  colorBackgroundState?: string;
-  iconColor?: string;
-  showButton?: boolean;
-  colorBackground?: string;
-  menuDropComponent?: React.ReactNode;
-}
-
-interface IScheduleRest {
-  start: Date;
-  end: Date;
-}
-
-export const CompleteDiary = ({
-  title,
-  labelName,
-  labelCuit,
-  labelStatus,
-  iconText,
-  shifts,
-  changeDate,
-  labelAll,
-  labelPresent,
-  labelMissing,
-  labelCatered,
-  showDiary,
-  scheduleRest,
-  onCancel,
-  onAttend,
-  onEllipse,
-  onDate,
-  className,
-}: ICompleteDiary) => {
-  const [turnos, setTurnos] = useState(shifts);
-  const [filterState, setfilterState] = useState<string | null>(null);
-  const [currentTime, setCurrentTime] = useState(new Date());
-  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-  const [quantitypresent, setquantitypresent] = useState<number>(0);
-  const [quantitymissing, setquantitymissing] = useState<number>(0);
-  const [quantitycatered, setquantitycatered] = useState<number>(0);
-  const [totalQuantity, settotalQuantity] = useState<number>(0);
-  const [menuExpanded, setMenuExpanded] = useState(false);
-  const [expandedTooltip, setExpandedTooltip] = useState(false);
-  const startTime = 8 * 60; // 8:00 AM en minutos
-  const endTime = 18 * 60; // 6:00 PM en minutos
-
-  const menuDropRef = useRef<HTMLDivElement>(null);
-  const tooltipMenuRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      // Verificar si el primer menú está desplegado y el clic no ocurrió dentro de él
-      if (menuDropRef.current && menuExpanded) {
-        if (!menuDropRef.current.contains(event.target as Node)) {
-          setMenuExpanded(false);
-        }
-      }
-
-      // Verificar si el segundo menú está desplegado y el clic no ocurrió dentro de él
-      if (tooltipMenuRef.current && expandedTooltip) {
-        if (!tooltipMenuRef.current.contains(event.target as Node)) {
-          setExpandedTooltip(false);
-        }
-      }
-    }
-
-    document.addEventListener('click', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [menuDropRef, menuExpanded, tooltipMenuRef, expandedTooltip]);
-
-  const shiftsfilteredref = useRef<IShifts[]>([]);
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setCurrentTime(new Date());
-    }, 1000);
-
-    return () => clearInterval(intervalId);
-  }, []);
-
-  const formatTime = (date: Date) => {
-    return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
-  };
-
-  const currentHour = currentTime.getHours();
-  const currentMinutes = currentTime.getMinutes();
-  const totalMinutes = currentHour * 60 + currentMinutes;
-
-  const elapsedMinutes = totalMinutes - startTime;
-
-  const adjustedMinutes = elapsedMinutes >= 0 ? (elapsedMinutes <= endTime - startTime ? elapsedMinutes : elapsedMinutes % (24 * 60)) : 0;
-
-  const progress = (adjustedMinutes / (endTime - startTime)) * 100; // Usar el rango de 8 a 18 horas
-
-  const formatDate = (date: Date | null): string => {
-    if (!date) {
-      // Si la fecha es null, muestra la fecha actual
-      const currentDate = new Date();
-      const options: Intl.DateTimeFormatOptions = {
-        day: 'numeric',
-        month: 'short',
-        year: 'numeric',
-      };
-
-      return currentDate.toLocaleDateString('es-ES', options).replace('.', '');
-    }
-    const options: Intl.DateTimeFormatOptions = {
-      day: 'numeric',
-      month: 'short',
-      year: 'numeric',
-    };
-    return date.toLocaleDateString('es-ES', options).replace('.', '');
-  };
-
-  useEffect(() => {
-    // Filtrar los turnos cuando cambia el estado
-    const filterShifts = (turnos: IShifts[], estado: string | null) => {
-      switch (estado) {
-        case 'Presente':
-          return turnos.filter(turno => turno.status === 'Presente');
-        case 'Ausente':
-          return turnos.filter(turno => turno.status === 'Ausente');
-        case 'Atendido':
-          return turnos.filter(turno => turno.status === 'Atendido');
-        default:
-          return turnos;
-      }
-    };
-
-    const shiftsFiltered = filterShifts(turnos, filterState);
-    shiftsfilteredref.current = shiftsFiltered;
-
-    // Calcular la cantidad por estado y total
-    let present = 0;
-    let missing = 0;
-    let catered = 0;
-
-    turnos?.forEach(turno => {
-      switch (turno.status) {
-        case 'Presente':
-          present += 1;
-          break;
-        case 'Ausente':
-          missing += 1;
-          break;
-        case 'Atendido':
-          catered += 1;
-          break;
-        default:
-          break;
-      }
-    });
-
-    setquantitypresent(present);
-    setquantitymissing(missing);
-    setquantitycatered(catered);
-    settotalQuantity(turnos.length);
-  }, [turnos, filterState]);
-
-  const addshiftInCurrentSchedule = (hour: number, minute: string) => {
-    const shiftInCurrentSchedule = shiftsfilteredref.current.find(item => item.hour === hour && item.minute === minute);
-
-    if (shiftInCurrentSchedule) {
-      return (
-        <div
-          key={`${hour}:${minute}`}
-          className="completediary__item is-flex is-align-items-center is-gap-5"
-          style={{backgroundColor: shiftInCurrentSchedule.colorBackground}}
-        >
-          <div className="container is-flex is-fullw">
-            <div className="info has-text-weight-semibold is-fullw">{shiftInCurrentSchedule.name}</div>
-            <div className="info is-fullw">{shiftInCurrentSchedule.cuit}</div>
-            <div
-              className="info completediary__status is-flex is-align-items-center"
-              style={{backgroundColor: shiftInCurrentSchedule.colorBackgroundState}}
-            >
-              <Icon icon="fa-solid fa-circle" color={shiftInCurrentSchedule.iconColor} className="mr-2 is-size-7" />
-              <p className="has-text-light is-size-7">{shiftInCurrentSchedule.status}</p>
-            </div>
-          </div>
-
-          <div className="completediary__buttons is-flex is-align-items-center is-gap-4">
-            <div>
-              <Button
-                label="Cancelar"
-                fill="outline"
-                icon="fa-solid fa-xmark"
-                color="secondary"
-                trailingIcon={true}
-                className={`is-size-7 ${shiftInCurrentSchedule.showButton ? '' : 'is-invisible'}`}
-                onClick={() => onCancel && onCancel()}
-              />
-            </div>
-            <div>
-              <Button
-                label="Atender"
-                fill="solid"
-                icon="fa-solid fa-arrow-right-to-bracket"
-                trailingIcon={true}
-                className={`is-size-7 ${shiftInCurrentSchedule.showButton ? '' : 'is-invisible'}`}
-                onClick={() => onAttend && onAttend()}
-              />
-            </div>
-            <div
-              ref={menuDropRef}
-              className="is-relative"
-              onClick={() => {
-                setMenuExpanded(!menuExpanded);
-                onEllipse && onEllipse();
-              }}
-            >
-              <Icon
-                icon="fa-solid fa-ellipsis-vertical"
-                className={`icon_ellipsis  ${shiftInCurrentSchedule.showButton ? '' : 'is-invisible'}`}
-              />
-              {shiftInCurrentSchedule.menuDropComponent && menuExpanded && (
-                <div className="completediary__dropComponent is-absolute">{shiftInCurrentSchedule.menuDropComponent}</div>
-              )}
-            </div>
-          </div>
-        </div>
-      );
-    }
-    return <div style={{backgroundColor: '#CED4DA4D', height: '69px', borderRadius: '4px', border: '1px solid #E5E5E5'}}></div>;
-  };
-
-  return (
-    <div className="elv-component elv-completediary">
-      <div className={['completediary__head is-flex is-flex-direction-column is-gap-5', `${className ? ' ' + className : ''}`].join('')}>
-        {showDiary && <div className="has-text-grey-dark has-text-weight-bold is-size-3">{title}</div>}
-
-        <div className="completediary__head--breakpoint is-flex is-align-items-center is-justify-content-space-between ">
-          <div className="is-flex is-align-items-center is-gap-4">
-            <p className="is-size-7 has-text-weight-medium">{changeDate}</p>
-            <div>
-              <DatePicker
-                selected={selectedDate}
-                onChange={(date: Date | null) => {
-                  setSelectedDate(date), onDate && onDate(date);
-                }}
-                customInput={
-                  <div className="is-flex datePickerStyles">
-                    <span className="has-text-grey-dark">{formatDate(selectedDate)}</span>
-                    <Icon icon="fa-solid fa-chevron-up" className={`ml-3 rotateIcon `} />
-                  </div>
-                }
-              />
-            </div>
-          </div>
-          <div className="completediary__head__filters is-flex is-align-items-center is-size-7 is-gap-4">
-            <div className={`completediary__head__filter ${filterState === null ? 'filter' : ''}`} onClick={() => setfilterState(null)}>
-              {`${labelAll} (${totalQuantity})`}
-            </div>
-            <div
-              className={`completediary__head__filter ${filterState === 'Presente' ? 'filter' : ''}`}
-              onClick={() => setfilterState('Presente')}
-            >
-              {`${labelPresent} (${quantitypresent})`}
-            </div>
-            <div
-              className={`completediary__head__filter ${filterState === 'Ausente' ? 'filter' : ''}`}
-              onClick={() => setfilterState('Ausente')}
-            >
-              {`${labelMissing} (${quantitymissing})`}
-            </div>
-            <div
-              className={`completediary__head__filter ${filterState === 'Atendido' ? 'filter' : ''}`}
-              onClick={() => setfilterState('Atendido')}
-            >
-              {`${labelCatered} (${quantitycatered})`}
-            </div>
-          </div>
-        </div>
-        <div className="completediary is-flex px-5 pt-5 is-flex-direction-column box">
-          <div className="container is-flex is-size-7 has-text-grey-dark m-0 is-align-items-center is-justify-content-space-around">
-            <div className="completediary__label">{labelName}</div>
-            <div className="completediary__label">{labelCuit}</div>
-            <div className="completediary__label is-flex is-align-items-center">
-              <p className="completediary__statu">{labelStatus}</p>
-              <div
-                ref={tooltipMenuRef}
-                className="completediary__icontooltip is-relative"
-                onClick={() => {
-                  setExpandedTooltip(!expandedTooltip);
-                }}
-              >
-                <Icon icon="fa-solid fa-circle-info" className="iconState ml-2 completediary__label" />
-                {expandedTooltip && (
-                  <Tooltip active contentType="text" text={iconText} trianglePos="none" className="completediary__tooltip is-absolute" />
-                )}
-              </div>
-            </div>
-          </div>
-
-          <div className="completediary__time time-bar is-flex is-flex-direction-column is-align-items-center is-fullw is-relative">
-            <div className="time-range is-flex  is-flex-direction-column-reverse is-size-7 has-text-weight-semibold is-gap-4 is-fullw">
-              {Array.from({length: 22}, (_, index) => {
-                const hour = Math.floor(index / 2) + 8;
-                const minute = index % 2 === 0 ? '00' : '30';
-                const showTime =
-                  hour < 18 || (hour === 18 && minute === '00') || (hour === 8 && minute === '00' && elapsedMinutes >= 24 * 60);
-
-                // Crear un objeto Date para el tiempo actual
-                const currentTime = new Date();
-                currentTime.setHours(hour, parseInt(minute));
-
-                // Verificar si el tiempo actual está dentro del horario de descanso
-                const restSchedule = currentTime >= scheduleRest.start && currentTime < scheduleRest.end;
-
-                // Mostrar el espacio de descanso en lugar de los turnos si es un horario de descanso
-                if (restSchedule) {
-                  return (
-                    showTime &&
-                    hour < 18 && (
-                      <div key={index} className="time-label is-flex is-gap-4">
-                        <span className="time" style={{color: '#16A34A'}}>{`${hour}:${minute} h`}</span>
-                        <div className="is-fullw">
-                          <div style={{backgroundColor: '#ECFDF5', height: '66px', borderRadius: '4px', border: '1px solid #E5E5E5'}}></div>
-                        </div>
-                      </div>
-                    )
-                  );
-                }
-
-                const turnosEnHorario = shiftsfilteredref.current.filter(turno => turno.hour === hour && turno.minute === minute);
-
-                return (
-                  // Mostrar solo las horas hasta las 18:00
-                  showTime &&
-                  hour < 18 && (
-                    <div key={index} className="time-label is-flex is-gap-4 ">
-                      <span className="time">{`${hour}:${minute} h`}</span>
-                      <div className={`is-fullw`}> {addshiftInCurrentSchedule(hour, minute)}</div>
-                    </div>
-                  )
-                );
-              }).reverse()}
-            </div>
-            <div
-              className="current-time is-flex is-absolute is-align-items-center is-justify-content-center"
-              style={{top: `${Math.max(0, Math.min(progress, 100))}%`}}
-            >
-              {/* <span>{formatTime(currentTime)}</span> */}
-              <Icon icon="fa-solid fa-circle" className="icon-time is-absolute" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/Components/Dropdown/Dropdown.scss

@@ -1,60 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-dropdown {
-  .e-dropdown {
-    min-width: 250px;
-    max-width: max-content;
-    box-shadow: 0px 14px 24px rgba(20, 23, 38, 0.12);
-    border-radius: 16px;
-    z-index: 100;
-
-    display: none;
-
-    position: absolute;
-    top: 100%;
-
-    &--left {
-      left: 0;
-    }
-
-    &--center {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &--right {
-      right: 0;
-    }
-
-    &--active {
-      display: block;
-    }
-
-    .dropdown__list {
-      list-style: none;
-      font-weight: $fw-semibold;
-      color: $text-900;
-
-      .list__item {
-        border-radius: 15px;
-        gap: 10px;
-
-        &--active {
-          background-color: $muted-300;
-
-          .item__icon {
-            color: $primary-600;
-          }
-        }
-
-        &--default {
-          color: $text-500;
-        }
-
-        &:hover {
-          background-color: $muted-300;
-        }
-      }
-    }
-  }
-}

package/src/stories/Components/Dropdown/Dropdown.stories.tsx

@@ -1,19 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Dropdown} from './Dropdown';
-
-export default {
-  title: 'Elements/Dropdown',
-  component: Dropdown,
-  args: {
-    position: 'left',
-    options: [{label: 'Opcion 1', icon: {icon: 'fas fa-user'}}, {label: 'Opcion 2'}, {label: 'Opcion 3'}],
-  },
-} as ComponentMeta<typeof Dropdown>;
-
-const Template: ComponentStory<typeof Dropdown> = args => <Dropdown {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {trigger: {label: 'Trigger'}};
-
-export const NoTrigger = Template.bind({});
-NoTrigger.args = {visible: false};

package/src/stories/Components/Dropdown/Dropdown.tsx

@@ -1,99 +0,0 @@
-import {useEffect, useRef, useState} from 'react';
-import {Button, IButton} from '../../Elements/Button/Button';
-import {Icon, IIcon} from '../../Elements/Icon/Icon';
-import './Dropdown.scss';
-import {generateRandomKey} from '../../../utils/functions';
-
-export interface IDropdown extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  trigger?: IButton;
-  options?: {label: string; icon?: IIcon; onClick?: () => void}[];
-  position?: 'left' | 'center' | 'right';
-
-  // boolean
-  visible?: boolean;
-
-  // events
-  onClick?: () => void;
-
-  // react
-  className?: string;
-}
-
-export const Dropdown = ({trigger, options, position, visible, className, onClick, ...props}: IDropdown) => {
-  const [activeState, setActiveState] = useState(visible ? visible : false);
-
-  // =============================== REF USER ===============================
-  const dropRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (dropRef.current && !dropRef.current.contains(event.target as Node)) {
-        setActiveState(false);
-      }
-    }
-
-    document.addEventListener('click', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [dropRef]);
-
-  return (
-    <div className="elv-component elv-dropdown" {...props}>
-      {trigger ? (
-        <div className="is-relative is-inline-block" ref={dropRef}>
-          <Button
-            {...trigger}
-            onClick={() => {
-              setActiveState(!activeState);
-            }}
-          />
-          <div
-            className={[
-              `e-dropdown has-background-white`,
-              `${activeState ? ' e-dropdown--active' : ''}`,
-              `${position ? ' e-dropdown--' + position : ''}`,
-              `${className ? ' ' + className : ''}`,
-            ].join('')}
-          >
-            <ul className={['dropdown__list', ' has-text-weight-semibold', ' p-1'].join('')}>
-              {options?.map((item, index) => (
-                <li
-                  key={index + generateRandomKey()}
-                  className={[`list__item`, ` is-clickable`, ' is-flex is-align-items-center', ' py-4 px-2'].join('')}
-                  onClick={() => item.onClick && item.onClick()}
-                >
-                  {item.icon && <Icon {...item.icon} />}
-                  {item.label}
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-      ) : (
-        <div
-          className={[
-            `e-dropdown has-background-white`,
-            `${visible ? ' e-dropdown--active' : ''}`,
-            `${position ? ' e-dropdown--' + position : ''}`,
-            `${className ? ' ' + className : ''}`,
-          ].join('')}
-        >
-          <ul className="dropdown__list p-1">
-            {options?.map((item, index) => (
-              <li
-                key={index}
-                className={[`list__item`, ` is-clickable`, ' is-flex is-align-items-center', ' py-4 px-2'].join('')}
-                onClick={() => item.onClick && item.onClick()}
-              >
-                {item.icon && <Icon {...item.icon} />}
-                {item.label}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/stories/Components/EmptyState/EmptyState.stories.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {EmptyState} from './EmptyState';
-
-export default {
-  title: 'Components/EmptyState',
-  component: EmptyState,
-  args: {
-    orientation: 'horizontal',
-    img: 'https://image.shutterstock.com/image-vector/electric-power-plug-holding-hand-260nw-530773483.jpg',
-    error: 'Error 404',
-    title: 'No podemos realizar la acción que intentas hacer',
-    description:
-      'Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.',
-    buttonsActive: false,
-
-    button: [
-      {
-        label: 'Button',
-        size: 'normal',
-        color: 'primary',
-        fill: 'solid',
-        loading: false,
-        disabled: false,
-        leadingIcon: false,
-        type: 'button',
-        onClick: () => console.log('Button Clicked'),
-      },
-      {
-        label: 'Button',
-        size: 'normal',
-        color: 'primary',
-        fill: 'link',
-        loading: false,
-        disabled: false,
-        type: 'button',
-        onClick: () => console.log('Button Clicked'),
-      },
-    ],
-  },
-} as ComponentMeta<typeof EmptyState>;
-
-const Template: ComponentStory<typeof EmptyState> = args => <EmptyState {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {};

package/src/stories/Components/EmptyState/EmptyState.tsx

@@ -1,44 +0,0 @@
-import {shortenText} from '../../../utils/functions';
-import './emptyState.scss';
-import {Button, IButton} from '../../Elements/Button/Button';
-
-export interface IEmptyState extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  orientation: 'horizontal' | 'vertical';
-  img: string;
-  error: string;
-  title: string;
-  description: string;
-  button: IButton[];
-
-  // boolean
-  buttonsActive: boolean;
-
-  // react
-  className?: string;
-}
-
-export const EmptyState = ({orientation, img, error, title, description, className, buttonsActive, button, ...props}: IEmptyState) => {
-  return (
-    <div className={`elv-component elv-e-state ${className ? className : ''}`} {...props}>
-      <div className={`e-state ${orientation === 'vertical' ? 'e-state--vertical' : ''}`}>
-        <div className="e-state__img-container">
-          <img src={img} alt="" />
-        </div>
-        <div className="e-state__body">
-          <div className="text-container">
-            <p className="error">{error}</p>
-            <p className="title is-4">{title}</p>
-            <p className="description is-5">{description}</p>
-          </div>
-          {buttonsActive && (
-            <div className="buttons-container">
-              {button[0] && <Button isFullWidth={true} {...button[0]} />}
-              {button[1] && <Button isFullWidth={true} {...button[1]} />}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};