20 | {title && {title} }
21 | {description && (
22 | {description}
23 | )}
24 |
25 | {action}
26 |
16 |
49 | );
50 | };
51 |
52 | export default NotFound;
53 |
--------------------------------------------------------------------------------
/docs/.vitepress/cache/deps/_metadata.json:
--------------------------------------------------------------------------------
1 | {
2 | "hash": "2a17ad63",
3 | "configHash": "ed00d617",
4 | "lockfileHash": "e3b0c442",
5 | "browserHash": "462a737c",
6 | "optimized": {
7 | "vue": {
8 | "src": "../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
9 | "file": "vue.js",
10 | "fileHash": "4f692bbe",
11 | "needsInterop": false
12 | },
13 | "vitepress > @vue/devtools-api": {
14 | "src": "../../../node_modules/@vue/devtools-api/dist/index.js",
15 | "file": "vitepress___@vue_devtools-api.js",
16 | "fileHash": "b0d1619b",
17 | "needsInterop": false
18 | },
19 | "vitepress > @vueuse/core": {
20 | "src": "../../../node_modules/@vueuse/core/index.mjs",
21 | "file": "vitepress___@vueuse_core.js",
22 | "fileHash": "2403e06d",
23 | "needsInterop": false
24 | },
25 | "vitepress > @vueuse/integrations/useFocusTrap": {
26 | "src": "../../../node_modules/@vueuse/integrations/useFocusTrap.mjs",
27 | "file": "vitepress___@vueuse_integrations_useFocusTrap.js",
28 | "fileHash": "89972825",
29 | "needsInterop": false
30 | },
31 | "vitepress > mark.js/src/vanilla.js": {
32 | "src": "../../../node_modules/mark.js/src/vanilla.js",
33 | "file": "vitepress___mark__js_src_vanilla__js.js",
34 | "fileHash": "49acc4f8",
35 | "needsInterop": false
36 | },
37 | "vitepress > minisearch": {
38 | "src": "../../../node_modules/minisearch/dist/es/index.js",
39 | "file": "vitepress___minisearch.js",
40 | "fileHash": "3fb15907",
41 | "needsInterop": false
42 | }
43 | },
44 | "chunks": {
45 | "chunk-B6YPYVPP": {
46 | "file": "chunk-B6YPYVPP.js"
47 | },
48 | "chunk-I4O5PVBA": {
49 | "file": "chunk-I4O5PVBA.js"
50 | }
51 | }
52 | }
--------------------------------------------------------------------------------
/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { cva, type VariantProps } from "class-variance-authority"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const alertVariants = cva(
7 | "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
8 | {
9 | variants: {
10 | variant: {
11 | default: "bg-background text-foreground",
12 | destructive:
13 | "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 | },
15 | },
16 | defaultVariants: {
17 | variant: "default",
18 | },
19 | }
20 | )
21 |
22 | const Alert = React.forwardRef<
23 | HTMLDivElement,
24 | React.HTMLAttributes
17 | {useTheme().theme === "light" ? (
18 | })
23 | ) : (
24 | })
29 | )}
30 |
48 |
32 |
47 | 404 - Page Not Found
33 |34 | Sorry, the page you are looking for does not exist. 35 |
36 | 46 |
39 |
41 | )}
42 | {children}
51 |
45 | {label && (
46 |
73 | );
74 | };
75 |
76 | export default CustomChartTooltip;
77 |
--------------------------------------------------------------------------------
/src/pages/Home.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Menu } from "lucide-react";
3 | import DataExplorer from "@/components/explorer/DataExplorer";
4 | import {
5 | ResizableHandle,
6 | ResizablePanel,
7 | ResizablePanelGroup,
8 | } from "@/components/ui/resizable";
9 | import {
10 | Sheet,
11 | SheetContent,
12 | SheetHeader,
13 | SheetTitle,
14 | SheetTrigger,
15 | } from "@/components/ui/sheet";
16 | import { Button } from "@/components/ui/button";
17 | import WorkspaceTabs from "@/components/workspace/WorkspaceTabs";
18 |
19 | export default function Home() {
20 | const [dataExplorerOpen, setDataExplorerOpen] = useState(false);
21 |
22 | return (
23 |
47 |
51 | )}
52 | 48 | {label} 49 |
50 |
53 | {payload.map((entry, index) => (
54 |
72 |
55 |
61 |
70 | ))}
71 |
62 |
63 | {entry.name || entry.dataKey}:
64 |
65 |
66 | {formatValue(entry.value)}
67 |
68 |
69 |
24 | {/* Desktop Layout - ResizablePanels */}
25 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/src/hooks/useQueryFromURL.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 | import { useSearchParams } from "react-router";
3 | import { useDuckStore } from "@/store";
4 | import { toast } from "sonner";
5 |
6 | /**
7 | * Hook to handle loading queries from URL parameters.
8 | * Supports base64-encoded queries via ?query=
26 |
27 |
33 |
35 |
41 |
43 |
44 |
45 |
46 | {/* Mobile Layout - Stacked with Drawer */}
47 |
48 | {/* Data Explorer Drawer */}
49 |
50 |
51 |
59 |
60 |
61 |
62 | Data Explorer
63 |
64 |
68 |
69 |
70 | {/* Main Workspace - Full Screen */}
71 |
75 |
65 |
67 |
72 |
74 |
10 |
15 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
66 | {tab.type === "sql" && (
67 |
88 |
112 |
113 | );
114 | }
115 |
116 | export default SortableTab;
117 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import "./index.css";
2 | import { StrictMode, useEffect } from "react";
3 | import { createRoot } from "react-dom/client";
4 | import { BrowserRouter } from "react-router";
5 | import { Suspense } from "react";
6 | import { ErrorBoundary, FallbackProps } from "react-error-boundary";
7 | import { ThemeProvider } from "@/components/theme/theme-provider";
8 | import { Routes, Route } from "react-router";
9 | import { useDuckStore } from "./store";
10 | import Home from "@/pages/Home";
11 | import { Toaster } from "@/components/ui/sonner";
12 | import { Loader2, AlertTriangle, RefreshCw } from "lucide-react";
13 | import NotFound from "./pages/NotFound";
14 | import Connections from "./pages/Connections";
15 |
16 | interface LoadingScreenProps {
17 | message: string;
18 | }
19 |
20 | interface AppInitializerProps {
21 | children: React.ReactNode;
22 | }
23 |
24 | const LoadingScreen = ({ message }: LoadingScreenProps) => (
25 |
72 |
74 | )}
75 |
89 |
111 |
90 | {tab.type === "home" ? (
91 |
96 | {tab.title}
97 | {tab.type === "sql" && (
98 |
99 | {
102 | e.stopPropagation();
103 | closeTab(tab.id);
104 | }}
105 | >
106 |
109 | )}
110 |
26 |
31 | );
32 |
33 | const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => (
34 |
27 |
30 | {message}
29 |
35 |
50 | );
51 |
52 | const AppInitializer = ({ children }: AppInitializerProps) => {
53 | const { initialize, isInitialized, isLoading } = useDuckStore();
54 |
55 | useEffect(() => {
56 | initialize();
57 | }, [initialize]);
58 |
59 | if (isLoading || !isInitialized) {
60 | return
36 |
49 | Something went wrong
38 |39 | {error.message || "An unexpected error occurred while rendering the application."} 40 |
41 | 48 |
79 |
92 | );
93 | };
94 |
95 | const rootElement = document.getElementById("root");
96 | if (!rootElement) throw new Error("Failed to find root element");
97 |
98 | // Production render
99 | createRoot(rootElement).render(
100 |
85 |
86 |
90 |
91 |
46 |
47 | Connection Details
48 | {isExternal ? (
49 |
54 |
55 |
47 | Connection Details
48 | {isExternal ? (
49 |
54 |
56 |
63 |
70 |
78 |
86 | {connection?.port && ( 87 |
93 | {connection?.user && ( 94 |
100 |
57 | Name
58 |
59 | {connection?.name || "-"}
60 |
61 |
62 | 63 |
64 | Type
65 |
66 | {connection?.scope || "-"}
67 |
68 |
69 | 70 |
71 | Host
72 |
73 | {connection?.host ||
74 | (connection?.scope === "WASM" ? "Local" : "-")}
75 |
76 |
77 | 78 |
79 | Database
80 |
81 | {connection?.database ||
82 | (connection?.scope === "WASM" ? "memory" : "-")}
83 |
84 |
85 | 86 | {connection?.port && ( 87 |
88 | Port
89 | {connection.port}
90 |
91 | )}
92 | 93 | {connection?.user && ( 94 |
95 | User
96 | {connection.user}
97 |
98 | )}
99 |
61 |
62 |
63 |
85 |
86 |
87 |
92 |
93 | Switch Connection
94 |
95 |
96 | {connectionList.connections.map((connection) => (
97 | handleConnectionChange(connection.id)}
100 | className={cn(
101 | "flex items-center gap-2 cursor-pointer",
102 | activeConnection?.id === connection.id && "bg-accent"
103 | )}
104 | >
105 |
111 | {connection.scope}
112 |
113 |
114 | ))}
115 |
116 | {
121 | navigate("/connections");
122 | setIsOpen(false);
123 | }}
124 | >
125 |
128 |
129 |
130 |
131 | );
132 | }
133 |
--------------------------------------------------------------------------------
/src/hooks/use-toast.ts:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | // Inspired by react-hot-toast library
4 | import * as React from "react"
5 |
6 | import type {
7 | ToastActionElement,
8 | ToastProps,
9 | } from "@/components/ui/toast"
10 |
11 | const TOAST_LIMIT = 1
12 | const TOAST_REMOVE_DELAY = 1000000
13 |
14 | type ToasterToast = ToastProps & {
15 | id: string
16 | title?: React.ReactNode
17 | description?: React.ReactNode
18 | action?: ToastActionElement
19 | }
20 |
21 | const actionTypes = {
22 | ADD_TOAST: "ADD_TOAST",
23 | UPDATE_TOAST: "UPDATE_TOAST",
24 | DISMISS_TOAST: "DISMISS_TOAST",
25 | REMOVE_TOAST: "REMOVE_TOAST",
26 | } as const
27 |
28 | let count = 0
29 |
30 | function genId() {
31 | count = (count + 1) % Number.MAX_SAFE_INTEGER
32 | return count.toString()
33 | }
34 |
35 | type ActionType = typeof actionTypes
36 |
37 | type Action =
38 | | {
39 | type: ActionType["ADD_TOAST"]
40 | toast: ToasterToast
41 | }
42 | | {
43 | type: ActionType["UPDATE_TOAST"]
44 | toast: Partial161 | {body} 162 |
163 | ) 164 | }) 165 | FormMessage.displayName = "FormMessage" 166 | 167 | export { 168 | useFormField, 169 | Form, 170 | FormItem, 171 | FormLabel, 172 | FormControl, 173 | FormDescription, 174 | FormMessage, 175 | FormField, 176 | } 177 | -------------------------------------------------------------------------------- /src/components/ui/alert-dialog.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" 3 | 4 | import { cn } from "@/lib/utils" 5 | import { buttonVariants } from "@/components/ui/button" 6 | 7 | const AlertDialog = AlertDialogPrimitive.Root 8 | 9 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger 10 | 11 | const AlertDialogPortal = AlertDialogPrimitive.Portal 12 | 13 | const AlertDialogOverlay = React.forwardRef< 14 | React.ElementRef
51 | Duck-UI
52 |
56 | {/* Connection Switcher */}
57 |
147 |
58 |
63 |
64 | 59 | Connection 60 |
61 |
68 |
87 |
88 | 69 | Navigate 70 |
71 | 78 | 86 |
92 |
120 |
121 | 93 | Resources 94 |
95 | 107 | 119 |
125 |
146 | 126 | Appearance 127 |
128 | 145 |
41 |
51 | ))
52 |
53 | CommandInput.displayName = CommandPrimitive.Input.displayName
54 |
55 | const CommandList = React.forwardRef<
56 | React.ElementRef
87 |
96 | ))
97 | NavigationMenuViewport.displayName =
98 | NavigationMenuPrimitive.Viewport.displayName
99 |
100 | const NavigationMenuIndicator = React.forwardRef<
101 | React.ElementRef
84 |
89 |
156 |
157 | );
158 | }
159 |
--------------------------------------------------------------------------------
/src/components/ui/multi-select.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { X, Check, ChevronsUpDown } from "lucide-react";
3 | import { Badge } from "@/components/ui/badge";
4 | import { Button } from "@/components/ui/button";
5 | import {
6 | Command,
7 | CommandEmpty,
8 | CommandGroup,
9 | CommandInput,
10 | CommandItem,
11 | CommandList,
12 | } from "@/components/ui/command";
13 | import {
14 | Popover,
15 | PopoverContent,
16 | PopoverTrigger,
17 | } from "@/components/ui/popover";
18 | import { cn } from "@/lib/utils";
19 |
20 | export interface MultiSelectOption {
21 | label: string;
22 | value: string;
23 | color?: string;
24 | }
25 |
26 | interface MultiSelectProps {
27 | options: MultiSelectOption[];
28 | selected: string[];
29 | onChange: (selected: string[]) => void;
30 | placeholder?: string;
31 | maxSelected?: number;
32 | className?: string;
33 | }
34 |
35 | export function MultiSelect({
36 | options,
37 | selected,
38 | onChange,
39 | placeholder = "Select items...",
40 | maxSelected,
41 | className,
42 | }: MultiSelectProps) {
43 | const [open, setOpen] = React.useState(false);
44 |
45 | const handleSelect = (value: string) => {
46 | if (selected.includes(value)) {
47 | onChange(selected.filter((item) => item !== value));
48 | } else {
49 | if (maxSelected && selected.length >= maxSelected) {
50 | return;
51 | }
52 | onChange([...selected, value]);
53 | }
54 | };
55 |
56 | const handleRemove = (value: string, e: React.MouseEvent) => {
57 | e.stopPropagation();
58 | onChange(selected.filter((item) => item !== value));
59 | };
60 |
61 | const selectedOptions = options.filter((option) =>
62 | selected.includes(option.value)
63 | );
64 |
65 | return (
66 |
90 |
98 |
99 |
100 |
101 |
106 | tab.id)}
108 | strategy={horizontalListSortingStrategy}
109 | >
110 |
122 |
123 |
124 |
125 |
126 | New Query Tab
128 |
133 | Close All Tabs
135 |
136 |
137 |
139 |
140 |
111 |
112 | {sortedTabs.map((tab) => (
113 |
120 |
121 |
141 | {sortedTabs.map((tab) => (
142 |
147 | {tab.type === "home" ? (
148 |
153 | ))}
154 |
155 |
130 | {option.color && (
131 |
139 | )}
140 |
141 | {option.label}
142 |
143 |
144 | {isSelected && (
145 |
20 |
34 | );
35 |
36 | interface SqlTabProps {
37 | tabId: string;
38 | }
39 |
40 | const SqlTab: React.FC
21 |
33 | Failed to render table
23 |24 | {error.message || "An error occurred while displaying the results."} 25 |
26 | 32 |
54 | {/* Table Skeleton */}
55 |
78 | );
79 | }
80 |
81 | // Show empty state if no query has been run
82 | if (!currentTab.result) {
83 | return (
84 |
56 | {/* Skeleton Header */}
57 |
77 |
58 | {Array.from({ length: 15 }).map((_, index) => (
59 |
62 |
63 | {/* Skeleton Rows */}
64 |
65 | {Array.from({ length: 22 }).map((_, rowIndex) => (
66 |
67 | {Array.from({ length: 5 }).map((_, colIndex) => (
68 |
72 | ))}
73 |
74 | ))}
75 |
76 |
85 |
92 | );
93 | }
94 |
95 | // Show error if query failed
96 | if (currentTab.result.error) {
97 | return (
98 |
86 |
91 | 88 | There's no data yet! Run a query to get started. 89 |
90 |
99 |
100 | Query Error
101 | {currentTab.result.error}
102 |
103 |
104 | );
105 | }
106 |
107 | // Show results in tabs (Table and Charts)
108 | return (
109 |
122 |
123 |
125 |
126 |
129 |
133 | updateTabChartConfig(tabId, config)
134 | }
135 | />
136 |
137 |
148 |
149 |
150 |
152 |
154 | {renderResults()}
155 |
156 |
157 |
158 | );
159 | };
160 |
161 | export default SqlTab;
162 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 
Duck-UI
2 |
3 | Duck-UI is a web-based interface for interacting with DuckDB, a high-performance analytical database system. This project leverages DuckDB's WebAssembly (WASM) capabilities to provide a seamless and efficient user experience directly in the browser.
4 |
5 | # [Official Docs](https://duckui.com?utm_source=github&utm_medium=readme) 🚀
6 | # [Demo](https://demo.duckui.com?utm_source=github&utm_medium=readme) 💻
7 |
8 |
9 | ## Features
10 |
11 | - **SQL Editor**: Write and execute SQL queries with syntax highlighting and auto-completion.
12 | - **Data Import**: Import data from CSV, JSON, Parquet, and Arrow files.
13 | - **Data Explorer**: Browse and manage databases and tables.
14 | - **Query History**: View and manage your recent SQL queries.
15 |
16 | ## Getting Started
17 |
18 |
19 | ### Docker (Recommended)
20 |
21 | ```bash
22 | docker run -p 5522:5522 ghcr.io/ibero-data/duck-ui:latest
23 | ```
24 |
25 | Open your browser and navigate to `http://localhost:5522`.
26 |
27 | ### Environment Variables
28 |
29 | You can customize Duck-UI behavior using environment variables:
30 |
31 | ```bash
32 | # For external DuckDB connections
33 | docker run -p 5522:5522 \
34 | -e DUCK_UI_EXTERNAL_CONNECTION_NAME="My DuckDB Server" \
35 | -e DUCK_UI_EXTERNAL_HOST="http://duckdb-server" \
36 | -e DUCK_UI_EXTERNAL_PORT="8000" \
37 | -e DUCK_UI_EXTERNAL_USER="username" \
38 | -e DUCK_UI_EXTERNAL_PASS="password" \
39 | -e DUCK_UI_EXTERNAL_DATABASE_NAME="my_database" \
40 | -e DUCK_UI_ALLOW_UNSIGNED_EXTENSIONS="true" \
41 | ghcr.io/ibero-data/duck-ui:latest
42 | ```
43 |
44 | | Variable | Description | Default |
45 | |----------|-------------|---------|
46 | | `DUCK_UI_EXTERNAL_CONNECTION_NAME` | Name for the external connection | "" |
47 | | `DUCK_UI_EXTERNAL_HOST` | Host URL for external DuckDB | "" |
48 | | `DUCK_UI_EXTERNAL_PORT` | Port for external DuckDB | null |
49 | | `DUCK_UI_EXTERNAL_USER` | Username for external connection | "" |
50 | | `DUCK_UI_EXTERNAL_PASS` | Password for external connection | "" |
51 | | `DUCK_UI_EXTERNAL_DATABASE_NAME` | Database name for external connection | "" |
52 | | `DUCK_UI_ALLOW_UNSIGNED_EXTENSIONS` | Allow unsigned extensions in DuckDB | false |
53 |
54 |
55 |
56 | ### Prerequisites
57 |
58 | - Node.js >= 20.x
59 | - npm >= 10.x
60 |
61 | ### Installation
62 |
63 | 1. Clone the repository:
64 |
65 | ```bash
66 | git clone https://github.com/ibero-data/duck-ui.git
67 | cd duck-ui
68 | ```
69 |
70 | 2. Install dependencies:
71 |
72 | ```bash
73 | npm install
74 | # or
75 | yarn install
76 | ```
77 |
78 | ### Running the Application
79 |
80 | 1. Start the development server:
81 |
82 | ```bash
83 | npm run dev
84 | # or
85 | yarn dev
86 | ```
87 |
88 | 2. Open your browser and navigate to `http://localhost:5173`.
89 |
90 | ### Building for Production
91 |
92 | To create a production build, run:
93 |
94 | ```bash
95 | npm run build
96 | # or
97 | yarn build
98 | ```
99 |
100 | The output will be in the `dist` directory.
101 |
102 | ### Running with Docker
103 |
104 | 1. Build the Docker image:
105 |
106 | ```bash
107 | docker build -t duck-ui .
108 | ```
109 |
110 | 2. Run the Docker container:
111 |
112 | ```bash
113 | docker run -p 5522:5522 duck-ui
114 | ```
115 |
116 | 3. Open your browser and navigate to `http://localhost:5522`.
117 |
118 | ## Usage
119 |
120 | ### SQL Editor
121 |
122 | - Write your SQL queries in the editor.
123 | - Use `Cmd/Ctrl + Enter` to execute the query.
124 | - View the results in the results pane.
125 |
126 | ### Data Import
127 |
128 | - Click on the "Import Files" button to upload CSV, JSON, Parquet, or Arrow files.
129 | - Configure the table name and import settings.
130 | - For CSV files, you can customize import options:
131 | - Header row detection
132 | - Auto-detection of column types
133 | - Delimiter specification
134 | - Error handling (ignore errors, null padding for missing columns)
135 | - View the imported data in the Data Explorer.
136 |
137 | ### Data Explorer
138 |
139 | - Browse through the databases and tables.
140 | - Preview table data and view table schemas.
141 | - Delete tables if needed.
142 |
143 | ### Query History
144 |
145 | - Access your recent queries from the Query History section.
146 | - Copy queries to the clipboard or re-execute them.
147 |
148 | ### Theme Toggle
149 |
150 | - Switch between light and dark themes using the theme toggle button.
151 |
152 | ### Keyboard Shortcuts
153 |
154 | - `Cmd/Ctrl + B`: Expand/Shrink Sidebar
155 | - `Cmd/Ctrl + K`: Open Search Bar
156 | - `Cmd/Ctrl + Enter`: Run Query
157 | - `Cmd/Ctrl + Shift + Enter`: Run highlighted query
158 |
159 | ## Contributing
160 |
161 | Contributions are welcome! Please follow these steps to contribute:
162 |
163 | 1. Fork the repository.
164 | 2. Create a new branch (`git checkout -b feature/your-feature`).
165 | 3. Commit your changes (`git commit -m 'Add some feature'`).
166 | 4. Push to the branch (`git push origin feature/your-feature`).
167 | 5. Open a pull request.
168 |
169 | ## License
170 |
171 | This project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.
172 |
173 | ## Acknowledgements
174 |
175 | - [DuckDB](https://duckdb.org/)
176 | - [React](https://reactjs.org/)
177 | - [Tailwind CSS](https://tailwindcss.com/)
178 | - [Zustand](https://github.com/pmndrs/zustand)
179 | - [Lucide Icons](https://lucide.dev/)
180 |
181 | ## Contact
182 |
183 | For any inquiries or support, please contact [Caio Ricciuti](https://github.com/caioricciuti).
184 |
185 | ## Sponsors
186 |
187 | This project is sponsored by:
188 |
189 | ### [Ibero Data](https://iberodata.es/)
190 | 
191 |
192 | ### [qxip](https://qxip.net/?utm_source=duck-ui&utm_medium=sponsorship)
193 |
194 | 
195 |
196 |
197 |
198 | 199 | 200 | Want to be a sponsor? [Contact us](mailto:caio.ricciuti+sponsorship@outlook.com). -------------------------------------------------------------------------------- /docs/.vitepress/theme/custom.css: -------------------------------------------------------------------------------- 1 | /* Duck-UI Brand Colors - Aligned with main app (src/index.css) */ 2 | :root { 3 | /* Brand Colors - Duck-UI Primary (Golden Orange/Yellow) */ 4 | /* Converted from oklch(0.6716 0.1368 48.513) */ 5 | --vp-c-brand-1: #D99B43; 6 | --vp-c-brand-2: #E5A856; 7 | --vp-c-brand-3: #CD8E35; 8 | --vp-c-brand-soft: rgba(217, 155, 67, 0.14); 9 | 10 | /* Button Colors */ 11 | --vp-button-brand-bg: #D99B43; 12 | --vp-button-brand-border: #D99B43; 13 | --vp-button-brand-hover-bg: #CD8E35; 14 | --vp-button-brand-hover-border: #CD8E35; 15 | --vp-button-brand-active-bg: #C18529; 16 | --vp-button-brand-active-border: #C18529; 17 | 18 | /* Home Hero */ 19 | --vp-home-hero-name-color: transparent; 20 | --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #D99B43 30%, #E5A856); 21 | 22 | /* Custom additions */ 23 | --vp-c-accent: #D99B43; 24 | --vp-c-text-accent: #D99B43; 25 | 26 | /* Use oklch for modern browsers with fallback */ 27 | --vp-c-brand-1: oklch(0.6716 0.1368 48.513); 28 | --vp-c-brand-2: oklch(0.7016 0.1368 48.513); 29 | --vp-c-brand-3: oklch(0.6416 0.1368 48.513); 30 | } 31 | 32 | /* Dark mode adjustments */ 33 | .dark { 34 | /* Brand Colors - Duck-UI Dark Mode (Bright Yellow) */ 35 | /* Converted from oklch(0.852 0.199 91.936) */ 36 | --vp-c-brand-1: #FFD752; 37 | --vp-c-brand-2: #FFE070; 38 | --vp-c-brand-3: #F5CD42; 39 | --vp-c-brand-soft: rgba(255, 215, 82, 0.16); 40 | 41 | /* Use oklch for modern browsers with fallback */ 42 | --vp-c-brand-1: oklch(0.852 0.199 91.936); 43 | --vp-c-brand-2: oklch(0.882 0.199 91.936); 44 | --vp-c-brand-3: oklch(0.822 0.199 91.936); 45 | } 46 | 47 | /* Sponsors Section */ 48 | .sponsors-section { 49 | margin: 4rem 0; 50 | padding: 2rem 0; 51 | border-top: 1px solid var(--vp-c-divider); 52 | } 53 | 54 | .sponsors-container { 55 | max-width: 1152px; 56 | margin: 0 auto; 57 | padding: 0 24px; 58 | text-align: center; 59 | } 60 | 61 | .sponsors-title { 62 | font-size: 2rem; 63 | font-weight: 600; 64 | margin-bottom: 0.5rem; 65 | } 66 | 67 | .sponsors-subtitle { 68 | color: var(--vp-c-text-2); 69 | margin-bottom: 2rem; 70 | } 71 | 72 | .sponsors-grid { 73 | display: grid; 74 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 75 | gap: 2rem; 76 | margin: 2rem 0; 77 | } 78 | 79 | .sponsor-card { 80 | display: flex; 81 | flex-direction: column; 82 | align-items: center; 83 | padding: 1.5rem; 84 | border: 1px solid var(--vp-c-divider); 85 | border-radius: 8px; 86 | text-decoration: none; 87 | transition: all 0.3s ease; 88 | } 89 | 90 | .sponsor-card:hover { 91 | border-color: var(--vp-c-brand-1); 92 | transform: translateY(-2px); 93 | box-shadow: 0 4px 12px rgba(0,0,0,0.1); 94 | } 95 | 96 | .sponsor-logo { 97 | width: auto; 98 | height: 60px; 99 | object-fit: contain; 100 | margin-bottom: 1rem; 101 | } 102 | 103 | .sponsor-name { 104 | color: var(--vp-c-text-1); 105 | font-weight: 500; 106 | } 107 | 108 | .sponsor-button { 109 | display: inline-block; 110 | margin-top: 2rem; 111 | padding: 0.75rem 1.5rem; 112 | background: var(--vp-c-brand-1); 113 | color: white; 114 | border-radius: 6px; 115 | text-decoration: none; 116 | font-weight: 500; 117 | transition: background 0.3s ease; 118 | } 119 | 120 | .sponsor-button:hover { 121 | background: var(--vp-c-brand-2); 122 | } 123 | 124 | /* Screenshot styles for markdown images */ 125 | .vp-doc img[alt*="Duck-UI"], 126 | .vp-doc img[alt*="DuckDB"], 127 | .vp-doc img[alt*="SQL"], 128 | .vp-doc img[alt*="Database"], 129 | .vp-doc img[alt*="Query"], 130 | .vp-doc img[alt*="Metrics"], 131 | .vp-doc img[alt*="Table"], 132 | .vp-doc img[alt*="User"], 133 | .vp-doc img[alt*="Settings"], 134 | .vp-doc img[alt*="Advanced"], 135 | .vp-doc img[alt*="Data"], 136 | .vp-doc img[alt*="Performance"], 137 | .vp-doc img[alt*="Import"], 138 | .vp-doc img[alt*="Explorer"] { 139 | border-radius: 8px; 140 | box-shadow: 0 4px 12px rgba(0,0,0,0.1); 141 | transition: transform 0.3s ease, box-shadow 0.3s ease; 142 | cursor: pointer; 143 | margin: 1rem 0; 144 | } 145 | 146 | .vp-doc img[alt*="Duck-UI"]:hover, 147 | .vp-doc img[alt*="DuckDB"]:hover, 148 | .vp-doc img[alt*="SQL"]:hover, 149 | .vp-doc img[alt*="Database"]:hover, 150 | .vp-doc img[alt*="Query"]:hover, 151 | .vp-doc img[alt*="Metrics"]:hover, 152 | .vp-doc img[alt*="Table"]:hover, 153 | .vp-doc img[alt*="User"]:hover, 154 | .vp-doc img[alt*="Settings"]:hover, 155 | .vp-doc img[alt*="Advanced"]:hover, 156 | .vp-doc img[alt*="Data"]:hover, 157 | .vp-doc img[alt*="Performance"]:hover, 158 | .vp-doc img[alt*="Import"]:hover, 159 | .vp-doc img[alt*="Explorer"]:hover { 160 | transform: scale(1.02); 161 | box-shadow: 0 8px 20px rgba(0,0,0,0.15); 162 | } 163 | 164 | /* Screenshot Modal */ 165 | .screenshot-modal { 166 | display: none; 167 | position: fixed; 168 | z-index: 1000; 169 | left: 0; 170 | top: 0; 171 | width: 100%; 172 | height: 100%; 173 | background-color: rgba(0, 0, 0, 0.9); 174 | cursor: pointer; 175 | } 176 | 177 | .screenshot-modal.active { 178 | display: flex; 179 | align-items: center; 180 | justify-content: center; 181 | } 182 | 183 | .screenshot-modal img { 184 | max-width: 90%; 185 | max-height: 90%; 186 | object-fit: contain; 187 | } 188 | 189 | /* Fix logo in dark mode */ 190 | .dark .VPImage.logo { 191 | filter: brightness(1.2); 192 | } 193 | 194 | /* Improve feature cards */ 195 | .VPFeature { 196 | transition: transform 0.3s ease; 197 | } 198 | 199 | .VPFeature:hover { 200 | transform: translateY(-2px); 201 | } 202 | 203 | /* Buy Me a Coffee Button styling */ 204 | .coffee-button { 205 | text-align: center; 206 | margin: 3rem 0; 207 | padding: 2rem 0; 208 | border-top: 1px solid var(--vp-c-divider); 209 | } 210 | 211 | /* Code block enhancements */ 212 | .vp-doc div[class*="language-"] { 213 | border-radius: 8px; 214 | box-shadow: 0 2px 8px rgba(0,0,0,0.08); 215 | } 216 | 217 | /* Link color adjustments for better contrast */ 218 | .vp-doc a { 219 | color: var(--vp-c-brand-1); 220 | font-weight: 500; 221 | transition: color 0.2s ease; 222 | } 223 | 224 | .vp-doc a:hover { 225 | color: var(--vp-c-brand-2); 226 | } 227 | -------------------------------------------------------------------------------- /src/components/explorer/DataExplorer.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { useDuckStore } from "@/store"; 3 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; 4 | import { Button } from "@/components/ui/button"; 5 | import { Database, EllipsisVertical, FileUp, Plus } from "lucide-react"; 6 | import FileImporter from "./FileImporter"; 7 | import TreeNode, { TreeNodeData } from "./TreeNode"; 8 | import { Input } from "@/components/ui/input"; 9 | import { 10 | DropdownMenu, 11 | DropdownMenuContent, 12 | DropdownMenuGroup, 13 | DropdownMenuItem, 14 | DropdownMenuPortal, 15 | DropdownMenuTrigger, 16 | } from "@/components/ui/dropdown-menu"; 17 | 18 | import Logo from "/logo.png"; 19 | import LogoLight from "/logo-light.png"; 20 | import { useTheme } from "@/components/theme/theme-provider"; 21 | 22 | export default function DataExplorer() { 23 | const [isSheetOpen, setIsSheetOpen] = useState(false); 24 | const { databases, isLoading, currentConnection } = useDuckStore(); 25 | const [searchTerm, setSearchTerm] = useState(""); 26 | 27 | const handleSearch = (e: React.ChangeEvent
48 |
50 | External Connection
51 |
52 |
53 |
56 |
65 |
57 |
64 | 58 | You are connected to an external server. The data explorer is 59 | disabled for external connections. The external connection is 60 | yet in alpha stage and will be improved in future updates. 61 |
62 |You can still work normally with the query editor.
63 |
76 |
78 | )}
79 |
80 | Loading databases...
77 |
82 |
92 |
93 |
95 |
96 |
97 |
98 | setIsSheetOpen(true)}>
99 |
102 |
103 |
104 |
105 |
106 |
107 |
113 |
83 | 
88 | Explorer
89 |
90 |
91 |
118 |
126 |
140 | ) : (
141 |
127 |
128 | -
129 | {treeData.map((node, index) => (
130 |
142 |
157 | )}
158 |
143 |
148 |
156 | 145 | No databases found. Start by importing some data! 146 |
147 |