@sqlrooms/sql-editor 0.0.0 → 0.0.1-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,8 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.0.1-alpha.0 (2025-01-30)
 
+**Note:** Version bump only for package @sqlrooms/sql-editor
 
 **Note:** Version bump only for package @sqlrooms/sql-editor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/sql-editor",
-  "version": "0.0.0",
+  "version": "0.0.1-alpha.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",
-    "@sqlrooms/data-table": "0.0.0",
-    "@sqlrooms/duckdb": "0.0.0",
-    "@sqlrooms/layout": "0.0.0",
-    "@sqlrooms/project-config": "0.0.0",
-    "@sqlrooms/ui": "0.0.0",
-    "@sqlrooms/utils": "0.0.0",
-    "apache-arrow": "^14.0.2",
+    "@sqlrooms/data-table": "0.0.1-alpha.0",
+    "@sqlrooms/duckdb": "0.0.1-alpha.0",
+    "@sqlrooms/layout": "0.0.1-alpha.0",
+    "@sqlrooms/project-config": "0.0.1-alpha.0",
+    "@sqlrooms/ui": "0.0.1-alpha.0",
+    "@sqlrooms/utils": "0.0.1-alpha.0",
+    "apache-arrow": "^18.1.0",
     "d3-dsv": "^3.0.1",
     "file-saver": "^2.0.5",
     "lucide-react": "^0.323.0",
@@ -37,5 +37,5 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18"
   },
-  "gitHead": "4b0c709542475e4f95db0b2a8405ecadcf2ec186"
+  "gitHead": "8e3c0b884db7755c8b892a590af49c0081336d8d"
 }

package/.turbo/turbo-build.log

@@ -1,4 +0,0 @@
-
-> @sqlrooms/sql-editor@0.0.0 build /Users/ilya/Workspace/sqlrooms/packages/sql-editor
-> tsc
-

package/.turbo/turbo-dev.log

@@ -1,7 +0,0 @@
-
-
-> @sqlrooms/sql-editor@1.0.0 dev /Users/ilya/Workspace/sqlrooms/packages/sql-editor
-> tsc -w
-
-[7:31:02 PM] Starting compilation in watch mode...
-

package/.turbo/turbo-lint.log

@@ -1,16 +0,0 @@
-
-> @sqlrooms/sql-editor@0.0.0 lint /Users/ilya/Workspace/sqlrooms/packages/sql-editor
-> eslint .
-
-
-/Users/ilya/Workspace/sqlrooms/packages/sql-editor/src/CreateTableModal.tsx
-   89:10  warning  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
-  114:15  warning  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
-  129:15  warning  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
-
-/Users/ilya/Workspace/sqlrooms/packages/sql-editor/src/RenameSqlQueryModal.tsx
-  58:10  warning  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
-  62:15  warning  Use "@ts-expect-error" instead of "@ts-ignore", as "@ts-ignore" will do nothing if the following line is error-free  @typescript-eslint/ban-ts-comment
-
-✖ 5 problems (0 errors, 5 warnings)
-

package/eslint.config.js

@@ -1,4 +0,0 @@
-import {config} from '@sqlrooms/eslint-config/react-internal';
-
-/** @type {import("eslint").Linter.Config} */
-export default config;

package/src/CreateTableModal.tsx

