dgrcorrientes-modulos 1.0.2 → 1.0.4

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

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

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

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

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

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

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

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