@omniumretail/component-library 1.1.8 → 1.1.9

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

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const ExportButton: Story<any>;

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

@@ -0,0 +1,9 @@
+interface TableExportButtonProps {
+    data: Record<string, any>[];
+    fileName: string;
+    buttonText: string;
+    customClass?: string;
+    columnTranslations: Record<string, string>;
+}
+export declare const TableExportButton: (props: TableExportButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -23,3 +23,4 @@ export * from './Upload';
 export * from './UserInfo';
 export * from './CategoryReadOnly';
 export * from './Notification';
+export * from './ExportTableData';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.1.08",
+  "version": "1.1.09",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",
@@ -63,7 +63,8 @@
     "terser-webpack-plugin": "^5.2.5",
     "typescript": "^4.9.3",
     "url-loader": "^4.1.1",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "xlsx": "^0.18.5"
   },
   "scripts": {
     "prepublish": "rm -rf ./dist && npm run build",

package/src/components/ExportTableData/ExportTableData.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { TableExportButton } from './index';
+
+export default {
+  title: 'TableExportButton',
+  component: TableExportButton,
+} as Meta;
+
+const columnTranslations = {
+  id: 'ID',
+  name: 'Nome',
+  age: 'Idade',
+  occupation: 'Ocupação'
+};
+
+const Template: Story<any> = (args) => <TableExportButton {...args} />;
+
+export const ExportButton = Template.bind({});
+ExportButton.args = {
+  data: [
+    {
+      id: 1,
+      name: 'John Doe',
+      age: 30,
+      occupation: 'Software Developer'
+    },
+    {
+      id: 2,
+      name: 'Jane Smith',
+      age: 28,
+      occupation: 'Data Scientist'
+    },
+    {
+      id: 3,
+      name: 'Michael Johnson',
+      age: 35,
+      occupation: 'Project Manager'
+    },
+  ],
+  fileName: 'table_data',
+  buttonText: 'exportar',
+  columnTranslations: columnTranslations
+};

package/src/components/ExportTableData/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import * as XLSX from 'xlsx';
+import { Button } from '../Button';
+
+interface TableExportButtonProps {
+    data: Record<string, any>[];
+    fileName: string;
+    buttonText: string;
+    customClass?: string;
+    columnTranslations: Record<string, string>;
+}
+
+export const TableExportButton = (props: TableExportButtonProps) => {
+    const exportToXLS = () => {
+        const wb = XLSX.utils.book_new();
+        const ws = XLSX.utils.json_to_sheet(props.data);
+
+        // Aplicar estilos às células do cabeçalho
+        const headerKeys = Object.keys(props.columnTranslations);
+        headerKeys.forEach((key, index) => {
+            const cellAddress = XLSX.utils.encode_cell({ c: index, r: 0 });
+            ws[cellAddress].v = props.columnTranslations[key]; // Substituir o valor pela tradução
+        });
+
+        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+        XLSX.writeFile(wb, `${props.fileName}.xlsx`);
+    };
+
+    return (
+        <Button onClick={exportToXLS} className={props.customClass}>
+            {props.buttonText}
+        </Button>
+    );
+};

package/src/components/index.tsx

@@ -23,3 +23,4 @@ export * from './Upload';
 export * from './UserInfo';
 export * from './CategoryReadOnly';
 export * from './Notification';
+export * from './ExportTableData'