dgrcorrientes-modulos 1.0.0

package/src/stories/Components/Collapse/Collapse.tsx

@@ -0,0 +1,451 @@
+import React, {useEffect, useRef, useState} from 'react';
+import './Collapse.scss';
+import {Badge, BadgeProps} from '../../Elements/Badge/Badge';
+import {Button, IButton} from '../../Elements/Button/Button';
+import {Checkbox, ICheckbox} from '../../Form/Checkbox/Checkbox';
+import {Icon, IIcon} from '../../Elements/Icon/Icon';
+import {Tooltip, ITooltip} from '../Tooltip/Tooltip';
+import {Radio, IRadio} from '../../Form/Radio/Radio';
+import {ISelect, Select} from '../../Form/Select/Select';
+import {generateRandomKey} from '../../../utils/functions';
+import {CollapseEdit, ICollapseEdit, IDataPrice} from '../CollapseEdit/CollapseEdit';
+import {Input} from '../../Form/Input/Input';
+
+type ICollapseOrEmptyObject = ICollapse | {};
+
+export interface ICollapse extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  type: 'father' | 'child' | 'nephew';
+  paddingLeft?: 'short' | 'long';
+  isFather?: boolean;
+  className?: string;
+  show?: boolean;
+  initialState?: boolean;
+  childCollapse?: ICollapse[];
+  disabled?: boolean;
+  colored?: boolean;
+  borderBottom?: boolean;
+  borderTop?: boolean;
+  collapseEdit?: ICollapseEdit;
+  showAmountinEdit?: boolean;
+
+  // LEFT
+  title?: string;
+  stateTitle?: {color?: string; label?: string};
+  titleWeight?: 'regular' | 'semibold';
+  titleIcon?: IIcon;
+  description?: string;
+  badge?: BadgeProps;
+  details?: string;
+  dateDays?: string;
+  dateTime?: string;
+
+  // RIGHT
+  price?: number;
+  priceColor?: string;
+  priceTop?: {description?: string; value?: number};
+  priceBottom?: {description?: string; value?: number};
+  priceLeft?: {checkbox?: ICheckbox; label?: string};
+  buttonMenu?: {button: IButton; select?: ISelect; menuDropComponent?: React.ReactNode; onEllipse?: () => void};
+  buttonLink?: IButton;
+  buttonDetail?: {button: IButton; tooltip?: ITooltip; tooltipPos?: 'top' | 'bottom'};
+
+  dropRightButton?: IButton;
+  buttonEdit?: IButton;
+  checkbox?: ICheckbox;
+  callBackCheckbox?: (object: ICollapseOrEmptyObject) => void;
+  radio?: IRadio;
+
+  onSaveData?: (Data: IDataPrice) => void;
+  onCalculateClick?: (value: number) => void;
+}
+
+export const Collapse = ({
+  type,
+  paddingLeft,
+  isFather,
+  className,
+  show,
+  initialState,
+  childCollapse,
+  disabled,
+  colored,
+  borderBottom,
+  borderTop,
+  title,
+  stateTitle,
+  titleWeight,
+  titleIcon,
+  description,
+  badge,
+  details,
+  dateDays,
+  dateTime,
+  price,
+  priceColor,
+  priceTop,
+  priceBottom,
+  priceLeft,
+  buttonMenu,
+  buttonLink,
+  buttonDetail,
+  dropRightButton,
+  buttonEdit,
+  checkbox,
+  collapseEdit,
+  callBackCheckbox,
+  radio,
+  onSaveData,
+  showAmountinEdit,
+  ...props
+}: ICollapse) => {
+  const [isExpanded, setIsExpanded] = useState(initialState);
+  const [detailExpanded, setDetailExpanded] = useState(false);
+  const [menuExpanded, setMenuExpanded] = useState(false);
+  const [edit, setEdit] = useState(false);
+  const [disable, setDisable] = useState(disabled);
+  const [cantidad, setCantidad] = useState(price);
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleClickExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const handleClickEdit = () => {
+    setEdit(!edit);
+    setDisable(!disable);
+  };
+
+  const handleCantidadChange = (cantidad: number) => {
+    setCantidad(cantidad);
+  };
+
+  const menuDropRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuDropRef.current && !menuDropRef.current.contains(event.target as Node)) {
+        setMenuExpanded(false);
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [menuDropRef]);
+
+  const detailsDropRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (detailsDropRef.current && !detailsDropRef.current.contains(event.target as Node)) {
+        setDetailExpanded(false);
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [detailsDropRef]);
+
+  return (
+    <div className={`elv-component elv-collapse ${className ? className : ''}`} {...props}>
+      {!edit && !disable ? (
+        <div
+          className={[
+            'e-collapse',
+            `${show ? ' e-collapse--show' : ' e-collapse--hide'}`,
+            `${colored ? ' e-collapse--colored-gray' : ''}`,
+            `${borderTop ? ' e-collapse--borderTop' : ''}`,
+            `${className ? ' ' + className : ''}`,
+          ].join('')}
+        >
+          <div
+            className={`e-collapse__container ${'e-collapse__container--' + type} ${
+              paddingLeft && paddingLeft === 'short'
+                ? 'e-collapse__container--' + type + '--short'
+                : 'e-collapse__container--' + type + '--long'
+            } ${disabled ? 'e-collapse__container--disabled' : ''} ${borderBottom ? 'e-collapse__container--borderBottom' : ''} ${
+              title && !description && !details ? 'e-collapse__container--' + type + '--onlyTitle ' : ''
+            }is-flex is-justify-content-space-between`}
+          >
+            <div
+              className="left-container is-flex"
+              style={{cursor: isFather && !disabled ? 'pointer' : 'auto'}}
+              onClick={() => {
+                if (isFather && !disabled) {
+                  handleClickExpand();
+                }
+              }}
+            >
+              {isFather && (
+                <div className={`left-container__dropIcon`} style={stateTitle && {paddingTop: '28px'}}>
+                  <Icon icon={'fa-solid fa-chevron-right'} className={`icon-drop ${isExpanded && 'rotate'}`}></Icon>
+                </div>
+              )}
+              <div className="left-container__texts is-flex is-flex-direction-column is-justify-content-center">
+                {stateTitle && (
+                  <div className="state-title is-flex" style={{color: stateTitle?.color}}>
+                    <Icon icon="fa-solid fa-circle"></Icon> <p className="state-title__text">{stateTitle?.label}</p>
+                  </div>
+                )}
+                <div className="title-container is-flex is-align-items-center">
+                  {titleIcon && <Icon {...titleIcon}></Icon>}
+                  {badge && <Badge {...badge}></Badge>}
+                  {title && (
+                    <p
+                      className={`title-container__title title-container__title${
+                        titleWeight && titleWeight == 'regular' ? '--regular' : '--semibold'
+                      }`}
+                    >
+                      {title}
+                    </p>
+                  )}
+                </div>
+                {description && <p className="description">{description}</p>}
+
+                {details && <p className="details">{details}</p>}
+                {(dateDays || dateTime) && (
+                  <div className="date is-flex">
+                    {dateDays && (
+                      <span className="date__days is-flex is-align-items-center">
+                        <Icon icon="fa-solid fa-calendar-days"></Icon>
+                        <p>{dateDays}</p>
+                      </span>
+                    )}
+                    {dateTime && (
+                      <span className="date__time is-flex is-align-items-center">
+                        <Icon icon="fa-solid fa-clock"></Icon>
+                        <p>{dateTime}</p>
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="right-container is-flex is-align-items-center">
+              {buttonDetail && (
+                <span className="right-container__buttonDetail" ref={detailsDropRef}>
+                  <Button
+                    {...buttonDetail.button}
+                    onClick={() => {
+                      setDetailExpanded(!detailExpanded);
+                      buttonDetail.button.onClick && buttonDetail.button.onClick();
+                    }}
+                  />
+                  {buttonDetail.tooltip ? (
+                    <div
+                      className={`detail-tooltip ${buttonDetail.tooltipPos === 'top' ? 'detail-tooltip--top' : 'detail-tooltip--bottom'}`}
+                    >
+                      <Tooltip {...buttonDetail.tooltip} active={detailExpanded} />
+                    </div>
+                  ) : (
+                    <></>
+                  )}
+                </span>
+              )}
+              <div className="right-container__price is-flex">
+                {priceLeft && priceLeft.checkbox && (
+                  <div className="is-flex is-align-items-center">
+                    <Checkbox {...priceLeft.checkbox}></Checkbox>
+                  </div>
+                )}
+                <div className="col-price is-flex is-flex-direction-column is-align-items-end">
+                  {priceTop && (
+                    <span className="col-price__top is-flex is-align-items-center">
+                      <p className="desc">{priceTop.description}</p>
+                      <p className="value">$ {priceTop.value}</p>
+                    </span>
+                  )}
+                  {price && (
+                    <p className="col-price__price" style={priceColor && priceColor != '' ? {color: priceColor} : {color: 'none'}}>
+                      ${price}
+                    </p>
+                  )}
+                  {priceBottom && (
+                    <span className="col-price__bottom is-flex is-align-items-center">
+                      <p className="desc">{priceBottom.description}</p>
+                      <p className="value">$ {priceBottom.value}</p>
+                    </span>
+                  )}
+                </div>
+              </div>
+              {buttonMenu && (
+                <div className="right-container__buttonMenu is-flex is-align-items-center is-relative" ref={menuDropRef}>
+                  <span className="menu-button ">
+                    <Button
+                      {...buttonMenu.button}
+                      onClick={() => {
+                        setMenuExpanded(!menuExpanded), buttonMenu.onEllipse && buttonMenu.onEllipse();
+                      }}
+                    />
+                  </span>
+                  {menuExpanded && buttonMenu.menuDropComponent && (
+                    <div className="menu-drop-component is-absolute">{buttonMenu.menuDropComponent}</div>
+                  )}
+
+                  {buttonMenu.select && (
+                    <div className={`menu-select`} style={menuExpanded ? {display: 'block'} : {display: 'none'}}>
+                      <Select {...buttonMenu.select} />
+                    </div>
+                  )}
+                </div>
+              )}
+              {dropRightButton && (
+                <div className="right-container__dropLeftButton is-flex">
+                  <Button {...dropRightButton} />
+                </div>
+              )}
+              {buttonLink && (
+                <div className="right-container__buttonLink is-flex is-align-items-center">
+                  <Button {...buttonLink} />
+                </div>
+              )}
+              {buttonEdit || checkbox || radio ? (
+                <div className="right-container__editCheckbox is-flex">
+                  {buttonEdit && (
+                    <div className="buttonEdit is-flex is-align-items-center">
+                      <Button
+                        {...buttonEdit}
+                        onClick={() => {
+                          handleClickEdit();
+                        }}
+                      />
+                    </div>
+                  )}
+                  {checkbox && (
+                    <div className="_checkbox is-flex is-align-items-center">
+                      <Checkbox
+                        // defaultChecked={isChecked}
+                        {...checkbox}
+                        onCheck={state => {
+                          setIsChecked(state);
+                          if (callBackCheckbox) {
+                            if (state) {
+                              callBackCheckbox({
+                                type,
+                                paddingLeft,
+                                isFather,
+                                show,
+                                initialState,
+                                childCollapse,
+                                disabled,
+                                colored,
+                                borderBottom,
+                                borderTop,
+                                title,
+                                stateTitle,
+                                titleWeight,
+                                titleIcon,
+                                description,
+                                badge,
+                                details,
+                                dateDays,
+                                dateTime,
+                                price,
+                                priceColor,
+                                priceTop,
+                                priceBottom,
+                                priceLeft,
+                                buttonMenu,
+                                buttonLink,
+                                buttonDetail,
+                                dropRightButton,
+                                buttonEdit,
+                              });
+                            } else {
+                              callBackCheckbox({});
+                            }
+                          }
+                        }}
+                      />
+                    </div>
+                  )}
+                  {radio && (
+                    <div className="_radio is-flex is-align-items-center">
+                      <Radio
+                        {...radio}
+                        onCheck={() => {
+                          if (callBackCheckbox) {
+                            callBackCheckbox({
+                              type,
+                              paddingLeft,
+                              isFather,
+                              show,
+                              initialState,
+                              childCollapse,
+                              disabled,
+                              colored,
+                              borderBottom,
+                              borderTop,
+                              title,
+                              stateTitle,
+                              titleWeight,
+                              titleIcon,
+                              description,
+                              badge,
+                              details,
+                              dateDays,
+                              dateTime,
+                              price,
+                              priceColor,
+                              priceTop,
+                              priceBottom,
+                              priceLeft,
+                              buttonMenu,
+                              buttonLink,
+                              buttonDetail,
+                              dropRightButton,
+                              buttonEdit,
+                            });
+                          }
+                          {
+                            radio.onCheck && radio.onCheck();
+                          }
+                        }}
+                      ></Radio>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <></>
+              )}
+            </div>
+          </div>
+
+          {childCollapse && childCollapse.map(item => <Collapse key={generateRandomKey()} {...item} show={isExpanded} />)}
+        </div>
+      ) : (
+        <div className="">
+          <CollapseEdit
+            labelDescription="1001 - Tambos"
+            priceTopEdit={{labelImpost: 'Impuesto', labelNumberI: priceTop?.value}}
+            priceBottomEdit={{labelAliquot: 'Alícuota', labelNumberA: priceBottom?.value}}
+            className="collapseEdit"
+            checkbox={{label: 'Exento', disabled: false, size: 'sm', value: '', name: '', onCheck(checked) {}}}
+            inputAmount={{type: 'number', color: 'none', placeholder: 'Monto imponible', size: 'normal', onChange(value) {}}}
+            input={{type: 'number', color: 'none', placeholder: 'Cantidad', size: 'normal', onChange(value) {}}}
+            buttonRecalculate={{fill: 'unstyled', label: 'Recalcular', icon: 'fa-solid fa-rotate-right', trailingIcon: false, onClick() {}}}
+            buttonCancel={{
+              fill: 'unstyled',
+              color: 'secondary',
+              size: 'normal',
+              label: 'Cancelar',
+              onClick() {
+                setEdit(false);
+                setDisable(false);
+              },
+            }}
+            onSaveData={data => {
+              onSaveData && onSaveData({aliquot: data.aliquot, calculatedtax: data.calculatedtax});
+              setEdit(false);
+              setDisable(false);
+            }}
+            showAmountinEdit={showAmountinEdit}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/stories/Components/CollapseEdit/CollapseEdit.scss

@@ -0,0 +1,128 @@
+@import '/src/sass/utilities/variables';
+
+.elv-collapsedit {
+  .collapsedit {
+    border: 1px solid $truegray-300;
+    border-radius: 0px;
+
+    &__breakpoint4 {
+      @media screen and (max-width: 768px) {
+        flex-direction: column;
+        padding: 16px;
+      }
+    }
+
+    &__breakpoint3 {
+      @media screen and (max-width: 853px) {
+        flex-direction: column;
+        align-items: flex-start !important;
+        gap: 10px;
+      }
+      @media screen and (max-width: 768px) {
+        align-items: center !important;
+      }
+    }
+
+    &__breakpoint2 {
+      @media screen and (max-width: 1060px) {
+        flex-direction: column;
+        align-items: center !important;
+        gap: 10px !important;
+      }
+      @media screen and (max-width: 768px) {
+        width: 100% !important;
+      }
+    }
+
+    &__breakpoint1 {
+      @media screen and (max-width: 1275px) {
+        flex-direction: column;
+        align-items: center !important;
+        gap: 5px !important;
+      }
+      @media screen and (max-width: 768px) {
+        width: 100% !important;
+      }
+    }
+    &__desc-cont {
+      @media screen and (max-width: 1110px) {
+        margin-right: 0px !important;
+        align-items: center !important;
+      }
+    }
+
+    &__desc {
+      min-width: 130px;
+    }
+
+    &__check {
+      min-width: 77px;
+    }
+
+    &__input {
+      @media screen and (max-width: 768px) {
+        width: 100% !important;
+      }
+    }
+
+    &__inputAmount {
+      @media screen and (max-width: 1060px) {
+        margin-right: 0 !important;
+      }
+      @media screen and (max-width: 768px) {
+        width: 100% !important;
+      }
+    }
+
+    &__bottom {
+      min-width: 50px;
+    }
+
+    &__top {
+      min-width: 50px;
+    }
+
+    input {
+      padding: 8px 12px;
+    }
+
+    button {
+      padding: 8px 16px;
+    }
+    &__buttonCont {
+      @media screen and (max-width: 768px) {
+        gap: 5px !important;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+      }
+    }
+
+    &__buttonRec {
+      color: $primary-600;
+    }
+
+    &__button {
+      border-left: 1px solid $truegray-300;
+      @media screen and (max-width: 768px) {
+        width: 100%;
+        border-left: none;
+        gap: 5px !important;
+        flex-direction: column;
+      }
+    }
+    .button-cancel {
+      width: 100px;
+      @media screen and (max-width: 768px) {
+        width: 100% !important;
+        margin-left: 0px !important;
+      }
+    }
+    .button-save {
+      width: 100px;
+      @media screen and (max-width: 768px) {
+        width: 100% !important;
+      }
+    }
+  }
+}

package/src/stories/Components/CollapseEdit/CollapseEdit.stories.tsx

@@ -0,0 +1,29 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {CollapseEdit} from './CollapseEdit';
+
+export default {
+  title: 'Components/Collapsedit',
+  component: CollapseEdit,
+  args: {
+    labelDescription: '1001 - Tambos',
+    checkbox: {label: 'Exento', disabled: false, size: 'sm'},
+    input: {type: 'number', color: 'none', placeholder: 'Cantidad', onChange(value) {}},
+    inputAmount: {type: 'number', color: 'none', placeholder: 'Monto imponible'},
+    priceBottomEdit: {labelAliquot: 'Alícuota', labelNumberA: 2.9},
+    priceTopEdit: {labelImpost: 'Impuesto.', labelNumberI: 990},
+    buttonRecalculate: {fill: 'unstyled', label: 'Recalcular', icon: 'fa-solid fa-rotate-right', trailingIcon: false, onClick() {}},
+    buttonCancel: {
+      fill: 'unstyled',
+      color: 'secondary',
+      size: 'normal',
+      label: 'Cancelar',
+      onClick: () => console.log('buttonCancel Clicked'),
+    },
+    showAmountinEdit: true,
+  },
+} as ComponentMeta<typeof CollapseEdit>;
+
+const Template: ComponentStory<typeof CollapseEdit> = args => <CollapseEdit {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};