@quillsql/admin 1.3.0 → 1.3.2

package/dist/api/ConnectionClient.js

@@ -0,0 +1,247 @@
+import { QUILL_SERVER } from '../utils/constants';
+import { formConnectionString, } from '../utils/databases';
+export async function testConnectionString(connectionString) {
+    const localURL = `${QUILL_SERVER}/sdk/test-connection`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            connectionString,
+            task: 'test-connection',
+        }),
+    });
+    const results = await response.json();
+    return results.success;
+}
+export async function getSchemaTableInfo(connectionString, schema) {
+    const localURL = `${QUILL_SERVER}/sdk/schema-info`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            connectionString,
+            schema,
+            task: 'schema-info',
+        }),
+    });
+    const results = await response.json();
+    return results;
+}
+export async function getTablesBySchema(connectionString, schema) {
+    const localURL = `${QUILL_SERVER}/sdk/tables-by-schema`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            connectionString,
+            schema,
+            task: 'tables-by-schema',
+        }),
+    });
+    const results = await response.json();
+    return results.tables;
+}
+export async function getTableInfo(connectionString, schema, table) {
+    const localURL = `${QUILL_SERVER}/sdk/table-info`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            connectionString,
+            schema,
+            table,
+            task: 'table-info',
+        }),
+    });
+    const results = await response.json();
+    return results;
+}
+export async function getOrgInfo(connectionString, schema, table, orgIdColumn, orgColumn) {
+    const localURL = `${QUILL_SERVER}/sdk/org-info`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            connectionString,
+            schema,
+            table,
+            orgColumn,
+            orgIdColumn,
+            task: 'org-info',
+        }),
+    });
+    const results = await response.json();
+    return results.orgStrings;
+}
+export async function getFKInfo(connectionString, schema, table, primaryKey) {
+    const localURL = `${QUILL_SERVER}/sdk/fk-info`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            connectionString,
+            schema,
+            table,
+            primaryKey,
+            task: 'fk-info',
+        }),
+    });
+    const results = await response.json();
+    return results.foreignKeysString;
+}
+export async function getTableSchema(connectionString, tables) {
+    const localURL = `${QUILL_SERVER}/sdk/table-schemas`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            connectionString,
+            tables,
+            task: 'table-schemas',
+        }),
+    });
+    const results = await response.json();
+    return results;
+}
+export async function getSQLViews(tableSchemas, customerNameField) {
+    const localURL = `${QUILL_SERVER}/sqlviewai`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            tableSchemas,
+            customerNameField,
+            task: 'sqlviewai',
+        }),
+    });
+    const results = await response.json();
+    if (results.notSureWhatThisIs.length === 0) {
+        return [];
+    }
+    if (results.notSureWhatThisIs.sqlQuery) {
+        return [{ sqlQuery: results.notSureWhatThisIs.sqlQuery }];
+    }
+    return results.notSureWhatThisIs.sqlQueries;
+}
+export async function getSqlViewData(connectionString, query) {
+    const localURL = `${QUILL_SERVER}/sdk/query-view`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            connectionString,
+            query,
+            task: 'query-view',
+        }),
+    });
+    const results = await response.json();
+    return results;
+}
+export async function getQueryFromAI(aiPrompt, columnsByTable) {
+    const localURL = `${QUILL_SERVER}/sdk/sql-generator`;
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            initialQuestion: aiPrompt,
+            tableSchemas: columnsByTable,
+            task: 'sql-generator',
+        }),
+    });
+    const results = await response.json();
+    return results.message;
+}
+export async function addEnvironment(connectionType, allSchemaInfo, columnsByTable, viewInfo, client, domainName, tableData, currentTableNames, override = false) {
+    let queryName = viewInfo.name;
+    let localURL = `${QUILL_SERVER}/astify`;
+    const astResponse = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ query: viewInfo.query }),
+    });
+    const queryAstRaw = await astResponse.json();
+    const queryAst = queryAstRaw.ast[0] ? queryAstRaw.ast[0] : queryAstRaw.ast;
+    queryName = queryAst.from.map((ast) => ast.table).join('_');
+    let validQuery = false;
+    // check the columns from queryAst.ast[0] to see if the foreign key is in the query
+    queryAst.columns.forEach((column) => {
+        if (column.expr.column === allSchemaInfo.selectedFields.foreignKey) {
+            validQuery = true;
+        }
+    });
+    // If query ast is only a * check the tables for the foreign key
+    if (!override && !validQuery && queryAst.columns[0].expr.column === '*') {
+        queryAst.from.forEach((table) => {
+            const columnInfo = columnsByTable.find((tableInfo) => tableInfo.tableName === table.table);
+            columnInfo?.columns.forEach((column) => {
+                if (column.columnName === allSchemaInfo.selectedFields.foreignKey) {
+                    validQuery = true;
+                }
+            });
+        });
+    }
+    if (!override && !validQuery) {
+        return {
+            success: false,
+            throwModal: true,
+            message: `No foreign key (${allSchemaInfo.selectedFields.foreignKey}) detected in the view. If this is a utility table override this error but if it isn’t you should rework your query.`,
+        };
+    }
+    // if queryAst.ast[0] has a columns of * with a table of customers, the we can assume the customer id is in the query
+    if (currentTableNames.includes(queryName)) {
+        return { success: false, message: 'Query name already exists' };
+    }
+    const columns = columnsByTable.find((table) => table.tableName === allSchemaInfo.selectedFields.table).columns;
+    const customerFieldType = columns.find((column) => column.columnName === allSchemaInfo.selectedFields.organizationIdField).fieldType;
+    const fuzzyType = customerFieldType === 'string' || customerFieldType === 'uuid'
+        ? 'text'
+        : 'number';
+    localURL = `${QUILL_SERVER}/sdk/create-environment`;
+    const payload = {
+        databaseConnectionString: formConnectionString(connectionType),
+        databaseType: connectionType.type,
+        customerFieldName: allSchemaInfo.selectedFields.foreignKey,
+        customerTableName: allSchemaInfo.selectedFields.table,
+        customerTableFieldName: allSchemaInfo.selectedFields.organizationIdField,
+        adminCustomerId: allSchemaInfo.selectedFields.defaultOrg?.id,
+        customerTableTitleFieldName: allSchemaInfo.selectedFields.customerNameField,
+        columns: tableData?.columns,
+        task: 'create-environment',
+        viewQuery: viewInfo.query,
+        customerFieldType: fuzzyType,
+        name: queryName,
+        client,
+        domainName,
+    };
+    const response = await fetch(localURL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+    });
+    const results = await response.json();
+    return { ...results, success: true };
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function Banner({ onExit }: any): JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/index.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAgElE"}

