@omniumretail/component-library 1.0.64 → 1.0.66

package/src/components/Table/Table.stories.tsx

@@ -1,221 +1,221 @@
-import { Meta, Story } from "@storybook/react";
-import { Table, TableCustomProps } from '.';
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
-export default {
-    title: 'Table',
-    component: Table,
-} as Meta;
-
-const Template: Story<TableCustomProps> = (args) => {
-    const { t } = useTranslation();
-    const [pageInfo, setPageInfo] = useState<any>({});
-    const [rowSelectionInfo, setRowSelectionInfo] = useState<any>({});
-    const [sortBy, setSortBy] = useState<string[]>(['id', 'desc']);
-
-    const handleSortByColumnChange = (sortState: any) => {
-        console.log('handleSortChange called with:', sortState);
-        // Do something with the new sort state
-        // For example, trigger an API call
-    };
-    
-    return <Table columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo} actionsArray={
-        [
-            { key: '1', label: `${t('actions.one')}`, onClick: () => {
-                console.log('onClick');
-            } },
-            { key: '2', label: `${t('actions.two')}` },
-            {
-                key: '3', label: 'label 3'
-            }
-        ]
-    } {...args}></Table>;
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-    selectPlaceholder: 'Order by',
-    rowKeyValue: 'mecanographicNumber',
-    dataSource: [
-        {
-            id: `1`,
-            name: `João Cachulo`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-        {
-            id: `2`,
-            name: `Filipe Martins`,
-            mecanographicNumber: "32",
-            store: `Levi's Sta Catarina`,
-            role: `Comercial`,
-            type: `Efetivo`
-        },
-        {
-            id: `3`,
-            name: `Anna Astori`,
-            mecanographicNumber: "3212",
-            store: `Levi's Sta Catarina`,
-            role: `Funcionário`,
-            type: `Efetivo`
-        },
-        {
-            id: `4`,
-            name: `Yield Ona`,
-            mecanographicNumber: "21232",
-            store: `Adidas Restaurantes`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-    ],
-    pagination: {
-        total: 24,
-        pageSize: 4
-    },
-    hiddenColumns: ['id'],
-    sortByColumns: true,
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-    dataSource: [
-        {
-            key: `1`,
-            name: `as John Brown`,
-            mecanographicNumber: 232,
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-        {
-            key: `2`,
-            name: `bv Mary Brown`,
-            mecanographicNumber: 32,
-            store: `Levi's Sta Catarina`,
-            role: `Comercial`,
-            type: `Efetivo`
-        },
-        {
-            key: `3`,
-            name: `as Anna Astori`,
-            mecanographicNumber: 3212,
-            store: `Levi's Sta Catarina`,
-            role: `Funcionário`,
-            type: `Efetivo`
-        },
-        {
-            key: `4`,
-            name: `bv Yield Ona`,
-            mecanographicNumber: 21232,
-            store: `Adidas Restaurantes`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-    ],
-    pagination: {
-        total: 4,
-        pageSize: 10
-    }
-};
-
-export const WithCheckbox = Template.bind({});
-WithCheckbox.args = {
-    dataSource: [
-        {
-            key: `1`,
-            name: `John Brown`,
-            mecanographicNumber: 232,
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-        {
-            key: `2`,
-            name: `Mary Brown`,
-            mecanographicNumber: 32,
-            store: `Levi's Sta Catarina`,
-            role: `Comercial`,
-            type: `Efetivo`
-        },
-        {
-            key: `3`,
-            name: `Anna Astori`,
-            mecanographicNumber: 3212,
-            store: `Levi's Sta Catarina`,
-            role: `Funcionário`,
-            type: `Efetivo`
-        },
-        {
-            key: `4`,
-            name: `Yield Ona`,
-            mecanographicNumber: 21232,
-            store: `Adidas Restaurantes`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-    ],
-};
-
-export const withActions = Template.bind({});
-withActions.args = {
-    fieldsToSort: ['store', 'mecanographicNumber'],
-    selectPlaceholder: 'Order by',
-    dataSource: [
-        {
-            key: `1`,
-            name: `John Brown`,
-            mecanographicNumber: "232",
-            store: `Levi's Sta Catarina`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-        {
-            key: `2`,
-            name: `Mary Brown`,
-            mecanographicNumber: "32",
-            store: `Levi's Sta Catarina`,
-            role: `Comercial`,
-            type: `Efetivo`
-        },
-        {
-            key: `3`,
-            name: `Anna Astori`,
-            mecanographicNumber: "3212",
-            store: `Levi's Sta Catarina`,
-            role: `Funcionário`,
-            type: `Efetivo`
-        },
-        {
-            key: `4`,
-            name: `Yield Ona`,
-            mecanographicNumber: "21232",
-            store: `Adidas Restaurantes`,
-            role: `Gerente`,
-            type: `Efetivo`
-        },
-    ],
-    pagination: {
-        total: 24,
-        pageSize: 4
-    },
-    rowSelection: {
-        type: 'checkbox',
-        selectedRowKeys: ['1']
-    }
-};
-
-export const NoData = Template.bind({});
-NoData.args = {
-    fieldsToSort: ['store', 'mecanographicNumber'],
-    selectPlaceholder: 'Order by',
-    rowKeyValue: 'mecanographicNumber',
-    dataSource: undefined,
-    pagination: {
-        total: 24,
-        pageSize: 4
-    },
-    hiddenColumns: ['id']
-};
+import { Meta, Story } from "@storybook/react";
+import { Table, TableCustomProps } from '.';
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export default {
+    title: 'Table',
+    component: Table,
+} as Meta;
+
+const Template: Story<TableCustomProps> = (args) => {
+    const { t } = useTranslation();
+    const [pageInfo, setPageInfo] = useState<any>({});
+    const [rowSelectionInfo, setRowSelectionInfo] = useState<any>({});
+    const [sortBy, setSortBy] = useState<string[]>(['id', 'desc']);
+
+    const handleSortByColumnChange = (sortState: any) => {
+        console.log('handleSortChange called with:', sortState);
+        // Do something with the new sort state
+        // For example, trigger an API call
+    };
+    
+    return <Table columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo} actionsArray={
+        [
+            { key: '1', label: `${t('actions.one')}`, onClick: () => {
+                console.log('onClick');
+            } },
+            { key: '2', label: `${t('actions.two')}` },
+            {
+                key: '3', label: 'label 3'
+            }
+        ]
+    } {...args}></Table>;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+    selectPlaceholder: 'Order by',
+    rowKeyValue: 'mecanographicNumber',
+    dataSource: [
+        {
+            id: `1`,
+            name: `João Cachulo`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+        {
+            id: `2`,
+            name: `Filipe Martins`,
+            mecanographicNumber: "32",
+            store: `Levi's Sta Catarina`,
+            role: `Comercial`,
+            type: `Efetivo`
+        },
+        {
+            id: `3`,
+            name: `Anna Astori`,
+            mecanographicNumber: "3212",
+            store: `Levi's Sta Catarina`,
+            role: `Funcionário`,
+            type: `Efetivo`
+        },
+        {
+            id: `4`,
+            name: `Yield Ona`,
+            mecanographicNumber: "21232",
+            store: `Adidas Restaurantes`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+    ],
+    pagination: {
+        total: 24,
+        pageSize: 4
+    },
+    hiddenColumns: ['id'],
+    sortByColumns: true,
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+    dataSource: [
+        {
+            key: `1`,
+            name: `as John Brown`,
+            mecanographicNumber: 232,
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+        {
+            key: `2`,
+            name: `bv Mary Brown`,
+            mecanographicNumber: 32,
+            store: `Levi's Sta Catarina`,
+            role: `Comercial`,
+            type: `Efetivo`
+        },
+        {
+            key: `3`,
+            name: `as Anna Astori`,
+            mecanographicNumber: 3212,
+            store: `Levi's Sta Catarina`,
+            role: `Funcionário`,
+            type: `Efetivo`
+        },
+        {
+            key: `4`,
+            name: `bv Yield Ona`,
+            mecanographicNumber: 21232,
+            store: `Adidas Restaurantes`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+    ],
+    pagination: {
+        total: 4,
+        pageSize: 10
+    }
+};
+
+export const WithCheckbox = Template.bind({});
+WithCheckbox.args = {
+    dataSource: [
+        {
+            key: `1`,
+            name: `John Brown`,
+            mecanographicNumber: 232,
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+        {
+            key: `2`,
+            name: `Mary Brown`,
+            mecanographicNumber: 32,
+            store: `Levi's Sta Catarina`,
+            role: `Comercial`,
+            type: `Efetivo`
+        },
+        {
+            key: `3`,
+            name: `Anna Astori`,
+            mecanographicNumber: 3212,
+            store: `Levi's Sta Catarina`,
+            role: `Funcionário`,
+            type: `Efetivo`
+        },
+        {
+            key: `4`,
+            name: `Yield Ona`,
+            mecanographicNumber: 21232,
+            store: `Adidas Restaurantes`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+    ],
+};
+
+export const withActions = Template.bind({});
+withActions.args = {
+    fieldsToSort: ['store', 'mecanographicNumber'],
+    selectPlaceholder: 'Order by',
+    dataSource: [
+        {
+            key: `1`,
+            name: `John Brown`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+        {
+            key: `2`,
+            name: `Mary Brown`,
+            mecanographicNumber: "32",
+            store: `Levi's Sta Catarina`,
+            role: `Comercial`,
+            type: `Efetivo`
+        },
+        {
+            key: `3`,
+            name: `Anna Astori`,
+            mecanographicNumber: "3212",
+            store: `Levi's Sta Catarina`,
+            role: `Funcionário`,
+            type: `Efetivo`
+        },
+        {
+            key: `4`,
+            name: `Yield Ona`,
+            mecanographicNumber: "21232",
+            store: `Adidas Restaurantes`,
+            role: `Gerente`,
+            type: `Efetivo`
+        },
+    ],
+    pagination: {
+        total: 24,
+        pageSize: 4
+    },
+    rowSelection: {
+        type: 'checkbox',
+        selectedRowKeys: ['1']
+    }
+};
+
+export const NoData = Template.bind({});
+NoData.args = {
+    fieldsToSort: ['store', 'mecanographicNumber'],
+    selectPlaceholder: 'Order by',
+    rowKeyValue: 'mecanographicNumber',
+    dataSource: undefined,
+    pagination: {
+        total: 24,
+        pageSize: 4
+    },
+    hiddenColumns: ['id']
+};