dgrcorrientes-modulos 1.0.0

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

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

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

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

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

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

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

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

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

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

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