dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Form/Autocomplete/Autocomplete.tsx

@@ -1,160 +0,0 @@
-import {useEffect, useRef, useState} from 'react';
-import './autocomplete.scss';
-import {shortenText} from '../../../utils/functions';
-import {Icon} from '../../Elements/Icon/Icon';
-
-export interface IAutocomplete extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-  fill?: 'outline' | 'rounded' | 'underline' | 'unstyled' | 'background';
-  placeholder?: string;
-  defaultValue?: string;
-  options: {
-    value: string;
-    label: string;
-    icon: string;
-  }[];
-  minWidth?: string;
-  maxCharacters?: number;
-
-  // boolean
-  disabled?: boolean;
-  error?: boolean;
-
-  // events
-  onChangeSelect?: (value: string) => void;
-
-  // react
-  className?: string;
-}
-
-export const Autocomplete = ({
-  size = 'md',
-  fill = 'outline',
-  disabled = false,
-  placeholder,
-  error,
-  options,
-  defaultValue,
-  minWidth,
-  maxCharacters = 30,
-  onChangeSelect,
-  className,
-  ...props
-}: IAutocomplete) => {
-  const [inputValue, setInputValue] = useState(defaultValue ? defaultValue : '');
-  const [selectedValue, setSelectedValue] = useState('');
-  const [selectedLabel, setSelectedLabel] = useState(defaultValue ? defaultValue : '');
-  const [visibleDropdown, setVisibleDropdown] = useState(false);
-
-  const setSelection = (value: string, label: string) => {
-    if (value == '') {
-      setInputValue('');
-    } else {
-      setInputValue(label);
-    }
-    setSelectedValue(value);
-    setSelectedLabel(label);
-    onChangeSelect && onChangeSelect(value);
-    setVisibleDropdown(false);
-  };
-
-  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    const selectedOption = event.target.value;
-    setInputValue(selectedOption);
-    setVisibleDropdown(true); // Show dropdown when typing
-  }
-
-  const filteredOptions = options.filter(option => option.label.toLowerCase().includes(inputValue ? inputValue.toLowerCase() : ''));
-
-  const autocompleteRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (autocompleteRef.current && !autocompleteRef.current.contains(event.target as Node)) {
-        setVisibleDropdown(false);
-      }
-    }
-
-    document.addEventListener('click', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [autocompleteRef]);
-
-  useEffect(() => {
-    const defaultOption = options.find(option => option.value === defaultValue);
-    if (defaultOption) {
-      setSelection(defaultOption.value, defaultOption.label);
-    } else {
-      setSelection('', '');
-    }
-  }, [defaultValue, options]);
-
-  return (
-    <div className="elv-component elv-autocomplete" style={{minWidth: minWidth}} {...props}>
-      <div className={`autocomplete-container ${className ? className : ''}`} ref={autocompleteRef}>
-        <div
-          className={[
-            'autocomplete-container__autocomplete',
-            `autocomplete--${fill}`,
-            `autocomplete--${size}`,
-            `${error ? `autocomplete--error` : ''} ${disabled ? `autocomplete--disabled` : ''}`,
-            ,
-          ].join(' ')}
-        >
-          <input
-            className="input-autocomplete is-clickable "
-            type="text"
-            value={inputValue || selectedLabel}
-            onChange={handleInputChange}
-            placeholder={placeholder || ''}
-            onFocus={() => setVisibleDropdown(true)}
-            readOnly={!!selectedValue}
-            // onBlur={() => setVisibleDropdown(false)}
-          />
-          {selectedValue && selectedLabel != '' ? (
-            <div
-              onClick={() => {
-                setSelection('', '');
-              }}
-              className=""
-            >
-              <Icon icon="fa-solid fa-circle-xmark fa-2xl" />
-            </div>
-          ) : null}
-        </div>
-        <div
-          className={`autocomplete-container__dropdown autocomplete--${size} ${
-            visibleDropdown ? 'autocomplete-container__dropdown--active' : ''
-          }`}
-        >
-          <ul className="dropdown__list">
-            {placeholder && (
-              <li
-                className={`list__item list__item--default ${selectedValue == placeholder ? 'list__item--active' : ''}`}
-                onClick={() => {
-                  setSelection('', placeholder);
-                }}
-              >
-                {shortenText(placeholder, maxCharacters ? maxCharacters : 30)}
-              </li>
-            )}
-            {filteredOptions?.map((item, index) => (
-              <li
-                key={index}
-                className={`list__item`}
-                onClick={() => {
-                  setSelection(item.value, item.label);
-                }}
-              >
-                {item.icon && <i className={`item__icon ${item.icon}`}></i>}
-                {shortenText(item.label, maxCharacters ? maxCharacters : 30)}
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/Form/Autocomplete/autocomplete.scss

@@ -1,311 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-autocomplete {
-  min-width: 200px;
-  .autocomplete-container {
-    position: relative;
-
-    &__autocomplete {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 4px;
-      font-weight: 500;
-      flex: none;
-      align-self: stretch;
-      flex-grow: 0;
-      color: #171717;
-      background: transparent;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 285 285'%3E%3Cpath fill='%23737373' d='m282 77-14-15a9 9 0 0 0-13 0L142 174 30 62a9 9 0 0 0-13 0L3 77a9 9 0 0 0 0 13l133 133a9 9 0 0 0 13 0L282 90a9 9 0 0 0 0-13z'/%3E%3C/svg%3E");
-      background-position: center right calc(0.375em + 0.1875rem);
-      background-size: 12px;
-      background-repeat: no-repeat;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      cursor: pointer;
-      padding: 8px 40px 8px 12px;
-      // white-space: nowrap;
-
-      .input-autocomplete {
-        border: 0px;
-        width: 100%;
-        font-size: 14px;
-        padding-top: 4px;
-        padding-bottom: 4px;
-        background-color: transparent;
-
-        &:focus {
-          outline: none;
-        }
-      }
-
-      // =================== VARIABLES ====================
-      /*outline*/
-      &.autocomplete--outline {
-        border: 1px solid #d4d4d4;
-        border-radius: 12px;
-        background-color: transparent;
-
-        &:hover {
-          border: 1px solid $primary-600;
-        }
-
-        &:focus {
-          background-color: rgba(18, 69, 150, 0.1);
-          outline: 2px solid $primary-600;
-        }
-
-        &.autocomplete--error {
-          border: 2px solid red;
-        }
-
-        &[disabled] {
-          cursor: not-allowed;
-          background-color: #ffffff;
-          border: 1px solid #d4d4d4;
-          color: #171717;
-        }
-      }
-
-      /*rounded*/
-      &.autocomplete--rounded {
-        border: 1px solid #d4d4d4;
-        border-radius: 16px;
-        background-color: transparent;
-
-        &:hover {
-          border: 1px solid $primary-600;
-        }
-
-        &:focus {
-          background-color: rgba(18, 69, 150, 0.1);
-          outline: 2px solid $primary-600;
-        }
-
-        &.autocomplete--error {
-          border: 2px solid #dc2626;
-        }
-
-        &[disabled] {
-          cursor: not-allowed;
-          background-color: #ffffff;
-          border: 1px solid #d4d4d4;
-          color: #171717;
-        }
-      }
-
-      /*underline*/
-      &.autocomplete--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;
-        }
-
-        &.autocomplete--error {
-          outline: none;
-          border-bottom: 2px solid #dc2626;
-        }
-
-        &.autocomplete--disabled {
-          cursor: not-allowed;
-          border-bottom: 1px solid #d4d4d4;
-          color: #171717;
-        }
-      }
-
-      /*unstyled*/
-      &.autocomplete--unstyled {
-        border: 1px solid transparent;
-        border-radius: 12px;
-
-        &:focus {
-          outline: none;
-        }
-      }
-
-      /*background*/
-      &.autocomplete--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;
-        }
-
-        &.autocomplete--error {
-          border: 2px solid #dc2626;
-        }
-
-        &[disabled] {
-          cursor: not-allowed;
-          background-color: #ffffff;
-          border: 1px solid #d4d4d4;
-          color: #171717;
-        }
-      }
-
-      // =================== STATES ====================
-      &.autocomplete--disabled {
-        cursor: not-allowed;
-        pointer-events: none;
-        background-color: white;
-        border-color: $muted-300;
-        color: $muted-400;
-      }
-
-      &.autocomplete--error {
-        border-color: 1px solid red;
-      }
-    }
-
-    &__dropdown {
-      display: none;
-      position: absolute;
-      background-color: white;
-      width: 100%;
-      padding: 12px 12px 12px 0px;
-
-      background: #ffffff;
-      box-shadow: 0px 14px 24px rgba(20, 23, 38, 0.12);
-      border-radius: 16px;
-      z-index: 1;
-
-      &--active {
-        display: block;
-      }
-
-      .dropdown__list {
-        max-height: 193.6px;
-        overflow-y: scroll;
-        list-style: none;
-        padding-left: 4px;
-        padding-right: 4px;
-        font-weight: $fw-semibold;
-        color: $text-900;
-
-        &::-webkit-scrollbar {
-          width: 6px; /* Ancho de la barra de desplazamiento */
-        }
-        &::-webkit-scrollbar-track {
-          background-color: $truegray-200; /* Color de fondo del riel */
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: $truegray-400; /* Color del pulgar */
-          border-radius: 6px;
-        }
-        &::-webkit-scrollbar-thumb:hover {
-          background-color: $primary-600; /* Color del pulgar al pasar el ratón por encima */
-        }
-
-        .list__item {
-          display: flex;
-          padding: 15px 5px 15px 15px;
-          border-radius: 15px;
-          cursor: pointer;
-          align-items: center;
-
-          .item__icon {
-            color: $primary-600;
-          }
-
-          &--default {
-            color: $text-500;
-          }
-
-          &:hover {
-            background-color: $muted-300;
-          }
-
-          .item__label {
-            margin: 0px;
-          }
-
-          .item__icon {
-            margin-right: 10px;
-          }
-        }
-      }
-    }
-  }
-}
-
-/* sizes */
-.autocomplete--xs {
-  font-size: 10px;
-}
-
-.autocomplete--sm {
-  font-size: 12px;
-}
-
-.autocomplete--md {
-  font-size: 14px;
-}
-
-.autocomplete--lg {
-  font-size: 16px;
-}
-
-.autocomplete--xl {
-  font-size: 18px;
-}
-
-.autocomplete--xxl {
-  font-size: 20px;
-}
-
-/*icon
-.autocomplete--group{
-    position: relative;
-    width: 343px;
-}
-.autocomplete--icon{
-    position: absolute;
-    padding-left: 32px;
-}
-
- .autocomplete__icon {
-    position: absolute;
-    left: 10px;
-    top: 5px;
-    height: 18px;
-}
-.autocomplete__icon svg {
-    height: 18px;
-    vertical-align: middle;
-}
-
-.autocomplete__icon.autocomplete__icon__xs{
-    top: 4px;
-}
-.autocomplete__icon.autocomplete__icon__sm{
-    top: 5px;
-}
-.autocomplete__icon.autocomplete__icon__md{
-    top: 6px;
-}
-.autocomplete__icon.autocomplete__icon__lg{
-    top: 7px;
-}
-.autocomplete__icon.autocomplete__icon__xl{
-    top: 9px;
-}
-.autocomplete__icon.autocomplete__icon__xxl{
-    top: 10px;
-}
-*/

