dgrcorrientes-modulos 1.0.0

package/src/stories/Elements/Badge/badge.scss

@@ -0,0 +1,24 @@
+@import '/src/sass/utilities/variables';
+
+.badge {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 18px;
+  padding: 2px 8px;
+  border-radius: 8px;
+  color: #ffffff;
+  line-height: 150%;
+  font-weight: $fw-medium;
+
+  &.badge--primary {
+    background-color: $primary-600;
+  }
+
+  &.badge--secondary {
+    background-color: $secondary-600;
+  }
+
+  &.badge--tertiary {
+    background-color: $tertiary-600;
+  }
+}

package/src/stories/Elements/Button/Button.stories.tsx

@@ -0,0 +1,54 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {Button} from './Button';
+import icono from '../../Elements/Icon/icono.svg';
+
+export default {
+  title: 'Elements/Button',
+  component: Button,
+  args: {
+    label: 'Button',
+    isFullWidth: false,
+    isRounded: false,
+    color: 'primary',
+    size: 'normal',
+    fill: 'solid',
+    loading: false,
+    disabled: false,
+    trailingIcon: false,
+    type: 'button',
+    onClick: () => console.log('Button Clicked'),
+  },
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = args => <Button {...args} />;
+
+export const Solid = Template.bind({});
+Solid.args = {
+  fill: 'solid',
+  icon: icono,
+  icon_type: 'svg_icon',
+  icon_color: 'white',
+};
+
+export const SolidIcon = Template.bind({});
+SolidIcon.args = {
+  fill: 'solid',
+};
+
+export const Outline = Template.bind({});
+Outline.args = {
+  fill: 'outline',
+  icon: 'fa-solid fa-user',
+};
+
+export const Unstyled = Template.bind({});
+Unstyled.args = {
+  fill: 'unstyled',
+  icon: 'fa-solid fa-user',
+};
+
+export const Link = Template.bind({});
+Link.args = {
+  fill: 'link',
+  icon: 'fa-solid fa-user',
+};

package/src/stories/Elements/Button/Button.tsx

@@ -0,0 +1,118 @@
+import './button.scss';
+import {Icon} from '../Icon/Icon';
+
+export interface IButton extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  //base
+  color?: 'primary' | 'secondary' | 'tertiary';
+  type?: 'button' | 'submit' | 'reset';
+  size?: 'small' | 'normal' | 'medium' | 'large';
+  fill?: 'solid' | 'outline' | 'unstyled' | 'link';
+  label?: string;
+
+  icon?: string;
+  icon_type?: 'fa_icon' | 'svg_icon';
+  icon_size?: string;
+  icon_size_height?: string;
+  icon_color?: string;
+  icon_className?: string;
+
+  // boolean
+  isFullWidth?: boolean;
+  isRounded?: boolean;
+  isOnlyIcon?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  trailingIcon?: boolean;
+
+  // events
+  onClick?: () => void;
+
+  //REACT
+  className?: string;
+}
+
+export const Button = ({
+  color = 'primary',
+  type = 'button',
+  size = 'normal',
+  fill = 'solid',
+  isFullWidth,
+  isRounded,
+  isOnlyIcon,
+  loading = false,
+  disabled = false,
+  icon,
+  icon_type = 'fa_icon',
+  icon_size,
+  icon_size_height,
+  icon_color,
+  icon_className,
+  trailingIcon = false,
+  label,
+  onClick,
+  className,
+  ...props
+}: IButton) => {
+  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onClick && onClick();
+  };
+
+  return (
+    <div className={`elv-component elv-button ${isFullWidth ? 'is-fullw' : ''}`} {...props}>
+      <button
+        type={type}
+        className={[
+          'button',
+          `${fill === 'solid' || fill === 'outline' ? ' is-' + color + '-600' : ''}`,
+          `${fill === 'link' ? ' is-linked' : ''}`,
+          `${fill === 'outline' ? ' is-outlined' : ''}`,
+          `${fill === 'unstyled' ? ' is-unstyled' : ''}`,
+          `${size !== 'normal' ? ' is-' + size : ''}`,
+          `${trailingIcon ? ' button__icon--trailing' : ''}`,
+          `${loading ? ' is-loading' : ''}`,
+          `${isFullWidth ? ' is-fullwidth' : ''}`,
+          `${isOnlyIcon ? ' is-only-icon' : ''}`,
+          `${isRounded ? ' is-rounded' : ''}`,
+          `${className ? ' ' + className : ''}`,
+        ].join('')}
+        onClick={e => {
+          handleButtonClick(e);
+        }}
+        disabled={disabled}
+      >
+        <div className="button-content is-flex">
+          {trailingIcon ? (
+            <>
+              {label}
+              {icon && (
+                <Icon
+                  icon={icon}
+                  type={icon_type}
+                  color={icon_color}
+                  size={icon_size}
+                  size_height={icon_size_height}
+                  className={'button__icon ' + icon_className}
+                />
+              )}
+            </>
+          ) : (
+            <>
+              {icon && (
+                <Icon
+                  icon={icon}
+                  type={icon_type}
+                  color={icon_color}
+                  size={icon_size}
+                  size_height={icon_size_height}
+                  className={'button__icon ' + icon_className}
+                />
+              )}
+              {label}
+            </>
+          )}
+        </div>
+      </button>
+    </div>
+  );
+};

