@quillsql/admin 1.4.0 → 1.6.0

package/dist/cjs/modals/ReorderDashboardModal.js

@@ -4,19 +4,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
 const react_1 = require("react");
 const AdminProvider_1 = require("../AdminProvider");
-const Admin_1 = require("../Admin");
 const constants_1 = require("../utils/constants");
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const core_1 = require("@dnd-kit/core");
+const react_2 = require("@quillsql/react");
+const UiComponents_1 = require("../components/UiComponents");
 function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalComponent, ButtonComponent, selectedDashboard, organizationId, }) {
-    // const [client] = useContext(ClientContext);
-    const [dashboardItems, setDashboardItems] = (0, react_1.useState)([]);
+    const { state } = (0, AdminProvider_1.useAdmin)();
+    const [sections, setSections] = (0, react_1.useState)([]);
+    const [metrics, setMetrics] = (0, react_1.useState)({});
+    const [charts, setCharts] = (0, react_1.useState)({});
+    const [tables, setTables] = (0, react_1.useState)({});
     const [loading, setLoading] = (0, react_1.useState)(false);
-    const [chartType, setChartType] = (0, react_1.useState)('metric');
-    const [doesDashboardHaveTables, setDoesDashboardHaveTables] = (0, react_1.useState)(false);
-    const [doesDashboardHaveCharts, setDoesDashboardHaveCharts] = (0, react_1.useState)(false);
-    const [doesDashboardHaveMetrics, setDoesDashboardHaveMetrics] = (0, react_1.useState)(false);
-    const [orderArray, setOrderArray] = (0, react_1.useState)([]);
-    const [itemMap, setItemMap] = (0, react_1.useState)(null);
-    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     (0, react_1.useEffect)(() => {
         async function getDashboardItems() {
             const { _id, environment } = state.client;
@@ -35,93 +35,205 @@ function ReorderDashboardModal({ isOpen, setIsOpen, client, onSave, ModalCompone
                 },
             });
             const responseData = await response.json();
-            let flattened = [];
-            for (let key in responseData.sections) {
-                flattened = flattened.concat(responseData.sections[key]);
-            }
-            setDashboardItems(flattened);
+            const sections = responseData.sections;
+            setSections(Object.keys(sections));
+            const isMetric = (elem) => elem.chartType === 'metric';
+            const isChart = (elem) => !['metric', 'table'].includes(elem.chartType);
+            const isTable = (elem) => elem.chartType === 'table';
+            setMetrics(Object.fromEntries(Object.entries(sections).map(([k, v]) => [k, v.filter(isMetric)])));
+            setCharts(Object.fromEntries(Object.entries(sections).map(([k, v]) => [k, v.filter(isChart)])));
+            setTables(Object.fromEntries(Object.entries(sections).map(([k, v]) => [k, v.filter(isTable)])));
             setLoading(false);
         }
         if (selectedDashboard && state.client) {
             getDashboardItems();
         }
     }, [selectedDashboard, state.client]);
