dgrcorrientes-modulos 1.0.2 → 1.0.4

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

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

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

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

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

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

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

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

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