@auth0/quantum-charts 1.0.2 → 1.0.4

package/chart-summary/data-table-chart.js

@@ -46,6 +46,7 @@ exports.DataTableChart = void 0;
 var lodash_1 = __importDefault(require("lodash"));
 var React = __importStar(require("react"));
 var date_fns_1 = require("date-fns");
+var downloadCsv_1 = require("../helpers/downloadCsv");
 var quantum_product_1 = require("@auth0/quantum-product");
 function DataTableChart(props) {
     var isOpen = props.isOpen, title = props.title, toggleIsOpen = props.toggleIsOpen, data = props.data;
@@ -53,46 +54,8 @@ function DataTableChart(props) {
     var groups = lodash_1.default.groupBy(data, 'group');
     var _a = __read(React.useState(Object.keys(groups)[0]), 2), selectedTab = _a[0], setSelectedTab = _a[1];
     var hasKey = data[0] && data[0].key !== undefined;
-    var downloadCSV = function (filename) {
-        if (filename === void 0) { filename = 'chart data'; }
-        var mappedData = data.map(function (row) {
-            if (row.date) {
-                row.date = (0, date_fns_1.format)(new Date(row.date), 'LLL d p');
-            }
-            return Object.values(row).map(function (column) { return "\"".concat(column === '–' ? '–' : column, "\""); });
-        });
-        mappedData.unshift(Object.keys(data[0]));
-        var content = '', csvData = '';
-        mappedData.forEach(function (d, i) {
-            csvData = d.join(',');
-            content += i < data.length ? csvData + '\n' : csvData;
-        });
-        var anchor = document.createElement('a');
-        var mimeType = 'text/csv;encoding:utf-8';
-        if (navigator['msSaveBlob']) {
-            // Internet Explorer 10
-            navigator['msSaveBlob'](new Blob([content], {
-                type: mimeType,
-            }), filename);
-        }
-        else if (URL && 'download' in anchor) {
-            // HTML5
-            var href = URL.createObjectURL(new Blob([content], {
-                type: mimeType,
-            }));
-            anchor.href = href;
-            anchor.setAttribute('download', filename);
-            document.body.appendChild(anchor);
-            anchor.click();
-            document.body.removeChild(anchor);
-            URL.revokeObjectURL(href);
-        }
-        else {
-            location.href = "data:application/octet-stream,".concat(encodeURIComponent(content));
-        }
-    };
     return (React.createElement(quantum_product_1.Dialog, { open: isOpen, fullWidth: true, title: title, onClose: toggleIsOpen, actions: React.createElement(React.Fragment, null,
-            React.createElement(quantum_product_1.Button, { color: "primary", variant: "contained", startIcon: React.createElement(quantum_product_1.DownloadIcon, null), onClick: function () { return downloadCSV(title); } }, "Download")) },
+            React.createElement(quantum_product_1.Button, { color: "primary", variant: "contained", startIcon: React.createElement(quantum_product_1.DownloadIcon, null), onClick: function () { return (0, downloadCsv_1.downloadCSV)(data, title); } }, "Download")) },
         React.createElement(quantum_product_1.Box, null,
             React.createElement(quantum_product_1.Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
                 React.createElement(quantum_product_1.TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&

package/chart-summary/index.js

@@ -66,6 +66,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartSummary = void 0;
 var React = __importStar(require("react"));
 var quantum_product_1 = require("@auth0/quantum-product");
+var downloadCsv_1 = require("../helpers/downloadCsv");
 var data_table_chart_1 = require("./data-table-chart");
 var Aggregate = (0, quantum_product_1.styled)('h4')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -87,11 +88,23 @@ function ChartSummary(props) {
             menuItems = [
                 {
                     type: 'item',
-                    endIcon: React.createElement(quantum_product_1.ListIcon, null),
+                    endIcon: React.createElement(quantum_product_1.TableIcon, null),
                     onClick: function () {
                         setIsOpen(true);
                     },
-                    title: 'View list',
+                    title: 'View table',
+                },
+                {
+                    type: 'divider',
+                },
+                {
+                    type: 'item',
+                    endIcon: React.createElement(quantum_product_1.DownloadCloudIcon, null),
+                    onClick: function () {
+                        setIsOpen(true);
+                        (0, downloadCsv_1.downloadCSV)(dataTable, title);
+                    },
+                    title: 'Download CSV',
                 },
             ];
         }
@@ -115,7 +128,7 @@ function ChartSummary(props) {
             return item;
         });
         return menuItems;
-    }, [dataTable, additionalMenuItems, menuProps]);
+    }, [dataTable, additionalMenuItems, menuProps, title]);
     return (React.createElement("div", null,
         React.createElement(quantum_product_1.DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
                 React.createElement(quantum_product_1.StackLayout, { gutter: 1 },

package/common/custom-tooltip.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
-var icon_1 = require("@auth0/quantum-product/src/icon");
 var quantum_product_1 = require("@auth0/quantum-product");
 var custom_color_status_dot_1 = __importDefault(require("./custom-color-status-dot"));
 var date_fns_1 = require("date-fns");
@@ -54,7 +53,7 @@ var CustomTooltip = function (props) {
                         React.createElement(quantum_product_1.Text, { color: "text.secondary", alignItems: 'end' }, x.payload[x.dataKey || '']),
                         x.payload['evaluated_metric'] === x.dataKey &&
                             x.payload['breachedPoint'] !== 'none' &&
-                            (x.payload['breachedPoint'] === 'alert' ? (React.createElement(icon_1.AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(icon_1.AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
+                            (x.payload['breachedPoint'] === 'alert' ? (React.createElement(quantum_product_1.AlertDiamondFilledIcon, { color: theme.tokens.color_fg_state_danger })) : (React.createElement(quantum_product_1.AlertTriangleFilledIcon, { color: theme.tokens.color_fg_state_caution })))));
                 })))));
     }
     return null;

