fuse-importer 0.0.8-testing → 0.0.9-testing

package/lib/esm/common/Table/index.js

@@ -0,0 +1,140 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { DndContext, useSensors, useSensor, PointerSensor, KeyboardSensor, closestCenter, } from "@dnd-kit/core";
+import { restrictToVerticalAxis, restrictToWindowEdges, } from "@dnd-kit/modifiers";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { Div } from "../../styled/utils";
+import { Pagination } from "./Pagination";
+import { useTableContext } from "./TableDataProvider";
+import { TableView as TableViewBase } from "./TableView";
+import { useReorderRows } from "./useReorderRows";
+import { addToast } from "../../common/Toast";
+var TableContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow-x: auto;\n  width: calc(100% + 2px);\n  ", ";\n"], ["\n  overflow-x: auto;\n  width: calc(100% + 2px);\n  ", ";\n"])), function (p) { return p.theme.css.scrollbarDark; });
+var TableWrapper = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 1000px;\n  border: solid 1px ", ";\n"], ["\n  min-width: 1000px;\n  border: solid 1px ", ";\n"])), function (p) { return p.theme.colors.gray300; });
+var TableView = styled(TableViewBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return p.withPagination && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border-radius: 0px;\n    "], ["\n      border-radius: 0px;\n    "])));
+});
+var Table = function (_a) {
+    var columns = _a.columns, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.blankState, blankState = _c === void 0 ? null : _c, templateSlug = _a.templateSlug, _d = _a.isDraggable, isDraggable = _d === void 0 ? false : _d, props = __rest(_a, ["columns", "onRowClick", "blankState", "templateSlug", "isDraggable"]);
+    var _e = useTableContext(), data = _e.data, isLoading = _e.isLoading, sortBy = _e.sortBy, setSortBy = _e.setSortBy, totalPages = _e.totalPages;
+    var reorderRows = useReorderRows(templateSlug).reorderRows;
+    var withPagination = data.length > 0 && totalPages > 1;
+    var sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    var paginationUI = (_jsx(_Fragment, { children: withPagination && (_jsx(Div, __assign({ dflex: true, justifyCenter: true, pb: 50 }, { children: _jsx(Pagination, {}) }))) }));
+    var handleDragEnd = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var active, over, overIndex, overIndexIsFalsyButNotZero, error_1;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    active = event.active, over = event.over;
+                    overIndex = (_c = (_b = (_a = over === null || over === void 0 ? void 0 : over.data) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.sortable) === null || _c === void 0 ? void 0 : _c.index;
+                    overIndexIsFalsyButNotZero = !overIndex && overIndex !== 0;
+                    if (!(active === null || active === void 0 ? void 0 : active.id) || overIndexIsFalsyButNotZero || active.id === over.id) {
+                        return [2 /*return*/];
+                    }
+                    _d.label = 1;
+                case 1:
+                    _d.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, reorderRows(active.id, overIndex + 1)];
+                case 2:
+                    _d.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _d.sent();
+                    addToast("Failed to reorder rows", "error");
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var dndContextValues = {
+        sensors: isDraggable ? sensors : undefined,
+        collisionDetection: isDraggable ? closestCenter : undefined,
+        onDragEnd: isDraggable ? handleDragEnd : undefined,
+        modifiers: isDraggable
+            ? [restrictToVerticalAxis, restrictToWindowEdges]
+            : undefined,
+    };
+    var Container = data.length > 0 ? TableContainer : Div;
+    var Wrapper = data.length > 0 ? TableWrapper : Div;
+    return (_jsx(Container, { children: _jsx(Wrapper, { children: _jsxs(Div, __assign({}, props, { children: [data.length || isLoading ? (_jsx(DndContext, __assign({ sensors: dndContextValues.sensors, collisionDetection: dndContextValues.collisionDetection, onDragEnd: dndContextValues.onDragEnd, modifiers: dndContextValues.modifiers }, { children: _jsx(TableView, __assign({ pageSize: data.length, withPagination: withPagination, isDraggable: isDraggable }, {
+                            isLoading: isLoading,
+                            data: data,
+                            columns: columns,
+                            sortBy: sortBy,
+                            setSortBy: setSortBy,
+                            onRowClick: onRowClick,
+                        })) }))) : (blankState), paginationUI] })) }) }));
+};
+export { Table };
+export * from "./TableDataProvider";
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/esm/common/Table/useReorderRows.js

