dgrcorrientes-modulos 1.0.2 → 1.0.4

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

@@ -1,48 +0,0 @@
-import {useEffect, useRef} from 'react';
-import {IInput, Input} from '../Input/Input';
-import './input-form-control.scss';
-
-export interface IInputForm extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  input: IInput;
-  label: string;
-  helperText?: string;
-  defaultValue: string;
-  maxLength: number;
-
-  // boolean
-  error?: boolean;
-
-  // events
-
-  // react
-  className?: string;
-}
-
-export const InputForm = ({input, label, helperText, defaultValue, maxLength, error, className, ...props}: IInputForm) => {
-  return (
-    <div className={['elv-component', ' elv-form-control'].join('')} {...props}>
-      <div className={`e-input-form ${className ? className : ''}`}>
-        <div>{label}</div>
-        <Input {...input} />
-        <div>
-          <span
-            className={[
-              'helper',
-              `${error ? `text--error` : ''}`,
-              `${defaultValue.length > maxLength ? `text--error` : ''}`,
-              `${className ? className : ''}`,
-            ].join(' ')}
-          >
-            {helperText}
-          </span>
-          {defaultValue.length && maxLength ? (
-            <span className={['length', ,].join(' ')}>
-              {defaultValue.length}/{maxLength}
-            </span>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/stories/Form/InputFormControl/input-form-control.scss

@@ -1,34 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-form-control {
-  label {
-    display: block;
-    margin-bottom: 6px;
-    color: #737373;
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  .helper {
-    // width: 50%;
-    display: block;
-    margin-top: 6px;
-    color: #737373;
-    font-size: 14px;
-    font-weight: 400;
-
-    &.text--error {
-      color: #dc2626;
-    }
-  }
-
-  .length {
-    width: 50%;
-    display: inline-block;
-    margin-top: 6px;
-    color: #737373;
-    font-size: 14px;
-    font-weight: 400;
-    text-align: end;
-  }
-}

package/src/stories/Form/Radio/Radio.stories.tsx

@@ -1,19 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Radio} from './Radio';
-
-export default {
-  title: 'Form/Radio',
-  component: Radio,
-  args: {
-    size: 'md',
-    disabled: false,
-    label: 'Radio button',
-    name: 'label',
-    value: 'value',
-    error: false,
-  },
-} as ComponentMeta<typeof Radio>;
-
-const Template: ComponentStory<typeof Radio> = args => <Radio {...args} />;
-
-export const Standard = Template.bind({});

package/src/stories/Form/Radio/Radio.tsx

@@ -1,84 +0,0 @@
-import {useRef, useState} from 'react';
-import './radio.scss';
-import '/src/sass/base/_controls.scss';
-
-export interface IRadio extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  size?: 'sm' | 'md' | 'lg';
-  label?: string;
-  value: string;
-  name: string;
-
-  // boolean
-  defaultChecked?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-
-  // events
-  onCheck?: () => void;
-
-  // react
-  className?: string;
-}
-
-export const Radio = ({
-  size = 'md',
-  disabled = false,
-  label = 'radio',
-  name,
-  value,
-  defaultChecked,
-  onCheck,
-  error,
-  className,
-  ...props
-}: IRadio) => {
-  const radioRef = useRef<HTMLInputElement>(null);
-
-  const toggleChecked = () => {
-    if (radioRef.current) {
-      if (radioRef.current.checked) {
-        onCheck && onCheck();
-      }
-    }
-  };
-
-  return (
-    <div className="elv-component elv-radio elv-control" {...props}>
-      <label
-        className={[
-          'e-control e-radio',
-          ` e-control--${size} e-radio--${size}`,
-          `${error ? ` e-control--error e-radio--error` : ''}`,
-          `${disabled ? ` e-control--disabled e-radio--disabled` : ''}`,
-          ' is-relative',
-          ' is-flex is-flex-direction-row-reverse is-justify-content-flex-end',
-          ' has-text-dark',
-          ' is-clickable',
-          `${className ? ' ' + className : ''}`,
-        ].join('')}
-      >
-        <input
-          type="radio"
-          defaultChecked={defaultChecked}
-          id={value}
-          name={name}
-          value={value}
-          className={['e-control__input e-radio__input', 'm-0', 'is-clickable'].join('')}
-          onChange={() => {
-            toggleChecked();
-          }}
-          disabled={disabled}
-          ref={radioRef}
-        />
-        {label && <span className="label-text is-flex is-align-items-center">{label}</span>}
-        <span
-          className={[
-            'e-control__checkmark e-radio__checkmark',
-            ' is-flex is-align-items-center is-justify-content-center is-relative',
-          ].join('')}
-        />
-      </label>
-    </div>
-  );
-};

package/src/stories/Form/Radio/radio.scss

@@ -1,19 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.elv-radio {
-  .e-radio {
-    &__checkmark {
-      border-radius: 50%;
-
-      &:after {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background-color: $primary-600;
-        width: 75%;
-        height: 75%;
-        border-radius: 50%;
-      }
-    }
-  }
-}

package/src/stories/Form/Search/Search.scss

@@ -1,50 +0,0 @@
-@import '/src/sass/utilities/variables';
-
-.search-container {
-  border-radius: 12px;
-  border: 1px solid $text-300;
-  overflow: hidden;
-  display: flex;
-  justify-content: space-between;
-  min-width: 150px;
-
-  &__input {
-    width: 100%;
-    border: 0px;
-    padding: 12px 16px;
-    background-color: transparent;
-
-    &:focus {
-      outline: none;
-    }
-
-    &::placeholder {
-      color: $text-400;
-    }
-
-    &.is-disabled {
-      opacity: 0.5 !important;
-    }
-  }
-
-  &__button-search {
-    padding: 5px;
-
-    .button {
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-  }
-
-  &--sm {
-    input {
-      font-size: 12px;
-    }
-  }
-
-  &--md {
-    input {
-      font-size: 14px;
-    }
-  }
-}

package/src/stories/Form/Search/Search.stories.tsx

@@ -1,26 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-
-import {Search} from './Search';
-export default {
-  title: 'Form/Search',
-  component: Search,
-  args: {
-    size: 'normal',
-    placeholder: 'Buscar...',
-    backgroundColor: '#F5F5F5',
-    buttonSearch: {
-      label: 'Buscar',
-      fill: 'solid',
-      icon: 'fa-solid fa-magnifying-glass',
-      type: 'button',
-      onClick: () => console.log('Button Clicked'),
-    },
-    onChange: value => console.log('Valor al cambiar input: ', value),
-    onSearch: value => console.log('Se buscó el texto: ' + value),
-  },
-} as ComponentMeta<typeof Search>;
-
-const Template: ComponentStory<typeof Search> = args => <Search {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {};

package/src/stories/Form/Search/Search.tsx

@@ -1,84 +0,0 @@
-import React, {useRef, useState} from 'react';
-import './Search.scss';
-import {Button, IButton} from '../../Elements/Button/Button';
-
-export interface ISearch extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  // base
-  size: 'small' | 'normal' | 'medium' | 'large';
-  backgroundColor?: string;
-  placeholder?: string;
-  defaultValue?: string;
-  buttonSearch?: IButton;
-  name?: string;
-  id?: string;
-
-  // bool
-  isDisabled?: boolean;
-
-  // events
-  onChangeInput?: (label: string) => void;
-  onSearch?: (label: string) => void;
-
-  // react
-  className?: string;
-}
-
-export const Search = ({
-  size,
-  backgroundColor,
-  placeholder,
-  defaultValue,
-  buttonSearch,
-  name,
-  id,
-  isDisabled,
-  onChangeInput,
-  onSearch,
-  className,
-  ...props
-}: ISearch) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      searchAction();
-    }
-  };
-
-  const searchAction = () => {
-    const searchText = inputRef.current?.value;
-
-    onSearch && onSearch(searchText ? searchText : '');
-  };
-
-  return (
-    <div className={`elv-component elv-search`} {...props}>
-      <div
-        className={`elv-component search-container search-container--${size} ${className ? className : ''}`}
-        style={{backgroundColor: backgroundColor}}
-      >
-        <input
-          className={`search-container__input + ${isDisabled ? 'is-disabled' : ''}`}
-          type="text"
-          name={name}
-          id={id}
-          placeholder={placeholder}
-          onChange={e => onChangeInput && onChangeInput(e.target.value)}
-          defaultValue={defaultValue}
-          ref={inputRef}
-          disabled={isDisabled}
-          onKeyDown={handleKeyPress}
-        />
-        <span className="search-container__button-search">
-          <Button
-            {...buttonSearch}
-            size={size}
-            onClick={() => {
-              searchAction();
-            }}
-          ></Button>
-        </span>
-      </div>
-    </div>
-  );
-};

package/src/stories/Form/Select/Select.stories.tsx

@@ -1,55 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Select} from './Select';
-
-export default {
-  title: 'Form/Select',
-  component: Select,
-  args: {
-    size: 'md',
-    fill: 'outline',
-    disabled: false,
-    error: false,
-    placeholder: 'Default Select',
-    defaultValue: '2',
-    maxCharacter: 20,
-    options: [
-      {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-      {value: '2', label: 'Option 2'},
-      {value: '3', label: 'Option 3'},
-      {value: '4', label: 'Option 4', icon: 'fa fa-house'},
-      {value: '5', label: 'Option 5'},
-      {value: '6', label: 'Option 6'},
-      {value: '7', label: 'Option 7'},
-      {value: '8', label: 'Option 8'},
-    ],
-    onChange: () => {
-      console.log('Select changed');
-    },
-  },
-} as ComponentMeta<typeof Select>;
-
-const Template: ComponentStory<typeof Select> = args => <Select {...args} />;
-
-export const Outline = Template.bind({});
-Outline.args = {
-  fill: 'outline',
-};
-
-export const Rounded = Template.bind({});
-Rounded.args = {
-  fill: 'rounded',
-};
-
-export const Underline = Template.bind({});
-Underline.args = {
-  fill: 'underline',
-};
-
-export const Unstyled = Template.bind({});
-Unstyled.args = {
-  fill: 'unstyled',
-};
-export const Background = Template.bind({});
-Background.args = {
-  fill: 'background',
-};

package/src/stories/Form/Select/Select.tsx

@@ -1,121 +0,0 @@
-import {SetStateAction, useEffect, useState} from 'react';
-import './select.scss';
-import {shortenText} from '../../../utils/functions';
-
-export interface ISelect 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 Select = ({
-  size = 'md',
-  fill = 'outline',
-  disabled = false,
-  placeholder,
-  error,
-  options,
-  defaultValue,
-  minWidth,
-  maxCharacters = 30,
-  onChangeSelect,
-  className,
-  ...props
-}: ISelect) => {
-  const [selectedValue, setSelectedValue] = useState('');
-  const [selectedLabel, setSelectedLabel] = useState(placeholder || '');
-  const [visibleDropdown, setVisibleDropdown] = useState(false);
-
-  useEffect(() => {
-    if (defaultValue && options) {
-      const defaultOption = options.find(option => option.value === defaultValue);
-      if (defaultOption) {
-        setSelectedValue(defaultOption.value);
-        setSelectedLabel(defaultOption.label);
-      }
-    }
-  }, [defaultValue, options]);
-
-  function closeDrop(): React.MouseEventHandler<HTMLDivElement> {
-    return (event: React.MouseEvent<HTMLDivElement>) => {
-      setVisibleDropdown(false);
-    };
-  }
-
-  function changeDrop(): React.MouseEventHandler<HTMLDivElement> {
-    return (event: React.MouseEvent<HTMLDivElement>) => {
-      setVisibleDropdown(!visibleDropdown);
-    };
-  }
-
-  function setActiveLabel(value: string, label: string): React.MouseEventHandler<HTMLLIElement> {
-    return (event: React.MouseEvent<HTMLLIElement>) => {
-      if (onChangeSelect) {
-        onChangeSelect(value);
-      }
-      setSelectedValue(value);
-      setSelectedLabel(label);
-      setVisibleDropdown(false);
-    };
-  }
-
-  return (
-    <div className="elv-component elv-select" style={{minWidth: minWidth}} {...props}>
-      <div className={`select-container ${className ? className : ''}`} onMouseLeave={closeDrop()}>
-        <div
-          className={[
-            'select-container__select',
-            `select--${fill}`,
-            `select--${size}`,
-            `${error ? `select--error` : ''} ${disabled ? `select--disabled` : ''}`,
-            ,
-          ].join(' ')}
-          onClick={changeDrop()}
-        >
-          {defaultValue !== undefined || !defaultValue ? (
-            selectedLabel && <span>{shortenText(selectedLabel, maxCharacters)}</span>
-          ) : (
-            <span>{shortenText(placeholder || '', maxCharacters)}</span>
-          )}
-        </div>
-        <div className={`select-container__dropdown select--${size} ${visibleDropdown ? 'select-container__dropdown--active' : ''}`}>
-          <ul className="dropdown__list">
-            {placeholder && (
-              <li
-                className={`list__item list__item--default ${selectedValue == placeholder ? 'list__item--active' : ''}`}
-                onClick={() => setActiveLabel('', placeholder)}
-              >
-                {shortenText(placeholder, maxCharacters)}
-              </li>
-            )}
-            {options?.map((item, index) => (
-              <li key={index} className={`list__item`} onClick={setActiveLabel(item.value, item.label)}>
-                {item.icon && <i className={`item__icon ${item.icon}`}></i>}
-                {shortenText(item.label, maxCharacters)}
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};