@@ -1,161 +0,0 @@
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-  Textarea,
-  Alert,
-  AlertDescription,
-} from '@sqlrooms/ui';
-import {DuckQueryError} from '@sqlrooms/duckdb';
-import {
-  SqlQueryDataSource,
-  VALID_TABLE_OR_COLUMN_REGEX,
-} from '@sqlrooms/project-config';
-import {FC, useCallback} from 'react';
-import {useForm} from 'react-hook-form';
-import * as z from 'zod';
-import {zodResolver} from '@hookform/resolvers/zod';
-
-const formSchema = z.object({
-  tableName: z
-    .string()
-    .min(1, 'Table name is required')
-    .regex(
-      VALID_TABLE_OR_COLUMN_REGEX,
-      'Only letters, digits and underscores are allowed; should not start with a digit',
-    ),
-  query: z.string().min(1, 'Query is required'),
-});
-
-export type Props = {
-  query: string;
-  isOpen: boolean;
-  onClose: () => void;
-  editDataSource?: SqlQueryDataSource;
-  onAddOrUpdateSqlQuery: (
-    tableName: string,
-    query: string,
-    oldTableName?: string,
-  ) => Promise<void>;
-};
-
-const CreateTableModal: FC<Props> = (props) => {
-  const {editDataSource, isOpen, onClose, onAddOrUpdateSqlQuery} = props;
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      tableName: editDataSource?.tableName ?? '',
-      query: editDataSource?.sqlQuery ?? props.query.trim(),
-    },
-  });
-
-  const onSubmit = useCallback(
-    async (values: z.infer<typeof formSchema>) => {
-      try {
-        const {tableName, query} = values;
-        await onAddOrUpdateSqlQuery(
-          tableName,
-          query,
-          editDataSource?.tableName,
-        );
-        form.reset();
-        onClose();
-      } catch (err) {
-        form.setError('root', {
-          type: 'manual',
-          message:
-            err instanceof DuckQueryError ? err.getMessageForUser() : `${err}`,
-        });
-      }
-    },
-    [onAddOrUpdateSqlQuery, editDataSource?.tableName, onClose, form],
-  );
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="sm:max-w-[800px]">
-        {/* @ts-ignore */}
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <DialogHeader>
-              <DialogTitle>
-                {editDataSource
-                  ? 'Edit table query'
-                  : 'Create table from query'}
-              </DialogTitle>
-              {!editDataSource && (
-                <DialogDescription>
-                  Create a new table from the results of an SQL query.
-                </DialogDescription>
-              )}
-            </DialogHeader>
-
-            {form.formState.errors.root && (
-              <Alert variant="destructive">
-                <AlertDescription>
-                  {form.formState.errors.root.message}
-                </AlertDescription>
-              </Alert>
-            )}
-
-            <FormField
-              // @ts-ignore
-              control={form.control}
-              name="tableName"
-              render={({field}) => (
-                <FormItem>
-                  <FormLabel>Table name:</FormLabel>
-                  <FormControl>
-                    <Input {...field} className="font-mono" autoFocus />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              // @ts-ignore
-              control={form.control}
-              name="query"
-              render={({field}) => (
-                <FormItem>
-                  <FormLabel>SQL query:</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      {...field}
-                      className="font-mono text-sm bg-secondary min-h-[200px]"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <DialogFooter>
-              <Button type="button" variant="outline" onClick={onClose}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={form.formState.isSubmitting}>
-                {editDataSource ? 'Update' : 'Create'}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default CreateTableModal;

package/src/DeleteSqlQueryModal.tsx

@@ -1,42 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Button,
-} from '@sqlrooms/ui';
-import React from 'react';
-
-interface Props {
-  isOpen: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-}
-
-const DeleteSqlQueryModal: React.FC<Props> = ({isOpen, onClose, onConfirm}) => {
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete Query</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete this query? This action cannot be
-            undone.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="destructive" onClick={onConfirm}>
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default DeleteSqlQueryModal;

package/src/RenameSqlQueryModal.tsx

@@ -1,92 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from '@sqlrooms/ui';
-import React from 'react';
-import {useForm} from 'react-hook-form';
-import * as z from 'zod';
-import {zodResolver} from '@hookform/resolvers/zod';
-
-const formSchema = z.object({
-  queryName: z.string().min(1, 'Query name is required'),
-});
-
-type FormData = z.infer<typeof formSchema>;
-
-interface Props {
-  isOpen: boolean;
-  onClose: () => void;
-  initialName: string;
-  onRename: (newName: string) => void;
-}
-
-const RenameSqlQueryModal: React.FC<Props> = ({
-  isOpen,
-  onClose,
-  initialName,
-  onRename,
-}) => {
-  const form = useForm<FormData>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      queryName: initialName,
-    },
-  });
-
-  function onSubmit(values: FormData) {
-    onRename(values.queryName);
-    onClose();
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Rename Query</DialogTitle>
-        </DialogHeader>
-        {/* @ts-ignore */}
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <FormField
-              // @ts-ignore
-              control={form.control}
-              name="queryName"
-              render={({field}) => (
-                <FormItem>
-                  <FormLabel>Query Name</FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      autoFocus
-                      placeholder="Enter query name"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <DialogFooter>
-              <Button type="button" variant="outline" onClick={onClose}>
-                Cancel
-              </Button>
-              <Button type="submit">Save</Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default RenameSqlQueryModal;

package/src/SqlEditor.tsx

@@ -1,495 +0,0 @@
-import {
-  DataTableVirtualized,
-  QueryDataTable,
-  useArrowDataTable,
-} from '@sqlrooms/data-table';
-import {
-  DuckQueryError,
-  escapeId,
-  getDuckTables,
-  useDuckDb,
-} from '@sqlrooms/duckdb';
-import {SqlEditorConfig} from '@sqlrooms/project-config';
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  SpinnerPane,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-  Textarea,
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizableHandle,
-} from '@sqlrooms/ui';
-import {genRandomStr, generateUniqueName} from '@sqlrooms/utils';
-import {Table} from 'apache-arrow';
-import {csvFormat} from 'd3-dsv';
-import {saveAs} from 'file-saver';
-import {
-  BookOpenIcon,
-  DownloadIcon,
-  MoreVerticalIcon,
-  PlayIcon,
-  PlusIcon,
-} from 'lucide-react';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-import CreateTableModal, {
-  Props as CreateTableModalProps,
-} from './CreateTableModal';
-import DeleteSqlQueryModal from './DeleteSqlQueryModal';
-import RenameSqlQueryModal from './RenameSqlQueryModal';
-import {TablesList} from './TablesList';
-
-const DEFAULT_QUERY = '';
-
-export type Props = {
-  schema?: string;
-  isOpen: boolean;
-  documentationPanel?: React.ReactNode;
-  sqlEditorConfig: SqlEditorConfig;
-  onChange: (config: SqlEditorConfig) => void;
-  onClose: () => void;
-  onAddOrUpdateSqlQuery: CreateTableModalProps['onAddOrUpdateSqlQuery'];
-};
-
-const SqlEditor: React.FC<Props> = (props) => {
-  const {
-    schema = 'main',
-    documentationPanel,
-    onAddOrUpdateSqlQuery,
-    sqlEditorConfig,
-    onChange,
-  } = props;
-  const duckConn = useDuckDb();
-
-  const [showDocs, setShowDocs] = useState(false);
-  const [tables, setTables] = useState<string[]>([]);
-  const [tablesLoading, setTablesLoading] = useState(false);
-  const [tablesError, setTablesError] = useState<Error | null>(null);
-
-  const [results, setResults] = useState<Table>();
-  const resultsTableData = useArrowDataTable(results);
-  const [loading, setLoading] = useState(false);
-  const [selectedTable, setSelectedTable] = useState<string>();
-
-  const [error, setError] = useState<string | null>(null);
-
-  const fetchTables = useCallback(async () => {
-    if (!duckConn.conn) return;
-
-    try {
-      setTablesLoading(true);
-      setTablesError(null);
-      const tablesList = await getDuckTables(schema);
-      setTables(tablesList);
-    } catch (e) {
-      console.error(e);
-      setTablesError(e as Error);
-    } finally {
-      setTablesLoading(false);
-    }
-  }, [duckConn.conn, schema]);
-
-  useEffect(() => {
-    void fetchTables();
-  }, [fetchTables]);
-
-  const runQuery = async (q: string) => {
-    const conn = duckConn.conn;
-    try {
-      setError(null);
-      setLoading(true);
-      await conn.query(`SET search_path = ${schema}`);
-      const results = await conn.query(q);
-      await conn.query(`SET search_path = main`);
-      setResults(results);
-    } catch (e) {
-      setResults(undefined);
-      setError(
-        (e instanceof DuckQueryError
-          ? e.getMessageForUser()
-          : 'Query failed') ?? e,
-      );
-      console.error(e);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSelectTable = (table: string) => {
-    setSelectedTable(table);
-  };
-
-  const handleRunQuery = async () => {
-    setSelectedTable(undefined);
-    const textarea = document.querySelector(
-      `textarea[id="${sqlEditorConfig.selectedQueryId}"]`,
-    );
-    const selectedText =
-      textarea instanceof HTMLTextAreaElement
-        ? textarea?.value.substring(
-            textarea.selectionStart,
-            textarea.selectionEnd,
-          )
-        : undefined;
-
-    const queryToRun = selectedText || currentQuery;
-    await runQuery(queryToRun);
-    void fetchTables();
-  };
-
-  const getQueryIndexById = (id: string) => {
-    return sqlEditorConfig.queries.findIndex((q) => q.id === id);
-  };
-
-  const getCurrentQueryIndex = () => {
-    return getQueryIndexById(sqlEditorConfig.selectedQueryId);
-  };
-
-  const handleTabChange = (value: string) => {
-    onChange({
-      ...sqlEditorConfig,
-      selectedQueryId: value,
-    });
-  };
-
-  const handleUpdateQuery = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (!sqlEditorConfig) return;
-
-    const currentIndex = getCurrentQueryIndex();
-    const newQueries = [...sqlEditorConfig.queries];
-    if (!newQueries[currentIndex]) return;
-    newQueries[currentIndex] = {
-      ...newQueries[currentIndex],
-      query: e.target.value,
-    };
-
-    onChange({
-      ...sqlEditorConfig,
-      queries: newQueries,
-    });
-  };
-  const handleRunQueryRef = useRef(handleRunQuery);
-  handleRunQueryRef.current = handleRunQuery;
-
-  useEffect(() => {
-    const handleKeyDown = (evt: Event) => {
-      if (
-        evt instanceof KeyboardEvent &&
-        evt.key === 'Enter' &&
-        (evt.metaKey || evt.ctrlKey || evt.shiftKey)
-      ) {
-        void handleRunQueryRef.current();
-      }
-    };
-    globalThis.addEventListener('keydown', handleKeyDown);
-    return () => {
-      globalThis.removeEventListener('keydown', handleKeyDown);
-    };
-  }, []);
-
-  const handleExport = () => {
-    if (!results) return;
-    const blob = new Blob([csvFormat(results.toArray())], {
-      type: 'text/plain;charset=utf-8',
-    });
-    saveAs(blob, `export-${genRandomStr(5)}.csv`);
-  };
-
-  const [createTableModalOpen, setCreateTableModalOpen] = useState(false);
-
-  const handleCreateTable = useCallback(() => {
-    setCreateTableModalOpen(true);
-  }, []);
-
-  const handleToggleDocs = useCallback(() => {
-    setShowDocs(!showDocs);
-  }, [showDocs]);
-
-  const currentQuery =
-    sqlEditorConfig.queries[getCurrentQueryIndex()]?.query ?? DEFAULT_QUERY;
-
-  const [queryToDelete, setQueryToDelete] = useState<string | null>(null);
-
-  const [queryToRename, setQueryToRename] = useState<{
-    id: string;
-    name: string;
-  } | null>(null);
-
-  const handleStartRename = (
-    queryId: string,
-    currentName: string,
-    event: React.MouseEvent,
-  ) => {
-    event.preventDefault();
-    setQueryToRename({id: queryId, name: currentName});
-  };
-
-  const handleFinishRename = (newName: string) => {
-    if (queryToRename) {
-      const newQueries = sqlEditorConfig.queries.map((q) =>
-        q.id === queryToRename.id ? {...q, name: newName || q.name} : q,
-      );
-      onChange({
-        ...sqlEditorConfig,
-        queries: newQueries,
-      });
-    }
-    setQueryToRename(null);
-  };
-
-  const handleDeleteQuery = (queryId: string, event: React.MouseEvent) => {
-    event.stopPropagation();
-    const currentIndex = getQueryIndexById(queryId);
-    setQueryToDelete(queryId);
-
-    // Pre-select the previous query if we're deleting the current one
-    if (queryId === sqlEditorConfig.selectedQueryId && currentIndex > 0) {
-      const prevId = sqlEditorConfig.queries[currentIndex - 1]?.id;
-      if (prevId) {
-        onChange({
-          ...sqlEditorConfig,
-          selectedQueryId: prevId,
-        });
-      }
-    }
-  };
-
-  const handleNewQuery = () => {
-    const newQueries = [...sqlEditorConfig.queries];
-    const newQuery = {
-      id: genRandomStr(8),
-      name: generateUniqueName(
-        'Untitled',
-        newQueries.map((q) => q.name),
-      ),
-      query: DEFAULT_QUERY,
-    };
-    newQueries.push(newQuery);
-
-    onChange({
-      ...sqlEditorConfig,
-      queries: newQueries,
-      selectedQueryId: newQuery.id,
-    });
-  };
-
-  return (
-    <>
-      <div className="absolute right-12">
-        <Button
-          size="sm"
-          variant={showDocs ? 'secondary' : 'outline'}
-          onClick={handleToggleDocs}
-        >
-          <BookOpenIcon className="w-4 h-4 mr-2" />
-          SQL reference
-        </Button>
-      </div>
-      <div className="flex flex-col w-full gap-2">
-        <div className="flex items-center gap-2 ml-1 mr-10 mb-2">
-          <h2 className="text-lg font-semibold">SQL Editor</h2>
-        </div>
-        <div className="flex-grow h-full bg-muted">
-          <ResizablePanelGroup direction="horizontal" className="h-full">
-            <ResizablePanel defaultSize={20}>
-              {tablesLoading ? (
-                <SpinnerPane h="100%" />
-              ) : tablesError ? (
-                <div className="p-4 text-red-500">
-                  Error loading tables: {tablesError.message}
-                </div>
-              ) : (
-                <TablesList
-                  schema="information_schema"
-                  tableNames={tables}
-                  selectedTable={selectedTable}
-                  onSelect={handleSelectTable}
-                />
-              )}
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel defaultSize={showDocs ? 50 : 80}>
-              <ResizablePanelGroup direction="vertical" className="h-full">
-                <ResizablePanel defaultSize={50}>
-                  <div className="flex flex-col h-full gap-2">
-                    <Tabs
-                      value={sqlEditorConfig.selectedQueryId}
-                      onValueChange={handleTabChange}
-                      className="flex flex-col flex-grow overflow-hidden"
-                    >
-                      <div className="flex items-center gap-2 border-b border-border">
-                        <Button
-                          size="sm"
-                          onClick={() => void handleRunQuery()}
-                          className="uppercase"
-                        >
-                          <PlayIcon className="w-4 h-4 mr-2" />
-                          Run
-                        </Button>
-                        <TabsList className="flex-1">
-                          {sqlEditorConfig.queries.map((q) => (
-                            <div key={q.id} className="relative">
-                              <TabsTrigger
-                                value={q.id}
-                                className="min-w-[60px] px-6 pr-8"
-                              >
-                                {q.name}
-                              </TabsTrigger>
-                              <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                  <div
-                                    className="absolute right-0 top-1/2 -translate-y-1/2 h-6 w-6 flex items-center justify-center cursor-pointer hover:bg-accent rounded-sm"
-                                    onClick={(e) => e.stopPropagation()}
-                                  >
-                                    <MoreVerticalIcon className="h-3 w-3" />
-                                  </div>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent>
-                                  <DropdownMenuItem
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleStartRename(q.id, q.name, e);
-                                    }}
-                                  >
-                                    Rename
-                                  </DropdownMenuItem>
-                                  {sqlEditorConfig.queries.length > 1 && (
-                                    <DropdownMenuItem
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleDeleteQuery(q.id, e);
-                                      }}
-                                      className="text-red-500"
-                                    >
-                                      Delete
-                                    </DropdownMenuItem>
-                                  )}
-                                </DropdownMenuContent>
-                              </DropdownMenu>
-                            </div>
-                          ))}
-                        </TabsList>
-                        <Button
-                          size="icon"
-                          variant="ghost"
-                          onClick={handleNewQuery}
-                          className="ml-2"
-                        >
-                          <PlusIcon className="h-4 w-4" />
-                        </Button>
-                      </div>
-                      {sqlEditorConfig.queries.map((q) => (
-                        <TabsContent
-                          key={q.id}
-                          value={q.id}
-                          className="flex-grow data-[state=active]:flex-grow"
-                        >
-                          <Textarea
-                            id={q.id}
-                            value={q.query}
-                            onChange={handleUpdateQuery}
-                            className="h-full font-mono text-sm resize-none bg-muted"
-                          />
-                        </TabsContent>
-                      ))}
-                    </Tabs>
-                  </div>
-                </ResizablePanel>
-                <ResizableHandle withHandle />
-                <ResizablePanel defaultSize={50}>
-                  <div className="h-full overflow-hidden bg-muted text-sm">
-                    {loading ? (
-                      <SpinnerPane h="100%" />
-                    ) : selectedTable ? (
-                      <QueryDataTable
-                        query={`SELECT * FROM ${schema}.${escapeId(selectedTable)}`}
-                      />
-                    ) : error ? (
-                      <div className="w-full h-full p-5 overflow-auto">
-                        <pre className="text-xs leading-tight text-red-500">
-                          {error}
-                        </pre>
-                      </div>
-                    ) : resultsTableData ? (
-                      <div className="flex-grow overflow-hidden flex flex-col relative">
-                        <DataTableVirtualized {...resultsTableData} />
-                        <div className="absolute bottom-0 right-0 flex gap-2 p-2">
-                          <Button
-                            size="sm"
-                            disabled={!resultsTableData}
-                            onClick={handleCreateTable}
-                          >
-                            <PlusIcon className="w-4 h-4 mr-2" />
-                            Create table
-                          </Button>
-                          <Button
-                            size="sm"
-                            disabled={!results}
-                            onClick={handleExport}
-                          >
-                            <DownloadIcon className="w-4 h-4 mr-2" />
-                            Export
-                          </Button>
-                        </div>
-                      </div>
-                    ) : null}
-                  </div>
-                </ResizablePanel>
-              </ResizablePanelGroup>
-            </ResizablePanel>
-            {showDocs && (
-              <>
-                <ResizableHandle withHandle />
-                <ResizablePanel defaultSize={30}>
-                  {documentationPanel}
-                </ResizablePanel>
-              </>
-            )}
-          </ResizablePanelGroup>
-        </div>
-        <CreateTableModal
-          query={currentQuery}
-          isOpen={createTableModalOpen}
-          onClose={() => setCreateTableModalOpen(false)}
-          onAddOrUpdateSqlQuery={onAddOrUpdateSqlQuery}
-        />
-        <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({
-                ...sqlEditorConfig,
-                queries: newQueries,
-                selectedQueryId,
-              });
-            }
-            setQueryToDelete(null);
-          }}
-        />
-        <RenameSqlQueryModal
-          isOpen={queryToRename !== null}
-          onClose={() => setQueryToRename(null)}
-          initialName={queryToRename?.name ?? ''}
-          onRename={handleFinishRename}
-        />
-      </div>
-    </>
-  );
-};
-
-export default SqlEditor;

