dgrcorrientes-modulos 1.0.2 → 1.0.4

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

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

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

@@ -1,29 +0,0 @@
-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 = {};