dgrcorrientes-modulos 1.0.0

package/src/stories/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,89 @@
+import {useState} from 'react';
+import './checkbox.scss';
+import '/src/sass/base/_controls.scss';
+
+export interface ICheckbox extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  size?: 'sm' | 'md' | 'lg';
+  label?: string;
+  value: string;
+  name: string;
+
+  // boolean
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+
+  // events
+  onCheck?: (checked: boolean) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+
+  // react
+  className?: string;
+  key?: string;
+}
+export const Checkbox = ({
+  size = 'md',
+  label = 'checkbox',
+  value,
+  name,
+  className,
+  key,
+  defaultChecked,
+  checked,
+  error,
+  disabled = false,
+  //hover,
+  onCheck,
+  onChange,
+  ...props
+}: ICheckbox) => {
+  const [isChecked, setIsChecked] = useState<boolean>(defaultChecked ? defaultChecked : false);
+
+  const toggleChecked = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsChecked(!isChecked);
+    onCheck && onCheck(!isChecked);
+    onChange && onChange(e);
+  };
+
+  return (
+    <div className={`elv-component elv-checkbox elv-control`} {...props}>
+      <label
+        className={[
+          'e-control e-checkbox',
+          ` e-control--${size} e-checkbox--${size}`,
+          `${error ? ` e-control--error e-checkbox--error` : ''}`,
+          `${disabled ? ` e-control--disabled e-checkbox--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="checkbox"
+          onChange={e => {
+            toggleChecked(e);
+          }}
+          defaultChecked={defaultChecked}
+          id={value}
+          value={value}
+          name={name}
+          checked={checked}
+          className={['e-control__input e-checkbox__input'].join('')}
+          disabled={disabled}
+        />
+        {label && <span className="label-text is-flex is-align-items-center">{label}</span>}
+
+        <span
+          className={[
+            'e-control__checkmark e-checkbox__checkmark',
+            ' is-flex is-align-items-center is-justify-content-center is-relative',
+          ].join('')}
+        />
+      </label>
+    </div>
+  );
+};

package/src/stories/Form/Checkbox/checkbox.scss

@@ -0,0 +1,41 @@
+@import '/src/sass/utilities/variables';
+
+.elv-checkbox {
+  .e-checkbox {
+    &__input:checked ~ .e-control__checkmark {
+      background-color: $primary-600;
+    }
+
+    &__checkmark {
+      border-radius: 2px;
+
+      &:after {
+        width: 9px;
+        height: 4px;
+        border: 2px solid white;
+        border-top: none;
+        border-right: none;
+        background: transparent;
+        transform: rotate(-45deg) !important;
+      }
+    }
+
+    &--sm {
+      .e-checkbox__checkmark {
+        &:after {
+          width: 6px;
+          height: 3px;
+        }
+      }
+    }
+
+    &--lg {
+      .e-checkbox__checkmark {
+        &:after {
+          width: 12px;
+          height: 5px;
+        }
+      }
+    }
+  }
+}

package/src/stories/Form/DatePicker/DatePickerExample.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+
+import {DatePickerExample} from './DatePickerExample';
+
+export default {
+  title: 'Example/DatePickerExample',
+  component: DatePickerExample,
+  args: {},
+} as ComponentMeta<typeof DatePickerExample>;
+
+const Template: ComponentStory<typeof DatePickerExample> = args => <DatePickerExample {...args} />;
+
+export const Day = Template.bind({});
+Day.args = {type: 'day'};
+
+export const Range = Template.bind({});
+Range.args = {type: 'range'};
+
+export const Portal = Template.bind({});
+Portal.args = {type: 'portal'};
+
+export const Months = Template.bind({});
+Months.args = {type: 'months'};
+
+export const Year = Template.bind({});
+Year.args = {type: 'year-select'};

package/src/stories/Form/DatePicker/DatePickerExample.tsx

@@ -0,0 +1,65 @@
+import React, {useState} from 'react';
+import DatePicker from 'react-datepicker';
+
+import 'react-datepicker/dist/react-datepicker.css';
+import '/src/sass/base/_datepicker.scss';
+
+export interface DatePickerExampleProps {
+  type?: 'day' | 'range' | 'portal' | 'months' | 'year-select';
+}
+
+export const DatePickerExample = ({type}: DatePickerExampleProps) => {
+  const [startDate, setStartDate] = useState(new Date('2014/02/08'));
+  const [startDateMonth, setStartDateMonth] = useState(new Date('2014/02/08'));
+  const [endDate, setEndDate] = useState(new Date('2014/02/10'));
+
+  switch (type) {
+    case 'day':
+      return <DatePicker showIcon selected={startDate} onChange={(date: React.SetStateAction<Date>) => setStartDate(date)} />;
+    case 'range':
+      return (
+        <>
+          <DatePicker
+            selected={startDate}
+            onChange={(date: React.SetStateAction<Date>) => setStartDate(date)}
+            selectsStart
+            startDate={startDate}
+            endDate={endDate}
+          />
+          <DatePicker
+            selected={endDate}
+            onChange={(date: React.SetStateAction<Date>) => setEndDate(date)}
+            selectsEnd
+            startDate={startDate}
+            endDate={endDate}
+            minDate={startDate}
+          />
+        </>
+      );
+    case 'portal':
+      return <DatePicker selected={startDate} onChange={(date: React.SetStateAction<Date>) => setStartDate(date)} withPortal />;
+    case 'months':
+      return (
+        <DatePicker
+          selected={startDateMonth}
+          onChange={(date: React.SetStateAction<Date>) => setStartDateMonth(date)}
+          dateFormat="MM/yyyy"
+          excludeDates={[1661990400000, 1664582400000, 1667260800000, 1672531200000]}
+          showMonthYearPicker
+        />
+      );
+    case 'year-select':
+      return (
+        <DatePicker
+          selected={startDate}
+          onChange={(date: React.SetStateAction<Date>) => setStartDate(date)}
+          showYearPicker
+          dateFormat="yyyy"
+        />
+      );
+    default:
+      return (
+        <DatePicker showTimeSelect showIcon selected={startDate} onChange={(date: React.SetStateAction<Date>) => setStartDate(date)} />
+      );
+  }
+};

package/src/stories/Form/DatePickerComponent/DatePickerComponent.scss

@@ -0,0 +1,116 @@
+@import '/src/sass/utilities/variables';
+
+.elv-datepicker {
+  .react-datepicker {
+    font-family: 'SF UI Text', sans-serif !important;
+    box-shadow: 0px 0px 2px rgba(14, 31, 53, 0.12), 0px 1px 4px rgba(14, 31, 53, 0.06);
+    border-radius: 16px;
+    overflow: hidden;
+
+    &__header {
+      background-color: $white;
+    }
+
+    &__input-container {
+      input {
+        font-family: 'SF UI Text', sans-serif !important;
+        //   min-width: 160px;
+        text-align: center;
+
+        padding-top: 9px;
+        padding-bottom: 8px;
+
+        border: 1px solid #d4d4d4;
+        border-radius: 12px;
+        background: transparent;
+
+        &:hover {
+          border: 1px solid $primary-600;
+        }
+
+        &:focus {
+          background: rgba(18, 69, 150, 0.1);
+          outline: 2px solid $primary-600;
+        }
+      }
+
+      .react-datepicker__view-calendar-icon {
+        input {
+          padding-left: 25px !important;
+        }
+      }
+    }
+
+    &__day {
+      border-radius: 50%;
+
+      &--selected {
+        border-radius: 50%;
+        background-color: $primary-600;
+
+        &:hover {
+          background-color: #4355fa;
+          background-color: $primary-400;
+        }
+      }
+
+      &:hover {
+        border-radius: 50%;
+        background-color: $primary-200;
+      }
+    }
+
+    &__month {
+      &-text {
+        border-radius: 16px;
+
+        &--selected {
+          border-radius: 16px;
+          background-color: $primary-600;
+          color: white;
+
+          &:hover {
+            border-radius: 16px;
+            background-color: #4355fa;
+          }
+        }
+
+        &.react-datepicker__month--selected {
+          &:hover {
+            background-color: #4355fa;
+          }
+        }
+      }
+
+      &--selected {
+        border-radius: 16px;
+        background-color: $primary-600;
+        color: white;
+
+        &:hover {
+          border-radius: 16px;
+          background-color: #4355fa;
+        }
+      }
+    }
+
+    &__year-wrapper {
+      justify-content: center;
+    }
+
+    &__year-text {
+      border-radius: 16px;
+
+      &--selected {
+        border-radius: 16px;
+        background-color: $primary-600;
+        color: white;
+
+        &:hover {
+          border-radius: 16px;
+          background-color: #4355fa;
+        }
+      }
+    }
+  }
+}

package/src/stories/Form/DatePickerComponent/DatePickerComponent.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+
+import {DatePickerComponent} from './DatePickerComponent';
+
+export default {
+  title: 'Form/DatePickerComponent',
+  component: DatePickerComponent,
+  args: {
+    startDate: new Date('2017/06/10'),
+    endDate: new Date('2017/06/20'),
+    dateFormat: 'dd/MM/yyyy',
+    onStartDateChange(date) {
+      console.log('Start Date: ' + date);
+    },
+    onStartDateMonthChange(date) {
+      console.log('StartDateMonth: ' + date);
+    },
+    onEndDateChange(date) {
+      console.log('EndDate: ' + date);
+    },
+  },
+} as ComponentMeta<typeof DatePickerComponent>;
+
+const Template: ComponentStory<typeof DatePickerComponent> = args => <DatePickerComponent {...args} />;
+
+export const Day = Template.bind({});
+Day.args = {type: 'day'};
+
+export const Range = Template.bind({});
+Range.args = {isRange: true};
+
+export const Months = Template.bind({});
+Months.args = {type: 'months', dateFormat: 'MM/yyyy'};
+
+export const Year = Template.bind({});
+Year.args = {type: 'year', dateFormat: 'yyyy'};

package/src/stories/Form/DatePickerComponent/DatePickerComponent.tsx

@@ -0,0 +1,97 @@
+import React, {useEffect, useState} from 'react';
+import DatePicker from 'react-datepicker';
+
+import 'react-datepicker/dist/react-datepicker.css';
+import './DatePickerComponent.scss';
+
+export interface IDatePickerComponent extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  // base
+  type: 'day' | 'months' | 'year';
+  dateFormat?: string;
+  startDate?: Date;
+  endDate?: Date;
+
+  // boolean
+  showIcon?: boolean;
+  withPortal?: boolean;
+
+  isRange?: boolean;
+
+  // events
+  onStartDateChange?: (date: Date) => void;
+  onStartDateMonthChange?: (date: Date) => void;
+  onEndDateChange?: (date: Date) => void;
+
+  // react
+  className?: string;
+}
+
+export const DatePickerComponent = ({
+  type,
+  dateFormat,
+  startDate,
+  endDate,
+  showIcon,
+  withPortal,
+  isRange,
+  onStartDateChange,
+  onEndDateChange,
+  className,
+  ...props
+}: IDatePickerComponent) => {
+  const [startDateState, setStartDateState] = useState(startDate ? startDate : new Date());
+  const [endDateState, setEndDateState] = useState(endDate ? endDate : new Date());
+
+  useEffect(() => {
+    onStartDateChange && onStartDateChange(startDateState);
+  }, [startDateState]);
+
+  useEffect(() => {
+    onEndDateChange && onEndDateChange(endDateState);
+  }, [endDateState]);
+
+  return !isRange ? (
+    <div className="elv-component elv-datepicker" {...props}>
+      <DatePicker
+        selected={startDateState}
+        onChange={(date: React.SetStateAction<Date>) => setStartDateState(date)}
+        withPortal={withPortal}
+        showMonthYearPicker={type == 'months' ? true : false}
+        showYearPicker={type == 'year' ? true : false}
+        dateFormat={dateFormat}
+        showIcon={showIcon}
+        className={className}
+      />
+    </div>
+  ) : (
+    <div className="elv-component elv-datepicker" {...props}>
+      <DatePicker
+        selected={startDateState}
+        onChange={(date: React.SetStateAction<Date>) => setStartDateState(date)}
+        withPortal={withPortal}
+        showMonthYearPicker={type == 'months' ? true : false}
+        showYearPicker={type == 'year' ? true : false}
+        dateFormat={dateFormat}
+        showIcon={showIcon}
+        selectsStart
+        startDate={startDateState}
+        endDate={endDateState}
+        className={className}
+      />
+      <DatePicker
+        selected={endDateState}
+        onChange={(date: React.SetStateAction<Date>) => setEndDateState(date)}
+        withPortal={withPortal}
+        showMonthYearPicker={type == 'months' ? true : false}
+        showYearPicker={type == 'year' ? true : false}
+        dateFormat={dateFormat}
+        showIcon={showIcon}
+        selectsEnd
+        startDate={startDateState}
+        endDate={endDateState}
+        minDate={startDateState}
+        className={className}
+      />
+    </div>
+  );
+};