package/src/stories/Elements/Button/button.scss

@@ -0,0 +1,102 @@
+@import '/src/sass/utilities/variables';
+
+.elv-button {
+  display: inline-flex;
+
+  .button {
+    border-radius: 12px;
+    height: max-content;
+  }
+
+  .button.is-small:not(.is-rounded) {
+    border-radius: 12px;
+  }
+
+  .is-unstyled {
+    background-color: transparent;
+    border-color: transparent;
+
+    &:hover {
+      background-color: transparent;
+      border-color: transparent;
+      color: $primary-600;
+      fill: $primary-600;
+    }
+
+    &:active {
+      color: $primary-600;
+      fill: $primary-600;
+      background-color: transparent;
+      border-color: transparent;
+    }
+
+    &:focus {
+      border-color: transparent;
+    }
+
+    &:focus:not(:active) {
+      box-shadow: none;
+    }
+  }
+
+  .is-linked {
+    background: none;
+    border: 0px;
+    border-color: transparent;
+    color: $primary-600;
+    fill: $primary-600;
+    text-decoration: none;
+
+    .button-content {
+      border-bottom: 1px solid transparent;
+    }
+
+    &:hover {
+      color: $primary-600;
+      fill: $primary-600;
+      border-color: transparent;
+
+      .button-content {
+        border-bottom: 1px solid $primary-600;
+      }
+    }
+
+    &:active {
+      color: $primary-600;
+      fill: $primary-600;
+
+      border-color: $primary-600;
+    }
+
+    &:focus {
+      color: $primary-600;
+      fill: $primary-600;
+      border-color: $primary-600;
+    }
+
+    &:focus:not(:active) {
+      box-shadow: none;
+    }
+  }
+
+  .is-only-icon {
+    padding: 3px;
+
+    &:hover {
+      border-color: transparent;
+    }
+
+    &:active {
+      border-color: transparent;
+    }
+
+    &:focus {
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  .button-content {
+    gap: 6px;
+  }
+}

package/src/stories/Elements/Icon/Icon.stories.tsx

@@ -0,0 +1,33 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {Icon} from './Icon';
+import icono from './icono.svg';
+
+export default {
+  title: 'Elements/Icon',
+  component: Icon,
+  args: {
+    className: '',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Cada componente Icon, por defecto estará utilizando el type: "fa_icon", si se quiere usar un ícono del tipo SVG, se debe cargar la propiedad type: "svg_icon", y pasarle directamente la url del SVG en la propiedad "icon". Cabe aclarar que el TAMAÑO y el COLOR de un ícono SVG, se manejan con propiedades distintas de CSS.',
+      },
+    },
+  },
+} as ComponentMeta<typeof Icon>;
+
+const Template: ComponentStory<typeof Icon> = args => <Icon {...args} />;
+
+export const FA_Icon = Template.bind({});
+FA_Icon.args = {
+  icon: 'fa-solid fa-user',
+};
+
+export const SVG_Icon = Template.bind({});
+SVG_Icon.args = {
+  type: 'svg_icon',
+  size: '16px',
+  icon: icono.toString(),
+};

package/src/stories/Elements/Icon/Icon.tsx

