dgrcorrientes-modulos 1.0.0

package/src/stories/Form/Filters/Filters.tsx

@@ -0,0 +1,230 @@
+import {useEffect, useRef, useState} from 'react';
+import './filters.scss';
+import {shortenText} from '../../../utils/functions';
+import {Icon, IIcon} from '../../Elements/Icon/Icon';
+import {Button, IButton} from '../../Elements/Button/Button';
+import {Checkbox} from '../Checkbox/Checkbox';
+import {Radio} from '../Radio/Radio';
+import {Badge} from '../../Elements/Badge/Badge';
+
+export interface IFilters extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  fill?: 'outline' | 'rounded' | 'underline' | 'unstyled' | 'background';
+  placeholder: string;
+  button: IButton;
+  buttonCleaner: IButton;
+  section?: {
+    name: string;
+    type: string;
+    label: string;
+    options?: {name: string; iconItem?: IIcon; onClick?: () => void}[];
+  }[];
+
+  // boolean
+  disabled?: boolean;
+  error?: boolean;
+
+  // events
+  onChangeFilters?: (filters: FilterValue[]) => void;
+
+  // react
+  className?: string;
+}
+
+export interface FilterValue {
+  name: string;
+  label?: string;
+  value: string[];
+}
+
+export const Filters = ({
+  size = 'sm',
+  fill = 'outline',
+  disabled = false,
+  placeholder,
+  error,
+  section,
+  button,
+  buttonCleaner,
+  onChangeFilters,
+  className,
+  ...props
+}: IFilters) => {
+  const [visibleDropdown, setVisibleDropdown] = useState(false);
+  const [visibleCleaner, setvisibleCleaner] = useState(false);
+  const [visibleAplicate, setvisibleAplicate] = useState(false);
+  const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
+  const [filterValuesChanged, setFilterValuesChanged] = useState<FilterValue[]>([]);
+
+  const handleFilterChange = (type: string, filterName: string, selectedValue: string) => {
+    const sectionIndex = filterValues.findIndex(f => f.name === filterName);
+    const newValues = [...filterValues];
+
+    if (type === 'radio') {
+      if (sectionIndex >= 0) {
+        newValues[sectionIndex] = {name: filterName, value: [selectedValue]};
+      } else {
+        newValues.push({name: filterName, value: [selectedValue]});
+      }
+    } else {
+      const valueIndex = filterValues[sectionIndex]?.value?.indexOf(selectedValue);
+      if (sectionIndex >= 0 && valueIndex >= 0) {
+        newValues[sectionIndex].value.splice(valueIndex, 1);
+      } else if (sectionIndex >= 0) {
+        newValues[sectionIndex].value.push(selectedValue);
+      } else {
+        newValues.push({name: filterName, value: [selectedValue]});
+      }
+    }
+
+    if (newValues[sectionIndex]?.value.length === 0) {
+      newValues.splice(sectionIndex, 1);
+    }
+
+    if (newValues.length > 0) {
+      setvisibleAplicate(true);
+    }
+    setFilterValues(newValues);
+  };
+
+  const handleApplyFilters = () => {
+    if (onChangeFilters) {
+      onChangeFilters(filterValues);
+      setFilterValuesChanged(filterValues);
+      setvisibleAplicate(false);
+
+      if (filterValues.length === 0) {
+        setvisibleCleaner(false);
+      } else {
+        setvisibleCleaner(true);
+      }
+    }
+  };
+
+  const handleCleanFilter = () => {
+    setFilterValues([]);
+
+    const containers = document.querySelectorAll('.section__options');
+    containers.forEach(container => {
+      const labels = container.querySelectorAll('label');
+
+      labels.forEach(label => {
+        const inputs = label.querySelectorAll('input');
+        inputs.forEach(input => {
+          input.checked = false;
+        });
+      });
+    });
+    setvisibleCleaner(false);
+    setvisibleAplicate(false);
+
+    if (onChangeFilters) {
+      onChangeFilters([]);
+      setFilterValuesChanged([]);
+    }
+  };
+
+  function changeDrop(): React.MouseEventHandler<HTMLDivElement> {
+    return (event: React.MouseEvent<HTMLDivElement>) => {
+      setVisibleDropdown(!visibleDropdown);
+    };
+  }
+
+  const dropRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropRef.current && !dropRef.current.contains(event.target as Node)) {
+        setVisibleDropdown(false);
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [dropRef]);
+
+  return (
+    <div className="elv-component elv-filters" {...props}>
+      <div className={`filter-container ${className ? className : ''}`} ref={dropRef}>
+        <div
+          className={[
+            'filter-container__filter',
+            `filter--${fill}`,
+            `filter--${size}`,
+            `${error ? `filter--error` : ''} ${disabled ? `filter--disabled` : ''}`,
+            ,
+          ].join(' ')}
+          onClick={changeDrop()}
+        >
+          <Icon icon="fa-solid fa-filter" className={'filter'} />
+          <span className="placeholder">{shortenText(placeholder, 25)}</span>
+          {filterValuesChanged.length > 0 && <Badge color="primary" text={filterValuesChanged.length.toString()} />}
+          <Icon icon="fa-solid fa-chevron-down" className={'chebron'} />
+        </div>
+        <div className={`filter-container__dropdown filter--${size} ${visibleDropdown ? 'filter-container__dropdown--active' : ''}`}>
+          {section?.map(s => (
+            <div key={s.name} className="section">
+              <p className="section__title is-5">{s.label}</p>
+              <div className={`section__options ${s.type == 'radio' ? 'control' : 'checkbox'} is-flex is-flex-direction-column`}>
+                {s.options?.map(o => (
+                  <div key={o.name}>
+                    <label
+                      htmlFor={o.name}
+                      className={`filter-label ${s.type == 'radio' ? 'radio' : 'checkbox'} is-flex is-justify-content-space-between`}
+                    >
+                      <span className="filter-label__name is-flex">
+                        {o.iconItem && <Icon {...o.iconItem}></Icon>}
+                        <p className="">{o.name}</p>
+                      </span>
+                      {s.type == 'radio' ? (
+                        <Radio label="" name={s.name} size="md" value={o.name} onCheck={() => handleFilterChange(s.type, s.name, o.name)} />
+                      ) : (
+                        <Checkbox
+                          label=""
+                          size="md"
+                          value={o.name}
+                          name={s.name}
+                          onCheck={() => handleFilterChange(s.type, s.name, o.name)}
+                        />
+                      )}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+          {visibleAplicate || visibleCleaner ? (
+            <div className="actionButtons is-flex is-flex-direction-column">
+              {visibleAplicate && (
+                <span className="button-aplicate is-flex is-justify-content-center">
+                  <Button
+                    label={button.label !== undefined ? shortenText(button.label, 25) : ''}
+                    trailingIcon={button.trailingIcon}
+                    isFullWidth={true}
+                    onClick={handleApplyFilters}
+                    {...button}
+                  />
+                </span>
+              )}
+              {visibleCleaner && (
+                <span className="button-cleaner is-flex is-justify-content-center">
+                  <Button
+                    {...buttonCleaner}
+                    label={buttonCleaner.label !== undefined ? shortenText(buttonCleaner.label, 25) : ''}
+                    trailingIcon={buttonCleaner.trailingIcon}
+                    onClick={handleCleanFilter}
+                  />
+                </span>
+              )}
+            </div>
+          ) : (
+            <></>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/stories/Form/Filters/filters.scss

@@ -0,0 +1,261 @@
+@import '/src/sass/utilities/variables';
+
+.elv-filters {
+  display: inline-flex;
+
+  .filter-container {
+    position: relative;
+    display: inline-block;
+
+    &__filter {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      font-weight: 500;
+      color: #171717;
+      background-color: white;
+      cursor: pointer;
+      padding: 8px 12px 8px 12px;
+
+      .fa_icon.filter {
+        font-size: 9px;
+        color: $text-600;
+      }
+
+      .placeholder {
+        margin-left: 4px;
+        margin-right: 7px;
+      }
+
+      .fa_icon.chebron {
+        font-size: 7px;
+        color: $text-400;
+      }
+
+      .badge {
+        border-radius: 15px;
+        font-size: 10px;
+        margin: 0;
+        padding: 3px 8px 3px 7.5px;
+      }
+
+      // =================== VARIABLES ====================
+      /*outline*/
+      &.filter--outline {
+        border: 1px solid #d4d4d4;
+        border-radius: 12px;
+
+        &:hover {
+          border: 1px solid $primary-600;
+        }
+
+        &:focus {
+          background-color: rgba(18, 69, 150, 0.1);
+          outline: 2px solid $primary-600;
+        }
+
+        &.filter--error {
+          border: 2px solid red;
+        }
+
+        &[disabled] {
+          cursor: not-allowed;
+          background-color: #ffffff;
+          border: 1px solid #d4d4d4;
+          color: #171717;
+        }
+      }
+
+      /*rounded*/
+      &.filter--rounded {
+        border: 1px solid #d4d4d4;
+        border-radius: 16px;
+
+        &:hover {
+          border: 1px solid $primary-600;
+        }
+
+        &:focus {
+          background-color: rgba(18, 69, 150, 0.1);
+          outline: 2px solid $primary-600;
+        }
+
+        &.filter--error {
+          border: 2px solid #dc2626;
+        }
+
+        &[disabled] {
+          cursor: not-allowed;
+          background-color: #ffffff;
+          border: 1px solid #d4d4d4;
+          color: #171717;
+        }
+      }
+
+      /*underline*/
+      &.filter--underline {
+        border: none;
+        border-bottom: 1px solid #d4d4d4;
+
+        &:hover {
+          border-bottom: 1px solid $primary-600;
+        }
+
+        &:focus {
+          background-color: rgba(18, 69, 150, 0.1);
+          outline: none;
+          border-bottom: 2px solid $primary-600;
+        }
+
+        &.filter--error {
+          outline: none;
+          border-bottom: 2px solid #dc2626;
+        }
+
+        &.filter--disabled {
+          cursor: not-allowed;
+          border-bottom: 1px solid #d4d4d4;
+          color: #171717;
+        }
+      }
+
+      /*unstyled*/
+      &.filter--unstyled {
+        border: 1px solid transparent;
+        border-radius: 12px;
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      /*background*/
+      &.filter--background {
+        border: 1px solid #d4d4d4;
+        border-radius: 12px;
+        background-color: #f5f5f5;
+
+        &:hover {
+          border: 1px solid $primary-600;
+        }
+
+        &:focus {
+          background-color: rgba(18, 69, 150, 0.1);
+          outline: 2px solid $primary-600;
+        }
+
+        &.filter--error {
+          border: 2px solid #dc2626;
+        }
+
+        &[disabled] {
+          cursor: not-allowed;
+          background-color: #ffffff;
+          border: 1px solid #d4d4d4;
+          color: #171717;
+        }
+      }
+
+      // =================== SIZES ====================
+      &.filter--xs {
+        font-size: 10px;
+      }
+
+      &.filter--sm {
+        font-size: 12px;
+      }
+
+      &.filter--md {
+        font-size: 14px;
+        // width: 105px;
+      }
+
+      &.filter--lg {
+        font-size: 16px;
+        // width: 120px;
+      }
+
+      &.filter--xl {
+        font-size: 18px;
+        // width: 130px;
+      }
+
+      &.filter--xxl {
+        font-size: 20px;
+        // width: 140px;
+      }
+
+      // =================== STATES ====================
+      &.filter--disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+        background-color: white;
+        border-color: $muted-300;
+        color: $muted-400;
+      }
+
+      &.filter--error {
+        border-color: 1px solid red;
+      }
+    }
+
+    &__dropdown {
+      display: none;
+      position: absolute;
+      background-color: white;
+      background: #ffffff;
+      width: 236px;
+      padding: 16px;
+      box-shadow: 0px 14px 24px rgba(20, 23, 38, 0.12);
+      border-radius: 6px;
+      z-index: 1;
+
+      &--active {
+        display: block;
+      }
+
+      .section {
+        padding: 0;
+
+        &__title {
+          font-size: 10px;
+          color: $text-400;
+          margin: 0;
+        }
+
+        &__options {
+          .filter-label {
+            &__name {
+              gap: 10px;
+              font-size: 14px;
+              margin: 2px 12px;
+
+              i {
+                font-size: 20px;
+              }
+
+              svg {
+                height: 20px;
+              }
+            }
+          }
+          padding-bottom: 15px;
+        }
+      }
+
+      .actionButtons {
+        gap: 10px;
+
+        .button-cleaner {
+          .button {
+            color: $error-600;
+            font-weight: $fw-semibold;
+          }
+        }
+      }
+    }
+  }
+}

package/src/stories/Form/Input/Input.stories.tsx

@@ -0,0 +1,25 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {Input} from './Input';
+
+export default {
+  title: 'Form/Input',
+  component: Input,
+  args: {
+    type: 'text',
+    color: 'none',
+    size: 'normal',
+    placeholder: 'Input placeholder',
+    onChangeInput: event => console.log('Input value changed:', event.target.value),
+  },
+} as ComponentMeta<typeof Input>;
+
+const Template: ComponentStory<typeof Input> = args => <Input {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};
+
+export const Icons = Template.bind({});
+Icons.args = {
+  iconLeft: {icon: 'fas fa-envelope'},
+  iconRight: {icon: 'fas fa-check'},
+};

package/src/stories/Form/Input/Input.tsx

@@ -0,0 +1,86 @@
+import {useState} from 'react';
+import {IIcon, Icon} from '../../Elements/Icon/Icon';
+import './input.scss';
+
+export interface IInput extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  type: 'text' | 'password' | 'email' | 'tel' | 'number';
+  color: 'none' | 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  size: 'small' | 'normal' | 'medium' | 'large';
+  placeholder?: string;
+  defaultValue?: string;
+
+  iconLeft?: IIcon;
+  iconRight?: IIcon;
+
+  // boolean
+  isRounded?: boolean;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  hasError?: boolean;
+
+  // events
+  onChangeInput?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  // react
+  className?: string;
+}
+
+export const Input = ({
+  type,
+  color,
+  size,
+  placeholder,
+  defaultValue,
+  iconLeft,
+  iconRight,
+  isRounded,
+  isLoading,
+  isDisabled,
+  hasError,
+  className,
+  onChangeInput,
+  ...props
+}: IInput) => {
+  return (
+    <div className="elv-component elv-input" {...props}>
+      <div className={`field e-input ${className ? className : ''}`}>
+        <p
+          className={[
+            'control',
+            `${iconLeft ? ' has-icons-left' : ''}`,
+            `${iconRight ? ' has-icons-right' : ''}`,
+            `${isLoading ? ' is-loading' : ''}`,
+          ].join('')}
+        >
+          <input
+            className={[
+              'input',
+              `${' is-' + size}`,
+              `${color !== 'none' ? ' is-' + color : ''}`,
+              `${isRounded ? ' is-rounded' : ''}`,
+              `${hasError ? ' has-error' : ''}`,
+            ].join('')}
+            type={type}
+            placeholder={placeholder}
+            defaultValue={defaultValue}
+            disabled={isDisabled}
+            onChange={e => {
+              onChangeInput && onChangeInput(e);
+            }}
+          />
+          {iconLeft && (
+            <span className={`icon is-left ${'is-' + size}`}>
+              <Icon {...iconLeft}></Icon>
+            </span>
+          )}
+          {iconRight && (
+            <span className={`icon is-right ${'is-' + size}`}>
+              <Icon {...iconRight}></Icon>
+            </span>
+          )}
+        </p>
+      </div>
+    </div>
+  );
+};

package/src/stories/Form/Input/InputVar.sass

@@ -0,0 +1,26 @@
+$input-color: $text-strong !default
+$input-background-color: $scheme-main !default
+$input-border-color: $border !default
+$input-height: $control-height !default
+$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
+$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
+
+$input-hover-color: $text-strong !default
+$input-hover-border-color: $border-hover !default
+
+$input-focus-color: $text-strong !default
+$input-focus-border-color: $link !default
+$input-focus-box-shadow-size: 0 0 0 0.125em !default
+$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
+
+$input-disabled-color: $text-light !default
+$input-disabled-background-color: $background !default
+$input-disabled-border-color: $background !default
+$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
+
+$input-arrow: $link !default
+
+$input-icon-color: $border !default
+$input-icon-active-color: $text !default
+
+$input-radius: 12px !default

package/src/stories/Form/Input/input.scss

@@ -0,0 +1,19 @@
+@import '/src/sass/utilities/variables';
+
+.elv-input {
+  .input {
+    box-sizing: border-box;
+
+    &.is-small {
+      border-radius: 12px;
+    }
+
+    &.has-error {
+      border-color: $error-600;
+    }
+
+    &:focus {
+      background-color: rgba(18, 69, 150, 0.1);
+    }
+  }
+}

package/src/stories/Form/InputFormControl/Input-form-control.stories.tsx

@@ -0,0 +1,26 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {useState} from 'react';
+import {InputForm} from './Input-form-control';
+
+export default {
+  title: 'Form/Input Form Control',
+  component: InputForm,
+  args: {
+    input: {
+      color: 'none',
+      placeholder: 'Input placeholder',
+      size: 'normal',
+      type: 'text',
+      iconLeft: {icon: 'fas fa-user'},
+    },
+    label: 'Label',
+    helperText: 'Helper text',
+    defaultValue: '',
+    maxLength: 10,
+  },
+} as ComponentMeta<typeof InputForm>;
+
+const Template: ComponentStory<typeof InputForm> = args => <InputForm {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};