@sqlrooms/sql-editor 0.0.3 → 0.1.0

package/dist/SqlEditor.d.ts

@@ -1,6 +1,4 @@
-import { SqlEditorConfig } from '@sqlrooms/project-config';
 import React from 'react';
-import { CreateTableModalProps } from './CreateTableModal';
 export type SqlEditorProps = {
     /** The database schema to use for queries. Defaults to 'main' */
     schema?: string;
@@ -8,14 +6,8 @@ export type SqlEditorProps = {
     isOpen: boolean;
     /** Optional component to render SQL documentation in the side panel */
     documentationPanel?: React.ReactNode;
-    /** Configuration object containing queries and selected query state */
-    sqlEditorConfig: SqlEditorConfig;
-    /** Callback fired when the SQL editor configuration changes */
-    onChange: (config: SqlEditorConfig) => void;
     /** Callback fired when the SQL editor should be closed */
     onClose: () => void;
-    /** Callback fired when a new table should be created from query results */
-    onAddOrUpdateSqlQuery: CreateTableModalProps['onAddOrUpdateSqlQuery'];
 };
 /**
  * A full-featured SQL editor component with query execution, table management, and results visualization.

package/dist/SqlEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SqlEditor.d.ts","sourceRoot":"","sources":["../src/SqlEditor.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,eAAe,EAAC,MAAM,0BAA0B,CAAC;AA4BzD,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAyB,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAO3E,MAAM,MAAM,cAAc,GAAG;IAC3B,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;IAEhB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAErC,uEAAuE;IACvE,eAAe,EAAE,eAAe,CAAC;IAEjC,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAE5C,0DAA0D;IAC1D,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,2EAA2E;IAC3E,qBAAqB,EAAE,qBAAqB,CAAC,uBAAuB,CAAC,CAAC;CACvE,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAibvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SqlEditor.d.ts","sourceRoot":"","sources":["../src/SqlEditor.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAUtE,MAAM,MAAM,cAAc,GAAG;IAC3B,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;IAEhB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAErC,0DAA0D;IAC1D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsbvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/SqlEditor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { DataTableVirtualized, QueryDataTable, useArrowDataTable, } from '@sqlrooms/data-table';
 import { DuckQueryError, escapeId, getDuckTables, useDuckDb, } from '@sqlrooms/duckdb';
-import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, SpinnerPane, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ResizablePanelGroup, ResizablePanel, ResizableHandle, } from '@sqlrooms/ui';
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, SpinnerPane, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, } from '@sqlrooms/ui';
 import { genRandomStr, generateUniqueName } from '@sqlrooms/utils';
 import { csvFormat } from 'd3-dsv';
 import { saveAs } from 'file-saver';
@@ -10,6 +10,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import CreateTableModal from './CreateTableModal';
 import DeleteSqlQueryModal from './DeleteSqlQueryModal';
 import RenameSqlQueryModal from './RenameSqlQueryModal';
+import { useStoreWithSqlEditor } from './SqlEditorSlice';
 import { TablesList } from './TablesList';
 const DEFAULT_QUERY = '';
 /**
@@ -26,8 +27,11 @@ const DEFAULT_QUERY = '';
  *
  */
 const SqlEditor = (props) => {
-    const { schema = 'main', documentationPanel, onAddOrUpdateSqlQuery, sqlEditorConfig, onChange, } = props;
+    const { schema = 'main', documentationPanel } = props;
     const duckConn = useDuckDb();
+    const addOrUpdateSqlQuery = useStoreWithSqlEditor((state) => state.sqlEditor.addOrUpdateSqlQuery);
+    const sqlEditorConfig = useStoreWithSqlEditor((s) => s.projectConfig.sqlEditor);
+    const onChangeSqlEditorConfig = useStoreWithSqlEditor((s) => s.sqlEditor.setSqlEditorConfig);
     const [showDocs, setShowDocs] = useState(false);
     const [tables, setTables] = useState([]);
     const [tablesLoading, setTablesLoading] = useState(false);
@@ -98,7 +102,7 @@ const SqlEditor = (props) => {
         return getQueryIndexById(sqlEditorConfig.selectedQueryId);
     };
     const handleTabChange = (value) => {
-        onChange({
+        onChangeSqlEditorConfig({
             ...sqlEditorConfig,
             selectedQueryId: value,
         });
@@ -114,7 +118,7 @@ const SqlEditor = (props) => {
             ...newQueries[currentIndex],
             query: e.target.value,
         };
-        onChange({
+        onChangeSqlEditorConfig({
             ...sqlEditorConfig,
             queries: newQueries,
         });
@@ -159,7 +163,7 @@ const SqlEditor = (props) => {
     const handleFinishRename = (newName) => {
         if (queryToRename) {
             const newQueries = sqlEditorConfig.queries.map((q) => q.id === queryToRename.id ? { ...q, name: newName || q.name } : q);
-            onChange({
+            onChangeSqlEditorConfig({
                 ...sqlEditorConfig,
                 queries: newQueries,
             });
@@ -174,7 +178,7 @@ const SqlEditor = (props) => {
         if (queryId === sqlEditorConfig.selectedQueryId && currentIndex > 0) {
             const prevId = sqlEditorConfig.queries[currentIndex - 1]?.id;
             if (prevId) {
-                onChange({
+                onChangeSqlEditorConfig({
                     ...sqlEditorConfig,
                     selectedQueryId: prevId,
                 });
@@ -189,7 +193,7 @@ const SqlEditor = (props) => {
             query: DEFAULT_QUERY,
         };
         newQueries.push(newQuery);
-        onChange({
+        onChangeSqlEditorConfig({
             ...sqlEditorConfig,
             queries: newQueries,
             selectedQueryId: newQuery.id,
@@ -201,13 +205,13 @@ const SqlEditor = (props) => {
                                                                                                     }, children: "Rename" }), sqlEditorConfig.queries.length > 1 && (_jsx(DropdownMenuItem, { onClick: (e) => {
                                                                                                         e.stopPropagation();
                                                                                                         handleDeleteQuery(q.id, e);
-                                                                                                    }, className: "text-red-500", children: "Delete" }))] })] })] }, q.id))) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: handleNewQuery, className: "ml-2", children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] }), sqlEditorConfig.queries.map((q) => (_jsx(TabsContent, { value: q.id, className: "flex-grow data-[state=active]:flex-grow", children: _jsx(Textarea, { id: q.id, value: q.query, onChange: handleUpdateQuery, className: "h-full font-mono text-sm resize-none bg-muted" }) }, q.id)))] }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 50, children: _jsx("div", { className: "h-full overflow-hidden bg-muted text-sm", children: loading ? (_jsx(SpinnerPane, { h: "100%" })) : selectedTable ? (_jsx(QueryDataTable, { query: `SELECT * FROM ${schema}.${escapeId(selectedTable)}` })) : error ? (_jsx("div", { className: "w-full h-full p-5 overflow-auto", children: _jsx("pre", { className: "text-xs leading-tight text-red-500", children: error }) })) : resultsTableData ? (_jsxs("div", { className: "flex-grow overflow-hidden flex flex-col relative", children: [_jsx(DataTableVirtualized, { ...resultsTableData }), _jsxs("div", { className: "absolute bottom-0 right-0 flex gap-2 p-2", children: [_jsxs(Button, { size: "sm", disabled: !resultsTableData, onClick: handleCreateTable, children: [_jsx(PlusIcon, { className: "w-4 h-4 mr-2" }), "Create table"] }), _jsxs(Button, { size: "sm", disabled: !results, onClick: handleExport, children: [_jsx(DownloadIcon, { className: "w-4 h-4 mr-2" }), "Export"] })] })] })) : null }) })] }) }), showDocs && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 30, children: documentationPanel })] }))] }) }), _jsx(CreateTableModal, { query: currentQuery, isOpen: createTableModalOpen, onClose: () => setCreateTableModalOpen(false), onAddOrUpdateSqlQuery: onAddOrUpdateSqlQuery }), _jsx(DeleteSqlQueryModal, { isOpen: queryToDelete !== null, onClose: () => setQueryToDelete(null), onConfirm: () => {
+                                                                                                    }, className: "text-red-500", children: "Delete" }))] })] })] }, q.id))) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: handleNewQuery, className: "ml-2", children: _jsx(PlusIcon, { className: "h-4 w-4" }) })] }), sqlEditorConfig.queries.map((q) => (_jsx(TabsContent, { value: q.id, className: "flex-grow data-[state=active]:flex-grow", children: _jsx(Textarea, { id: q.id, value: q.query, onChange: handleUpdateQuery, className: "h-full font-mono text-sm resize-none bg-muted" }) }, q.id)))] }) }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 50, children: _jsx("div", { className: "h-full overflow-hidden bg-muted text-sm", children: loading ? (_jsx(SpinnerPane, { h: "100%" })) : selectedTable ? (_jsx(QueryDataTable, { query: `SELECT * FROM ${schema}.${escapeId(selectedTable)}` })) : error ? (_jsx("div", { className: "w-full h-full p-5 overflow-auto", children: _jsx("pre", { className: "text-xs leading-tight text-red-500", children: error }) })) : resultsTableData ? (_jsxs("div", { className: "flex-grow overflow-hidden flex flex-col relative", children: [_jsx(DataTableVirtualized, { ...resultsTableData }), _jsxs("div", { className: "absolute bottom-0 right-0 flex gap-2 p-2", children: [_jsxs(Button, { size: "sm", disabled: !resultsTableData, onClick: handleCreateTable, children: [_jsx(PlusIcon, { className: "w-4 h-4 mr-2" }), "Create table"] }), _jsxs(Button, { size: "sm", disabled: !results, onClick: handleExport, children: [_jsx(DownloadIcon, { className: "w-4 h-4 mr-2" }), "Export"] })] })] })) : null }) })] }) }), showDocs && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 30, children: documentationPanel })] }))] }) }), _jsx(CreateTableModal, { query: currentQuery, isOpen: createTableModalOpen, onClose: () => setCreateTableModalOpen(false), onAddOrUpdateSqlQuery: addOrUpdateSqlQuery }), _jsx(DeleteSqlQueryModal, { isOpen: queryToDelete !== null, onClose: () => setQueryToDelete(null), onConfirm: () => {
                             const newQueries = sqlEditorConfig.queries.filter((q) => q.id !== queryToDelete);
                             const deletedIndex = getQueryIndexById(queryToDelete);
                             const selectedQueryId = newQueries[Math.min(deletedIndex, newQueries.length - 1)]?.id ||
                                 newQueries[0]?.id;
                             if (selectedQueryId) {
-                                onChange({
+                                onChangeSqlEditorConfig({
                                     ...sqlEditorConfig,
                                     queries: newQueries,
                                     selectedQueryId,

package/dist/SqlEditorSlice.d.ts

@@ -0,0 +1,20 @@
+import { ProjectState } from '@sqlrooms/project-builder';
+import { BaseProjectConfig } from '@sqlrooms/project-config';
+import { SqlEditorSliceConfig } from './SqlEditorSliceConfig';
+export declare function createDefaultSqlEditorConfig(): SqlEditorSliceConfig;
+export type SqlEditorSliceState = {
+    sqlEditor: {
+        setSqlEditorConfig: (config: SqlEditorSliceConfig['sqlEditor']) => void;
+        /**
+         * Pin a panel.
+         * @param panel - The panel to pin.
+         */
+        addOrUpdateSqlQuery(tableName: string, query: string, oldTableName?: string): Promise<void>;
+    };
+};
+export declare function createSqlEditorSlice<PC extends BaseProjectConfig & SqlEditorSliceConfig>(): import("zustand").StateCreator<SqlEditorSliceState>;
+type ProjectConfigWithSqlEditor = BaseProjectConfig & SqlEditorSliceConfig;
+type ProjectStateWithSqlEditor = ProjectState<ProjectConfigWithSqlEditor> & SqlEditorSliceState;
+export declare function useStoreWithSqlEditor<T>(selector: (state: ProjectStateWithSqlEditor) => T): T;
+export {};
+//# sourceMappingURL=SqlEditorSlice.d.ts.map

package/dist/SqlEditorSlice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlEditorSlice.d.ts","sourceRoot":"","sources":["../src/SqlEditorSlice.tsx"],"names":[],"mappings":"AAKA,OAAO,EAGL,YAAY,EAEb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAC,iBAAiB,EAAkB,MAAM,0BAA0B,CAAC;AAG5E,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAE5D,wBAAgB,4BAA4B,IAAI,oBAAoB,CAOnE;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE;QACT,kBAAkB,EAAE,CAAC,MAAM,EAAE,oBAAoB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;QACxE;;;WAGG;QACH,mBAAmB,CACjB,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,EACb,YAAY,CAAC,EAAE,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,EAAE,SAAS,iBAAiB,GAAG,oBAAoB,yDA+CpD;AAED,KAAK,0BAA0B,GAAG,iBAAiB,GAAG,oBAAoB,CAAC;AAC3E,KAAK,yBAAyB,GAAG,YAAY,CAAC,0BAA0B,CAAC,GACvE,mBAAmB,CAAC;AAEtB,wBAAgB,qBAAqB,CAAC,CAAC,EACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,CAAC,GAChD,CAAC,CAMH"}

package/dist/SqlEditorSlice.js

@@ -0,0 +1,56 @@
+import { createTableFromQuery, getDuckTables, getDuckTableSchemas, } from '@sqlrooms/duckdb';
+import { createProjectSlice, DataSourceStatus, useBaseProjectStore, } from '@sqlrooms/project-builder';
+import { DataSourceTypes } from '@sqlrooms/project-config';
+import { generateUniqueName } from '@sqlrooms/utils';
+import { produce } from 'immer';
+export function createDefaultSqlEditorConfig() {
+    return {
+        sqlEditor: {
+            queries: [{ id: 'default', name: 'Untitled', query: '' }],
+            selectedQueryId: 'default',
+        },
+    };
+}
+export function createSqlEditorSlice() {
+    return createProjectSlice((set, get) => ({
+        sqlEditor: {
+            setSqlEditorConfig: (config) => {
+                set((state) => produce(state, (draft) => {
+                    draft.projectConfig.sqlEditor = config;
+                }));
+            },
+            addOrUpdateSqlQuery: async (tableName, query, oldTableName) => {
+                const { schema } = get();
+                const newTableName = tableName !== oldTableName
+                    ? generateUniqueName(tableName, await getDuckTables(schema))
+                    : tableName;
+                const { rowCount } = await createTableFromQuery(newTableName, query);
+                get().setTableRowCount(newTableName, rowCount);
+                set((state) => produce(state, (draft) => {
+                    const newDataSource = {
+                        type: DataSourceTypes.enum.sql,
+                        sqlQuery: query,
+                        tableName: newTableName,
+                    };
+                    if (oldTableName) {
+                        draft.projectConfig.dataSources =
+                            draft.projectConfig.dataSources.map((dataSource) => dataSource.tableName === oldTableName
+                                ? newDataSource
+                                : dataSource);
+                        delete draft.dataSourceStates[oldTableName];
+                    }
+                    else {
+                        draft.projectConfig.dataSources.push(newDataSource);
+                    }
+                    draft.dataSourceStates[newTableName] = {
+                        status: DataSourceStatus.READY,
+                    };
+                }));
+                await get().setTables(await getDuckTableSchemas());
+            },
+        },
+    }));
+}
+export function useStoreWithSqlEditor(selector) {
+    return useBaseProjectStore((state) => selector(state));
+}

package/dist/SqlEditorSliceConfig.d.ts

@@ -0,0 +1,53 @@
+import { z } from 'zod';
+export declare const SqlEditorSliceConfig: z.ZodObject<{
+    sqlEditor: z.ZodObject<{
+        queries: z.ZodArray<z.ZodObject<{
+            id: z.ZodString;
+            name: z.ZodString;
+            query: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            query: string;
+            name: string;
+            id: string;
+        }, {
+            query: string;
+            name: string;
+            id: string;
+        }>, "many">;
+        selectedQueryId: z.ZodDefault<z.ZodString>;
+    }, "strip", z.ZodTypeAny, {
+        queries: {
+            query: string;
+            name: string;
+            id: string;
+        }[];
+        selectedQueryId: string;
+    }, {
+        queries: {
+            query: string;
+            name: string;
+            id: string;
+        }[];
+        selectedQueryId?: string | undefined;
+    }>;
+}, "strip", z.ZodTypeAny, {
+    sqlEditor: {
+        queries: {
+            query: string;
+            name: string;
+            id: string;
+        }[];
+        selectedQueryId: string;
+    };
+}, {
+    sqlEditor: {
+        queries: {
+            query: string;
+            name: string;
+            id: string;
+        }[];
+        selectedQueryId?: string | undefined;
+    };
+}>;
+export type SqlEditorSliceConfig = z.infer<typeof SqlEditorSliceConfig>;
+//# sourceMappingURL=SqlEditorSliceConfig.d.ts.map

package/dist/SqlEditorSliceConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlEditorSliceConfig.d.ts","sourceRoot":"","sources":["../src/SqlEditorSliceConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAC;AAEtB,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAc/B,CAAC;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/SqlEditorSliceConfig.js

@@ -0,0 +1,14 @@
+import { z } from 'zod';
+export const SqlEditorSliceConfig = z.object({
+    sqlEditor: z.object({
+        queries: z.array(z.object({
+            id: z.string().describe('Query identifier.'),
+            name: z.string().describe('Query name.'),
+            query: z.string().describe('SQL query to execute.'),
+        })),
+        selectedQueryId: z
+            .string()
+            .default('default')
+            .describe('The id of the currently selected query.'),
+    }),
+});

package/dist/SqlQueryDataSourcesPanel.d.ts

@@ -0,0 +1,7 @@
+import { SqlQueryDataSource } from '@sqlrooms/project-config';
+import { FC } from 'react';
+declare const SqlQueryDataSourcesPanel: FC<{
+    queryDataSources: SqlQueryDataSource[];
+}>;
+export { SqlQueryDataSourcesPanel };
+//# sourceMappingURL=SqlQueryDataSourcesPanel.d.ts.map

package/dist/SqlQueryDataSourcesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SqlQueryDataSourcesPanel.d.ts","sourceRoot":"","sources":["../src/SqlQueryDataSourcesPanel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAgB5D,OAAO,EAAC,EAAE,EAAwB,MAAM,OAAO,CAAC;AAIhD,QAAA,MAAM,wBAAwB,EAAE,EAAE,CAAC;IACjC,gBAAgB,EAAE,kBAAkB,EAAE,CAAC;CACxC,CAwHA,CAAC;AAEF,OAAO,EAAC,wBAAwB,EAAC,CAAC"}

package/dist/SqlQueryDataSourcesPanel.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DataSourceStatus, useBaseProjectStore } from '@sqlrooms/project-builder';
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@sqlrooms/ui';
+import { EllipsisIcon, FileIcon, PencilIcon, PlusIcon, RefreshCcwIcon, XIcon, } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import CreateTableModal from './CreateTableModal';
+import { useStoreWithSqlEditor } from './SqlEditorSlice';
+const SqlQueryDataSourcesPanel = (props) => {
+    const { queryDataSources } = props;
+    const [selectedDataSource, setSelectedDataSource] = useState();
+    const [isOpen, setIsOpen] = useState(false);
+    const dataSourceStates = useBaseProjectStore((state) => state.dataSourceStates);
+    const removeSqlQueryDataSource = useBaseProjectStore((state) => state.removeSqlQueryDataSource);
+    const handleEdit = useCallback((dataSource) => {
+        setSelectedDataSource(dataSource);
+        setIsOpen(true);
+    }, []);
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+        setSelectedDataSource(undefined);
+    }, []);
+    const handleRemove = useCallback((dataSource) => {
+        const { tableName } = dataSource;
+        removeSqlQueryDataSource(tableName);
+    }, [removeSqlQueryDataSource]);
+    const addOrUpdateSqlQuery = useStoreWithSqlEditor((state) => state.sqlEditor.addOrUpdateSqlQuery);
+    const isReadOnly = useBaseProjectStore((state) => state.isReadOnly);
+    return (_jsxs("div", { className: "flex flex-col overflow-auto flex-grow", children: [_jsx("div", { className: "flex flex-col items-stretch", children: _jsxs(Button, { variant: "secondary", size: "sm", className: "text-white", onClick: () => setIsOpen(true), disabled: isReadOnly, children: [_jsx(PlusIcon, { className: "mr-2 h-4 w-4" }), "Add"] }) }), _jsx(CreateTableModal, { isOpen: isOpen, onClose: handleClose, editDataSource: selectedDataSource, query: "", onAddOrUpdateSqlQuery: addOrUpdateSqlQuery }), _jsx("div", { className: "flex flex-col overflow-auto flex-grow", children: queryDataSources.map((dataSource) => (_jsxs("div", { className: "p-2 flex flex-col gap-1", children: [_jsxs("div", { className: "flex gap-1 cursor-pointer flex-row items-center", children: [_jsx("div", { className: "flex-none w-[15px]", children: _jsx(FileIcon, { className: "w-[15px]" }) }), _jsx("div", { className: "flex-1 overflow-hidden text-ellipsis", children: _jsx("span", { className: "text-xs break-words", children: dataSource.tableName }) }), _jsx("div", { className: "flex-none", children: !isReadOnly ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { size: "icon", variant: "ghost", className: "h-6 w-6 text-muted-foreground", children: _jsx(EllipsisIcon, { className: "h-5 w-5" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => handleEdit(dataSource), children: [_jsx(PencilIcon, { className: "mr-2 h-4 w-4" }), "Edit"] }), _jsxs(DropdownMenuItem, { disabled: true, children: [_jsx(RefreshCcwIcon, { className: "mr-2 h-4 w-4" }), "Refresh"] }), _jsxs(DropdownMenuItem, { onClick: () => handleRemove(dataSource), children: [_jsx(XIcon, { className: "mr-2 h-4 w-4" }), "Remove from project"] })] })] })) : null })] }), _jsx("div", { className: "flex flex-row gap-1 items-center", children: dataSourceStates[dataSource.tableName]?.status ===
+                                DataSourceStatus.ERROR ? (_jsx("div", { className: "flex-1 bg-destructive/15 text-destructive text-xs p-1 rounded", children: dataSourceStates[dataSource.tableName]?.message })) : dataSourceStates[dataSource.tableName]?.status ===
+                                DataSourceStatus.FETCHING ? (_jsx("div", { className: "w-full bg-secondary h-1 rounded overflow-hidden", children: _jsx("div", { className: "h-full bg-primary animate-pulse" }) })) : null })] }, dataSource.tableName))) })] }));
+};
+export { SqlQueryDataSourcesPanel };