package/dist/components/Banner/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdmin } from '../../AdminProvider';
+import XMarkIcon from '../../icons/XMarkIcon';
+export default function Banner({ onExit }) {
+    const { state } = useAdmin();
+    if (!state.activeEditItem)
+        return null;
+    return (_jsxs("div", { id: "quill-edit-banner", style: {
+            display: 'flex',
+            paddingTop: '0.625rem',
+            paddingBottom: '0.625rem',
+            paddingLeft: '24px',
+            paddingRight: '24px',
+            alignItems: 'center',
+            backgroundColor: '#111827',
+        }, children: [_jsxs("p", { style: {
+                    fontSize: '14px',
+                    color: '#ffffff',
+                }, children: [_jsx("strong", { style: { fontWeight: 600 }, children: "Edit Mode" }), _jsx("svg", { viewBox: "0 0 2 2", style: {
+                            display: 'inline',
+                            marginLeft: '8px',
+                            marginRight: '8px',
+                            width: '2px',
+                            height: '2px',
+                            fill: 'currentColor',
+                        }, "aria-hidden": "true", children: _jsx("circle", { cx: 1, cy: 1, r: 1 }) }), `You are currently editing `, _jsx("strong", { style: { fontWeight: 600 }, children: state.activeEditItem.name }), ` on the `, _jsx("strong", { style: { fontWeight: 600 }, children: state.activeEditItem.dashboardName }), ` dashboard.`] }), _jsx("div", { style: { display: 'flex', flex: '1 1 0%', justifyContent: 'flex-end' }, children: _jsx("button", { type: "button", onClick: onExit, style: { padding: '6px', margin: '-6px' }, children: _jsx(XMarkIcon, { style: { width: '16px', height: '16px' }, fill: "#fff", "aria-hidden": "true" }) }) })] }));
+}

package/dist/components/CardSection.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+export default function CardSection(props: PropsWithChildren): JSX.Element;
+//# sourceMappingURL=CardSection.d.ts.map

package/dist/components/CardSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSection.d.ts","sourceRoot":"","sources":["../../src/components/CardSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAazE"}

package/dist/components/CardSection.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CardSection(props) {
+    return (_jsx("div", { style: {
+            fontFamily: 'Inter; Helvetica',
+            color: '#364153',
+            fontSize: 16,
+            fontWeight: '600',
+        }, children: props.children }));
+}

package/dist/components/CardTitle.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+export default function CardTitle(props: PropsWithChildren): JSX.Element;
+//# sourceMappingURL=CardTitle.d.ts.map