-    (0, react_1.useEffect)(() => {
-        const itemMap = new Map();
-        dashboardItems.forEach((item) => {
-            if (item.chartType === 'table') {
-                setDoesDashboardHaveTables(true);
-            }
-            else if (item.chartType === 'metric') {
-                setDoesDashboardHaveMetrics(true);
-            }
-            else {
-                setDoesDashboardHaveCharts(true);
+    const handleSaveChanges = async () => {
+        if (!client)
+            return;
+        try {
+            const response = await fetch(`${constants_1.QUILL_SERVER}/dashorder/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    publicKey: client._id,
+                    orderArray: [
+                        ...Object.values(metrics).flat(),
+                        ...Object.values(charts).flat(),
+                        ...Object.values(tables).flat(),
+                    ],
+                }),
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(`Error: ${errorData.error || 'Unknown error'}`);
             }
-            itemMap.set(item._id, item);
-        });
-        setItemMap(itemMap);
-    }, [dashboardItems]);
-    const closeModal = () => {
-        setIsOpen(false);
+            await response.json();
+            onSave();
+            setIsOpen(false);
+        }
+        catch (error) {
+            console.error('An unknown error occurred in ReorderDashboardModal');
+            console.error(error.message);
+        }
     };
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                position: 'relative',
-                minWidth: 700,
-                maxWidth: 700,
-                minHeight: 700,
-                zIndex: 100,
-                // overflowY: "scroll",
-            }, children: [loading ? (0, jsx_runtime_1.jsx)("div", { children: 'Loading...' }) : null, dashboardItems.length > 0 && itemMap.size > 0 && ((0, jsx_runtime_1.jsx)(Admin_1.ReorderableList, { itemMap: itemMap, client: client, initialItems: dashboardItems.filter((elem) => chartType === 'chart'
-                        ? elem.chartType !== 'metric' && elem.chartType !== 'table'
-                        : elem.chartType === chartType), ButtonComponent: ButtonComponent, closeModal: closeModal, onSave: onSave })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                        height: 80,
-                        background: 'white',
-                        width: 700,
-                        position: 'absolute',
-                        top: -20,
-                        left: 0,
-                        right: 20,
-                        paddingTop: 20,
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                    }, children: [(0, jsx_runtime_1.jsx)("h1", { style: { fontSize: 22, fontWeight: 600 }, children: "Reorder items" }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                background: '#f7f7f7',
-                                borderRadius: 6,
-                                height: 32,
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                paddingLeft: 4,
-                                paddingRight: 4,
-                            }, children: [doesDashboardHaveMetrics && ((0, jsx_runtime_1.jsx)("button", { style: {
-                                        background: chartType === 'metric' ? 'white' : undefined,
-                                        color: chartType === 'metric' ? '#384151' : '#677389',
-                                        fontWeight: chartType === 'metric' ? '600' : '500',
-                                        borderRadius: 4,
-                                        paddingLeft: 6,
-                                        paddingRight: 6,
-                                        fontSize: 16,
-                                    }, onClick: () => setChartType('metric'), children: "Metrics" })), doesDashboardHaveCharts && ((0, jsx_runtime_1.jsx)("button", { style: {
-                                        background: chartType === 'chart' ? 'white' : undefined,
-                                        color: chartType === 'chart' ? '#384151' : '#677389',
-                                        fontWeight: chartType === 'chart' ? '600' : '500',
-                                        borderRadius: 4,
-                                        paddingLeft: 6,
-                                        paddingRight: 6,
-                                        fontSize: 16,
-                                    }, onClick: () => setChartType('chart'), children: "Charts" })), doesDashboardHaveTables && ((0, jsx_runtime_1.jsx)("button", { style: {
-                                        background: chartType === 'table' ? 'white' : undefined,
-                                        color: chartType === 'table' ? '#384151' : '#677389',
-                                        fontWeight: chartType === 'table' ? '600' : '500',
-                                        borderRadius: 4,
-                                        paddingLeft: 6,
-                                        paddingRight: 6,
-                                        fontSize: 16,
-                                    }, onClick: () => setChartType('table'), children: "Tables" }))] })] })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), style: {
+            gap: 20,
+            display: 'flex',
+            flexDirection: 'column',
+            width: 'calc(100vw - 80px)',
+            height: 'calc(100vh - 80px)',
+        }, children: [(0, jsx_runtime_1.jsx)("h1", { style: { fontSize: 22, fontWeight: 600, width: '100%' }, children: "Reorder Items" }), loading ? (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) : null, (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 20,
+                    overflowY: 'auto',
+                    width: '100%',
+                    height: 'calc(100% - 20px)',
+                    zIndex: 100,
+                }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, children: sections
+                        .sort((a, b) => a.length - b.length)
+                        .map((sectionName, sectionIndex) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 20,
+                        }, children: [sectionName && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)("h1", { style: {
+                                        fontSize: 22,
+                                        fontWeight: 'bold',
+                                        textAlign: 'left',
+                                        marginTop: sectionIndex > 0 ? 20 : 0,
+                                    }, children: sectionName }) })), metrics[sectionName]?.length > 0 && ((0, jsx_runtime_1.jsx)(ReorderableGrid, { type: 'metrics', section: sectionName, items: metrics[sectionName], setItems: setMetrics })), charts[sectionName]?.length > 0 && ((0, jsx_runtime_1.jsx)(ReorderableGrid, { type: 'charts', section: sectionName, items: charts[sectionName], setItems: setCharts })), tables[sectionName]?.length > 0 && ((0, jsx_runtime_1.jsx)(ReorderableGrid, { type: 'tables', section: sectionName, items: tables[sectionName], setItems: setTables }))] }))) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'right',
+                }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSaveChanges, label: "Save changes" }) })] }));
 }
 exports.default = ReorderDashboardModal;
+const SortableItem = (props) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({ id: props.id });
+    const style = {
+        transform: utilities_1.CSS.Translate.toString(transform),
+        transition,
+        display: 'flex',
+        width: props.chartType === 'table' ? '100%' : '100%',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderRadius: '10px',
+        border: '1px solid #E7E7E7',
+        boxShadow: '0px 2px 8px 0px rgba(56, 65, 81, 0.08)',
+        cursor: 'grab',
+        userSelect: 'none',
+        background: 'white',
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ref: setNodeRef, style: style, ...attributes, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                cursor: 'pointer',
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }, ...listeners, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    padding: 20,
+                    width: '100%',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            paddingBottom: props.chartType === 'table' ? 10 : 0,
+                        }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+                                    fontSize: 18,
+                                    fontWeight: '500',
+                                    flexGrow: 1,
+                                }, children: props.value }), (0, jsx_runtime_1.jsx)(HandleButton, {})] }), (0, jsx_runtime_1.jsx)(react_2.Chart, { reportId: props.id, containerStyle: {
+                            padding: 10,
+                            height: props.chartType === 'metric' ? 80 : 250,
+                            width: 'calc(100% - 20px)',
+                        } })] }) }) }));
+};
+function ReorderableGrid({ type, section, items, setItems }) {
+    if (!items)
+        return null;
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
+        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
+    }), (0, core_1.useSensor)(core_1.TouchSensor, {
+        activationConstraint: '',
+    }));
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (!active || !over)
+            return;
+        if (active.id !== over.id) {
+            setItems((items) => {
+                const list = items[section];
+                const oldIndex = list.findIndex((item) => item._id === active.id);
+                const newIndex = list.findIndex((item) => item._id === over.id);
+                const newOrder = (0, sortable_1.arrayMove)(list, oldIndex, newIndex);
+                return { ...items, [section]: newOrder };
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)("div", { style: type === 'tables'
+                ? {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    gap: 20,
+                }
+                : {
+                    boxSizing: 'content-box',
+                    width: '100%',
+                    listStyleType: 'none',
+                    display: 'grid',
+                    gap: 20,
+                    gridTemplateColumns: `repeat(auto-fill,minmax(400px, 1fr))`,
+                    gridTemplateRows: `repeat(${170}px)`,
+                }, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items.map((item) => item._id), strategy: sortable_1.rectSortingStrategy, children: items.map((item) => ((0, jsx_runtime_1.jsx)(SortableItem, { handle: true, id: item._id, chartType: items.find((itm) => itm._id === item._id)?.chartType ?? 'chart', value: items.find((itm) => itm._id === item._id)?.name ?? item._id }, item._id))) }) }) }));
+}
+function HandleButton() {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            gap: 2,
+            flexDirection: 'row',
+            paddingTop: 8,
+            paddingBottom: 8,
+            paddingLeft: 8,
+            paddingRight: 8,
+            borderRadius: 4,
+        }, className: "handle", children: [(0, jsx_runtime_1.jsx)("style", { children: `.handle{background:white;} .handle:hover{background:rgba(0,0,0,0.03);}` }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 2, flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 2, flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: 3,
+                            height: 3,
+                            borderRadius: 3,
+                            background: '#9CA0A7',
+                        } })] })] }));
+}

package/dist/cjs/modals/index.d.ts

@@ -1,5 +1,4 @@
 export { default as PromoteDashModal } from './PromoteDashModal';
-export { default as EditDashboardsModal } from './EditDashboardsModal';
 export { default as PromoteViewModal } from './PromoteViewModal';
 export { default as ReorderDashboardModal } from './ReorderDashboardModal';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/modals/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modals/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modals/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/cjs/modals/index.js

@@ -3,11 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReorderDashboardModal = exports.PromoteViewModal = exports.EditDashboardsModal = exports.PromoteDashModal = void 0;
+exports.ReorderDashboardModal = exports.PromoteViewModal = exports.PromoteDashModal = void 0;
 var PromoteDashModal_1 = require("./PromoteDashModal");
 Object.defineProperty(exports, "PromoteDashModal", { enumerable: true, get: function () { return __importDefault(PromoteDashModal_1).default; } });
-var EditDashboardsModal_1 = require("./EditDashboardsModal");
-Object.defineProperty(exports, "EditDashboardsModal", { enumerable: true, get: function () { return __importDefault(EditDashboardsModal_1).default; } });
 var PromoteViewModal_1 = require("./PromoteViewModal");
 Object.defineProperty(exports, "PromoteViewModal", { enumerable: true, get: function () { return __importDefault(PromoteViewModal_1).default; } });
 var ReorderDashboardModal_1 = require("./ReorderDashboardModal");

package/dist/cjs/primitives/ButtonPrimitive.d.ts

@@ -7,6 +7,8 @@ type ButtonPrimitiveProps = {
     style?: React.CSSProperties;
     variant?: 'primary' | 'secondary' | 'danger';
 };
-declare const ButtonPrimitive: React.FC<ButtonPrimitiveProps>;
+declare const ButtonPrimitive: React.FC<ButtonPrimitiveProps & {
+    isLoading?: boolean;
+}>;
 export default ButtonPrimitive;
 //# sourceMappingURL=ButtonPrimitive.d.ts.map

package/dist/cjs/primitives/ButtonPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;CAC9C,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqEnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAG7D,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;CAC9C,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAC7B,oBAAoB,GAAG;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAoFF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/cjs/primitives/ButtonPrimitive.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Admin_1 = require("../Admin");
-const ButtonPrimitive = ({ onClick, label, theme = Admin_1.theme, style, variant = 'primary', }) => {
+const UiComponents_1 = require("../components/UiComponents");
+const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = Admin_1.theme, style, variant = 'primary', }) => {
     if (variant === 'danger') {
         return ((0, jsx_runtime_1.jsxs)("button", { style: {
                 height: 36,
@@ -20,7 +21,7 @@ const ButtonPrimitive = ({ onClick, label, theme = Admin_1.theme, style, variant
                 paddingLeft: 20,
                 paddingRight: 20,
                 ...style,
-            }, onClick: onClick, className: "quill--danger-button", children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill--danger-button { background: #e7e7e7 } .quill--danger-button:hover { background: #DCDCDC }` }), label] }));
+            }, onClick: onClick, className: "quill--danger-button", children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill--danger-button { background: #e7e7e7 } .quill--danger-button:hover { background: #DCDCDC }` }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { padding: '32px 0px' }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : (label)] }));
     }
     return ((0, jsx_runtime_1.jsxs)("button", { style: {
             height: 36,
@@ -34,6 +35,7 @@ const ButtonPrimitive = ({ onClick, label, theme = Admin_1.theme, style, variant
             fontFamily: theme?.fontFamily,
             fontWeight: theme?.buttonFontWeight || 600,
             border: 'none',
+            whiteSpace: 'nowrap',
             fontSize: 14,
             paddingLeft: 20,
             paddingRight: 20,
@@ -44,6 +46,6 @@ const ButtonPrimitive = ({ onClick, label, theme = Admin_1.theme, style, variant
                 }
                 .quill-button:hover {
                     background: rgba(0,0,0,0.75);
-                }` }), label] }));
+                }` }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { padding: '0px 16px' }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : (label)] }));
 };
 exports.default = ButtonPrimitive;

package/dist/cjs/primitives/ModalPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ModalPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+DjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ModalPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ModalPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8DjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/cjs/primitives/ModalPrimitive.js

@@ -34,8 +34,6 @@ const ModalPrimitive = ({ isOpen, close, children, style, theme = Admin_1.theme,
                     maxHeight: '90vh',
                     minWidth: 462,
                     display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
                     transform: 'translateX(-50%) translateY(-50%)',
                     background: 'white',
                     borderRadius: 8,
@@ -43,6 +41,7 @@ const ModalPrimitive = ({ isOpen, close, children, style, theme = Admin_1.theme,
                     borderWidth: 1,
                     borderColor: '#e7e7e7',
                     padding: 30,
+                    overflow: 'auto',
                     ...style,
                 }, children: children })] }));
 };