package/esm/chart-summary/data-table-chart.js

@@ -17,6 +17,7 @@ var __read = (this && this.__read) || function (o, n) {
 import _ from 'lodash';
 import * as React from 'react';
 import { format } from 'date-fns';
+import { downloadCSV } from '../helpers/downloadCsv';
 import { Box, Button, DataTable, Dialog, DownloadIcon, Tab, TabList, TabPanel, Tabs } from '@auth0/quantum-product';
 export function DataTableChart(props) {
     var isOpen = props.isOpen, title = props.title, toggleIsOpen = props.toggleIsOpen, data = props.data;
@@ -24,46 +25,8 @@ export function DataTableChart(props) {
     var groups = _.groupBy(data, 'group');
     var _a = __read(React.useState(Object.keys(groups)[0]), 2), selectedTab = _a[0], setSelectedTab = _a[1];
     var hasKey = data[0] && data[0].key !== undefined;
-    var downloadCSV = function (filename) {
-        if (filename === void 0) { filename = 'chart data'; }
-        var mappedData = data.map(function (row) {
-            if (row.date) {
-                row.date = format(new Date(row.date), 'LLL d p');
-            }
-            return Object.values(row).map(function (column) { return "\"".concat(column === '–' ? '–' : column, "\""); });
-        });
-        mappedData.unshift(Object.keys(data[0]));
-        var content = '', csvData = '';
-        mappedData.forEach(function (d, i) {
-            csvData = d.join(',');
-            content += i < data.length ? csvData + '\n' : csvData;
-        });
-        var anchor = document.createElement('a');
-        var mimeType = 'text/csv;encoding:utf-8';
-        if (navigator['msSaveBlob']) {
-            // Internet Explorer 10
-            navigator['msSaveBlob'](new Blob([content], {
-                type: mimeType,
-            }), filename);
-        }
-        else if (URL && 'download' in anchor) {
-            // HTML5
-            var href = URL.createObjectURL(new Blob([content], {
-                type: mimeType,
-            }));
-            anchor.href = href;
-            anchor.setAttribute('download', filename);
-            document.body.appendChild(anchor);
-            anchor.click();
-            document.body.removeChild(anchor);
-            URL.revokeObjectURL(href);
-        }
-        else {
-            location.href = "data:application/octet-stream,".concat(encodeURIComponent(content));
-        }
-    };
     return (React.createElement(Dialog, { open: isOpen, fullWidth: true, title: title, onClose: toggleIsOpen, actions: React.createElement(React.Fragment, null,
-            React.createElement(Button, { color: "primary", variant: "contained", startIcon: React.createElement(DownloadIcon, null), onClick: function () { return downloadCSV(title); } }, "Download")) },
+            React.createElement(Button, { color: "primary", variant: "contained", startIcon: React.createElement(DownloadIcon, null), onClick: function () { return downloadCSV(data, title); } }, "Download")) },
         React.createElement(Box, null,
             React.createElement(Tabs, { baseId: 'example', onChange: setSelectedTab, value: selectedTab },
                 React.createElement(TabList, { classes: { indicator: 'chromatic-ignore' }, style: isDonut ? { display: 'none' } : { display: 'block' } }, !isDonut &&

package/esm/chart-summary/index.js

@@ -39,7 +39,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import * as React from 'react';
-import { Box, DescriptionBlock, StackLayout, StackLayoutItem, Tooltip, HelpCircleIcon, styled, IconButton, ListIcon, Text, useDropdownMenuState, DropdownMenu, MoreVerticalIcon, } from '@auth0/quantum-product';
+import { Box, DescriptionBlock, DownloadCloudIcon, StackLayout, StackLayoutItem, Tooltip, HelpCircleIcon, styled, IconButton, TableIcon, Text, useDropdownMenuState, DropdownMenu, MoreVerticalIcon, } from '@auth0/quantum-product';
+import { downloadCSV } from '../helpers/downloadCsv';
 import { DataTableChart } from './data-table-chart';
 var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", ";\n"], ["\n  font-weight: ", ";\n  font-size: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -61,11 +62,23 @@ export function ChartSummary(props) {
             menuItems = [
                 {
                     type: 'item',
-                    endIcon: React.createElement(ListIcon, null),
+                    endIcon: React.createElement(TableIcon, null),
                     onClick: function () {
                         setIsOpen(true);
                     },
-                    title: 'View list',
+                    title: 'View table',
+                },
+                {
+                    type: 'divider',
+                },
+                {
+                    type: 'item',
+                    endIcon: React.createElement(DownloadCloudIcon, null),
+                    onClick: function () {
+                        setIsOpen(true);
+                        downloadCSV(dataTable, title);
+                    },
+                    title: 'Download CSV',
                 },
             ];
         }
@@ -89,7 +102,7 @@ export function ChartSummary(props) {
             return item;
         });
         return menuItems;
-    }, [dataTable, additionalMenuItems, menuProps]);
+    }, [dataTable, additionalMenuItems, menuProps, title]);
     return (React.createElement("div", null,
         React.createElement(DescriptionBlock, { label: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
                 React.createElement(StackLayout, { gutter: 1 },

package/esm/common/custom-tooltip.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { AlertTriangleFilledIcon, AlertDiamondFilledIcon } from '@auth0/quantum-product/src/icon';
-import { Box, RowLayout, StackLayout, Text, useTheme } from '@auth0/quantum-product';
+import { Box, RowLayout, StackLayout, Text, useTheme, AlertTriangleFilledIcon, AlertDiamondFilledIcon, } from '@auth0/quantum-product';
 import StatusDot from './custom-color-status-dot';
 import { format } from 'date-fns';
 import { CustomTooltip as CustomTooltipStyled } from '../styles';

package/esm/helpers/downloadCsv.js

@@ -0,0 +1,39 @@
+import { format } from 'date-fns';
+export var downloadCSV = function (data, filename) {
+    if (filename === void 0) { filename = 'chart data'; }
+    var mappedData = data.map(function (row) {
+        if (row.date) {
+            row.date = format(new Date(row.date), 'LLL d p');
+        }
+        return Object.values(row).map(function (column) { return "\"".concat(column === '–' ? '–' : column, "\""); });
+    });
+    mappedData.unshift(Object.keys(data[0]));
+    var content = '', csvData = '';
+    mappedData.forEach(function (d, i) {
+        csvData = d.join(',');
+        content += i < data.length ? csvData + '\n' : csvData;
+    });
+    var anchor = document.createElement('a');
+    var mimeType = 'text/csv;encoding:utf-8';
+    if (navigator['msSaveBlob']) {
+        // Internet Explorer 10
+        navigator['msSaveBlob'](new Blob([content], {
+            type: mimeType,
+        }), filename);
+    }
+    else if (URL && 'download' in anchor) {
+        // HTML5
+        var href = URL.createObjectURL(new Blob([content], {
+            type: mimeType,
+        }));
+        anchor.href = href;
+        anchor.setAttribute('download', filename);
+        document.body.appendChild(anchor);
+        anchor.click();
+        document.body.removeChild(anchor);
+        URL.revokeObjectURL(href);
+    }
+    else {
+        location.href = "data:application/octet-stream,".concat(encodeURIComponent(content));
+    }
+};

package/esm/line-chart/index.js

@@ -28,13 +28,14 @@ var __read = (this && this.__read) || function (o, n) {
 import _ from 'lodash';
 import * as React from 'react';
 import { Area, CartesianGrid, ComposedChart, Legend, Line, ReferenceArea, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
-import { useTheme, Text, DropdownMenu, useDropdownMenuState, Button, StackLayout, Divider, ChevronDownIcon, AlertDiamondIcon, } from '@auth0/quantum-product';
+import { useTheme, Text, DropdownMenu, useDropdownMenuState, Button, StackLayout, Divider, ChevronDownIcon, AlertDiamondIcon, IconButton, TableIcon, } from '@auth0/quantum-product';
 import { getColorScale } from '../theme';
 import CustomActiveDot from './custom-active-dot';
 import CustomTooltip from '../common/custom-tooltip';
 import { ChartCard } from '../chart-card';
 import { tickFormatter } from '../common/chart';
 import { CustomLegend } from '../common/custom-legend';
+import { DataTableChart } from '../chart-summary/data-table-chart';
 export function LineChart(props) {
     var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, thresholds = _a.thresholds, breaches = _a.breaches;
     var theme = useTheme();
@@ -47,11 +48,15 @@ export function LineChart(props) {
     }, {}));
     var _f = __read(React.useState(initialState), 2), lineVisibility = _f[0], setLineVisibility = _f[1];
     var _g = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _g[0], setThreshold = _g[1];
+    var _h = __read(React.useState(false), 2), isOpen = _h[0], setIsOpen = _h[1];
     var handleLegendMouseEnter = function (e) {
         if (!lineVisibility[e.dataKey]) {
             setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
         }
     };
+    var toggleIsOpen = function () {
+        setIsOpen(function (prev) { return !prev; });
+    };
     var handleLegendMouseLeave = function () {
         setLineVisibility(__assign(__assign({}, lineVisibility), { hover: null }));
     };
@@ -125,8 +130,12 @@ export function LineChart(props) {
     var headerActionWithThresholdDropdown = (React.createElement(StackLayout, { gutter: 1 },
         React.createElement(Button, __assign({}, triggerProps, { startIcon: React.createElement(AlertDiamondIcon, null), endIcon: React.createElement(ChevronDownIcon, null), disabled: !threshold, variant: 'outlined', label: threshold ? threshold.threshold_label : 'No threshold' })),
         React.createElement(DropdownMenu, __assign({}, menuProps, { items: menuItems })),
-        headerAction && React.createElement(Divider, { orientation: "vertical" }),
-        headerAction));
+        React.createElement(Divider, { orientation: "vertical" }),
+        headerAction,
+        React.createElement(IconButton, { size: "small", label: "View table", onClick: function () {
+                setIsOpen(true);
+            } },
+            React.createElement(TableIcon, null))));
     return (React.createElement(React.Fragment, null,
         React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, additionalMenuItems: additionalMenuItems },
             React.createElement(ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
@@ -166,5 +175,6 @@ export function LineChart(props) {
                     height: '100%',
                     textAlign: 'center',
                 } },
-                React.createElement(Text, { variant: "subtitle1" }, "No data")))))));
+                React.createElement(Text, { variant: "subtitle1" }, "No data"))))),
+        data && data[0] && React.createElement(DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: data })));
 }

