dgrcorrientes-modulos 1.0.0

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

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

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

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

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

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

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

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

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

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

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

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