dgrcorrientes-modulos 1.0.3 → 1.0.4

package/src/stories/Components/ModalConfirm/ModalConfirm.tsx

@@ -1,118 +0,0 @@
-import './ModalConfirm.scss';
-import {Icon} from '../../Elements/Icon/Icon';
-import {Button, IButton} from '../../Elements/Button/Button';
-import {useEffect, useState} from 'react';
-import SweetAlert2 from 'react-sweetalert2';
-
-export interface IModalConfirm extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // BASE
-  title: string;
-  button: IButton;
-  description: string;
-  Paragraph: string;
-  show?: boolean;
-
-  // IS-OPTIONS
-
-  // EVENTS
-  onCloseClick?: () => void;
-  onCancelClick?: () => void;
-  onConfirmClick?: () => void;
-
-  // GENERIC
-  className?: string;
-}
-
-export const ModalConfirm = ({
-  className,
-  title,
-  button,
-  description,
-  Paragraph,
-  show,
-  onCloseClick,
-  onCancelClick,
-  onConfirmClick,
-  ...props
-}: IModalConfirm) => {
-  const [swalProps, setSwalProps] = useState({});
-
-  const mostrarAlerta = () => {
-    setSwalProps({
-      show: true,
-      showConfirmButton: false,
-    });
-  };
-
-  useEffect(() => {
-    setSwalProps({
-      show: show,
-      showConfirmButton: false,
-    });
-  }, [show]);
-
-  return (
-    <div className="elv-component elv-modal-confirm" {...props}>
-      <div className={['modal-confirm', `${className ? ' ' + className : ''}`].join('')}>
-        {button && <Button {...button} onClick={mostrarAlerta} />}
-        <SweetAlert2 {...swalProps}>
-          <div className="elv-component elv-modal-confirm">
-            <div className="modal-confirm is-relative px-5 py-5">
-              <div className="is-flex is-gap-5">
-                <div className="modal-confirm__icon is-flex is-justify-content-center py-0 px-4 mt-1">
-                  <Icon icon="fa-solid fa-circle-info" className="modal-confirm__color is-size-4 has-text-grey-dark" />
-                </div>
-                <div>
-                  <div className="mb-2">
-                    <p className="is-size-5 has-text-grey-dark has-text-left">{title}</p>
-                  </div>
-                  <div className="is-size-6">
-                    <p className="has-text-grey has-text-left">{description}</p>{' '}
-                    <p className="has-text-grey-dark has-text-left">{Paragraph}</p>
-                  </div>
-                </div>
-              </div>
-              <div className="is-flex mt-5 is-gap-4 is-justify-content-center is-fullw">
-                {
-                  <Button
-                    label="Cancelar"
-                    fill="outline"
-                    color="secondary"
-                    isFullWidth={true}
-                    onClick={() => {
-                      onCancelClick && onCancelClick();
-                    }}
-                  />
-                }
-
-                {
-                  <Button
-                    label="Aceptar"
-                    fill="solid"
-                    isFullWidth={true}
-                    onClick={() => {
-                      onConfirmClick && onConfirmClick();
-                    }}
-                  />
-                }
-              </div>
-              {
-                <div
-                  onClick={() => {
-                    onCloseClick && onCloseClick();
-                    setSwalProps({
-                      show: false,
-                    });
-                  }}
-                  className="modal-confirm__close m-2 is-absolute is-flex is-justify-content-center is-align-items-center"
-                >
-                  <Icon icon="fa-solid fa-xmark" />
-                </div>
-              }
-            </div>
-          </div>
-        </SweetAlert2>
-      </div>
-    </div>
-  );
-};

package/src/stories/Components/Pagination/Pagination.scss

@@ -1,42 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-pagination {
-  display: inline-flex;
-  min-width: min-content;
-  white-space: nowrap;
-
-  .pagination-container {
-    gap: 10px;
-
-    &__per-page {
-      font-size: 12px;
-    }
-
-    &__pageButtons-Chevron {
-      gap: 5px;
-    }
-
-    &__pageButtons {
-      padding-left: 10px;
-      &.moreThan9 {
-        width: 200px;
-      }
-
-      .elv-button {
-        .button {
-          padding: 1px 7px 0px 7px;
-        }
-
-        .is-unstyled {
-          color: $blueGray-500;
-        }
-      }
-    }
-
-    &__totals {
-      font-size: 12px;
-      padding-left: 5px;
-      font-weight: $fw-semibold;
-    }
-  }
-}