@@ -0,0 +1,57 @@
+import {useEffect, useRef} from 'react';
+import './icon.scss';
+
+export interface IIcon extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  icon: string;
+  type?: 'fa_icon' | 'svg_icon';
+  size?: string;
+  size_height?: string;
+  color?: string;
+
+  // events
+  onClick?: () => void;
+
+  // react
+  className?: string;
+}
+
+export const Icon = ({icon, className, type, size = '16px', size_height, color, onClick, ...props}: IIcon) => {
+  const spanRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (type == 'svg_icon') {
+      getTheSvg(icon).then(res => {
+        if (spanRef.current && icon) {
+          spanRef.current.innerHTML = res;
+        }
+      });
+    }
+  }, [spanRef.current, icon]);
+
+  function getTheSvg(url: string) {
+    return fetch(url).then(res => res.text());
+  }
+
+  return type === 'svg_icon' ? (
+    <span
+      className={`svg_icon ${className}`}
+      ref={spanRef}
+      style={{fill: color, width: size, height: size_height}}
+      onClick={() => {
+        onClick && onClick();
+      }}
+      {...props}
+    />
+  ) : (
+    <div className="elv-component elv-icon" {...props}>
+      <i
+        className={`fa_icon ${icon} ${className}`}
+        style={{fontSize: size, color: color}}
+        onClick={() => {
+          onClick && onClick();
+        }}
+      ></i>
+    </div>
+  );
+};

package/src/stories/Elements/Icon/icon.scss

@@ -0,0 +1,15 @@
+.elv-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .fa_icon {
+    position: relative;
+  }
+}
+
+.svg_icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/stories/Elements/Icon/icono.svg

@@ -0,0 +1 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M249 1c-4 1-11 8-12 13l-1 113v109H13l-4 3c-6 4-8 9-8 17 0 5 0 7 2 11l7 6 4 2 111 1h111v222l3 4 6 7c4 2 6 2 11 2 6 0 7 0 11-2l6-7 2-4 1-111V276h111l111-1 4-2 7-6c2-4 2-6 2-11s0-7-2-11l-7-6-4-2-111-1H276V125l-1-112-2-3c-5-8-15-12-24-9z" /></svg>

package/src/stories/Elements/ProgressBar/ProgressBar.scss

@@ -0,0 +1,26 @@
+@import '/src/sass/utilities/variables';
+.elv-progressbar{
+    .progressbar{
+
+        .progress{
+            &--small{
+                height: 3px;
+            }
+
+            &--normal{
+                height: 6px;
+            }
+
+            &--medium{
+                height: 12px;
+            }
+
+            &--large{
+                height: 18px;
+            }
+        }
+
+
+
+    }
+}

package/src/stories/Elements/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,19 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {ProgressBar} from './ProgressBar';
+
+export default {
+  title: 'Elements/ProgressBar',
+  component: ProgressBar,
+  args: {
+    value: 50,
+    max: '100',
+    color: 'primary',
+    size: 'normal',
+    type: 'progress',
+  },
+} as ComponentMeta<typeof ProgressBar>;
+
+const Template: ComponentStory<typeof ProgressBar> = args => <ProgressBar {...args} />;
+
+export const Standard = Template.bind({});
+Standard.args = {};

package/src/stories/Elements/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,35 @@
+import {link} from 'fs';
+import './ProgressBar.scss';
+import {Warning} from '../Alert/Alert.stories';
+
+export interface IProgressBar extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // BASE
+  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
+  size?: 'small' | 'normal' | 'medium' | 'large';
+  max?: string;
+  value?: number;
+
+  // IS-OPTIONS
+
+  // EVENTS
+
+  // GENERIC
+  className?: string;
+}
+
+export const ProgressBar = ({color = 'primary', size = 'normal', max, value, className, ...props}: IProgressBar) => {
+  return (
+    <div className="elv-component elv-progressbar" {...props}>
+      <div className={['progressbar ', `${className ? ' ' + className : ''}`].join('')}>
+        <progress
+          className={[
+            `progress  progress--${size}`,
+            `${color === 'primary' || 'link' || 'info' || 'success' || 'warning' || 'danger' ? ' is-' + color : ''}`,
+          ].join('')}
+          value={value}
+          max={max}
+        ></progress>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,55 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {Autocomplete} from './Autocomplete';
+
+export default {
+  title: 'Form/Autocomplete',
+  component: Autocomplete,
+  args: {
+    size: 'md',
+    fill: 'outline',
+    disabled: false,
+    error: false,
+    placeholder: 'Default Autocomplete',
+    defaultValue: '2',
+    maxCharacters: 10,
+    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'},
+    ],
+    onChangeSelect(value) {
+      console.log('Select change: ' + value);
+    },
+  },
+} as ComponentMeta<typeof Autocomplete>;
+
+const Template: ComponentStory<typeof Autocomplete> = args => <Autocomplete {...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',
+};