@@ -0,0 +1,83 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { addToast } from "..";
+import { api } from "../../api";
+import { Div } from "../../styled/utils";
+import { useTableContext } from "./TableDataProvider";
+export var useReorderRows = function (templateSlug, customMessage) {
+    var getData = useTableContext().getData;
+    var reorderRows = function (columnId, position) { return __awaiter(void 0, void 0, void 0, function () {
+        var apiUrl, defaultMessage, confirmationMessage, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    apiUrl = "/api/v1/templates/".concat(templateSlug, "/columns/").concat(columnId);
+                    defaultMessage = (_jsx(Div, __assign({ alignCenter: true }, { children: _jsx(Div, { children: "Columns reordered successfully" }) })));
+                    confirmationMessage = (_jsx(Div, __assign({ spaceBetween: true, alignCenter: true }, { children: customMessage || defaultMessage })));
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, api.patch(apiUrl, {
+                            position: position,
+                        })];
+                case 2:
+                    _a.sent();
+                    addToast(confirmationMessage, "success");
+                    getData();
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    addToast("Failed to reorder rows", "error");
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return { reorderRows: reorderRows };
+};

package/lib/esm/common/Toast.js

@@ -0,0 +1,69 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import toast, { ToastBar, Toaster, } from "react-hot-toast";
+import styled from "styled-components";
+import { defaultCheckIcon, greenCheckIcon, redXIcon } from "./icons";
+import { colors } from "../styled/theme/colorPalette";
+import { Div } from "../styled/utils";
+var defaultDuration = 5000;
+var defaultPosition = "bottom-right";
+var toastBorderRadius = 4;
+var toastMaxWidth = "85%";
+export var addToast = function (msg, type, toastOptions) {
+    if (type === void 0) { type = "blank"; }
+    if (toastOptions === void 0) { toastOptions = {}; }
+    var _toastOptions = __assign({ duration: defaultDuration, position: defaultPosition }, toastOptions);
+    var toastFn = type === "blank" ? toast : toast[type];
+    toastFn(msg, _toastOptions);
+};
+var toastContainerCss = {
+    padding: 0,
+    marginRight: 72,
+    borderRadius: toastBorderRadius,
+    boxShadow: "none",
+    maxWidth: toastMaxWidth,
+};
+var toastTypeStyles = {
+    success: {
+        backgroundColor: colors.blue50,
+        color: colors.text,
+        icon: greenCheckIcon,
+    },
+    error: {
+        color: colors.red800,
+        backgroundColor: colors.red100,
+        icon: redXIcon,
+    },
+    blank: {
+        backgroundColor: colors.white,
+        color: colors.text,
+        icon: defaultCheckIcon,
+    },
+};
+var ToastWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px;\n  box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.1);\n  border-radius: ", "px;\n  ", ";\n"], ["\n  padding: 10px;\n  box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.1);\n  border-radius: ", "px;\n  ", ";\n"])), toastBorderRadius, function (p) { return p.theme.css.alignCenter; });
+var Toast = function () {
+    return (_jsx(Toaster, __assign({ toastOptions: {
+            style: toastContainerCss,
+        } }, { children: function (t) { return (_jsx(ToastBar, __assign({ toast: t }, { children: function (_a) {
+                var message = _a.message, hotToastIcon = _a.icon;
+                var _b = toastTypeStyles[t.type] || {}, icon = _b.icon, color = _b.color, backgroundColor = _b.backgroundColor;
+                return (_jsxs(ToastWrapper, __assign({ c: color, bg: backgroundColor }, { children: [_jsx(Div, __assign({ alignCenter: true }, { children: icon || hotToastIcon })), _jsx(Div, __assign({ alignCenter: true }, { children: message })), _jsx(Div, __assign({ p: 5, clickable: true, onClick: function () { return toast.dismiss(t.id); } }, { children: closeIcon }))] })));
+            } }))); } })));
+};
+export { Toast };
+var closeIcon = (_jsxs("svg", __assign({ width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M2.5 2.5L7.82258 7.82258", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2.5 7.82251L7.82258 2.49993", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+var templateObject_1;

package/lib/esm/common/TooltipProvider.js

@@ -0,0 +1,57 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { usePopper } from "react-popper";
+import styled from "styled-components";
+import { Div } from "../styled/utils";
+export var TooltipContent = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n"], ["\n  ", ";\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n  padding: 10px;\n  pointer-events: none;\n  z-index: 1000;\n"])), function (p) { return p.theme.css.body4; }, function (p) { return p.theme.colors.white; }, function (p) { return p.theme.colors.black; });
+export var TooltipProvider = function (_a) {
+    var tooltip = _a.tooltip, children = _a.children, tooltipMaxWidth = _a.tooltipMaxWidth, tooltipMinWidth = _a.tooltipMinWidth, _b = _a.placement, placement = _b === void 0 ? "top-start" : _b, _c = _a.flip, flip = _c === void 0 ? true : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isOpen, isOpen = _e === void 0 ? false : _e, _f = _a.offset, offset = _f === void 0 ? [0, 4] : _f, props = __rest(_a, ["tooltip", "children", "tooltipMaxWidth", "tooltipMinWidth", "placement", "flip", "isDisabled", "isOpen", "offset"]);
+    var _g = useState(false), isDisplayingTooltip = _g[0], setIsDisplayingTooltip = _g[1];
+    var _h = useState(null), referenceElement = _h[0], setReferenceElement = _h[1];
+    var _j = useState(null), popperElement = _j[0], setPopperElement = _j[1];
+    var options = useMemo(function () { return ({
+        placement: placement,
+        modifiers: [
+            {
+                name: "offset",
+                options: {
+                    offset: offset,
+                },
+            },
+            {
+                name: "flip",
+                enabled: flip,
+            },
+        ],
+    }); }, [placement, offset]);
+    var _k = usePopper(referenceElement, popperElement, options), styles = _k.styles, attributes = _k.attributes;
+    var showTooltip = isOpen || (isDisplayingTooltip && !!tooltip);
+    return (_jsxs(Div, __assign({ dim: "100%", ref: setReferenceElement, onMouseOver: function () { return isDisabled || setIsDisplayingTooltip(true); }, onMouseOut: function () { return isDisabled || setIsDisplayingTooltip(false); } }, props, { children: [children, showTooltip && (_jsx(TooltipContent, __assign({ ref: setPopperElement, style: styles.popper, maxw: tooltipMaxWidth, minw: tooltipMinWidth }, attributes.popper, { children: tooltip })))] })));
+};
+var templateObject_1;

package/lib/esm/common/buttons.js

@@ -0,0 +1,97 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { get } from "lodash";
+import styled, { css } from "styled-components";
+import { Div, HTMLButton } from "../styled/utils";
+var types = ["primary", "secondary", "tertiary", "link"];
+var getBgColor = function (props) {
+    return get(props, "backgroundColor", get(props.theme, "colors.pink500"));
+};
+var getBorderColor = function (props) {
+    return get(props, "backgroundColor", get(props.theme, "colors.pink700"));
+};
+var getSvgFillColorForNormalState = function (props) {
+    return get(props, "svgNormalFillColorOverride", get(props.theme, "colors.black"));
+};
+var getSvgFillColorForActiveState = function (props) {
+    return get(props, "svgActiveFillColorOverride", get(props.theme, "colors.white"));
+};
+var getSvgFillColorForDisabledState = function (props) {
+    return get(props, "svgDisabledFillColorOverride", get(props.theme, "colors.gray390"));
+};
+var getSvgStrokeColorForNormalState = function (props) {
+    return get(props, "svgNormalStrokeColorOverride", get(props.theme, "colors.black"));
+};
+var getSvgStrokeColorForActiveState = function (props) {
+    return get(props, "svgActiveStrokeColorOverride", get(props.theme, "colors.white"));
+};
+var getSvgStrokeColorForDisabledState = function (props) {
+    return get(props, "svgDisabledStrokeColorOverride", get(props.theme, "colors.black"));
+};
+var withoutBrandingCSS = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: underline;\n"], ["\n  text-decoration: underline;\n"])));
+var withBrandingCSS = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  :hover {\n    background: transparent;\n    text-decoration: underline;\n  }\n"], ["\n  :hover {\n    background: transparent;\n    text-decoration: underline;\n  }\n"])));
+var styles = {
+    primary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n\n    border: solid 4px ", ";\n    box-sizing: border-box;\n\n    :hover {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    :active {\n      background: ", ";\n      border: 4px solid ", ";\n    }\n    :focus {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    ", "\n  "], ["\n    color: ", ";\n    background: ", ";\n\n    border: solid 4px ", ";\n    box-sizing: border-box;\n\n    :hover {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    :active {\n      background: ", ";\n      border: 4px solid ", ";\n    }\n    :focus {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    ", "\n  "])), function (props) { return props.theme.colors.white; }, getBgColor, getBgColor, getBgColor, getBgColor, getBgColor, getBorderColor, getBgColor, getBgColor, function (props) {
+        return props.isDisabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        background: ", " !important;\n        opacity: 0.4;\n        box-shadow: none !important;\n        border: none !important;\n        cursor: not-allowed !important;\n      "], ["\n        background: ", " !important;\n        opacity: 0.4;\n        box-shadow: none !important;\n        border: none !important;\n        cursor: not-allowed !important;\n      "])), getBgColor);
+    }),
+    secondary: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background: ", ";\n    box-sizing: border-box;\n    border: solid 1px ", ";\n    color: ", ";\n    & > svg {\n      & > path {\n        fill: ", ";\n        stroke: ", ";\n      }\n    }\n    :active {\n      border: 1px solid ", ";\n      background: ", ";\n      color: ", ";\n      & > svg {\n        & > path {\n          fill: ", ";\n          stroke: ", ";\n        }\n      }\n    }\n    :focus {\n      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);\n    }\n    ", "\n  "], ["\n    background: ", ";\n    box-sizing: border-box;\n    border: solid 1px ", ";\n    color: ", ";\n    & > svg {\n      & > path {\n        fill: ", ";\n        stroke: ", ";\n      }\n    }\n    :active {\n      border: 1px solid ", ";\n      background: ", ";\n      color: ", ";\n      & > svg {\n        & > path {\n          fill: ", ";\n          stroke: ", ";\n        }\n      }\n    }\n    :focus {\n      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);\n    }\n    ", "\n  "])), function (props) { return props.theme.colors.white; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, getSvgFillColorForNormalState, getSvgStrokeColorForNormalState, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }, getSvgFillColorForActiveState, getSvgStrokeColorForActiveState, function (props) {
+        return props.isDisabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        border: 2px solid ", ";\n        color: ", ";\n        & > svg {\n          & > path {\n            fill: ", ";\n            stroke: ", ";\n          }\n        }\n      "], ["\n        border: 2px solid ", ";\n        color: ", ";\n        & > svg {\n          & > path {\n            fill: ", ";\n            stroke: ", ";\n          }\n        }\n      "])), function (props) { return props.theme.colors.gray390; }, function (props) { return props.theme.colors.gray390; }, getSvgFillColorForDisabledState, getSvgStrokeColorForDisabledState);
+    }),
+    tertiary: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background: transparent;\n    border: solid 1px transparent;\n    color: ", ";\n    :hover {\n      background: ", ";\n    }\n    :active {\n      background: ", ";\n      color: ", ";\n    }\n    ", "\n  "], ["\n    background: transparent;\n    border: solid 1px transparent;\n    color: ", ";\n    :hover {\n      background: ", ";\n    }\n    :active {\n      background: ", ";\n      color: ", ";\n    }\n    ", "\n  "])), function (props) { return props.theme.colors.text; }, function (props) { return props.theme.colors.white50; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }, function (props) {
+        return props.isDisabled && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), function (props) { return props.theme.colors.gray300; });
+    }),
+    link: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    background: transparent;\n    border: solid 1px transparent;\n    color: ", ";\n\n    :hover {\n      background: ", ";\n    }\n\n    ", "\n\n    ", "\n\n    :active {\n      background: ", ";\n      color: ", ";\n    }\n  "], ["\n    background: transparent;\n    border: solid 1px transparent;\n    color: ", ";\n\n    :hover {\n      background: ", ";\n    }\n\n    ", "\n\n    ", "\n\n    :active {\n      background: ", ";\n      color: ", ";\n    }\n  "])), function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white50; }, function (props) {
+        return props.isDisabled && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), function (props) { return props.theme.colors.gray300; });
+    }, function (_a) {
+        var theme = _a.theme;
+        return theme.colors.black === "black"
+            ? withoutBrandingCSS
+            : withBrandingCSS;
+    }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }),
+};
+var commonButtonStyle = css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  padding: 12px 24px;\n  user-select: none;\n  width: fit-content;\n\n  ", "\n\n  border: solid 1px black;\n  border-radius: 4px;\n\n  font-family: DM Sans;\n\n  :focus {\n    outline: none;\n  }\n  :hover {\n    cursor: pointer;\n  }\n\n  ", "\n  ", ";\n\n  ", ";\n"], ["\n  padding: 12px 24px;\n  user-select: none;\n  width: fit-content;\n\n  ", "\n\n  border: solid 1px black;\n  border-radius: 4px;\n\n  font-family: DM Sans;\n\n  :focus {\n    outline: none;\n  }\n  :hover {\n    cursor: pointer;\n  }\n\n  ", "\n  ", ";\n\n  ", ";\n"])), function (props) {
+    return props.isSmall && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: 6px 20px;\n    "], ["\n      padding: 6px 20px;\n    "])));
+}, function (props) {
+    return props.isDisabled && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+}, function (props) {
+    var c = props.theme.css;
+    return [c.centered, c.buttonText];
+}, function (props) { return styles[props.variant || "primary"]; });
+export var ButtonWrapper = styled(Div)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), commonButtonStyle);
+export var ButtonElementWrapper = styled(HTMLButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), commonButtonStyle);
+export var Button = function (_a) {
+    var _b = _a.onClick, onClick = _b === void 0 ? null : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.variant, variant = _d === void 0 ? "primary" : _d, _e = _a.isSmall, isSmall = _e === void 0 ? false : _e, children = _a.children, _f = _a.isButtonElement, isButtonElement = _f === void 0 ? false : _f, props = __rest(_a, ["onClick", "isDisabled", "variant", "isSmall", "children", "isButtonElement"]);
+    return (_jsx(_Fragment, { children: isButtonElement ? (_jsx(ButtonElementWrapper, __assign({ isSmall: isSmall, isDisabled: isDisabled, disabled: isDisabled, variant: variant, type: "submit" }, props, { children: children }))) : (_jsx(ButtonWrapper, __assign({ role: "button", w: "fit-content", p: 12, isSmall: isSmall, onClick: isDisabled ? null : onClick, onKeyDown: function (_a) {
+                var code = _a.code;
+                if ((code === "Space" || (code === "Enter" && onClick)) &&
+                    !isDisabled) {
+                    onClick();
+                }
+            }, tabIndex: 0 }, __assign({ variant: variant, isDisabled: isDisabled, onClick: onClick, disabled: isDisabled }, props), { children: _jsx(_Fragment, { children: children }) }))) }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

package/lib/esm/common/columnsTransformations.js

@@ -0,0 +1,94 @@
+var commonDateAndTimeTransformations = [
+    {
+        value: "autoformat",
+        label: "Autoformat (e.g. 02-13-2020 -> 02/13/2020",
+        isDefaultTransformation: true,
+    },
+];
+var stringTransformations = [
+    {
+        value: "sentence_case",
+        label: "Sentence Case (e.g. hello world -> Hello world)",
+    },
+    {
+        value: "capitalize",
+        label: "Capitalize (e.g. hello world -> Hello World)",
+    },
+    {
+        value: "uppercase",
+        label: "Uppercase (e.g. hello world -> HELLO WORLD)",
+    },
+    {
+        value: "lowercase",
+        label: "Lowercase (e.g. Hello World -> hello world)",
+    },
+    {
+        value: "trim_whitespace",
+        label: "Trim Whitespace (e.g. '  hello world ' -> 'hello world')",
+    },
+];
+var urlTransformations = [
+    {
+        value: "prefix",
+        label: "Prefix",
+        options: [
+            {
+                key: "prefix",
+                type: "text",
+                tooltip: "Add Prefix (e.g., 'example.com' becomes 'https://example.com')",
+            },
+        ],
+    },
+];
+var floatTransformations = [
+    {
+        value: "number_of_decimals",
+        label: "Number of Decimals",
+        options: [
+            {
+                key: "number_of_decimals",
+                type: "number",
+                tooltip: "Set Number of Decimals (e.g., '10.567' becomes '10.57' with 2 decimals)",
+            },
+        ],
+    },
+];
+var integerTransformations = [
+    {
+        value: "round",
+        label: "Round (e.g. 3.19 -> 3)",
+    },
+    {
+        value: "floor",
+        label: "Floor (e.g. 3.99 -> 3)",
+    },
+    {
+        value: "ceiling",
+        label: "Ceiling (e.g. 3.01 -> 4)",
+    },
+];
+var enumTransformations = [
+    {
+        value: "autodetect",
+        label: "Autodetect (e.g. 0/1 -> true/false)",
+        isDefaultTransformation: true,
+    },
+];
+export var transformationsByColumnType = {
+    string: stringTransformations,
+    integer: integerTransformations,
+    float: floatTransformations,
+    enum: enumTransformations,
+    url: urlTransformations,
+    date: commonDateAndTimeTransformations,
+    datetime: commonDateAndTimeTransformations,
+    time: commonDateAndTimeTransformations,
+};
+// the final object will look like this:
+// { autodetect: { value: "autodetect", label: "Autodetect" }, ... }
+export var transformationsByType = Object.values(transformationsByColumnType)
+    .reduce(function (acc, arr) { return acc.concat(arr); }, [])
+    .reduce(function (result, p) {
+    result[p.value] = p;
+    return result;
+}, {});

package/lib/esm/common/columnsValidations.d.ts

@@ -42,4 +42,4 @@ export declare const allowedPatterns: {
     }[];
 };
 export declare const patternsColumnTypes: string[];
-export declare const validateColumn: <T extends "string" | "boolean" | "time" | "integer" | "float" | "email" | "enum" | "url" | "date" | "datetime">(columnData: ColumnRequiredProps<T>) => Promise<void>;
+export declare const validateColumn: <T extends "string" | "boolean" | "time" | "integer" | "float" | "email" | "url" | "enum" | "date" | "datetime">(columnData: ColumnRequiredProps<T>) => Promise<void>;