package/src/stories/Components/Pagination/Pagination.stories.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-
-import {Pagination} from './Pagination';
-
-export default {
-  title: 'Components/Pagination',
-  component: Pagination,
-  args: {
-    totalItems: 120,
-    onChangePage: page => {
-      console.log('Page selected: ' + page);
-    },
-    onChangeShowedItems: showedItems => {
-      console.log('ShowedItems: ' + showedItems);
-    },
-    showSelect: true,
-    showTotals: true,
-  },
-} as ComponentMeta<typeof Pagination>;
-
-const Template: ComponentStory<typeof Pagination> = args => <Pagination {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {};

package/src/stories/Components/Pagination/Pagination.tsx

@@ -1,143 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {Select} from '../../Form/Select/Select';
-import './Pagination.scss';
-import {Button} from '../../Elements/Button/Button';
-import {generateRandomKey} from '../../../utils/functions';
-
-export interface IPagination extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  totalItems: number;
-  minItemsPerPage: number;
-
-  // boolean
-  showPages?: boolean;
-  showTotals?: boolean;
-  showSelect?: boolean;
-  isColumn?: boolean;
-
-  // events
-  onChangePage?: (page: number) => void;
-  onChangeShowedItems?: (showedItems: string) => void;
-
-  // react
-  className?: string;
-}
-
-export const Pagination = ({
-  totalItems,
-  minItemsPerPage = 10,
-  showTotals,
-  showSelect,
-  isColumn,
-  onChangePage,
-  onChangeShowedItems,
-  className,
-  ...props
-}: IPagination) => {
-  const [showedItems, setShowedItems] = useState(minItemsPerPage);
-  const [pages, setPages] = useState(Math.ceil(totalItems / showedItems));
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const handlePageChange = (pageNumber: number) => {
-    setCurrentPage(pageNumber);
-  };
-
-  useEffect(() => {
-    onChangePage && onChangePage(currentPage);
-  }, [currentPage]);
-
-  useEffect(() => {
-    onChangeShowedItems && onChangeShowedItems(showedItems.toString());
-    setPages(Math.ceil(totalItems / showedItems));
-  }, [showedItems, totalItems]);
-
-  const selectOptions = () => {
-    const options = [];
-    const startValue = minItemsPerPage;
-    const endValue = minItemsPerPage * 20;
-    const stepValue = minItemsPerPage * 5;
-    for (let value = startValue; value <= endValue; value += stepValue) {
-      options.push({
-        label: `Mostrar ${value}`,
-        value: `${value}`,
-      });
-    }
-    return options;
-  };
-
-  return (
-    <div className={`elv-component elv-pagination ${className ? className : ''}`} {...props}>
-      <div className={`pagination-container is-flex is-align-items-center ${isColumn && 'is-flex-direction-column'}`}>
-        {showSelect && (
-          <>
-            <Select
-              fill="unstyled"
-              onChangeSelect={value => {
-                setShowedItems && setShowedItems(parseInt(value));
-              }}
-              options={selectOptions()}
-              defaultValue={minItemsPerPage?.toString() ? minItemsPerPage.toString() : '10'}
-              size="sm"
-              minWidth="100px"
-            />
-            <p className="pagination-container__per-page">por página</p>
-          </>
-        )}
-        <div className="pagination-container__pageButtons-Chevron is-flex is-justify-content-space-between">
-          <Button
-            size="small"
-            fill="unstyled"
-            icon="fa-solid fa-chevron-left"
-            isOnlyIcon
-            onClick={() => currentPage - 1 >= 1 && setCurrentPage(currentPage - 1)}
-          ></Button>
-          <div className={`pagination-container__pageButtons is-flex is-justify-content-space-between ${pages >= 9 && 'moreThan9'}`}>
-            {pages > 8 ? (
-              <>
-                {Array.from({length: pages}, (_, i) => i + 1).map(
-                  page =>
-                    ((page === 1 || page === pages || (page > currentPage - 3 && page < currentPage + 3)) && (
-                      <span key={generateRandomKey()}>
-                        <Button
-                          size="small"
-                          fill={page === currentPage ? 'solid' : 'unstyled'}
-                          onClick={() => handlePageChange(page)}
-                          label={page.toString()}
-                          isRounded={true}
-                        />
-                      </span>
-                    )) ||
-                    (((page === currentPage - 3 && currentPage > 3) || (page === currentPage + 3 && currentPage < pages - 3)) && (
-                      <p key={generateRandomKey()}>...</p>
-                    )),
-                )}
-              </>
-            ) : (
-              <>
-                {Array.from({length: pages}, (_, i) => i + 1).map(page => (
-                  <span key={generateRandomKey()}>
-                    <Button
-                      size="small"
-                      fill={page === currentPage ? 'solid' : 'unstyled'}
-                      onClick={() => handlePageChange(page)}
-                      label={page.toString()}
-                      isRounded={true}
-                    />
-                  </span>
-                ))}
-              </>
-            )}
-          </div>
-          <Button
-            size="small"
-            fill="unstyled"
-            icon="fa-solid fa-chevron-right"
-            isOnlyIcon
-            onClick={() => currentPage + 1 <= pages && setCurrentPage(currentPage + 1)}
-          ></Button>
-        </div>
-        {showTotals && <p className="pagination-container__totals">{totalItems} registros totales</p>}
-      </div>
-    </div>
-  );
-};