package/helpers/downloadCsv.d.ts

@@ -0,0 +1 @@
+export declare const downloadCSV: (data: any, filename?: string) => void;

package/helpers/downloadCsv.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.downloadCSV = void 0;
+var date_fns_1 = require("date-fns");
+var downloadCSV = function (data, filename) {
+    if (filename === void 0) { filename = 'chart data'; }
+    var mappedData = data.map(function (row) {
+        if (row.date) {
+            row.date = (0, date_fns_1.format)(new Date(row.date), 'LLL d p');
+        }
+        return Object.values(row).map(function (column) { return "\"".concat(column === '–' ? '–' : column, "\""); });
+    });
+    mappedData.unshift(Object.keys(data[0]));
+    var content = '', csvData = '';
+    mappedData.forEach(function (d, i) {
+        csvData = d.join(',');
+        content += i < data.length ? csvData + '\n' : csvData;
+    });
+    var anchor = document.createElement('a');
+    var mimeType = 'text/csv;encoding:utf-8';
+    if (navigator['msSaveBlob']) {
+        // Internet Explorer 10
+        navigator['msSaveBlob'](new Blob([content], {
+            type: mimeType,
+        }), filename);
+    }
+    else if (URL && 'download' in anchor) {
+        // HTML5
+        var href = URL.createObjectURL(new Blob([content], {
+            type: mimeType,
+        }));
+        anchor.href = href;
+        anchor.setAttribute('download', filename);
+        document.body.appendChild(anchor);
+        anchor.click();
+        document.body.removeChild(anchor);
+        URL.revokeObjectURL(href);
+    }
+    else {
+        location.href = "data:application/octet-stream,".concat(encodeURIComponent(content));
+    }
+};
+exports.downloadCSV = downloadCSV;