package/dist/cjs/primitives/TogglePrimitive.js

@@ -6,8 +6,8 @@ const TogglePrimitive = ({ value, onClick }) => {
         container: {
             display: 'inline-block',
             position: 'relative',
-            width: '70px',
-            height: '38px',
+            width: '50px',
+            height: '30px',
             borderRadius: '24px',
             backgroundColor: value ? '#212121' : '#ccc',
             cursor: 'pointer',
@@ -16,9 +16,9 @@ const TogglePrimitive = ({ value, onClick }) => {
         circle: {
             position: 'absolute',
             top: '3px',
-            left: value ? '35px' : '3px',
-            width: '32px',
-            height: '32px',
+            left: value ? '23px' : '3px',
+            width: '24px',
+            height: '24px',
             borderRadius: '50%',
             backgroundColor: '#FFF',
             transition: 'left 0.4s',

package/dist/cjs/public_components/CreateEnvironment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAuClE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAqMA"}
+{"version":3,"file":"CreateEnvironment.d.ts","sourceRoot":"","sources":["../../../src/public_components/CreateEnvironment.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAuB,MAAM,OAAO,CAAC;AAuClE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,0BAA0B,EAC1B,cAAc,GACf,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,2CAsMA"}

package/dist/cjs/public_components/CreateEnvironment.js

@@ -145,7 +145,7 @@ function CreateEnvironment({ navigateToDashboardManager, containerStyle, }) {
                     setCreateEnvSteps(updatedSteps);
                     setAllSchemaInfo(schemaDetails);
                     openStep('createSQLViews');
-                }, allSchemaInfo: allSchemaInfo, environmentDetails: environmentDetails, initialError: initialError, clientId: clientId })) : ((0, jsx_runtime_1.jsx)(StepDisplay_1.default, { label: "Connect Schema", completed: createEnvSteps.connectSchema.completed, header1Style: header1Style, onClick: () => {
+                }, allSchemaInfo: allSchemaInfo, environmentDetails: environmentDetails, initialError: initialError, clientId: clientId, state: state })) : ((0, jsx_runtime_1.jsx)(StepDisplay_1.default, { label: "Connect Schema", completed: createEnvSteps.connectSchema.completed, header1Style: header1Style, onClick: () => {
                     openStep('connectSchema');
                     setInitialError(undefined);
                 } })), createEnvSteps.createSQLViews.open ? ((0, jsx_runtime_1.jsx)(CreateSqlViews_1.default, { containerStyle: {

package/dist/cjs/public_components/DashboardBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AAS5E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,0BAA0B,EAC1B,cAAc,EACd,SAAgB,GACjB,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CA0TA"}
+{"version":3,"file":"DashboardBuilder.d.ts","sourceRoot":"","sources":["../../../src/public_components/DashboardBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAwC,MAAM,OAAO,CAAC;AAY5E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,0BAA0B,EAC1B,cAAc,EACd,SAAgB,GACjB,EAAE;IACD,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,2CAgcA"}