@omniumretail/component-library 1.1.19 → 1.1.20

package/dist/main.css

@@ -26,3 +26,4 @@
 .qaO99d3JMWSM8DLS1LvS{display:flex;flex-direction:column;background-color:var(--white-color);padding:24px;color:var(--color-black);width:150px;word-wrap:break-word}.G3bzjyAQXu8uaFGhNMLG{width:150px}.Zv6hI_F5yvuBDnPK8u2C{color:var(--color-blue) !important;font-size:var(--font-size-body-5);font-weight:var(--font-weight-bold)}.JxTKMPM3nEvZB42uuV1e{font-weight:var(--font-weight-semibold);font-size:var(--font-size-label);margin-top:0px}.JKKhO8apIWdMp0JLU0iD{font-weight:var(--font-weight-bold);font-size:var(--font-size-body-base)}.GqgjW40ocDFW4xi4Mszm{font-weight:var(--font-weight-regular);font-size:var(--font-size-label)}
 .zsvRMmfrmqBj9iRjtQpO{display:grid;grid-template-columns:300px auto;gap:16px;height:100%}.pb4QP8qfuDG2T6wfXkUC{overflow:auto;background:#ebeced}.gP05vt1R1r67eWteznvr{overflow:auto;background:var(--color-white)}.pb4QP8qfuDG2T6wfXkUC,.gP05vt1R1r67eWteznvr{padding:20px}.btRPAI8631Q2XXYP6nZ7{font-size:var(--font-size-body-4);color:var(--color-blue);margin-bottom:36px;font-weight:var(--font-weight-semibold);text-transform:uppercase}.SbA9dHRh1JSG4xp1Aqie{padding-bottom:15px;font-weight:var(--font-weight-bold);font-size:var(--font-size-body-4)}.ZsQJQ__gMgYGYau95r8U{cursor:pointer}.PPF4FGgo1aDsBm13cNj8{padding-left:16px}.PPF4FGgo1aDsBm13cNj8 .SbA9dHRh1JSG4xp1Aqie{font-weight:var(--font-weight-semibold)}.PPF4FGgo1aDsBm13cNj8 .QEsWraNRLBQux4k4KNAE .PPF4FGgo1aDsBm13cNj8 .SbA9dHRh1JSG4xp1Aqie{font-weight:var(--font-weight-light)}.QEsWraNRLBQux4k4KNAE{display:block}.VQ09MnwMcIzpW1iabb4A{color:var(--color-orange)}.cmcMqdZJEUjlu34ag1Md{margin-bottom:32px;display:flex;justify-content:space-between;align-items:center}.i_U4mKg0Sxl4EvVzgv0L{font-size:var(--font-size-body-4);color:var(--color-blue);font-weight:var(--font-weight-semibold);margin-bottom:8px}.Tnut0v2OeSU0e7XwrCXI{font-size:var(--font-size-body-3);font-weight:var(--font-weight-light);color:var(--color-black)}.W2hZQFsItdqKPcBu4UrA{display:flex;flex-direction:row;gap:36px;margin-bottom:36px;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);padding-bottom:4px}.tIVLagS5XxibJ4PBCNpp{flex-direction:column;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);margin-bottom:24px}.tIVLagS5XxibJ4PBCNpp .RenA6EOwu2sFJGoqYbYz{width:100%;border-bottom:none}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9{width:100%;height:auto}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9 .ant-input{min-height:140px}.tIVLagS5XxibJ4PBCNpp .N0_FbFF8bLYtEcr8_2B9 .ant-form-item{margin-bottom:16px}.RenA6EOwu2sFJGoqYbYz{width:calc(100% - 149px);display:flex;align-items:center}.N0_FbFF8bLYtEcr8_2B9{width:130px;min-width:130px;align-self:flex-end;display:flex;justify-content:space-between;padding-right:15px}.GaBbmrXh2G03hz6ha5vB{display:none}.QYrBVtDmfSFNxJFztXVl{min-width:130px;align-self:flex-end;display:flex;justify-content:space-between;gap:34px}.V_qOYQwuQ9mXa8aniYgl{font-size:var(--font-size-body-3);font-weight:var(--font-weight-medium)}.pvSzNydRHp3dkh3WrOeA{font-weight:var(--font-weight-light);margin-bottom:4px}.Ehgx39o1k8blh7IDJ2mg{padding:6px;font-size:var(--font-size-body-4);font-weight:var(--font-weight-medium);color:var(--color-white);border-radius:5px;display:inline-flex;letter-spacing:3px}.ifR0bkZtK7yVHD6YZ_Zz{background-color:rgba(217,217,217,.5);border-radius:5px;padding:8px 15px;display:flex;flex-direction:row;gap:50px;align-items:center}.NL5HeemkTIg0oPHDXVtO{font-size:var(--font-size-body-3);font-weight:var(--font-weight-medium);color:var(--color-black)}.koYqEMOf6wzxWpwvrFkL{display:flex;justify-content:space-between;margin-bottom:12px;margin-left:16px;gap:40px;width:100%}
 .vhUOPe6KeB6afW8Pj3M1{font-size:32px}
+.nkyL3EtE9Zsnc5VOW43L{display:flex;flex-wrap:wrap;flex-direction:column}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{background-color:rgba(0,0,0,0);border:0px;color:var(--color-blue)}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th:before{display:none}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper{margin-bottom:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-cell{word-break:break-word}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr{cursor:pointer}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:last-child>td{border-bottom:1px solid var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:first-child>td{border-top:1px solid var(--color-blue) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:hover td{border-radius:0 !important;border-bottom-color:var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-space{align-self:flex-end}.nkyL3EtE9Zsnc5VOW43L .ant-select-selection-placeholder{color:var(--color-black)}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:hover,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:hover{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:calc(100% - 200px);margin-left:auto !important}.nkyL3EtE9Zsnc5VOW43L button[type=button].ant-pagination-item-link{margin-top:0 !important}.nkyL3EtE9Zsnc5VOW43L button[type=button]{margin-top:-50px}@media screen and (max-width: 1024px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:8px}}@media screen and (max-width: 767px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-content table{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-content{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-title,.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-header{word-break:break-all}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter{margin-inline-start:0px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-up{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-down{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:unset}}

package/dist/types/components/ResponsiveTable/ResponsiveTable.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, Story } from "@storybook/react";
+import { ResponsiveTableCustomProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<ResponsiveTableCustomProps>;
+export declare const Secondary: Story<ResponsiveTableCustomProps>;
+export declare const WithCheckbox: Story<ResponsiveTableCustomProps>;
+export declare const withActions: Story<ResponsiveTableCustomProps>;
+export declare const NoData: Story<ResponsiveTableCustomProps>;

package/dist/types/components/ResponsiveTable/index.d.ts

@@ -0,0 +1,45 @@
+import { TableProps } from 'antd';
+export interface FilterTableOptions {
+    value: string;
+    label: string;
+    direction: string;
+}
+export interface TableActions {
+    key: string;
+    label: string;
+}
+export declare enum sortByOption {
+    asc = "asc",
+    desc = "desc"
+}
+export interface ResponsiveTableCustomProps extends TableProps<any> {
+    fieldsToSort?: any[];
+    selectPlaceholder?: string;
+    onSort?: (field: any, sortByOption: any) => void;
+    sortInfo?: any;
+    paginationInfo?: any;
+    headingTranslationsKey?: string;
+    actionsArray?: any;
+    rowSelectionInfo?: any;
+    rowKeyValue?: string;
+    hiddenColumns?: string[];
+    rowSelection?: any;
+    onSelectAllButtonClick?: () => void;
+    AllItemsShowing?: boolean;
+    selectAllStatus?: any;
+    isTableDataRefreshed?: any;
+    tableLoading?: any;
+    tableMaxHeight?: any;
+    columnsSortChange?: any;
+    sortByColumns?: boolean;
+    columnsToSort?: string[];
+    fixedColumns?: {
+        dataIndex: string;
+        side: 'left' | 'right';
+    }[];
+    customColumnWidths?: {
+        columnName: string;
+        width: string;
+    }[];
+}
+export declare const ResponsiveTable: (props: ResponsiveTableCustomProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/index.d.ts

@@ -25,3 +25,4 @@ export * from './CategoryReadOnly';
 export * from './Notification';
 export * from './ExportTableData';
 export * from './DropdownButton';
+export * from './ResponsiveTable';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.1.19",
+  "version": "1.1.20",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/ResponsiveTable/ResponsiveTable.stories.tsx

@@ -0,0 +1,337 @@
+import { Meta, Story } from "@storybook/react";
+import { ResponsiveTable, ResponsiveTableCustomProps } from '.';
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export default {
+    title: 'ResponsiveTable',
+    component: ResponsiveTable,
+} as Meta;
+
+const Template: Story<ResponsiveTableCustomProps> = (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 <ResponsiveTable scroll={{y: 1000, x: 3000}}   fixedColumns={[
+      { dataIndex: 'name', side: 'left' },
+      { dataIndex: 'mecanographicNumber', side: 'left' },
+    ]} customColumnWidths={[{columnName: 'name', width: "2%"}]} 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}></ResponsiveTable>;
+};
+
+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`
+          },
+          {
+            id: `5`,
+            name: `João Cachulo`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+          },
+          {
+            id: `6`,
+            name: `Filipe Martins`,
+            mecanographicNumber: "32",
+            store: `Levi's Sta Catarina`,
+            role: `Comercial`,
+            type: `Efetivo`
+          },
+          {
+            id: `7`,
+            name: `Anna Astori`,
+            mecanographicNumber: "3212",
+            store: `Levi's Sta Catarina`,
+            role: `Funcionário`,
+            type: `Efetivo`
+          },
+          {
+            id: `8`,
+            name: `Yield Ona`,
+            mecanographicNumber: "21232",
+            store: `Adidas Restaurantes`,
+            role: `Gerente`,
+            type: `Efetivo`
+          },
+          {
+            id: `9`,
+            name: `João Cachulo`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+          },
+          {
+            id: `10`,
+            name: `Filipe Martins`,
+            mecanographicNumber: "32",
+            store: `Levi's Sta Catarina`,
+            role: `Comercial`,
+            type: `Efetivo`
+          },
+          {
+            id: `11`,
+            name: `Anna Astori`,
+            mecanographicNumber: "3212",
+            store: `Levi's Sta Catarina`,
+            role: `Funcionário`,
+            type: `Efetivo`
+          },
+          {
+            id: `12`,
+            name: `Yield Ona`,
+            mecanographicNumber: "21232",
+            store: `Adidas Restaurantes`,
+            role: `Gerente`,
+            type: `Efetivo`
+          },
+          {
+            id: `13`,
+            name: `João Cachulo`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+          },
+          {
+            id: `14`,
+            name: `João Cachulo`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+          },
+          {
+            id: `15`,
+            name: `João Cachulo`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+          },
+          {
+            id: `16`,
+            name: `João Cachulo`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+          },
+          {
+            id: `17`,
+            name: `João Cachulo`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+          },
+          {
+            id: `18`,
+            name: `João Cachulo`,
+            mecanographicNumber: "232",
+            store: `Levi's Sta Catarina`,
+            role: `Gerente`,
+            type: `Efetivo`
+          },
+    ],
+    pagination: {
+        total: 24,
+        pageSize: 20
+    },
+    hiddenColumns: ['id'],
+    sortByColumns: true,
+    columnsToSort: ["name", "mecanographicNumber"]
+};
+
+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']
+};