@quillsql/react 2.10.31 → 2.10.33

package/dist/esm/SQLEditor.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { TableComponentProps } from './components/UiComponents';
+export declare function convertPostgresColumn(column: any): {
+    label: any;
+    field: any;
+    format: string;
+    fieldType: string;
+};
+interface ButtonComponentProps {
+    onClick: () => void;
+    label: string;
+}
+interface SQLEditorProps {
+    containerStyle: React.CSSProperties;
+    ButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
+    SecondaryButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
+    TextInputComponent?: (props: TextInputComponentProps) => JSX.Element;
+    TableComponent?: (props: TableComponentProps) => JSX.Element;
+    LoadingComponent?: () => JSX.Element;
+    onChangeQuery?: (query: string) => void;
+    onChangeData?: (data: object[]) => void;
+    onChangeColumns?: (columns: object[]) => void;
+    onChangeFields?: (fields: object[]) => void;
+    defaultQuery?: string;
+    chartBuilderEnabled?: boolean;
+    showTableFormatOptions?: boolean;
+    showDateFieldOptions?: boolean;
+    showAccessControlOptions?: boolean;
+    destinationDashboard?: string;
+    newQueryEnabled?: boolean;
+    isEditMode?: boolean;
+    dashboardItem?: any;
+    chartBuilderTitle?: string;
+    chartBuilderButtonLabel?: string;
+    addToDashboardButtonLabel?: string;
+    onAddToDashboardComplete?: () => void;
+    organizationName?: string;
+}
+interface TextInputComponentProps {
+    onChange: (e: any) => void;
+    value: string;
+    id: string;
+    placeholder?: string;
+}
+export default function QueryEditor({ containerStyle, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, chartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComponent, width, }: {
+    schema: any;
+    theme: any;
+    loading: any;
+    LoadingComponent: any;
+    width: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SQLEditor.d.ts.map

package/dist/esm/SQLEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAQxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAGhE,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAQD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+ED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAA2B,EAC3B,eAAuB,EACvB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,GAC7B,EAAE,cAAc,2CA0UhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}

package/dist/esm/SQLEditor.js

@@ -0,0 +1,500 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+import { useState, useContext, useEffect } from 'react';
+import MonacoEditor from '@monaco-editor/react';
+// import './nightOwlLight.css';
+import { ClientContext, SchemaContext, ThemeContext } from './Context';
+import QuillTable from './components/QuillTable';
+import { getData, getDataFromCloud } from './utils/dataFetcher';
+import ChartBuilder from './ChartBuilder';
+export function convertPostgresColumn(column) {
+    let format;
+    let fieldType;
+    switch (column.dataTypeID) {
+        case 20: // int8
+        case 21: // int2
+        case 23: // int4
+            format = 'whole_number';
+            break;
+        case 700: // float4
+        case 701: // float8
+        case 1700: // numeric
+            format = 'two_decimal_places';
+            break;
+        case 1082: // date
+        case 1083: // time
+        case 1184: // timestamptz
+        case 1114: // timestamp
+            format = 'MMM_dd_yyyy';
+            break;
+        case 1186: // interval
+        case 1043: // varchar
+        default:
+            format = 'string';
+    }
+    switch (column.dataTypeID) {
+        case 20: // int8
+            fieldType = 'int8';
+            break;
+        case 21: // int2
+            fieldType = 'int2';
+            break;
+        case 23: // int4
+            fieldType = 'int4';
+            break;
+        case 700: // float4
+            fieldType = 'float4';
+            break;
+        case 701: // float8
+            fieldType = 'float8';
+            break;
+        case 1700: // numeric
+            fieldType = 'numeric';
+            break;
+        case 1082: // date
+            fieldType = 'date';
+            break;
+        case 1083: // time
+            fieldType = 'time';
+            break;
+        case 1184: // timestamptz
+            fieldType = 'timestamptz';
+            break;
+        case 1186: // interval
+            fieldType = 'interval';
+            break;
+        case 1114: // timestamp
+            fieldType = 'timestamp';
+            break;
+        case 1043: // varchar
+        default:
+            fieldType = 'varchar';
+    }
+    return {
+        label: column.name,
+        field: column.name,
+        format,
+        fieldType,
+    };
+}
+function defineEditorTheme(monaco, theme) {
+    monaco.editor.defineTheme('onedark', {
+        base: theme.darkMode ? 'vs-dark' : 'vs',
+        inherit: true,
+        rules: [
+            {
+                token: 'comment',
+                foreground: '#5d7988',
+                fontStyle: 'italic',
+            },
+            { token: 'constant', foreground: '#e06c75' },
+        ],
+        colors: {
+            'editor.background': '#F9F9F9',
+        },
+    });
+}
+function setEditorTheme(editor, monaco) {
+    try {
+        monaco.editor.setTheme('onedark');
+    }
+    catch (e) {
+        console.log('ERROR: ', e);
+    }
+}
+const QuillButton = ({ onClick, label, theme, secondary, }) => (_jsx("button", { style: {
+        borderRadius: '6px',
+        backgroundColor: secondary
+            ? theme?.secondaryButtonColor || '#F5F5F5'
+            : theme?.primaryButtonColor,
+        opacity: 1,
+        paddingLeft: '16px',
+        paddingRight: '16px',
+        // paddingTop: '10px',
+        // paddingBottom: '10px',
+        fontSize: '14px',
+        fontWeight: 600,
+        color: secondary ? theme?.primaryTextColor : '#FFFFFF',
+        cursor: 'pointer',
+        outline: 'none',
+        border: 'none',
+        fontFamily: theme?.fontFamily,
+        height: 38,
+    }, onClick: onClick, children: label }));
+const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
+    return (_jsx("input", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingLeft: '12px',
+            paddingRight: '12px',
+            fontWeight: 'medium',
+            height: 38,
+            boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 5px 0px',
+            width: '445px',
+            backgroundColor: theme?.backgroundColor || 'white',
+            color: theme?.primaryTextColor,
+            borderWidth: '1px',
+            borderColor: theme?.borderColor || '#E7E7E7',
+            borderStyle: 'solid',
+            borderRadius: '6px',
+        }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
+};
+export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent = QuillTable, newQueryEnabled = false, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode = false, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, }) {
+    const [sqlPrompt, setSqlPrompt] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+    const [client] = useContext(ClientContext);
+    const [theme] = useContext(ThemeContext);
+    const [query, setQuery] = useState(defaultQuery);
+    const [rows, setRows] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [fields, setFields] = useState([]);
+    const [schema, setSchema] = useContext(SchemaContext);
+    const [errorMessage, setErrorMessage] = useState('');
+    const [sqlResponseLoading, setSqlResponseLoading] = useState(false);
+    const [sqlQueryLoading, setSqlQueryLoading] = useState(false);
+    const [schemaLoading, setSchemaLoading] = useState(false);
+    const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
+    const [displayTable, setDisplayTable] = useState(false);
+    const getSchema = async (isSubscribed) => {
+        setSchemaLoading(true);
+        const { queryEndpoint, queryHeaders, publicKey } = client;
+        const response = await fetch(`${queryEndpoint}`, {
+            method: 'POST',
+            headers: {
+                ...queryHeaders,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                metadata: {
+                    clientId: publicKey,
+                    publicKey: publicKey,
+                    task: 'schema',
+                },
+            }),
+        });
+        const results = await response.json();
+        if (isSubscribed) {
+            if (results.data?.data) {
+                setSchema(results.data.data.tables);
+                setSchemaLoading(false);
+            }
+            else {
+                setSchema(results.data.tables);
+                setSchemaLoading(false);
+            }
+        }
+    };
+    useEffect(() => {
+        let isSubscribed = true;
+        if (isSubscribed && client) {
+            getSchema(isSubscribed);
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, [client]);
+    const handleRunSqlPrompt = async () => {
+        setSqlResponseLoading(true);
+        const resp = await getDataFromCloud(client, `quillai`, {
+            initialQuestion: sqlPrompt,
+        });
+        setQuery(resp.message);
+        setSqlResponseLoading(false);
+    };
+    const handleClearQuery = async () => {
+        setQuery('');
+    };
+    const handleRunQuery = async () => {
+        try {
+            setDisplayTable(true);
+            setSqlQueryLoading(true);
+            setErrorMessage('');
+            const hostedBody = {
+                metadata: {
+                    query,
+                    task: 'query',
+                    orgId: client.customerId || '*',
+                    clientId: client.publicKey,
+                    databaseType: client?.databaseType,
+                },
+            };
+            const cloudBody = { query };
+            const resp = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+            if (resp && resp.errorMessage) {
+                setSqlQueryLoading(false);
+                setErrorMessage('Failed to run SQL query: ' + resp.errorMessage);
+                setRows([]);
+                setColumns([]);
+                setFields([]);
+                return;
+            }
+            setSqlQueryLoading(false);
+            setErrorMessage('');
+            if (resp.rows.length === 0) {
+                setErrorMessage('No data found');
+            }
+            setRows(resp.rows && resp.rows.length ? resp.rows : []);
+            if (onChangeData) {
+                onChangeData(resp.rows && resp.rows.length ? resp.rows : []);
+            }
+            setColumns(resp.fields.map((elem) => convertPostgresColumn(elem)));
+            if (onChangeColumns) {
+                onChangeColumns(resp.fields.map((elem) => convertPostgresColumn(elem)));
+            }
+            setFields(resp.fields);
+            if (onChangeFields) {
+                onChangeFields(resp.fields);
+            }
+        }
+        catch (e) {
+            console.log('ERROR: ', e);
+            return;
+        }
+    };
+    /* all your useState and useContext calls and your useEffect hooks */
+    useEffect(() => {
+        if (onChangeQuery) {
+            onChangeQuery(query);
+        }
+    }, [query]);
+    /* rest of your methods */
+    return (_jsxs("div", { style: containerStyle, children: [_jsx("div", { style: {
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    padding: 0,
+                }, children: _jsx("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
+                            width: '100%',
+                            display: 'flex',
+                            height: '100%',
+                            flexDirection: 'row',
+                            gap: 20,
+                        }, children: [_jsx(SchemaListComponent, { schema: schema, theme: theme, LoadingComponent: LoadingComponent, loading: schemaLoading }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    // gap: 12,
+                                    flexDirection: 'column',
+                                    width: 'calc(100% - 290px)',
+                                    height: '100%',
+                                    overflowX: 'hidden',
+                                }, children: [_jsxs("div", { style: {
+                                            // TODO: change color
+                                            background: 'white',
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            height: 80,
+                                        }, children: [_jsx("div", { style: { minWidth: 440, marginRight: 10 }, children: (TextInputComponent && (_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || (_jsx(QuillTextInput, { id: "ai-search", value: sqlPrompt, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question...", theme: theme })) }), (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || (_jsx(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _jsx(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, newQueryEnabled: newQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), _jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            height: 'calc(50% - 108px)',
+                                            padding: 0,
+                                            margin: 0,
+                                            border: 'none',
+                                            outline: 'none',
+                                        }, children: [errorMessage && (_jsx("div", { style: {
+                                                    fontFamily: theme?.fontFamily,
+                                                    color: theme?.primaryTextColor,
+                                                    fontSize: 15,
+                                                    fontWeight: '400',
+                                                }, children: _jsx("div", { style: {
+                                                        padding: 30,
+                                                        // TODO: change color
+                                                        background: 'rgba(0,0,0,0.02)',
+                                                        display: 'inline-block',
+                                                        flex: 0,
+                                                        borderRadius: 6,
+                                                        color: theme?.primaryTextColor,
+                                                        fontFamily: theme?.fontFamily,
+                                                    }, children: errorMessage }) })), errorMessage || !displayTable ? null : (_jsx(TableComponent, { rows: rows, columns: columns, containerStyle: { height: 'calc(100%)' }, LoadingComponent: LoadingComponent, loading: sqlQueryLoading, showDownloadCSVButton: true }))] }), chartBuilderEnabled && rows.length > 0 && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            justifyContent: 'flex-end',
+                                            width: '100%',
+                                            height: '70px',
+                                        }, children: (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || (_jsx(QuillButton, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel, theme: theme })) }))] })] }) }) }), _jsx(ChartBuilder, { rows: rows, columns: columns, fields: fields, query: query, isEditMode: isEditMode, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, organizationName: organizationName })] }));
+}
+const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, newQueryEnabled, theme, loading, LoadingComponent, }) => {
+    return (_jsxs("div", { style: {
+            background: theme.backgroundColor,
+            // maxHeight: 700,
+            width: '100%',
+            height: '100%',
+            // minWidth: 450,
+            // overflowY: "scroll",
+            // padding: "20px 30px 20px 20px",
+            // marginLeft: 20,
+            display: 'flex',
+            flexDirection: 'column',
+            borderTopLeftRadius: 6,
+            borderBottomLeftRadius: 6,
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+            overflow: 'hidden',
+        }, children: [loading ? (_jsxs("div", { style: {
+                    height: 'calc(100% - 70px)',
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: '#F9F9F9',
+                }, children: [LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] })) : (_jsx(MonacoEditor, { height: "calc(100% - 70px)", width: "100%", defaultLanguage: "pgsql", defaultValue: "", value: query, loading: _jsx("div", {}), options: {
+                    wordWrap: 'on',
+                    minimap: {
+                        enabled: false,
+                    },
+                    padding: { top: 16 },
+                }, onChange: (query) => setQuery(query), beforeMount: (monaco) => defineEditorTheme(monaco, theme), onMount: setEditorTheme })), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    height: 70,
+                }, children: _jsxs("div", { style: { display: 'flex' }, children: [(ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || (_jsx(QuillButton, { onClick: handleRunQuery, label: "Run query", theme: theme })), newQueryEnabled && (_jsx("div", { children: (SecondaryButtonComponent && (_jsx(SecondaryButtonComponent, { onClick: handleClearQuery, label: "Clear query" }))) || (_jsx(QuillButton, { secondary: true, onClick: handleClearQuery, label: "Clear query", theme: theme })) }))] }) })] }));
+};
+const styles = {
+    columnHeader: {
+        boxSizing: 'border-box',
+        flex: '150 0 auto',
+        minWidth: '50px',
+        width: '150px',
+        position: 'relative',
+        cursor: 'pointer',
+        background: 'rgb(249, 250, 251)',
+        borderRight: '1px solid rgb(229, 231, 235)',
+        whiteSpace: 'nowrap',
+        display: 'flex',
+        alignItems: 'center',
+        overflowX: 'visible',
+        margin: '0px',
+        textOverflow: 'ellipsis',
+        minHeight: '36px',
+        // 2.25rem * 16px = 36px
+    },
+    columnHeaderLabel: {
+        fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+        WebkitTapHighlightColor: 'transparent',
+        color: 'rgb(55, 65, 81)',
+        textDecoration: 'none',
+        fontWeight: 500,
+        fontSize: '14px', // 0.875rem * 16px = 14px
+        lineHeight: '20px', // 1.25rem * 16px = 20px
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+    },
+};
+export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent, width, }) => {
+    if (loading) {
+        return (_jsxs("div", { style: {
+                background: theme.backgroundColor,
+                // maxHeight: 700,
+                width: width || 250,
+                minWidth: 250,
+                // overflowY: 'scroll',
+                height: '100%',
+                // maxHeight: "100%",
+                paddingLeft: 20,
+                paddingRight: 30,
+                paddingTop: 40,
+                display: 'flex',
+                // alignItems: 'center',
+                justifyContent: 'center',
+            }, children: [_jsx("div", { style: { height: 100 } }), LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsxs("svg", { width: "24", height: "24", children: [_jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }));
+    }
+    return (_jsx("div", { style: {
+            background: theme.backgroundColor,
+            // maxHeight: 700,
+            width: width || 250,
+            minWidth: 250,
+            overflowY: 'auto',
+            height: '100%',
+            // maxHeight: "100%",
+            paddingLeft: 20,
+            paddingRight: 30,
+        }, children: schema.map((elem, index) => (_jsx(SchemaItem, { elem: elem, theme: theme, index: index }, elem.displayName + index))) }));
+};
+function SchemaItem({ elem, theme, index }) {
+    const [isOpen, setIsOpen] = useState(index === 0);
+    const schemaContainerStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        // WebkitTouchCallout: "none",
+        // WebkitUserSelect: "none",
+        // KhtmlUserSelect: "none",
+        // MozUserSelect: "none",
+        // msUserSelect: "none",
+        // userSelect: "none",
+    };
+    const schemaRowStyle = {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        justifyContent: 'space-between',
+        cursor: 'pointer',
+    };
+    const schemaRowHoverStyle = {
+        background: theme.selectUnderlayColor,
+    };
+    return (_jsxs("div", { style: schemaContainerStyle, children: [_jsxs("div", { style: { ...schemaRowStyle, ...(isOpen && schemaRowHoverStyle) }, onClick: () => setIsOpen(!isOpen), children: [_jsx("p", { style: {
+                            marginLeft: theme.padding,
+                            fontSize: 13,
+                            color: '#384151',
+                            fontWeight: '500',
+                            whiteSpace: 'nowrap',
+                            padding: 0,
+                            margin: 0,
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                            userSelect: 'none',
+                            fontFamily: theme?.fontFamily,
+                        }, title: elem.displayName, children: elem.displayName }), _jsx("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            // paddingRight: 25,
+                            paddingTop: 12,
+                            paddingBottom: 12,
+                            paddingLeft: 0,
+                            cursor: 'pointer',
+                            userSelect: 'none',
+                        }, children: isOpen ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", fill: theme.secondaryTextColor, children: _jsx("path", { fillRule: "evenodd", d: "M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z", clipRule: "evenodd" }) })) : (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "12", height: "12", fill: theme.secondaryTextColor, children: _jsx("path", { fillRule: "evenodd", d: "M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z", clipRule: "evenodd" }) })) })] }), isOpen ? (_jsx("div", { style: {
+                    paddingBottom: theme.padding,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingLeft: theme.padding,
+                    paddingRight: theme.padding,
+                }, children: elem.columns.map((elem, index) => (_jsxs("div", { style: {
+                        paddingTop: theme.padding,
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                    }, children: [_jsx("div", { title: elem.displayName, 
+                            // className="text-gray-500"
+                            style: {
+                                fontSize: 12,
+                                //   color: theme.secondaryFontColor,
+                                whiteSpace: 'nowrap',
+                                color: theme.secondaryTextColor,
+                                // color: "#6C727F",
+                                padding: 0,
+                                margin: 0,
+                                textOverflow: 'ellipsis',
+                                overflow: 'hidden',
+                                width: 200,
+                                maxWidth: 200,
+                                fontFamily: theme?.fontFamily,
+                            }, children: elem.displayName }), _jsx("div", { 
+                            // className="text-gray-500"
+                            title: elem.displayName, style: {
+                                fontSize: 12,
+                                // color: '#6C727F',
+                                color: theme.secondaryTextColor,
+                                padding: 0,
+                                margin: 0,
+                                fontFamily: theme?.fontFamily,
+                            }, children: elem.fieldType })] }, elem.displayName + elem.index))) })) : null] }));
+}

package/dist/esm/Table.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface TableColumn {
+    label: string;
+    field: string;
+}
+interface ChartIdTableProps {
+    chartId: string;
+    containerStyle?: React.CSSProperties;
+    csvFilename?: string;
+    showDownloadCsvButton?: boolean;
+    LoadingComponent?: () => JSX.Element;
+}
+interface DataTableProps {
+    columns: TableColumn[];
+    rows: object[];
+    containerStyle?: React.CSSProperties;
+    csvFilename?: string;
+    showDownloadCsvButton?: boolean;
+    LoadingComponent?: () => JSX.Element;
+    loading?: boolean;
+    height?: string;
+}
+type TableWrapperProps = ChartIdTableProps | DataTableProps;
+declare const Table: (data: TableWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export default Table;
+//# sourceMappingURL=Table.d.ts.map

package/dist/esm/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAY/D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,iBAAiB,GAAG,iBAAiB,GAAG,cAAc,CAAC;AAE5D,QAAA,MAAM,KAAK,SAAU,iBAAiB,4CAmCrC,CAAC;AAyKF,eAAe,KAAK,CAAC"}