dgrcorrientes-modulos 1.0.2 → 1.0.4

package/src/stories/Components/Collapse/Collapse.stories.tsx

@@ -1,766 +0,0 @@
-import {ComponentStory, ComponentMeta} from '@storybook/react';
-import {Collapse} from './Collapse';
-import icono from '../../Elements/Icon/icono.svg';
-import {Tooltip} from '../Tooltip/Tooltip';
-
-export default {
-  title: 'Components/Collapse',
-  component: Collapse,
-  args: {
-    paddingLeft: 'long',
-    show: true,
-    initialState: false,
-    title: 'Título',
-    titleWeight: 'semibold',
-    price: 12000.662,
-    disabled: false,
-    borderTop: false,
-    borderBottom: false,
-    callBackCheckbox: array => {
-      console.log(array);
-    },
-    onSaveData(data) {
-      console.log(data);
-    },
-    showAmountinEdit: true,
-  },
-} as ComponentMeta<typeof Collapse>;
-
-const Template: ComponentStory<typeof Collapse> = args => <Collapse {...args} />;
-
-export const Standard = Template.bind({});
-Standard.args = {
-  type: 'father',
-  isFather: true,
-  show: true,
-  initialState: false,
-  description: 'Descripción',
-
-  buttonMenu: {
-    menuDropComponent: (
-      <Tooltip active contentType="text" text="Usá esta Base Imponible para tu declaración de Bienes Personales 2023" trianglePos="none" />
-    ),
-    button: {
-      size: 'normal',
-      fill: 'unstyled',
-      icon: 'fa-solid fa-ellipsis-vertical',
-      type: 'button',
-    },
-    onEllipse: () => console.log('clicked button Ellipse'),
-
-    // select: {
-    //   size: 'md',
-    //   fill: 'outline',
-    //   disabled: false,
-    //   error: false,
-    //   placeholder: 'Default Select',
-    //   options: [
-    //     {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-    //     {value: '2', label: 'Option 2'},
-    //     {value: '3', label: 'Option 3'},
-    //   ],
-    //   onChangeSelect: value => console.log('Select: ' + value),
-    // },
-  },
-
-  childCollapse: [
-    {
-      type: 'child',
-      isFather: true,
-      initialState: false,
-      borderTop: true,
-      title: 'Título',
-      description: 'Descripción',
-      price: 12.000662,
-
-      buttonMenu: {
-        button: {
-          size: 'normal',
-          fill: 'unstyled',
-          icon: 'fa-solid fa-ellipsis-vertical',
-          type: 'button',
-        },
-        menuDropComponent: (
-          <Tooltip
-            active
-            contentType="text"
-            text="Usá esta Base Imponible para tu declaración de Bienes Personales 2023"
-            trianglePos="none"
-          />
-        ),
-        onEllipse: () => console.log('clicked button Ellipse'),
-        // select: {
-        //   size: 'md',
-        //   fill: 'outline',
-        //   disabled: false,
-        //   error: false,
-        //   placeholder: 'Default Select',
-        //   options: [
-        //     {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-        //     {value: '2', label: 'Option 2'},
-        //     {value: '3', label: 'Option 3'},
-        //   ],
-        //   onChangeSelect: () => {
-        //     console.log('Select changed');
-        //   },
-        // },
-      },
-      childCollapse: [
-        {
-          type: 'nephew',
-          colored: true,
-          borderTop: true,
-          initialState: false,
-          title: 'Título',
-          description: 'Descripción',
-          price: 12.000662,
-
-          buttonMenu: {
-            button: {
-              size: 'normal',
-              fill: 'unstyled',
-              icon: 'fa-solid fa-ellipsis-vertical',
-              type: 'button',
-            },
-            onEllipse: () => console.log('clicked button Ellipse'),
-            select: {
-              size: 'md',
-              fill: 'outline',
-              disabled: false,
-              error: false,
-              placeholder: 'Default Select',
-              options: [
-                {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-                {value: '2', label: 'Option 2'},
-                {value: '3', label: 'Option 3'},
-              ],
-              onChangeSelect: value => {
-                console.log('Select changed' + ' ' + value);
-              },
-            },
-          },
-        },
-      ],
-    },
-  ],
-};
-
-export const Father = Template.bind({});
-Father.args = {
-  type: 'father',
-  isFather: false,
-  show: true,
-  initialState: false,
-  description: 'Descripción',
-  buttonMenu: {
-    button: {
-      size: 'normal',
-      fill: 'unstyled',
-      icon: 'fa-solid fa-ellipsis-vertical',
-      type: 'button',
-    },
-    onEllipse: () => console.log('clicked button Ellipse'),
-    select: {
-      size: 'md',
-      fill: 'outline',
-      disabled: false,
-      error: false,
-      placeholder: 'Default Select',
-      options: [
-        {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-        {value: '2', label: 'Option 2'},
-        {value: '3', label: 'Option 3'},
-      ],
-      onChangeSelect: value => console.log('Select: ' + value),
-    },
-  },
-};
-
-export const Child = Template.bind({});
-Child.args = {
-  type: 'child',
-  isFather: false,
-  show: true,
-  initialState: false,
-  description: 'Descripción',
-  buttonMenu: {
-    button: {
-      size: 'normal',
-      fill: 'unstyled',
-      icon: 'fa-solid fa-ellipsis-vertical',
-      type: 'button',
-    },
-    onEllipse: () => console.log('clicked button Ellipse'),
-    select: {
-      size: 'md',
-      fill: 'outline',
-      disabled: false,
-      error: false,
-      placeholder: 'Default Select',
-      options: [
-        {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-        {value: '2', label: 'Option 2'},
-        {value: '3', label: 'Option 3'},
-      ],
-      onChangeSelect: value => console.log('Select: ' + value),
-    },
-  },
-};
-
-export const Nephew = Template.bind({});
-Nephew.args = {
-  type: 'nephew',
-  isFather: false,
-  show: true,
-  initialState: false,
-  description: 'Descripción',
-  buttonMenu: {
-    button: {
-      size: 'normal',
-      fill: 'unstyled',
-      icon: 'fa-solid fa-ellipsis-vertical',
-      type: 'button',
-    },
-    onEllipse: () => console.log('clicked button Ellipse'),
-    select: {
-      size: 'md',
-      fill: 'outline',
-      disabled: false,
-      error: false,
-      placeholder: 'Default Select',
-      options: [
-        {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-        {value: '2', label: 'Option 2'},
-        {value: '3', label: 'Option 3'},
-      ],
-      onChangeSelect: value => console.log('Select: ' + value),
-    },
-  },
-};
-
-export const Example1 = Template.bind({});
-Example1.args = {
-  type: 'father',
-  initialState: false,
-  description: 'Descripción',
-
-  borderBottom: true,
-  titleIcon: {icon: 'fa-solid fa-car'},
-  badge: {color: 'primary', text: 'PRINCIPAL'},
-  details: 'N° factura: \n 000001231231',
-  dateDays: '05/11/2022',
-  dateTime: '08:54',
-
-  priceTop: {description: 'Imp.', value: 1990},
-  priceBottom: {description: 'Alic.', value: 2.9},
-  buttonMenu: {
-    button: {
-      size: 'normal',
-      fill: 'unstyled',
-      icon: 'fa-solid fa-ellipsis-vertical',
-      type: 'button',
-    },
-    onEllipse: () => console.log('clicked button Ellipse'),
-    select: {
-      size: 'md',
-      fill: 'outline',
-      disabled: false,
-      error: false,
-      placeholder: 'Default Select',
-      options: [
-        {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-        {value: '2', label: 'Option 2'},
-        {value: '3', label: 'Option 3'},
-      ],
-      onChangeSelect: value => console.log('Select: ' + value),
-    },
-  },
-};
-
-export const Example2 = Template.bind({});
-Example2.args = {
-  type: 'father',
-  titleWeight: 'regular',
-  initialState: false,
-  borderBottom: true,
-};
-
-export const Example3 = Template.bind({});
-Example3.args = {
-  paddingLeft: 'short',
-  type: 'father',
-  priceColor: '#124596',
-  isFather: true,
-  show: true,
-  initialState: false,
-  borderBottom: true,
-  checkbox: {
-    defaultChecked: true,
-    // checked: true,
-    label: '',
-    size: 'md',
-    value: 'value',
-    name: 'priceLeft',
-    onCheck: state => console.log('priceLeft Checked: ' + state),
-  },
-  childCollapse: [
-    {
-      type: 'child',
-      paddingLeft: 'short',
-      isFather: true,
-      initialState: false,
-      title: 'Cuota Régimen Especial IB',
-      titleWeight: 'regular',
-      price: 50.35,
-      checkbox: {
-        defaultChecked: true,
-        label: '',
-        size: 'md',
-        value: 'value',
-        name: 'priceLeft',
-        onCheck: () => console.log('priceLeft Checked'),
-      },
-      callBackCheckbox: array => {
-        console.log(array);
-      },
-    },
-    {
-      type: 'child',
-      paddingLeft: 'short',
-      isFather: true,
-      initialState: false,
-      title: 'Facilidades de pago',
-      titleWeight: 'regular',
-      price: 943.12,
-      checkbox: {
-        label: '',
-        size: 'md',
-        value: 'value',
-        name: 'priceLeft',
-        onCheck: () => console.log('priceLeft Checked'),
-      },
-      callBackCheckbox: array => {
-        console.log(array);
-      },
-      childCollapse: [
-        {
-          type: 'nephew',
-          paddingLeft: 'short',
-          initialState: false,
-          title: 'Compensación por reconocimiento de créditos',
-          titleWeight: 'regular',
-          price: 235.78,
-          checkbox: {
-            label: '',
-            size: 'md',
-            value: 'value',
-            name: 'priceLeft',
-            onCheck: () => console.log('priceLeft Checked'),
-          },
-          callBackCheckbox: array => {
-            console.log(array);
-          },
-        },
-        {
-          type: 'nephew',
-          paddingLeft: 'short',
-          initialState: false,
-          title: 'Compensación pagos Duplicados',
-          titleWeight: 'regular',
-          price: 235.78,
-          checkbox: {
-            label: '',
-            size: 'md',
-            value: 'value',
-            name: 'priceLeft',
-            onCheck: () => console.log('priceLeft Checked'),
-          },
-          callBackCheckbox: array => {
-            console.log(array);
-          },
-        },
-        {
-          type: 'nephew',
-          paddingLeft: 'short',
-          initialState: false,
-          title: 'Compensación por reconocimiento de créditos',
-          titleWeight: 'regular',
-          price: 235.78,
-          checkbox: {
-            label: '',
-            size: 'md',
-            value: 'value',
-            name: 'priceLeft',
-            onCheck: () => console.log('priceLeft Checked'),
-          },
-          callBackCheckbox: array => {
-            console.log(array);
-          },
-        },
-      ],
-    },
-    {
-      type: 'child',
-      paddingLeft: 'short',
-      isFather: true,
-      initialState: false,
-      title: 'Multas Formales',
-      titleWeight: 'regular',
-      price: 668.02,
-      checkbox: {
-        label: '',
-        size: 'md',
-        value: 'value',
-        name: 'priceLeft',
-        onCheck: () => console.log('priceLeft Checked'),
-      },
-      callBackCheckbox: array => {
-        console.log(array);
-      },
-    },
-  ],
-};
-
-export const Example4 = Template.bind({});
-Example4.args = {
-  type: 'father',
-  isFather: true,
-  title: '2021',
-  show: true,
-  initialState: false,
-  borderBottom: true,
-  checkbox: {
-    label: '',
-    size: 'md',
-    value: 'value',
-    name: 'priceLeft',
-    onCheck: () => console.log('priceLeft Checked'),
-  },
-  callBackCheckbox: array => {
-    console.log(array);
-  },
-  childCollapse: [
-    {
-      type: 'child',
-      isFather: true,
-      initialState: false,
-      borderBottom: true,
-      title: 'G10004357',
-      description: 'Casa 1',
-      price: 41.58408,
-      checkbox: {
-        label: '',
-        size: 'md',
-        value: 'value',
-        name: 'priceLeft',
-        onCheck: () => console.log('priceLeft Checked'),
-      },
-      callBackCheckbox: array => {
-        console.log(array);
-      },
-      childCollapse: [
-        {
-          type: 'nephew',
-          initialState: false,
-          title: '2021 / Cuota 1',
-          stateTitle: {color: '#16A34A', label: 'Compensado completo'},
-          price: 4.80163,
-          badge: {color: '#DC2626', text: 'MORA'},
-          colored: true,
-          checkbox: {
-            label: '',
-            size: 'md',
-            value: 'value',
-            name: 'priceLeft',
-            onCheck: () => console.log('priceLeft Checked'),
-          },
-          callBackCheckbox: array => {
-            console.log(array);
-          },
-        },
-        {
-          type: 'nephew',
-          initialState: false,
-          title: '2021 / Cuota 2',
-          stateTitle: {color: '#EA580C', label: 'Compensado parcial'},
-          price: 4.52163,
-          badge: {color: '#DC2626', text: 'MORA'},
-          colored: true,
-          checkbox: {
-            label: '',
-            size: 'md',
-            value: 'value',
-            name: 'priceLeft',
-            onCheck: () => console.log('priceLeft Checked'),
-          },
-          callBackCheckbox: array => {
-            console.log(array);
-          },
-        },
-        {
-          type: 'nephew',
-          initialState: false,
-          title: '2021 / Cuota 3',
-          price: 4.31573,
-          badge: {color: '#DC2626', text: 'MORA'},
-          disabled: true,
-          checkbox: {
-            label: '',
-            size: 'md',
-            value: 'value',
-            name: 'priceLeft',
-            onCheck: () => console.log('priceLeft Checked'),
-          },
-          callBackCheckbox: array => {
-            console.log(array);
-          },
-        },
-      ],
-    },
-  ],
-};
-
-export const Example5 = Template.bind({});
-Example5.args = {
-  type: 'child',
-  isFather: false,
-  show: true,
-  initialState: false,
-  description: 'Descripción',
-  colored: true,
-  buttonMenu: {
-    button: {
-      size: 'normal',
-      fill: 'unstyled',
-      icon: 'fa-solid fa-ellipsis-vertical',
-      type: 'button',
-    },
-    onEllipse: () => console.log('clicked button Ellipse'),
-    select: {
-      size: 'md',
-      fill: 'outline',
-      disabled: false,
-      error: false,
-      placeholder: 'Default Select',
-      options: [
-        {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-        {value: '2', label: 'Option 2'},
-        {value: '3', label: 'Option 3'},
-      ],
-      onChangeSelect: value => console.log('Select: ' + value),
-    },
-  },
-  radio: {
-    size: 'md',
-    disabled: false,
-    label: '',
-    name: 'radioRight',
-    value: 'value',
-    error: false,
-    onCheck: () => {
-      console.log('Radio Checked: ');
-    },
-  },
-};
-
-export const AllPropsActive = Template.bind({});
-AllPropsActive.args = {
-  type: 'father',
-  isFather: true,
-  initialState: false,
-  description: 'Descripción',
-
-  titleIcon: {icon: 'fa-solid fa-car'},
-  badge: {color: 'primary', text: 'PRINCIPAL'},
-  stateTitle: {color: '#16A34A', label: 'Compensado completo'},
-  details: 'N° factura: \n 000001231231',
-  dateDays: '05/11/2022',
-  dateTime: '08:54',
-
-  priceTop: {description: 'Imp.', value: 1990},
-  priceBottom: {description: 'Alic.', value: 2.9},
-  buttonMenu: {
-    button: {
-      size: 'normal',
-      fill: 'unstyled',
-      icon: 'fa-solid fa-ellipsis-vertical',
-      type: 'button',
-    },
-    onEllipse: () => console.log('clicked button Ellipse'),
-    select: {
-      size: 'md',
-      fill: 'outline',
-      disabled: false,
-      error: false,
-      placeholder: 'Default Select',
-      options: [
-        {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-        {value: '2', label: 'Option 2'},
-        {value: '3', label: 'Option 3'},
-      ],
-      onChangeSelect: value => console.log('Select: ' + value),
-    },
-  },
-
-  priceLeft: {
-    checkbox: {
-      label: 'Saldo al 26/2 -',
-      size: 'md',
-      value: 'value',
-      name: 'priceLeft',
-      onCheck: () => console.log('priceLeft Checked'),
-    },
-    label: 'Saldo al 26/2 -',
-  },
-  childCollapse: [
-    {
-      type: 'child',
-      isFather: true,
-      initialState: false,
-      borderTop: true,
-      title: 'Título',
-      description: 'Descripción',
-      price: 12.000662,
-      buttonMenu: {
-        button: {
-          size: 'normal',
-          fill: 'unstyled',
-          icon: 'fa-solid fa-ellipsis-vertical',
-          type: 'button',
-        },
-        onEllipse: () => console.log('clicked button Ellipse'),
-        select: {
-          size: 'md',
-          fill: 'outline',
-          disabled: false,
-          error: false,
-          placeholder: 'Default Select',
-          options: [
-            {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-            {value: '2', label: 'Option 2'},
-            {value: '3', label: 'Option 3'},
-          ],
-          onChangeSelect: () => {
-            console.log('Select changed');
-          },
-        },
-      },
-      childCollapse: [
-        {
-          type: 'nephew',
-          colored: true,
-          borderTop: true,
-          initialState: false,
-          title: 'Título',
-          description: 'Descripción',
-          price: 12.000662,
-          buttonMenu: {
-            button: {
-              size: 'normal',
-              fill: 'unstyled',
-              icon: 'fa-solid fa-ellipsis-vertical',
-              type: 'button',
-            },
-            onEllipse: () => console.log('clicked button Ellipse'),
-            select: {
-              size: 'md',
-              fill: 'outline',
-              disabled: false,
-              error: false,
-              placeholder: 'Default Select',
-              options: [
-                {value: '1', label: 'Option 1', icon: 'fa fa-house'},
-                {value: '2', label: 'Option 2'},
-                {value: '3', label: 'Option 3'},
-              ],
-              onChangeSelect: () => {
-                console.log('Select changed');
-              },
-            },
-          },
-        },
-      ],
-    },
-  ],
-  buttonDetail: {
-    button: {
-      label: 'Detalles',
-      size: 'normal',
-      fill: 'link',
-      icon: icono,
-      icon_type: 'svg_icon',
-      type: 'button',
-      onClick: () => console.log('ButtonDetail Clicked'),
-    },
-    tooltip: {
-      contentType: 'taxes',
-      trianglePos: 'top-left',
-      principal_item: {label: 'Impuesto inicial', value: '$ 38.700,50'},
-      sections: [
-        {
-          title: 'Descuentos',
-          labels: [
-            {label: '30% por estar al día', value: '- $ 11.400,00'},
-            {label: '15% por cuota única', value: '- $ 3.400,00'},
-            {label: 'Cupón de crédito 2020', value: '- $ 3.012,00'},
-            {label: 'Tope por ley', value: '- $ 3.000,00'},
-            {label: 'Tope por ley 2', value: '- $ 4.000,00'},
-          ],
-        },
-      ],
-      total: {label: 'Total a pagar', value: '$ 21.093,50'},
-      notification: 'Sin el 5% de descuento extra de las buenas prácticas agropecuarias.',
-      alert: {
-        icon: 'fa-solid fa-circle-info',
-        label: 'El Tope en el Aumento 2021 es el valor que limita los incrementos en tu Impuesto Inmobiliario.',
-      },
-    },
-    tooltipPos: 'bottom',
-  },
-
-  dropRightButton: {
-    size: 'small',
-    icon: 'fa-solid fa-chevron-right',
-    fill: 'unstyled',
-    type: 'button',
-    onClick: () => console.log('ButtonMenu Clicked'),
-  },
-  buttonLink: {
-    label: 'Ver más',
-    size: 'small',
-    fill: 'link',
-    loading: false,
-    disabled: false,
-    trailingIcon: true,
-    icon: 'fa-solid fa-chevron-right',
-    type: 'button',
-    onClick: () => console.log('ButtonLink Clicked'),
-  },
-  buttonEdit: {
-    size: 'normal',
-    fill: 'unstyled',
-    loading: false,
-    disabled: false,
-    icon: 'fa-solid fa-pencil',
-    type: 'button',
-    onClick: () => console.log('Button Clicked'),
-  },
-  checkbox: {
-    label: '',
-    size: 'md',
-    value: 'value',
-    name: 'priceLeft',
-    onCheck: state => console.log('priceLeft Checked: ' + state),
-  },
-  radio: {
-    size: 'md',
-    disabled: false,
-    label: '',
-    name: 'radioRight',
-    value: 'value',
-    error: false,
-    onCheck: () => {
-      console.log('Radio Checked');
-    },
-  },
-};