dgrcorrientes-modulos 1.0.0

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

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

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

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

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

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