package/src/stories/Components/PerformanceAssessment/PerformanceAssessment.scss

@@ -1,26 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-performanceAssessment{
-    .performanceAssessment{
-        border-radius: 16px;
-        background-color: $truegray-50;
-        
-
-        &__date{
-            color: $truegray-600;
-        }
-
-        .progressCircular{
-            border-radius: 50%;
-           
-        
-            &__desc{
-                max-width: 90px;
-                line-height: 13px;
-            }
-        }
-        .iconStar{
-            cursor: pointer;
-        }
-    }
-}

package/src/stories/Components/PerformanceAssessment/PerformanceAssessment.stories.tsx

@@ -1,27 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {PerformanceAssessment} from './PerformanceAssessment';
-
-export default {
-  title: 'Components/PerformanceAssessment',
-  component: PerformanceAssessment,
-  args: {
-    labelPerformance: 'Valoración de desempeño',
-    dataTime: [{date: 'Abril 2023'}],
-    percentage: 30,
-    description: 'de crecimiento este mes',
-    qualification: 'de calificación',
-    star: [
-      {star: 'fa-solid fa-star', starStroke: 'fa-solid fa-star-half-stroke'},
-      {star: 'fa-solid fa-star', starStroke: 'fa-solid fa-star-half-stroke'},
-      {star: 'fa-solid fa-star', starStroke: 'fa-solid fa-star-half-stroke'},
-      {star: 'fa-solid fa-star', starStroke: 'fa-solid fa-star-half-stroke'},
-      {star: 'fa-solid fa-star', starStroke: 'fa-solid fa-star-half-stroke'},
-    ],
-    rating: 3,
-  },
-} as ComponentMeta<typeof PerformanceAssessment>;
-
-const Template: ComponentStory<typeof PerformanceAssessment> = args => <PerformanceAssessment {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {};

package/src/stories/Components/PerformanceAssessment/PerformanceAssessment.tsx

@@ -1,108 +0,0 @@
-import './PerformanceAssessment.scss';
-import 'react-circular-progressbar/dist/styles.css';
-import {CircularProgressbar, CircularProgressbarWithChildren, buildStyles} from 'react-circular-progressbar';
-import {Icon} from '../../Elements/Icon/Icon';
-import {useState} from 'react';
-
-export interface IPerformanceAssessment {
-  // BASE
-  labelPerformance?: string;
-  dataTime?: IDataTime[];
-  percentage: number;
-  description?: string;
-  star?: IStars[];
-  qualification?: string;
-  rating: number;
-  // IS-OPTIONS
-
-  // EVENTS
-
-  // GENERIC
-  className?: string;
-}
-export interface IDataTime {
-  date?: string;
-}
-export interface IStars {
-  star: string;
-  starStroke: string;
-}
-
-export const PerformanceAssessment = ({
-  labelPerformance,
-  dataTime,
-  percentage,
-  description,
-  star,
-  qualification,
-  rating,
-  className,
-}: IPerformanceAssessment) => {
-  const roundedRating = Math.round(rating * 2) / 2;
-
-  return (
-    <div className="elv-component elv-performanceAssessment">
-      <div
-        className={[
-          'performanceAssessment box is-flex is-flex-direction-column p-5 is-gap-6 is-align-items-center',
-          `${className ? ' ' + className : ''}`,
-        ].join('')}
-      >
-        <div className="is-flex is-flex-direction-column is-gap-3">
-          <div className="has-text-weight-bold has-text-grey-dark">{labelPerformance}</div>
-          <div>
-            {dataTime?.map(data => (
-              <div className="performanceAssessment__date is-size-14px has-text-weight-medium">{data.date}</div>
-            ))}
-          </div>
-        </div>
-        <div style={{maxWidth: '214.277px'}} className="progressCircular">
-          <CircularProgressbarWithChildren
-            value={percentage}
-            text={''}
-            strokeWidth={15}
-            background
-            backgroundPadding={10}
-            styles={buildStyles({
-              backgroundColor: '#FFFFFF',
-              pathColor: '#7DAFFF',
-              trailColor: '#CED4DA4D',
-              strokeLinecap: 'butt',
-            })}
-          >
-            <div className="is-size-4">
-              <strong>{`${percentage}%`}</strong>
-            </div>
-            <div className="progressCircular__desc is-size-7 has-text-centered">{description}</div>
-          </CircularProgressbarWithChildren>
-        </div>
-        <div className="mt-2">
-          <div className="is-flex">
-            {star?.map((item, index) => {
-              const isHalfStar = roundedRating - index === 0.5;
-              return (
-                <div key={index}>
-                  {!isHalfStar && (
-                    <Icon icon={item.star} className="iconStar mr-3 is-size-5" color={index < roundedRating ? '#16A34A' : '#CED4DA'} />
-                  )}
-
-                  {isHalfStar && (
-                    <Icon
-                      icon={item.starStroke} // Reemplaza esto con el ícono o clase que represente media estrella
-                      className="iconStar mr-3 is-size-5"
-                      color="#16A34A"
-                    />
-                  )}
-                </div>
-              );
-            })}
-          </div>
-          <p className="has-text-grey is-size-14px mt-3">
-            {' '}
-            {rating} {qualification}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/Components/ShiftDiary/ShiftDiary.scss

@@ -1,45 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-shiftdiary{
-    .shiftdiary{
-        border-radius: 16px;
-        box-sizing: border-box;
-
-        &__button{
-            color: $primary-600;
-        }
-
-        &__status{
-            min-width: 96px;
-            padding: 3px 10px;
-            border-radius: 100px;
-        }
-
-        &__present{
-            background-color: $tertiary-600;
-        }
-
-        &__assigned{
-            background-color:$primary-600;
-        }
-        .radius{
-            border-radius: 12px;
-        }
-        .icon{
-            color: #34D399;
-        }
-        .icon2{
-            color: $primary-400;
-        }
-        .item{
-            flex: 1
-        }
-
-         &__boxdiary{
-            @media screen and (max-width: 768px){
-                flex-direction: column;
-            }
-         }
-      
-    }
-}

package/src/stories/Components/ShiftDiary/ShiftDiary.stories.tsx

@@ -1,32 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {ShiftDiary} from './ShiftDiary';
-
-export default {
-  title: 'Components/ShiftDiary',
-  component: ShiftDiary,
-  args: {
-    title: 'Agenda de turnos',
-    labelQuantity: 'Presentes',
-    totalNumber: 3,
-    labelAssigned: 'Asignados',
-    numberAssigned: 52,
-    option: [
-      {
-        time: '11:20 h',
-        name: 'Castro, Julietas',
-        age: '26 años',
-        colorContains: '#059669',
-        colorIcon: '#34D399',
-        state: 'Presente',
-      },
-      {time: '11:20 h', name: 'Castro, Julieta', age: '26 años', colorContains: '#059669', colorIcon: '#34D399', state: 'Presente'},
-      {time: '11:20 h', name: 'Castro, Julieta', age: '26 años', colorContains: '#124596', colorIcon: '#2B71DF', state: 'Presente'},
-    ],
-    onSeeMore: () => console.log('Clicked Button'),
-  },
-} as ComponentMeta<typeof ShiftDiary>;
-
-const Template: ComponentStory<typeof ShiftDiary> = args => <ShiftDiary {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {};

package/src/stories/Components/ShiftDiary/ShiftDiary.tsx

@@ -1,92 +0,0 @@
-import {Button} from '../../Elements/Button/Button';
-import {Icon} from '../../Elements/Icon/Icon';
-import './ShiftDiary.scss';
-
-export interface IShiftDiary {
-  // BASE
-  title?: string;
-  option?: IOptions[];
-  labelQuantity?: string;
-  totalNumber?: number;
-  labelAssigned?: string;
-  numberAssigned?: number;
-
-  // IS-OPTIONS
-
-  // EVENTS
-  onSeeMore: () => void;
-
-  // GENERIC
-  className?: string;
-}
-export interface IOptions {
-  time?: string;
-  name?: string;
-  age?: string;
-  colorIcon?: string;
-  colorContains?: string;
-  state?: string;
-}
-
-export const ShiftDiary = ({
-  title,
-  option,
-  labelQuantity,
-  totalNumber,
-  labelAssigned,
-  numberAssigned,
-  onSeeMore,
-  className,
-}: IShiftDiary) => {
-  return (
-    <div className="elv-component elv-shiftdiary">
-      <div className={['shiftdiary box is-flex is-flex-direction-column  p-5 is-gap-5', `${className ? ' ' + className : ''}`].join('')}>
-        <div className="is-flex is-justify-content-space-between is-align-items-center">
-          <p className="is-size-4 has-text-weight-bold has-text-grey-dark">{title}</p>
-          <Button
-            label="Ver más"
-            fill="unstyled"
-            color="primary"
-            className="shiftdiary__button is-size-10px has-text-weight-medium"
-            onClick={() => onSeeMore && onSeeMore()}
-          />
-        </div>
-        <div className=" shiftdiary__boxdiary  is-flex is-gap-5">
-          <div className="item is-flex is-flex-direction-column is-gap-4">
-            {option?.map(item => (
-              <div className="is-flex is-flex-direction-column is-gap-4">
-                <div className="has-text-grey-dark">{item.time}</div>
-                <div className="is-flex is-align-items-center py-4 is-justify-content-space-between">
-                  <div className="is-flex is-gap-4">
-                    <div className="has-text-weight-semibold has-text-grey-dark">{item.name}</div>
-                    <div className="has-text-grey-dark">{item.age}</div>
-                  </div>
-                  <div className="shiftdiary__status is-flex" style={{backgroundColor: item.colorContains}}>
-                    <Icon icon="fa-solid fa-circle" color={item.colorIcon} className="mr-2" />
-                    <p className="has-text-light is-size-7">{item.state}</p>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="item is-flex is-flex-direction-column is-align-items-start is-gap-4">
-            <div className="shiftdiary__present radius is-flex p-4 is-align-items-center is-justify-content-space-between is-fullw">
-              <div className="is-flex">
-                <Icon icon="fa-regular fa-circle-check" className="icon mr-2" size="24px" />
-                <div className="has-text-light is-size-5 has-text-weight-bold">{labelQuantity}</div>
-              </div>
-              <div className="has-text-light is-size-5 has-text-weight-bold">{totalNumber}</div>
-            </div>
-            <div className="shiftdiary__assigned radius is-flex p-4 is-align-items-center is-fullw is-justify-content-space-between">
-              <div className="is-flex">
-                <Icon icon="fa-regular fa-calendar" className="icon2 mr-2" size="24px" />
-                <div className="has-text-light is-size-5 has-text-weight-bold">{labelAssigned}</div>
-              </div>
-              <div className="has-text-light is-size-5 has-text-weight-bold">{numberAssigned}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/Components/Stepper/Stepper.stories.tsx

@@ -1,26 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Stepper} from './Stepper';
-
-export default {
-  title: 'Components/Stepper',
-  component: Stepper,
-  argsTypes: {
-    items: {control: 'object'},
-  },
-  args: {
-    activeLabel: 'Step 3',
-  },
-} as ComponentMeta<typeof Stepper>;
-
-const Template: ComponentStory<typeof Stepper> = args => <Stepper {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {
-  items: [
-    {label: 'Step 1', icon: 'fa fa-check', onClick: () => console.log('Step 1 Clicked')},
-    {label: 'Step 2', icon: 'fa fa-check', onClick: () => console.log('Step 2 Clicked')},
-    {label: 'Step 3', icon: 'fa fa-check', onClick: () => console.log('Step 3 Clicked')},
-    {label: 'Step 4', icon: 'fa fa-check', onClick: () => console.log('Step 4 Clicked')},
-    {label: 'Step 5', icon: 'fa fa-check', onClick: () => console.log('Step 5 Clicked')},
-  ],
-};