package/line-chart/index.js

@@ -64,6 +64,7 @@ var custom_tooltip_1 = __importDefault(require("../common/custom-tooltip"));
 var chart_card_1 = require("../chart-card");
 var chart_1 = require("../common/chart");
 var custom_legend_1 = require("../common/custom-legend");
+var data_table_chart_1 = require("../chart-summary/data-table-chart");
 function LineChart(props) {
     var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction, additionalMenuItems = _a.additionalMenuItems, thresholds = _a.thresholds, breaches = _a.breaches;
     var theme = (0, quantum_product_1.useTheme)();
@@ -76,11 +77,15 @@ function LineChart(props) {
     }, {}));
     var _f = __read(React.useState(initialState), 2), lineVisibility = _f[0], setLineVisibility = _f[1];
     var _g = __read(React.useState(thresholds === null || thresholds === void 0 ? void 0 : thresholds[0]), 2), threshold = _g[0], setThreshold = _g[1];
+    var _h = __read(React.useState(false), 2), isOpen = _h[0], setIsOpen = _h[1];
     var handleLegendMouseEnter = function (e) {
         if (!lineVisibility[e.dataKey]) {
             setLineVisibility(__assign(__assign({}, lineVisibility), { hover: e.dataKey }));
         }
     };
+    var toggleIsOpen = function () {
+        setIsOpen(function (prev) { return !prev; });
+    };
     var handleLegendMouseLeave = function () {
         setLineVisibility(__assign(__assign({}, lineVisibility), { hover: null }));
     };
