dgrcorrientes-modulos 1.0.0

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

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