dgrcorrientes-modulos 1.0.0

package/src/stories/Form/Select/select.scss

@@ -0,0 +1,303 @@
+@import '/src/sass/utilities/variables';
+
+.elv-select {
+  min-width: 200px;
+  .select-container {
+    position: relative;
+
+    &__select {
+      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;
+
+      // =================== VARIABLES ====================
+      /*outline*/
+      &.select--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;
+        }
+
+        &.select--error {
+          border: 2px solid red;
+        }
+
+        &[disabled] {
+          cursor: not-allowed;
+          background-color: #ffffff;
+          border: 1px solid #d4d4d4;
+          color: #171717;
+        }
+      }
+
+      /*rounded*/
+      &.select--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;
+        }
+
+        &.select--error {
+          border: 2px solid #dc2626;
+        }
+
+        &[disabled] {
+          cursor: not-allowed;
+          background-color: #ffffff;
+          border: 1px solid #d4d4d4;
+          color: #171717;
+        }
+      }
+
+      /*underline*/
+      &.select--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;
+        }
+
+        &.select--error {
+          outline: none;
+          border-bottom: 2px solid #dc2626;
+        }
+
+        &.select--disabled {
+          cursor: not-allowed;
+          border-bottom: 1px solid #d4d4d4;
+          color: #171717;
+        }
+      }
+
+      /*unstyled*/
+      &.select--unstyled {
+        border: 1px solid transparent;
+        border-radius: 12px;
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      /*background*/
+      &.select--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;
+        }
+
+        &.select--error {
+          border: 2px solid #dc2626;
+        }
+
+        &[disabled] {
+          cursor: not-allowed;
+          background-color: #ffffff;
+          border: 1px solid #d4d4d4;
+          color: #171717;
+        }
+      }
+
+      // =================== STATES ====================
+      &.select--disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+        background-color: white;
+        border-color: $muted-300;
+        color: $muted-400;
+      }
+
+      &.select--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 */
+.select--xs {
+  font-size: 10px;
+}
+
+.select--sm {
+  font-size: 12px;
+}
+
+.select--md {
+  font-size: 14px;
+}
+
+.select--lg {
+  font-size: 16px;
+}
+
+.select--xl {
+  font-size: 18px;
+}
+
+.select--xxl {
+  font-size: 20px;
+}
+
+/*icon
+.select--group{
+    position: relative;
+    width: 343px;
+}
+.select--icon{
+    position: absolute;
+    padding-left: 32px;
+}
+
+ .select__icon {
+    position: absolute;
+    left: 10px;
+    top: 5px;
+    height: 18px;
+}
+.select__icon svg {
+    height: 18px;
+    vertical-align: middle;
+}
+
+.select__icon.select__icon__xs{
+    top: 4px;
+}
+.select__icon.select__icon__sm{
+    top: 5px;
+}
+.select__icon.select__icon__md{
+    top: 6px;
+}
+.select__icon.select__icon__lg{
+    top: 7px;
+}
+.select__icon.select__icon__xl{
+    top: 9px;
+}
+.select__icon.select__icon__xxl{
+    top: 10px;
+}
+*/

package/src/stories/Form/Switch/Switch.stories.tsx

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

package/src/stories/Form/Switch/Switch.tsx

@@ -0,0 +1,36 @@
+import {useEffect, useState} from 'react';
+import './switch.scss';
+
+export interface ISwitch extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  size?: 'sm' | 'md' | 'lg';
+
+  // boolean
+  disabled?: boolean;
+  defaultChecked: boolean;
+  error?: boolean;
+
+  // events
+  onCheck?: (check: boolean) => void;
+
+  // react
+  className?: string;
+}
+
+export const Switch = ({size = 'md', disabled = false, defaultChecked, error, onCheck, className, ...props}: ISwitch) => {
+  const [isChecked, setIsChecked] = useState<boolean>();
+
+  const toggleChecked = () => {
+    setIsChecked(!isChecked);
+    onCheck && onCheck(!isChecked);
+  };
+
+  return (
+    <div className="elv-component elv-switch" {...props}>
+      <label className={['switch', ` switch--${size}`, `${error ? ` switch--error` : ''}`, `${className ? ' ' + className : ''}`].join('')}>
+        <input type="checkbox" disabled={disabled} defaultChecked={defaultChecked} onChange={toggleChecked} />
+        <span className="slider round" />
+      </label>
+    </div>
+  );
+};

package/src/stories/Form/Switch/switch.scss