package/src/SqlEditorModal.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import {SpinnerPane} from '@sqlrooms/ui';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogOverlay,
-  DialogTitle,
-} from '@sqlrooms/ui';
-import React, {Suspense} from 'react';
-import SqlEditor, {Props} from './SqlEditor';
-
-const SqlEditorModal: React.FC<Props> = (props) => {
-  const {isOpen, onClose} = props;
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogOverlay className="bg-background/80" />
-      <DialogContent className="max-w-[100vw] max-h-[100vh] w-[100vw] h-[100vh] p-3">
-        <DialogHeader className="sr-only">
-          <DialogTitle>SQL Editor</DialogTitle>
-        </DialogHeader>
-        <Suspense fallback={<SpinnerPane h="100%" />}>
-          <SqlEditor {...props} />
-        </Suspense>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default SqlEditorModal;

package/src/TablesList.tsx

@@ -1,50 +0,0 @@
-import {Button} from '@sqlrooms/ui';
-import {TableIcon} from 'lucide-react';
-import type {FC} from 'react';
-
-type Props = {
-  schema: string;
-  tableNames: string[];
-  selectedTable?: string;
-  onSelect: (name: string) => void;
-  onChange?: () => void;
-  renderTableButton?: (
-    tableName: string,
-    onSelect: Props['onSelect'],
-  ) => React.ReactNode;
-};
-
-const TablesList: FC<Props> = (props) => {
-  const {
-    tableNames,
-    selectedTable,
-    onSelect,
-    renderTableButton = (tableName: string, onSelect: Props['onSelect']) => (
-      <Button
-        className="w-full justify-start font-normal overflow-hidden whitespace-normal min-h-[25px] text-sm text-left break-words select-text"
-        variant={selectedTable === tableName ? 'secondary' : 'ghost'}
-        size="sm"
-        onClick={() => onSelect(tableName)}
-      >
-        <TableIcon className="h-4 w-4" />
-        {tableName}
-      </Button>
-    ),
-  } = props;
-
-  return (
-    <div className="h-full bg-background/10 px-2 py-4 overflow-auto">
-      <ul className="space-y-1">
-        {tableNames.map((tableName, i) => (
-          <li key={i}>
-            <div className="flex items-center gap-1">
-              {renderTableButton(tableName, onSelect)}
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export {TablesList};

package/src/index.ts

@@ -1,4 +0,0 @@
-export {default as CreateTableModal} from './CreateTableModal';
-export {default as SqlEditor} from './SqlEditor';
-export type {Props} from './SqlEditor';
-export {default as SqlEditorModal} from './SqlEditorModal';

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@sqlrooms/typescript-config/react-library.json",
-  "compilerOptions": {
-    "outDir": "dist"
-  },
-  "include": ["src", "turbo"],
-  "exclude": ["node_modules", "dist"]
-}