package/src/stories/Form/Filters/Filters.stories.tsx

@@ -0,0 +1,84 @@
+import {ComponentStory, ComponentMeta} from '@storybook/react';
+import {Filters} from './Filters';
+
+export default {
+  title: 'Form/Filters',
+  component: Filters,
+  args: {
+    size: 'sm',
+    fill: 'outline',
+    disabled: false,
+    error: false,
+    placeholder: 'Filtrar',
+    button: {
+      type: 'button',
+      color: 'primary',
+      size: 'normal',
+      fill: 'solid',
+      loading: false,
+      disabled: false,
+      label: 'Aplicar Filtros',
+      trailingIcon: true,
+    },
+    buttonCleaner: {
+      type: 'button',
+      color: 'tertiary',
+      size: 'normal',
+      fill: 'unstyled',
+      loading: false,
+      disabled: false,
+      label: 'Borrar Filtros',
+      trailingIcon: true,
+    },
+    onChangeFilters: () => console.log('Filter Change'),
+    section: [
+      {
+        name: 'antiguedad',
+        label: 'FILTRAR ANTIGÜEDAD: ',
+        type: 'radio',
+        options: [{name: 'Más viejo'}, {name: 'Más nuevo'}],
+      },
+      {
+        name: 'anio',
+        label: 'FILTRAR POR AÑO: ',
+        type: 'checkbox',
+        options: [{name: '2019'}, {name: '2020'}, {name: '2021'}, {name: '2022'}],
+      },
+      {
+        name: 'order',
+        label: 'ORDENAR: ',
+        type: 'radio',
+        options: [
+          {icon: 'fa-solid fa-home', name: 'Ascendente', iconItem: {icon: 'fa-solid fa-arrow-up'}},
+          {icon: 'fa-solid fa-home', name: 'Descendente', iconItem: {icon: 'fa-solid fa-arrow-down'}},
+        ],
+      },
+    ],
+  },
+} as ComponentMeta<typeof Filters>;
+
+const Template: ComponentStory<typeof Filters> = args => <Filters {...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',
+};