dgrcorrientes-modulos 1.0.0

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

@@ -0,0 +1,102 @@
+import {useEffect, useState} from 'react';
+import './stepper.scss';
+
+export interface IStepper extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  activeLabel: string;
+  items: {
+    label: string;
+    icon: string;
+    onClick?: () => void;
+  }[];
+
+  // events
+  handlePosition?: (itemActive: ItemValue) => void;
+
+  // react
+  className?: string;
+}
+
+export interface ItemValue {
+  label: string;
+  icon: any;
+  onClick?: () => void;
+}
+
+export const Stepper = ({items, activeLabel, handlePosition, className, ...props}: IStepper) => {
+  var activeItemIndex = 0;
+  const itemActive = items.find(item => item.label === activeLabel);
+
+  const [activeStep, setActiveStep] = useState(itemActive);
+  const [positionStep, setPositionStep] = useState(itemActive);
+
+  if (activeStep) {
+    var activeItemIndex = items.indexOf(activeStep);
+  }
+
+  useEffect(() => {
+    var newItemActive = items.find(item => item.label === activeLabel);
+    setActiveStep(newItemActive);
+
+    if (activeStep) {
+      activeItemIndex = items.indexOf(activeStep);
+    }
+
+    setPositionStep(newItemActive);
+  }, [activeLabel, items]);
+
+  const handleClick = (item: ItemValue) => {
+    setPositionStep(item);
+
+    if (handlePosition) {
+      handlePosition(item);
+    }
+
+    if (item.onClick) {
+      item.onClick();
+    }
+  };
+
+  return (
+    <div className="elv-component elv-steps" {...props}>
+      <ul className={`steps has-content-centered is-horizontal ${className ? className : ''}`}>
+        {items.map((item, index) => (
+          <li
+            className={`steps-segment ${items[index + 1] !== undefined && items[index + 1] == activeStep ? 'is-pre-active' : ''} ${
+              item == activeStep ? 'is-active' : ''
+            }`}
+            key={index}
+          >
+            <span
+              className="steps-marker"
+              onClick={() => {
+                if (index <= activeItemIndex) {
+                  handleClick(item);
+                } else {
+                  if (item.onClick) {
+                    item.onClick();
+                  }
+                }
+              }}
+            >
+              {index < activeItemIndex ? (
+                <span className="icon">
+                  <i className={`${item.icon}`}></i>
+                </span>
+              ) : (
+                <span>{index + 1}</span>
+              )}
+            </span>
+            <div
+              className={`steps-content ${index <= activeItemIndex ? 'steps-content--completed' : 'steps-content--incompleted'} ${
+                item === positionStep && 'steps-content--position'
+              }`}
+            >
+              <p className="steps-content__item-label">{item.label}</p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/stories/Components/Stepper/stepper.scss

@@ -0,0 +1,59 @@
+@import '/src/sass/utilities/variables';
+
+.steps {
+  list-style: none;
+  padding-left: 0px;
+  .steps-segment {
+    .steps-content {
+      word-wrap: break-word;
+
+      &__item-label {
+        font-size: 16px;
+        line-height: 125%;
+        margin: 5px;
+        text-align: center;
+      }
+
+      &--completed {
+        color: $text-500;
+      }
+
+      &--incompleted {
+        color: $text-300;
+      }
+
+      &--position {
+        font-weight: bold;
+        color: $text-900;
+      }
+    }
+
+    .steps-marker {
+      font-family: 'SF UI Text', sans-serif;
+      cursor: pointer;
+
+      &:not(.is-hollow) {
+        color: white !important;
+      }
+    }
+
+    &.is-pre-active {
+      &::after {
+        background-image: linear-gradient(to right, $success-600 50%, $primary-600 50%);
+      }
+    }
+
+    &.is-active {
+      .steps-content {
+        &__item-label {
+          // font-weight: bold;
+          // color: $text-900;
+        }
+      }
+
+      &::after {
+        background-image: linear-gradient(to right, $primary-600 50%, $muted-300 50%);
+      }
+    }
+  }
+}

package/src/stories/Components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,76 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {Tabs} from './Tabs';
+
+export default {
+  title: 'Components/Tabs',
+  component: Tabs,
+  args: {
+    activeLabel: {
+      label: 'Inmobiliario',
+      disabled: false,
+      icon: {icon: 'fa fa-home'},
+      subtitle: '$ 14.181,28',
+      onClick: () => console.log('Inmobiliario Clicked'),
+    },
+    subActiveLabel: null,
+    items: [
+      {
+        label: 'Inmobiliario',
+        disabled: false,
+        icon: {icon: 'fa fa-home'},
+        subtitle: '$ 14.181,28',
+        onClick: () => console.log('Inmobiliario Clicked'),
+      },
+      {
+        label: 'Ingresos Brutos',
+        disabled: false,
+        icon: {icon: 'fa-solid fa-user'},
+        subtitle: '$ 2.865,86',
+        onClick: () => console.log('Ingresos Brutos Clicked'),
+      },
+      {
+        label: 'Inmobiliario Rural',
+        onClick: () => console.log('Inmobiliario Rural Clicked'),
+        disabled: false,
+        icon: {icon: 'fa-solid fa-truck-field'},
+        subtitle: '$ 1.485,71',
+        sub_labels: [
+          {label: 'Sub-label 1', disabled: false, onClick: () => console.log('Sub-label 1 Clicked')},
+          {label: 'Sub-label 2', disabled: false, onClick: () => console.log('Sub-label 2 Clicked')},
+          {label: 'Sub-label 3', disabled: false, onClick: () => console.log('Sub-label 3 Clicked')},
+        ],
+      },
+      {
+        label: 'Agentes - Impuestos de Sello',
+        disabled: false,
+        icon: {icon: 'fa-solid fa-stamp'},
+        subtitle: '$ 150,99',
+        onClick: () => console.log('Impuestos de Sello Clicked'),
+      },
+      {
+        label: 'Agentes - IIBB',
+        disabled: true,
+        icon: {icon: 'fa-solid fa-dollar-sign'},
+        subtitle: '$ 1.161,05',
+        onClick: () => console.log('IIBB Clicked'),
+      },
+    ],
+  },
+} as ComponentMeta<typeof Tabs>;
+
+const Template: ComponentStory<typeof Tabs> = args => <Tabs {...args} />;
+
+export const BorderBottom = Template.bind({});
+BorderBottom.args = {
+  type: 'border-bottom',
+};
+
+export const Boxed = Template.bind({});
+Boxed.args = {
+  type: 'boxed',
+};
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  type: 'vertical',
+};

package/src/stories/Components/Tabs/Tabs.tsx

@@ -0,0 +1,111 @@
+import {useState} from 'react';
+import './tabs.scss';
+import {generateRandomKey, shortenText} from '../../../utils/functions';
+import {IIcon, Icon} from '../../Elements/Icon/Icon';
+
+export interface ITabs extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  type: 'border-bottom' | 'boxed' | 'vertical';
+  activeTab: ITabItemValue | null;
+  subactiveTab?: ITabSubITabItemValue | null;
+  items: {
+    label: string;
+    sub_labels?: ITabSubITabItemValue[];
+    icon?: IIcon;
+    subtitle?: string;
+    disabled: boolean;
+    onClick?: () => void;
+  }[];
+
+  // events
+  handleActive?: (itemActive: ITabItemValue) => void;
+  handleSubActive?: (itemActive: ITabSubITabItemValue) => void;
+
+  // react
+  className?: string;
+}
+
+export interface ITabItemValue {
+  label: string;
+  sub_labels?: ITabSubITabItemValue[];
+  icon?: IIcon;
+  subtitle?: string;
+  disabled: boolean;
+  onClick?: () => void;
+}
+
+export interface ITabSubITabItemValue {
+  label: string;
+  disabled: boolean;
+  onClick?: () => void;
+}
+
+export const Tabs = ({items, type, activeTab, handleActive, handleSubActive, subactiveTab, className, ...props}: ITabs) => {
+  return (
+    <div className="elv-component elv-tabs" {...props}>
+      <ul className={`tabs tabs--${type} ${className ? className : ''}`}>
+        {items.map((item, index) => (
+          <div className="tabs__item" key={item.label + generateRandomKey()}>
+            {type === 'boxed' && item.icon && item.subtitle ? (
+              <li
+                onClick={() => {
+                  handleActive && handleActive(item);
+
+                  if (item.sub_labels && handleSubActive) {
+                    handleSubActive(item.sub_labels[0]);
+                  }
+                  item.onClick && item.onClick();
+                }}
+                className={`item is-clickable ${index !== 0 ? 'ml-3' : ''} ${item.label == activeTab?.label ? 'item--active' : ''} ${
+                  item.disabled ? 'item--disabled' : ''
+                }`}
+              >
+                <div className="boxed-container is-flex is-justify-content-center mb-1">
+                  <Icon {...item.icon} className="boxed-container__icon mb-1 mr-1" />
+                  <p className="boxed-container__label">{shortenText(item.label, 30)}</p>
+                </div>
+                <p className="boxed-subtitle mb-1 is-size-7 has-text-weight-normal has-tc-truegray-600 has-text-centered">
+                  {shortenText(item.subtitle, 20)}
+                </p>
+              </li>
+            ) : (
+              <li
+                onClick={() => {
+                  handleActive && handleActive(item);
+
+                  if (item.sub_labels && handleSubActive) {
+                    handleSubActive(item.sub_labels[0]);
+                  }
+                  item.onClick && item.onClick();
+                }}
+                className={`item is-clickable ${index === 0 ? 'item--is-first' : ''} ${
+                  item.label == activeTab?.label ? 'item--active' : ''
+                } ${item.disabled ? 'item--disabled' : ''}`}
+              >
+                {shortenText(item.label, 30)}
+              </li>
+            )}
+            {item.sub_labels !== undefined &&
+              type === 'vertical' &&
+              item.sub_labels.map((sub_item, sub_index) => (
+                <li
+                  key={generateRandomKey()}
+                  onClick={() => {
+                    handleActive && handleActive(item);
+                    handleSubActive && handleSubActive(sub_item);
+
+                    sub_item.onClick && sub_item.onClick();
+                  }}
+                  className={`sub-item ${index === 0 ? 'sub-item__--first' : ''} ${
+                    item.label == activeTab?.label && sub_item.label == subactiveTab?.label ? 'sub-item--active' : ''
+                  } ${sub_item.disabled ? 'sub-item--inactive' : ''}`}
+                >
+                  {shortenText(sub_item.label, 25)}
+                </li>
+              ))}
+          </div>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/stories/Components/Tabs/tabs.scss

@@ -0,0 +1,118 @@
+@import '/src/sass/utilities/variables';
+
+.elv-tabs {
+  .tabs {
+    // min-width: max-content;
+    flex-wrap: wrap;
+    font-size: 14px;
+
+    &--border-bottom {
+      padding-bottom: 20px;
+
+      .item {
+        padding: 0px 50px 15px 50px !important;
+
+        &--disabled {
+          color: $text-300;
+          pointer-events: none !important;
+          display: block;
+        }
+
+        &--active {
+          font-weight: $fw-semibold;
+          border-bottom: 3px solid $primary-600;
+          color: $primary-600;
+        }
+      }
+    }
+
+    &--boxed {
+      padding-bottom: 20px;
+
+      .tabs__item {
+        flex:  1 0 0;
+        border-right: 2px solid #eff2f6;
+        border-bottom: 2px solid #eff2f6;
+        padding: 10px 16px 0px 0px;
+        
+        @media screen and (max-width: 870px){
+          max-width: calc(50% - 20px); 
+        }
+        @media screen and (max-width: 530px){
+          max-width: 100%;
+          
+        }
+      }
+
+      .item {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 10px;
+
+
+        &--inactive {
+          color: $text-300;
+          pointer-events: none;
+          display: block;
+        }
+
+        &--active {
+          font-weight: $fw-semibold;
+          color: $primary-600 !important;
+          border-bottom: 3px solid $primary-600;
+        }
+      }
+    }
+
+    &--vertical {
+      flex-direction: column;
+      align-items: flex-start !important;
+      padding: 0px;
+      min-width: min-content;
+      max-width: 300px;
+
+      .tabs__item {
+        width: 100%;
+
+        li {
+          border-left: 6px solid transparent;
+          padding: 8px 16px;
+          color: $muted-400;
+          text-align: left !important;
+        }
+
+        .item {
+          border-left-color: $muted-400;
+          border-bottom-width: 0px !important;
+          justify-content: flex-start;
+
+          &:hover {
+            border-left-color: $primary-600;
+          }
+
+          &--active {
+            font-weight: $fw-semibold;
+            border-left: 6px solid $primary-600;
+            color: $primary-600;
+          }
+        }
+
+        .sub-item {
+          padding-left: 30px;
+          cursor: pointer;
+
+          &:hover {
+            border-bottom: 0px;
+            color: $primary-600;
+          }
+
+          &--active {
+            background-color: #e7f0ff;
+            border-left-color: #e7f0ff;
+            color: $primary-600;
+          }
+        }
+      }
+    }
+  }
+}

package/src/stories/Components/Tooltip/Tooltip.scss

@@ -0,0 +1,235 @@
+@import '/src/sass/utilities/variables';
+
+.tooltip {
+  border-radius: 6px;
+  box-shadow: 0px 10px 28px 5px rgba(14, 31, 53, 0.1);
+  backdrop-filter: drop-shadow(0px 3px 6px rgba(14, 31, 53, 0.08)) drop-shadow(0px 6px 12px rgba(14, 31, 53, 0.12))
+    drop-shadow(0px 14px 24px rgba(14, 31, 53, 0.08));
+  position: relative;
+  min-width: 290px;
+
+  &__content {
+    border-radius: 6px;
+    padding: 10px;
+    z-index: 2;
+    background-color: $white;
+
+    .labels {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      &__text {
+        color: $darkText;
+        font-size: 14px;
+      }
+    }
+
+    &--calendar {
+      .labels {
+        &__date {
+          color: $text-400;
+          font-size: 10px;
+        }
+
+        &__sub_title {
+          color: $black;
+          font-size: 10px;
+          font-weight: $fw-medium;
+        }
+      }
+    }
+
+    &--text {
+      .labels {
+        padding: 5px;
+      }
+    }
+
+    &--taxes {
+      padding: 15px;
+      .labels {
+        font-size: 14px;
+
+        .principal-item {
+          &__label {
+            color: $text-500;
+            font-weight: $fw-semibold;
+          }
+
+          &__value {
+            color: $darkText;
+            font-weight: $fw-semibold;
+          }
+        }
+
+        .tax-sections {
+          border-bottom: 1px solid $truegray-300;
+
+          &__sec {
+            .sec-title {
+              font-size: 12px;
+              color: $text-500;
+            }
+
+            .sec-label {
+              padding-bottom: 5px;
+              &__label {
+                color: $text-500;
+              }
+
+              &__value {
+                color: $darkText;
+                font-weight: $fw-semibold;
+              }
+            }
+          }
+        }
+
+        .total {
+          color: $success-500;
+          font-weight: $fw-medium;
+        }
+
+        .amount {
+          color: $black;
+          font-weight: $fw-medium;
+          padding-bottom: 4px;
+          border-bottom: 1px solid $truegray-300;
+          margin-bottom: 10px;
+        }
+
+        .tax-notification {
+          margin-top: 10px;
+          margin-bottom: 10px;
+          background-color: $blueGray-100;
+          color: $blueGray-500;
+          padding: 10px;
+        }
+
+        .double-state {
+          &__state {
+            font-weight: $fw-medium;
+
+            .state-label {
+              font-size: 12px;
+              color: $text-500;
+              margin-bottom: 2px;
+            }
+
+            .state-status {
+              display: flex;
+              align-items: center;
+              gap: 5px;
+
+              i {
+                font-size: 9px;
+              }
+
+              &__text {
+                color: $darkText;
+              }
+            }
+          }
+        }
+
+        .triple-state {
+          padding-top: 10px;
+
+          &__state {
+            font-weight: $fw-medium;
+
+            .state-label {
+              font-size: 12px;
+              color: $text-500;
+              margin-bottom: 2px;
+            }
+
+            .state-status {
+              display: flex;
+              align-items: center;
+              gap: 5px;
+
+              i {
+                font-size: 9px;
+              }
+
+              &__text {
+                color: $darkText;
+              }
+            }
+          }
+        }
+
+        .tax-alert {
+          gap: 7px;
+          font-size: 12px;
+          color: $text-500;
+          margin-top: 15px;
+          padding-top: 15px;
+          border-top: 1px solid $truegray-300;
+
+          i {
+            font-size: 20px;
+            color: $darkBlue-500;
+          }
+        }
+      }
+    }
+
+    &.tp {
+      &::after {
+        content: '';
+        position: absolute;
+        background-color: $white;
+
+        width: 16px;
+        height: 16px;
+        bottom: -8px;
+        transform: rotate(-45deg);
+        z-index: -1;
+      }
+
+      &--center {
+        &::after {
+          left: 47%;
+        }
+      }
+
+      &--right {
+        &::after {
+          bottom: -4px;
+          right: 20px;
+        }
+      }
+
+      &--left {
+        &::after {
+          bottom: -4px;
+          left: 20px;
+        }
+      }
+
+      &--top-center {
+        &::after {
+          top: -10px;
+          left: 47%;
+        }
+      }
+
+      &--top-right {
+        &::after {
+          top: -4px;
+          right: 20px;
+        }
+      }
+
+      &--top-left {
+        &::after {
+          top: -4px;
+          left: 20px;
+        }
+      }
+    }
+  }
+}