From 6221639ae16cd906b4f954687f3bbd52ed0fe2b7 Mon Sep 17 00:00:00 2001 From: frectonz Date: Sun, 20 Oct 2024 13:59:50 +0300 Subject: [PATCH] feat: update npm hash + reformat ts files --- flake.nix | 2 +- ui/src/components/editor.config.ts | 430 +++++++++++++++++++++++------ ui/src/components/editor.tsx | 96 ++++--- ui/src/routeTree.gen.ts | 68 ++--- 4 files changed, 433 insertions(+), 163 deletions(-) diff --git a/flake.nix b/flake.nix index bc09c7a..4619905 100644 --- a/flake.nix +++ b/flake.nix @@ -44,7 +44,7 @@ pname = "ui"; version = "0.0.0"; src = ./ui; - npmDepsHash = "sha256-kGukH0PKF7MtIO5UH+55fddj6Tv2dNLmOC6oytEhP3c="; + npmDepsHash = "sha256-NCq8RuaC+dO6Zbgl1ucJxhJrVZ69Va3b2/gYn4fThAw="; installPhase = '' cp -pr --reflink=auto -- dist "$out/" ''; diff --git a/ui/src/components/editor.config.ts b/ui/src/components/editor.config.ts index ecd2bc5..681d00a 100644 --- a/ui/src/components/editor.config.ts +++ b/ui/src/components/editor.config.ts @@ -3,94 +3,356 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; export const ID_LANGUAGE_SQL = "sql"; export const COMMAND_CONFIG: monaco.languages.LanguageConfiguration = { - comments: { - lineComment: "--", - blockComment: ["/*", "*/"], - }, - brackets: [ - ["{", "}"], - ["[", "]"], - ["(", ")"], - ], - autoClosingPairs: [ - { open: "{", close: "}" }, - { open: "[", close: "]" }, - { open: "(", close: ")" }, - { open: '"', close: '"' }, - { open: "'", close: "'" }, - ], - surroundingPairs: [ - { open: '"', close: '"' }, - { open: "'", close: "'" }, - ], - wordPattern: /(-?\d*\.\d\w*)|([a-zA-Z_]\w*)/g, - indentationRules: { - increaseIndentPattern: /(\{|\[|\()/, - decreaseIndentPattern: /(\}|\]|\))/, - }, + comments: { + lineComment: "--", + blockComment: ["/*", "*/"], + }, + brackets: [ + ["{", "}"], + ["[", "]"], + ["(", ")"], + ], + autoClosingPairs: [ + { open: "{", close: "}" }, + { open: "[", close: "]" }, + { open: "(", close: ")" }, + { open: '"', close: '"' }, + { open: "'", close: "'" }, + ], + surroundingPairs: [ + { open: '"', close: '"' }, + { open: "'", close: "'" }, + ], + wordPattern: /(-?\d*\.\d\w*)|([a-zA-Z_]\w*)/g, + indentationRules: { + increaseIndentPattern: /(\{|\[|\()/, + decreaseIndentPattern: /(\}|\]|\))/, + }, }; export const autoSuggestionCompletionItems = ( - range: monaco.languages.CompletionItem['range'], + range: monaco.languages.CompletionItem["range"], ): monaco.languages.CompletionList => { - const _suggestions = [ - { label: "SELECT", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "SELECT ", range }, - { label: "FROM", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "FROM ", range }, - { label: "WHERE", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "WHERE ", range }, - { label: "GROUP BY", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "GROUP BY ", range }, - { label: "HAVING", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "HAVING ", range }, - { label: "ORDER BY", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "ORDER BY ", range }, - { label: "LIMIT", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "LIMIT ", range }, - { label: "AND", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "AND ", range }, - { label: "OR", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "OR ", range }, - { label: "NOT", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "NOT ", range }, - { label: "BETWEEN", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "BETWEEN ", range }, - { label: "IN", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "IN ", range }, - { label: "LIKE", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "LIKE ", range }, - { label: "IS NULL", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "IS NULL ", range }, - { label: "IS NOT NULL", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "IS NOT NULL ", range }, - { label: "INNER JOIN", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "INNER JOIN ", range }, - { label: "LEFT JOIN", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "LEFT JOIN ", range }, - { label: "RIGHT JOIN", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "RIGHT JOIN ", range }, - { label: "FULL JOIN", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "FULL JOIN ", range }, - { label: "ON", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "ON ", range }, - { label: "AS", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "AS ", range }, - { label: "COUNT", kind: monaco.languages.CompletionItemKind.Function, insertText: "COUNT()", range }, - { label: "SUM", kind: monaco.languages.CompletionItemKind.Function, insertText: "SUM()", range }, - { label: "AVG", kind: monaco.languages.CompletionItemKind.Function, insertText: "AVG()", range }, - { label: "MIN", kind: monaco.languages.CompletionItemKind.Function, insertText: "MIN()", range }, - { label: "MAX", kind: monaco.languages.CompletionItemKind.Function, insertText: "MAX()", range }, - { label: "CAST", kind: monaco.languages.CompletionItemKind.Function, insertText: "CAST()", range }, - { label: "DATE", kind: monaco.languages.CompletionItemKind.Function, insertText: "DATE()", range }, - { label: "NOW", kind: monaco.languages.CompletionItemKind.Function, insertText: "NOW()", range }, - { label: "JOIN", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "JOIN ", range }, - { label: "INSERT INTO", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "INSERT INTO ", range }, - { label: "UPDATE", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "UPDATE ", range }, - { label: "DELETE", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "DELETE ", range }, - { label: "CREATE TABLE", kind: monaco.languages.CompletionItemKind.Snippet, insertText: "CREATE TABLE ", range }, - { label: "DROP TABLE", kind: monaco.languages.CompletionItemKind.Snippet, insertText: "DROP TABLE ", range }, - { label: "PRAGMA", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "PRAGMA ", range }, - { label: "VACUUM", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "VACUUM;", range }, - { label: "ATTACH DATABASE", kind: monaco.languages.CompletionItemKind.Snippet, insertText: "ATTACH DATABASE '' AS '';", range }, - { label: "SERIAL", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "SERIAL ", range }, - { label: "RETURNING", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "RETURNING ", range }, - { label: "CREATE EXTENSION", kind: monaco.languages.CompletionItemKind.Snippet, insertText: "CREATE EXTENSION ", range }, - { label: "AUTO_INCREMENT", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "AUTO_INCREMENT ", range }, - { label: "ENGINE", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "ENGINE=", range }, - { label: "SHOW DATABASES", kind: monaco.languages.CompletionItemKind.Snippet, insertText: "SHOW DATABASES;", range }, - { label: "SHOW TABLES", kind: monaco.languages.CompletionItemKind.Snippet, insertText: "SHOW TABLES;", range }, - { label: "COPY", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "COPY ", range }, - { label: "EXPORT DATABASE", kind: monaco.languages.CompletionItemKind.Snippet, insertText: "EXPORT DATABASE '';", range }, - { label: "IMPORT DATABASE", kind: monaco.languages.CompletionItemKind.Snippet, insertText: "IMPORT DATABASE '';", range }, - { label: "CREATE MATERIALIZED VIEW", kind: monaco.languages.CompletionItemKind.Snippet, insertText: "CREATE MATERIALIZED VIEW ", range }, - { label: "OPTIMIZE TABLE", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "OPTIMIZE TABLE ", range }, - { label: "ALTER TABLE", kind: monaco.languages.CompletionItemKind.Snippet, insertText: "ALTER TABLE ", range }, - { label: "EXPLAIN", kind: monaco.languages.CompletionItemKind.Keyword, insertText: "EXPLAIN ", range }, - ]; + const _suggestions = [ + { + label: "SELECT", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "SELECT ", + range, + }, + { + label: "FROM", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "FROM ", + range, + }, + { + label: "WHERE", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "WHERE ", + range, + }, + { + label: "GROUP BY", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "GROUP BY ", + range, + }, + { + label: "HAVING", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "HAVING ", + range, + }, + { + label: "ORDER BY", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "ORDER BY ", + range, + }, + { + label: "LIMIT", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "LIMIT ", + range, + }, + { + label: "AND", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "AND ", + range, + }, + { + label: "OR", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "OR ", + range, + }, + { + label: "NOT", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "NOT ", + range, + }, + { + label: "BETWEEN", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "BETWEEN ", + range, + }, + { + label: "IN", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "IN ", + range, + }, + { + label: "LIKE", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "LIKE ", + range, + }, + { + label: "IS NULL", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "IS NULL ", + range, + }, + { + label: "IS NOT NULL", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "IS NOT NULL ", + range, + }, + { + label: "INNER JOIN", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "INNER JOIN ", + range, + }, + { + label: "LEFT JOIN", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "LEFT JOIN ", + range, + }, + { + label: "RIGHT JOIN", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "RIGHT JOIN ", + range, + }, + { + label: "FULL JOIN", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "FULL JOIN ", + range, + }, + { + label: "ON", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "ON ", + range, + }, + { + label: "AS", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "AS ", + range, + }, + { + label: "COUNT", + kind: monaco.languages.CompletionItemKind.Function, + insertText: "COUNT()", + range, + }, + { + label: "SUM", + kind: monaco.languages.CompletionItemKind.Function, + insertText: "SUM()", + range, + }, + { + label: "AVG", + kind: monaco.languages.CompletionItemKind.Function, + insertText: "AVG()", + range, + }, + { + label: "MIN", + kind: monaco.languages.CompletionItemKind.Function, + insertText: "MIN()", + range, + }, + { + label: "MAX", + kind: monaco.languages.CompletionItemKind.Function, + insertText: "MAX()", + range, + }, + { + label: "CAST", + kind: monaco.languages.CompletionItemKind.Function, + insertText: "CAST()", + range, + }, + { + label: "DATE", + kind: monaco.languages.CompletionItemKind.Function, + insertText: "DATE()", + range, + }, + { + label: "NOW", + kind: monaco.languages.CompletionItemKind.Function, + insertText: "NOW()", + range, + }, + { + label: "JOIN", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "JOIN ", + range, + }, + { + label: "INSERT INTO", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "INSERT INTO ", + range, + }, + { + label: "UPDATE", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "UPDATE ", + range, + }, + { + label: "DELETE", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "DELETE ", + range, + }, + { + label: "CREATE TABLE", + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: "CREATE TABLE ", + range, + }, + { + label: "DROP TABLE", + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: "DROP TABLE ", + range, + }, + { + label: "PRAGMA", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "PRAGMA ", + range, + }, + { + label: "VACUUM", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "VACUUM;", + range, + }, + { + label: "ATTACH DATABASE", + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: "ATTACH DATABASE '' AS '';", + range, + }, + { + label: "SERIAL", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "SERIAL ", + range, + }, + { + label: "RETURNING", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "RETURNING ", + range, + }, + { + label: "CREATE EXTENSION", + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: "CREATE EXTENSION ", + range, + }, + { + label: "AUTO_INCREMENT", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "AUTO_INCREMENT ", + range, + }, + { + label: "ENGINE", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "ENGINE=", + range, + }, + { + label: "SHOW DATABASES", + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: "SHOW DATABASES;", + range, + }, + { + label: "SHOW TABLES", + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: "SHOW TABLES;", + range, + }, + { + label: "COPY", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "COPY ", + range, + }, + { + label: "EXPORT DATABASE", + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: "EXPORT DATABASE '';", + range, + }, + { + label: "IMPORT DATABASE", + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: "IMPORT DATABASE '';", + range, + }, + { + label: "CREATE MATERIALIZED VIEW", + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: "CREATE MATERIALIZED VIEW ", + range, + }, + { + label: "OPTIMIZE TABLE", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "OPTIMIZE TABLE ", + range, + }, + { + label: "ALTER TABLE", + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: "ALTER TABLE ", + range, + }, + { + label: "EXPLAIN", + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: "EXPLAIN ", + range, + }, + ]; - // Remove duplicates from suggestions using filter method - const suggestions = _suggestions.filter((item, index, self) => self.findIndex(t => t.label === item.label) === index); - + // Remove duplicates from suggestions using filter method + const suggestions = _suggestions.filter( + (item, index, self) => + self.findIndex((t) => t.label === item.label) === index, + ); - return { suggestions }; + return { suggestions }; }; diff --git a/ui/src/components/editor.tsx b/ui/src/components/editor.tsx index 9dbdf9b..90fe339 100644 --- a/ui/src/components/editor.tsx +++ b/ui/src/components/editor.tsx @@ -37,7 +37,7 @@ export const Editor: FunctionComponent = ({ value, onChange }) => { monaco.languages.register({ id: ID_LANGUAGE_SQL }); monaco.languages.setLanguageConfiguration( ID_LANGUAGE_SQL, - COMMAND_CONFIG + COMMAND_CONFIG, ); monaco.editor.defineTheme("sql-dark", vsPlusTheme.darkThemeData); @@ -71,8 +71,7 @@ export const Editor: FunctionComponent = ({ value, onChange }) => { }, [monacoEl.current]); useEffect(() => { - - if(!autoCompleteData) return + if (!autoCompleteData) return; monaco.languages.registerCompletionItemProvider(ID_LANGUAGE_SQL, { provideCompletionItems: (model, position) => { @@ -85,46 +84,55 @@ export const Editor: FunctionComponent = ({ value, onChange }) => { }; const { suggestions } = autoSuggestionCompletionItems(range); - const tableColumnSuggestions = autoCompleteData.tables.reduce((acc: any, { table_name, columns }) => { - - const alias = table_name.substring(0, 3); - - const table = { - label: table_name, - kind: monaco.languages.CompletionItemKind.Variable, - insertText: table_name, - range, - } - - const aliasTable = { - label: `${table_name} AS ${alias}`, - kind: monaco.languages.CompletionItemKind.Variable, - insertText: `${table_name} AS ${alias}`, - range, - } - - const col = columns.map((column) => ({ - label: column, - kind: monaco.languages.CompletionItemKind.Variable, - insertText: column, - range, - })); - - const tableColumn = columns.map((column) => ({ - label: `${table_name}.${column}`, - kind: monaco.languages.CompletionItemKind.Variable, - insertText: `${table_name}.${column}`, - range, - })); - - const tableColumnAlias = columns.map((column) => ({ - label: `${alias}.${column}`, - kind: monaco.languages.CompletionItemKind.Variable, - insertText: `${alias}.${column}`, - })); - - return [...acc, table, aliasTable, ...col, ...tableColumn, ...tableColumnAlias]; - }, []); + const tableColumnSuggestions = autoCompleteData.tables.reduce( + (acc: any, { table_name, columns }) => { + const alias = table_name.substring(0, 3); + + const table = { + label: table_name, + kind: monaco.languages.CompletionItemKind.Variable, + insertText: table_name, + range, + }; + + const aliasTable = { + label: `${table_name} AS ${alias}`, + kind: monaco.languages.CompletionItemKind.Variable, + insertText: `${table_name} AS ${alias}`, + range, + }; + + const col = columns.map((column) => ({ + label: column, + kind: monaco.languages.CompletionItemKind.Variable, + insertText: column, + range, + })); + + const tableColumn = columns.map((column) => ({ + label: `${table_name}.${column}`, + kind: monaco.languages.CompletionItemKind.Variable, + insertText: `${table_name}.${column}`, + range, + })); + + const tableColumnAlias = columns.map((column) => ({ + label: `${alias}.${column}`, + kind: monaco.languages.CompletionItemKind.Variable, + insertText: `${alias}.${column}`, + })); + + return [ + ...acc, + table, + aliasTable, + ...col, + ...tableColumn, + ...tableColumnAlias, + ]; + }, + [], + ); return { suggestions: [...suggestions, ...tableColumnSuggestions] }; }, @@ -134,7 +142,7 @@ export const Editor: FunctionComponent = ({ value, onChange }) => { useEffect(() => { if (monacoEl.current) { monaco.editor.setTheme( - currentTheme === "light" ? "sql-light" : "sql-dark" + currentTheme === "light" ? "sql-light" : "sql-dark", ); } }, [currentTheme]); diff --git a/ui/src/routeTree.gen.ts b/ui/src/routeTree.gen.ts index 4be1bc8..16ec80c 100644 --- a/ui/src/routeTree.gen.ts +++ b/ui/src/routeTree.gen.ts @@ -8,60 +8,60 @@ // This file is auto-generated by TanStack Router -import { createFileRoute } from '@tanstack/react-router' +import { createFileRoute } from "@tanstack/react-router"; // Import Routes -import { Route as rootRoute } from './routes/__root' +import { Route as rootRoute } from "./routes/__root"; // Create Virtual Routes -const TablesLazyImport = createFileRoute('/tables')() -const QueryLazyImport = createFileRoute('/query')() -const IndexLazyImport = createFileRoute('/')() +const TablesLazyImport = createFileRoute("/tables")(); +const QueryLazyImport = createFileRoute("/query")(); +const IndexLazyImport = createFileRoute("/")(); // Create/Update Routes const TablesLazyRoute = TablesLazyImport.update({ - path: '/tables', + path: "/tables", getParentRoute: () => rootRoute, -} as any).lazy(() => import('./routes/tables.lazy').then((d) => d.Route)) +} as any).lazy(() => import("./routes/tables.lazy").then((d) => d.Route)); const QueryLazyRoute = QueryLazyImport.update({ - path: '/query', + path: "/query", getParentRoute: () => rootRoute, -} as any).lazy(() => import('./routes/query.lazy').then((d) => d.Route)) +} as any).lazy(() => import("./routes/query.lazy").then((d) => d.Route)); const IndexLazyRoute = IndexLazyImport.update({ - path: '/', + path: "/", getParentRoute: () => rootRoute, -} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route)) +} as any).lazy(() => import("./routes/index.lazy").then((d) => d.Route)); // Populate the FileRoutesByPath interface -declare module '@tanstack/react-router' { +declare module "@tanstack/react-router" { interface FileRoutesByPath { - '/': { - id: '/' - path: '/' - fullPath: '/' - preLoaderRoute: typeof IndexLazyImport - parentRoute: typeof rootRoute - } - '/query': { - id: '/query' - path: '/query' - fullPath: '/query' - preLoaderRoute: typeof QueryLazyImport - parentRoute: typeof rootRoute - } - '/tables': { - id: '/tables' - path: '/tables' - fullPath: '/tables' - preLoaderRoute: typeof TablesLazyImport - parentRoute: typeof rootRoute - } + "/": { + id: "/"; + path: "/"; + fullPath: "/"; + preLoaderRoute: typeof IndexLazyImport; + parentRoute: typeof rootRoute; + }; + "/query": { + id: "/query"; + path: "/query"; + fullPath: "/query"; + preLoaderRoute: typeof QueryLazyImport; + parentRoute: typeof rootRoute; + }; + "/tables": { + id: "/tables"; + path: "/tables"; + fullPath: "/tables"; + preLoaderRoute: typeof TablesLazyImport; + parentRoute: typeof rootRoute; + }; } } @@ -71,7 +71,7 @@ export const routeTree = rootRoute.addChildren({ IndexLazyRoute, QueryLazyRoute, TablesLazyRoute, -}) +}); /* prettier-ignore-end */