package/src/stories/Form/Autocomplete-Prueba/Autocomplete.stories.tsx

@@ -1,50 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {AutocompletePrueba} from './AutocompletePrueba';
-
-export default {
-  title: 'Form/AutocompletePrueba',
-  component: AutocompletePrueba,
-  args: {
-    change: true,
-    // localidades: {
-    //   '1': [
-    //     {icon: '', label: 'Unquillo', value: '1'},
-    //     {icon: '', label: 'Carlos Paz', value: '2'},
-    //   ],
-    //   '2': [
-    //     // Localidades para la Provincia 2
-    //     {icon: 'icono3', label: 'Localidad 2.1', value: '2.1'},
-    //     {icon: 'icono4', label: 'Localidad 2.2', value: '2.2'},
-    //   ],
-    //   // Agrega más provincias con sus respectivas localidades según sea necesario
-    // },
-    provincias: [
-      {
-        icon: '',
-        label: 'La Pampa',
-        value: '1',
-        localidades: [
-          {icon: 'icono1', label: 'Santa Rosa', value: '1'},
-          {icon: 'icono2', label: 'Gral Pico', value: '2'},
-        ],
-      },
-      {
-        icon: '',
-        label: 'Cordoba',
-        value: '2',
-        localidades: [
-          {icon: 'icono1', label: 'Carlos paz', value: '1'},
-          {icon: 'icono2', label: 'Alta Gracia', value: '2'},
-        ],
-      },
-    ],
-    localidadDefaultValue: '1',
-    provinciaDefaultValue: undefined,
-    maxCharacter: 10,
-  },
-} as ComponentMeta<typeof AutocompletePrueba>;
-
-const Template: ComponentStory<typeof AutocompletePrueba> = args => <AutocompletePrueba {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {};

package/src/stories/Form/Autocomplete-Prueba/AutocompletePrueba.tsx

@@ -1,83 +0,0 @@
-//import './AutocompletePrueba.scss';
-import {useEffect, useState} from 'react';
-import {Autocomplete} from '../Autocomplete/Autocomplete';
-
-export interface AutocompletePruebaProps {
-  // BASE
-
-  provincias: {icon: string; label: string; value: string; localidades: Localidad[]}[];
-  localidadDefaultValue: string;
-  provinciaDefaultValue: string;
-  maxCharacter?: number;
-  // IS-OPTIONS
-  change?: boolean;
-
-  // EVENTS
-
-  // GENERIC
-  className?: string;
-}
-interface Localidad {
-  icon: string;
-  label: string;
-  value: string;
-}
-
-export const AutocompletePrueba = ({
-  provincias,
-  localidadDefaultValue,
-  provinciaDefaultValue,
-  change,
-  maxCharacter,
-  className,
-}: AutocompletePruebaProps) => {
-  const [selectedLocalidad, setSelectedLocalidad] = useState<string>(localidadDefaultValue);
-  const [selectedProvincia, setSelectedProvincia] = useState<string>(provinciaDefaultValue);
-
-  const handleProvinciaChange = (selectedProvincia: string) => {
-    setSelectedProvincia(selectedProvincia);
-    // Establecer la primera localidad de la provincia seleccionada como la localidad predeterminada
-    const localidadesProvincia = provincias.find(provincia => provincia.value === selectedProvincia)?.localidades;
-    if (localidadesProvincia && localidadesProvincia.length > 0) {
-      setSelectedLocalidad(localidadesProvincia[0].value);
-    } else {
-      setSelectedLocalidad('');
-    }
-  };
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setSelectedProvincia('1');
-    }, 3000);
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  return (
-    <div className="elv-component elv-compname">
-      <div className={['compname is-flex is-gap-4 ', `${className ? ' ' + className : ''}`].join('')}>
-        <div>
-          <Autocomplete
-            defaultValue={selectedProvincia}
-            fill="outline"
-            onChangeSelect={value => {
-              handleProvinciaChange(value);
-            }}
-            options={provincias}
-            placeholder="Provincia"
-            size="md"
-            maxCharacters={maxCharacter}
-          />
-        </div>
-        <div>
-          <Autocomplete
-            defaultValue={selectedLocalidad}
-            options={provincias.find(provincia => provincia.value === selectedProvincia)?.localidades || []}
-            placeholder="Localidad"
-            size="md"
-            //disabled={!selectedOption} // Deshabilitamos si no hay localidad seleccionada
-          />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/Form/Checkbox/Checkbox.stories.tsx

@@ -1,26 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Checkbox} from './Checkbox';
-
-export default {
-  title: 'Form/Checkbox',
-  component: Checkbox,
-  args: {
-    size: 'md',
-    disabled: false,
-    label: 'Checkbox',
-    name: 'label',
-    value: 'value',
-    error: false,
-    // checked: true,
-    onChange(e) {
-      console.log('onChange: ' + e.target.checked);
-    },
-    onCheck(checked) {
-      console.log('onCheck: ' + checked);
-    },
-  },
-} as ComponentMeta<typeof Checkbox>;
-
-const Template: ComponentStory<typeof Checkbox> = args => <Checkbox {...args} />;
-
-export const Standard = Template.bind({});