package/dist/components/CardTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardTitle.d.ts","sourceRoot":"","sources":["../../src/components/CardTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAevE"}

package/dist/components/CardTitle.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CardTitle(props) {
+    return (_jsx("div", { style: {
+            fontFamily: 'Inter; Helvetica',
+            color: '#6C727F',
+            fontSize: 14,
+            fontWeight: '600',
+            marginBottom: 3,
+            marginTop: 8,
+        }, children: props.children }));
+}

package/dist/components/DashboardSelectPopover.d.ts

@@ -0,0 +1,11 @@
+interface DashboardSelectPopoverProps {
+    dashboards: any[];
+    setDashboard: (dashboard: any) => void;
+    dashboard: any;
+    theme: any;
+    setSelectedEditDashboard: (dashboard: string) => void;
+    onClickNewDashboard: () => void;
+}
+export default function DashboardSelectDropdown({ dashboards, setDashboard, dashboard, theme, setSelectedEditDashboard, onClickNewDashboard, }: DashboardSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DashboardSelectPopover.d.ts.map

package/dist/components/DashboardSelectPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardSelectPopover.d.ts","sourceRoot":"","sources":["../../src/components/DashboardSelectPopover.tsx"],"names":[],"mappings":"AAIA,UAAU,2BAA2B;IACnC,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,YAAY,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,GAAG,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;IACX,wBAAwB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,UAAU,EACV,YAAY,EACZ,SAAS,EACT,KAAK,EACL,wBAAwB,EACxB,mBAAmB,GACpB,EAAE,2BAA2B,2CAyN7B"}

package/dist/components/DashboardSelectPopover.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { ArrowDownHeadIcon } from '../icons';
+export default function DashboardSelectDropdown({ dashboards, setDashboard, dashboard, theme, setSelectedEditDashboard, onClickNewDashboard, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [hoveredItemId, setHoveredItemId] = useState(null);
+    const [isPromoteHovered, setIsPromoteHovered] = useState(false);
+    const handleItemClick = (selectedDashboard) => {
+        setDashboard(selectedDashboard);
+        setIsOpen(false);
+    };
+    const popoverRef = useRef(null);
+    const handleOutsideClick = (event) => {
+        if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('mousedown', handleOutsideClick);
+        }
+        else {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleOutsideClick); // Cleanup
+        };
+    }, [isOpen]);
+    const dropdownStyles = {
+        position: 'relative',
+        display: 'inline-block',
+        fontFamily: theme?.fontFamily,
+        fontSize: 14,
+    };
+    const triggerButtonStyles = {
+        width: '100%',
+        minWidth: 230,
+        maxWidth: 230,
+        outline: 'none',
+        textAlign: 'left',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        borderRadius: 6,
+        WebkitAppearance: 'none',
+        paddingLeft: 12,
+        paddingRight: 12,
+        height: 38,
+        borderTop: '1px solid #e7e7e7',
+        borderLeft: '1px solid #e7e7e7',
+        borderRight: '1px solid #e7e7e7',
+        borderBottom: '1px solid #e7e7e7',
+        background: theme?.backgroundColor,
+        color: theme?.primaryTextColor,
+        fontFamily: theme?.fontFamily,
+        fontWeight: 500,
+        borderStyle: 'solid',
+    };
+    const dropdownContentStyles = {
+        display: isOpen ? 'flex' : 'none',
+        flexDirection: 'column',
+        background: '#FFFFFF',
+        position: 'absolute',
+        boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
+        border: '1px solid #e7e7e7',
+        boxSizing: 'border-box',
+        zIndex: 1,
+        borderRadius: 6,
+        padding: 8,
+        maxHeight: 420,
+        width: 230,
+        marginTop: 8,
+        gap: 5,
+    };
+    const itemStyles = {
+        height: 42,
+        paddingLeft: 10,
+        paddingRight: 4,
+        cursor: 'pointer',
+        fontSize: '14px',
+        color: theme?.primaryTextColor,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        fontWeight: '500',
+    };
+    const itemHoverStyles = {
+        backgroundColor: 'rgba(56, 65, 81, 0.04)',
+        borderRadius: 6,
+    };
+    const selectedItemStyles = {
+        backgroundColor: 'rgba(56, 65, 81, 0.04)',
+        borderRadius: 6,
+        fontWeight: '500',
+    };
+    const promoteStyles = {
+        color: theme?.primaryTextColor,
+        cursor: 'pointer',
+        fontSize: '13px',
+        border: isPromoteHovered ? '1px solid #e7e7e7' : '1px solid transparent',
+        backgroundColor: isPromoteHovered ? 'white' : undefined,
+        boxShadow: isPromoteHovered
+            ? '0px 1px 12px 0px rgba(56, 65, 81, 0.1)'
+            : undefined,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 7,
+        paddingRight: 9,
+        paddingTop: 6,
+        paddingBottom: 6,
+        borderRadius: 4,
+        gap: 3,
+    };
+    const itemTextStyles = {
+    // marginRight: "30px",
+    };
+    return (_jsxs("div", { style: dropdownStyles, ref: popoverRef, children: [_jsx("button", { 
+                // onMouseEnter={() => setIsOpen(true)}
+                onClick: () => setIsOpen(true), style: triggerButtonStyles, children: dashboard ? dashboard : 'Select dashboard' }), _jsxs("div", { style: dropdownContentStyles, children: [dashboards.map((item, index) => (_jsxs("div", { onClick: dashboard && dashboard !== item.value
+                            ? () => handleItemClick(item.value)
+                            : undefined, style: {
+                            ...itemStyles,
+                            ...(hoveredItemId === item.value ? itemHoverStyles : {}),
+                            ...(dashboard && dashboard === item.value
+                                ? selectedItemStyles
+                                : {}),
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                        }, onMouseEnter: () => setHoveredItemId(item.value), onMouseLeave: () => setHoveredItemId(null), children: [_jsx("span", { style: {
+                                    ...itemTextStyles,
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                }, children: item.value }), dashboard && dashboard === item.value && (_jsxs("div", { onClick: () => {
+                                    setSelectedEditDashboard(item.value);
+                                }, style: {
+                                    ...promoteStyles,
+                                    //   visibility: showPromote ? "visible" : "hidden",
+                                }, onMouseEnter: () => setIsPromoteHovered(true), onMouseLeave: () => setIsPromoteHovered(false), children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: "12px", width: "12px", style: { marginRight: 1 }, children: _jsx("path", { fillRule: "evenodd", d: "M8.34 1.804A1 1 0 0 1 9.32 1h1.36a1 1 0 0 1 .98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 0 1 1.262.125l.962.962a1 1 0 0 1 .125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 0 1 .804.98v1.361a1 1 0 0 1-.804.98l-1.473.295a6.95 6.95 0 0 1-.587 1.416l.834 1.25a1 1 0 0 1-.125 1.262l-.962.962a1 1 0 0 1-1.262.125l-1.25-.834a6.953 6.953 0 0 1-1.416.587l-.294 1.473a1 1 0 0 1-.98.804H9.32a1 1 0 0 1-.98-.804l-.295-1.473a6.957 6.957 0 0 1-1.416-.587l-1.25.834a1 1 0 0 1-1.262-.125l-.962-.962a1 1 0 0 1-.125-1.262l.834-1.25a6.957 6.957 0 0 1-.587-1.416l-1.473-.294A1 1 0 0 1 1 10.68V9.32a1 1 0 0 1 .804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 0 1 .125-1.262l.962-.962A1 1 0 0 1 5.38 3.03l1.25.834a6.957 6.957 0 0 1 1.416-.587l.294-1.473ZM13 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z", clipRule: "evenodd" }) }), "Manage"] }))] }, item.value))), _jsx(CreateNewButton, { onClick: onClickNewDashboard, theme: theme })] }), _jsx(ArrowDownHeadIcon, { style: {
+                    height: '20px',
+                    width: '20px',
+                    flex: 'none',
+                    position: 'absolute',
+                    right: 8,
+                    top: 9.5,
+                    color: '#6C727F',
+                }, "aria-hidden": "true" })] }));
+}
+function CreateNewButton({ onClick, theme, }) {
+    return (_jsxs("button", { onClick: onClick, style: {
+            height: 42,
+            paddingLeft: 10,
+            paddingRight: 4,
+            cursor: 'pointer',
+            fontSize: '14px',
+            color: theme?.primaryTextColor,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            fontWeight: '500',
+            borderRadius: 4,
+            outline: 'none',
+        }, className: "quill-create-dash", children: [_jsx("style", { children: `.quill-create-dash {
+                background: white;
+                border: 1px solid transparent;
+            }
+            .quill-create-dash:hover {
+                background: white;
+                border: 1px solid #e7e7e7;
+                box-shadow: 0px 1px 4px 0px rgba(56, 65, 81, 0.1);
+            }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", height: "16", width: "16", style: { marginRight: 3 }, children: _jsx("path", { d: "M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" }) }), "New dashboard"] }));
+}

package/dist/components/DatabaseSelector.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+interface DatabaseSelectorProps {
+    label: string;
+    imageUrl: string;
+    value: string;
+    onDatabaseSelect: (database: string) => void;
+    containerStyle?: CSSProperties;
+}
+export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, }: DatabaseSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DatabaseSelector.d.ts.map

package/dist/components/DatabaseSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatabaseSelector.d.ts","sourceRoot":"","sources":["../../src/components/DatabaseSelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAGvD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,cAAc,GACf,EAAE,qBAAqB,2CAqCvB"}

package/dist/components/DatabaseSelector.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, }) {
+    return (_jsxs("div", { style: {
+            ...containerStyle,
+            height: 128,
+            width: 128,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: '1px solid #e0e0e0',
+            borderRadius: 6,
+            padding: 12,
+        }, id: "connect-database-form", onClick: () => {
+            onDatabaseSelect(value);
+        }, children: [_jsx("img", { src: imageUrl, alt: label, style: { height: 72, width: 72, objectFit: 'contain' } }), _jsx("h1", { style: {
+                    fontSize: 14,
+                    fontWeight: '500',
+                    color: '#212121',
+                    marginTop: 10,
+                }, children: label })] }));
+}

package/dist/components/DeleteButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function DeleteButton(props: any): JSX.Element;
+//# sourceMappingURL=DeleteButton.d.ts.map

package/dist/components/DeleteButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../src/components/DeleteButton.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA2B5D"}

package/dist/components/DeleteButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DeleteButton(props) {
+    return (_jsx("div", { onClick: props.onClick, style: {
+            height: 38,
+            width: 42,
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) }));
+}

package/{lib → dist}/components/DropDownMenu.d.ts

@@ -7,3 +7,4 @@ interface DropdownMenuProps {
 }
 export default function DropdownMenu({ items, setSelected, selected, theme, disabled, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=DropDownMenu.d.ts.map

package/dist/components/DropDownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDownMenu.d.ts","sourceRoot":"","sources":["../../src/components/DropDownMenu.tsx"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IACzB,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,WAAW,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAgB,GACjB,EAAE,iBAAiB,2CA2EnB"}

package/dist/components/DropDownMenu.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function DropdownMenu({ items, setSelected, selected, theme, disabled = false, }) {
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
+                position: 'relative',
+                fontFamily: theme?.fontFamily,
+                fontSize: 14,
+                fontWeight: 500,
+            }, children: [_jsxs("select", { style: {
+                        width: '100%',
+                        minWidth: 230,
+                        maxWidth: 230,
+                        outline: 'none',
+                        textAlign: 'left',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        borderRadius: 6,
+                        WebkitAppearance: 'none',
+                        paddingLeft: 12,
+                        paddingRight: 12,
+                        height: 38,
+                        borderWidth: theme?.borderWidth,
+                        borderColor: theme?.borderColor,
+                        background: theme?.backgroundColor,
+                        color: theme?.primaryTextColor,
+                        boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                        fontFamily: theme?.fontFamily,
+                    }, disabled: disabled, onChange: (e) => {
+                        setSelected(items.find((item) => item.name === e.target.value));
+                    }, value: selected ? selected.name : '', children: [_jsx("option", { value: "", children: items && items.length !== 0 ? 'Select' : 'N/A' }), items.slice(0, 50).map((item) => (_jsx("option", { value: item.name, children: item.name }, item.name)))] }), _jsxs("svg", { style: {
+                        height: '20px',
+                        width: '20px',
+                        flex: 'none',
+                        position: 'absolute',
+                        right: 8,
+                        top: 9,
+                        color: theme?.secondaryTextColor,
+                    }, "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", visibility: disabled ? 'hidden' : 'visible', children: [_jsx("path", { fill: "none", d: "M0 0h24v24H0z" }), _jsx("path", { fill: "currentColor", d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" })] })] }) }));
+}

package/dist/components/DropDownMenuWithLabel.d.ts

@@ -0,0 +1,12 @@
+interface DropdownMenuWithLabelProps {
+    items: any[];
+    setSelected: (selected: any) => void;
+    selected: any;
+    label: string;
+    theme?: any;
+    secondaryTextColor?: string;
+    disabled?: boolean;
+}
+export default function DropdownMenuWithLabel({ items, setSelected, selected, theme, label, disabled, secondaryTextColor, }: DropdownMenuWithLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DropDownMenuWithLabel.d.ts.map

package/dist/components/DropDownMenuWithLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDownMenuWithLabel.d.ts","sourceRoot":"","sources":["../../src/components/DropDownMenuWithLabel.tsx"],"names":[],"mappings":"AAEA,UAAU,0BAA0B;IAClC,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,WAAW,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,kBAA8B,GAC/B,EAAE,0BAA0B,2CA0F5B"}