package/dist/index.d.ts

@@ -2,4 +2,8 @@ export { default as CreateTableModal } from './CreateTableModal';
 export { default as SqlEditor } from './SqlEditor';
 export type { SqlEditorProps as Props } from './SqlEditor';
 export { default as SqlEditorModal } from './SqlEditorModal';
+export { createDefaultSqlEditorConfig, createSqlEditorSlice, } from './SqlEditorSlice';
+export type { SqlEditorSliceState } from './SqlEditorSlice';
+export { SqlQueryDataSourcesPanel } from './SqlQueryDataSourcesPanel';
+export { SqlEditorSliceConfig } from './SqlEditorSliceConfig';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,aAAa,CAAC;AACjD,YAAY,EAAC,cAAc,IAAI,KAAK,EAAC,MAAM,aAAa,CAAC;AACzD,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,aAAa,CAAC;AACjD,YAAY,EAAC,cAAc,IAAI,KAAK,EAAC,MAAM,aAAa,CAAC;AACzD,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EACL,4BAA4B,EAC5B,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -1,3 +1,6 @@
 export { default as CreateTableModal } from './CreateTableModal';
 export { default as SqlEditor } from './SqlEditor';
 export { default as SqlEditorModal } from './SqlEditorModal';
+export { createDefaultSqlEditorConfig, createSqlEditorSlice, } from './SqlEditorSlice';
+export { SqlQueryDataSourcesPanel } from './SqlQueryDataSourcesPanel';
+export { SqlEditorSliceConfig } from './SqlEditorSliceConfig';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/sql-editor",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "private": false,
   "author": "Ilya Boyandin <ilya@boyandin.me>",
   "license": "MIT",