@@ -154,8 +159,12 @@ function LineChart(props) {
     var headerActionWithThresholdDropdown = (React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
         React.createElement(quantum_product_1.Button, __assign({}, triggerProps, { startIcon: React.createElement(quantum_product_1.AlertDiamondIcon, null), endIcon: React.createElement(quantum_product_1.ChevronDownIcon, null), disabled: !threshold, variant: 'outlined', label: threshold ? threshold.threshold_label : 'No threshold' })),
         React.createElement(quantum_product_1.DropdownMenu, __assign({}, menuProps, { items: menuItems })),
-        headerAction && React.createElement(quantum_product_1.Divider, { orientation: "vertical" }),
-        headerAction));
+        React.createElement(quantum_product_1.Divider, { orientation: "vertical" }),
+        headerAction,
+        React.createElement(quantum_product_1.IconButton, { size: "small", label: "View table", onClick: function () {
+                setIsOpen(true);
+            } },
+            React.createElement(quantum_product_1.TableIcon, null))));
     return (React.createElement(React.Fragment, null,
         React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: (groups === null || groups === void 0 ? void 0 : groups.length) > 1 ? headerActionWithThresholdDropdown : headerAction, additionalMenuItems: additionalMenuItems },
             React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(recharts_1.ComposedChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
@@ -195,6 +204,7 @@ function LineChart(props) {
                     height: '100%',
                     textAlign: 'center',
                 } },
-                React.createElement(quantum_product_1.Text, { variant: "subtitle1" }, "No data")))))));
+                React.createElement(quantum_product_1.Text, { variant: "subtitle1" }, "No data"))))),
+        data && data[0] && React.createElement(data_table_chart_1.DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: data })));
 }
 exports.LineChart = LineChart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-charts",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",