@@ -0,0 +1,123 @@
+@import '/src/sass/utilities/variables';
+
+.switch {
+  position: relative;
+  display: inline-block;
+  margin-right: 5px;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+}
+
+.slider {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $muted-300;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+
+  &:before {
+    position: absolute;
+    content: '';
+    background-color: $white;
+    -webkit-transition: transform 0.4s;
+    transition: transform 0.4s;
+  }
+}
+
+input {
+  &:checked + .slider {
+    background-color: $primary-600;
+  }
+
+  &:focus + .slider {
+    box-shadow: 0 0 3px $muted-400;
+  }
+
+  &:checked + .slider:before {
+    -webkit-transform: translateX(16px);
+    -ms-transform: translateX(16px);
+    transform: translateX(16px);
+  }
+}
+
+.switch.switch--lg input:checked + .slider:before {
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
+}
+
+/* Rounded sliders */
+
+.slider.round {
+  border-radius: 34px;
+
+  &:before {
+    border-radius: 50%;
+  }
+}
+
+/*size*/
+
+.switch {
+  &.switch--sm {
+    width: 32px;
+    height: 16px;
+  }
+
+  &.switch--md {
+    width: 40px;
+    height: 20px;
+  }
+
+  &.switch--lg {
+    width: 48px;
+    height: 24px;
+  }
+
+  &.switch--sm .slider {
+    padding: 0 2px;
+  }
+
+  &.switch--md .slider,
+  &.switch--lg .slider {
+    padding: 0 4px;
+  }
+
+  &.switch--sm .slider:before {
+    height: 12px;
+    width: 12px;
+  }
+
+  &.switch--md .slider:before {
+    height: 16px;
+    width: 16px;
+  }
+
+  &.switch--lg .slider:before {
+    height: 20px;
+    width: 20px;
+  }
+
+  &.switch--error .slider {
+    box-shadow: 0px 0px 0px 2px $error-600;
+  }
+}
+
+/*error*/
+
+/*disabled*/
+
+input:disabled + .slider {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/src/stories/Form/Textarea/Textarea.stories.tsx

@@ -0,0 +1,19 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {Textarea} from './Textarea';
+
+export default {
+  title: 'Form/Textarea',
+  component: Textarea,
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    error: false,
+    disabled: false,
+    required: false,
+    rows: 5,
+    cols: 50,
+  },
+} as ComponentMeta<typeof Textarea>;
+
+const Template: ComponentStory<typeof Textarea> = args => <Textarea {...args} />;
+export const Standard = Template.bind({});

package/src/stories/Form/Textarea/Textarea.tsx

@@ -0,0 +1,52 @@
+import {useEffect, useState} from 'react';
+import './textarea.scss';
+
+export interface ITextarea extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+  // base
+  value: string;
+  placeholder?: string;
+  defaultValue?: string;
+  rows?: number;
+  cols?: number;
+
+  // boolean
+  disabled?: boolean;
+  required?: boolean;
+  error?: boolean;
+
+  // events
+  onChangeInput: (value: string) => void;
+
+  // react
+  className?: string;
+}
+
+export const Textarea = ({
+  value,
+  error,
+  onChangeInput,
+  placeholder,
+  defaultValue,
+  disabled,
+  required,
+  rows = 5,
+  cols = 50,
+  className,
+  ...props
+}: ITextarea) => {
+  return (
+    <div className="elv-component elv-textArea">
+      <textarea
+        className={['textarea', `${error ? ` textarea--error` : ''}`, `${className ? ' ' + className : ''}`].join('')}
+        onChange={e => onChangeInput(e.target.value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        defaultValue={defaultValue}
+        required={required}
+        rows={rows}
+        cols={cols}
+        {...props}
+      />
+    </div>
+  );
+};

package/src/stories/Form/Textarea/textarea.scss

@@ -0,0 +1,25 @@
+@import '/src/sass/utilities/variables';
+
+.elv-textArea {
+  display: inline-flex;
+  .textarea {
+    padding: 10px;
+    background-color: $muted-50;
+    border: 1px solid $muted-300;
+    border-radius: 4px;
+    box-sizing: border-box;
+    resize: none;
+
+    &.textarea--error {
+      border: 2px solid $error-600;
+    }
+
+    &:focus {
+      background: rgba(18, 69, 150, 0.1);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+    }
+  }
+}

package/src/stories/Form/UploadFileItem/UploadFileItem.scss

@@ -0,0 +1,49 @@
+@import '/src/sass/utilities/variables';
+
+.elv-uploadfile {
+  .uploadfile {
+    &:hover {
+      background-color: $truegray-100;
+      border-radius: 5px;
+    }
+
+    .file_name {
+      vertical-align: middle;
+    }
+
+    &__download {
+      border-radius: 5px;
+    }
+
+    &__info {
+      width: 100%;
+
+      .preview {
+        .button-content {
+          padding: 0;
+          font-size: 12px;
+          color: $primary-600;
+        }
+      }
+    }
+
+    &__elipse {
+      width: 3px;
+      height: 3px;
+      border-radius: 50%;
+    }
+
+    &__icon {
+      right: -8px;
+      top: -2px;
+      opacity: 0;
+      cursor: pointer;
+    }
+    &:hover .uploadfile__icon {
+      opacity: 1;
+    }
+    &__progress {
+      width: 100%;
+    }
+  }
+}

package/src/stories/Form/UploadFileItem/UploadFileItem.stories.tsx

@@ -0,0 +1,18 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {UploadFileItem} from './UploadFileItem';
+
+export default {
+  title: 'Form/UploadFileItem',
+  component: UploadFileItem,
+  args: {
+    progressBar: {color: 'link', max: '100', value: 50, size: 'small'},
+    file_name: 'screenshot.png',
+    file_size: 255503331263,
+    showBar: true,
+  },
+} as ComponentMeta<typeof UploadFileItem>;
+
+const Template: ComponentStory<typeof UploadFileItem> = args => <UploadFileItem {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};