@@ -26,20 +26,23 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",
-    "@sqlrooms/data-table": "0.0.3",
-    "@sqlrooms/duckdb": "0.0.3",
-    "@sqlrooms/layout": "0.0.3",
-    "@sqlrooms/project-config": "0.0.3",
-    "@sqlrooms/ui": "0.0.3",
-    "@sqlrooms/utils": "0.0.3",
+    "@sqlrooms/data-table": "0.1.0",
+    "@sqlrooms/duckdb": "0.1.0",
+    "@sqlrooms/layout": "0.1.0",
+    "@sqlrooms/project-builder": "0.1.0",
+    "@sqlrooms/project-config": "0.1.0",
+    "@sqlrooms/ui": "0.1.0",
+    "@sqlrooms/utils": "0.1.0",
     "apache-arrow": "^18.1.0",
     "d3-dsv": "^3.0.1",
     "file-saver": "^2.0.5",
-    "lucide-react": "^0.323.0",
+    "immer": "^10.1.1",
+    "lucide-react": "^0.474.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.54.2",
-    "zod": "^3.22.4"
+    "zod": "^3.24.1",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@types/d3-dsv": "^3.0.7",
@@ -47,5 +50,5 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18"
   },
-  "gitHead": "4269a3efdb5a903cb2498c126e9c36683b3bbae0"
+  "gitHead": "2d44f6636dbd53d18c32a422351e93caa182ada6"
 }