-
-
+
+
+
@@ -24,14 +21,8 @@ export default function ConnectBody({ user }: Readonly<{ user: User | null }>) {
-
+
-
-
+ {
- toggleTheme();
- }}
- >
- {theme === "dark" ? (
-
+
)}
- {config.onBack && !disableToggle &&
{
- if (theme === "light") {
+ if (resolvedTheme === "light") {
return createTheme({
theme: "light",
settings: {
@@ -73,5 +73,5 @@ export default function useCodeEditorTheme({
],
});
}
- }, [theme, fontSize]);
+ }, [resolvedTheme, fontSize]);
}
diff --git a/src/components/gui/studio.tsx b/src/components/gui/studio.tsx
index 17586f32..6090d7d9 100644
--- a/src/components/gui/studio.tsx
+++ b/src/components/gui/studio.tsx
@@ -2,14 +2,14 @@
import MainScreen from "@/components/gui/main-connection";
import { ConfigProvider } from "@/context/config-provider";
import { DriverProvider } from "@/context/driver-provider";
+import { StudioExtensionManager } from "@/core/extension-manager";
+import { BeforeQueryPipeline } from "@/core/query-pipeline";
import type { BaseDriver } from "@/drivers/base-driver";
-import { useEffect, useMemo, useRef } from "react";
import { CollaborationBaseDriver } from "@/drivers/collaboration-driver-base";
import { SavedDocDriver } from "@/drivers/saved-doc/saved-doc-driver";
-import { FullEditorProvider } from "./providers/full-editor-provider";
+import { useEffect, useMemo, useRef } from "react";
import { CommonDialogProvider } from "../common-dialog";
-import { StudioExtensionManager } from "@/core/extension-manager";
-import { BeforeQueryPipeline } from "@/core/query-pipeline";
+import { FullEditorProvider } from "./providers/full-editor-provider";
interface StudioProps {
driver: BaseDriver;
@@ -82,7 +82,6 @@ export function Studio({
}, [extensions]);
useEffect(() => {
- finalExtensionManager.init();
return () => finalExtensionManager.cleanup();
}, [finalExtensionManager]);
diff --git a/src/components/gui/table-optimized/OptimizeTableState.tsx b/src/components/gui/table-optimized/OptimizeTableState.tsx
index 91ed47a0..22c6b1f1 100644
--- a/src/components/gui/table-optimized/OptimizeTableState.tsx
+++ b/src/components/gui/table-optimized/OptimizeTableState.tsx
@@ -1,11 +1,11 @@
-import { OptimizeTableHeaderProps } from ".";
-import deepEqual from "deep-equal";
-import { formatNumber } from "@/lib/convertNumber";
-import { selectArrayFromIndexList } from "@/lib/export-helper";
import {
buildTableResultHeader,
BuildTableResultProps,
} from "@/lib/build-table-result";
+import { formatNumber } from "@/lib/convertNumber";
+import { selectArrayFromIndexList } from "@/lib/export-helper";
+import deepEqual from "deep-equal";
+import { OptimizeTableHeaderProps } from ".";
export interface OptimizeTableRowValue {
raw: Record;
@@ -321,6 +321,8 @@ export default class OptimizeTableState {
if (removedRows.length > 0) {
this.data = this.data.filter((row) => !removedRows.includes(row));
+ // after rows were removed, we need to deselect them
+ this.selectionRanges = [];
}
this.changeLogs = {};
diff --git a/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx b/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx
index 257bad71..b747512a 100644
--- a/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx
+++ b/src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx
@@ -31,11 +31,11 @@ export default function ERDTableColumn({
-
+
- {
- if (conn.shared) {
- e.preventDefault();
- }
- }}
- >
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
);
}
diff --git a/src/app/(theme)/embed/[driver]/page-client.tsx b/src/app/(theme)/embed/[driver]/page-client.tsx
new file mode 100644
index 00000000..bf3f533c
--- /dev/null
+++ b/src/app/(theme)/embed/[driver]/page-client.tsx
@@ -0,0 +1,90 @@
+"use client";
+import { Studio } from "@/components/gui/studio";
+import { StudioExtensionManager } from "@/core/extension-manager";
+import {
+ createMySQLExtensions,
+ createPostgreSQLExtensions,
+ createSQLiteExtensions,
+} from "@/core/standard-extension";
+import {
+ IframeMySQLDriver,
+ IframePostgresDriver,
+ IframeSQLiteDriver,
+} from "@/drivers/iframe-driver";
+import ElectronSavedDocs from "@/drivers/saved-doc/electron-saved-doc";
+import DoltExtension from "@/extensions/dolt";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useMemo } from "react";
+
+export default function EmbedPageClient({
+ driverName,
+}: {
+ driverName: string;
+}) {
+ const searchParams = useSearchParams();
+
+ const driver = useMemo(() => {
+ return createDatabaseDriver(driverName);
+ }, [driverName]);
+
+ const savedDocDriver = useMemo(() => {
+ if (window.outerbaseIpc?.docs) {
+ return new ElectronSavedDocs();
+ }
+ }, []);
+
+ const extensions = useMemo(() => {
+ return new StudioExtensionManager(createEmbedExtensions(driverName));
+ }, [driverName]);
+
+ useEffect(() => {
+ return driver.listen();
+ }, [driver]);
+
+ return (
+ = {};
+
+ for (const key in searchParams) {
+ if (!key.startsWith("themeVariables[")) {
+ continue;
+ }
+
+ overrideThemeVariables[key.slice(15, -1)] = searchParams[key];
+ }
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/app/(theme)/embed/board/[boardId]/page.tsx b/src/app/(theme)/embed/board/[boardId]/page.tsx
new file mode 100644
index 00000000..18b6e5db
--- /dev/null
+++ b/src/app/(theme)/embed/board/[boardId]/page.tsx
@@ -0,0 +1,31 @@
+import ThemeLayout from "@/app/(theme)/theme_layout";
+import Chart from "@/components/chart";
+import ClientOnly from "@/components/client-only";
+import { getOuterbaseEmbedChart } from "@/outerbase-cloud/api";
+
+interface EmbedBoardPageProps {
+ params: Promise<{ boardId: string }>;
+ searchParams: Promise<{ key: string; theme: string }>;
+}
+
+export default async function EmbedBoardPage(props: EmbedBoardPageProps) {
+ const searchParams = await props.searchParams;
+ const params = await props.params;
+
+ const result = await getOuterbaseEmbedChart(params.boardId, searchParams.key);
+ const data = result.response.result?.items ?? [];
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/app/(theme)/embed/dolt/page-client.tsx b/src/app/(theme)/embed/dolt/page-client.tsx
deleted file mode 100644
index 35f96e69..00000000
--- a/src/app/(theme)/embed/dolt/page-client.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client";
-import { Studio } from "@/components/gui/studio";
-import { StudioExtensionManager } from "@/core/extension-manager";
-import { createMySQLExtensions } from "@/core/standard-extension";
-import { IframeDoltDriver } from "@/drivers/iframe-driver";
-import ElectronSavedDocs from "@/drivers/saved-doc/electron-saved-doc";
-import DoltExtension from "@/extensions/dolt";
-import { useSearchParams } from "next/navigation";
-import { useEffect, useMemo } from "react";
-
-export default function EmbedPageClient() {
- const searchParams = useSearchParams();
- const driver = useMemo(() => new IframeDoltDriver(), []);
-
- const extensions = useMemo(() => {
- return new StudioExtensionManager([
- ...createMySQLExtensions(),
- new DoltExtension(),
- ]);
- }, []);
-
- const savedDocDriver = useMemo(() => {
- if (window.outerbaseIpc?.docs) {
- return new ElectronSavedDocs();
- }
- }, []);
-
- useEffect(() => {
- return driver.listen();
- }, [driver]);
-
- return (
- = {};
-
- for (const key in searchParams) {
- if (!key.startsWith("themeVariables[")) {
- continue;
- }
-
- overrideThemeVariables[key.slice(15, -1)] = searchParams[key];
- }
-
- return (
-
- {render()}
-
- );
- };
-}
diff --git a/src/app/(theme)/embed/mysql/page-client.tsx b/src/app/(theme)/embed/mysql/page-client.tsx
deleted file mode 100644
index 5fa3207f..00000000
--- a/src/app/(theme)/embed/mysql/page-client.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-import { Studio } from "@/components/gui/studio";
-import { StudioExtensionManager } from "@/core/extension-manager";
-import { createMySQLExtensions } from "@/core/standard-extension";
-import { IframeMySQLDriver } from "@/drivers/iframe-driver";
-import ElectronSavedDocs from "@/drivers/saved-doc/electron-saved-doc";
-import { useSearchParams } from "next/navigation";
-import { useEffect, useMemo } from "react";
-
-export default function EmbedPageClient() {
- const searchParams = useSearchParams();
- const driver = useMemo(() => new IframeMySQLDriver(), []);
-
- const extensions = useMemo(() => {
- return new StudioExtensionManager(createMySQLExtensions());
- }, []);
-
- const savedDocDriver = useMemo(() => {
- if (window.outerbaseIpc?.docs) {
- return new ElectronSavedDocs();
- }
- }, []);
-
- useEffect(() => {
- return driver.listen();
- }, [driver]);
-
- return (
- ;
}>) {
- const cookieStore = await cookies();
- const theme =
- overrideTheme ??
- (cookieStore.get("theme")?.value === "dark" ? "dark" : "light");
- const style = overrideThemeVariables ?? {};
+ useEffect(() => {
+ if (overrideThemeVariables && typeof window === "undefined") {
+ Object.entries(overrideThemeVariables).forEach(([key, value]) => {
+ document.body.style.setProperty(key, value);
+ });
+ }
+ }, [overrideThemeVariables]);
return (
-
-
+ <>
+
{children}
{children}
+
+ {children}
);
}
diff --git a/src/app/signin/page.tsx b/src/app/signin/page.tsx
new file mode 100644
index 00000000..f49e66c2
--- /dev/null
+++ b/src/app/signin/page.tsx
@@ -0,0 +1,100 @@
+"use client";
+import LabelInput from "@/components/label-input";
+import { Button } from "@/components/ui/button";
+import {
+ getOuterbaseWorkspace,
+ loginOuterbaseByPassword,
+} from "@/outerbase-cloud/api";
+import { OuterbaseAPIError } from "@/outerbase-cloud/api-type";
+import { LucideLoader } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+import ThemeLayout from "../(theme)/theme_layout";
+import { LoginBaseSpaceship } from "./starbase-portal";
+
+export default function SigninPage() {
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [error, setError] = useState("");
+ const router = useRouter();
+ const [loading, setLoading] = useState(false);
+
+ const onLoginClicked = useCallback(() => {
+ setLoading(true);
+
+ loginOuterbaseByPassword(email, password)
+ .then((session) => {
+ localStorage.setItem("session", JSON.stringify(session));
+ localStorage.setItem("ob-token", session.token);
+
+ getOuterbaseWorkspace()
+ .then((w) => {
+ router.push(`/w/${w.items[0].short_name}`);
+ })
+ .catch(console.error)
+ .finally(() => {
+ setLoading(false);
+ });
+ })
+ .catch((e) => {
+ setLoading(false);
+ if (e instanceof OuterbaseAPIError) {
+ setError(e.description);
+ }
+ });
+ }, [email, password, router]);
+
+ return (
+
+
+ );
+}
diff --git a/src/app/signin/starbase-portal.tsx b/src/app/signin/starbase-portal.tsx
new file mode 100644
index 00000000..9ad41526
--- /dev/null
+++ b/src/app/signin/starbase-portal.tsx
@@ -0,0 +1,48 @@
+import "./styles.css";
+
+export function LoginBaseSpaceship() {
+ return (
+ ({
+ layout: [
+ { x: 0, y: 0, w: 1, h: 1, i: "0" },
+ { x: 1, y: 0, w: 1, h: 1, i: "1" },
+ { x: 2, y: 0, w: 1, h: 1, i: "2" },
+ { x: 3, y: 0, w: 1, h: 1, i: "3" },
+ ],
+ data: { filters: [] },
+ });
+
+ console.log(value);
+
+ return (
+
-You can write more markdown here
diff --git a/src/app/storybook/page.mdx b/src/app/storybook/page.mdx
new file mode 100644
index 00000000..3525df96
--- /dev/null
+++ b/src/app/storybook/page.mdx
@@ -0,0 +1,55 @@
+import { DocContent } from "@/components/mdx/docs";
+
+export const metadata = {
+ title: "Standard Component Guideline",
+};
+
+
+
+Please prioritize using these standard components whenever possible. Our goal is to maintain consistency and **limit excessive customization**.
+
+### Example 1
+
+â›” Developers may have their own preferences for styling
+
+```tsx
+
+
+```
+
+## New Components Guideline
+
+- ✅ All standard components should be placed in the `src/app/components` folder.
+- ✅ Try to make your component friendly for copy-pasting to other project.
+- â›” Avoid including business logic that is tightly coupled with the application in standard components.
+- â›” Do not place one-off components in the `src/app/components` folder.
+ - If it is an extension component, place it in the extension folder.
+ - If it is a page-specific component, place it in the corresponding app router folder near the page.
+- â›” Minimize the use of color-specific class names whenever possible.
+ Instead, use theme-based colors to ensure easier customization and future support for custom themes.
+ - Example 1: `border` instead of `border-gray-100 dark:border-gray-600`
+ - Example 2: `bg-secondary` instead of `bg-gray-100 dark:bg-gray-600`
+
+
diff --git a/src/app/storybook/page.tsx b/src/app/storybook/page.tsx
deleted file mode 100644
index 97cd70a0..00000000
--- a/src/app/storybook/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Storybook() {
- return ;
-}
diff --git a/src/app/storybook/toolbar/example.tsx b/src/app/storybook/toolbar/example.tsx
new file mode 100644
index 00000000..192d9abf
--- /dev/null
+++ b/src/app/storybook/toolbar/example.tsx
@@ -0,0 +1,34 @@
+import {
+ Toolbar,
+ ToolbarButton,
+ ToolbarFiller,
+ ToolbarSeparator,
+} from "@/components/gui/toolbar";
+import { LucideCopy, LucideFolder, LucideSave } from "lucide-react";
+
+export function StorybookToolbarExample() {
+ return (
+ (undefined);
+
+ const onFilter = useCallback(() => {
+ const data = [
+ ...props.filters,
+ {
+ type: "search",
+ default_value: "",
+ value: "",
+ name: "",
+ new: true,
+ },
+ ];
+ props.onFilters(data);
+ setSelectIndex(data.length - 1);
+ setOpen(true);
+ }, [props]);
+
+ const mapFilterItem = props.filters.map((x, i) => {
+ const icon =
+ x.type === "search" ? (
+
+
+
+
+ {DEFAULT_DATE_FILTER.map((date) => {
+ return (
+ {
+ const data = structuredClone(props.filters);
+ data[i].default_value = date;
+ props.onFilters(data);
+ }}
+ >
+
+ );
+ })}
+
+
+ );
+ return (
+ ({});
+
+export function BoardProvider({
+ children,
+ sources,
+}: PropsWithChildren) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/board/board-style.css b/src/components/board/board-style.css
new file mode 100644
index 00000000..8fa084e3
--- /dev/null
+++ b/src/components/board/board-style.css
@@ -0,0 +1,139 @@
+.react-grid-layout {
+ position: relative;
+ transition: height 200ms ease;
+}
+.react-grid-item {
+ transition: all 200ms ease;
+ transition-property: left, top, width, height;
+}
+.react-grid-item img {
+ pointer-events: none;
+ user-select: none;
+}
+.react-grid-item.cssTransforms {
+ transition-property: transform, width, height;
+}
+.react-grid-item.resizing {
+ transition: none;
+ z-index: 1;
+ will-change: width, height;
+}
+
+.react-grid-item.react-draggable-dragging {
+ transition: none;
+ z-index: 3;
+ will-change: transform;
+}
+
+.react-grid-item.dropping {
+ visibility: hidden;
+}
+
+.react-grid-item.react-grid-placeholder {
+ background: #c9c9c9;
+ opacity: 0.2;
+ transition-duration: 100ms;
+ z-index: 2;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+.react-grid-item.react-grid-placeholder.placeholder-resizing {
+ transition: none;
+}
+
+.react-grid-item > .react-resizable-handle {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+ content: "";
+ position: absolute;
+ right: 3px;
+ bottom: 3px;
+ width: 5px;
+ height: 5px;
+ border-right: 2px solid rgba(0, 0, 0, 0.4);
+ border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+}
+
+.react-resizable-hide > .react-resizable-handle {
+ display: none;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+ bottom: 0;
+ left: 0;
+ cursor: sw-resize;
+ transform: rotate(90deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+ bottom: 0;
+ right: 0;
+ cursor: se-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+ top: 0;
+ left: 0;
+ cursor: nw-resize;
+ transform: rotate(180deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+ top: 0;
+ right: 0;
+ cursor: ne-resize;
+ transform: rotate(270deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+ top: 50%;
+ margin-top: -10px;
+ cursor: ew-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+ left: 0;
+ transform: rotate(135deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+ right: 0;
+ transform: rotate(315deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+ left: 50%;
+ margin-left: -10px;
+ cursor: ns-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+ top: 0;
+ transform: rotate(225deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+ bottom: 0;
+ transform: rotate(45deg);
+}
+
+.reveal {
+ opacity: 0;
+ transform: translateY(20px);
+}
+
+.animate-revealMenu {
+ animation: revealMenu 1s cubic-bezier(0.7, 0, 0, 1.2) forwards;
+}
+
+@keyframes revealMenu {
+ 0% {
+ opacity: 100%;
+ transform: translateY(100px) translateX(-40%);
+ }
+ 100% {
+ opacity: 100%;
+ transform: translateY(0) translateX(-40%);
+ }
+}
diff --git a/src/components/board/board-tool.tsx b/src/components/board/board-tool.tsx
new file mode 100644
index 00000000..8c1a4ec6
--- /dev/null
+++ b/src/components/board/board-tool.tsx
@@ -0,0 +1,38 @@
+import { ChartLine, ImageUpscale } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+interface Props {
+ editMode: "ADD_CHART" | "REARRANGING_CHART" | null;
+ setEditMode: (v: "ADD_CHART" | "REARRANGING_CHART") => void;
+}
+
+export function BoardTool(props: Props) {
+ return (
+
+
+ );
+}
diff --git a/src/components/button-group.tsx b/src/components/button-group.tsx
new file mode 100644
index 00000000..d5cb22cb
--- /dev/null
+++ b/src/components/button-group.tsx
@@ -0,0 +1,40 @@
+import { cn } from "@/lib/utils";
+import { PropsWithChildren } from "react";
+
+export function ButtonGroup({
+ children,
+}: PropsWithChildren<{ suppressHydrationWarning?: boolean }>) {
+ return (
+ ) {
+ return (
+
+ );
+}
diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
new file mode 100644
index 00000000..d379da30
--- /dev/null
+++ b/src/components/chart/index.tsx
@@ -0,0 +1,171 @@
+"use client";
+import * as echarts from "echarts";
+import { EChartsOption } from "echarts";
+import { useEffect, useRef } from "react";
+
+interface ChartLayer {
+ sql: string;
+ type: string;
+}
+
+interface ChartOptions {
+ theme?: string;
+ xAxisKey: string;
+ yAxisKeys: string[];
+ yAxisKeyColors: {
+ [key: string]: string;
+ };
+}
+
+interface ChartParams {
+ id: string;
+ name: string;
+ type: ChartType;
+ model: string;
+ apiKey: string;
+ layers: ChartLayer[];
+ options: ChartOptions;
+ source_id: string;
+ created_at: string;
+ updated_at: string;
+ workspace_id: string;
+ connection_id: string | null;
+}
+
+export interface ChartValue {
+ connection_id: string | null;
+ created_at: string;
+ id: string;
+ model: string;
+ name: string;
+ params: ChartParams;
+ source_id: string;
+ type: ChartType;
+ updated_at: string;
+ workspace_id: string;
+}
+
+export interface ChartData {
+ [key: string]: any;
+}
+
+export type ChartType = "line" | "bar" | "pie" | "column" | "scatter";
+
+interface OuterbaseChartProps {
+ data: ChartData[];
+ value: ChartValue;
+ modifier?: EChartsOption;
+ className?: string;
+}
+
+export default function Chart({
+ value,
+ data,
+ modifier,
+ className,
+}: OuterbaseChartProps) {
+ const domRef = useRef(null);
+
+ useEffect(() => {
+ const props = transfromOutbaseChartData({
+ value,
+ data,
+ modifier,
+ });
+ if (domRef.current) {
+ let chartInstance = echarts.getInstanceByDom(domRef.current);
+ if (chartInstance) {
+ chartInstance.dispose();
+ }
+ chartInstance = echarts.init(domRef.current);
+ chartInstance.clear();
+ chartInstance.setOption(props);
+ }
+ }, [domRef, value, data, modifier]);
+
+ return (
+
+ );
+}
+
+export function transfromOutbaseChartData({
+ value,
+ data,
+ modifier,
+}: OuterbaseChartProps) {
+ const xAxisData = data.map(
+ (item) => item[value?.params?.options?.xAxisKey] ?? ""
+ );
+ const seriesData = value?.params?.options?.yAxisKeys.map((key) => {
+ const color = value?.params?.options?.yAxisKeyColors?.[key] ?? "";
+ const chartType = value?.type;
+ const baseSeries = {
+ name: key,
+ type: value.type,
+ data: data.map((item) => {
+ if (chartType === "pie") {
+ return {
+ value: item[key],
+ name: item[value?.params?.options?.xAxisKey] ?? "",
+ };
+ } else {
+ return item[key];
+ }
+ }),
+ itemStyle: {
+ color: color,
+ },
+ };
+ if (chartType === "pie") {
+ return pieChartDecoration(baseSeries);
+ }
+ return baseSeries;
+ });
+
+ if (value.type === "pie") {
+ return {
+ series: seriesData,
+ ...modifier,
+ };
+ }
+
+ return {
+ xAxis: {
+ type: "category",
+ data: xAxisData,
+ },
+ yAxis: {
+ type: "value",
+ },
+ series: seriesData,
+ ...modifier,
+ };
+}
+
+function pieChartDecoration(baseSeries: any) {
+ return {
+ ...baseSeries,
+ type: "pie",
+ radius: ["40%", "70%"],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: "#fff",
+ borderWidth: 2,
+ },
+ label: {
+ show: false,
+ position: "center",
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: "bold",
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ };
+}
diff --git a/src/components/code-block.tsx b/src/components/code-block.tsx
index 453d5fd3..9de278be 100644
--- a/src/components/code-block.tsx
+++ b/src/components/code-block.tsx
@@ -1,3 +1,4 @@
+import React from "react";
import { createHighlighter } from "shiki";
import type { BundledLanguage } from "shiki/bundle/full";
@@ -55,9 +56,19 @@ interface MDXCodeBlockProps {
async function CodeBlock(props: MDXCodeBlockProps) {
if (typeof props.children === "string") {
+ console.log("here");
return
{!disableToggle && (
-
-
-
-
-
-
-
-
-
-
-
-
- {conn.name}
-
-
- {DRIVER_DETAIL[conn.driver ?? "turso"].displayName}
-
-
-
-
-
- {conn.description || "No description"}
-
-
+ setEmail(e.currentTarget.value)}
+ />
+
+ setPassword(e.currentTarget.value)}
+ />
+
+ {error &&
+
+
+
+
+
+
+ Welcome back
+Sign in to your existing account
+{error}
}
+
+
+
+
+ Forget password
+
+
+
+
+
+ );
+}
diff --git a/src/app/signin/styles.css b/src/app/signin/styles.css
new file mode 100644
index 00000000..0c507818
--- /dev/null
+++ b/src/app/signin/styles.css
@@ -0,0 +1,53 @@
+@keyframes moveStars {
+ 0% {
+ bottom: 32%;
+ transform: rotate(0deg);
+ }
+ 25% {
+ bottom: 33%;
+ transform: rotate(-1deg);
+ }
+ 50% {
+ bottom: 34%;
+ transform: rotate(0deg);
+ }
+ 75% {
+ bottom: 33%;
+ transform: rotate(1deg);
+ }
+ 100% {
+ bottom: 32%;
+ transform: rotate(0deg);
+ }
+}
+
+@keyframes movePlanet {
+ 0% {
+ bottom: 16%;
+ transform: rotate(0deg);
+ }
+ 25% {
+ bottom: 17.5%;
+ transform: rotate(1deg);
+ }
+ 50% {
+ bottom: 20%;
+ transform: rotate(0deg);
+ }
+ 75% {
+ bottom: 17.5%;
+ transform: rotate(-1deg);
+ }
+ 100% {
+ bottom: 16%;
+ transform: rotate(0deg);
+ }
+}
+
+.stars-animation {
+ animation: moveStars 30s ease-in-out infinite;
+}
+
+.planet-animation {
+ animation: movePlanet 30s ease-in-out infinite;
+}
diff --git a/src/app/storybook/blank_page.mdx b/src/app/storybook/blank_page.mdx
new file mode 100644
index 00000000..52883e35
--- /dev/null
+++ b/src/app/storybook/blank_page.mdx
@@ -0,0 +1,7 @@
+import { DocContent } from "@/components/mdx/docs";
+
+export const metadata = {
+ title: "Template Title",
+};
+
+
+
+
+ 
+
+ 
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/storybook/chart/page.tsx b/src/app/storybook/chart/page.tsx
new file mode 100644
index 00000000..4c2e5917
--- /dev/null
+++ b/src/app/storybook/chart/page.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import Chart, { ChartData, ChartValue } from "@/components/chart";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+const data: ChartData[] = [
+ {
+ package_year: 2021,
+ package_count: 33,
+ },
+ {
+ package_year: 2020,
+ package_count: 62103,
+ },
+ {
+ package_year: 2021,
+ package_count: 360881,
+ },
+ {
+ package_year: 2022,
+ package_count: 426727,
+ },
+ {
+ package_year: 2023,
+ package_count: 370008,
+ },
+ {
+ package_year: 2024,
+ package_count: 1074,
+ },
+ {
+ package_year: 2025,
+ package_count: 43,
+ },
+];
+
+const lineChartValue: ChartValue = {
+ connection_id: null,
+ created_at: "2025-01-30T02:57:34.579Z",
+ id: "2bdc1dc4-21de-4b5f-90d2-384e40288769",
+ model: "chart",
+ name: "Line Chart",
+ params: {
+ id: "2bdc1dc4-21de-4b5f-90d2-384e40288769",
+ name: "Line Chart",
+ type: "scatter",
+ model: "chart",
+ apiKey: "",
+ layers: [
+ {
+ sql: "SELECT YEAR(created_at) AS package_year, COUNT(*) AS package_count FROM package GROUP BY package_year",
+ type: "line",
+ },
+ ],
+ options: {
+ xAxisKey: "package_year",
+ yAxisKeys: ["package_count"],
+ yAxisKeyColors: {
+ "1 + 1": "#fafafa",
+ package_year: "#fafafa",
+ },
+ },
+ source_id: "856a1855-2bee-4d87-9756-a783088c0568",
+ created_at: "2025-01-30T02:57:34.579Z",
+ updated_at: "2025-01-30T02:57:34.579Z",
+ workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
+ connection_id: null,
+ },
+ source_id: "856a1855-2bee-4d87-9756-a783088c0568",
+ type: "line",
+ updated_at: "2025-01-30T09:06:35.249Z",
+ workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
+};
+
+const barChartValue: ChartValue = {
+ connection_id: null,
+ created_at: "2025-01-30T02:56:40.851Z",
+ id: "fed7cd59-6be9-4f43-af6d-b730d14be984",
+ model: "chart",
+ name: "Bar chart",
+ params: {
+ id: "fed7cd59-6be9-4f43-af6d-b730d14be984",
+ name: "Bar chart",
+ type: "column",
+ model: "chart",
+ apiKey: "",
+ layers: [
+ {
+ sql: "SELECT YEAR(created_at) AS package_year, COUNT(*) AS package_count FROM package GROUP BY package_year",
+ type: "bar",
+ },
+ ],
+ options: {
+ xAxisKey: "package_year",
+ yAxisKeys: ["package_count"],
+ yAxisKeyColors: {
+ avg_value: "#e5e5e5",
+ sum_value: "#a3a3a3",
+ ValueGroup: "#fafafa",
+ PackageCount: "#fafafa",
+ package_count: "#525252",
+ },
+ },
+ source_id: "856a1855-2bee-4d87-9756-a783088c0568",
+ created_at: "2025-01-30T02:56:40.851Z",
+ updated_at: "2025-01-30T02:56:40.851Z",
+ workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
+ connection_id: null,
+ },
+ source_id: "856a1855-2bee-4d87-9756-a783088c0568",
+ type: "bar",
+ updated_at: "2025-01-30T09:25:05.373Z",
+ workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
+};
+
+const pieChartValue: ChartValue = {
+ connection_id: null,
+ created_at: "2025-01-30T03:00:40.963Z",
+ id: "602f5960-e2db-4359-8008-c87629c1d169",
+ model: "chart",
+ name: "Pie chart teset",
+ params: {
+ id: "602f5960-e2db-4359-8008-c87629c1d169",
+ name: "Pie chart teset",
+ type: "line",
+ model: "chart",
+ apiKey: "",
+ layers: [
+ {
+ sql: "SELECT YEAR(created_at) AS package_year, COUNT(*) AS package_count FROM package GROUP BY package_year",
+ type: "pie",
+ },
+ ],
+ options: {
+ theme: "afterburn",
+ xAxisKey: "package_year",
+ yAxisKeys: ["package_count"],
+ yAxisKeyColors: {
+ package_count: "#E75F98",
+ },
+ },
+ source_id: "856a1855-2bee-4d87-9756-a783088c0568",
+ created_at: "2025-01-30T03:00:40.963Z",
+ updated_at: "2025-01-30T03:00:40.963Z",
+ workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
+ connection_id: null,
+ },
+ source_id: "856a1855-2bee-4d87-9756-a783088c0568",
+ type: "pie",
+ updated_at: "2025-01-30T07:19:15.167Z",
+ workspace_id: "3db2e96f-ee43-412d-be09-25fc02d3a463",
+};
+
+export default function StorybookChartPage() {
+ const [chartValue, setChartValue] = useState(lineChartValue);
+ const [items, setItems] = useState(data);
+ const [modifier, setModifier] = useState({});
+
+ return (
+
+
+ );
+}
diff --git a/src/app/storybook/layout.tsx b/src/app/storybook/layout.tsx
index 2f24c7b5..1cc1c998 100644
--- a/src/app/storybook/layout.tsx
+++ b/src/app/storybook/layout.tsx
@@ -1,33 +1,72 @@
import { SidebarMenuHeader, SidebarMenuItem } from "@/components/sidebar-menu";
+import ThemeToggle from "@/components/theme-toggle";
import { Separator } from "@/components/ui/separator";
+import { TooltipProvider } from "@/components/ui/tooltip";
import { Component, Layers2 } from "lucide-react";
+import ThemeLayout from "../(theme)/theme_layout";
-export default async function StorybookRootLayout({
+export default function StorybookRootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
-
-
+
+
+
+
+
+
+
+
+
-
+
);
}
diff --git a/src/app/storybook/listview/page.tsx b/src/app/storybook/listview/example1.tsx
similarity index 78%
rename from src/app/storybook/listview/page.tsx
rename to src/app/storybook/listview/example1.tsx
index 19e9c10a..447df9e8 100644
--- a/src/app/storybook/listview/page.tsx
+++ b/src/app/storybook/listview/example1.tsx
@@ -4,7 +4,7 @@ import { Input } from "@/components/ui/input";
import { LucideDatabase, LucideTable } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
-function Demo1() {
+export function StorybookListviewExample() {
const [filter, setFilter] = useState("");
const [selected, setSelected] = useState("");
const [collapsed, setCollapsed] = useState(new Set(["movies"]));
@@ -104,42 +104,3 @@ function Demo1() {
);
}
-
-function Demo2() {
- return (
-
+
+
+
+
+
+ {children}
- {children}
-
- );
-}
-
-export default function ListViewStorybookPage() {
- return (
- <>
- -
+
+```
+
+✅ Developers must follow a single prescribed method.
+
+```tsx
+
+
+
+
+
+ Your username does not exist
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/storybook/toolbar/page.mdx b/src/app/storybook/toolbar/page.mdx
new file mode 100644
index 00000000..58d311f2
--- /dev/null
+++ b/src/app/storybook/toolbar/page.mdx
@@ -0,0 +1,10 @@
+import { DocContent } from "@/components/mdx/docs";
+import { StorybookToolbarExample } from "./example";
+
+export const metadata = {
+ title: "Toolbar",
+};
+
+
+
+
+
+
+
+ {props.editMode === "REARRANGING_CHART" && (
+
+ );
+ });
+
+ return (
+
+ {sizes.map((x, index) => {
+ return (
+
+ );
+ })}
+
+ )}
+ {i}
+
+
+ {mapItem}
+
+
+ );
+}
diff --git a/src/components/board/board-filter-dialog.tsx b/src/components/board/board-filter-dialog.tsx
new file mode 100644
index 00000000..de3efcce
--- /dev/null
+++ b/src/components/board/board-filter-dialog.tsx
@@ -0,0 +1,192 @@
+import { useCallback } from "react";
+import { Button } from "../ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../ui/select";
+
+export interface BoardFilterProps {
+ type: string;
+ name: string;
+ default_value: string;
+ value: string;
+ new?: boolean;
+}
+
+interface Props {
+ onClose?: () => void;
+ filter: BoardFilterProps;
+ onFilter: (v: BoardFilterProps) => void;
+ onAddFilter?: (v: BoardFilterProps) => void;
+}
+
+const DEFAULT_EMPTY = {
+ type: "search",
+ name: "",
+ default_value: "",
+ value: "",
+};
+
+export const DEFAULT_DATE_FILTER = [
+ "Not timeframe override",
+ "Custom date range",
+ "Last 24 hours",
+ "Today",
+ "Yesterday",
+ "This week",
+ "This month",
+ "Last 7 days",
+ "Last 30 days",
+ "Last 90 days",
+];
+
+export function BoardFilterDialog(props: Props) {
+ let default_value = [...DEFAULT_DATE_FILTER];
+
+ if (props.filter.type === "enum" && !!props.filter.value) {
+ default_value = [...props.filter.value.split(",")];
+ }
+
+ let allowAddFilter = !!props.filter.name;
+
+ if (props.filter.type === "enum") {
+ allowAddFilter = !!props.filter.name && !!props.filter.value;
+ }
+
+ const onAddFilter = useCallback(() => {
+ props.onAddFilter && props.onAddFilter(props.filter);
+ }, [props]);
+
+ return (
+
+ );
+}
diff --git a/src/components/board/board-filter.tsx b/src/components/board/board-filter.tsx
new file mode 100644
index 00000000..368f2f96
--- /dev/null
+++ b/src/components/board/board-filter.tsx
@@ -0,0 +1,246 @@
+"use client";
+import {
+ CalendarDays,
+ Check,
+ Ellipsis,
+ ListFilter,
+ ListOrdered,
+ Search,
+} from "lucide-react";
+import { useCallback, useState } from "react";
+import { buttonVariants } from "../ui/button";
+import { Checkbox } from "../ui/checkbox";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import {
+ BoardFilterDialog,
+ BoardFilterProps,
+ DEFAULT_DATE_FILTER,
+} from "./board-filter-dialog";
+import { BoardTool } from "./board-tool";
+
+interface Props {
+ filters: BoardFilterProps[];
+ onFilters: (f: BoardFilterProps[]) => void;
+ editMode: "ADD_CHART" | "REARRANGING_CHART" | null;
+ setEditMode: (v: "ADD_CHART" | "REARRANGING_CHART") => void;
+}
+
+export function BoardFilter(props: Props) {
+ const [open, setOpen] = useState(false);
+ const [selectIndex, setSelectIndex] = useState
+
+
+
+
+ {x.value.split(",").map((v, idx) => {
+ return (
+
+
+
+ ) : (
+
+
+ {x.default_value || `Select ${x.name}`}
+
+ {
+ const value = x.default_value.split(",");
+ const data = structuredClone(props.filters);
+
+ if (checked) {
+ data[i].default_value = [...value, v]
+ .filter((f) => !!f)
+ .join(",");
+ } else {
+ value.filter((f) => f !== v);
+ data[i].default_value = value
+ .filter((f) => f !== v)
+ .join(",");
+ }
+ props.onFilters(data);
+ }}
+ />
+
+
+ );
+ })}
+
+
+ {x.default_value || `Select ${x.name}`}
+
+ {date}
+ {date === x.default_value &&
+
+
+
+
+
+ {
+ setSelectIndex(i);
+ setOpen(true);
+ }}
+ >
+ Edit filter
+
+ {
+ props.onFilters([
+ ...props.filters.filter((_, idx) => idx !== i),
+ ]);
+ }}
+ >
+ Remove
+
+
+
+
+ );
+ });
+
+ return (
+ <>
+
+ {icon}
+ {x.name}
+
+
+ {input}
+
+
+
+
+ {open && selectIndex !== undefined && (
+ {
+ setOpen(false);
+ if (props.filters[selectIndex].new === true) {
+ props.onFilters([
+ ...props.filters.filter((_, i) => i !== selectIndex),
+ ]);
+ setSelectIndex(undefined);
+ }
+ }}
+ filter={props.filters[selectIndex]}
+ onFilter={(v) => {
+ const data = structuredClone(props.filters);
+ data[selectIndex] = v;
+ props.onFilters(data);
+ }}
+ onAddFilter={() => {
+ const data = structuredClone(props.filters);
+ data[selectIndex].new = false;
+ setOpen(false);
+ props.onFilters(data);
+ }}
+ />
+ )}
+
+
+ );
+}
diff --git a/src/components/board/board-provider.tsx b/src/components/board/board-provider.tsx
new file mode 100644
index 00000000..4267af36
--- /dev/null
+++ b/src/components/board/board-provider.tsx
@@ -0,0 +1,19 @@
+import { BoardSourceDriver } from "@/drivers/board-source/base-source";
+import { createContext, PropsWithChildren } from "react";
+
+interface BoardContextProps {
+ sources?: BoardSourceDriver;
+}
+
+const BoardContext = createContext
+ {mapFilterItem}
+
+
+
+
+
+
+
+
+ Add Chart
+
+
+
+
+
+
+ Rearranging charts
+
+
+
+
+ );
+}
diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx
new file mode 100644
index 00000000..654870ad
--- /dev/null
+++ b/src/components/board/index.tsx
@@ -0,0 +1,56 @@
+import { BoardSourceDriver } from "@/drivers/board-source/base-source";
+import { useState } from "react";
+import { BoardCanvas } from "./board-canvas";
+import { BoardFilter } from "./board-filter";
+import { BoardFilterProps } from "./board-filter-dialog";
+import { BoardProvider } from "./board-provider";
+
+interface DashboardProps {
+ layout: ReactGridLayout.Layout[];
+ data: {
+ filters: BoardFilterProps[];
+ };
+}
+
+interface Props {
+ value: DashboardProps;
+ sources?: BoardSourceDriver;
+ setValue: (value: DashboardProps) => void;
+}
+
+export default function Board({ value, setValue, sources }: Props) {
+ const [editMode, setEditMode] = useState<
+ "ADD_CHART" | "REARRANGING_CHART" | null
+ >(null);
+
+ return (
+
+
+ setValue({
+ ...value,
+ data: {
+ ...value.data,
+ filters: v,
+ },
+ })
+ }
+ editMode={editMode}
+ setEditMode={setEditMode}
+ />
+ {
+ setValue({
+ ...value,
+ layout: v,
+ });
+ }}
+ editMode={editMode}
+ />
+
+
+ {children}
+
+ );
+}
+
+interface ButtonGroupItemProps {
+ onClick?: () => void;
+ selected?: boolean;
+ suppressHydrationWarning?: boolean;
+}
+
+export function ButtonGroupItem({
+ children,
+ selected,
+ onClick,
+}: PropsWithChildren
(
diff --git a/src/components/gui/query-result-table.tsx b/src/components/gui/query-result-table.tsx
index e45e389a..0f4f716f 100644
--- a/src/components/gui/query-result-table.tsx
+++ b/src/components/gui/query-result-table.tsx
@@ -256,6 +256,12 @@ export default function ResultTable({
const data = pasteValue.split("\r\n").map((row) => row.split("\t"));
for (let row = 0; row < data.length; row++) {
+ //filter out the additional enter from excel copy
+ if (row === data.length - 1) {
+ if (data[row].length === 1 && data[row][0] === "") {
+ break;
+ }
+ }
for (let col = 0; col < data[row].length; col++) {
state.changeValue(
y + row,
diff --git a/src/components/gui/sidebar-tab.tsx b/src/components/gui/sidebar-tab.tsx
index 7378d649..b8ca106e 100644
--- a/src/components/gui/sidebar-tab.tsx
+++ b/src/components/gui/sidebar-tab.tsx
@@ -1,9 +1,11 @@
import { useConfig } from "@/context/config-provider";
-import { useTheme } from "@/context/theme-provider";
import { cn } from "@/lib/utils";
-import { ReactElement, useMemo, useState } from "react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { ArrowLeft } from "@phosphor-icons/react";
+import { useTheme } from "next-themes";
import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { ReactElement, useMemo, useState } from "react";
+import ThemeToggle from "../theme-toggle";
import {
DropdownMenu,
DropdownMenuContent,
@@ -11,7 +13,7 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
-import { ArrowLeft, MoonStars, Sun } from "@phosphor-icons/react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
export interface SidebarTabItem {
key: string;
@@ -26,14 +28,18 @@ interface SidebarTabProps {
}
export default function SidebarTab({ tabs }: Readonly) {
+ const { forcedTheme } = useTheme();
const [selectedIndex, setSelectedIndex] = useState(0);
- const { theme, toggleTheme, disableToggle } = useTheme();
const [loadedIndex, setLoadedIndex] = useState(() => {
const a: boolean[] = new Array(tabs.length).fill(false);
a[0] = true;
return a;
});
+ const searchParams = useSearchParams();
+ const disableToggle =
+ searchParams.get("disableThemeToggle") === "1" || forcedTheme;
+
const config = useConfig();
/**
@@ -103,26 +109,18 @@ export default function SidebarTab({ tabs }: Readonly) {
+
)}
+
{config.onBack && (
{column.title}
- {column.type}
+ {column.type}
diff --git a/src/components/gui/toolbar.tsx b/src/components/gui/toolbar.tsx
index af2c71d4..564e4514 100644
--- a/src/components/gui/toolbar.tsx
+++ b/src/components/gui/toolbar.tsx
@@ -1,12 +1,12 @@
+import { cn } from "@/lib/utils";
+import { LucideLoader } from "lucide-react";
import { PropsWithChildren, ReactElement } from "react";
import { buttonVariants } from "../ui/button";
-import { LucideLoader } from "lucide-react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { Separator } from "../ui/separator";
-import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
export function Toolbar({ children }: PropsWithChildren) {
- return {
key: string;
@@ -57,31 +58,6 @@ interface ListViewRendererProps extends ListViewProps {
contextOpen: boolean;
}
-function Highlight({ text, highlight }: { text: string; highlight?: string }) {
- if (!highlight) return {text};
-
- const regex = new RegExp(
- "(" + (highlight ?? "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")",
- "i"
- );
-
- const splitedText = text.split(regex);
-
- return (
-
- {splitedText.map((text, idx) => {
- return text.toLowerCase() === (highlight ?? "").toLowerCase() ? (
-
- {text}
-
- ) : (
- {text}
- );
- })}
-
- );
-}
-
function Indentation({ depth }: { depth: number }) {
if (depth <= 0) return null;
@@ -219,7 +195,7 @@ function renderList(props: ListViewRendererProps): React.ReactElement {
{item.iconBadgeColor && (
@@ -228,7 +204,7 @@ function renderList(props: ListViewRendererProps): React.ReactElement {
)}
+
{column.type}
{children}
;
+ return {children}
;
}
export function ToolbarSeparator() {
@@ -17,6 +17,10 @@ export function ToolbarSeparator() {
);
}
+export function ToolbarFiller() {
+ return ;
+}
+
export function ToolbarButton({
disabled,
loading,
@@ -46,12 +50,12 @@ export function ToolbarButton({
disabled={disabled}
onClick={onClick}
>
- {loading ?
+
+
+
+ );
+}
diff --git a/src/components/listview/index.tsx b/src/components/listview/index.tsx
index 17206b45..3e2be101 100644
--- a/src/components/listview/index.tsx
+++ b/src/components/listview/index.tsx
@@ -19,6 +19,7 @@ import React, {
useRef,
useState,
} from "react";
+import HighlightText from "../ui/highlight-text";
export interface ListViewItem
- ): React.ReactElement {
{item.progressBarValue && item.progressBarMax && (
-
+
) {
+}: PropsWithChildren<{ title?: string; group?: string }>) {
return (
<>
-
- {children}
+ )}
+
+ {children}
+
);
}
@@ -36,7 +41,7 @@ export function DocLayout({
<>
>;
+ icon?: React.FC>;
+}
+
+export default function ResourceCard({
+ className,
+ color,
+ href,
+ status,
+ title,
+ subtitle,
+ icon: IconComponent = Database,
+ visual: VisualComponent = BoardVisual,
+ children,
+}: PropsWithChildren) {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+ {/* content */}
+
+
+
+ {/* status */}
+
+
+
+
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ >
+ {children}
+
+
+ )}
+
+ );
+}
diff --git a/src/components/resource-card/utils.tsx b/src/components/resource-card/utils.tsx
new file mode 100644
index 00000000..8bf06634
--- /dev/null
+++ b/src/components/resource-card/utils.tsx
@@ -0,0 +1,48 @@
+import { Database } from "@phosphor-icons/react";
+import {
+ MySQLIcon,
+ PostgreIcon,
+ RqliteIcon,
+ SQLiteIcon,
+} from "../icons/outerbase-icon";
+import { CloudflareIcon, StarbaseIcon, ValTownIcon } from "./icon";
+import { GeneralVisual, MySQLVisual, SQLiteVisual } from "./visual";
+
+export function getDatabaseFriendlyName(type: string) {
+ if (type === "sqlite") return "SQLite";
+ if (type === "mysql") return "MySQL";
+ if (type === "postgres") return "PostgreSQL";
+ if (type === "rqlite") return "rqlite";
+ if (type === "turso") return "Turso";
+ if (type === "libsql") return "LibSQL";
+ if (type === "mssql") return "Microsoft SQL";
+ if (type === "snowflake") return "Snowflake";
+ if (type === "motherduck") return "Motherduck";
+ if (type === "duckdb") return "DuckDB";
+ if (type === "cloudflare" || type === "cloudflare-d1") return "Cloudflare";
+ if (type === "starbasedb") return "StarbaseDB";
+ if (type === "starbase") return "StarbaseDB";
+ if (type === "bigquery") return "BigQuery";
+
+ return type;
+}
+
+export function getDatabaseIcon(type: string) {
+ if (type === "mysql") return MySQLIcon;
+ if (type === "postgres") return PostgreIcon;
+ if (type === "cloudflare" || type === "cloudflare-d1") return CloudflareIcon;
+ if (type === "valtown") return ValTownIcon;
+ if (type === "starbasedb" || type === "starbase") return StarbaseIcon;
+ if (type === "libsql" || type === "turso") return SQLiteIcon;
+ if (type === "rqlite") return RqliteIcon;
+
+ return Database;
+}
+
+export function getDatabaseVisual(type: string) {
+ if (type === "mysql") return MySQLVisual;
+ if (type === "sqlite") return SQLiteVisual;
+ if (type === "postgres") return GeneralVisual;
+
+ return GeneralVisual;
+}
diff --git a/src/components/resource-card/visual.tsx b/src/components/resource-card/visual.tsx
new file mode 100644
index 00000000..9cdd7d19
--- /dev/null
+++ b/src/components/resource-card/visual.tsx
@@ -0,0 +1,119 @@
+export const PostgresVisual = () => (
+
+);
+
+export const MySQLVisual = () => (
+
+);
+
+export const SQLiteVisual = () => (
+
+);
+
+export const BoardVisual = () => (
+
+);
+
+export const GeneralVisual = () => (
+
+);
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index 0e460dc3..80ba03b7 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -33,6 +33,14 @@ export function SidebarMenuItem({
);
if (href) {
+ if (href.startsWith("https://")) {
+ return (
+
+ {body}
+
+ );
+ }
+
return (
{body}
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
new file mode 100644
index 00000000..ecfc4f0c
--- /dev/null
+++ b/src/components/theme-toggle.tsx
@@ -0,0 +1,61 @@
+"use client";
+import { Gear, Moon, Sun } from "@phosphor-icons/react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { ButtonGroup, ButtonGroupItem } from "./button-group";
+
+export default function ThemeToggle() {
+ const { theme, setTheme } = useTheme();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ // This is to prevent mismatched render on the server
+ // This is just a placeholder to avoid flicking as well
+ // https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch
+ if (!mounted)
+ return (
+
+
+
+
+
+
+
+
+ );
+
+ return (
+
+ setTheme("system")}
+ selected={theme === "system"}
+ >
+
+ setTheme("dark")}
+ selected={theme === "dark"}
+ >
+
+ setTheme("light")}
+ selected={theme === "light"}
+ >
+
+
+ );
+}
diff --git a/src/components/ui/highlight-text.tsx b/src/components/ui/highlight-text.tsx
new file mode 100644
index 00000000..8097a1cc
--- /dev/null
+++ b/src/components/ui/highlight-text.tsx
@@ -0,0 +1,29 @@
+"use client";
+interface Props {
+ text: string;
+ highlight?: string;
+}
+export default function HighlightText({ text, highlight }: Props) {
+ if (!highlight) return {text};
+
+ const regex = new RegExp(
+ "(" + (highlight ?? "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")",
+ "i"
+ );
+
+ const splitedText = text.split(regex);
+
+ return (
+
+ {splitedText.map((text, idx) => {
+ return text.toLowerCase() === (highlight ?? "").toLowerCase() ? (
+
+ {text}
+
+ ) : (
+ {text}
+ );
+ })}
+
+ );
+}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 90b82c8f..b7046af1 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,16 +1,16 @@
"use client";
-import { useTheme } from "@/context/theme-provider";
+import { useTheme } from "next-themes";
import { Toaster as Sonner } from "sonner";
type ToasterProps = React.ComponentProps;
const Toaster = ({ ...props }: ToasterProps) => {
- const { theme } = useTheme();
+ const { resolvedTheme } = useTheme();
return (
void;
-}>({
- theme: "dark",
- disableToggle: false,
- toggleTheme: () => {
- throw new Error("Not implemented");
- },
-});
-
-export function useTheme() {
- return useContext(ThemeContext);
-}
-
-export default function ThemeProvider({
- children,
- defaultTheme,
- disableToggle,
-}: PropsWithChildren<{ defaultTheme: ThemeType; disableToggle?: boolean }>) {
- const [theme, setTheme] = useState(defaultTheme);
-
- const toggleTheme = useCallback(
- (assignedTheme?: string) => {
- setTheme((prevTheme) => {
- if (assignedTheme) {
- return assignedTheme === "dark" ? "dark" : "light";
- }
-
- const newTheme = prevTheme === "dark" ? "light" : "dark";
- setCookie("theme", newTheme);
- return newTheme;
- });
- },
- [setTheme]
- );
-
- useEffect(() => {
- if (theme === "light") {
- window.document.body.classList.remove("dark");
- } else {
- window.document.body.classList.add("dark");
- }
- }, [theme]);
-
- const value = useMemo(
- () => ({ toggleTheme, theme, disableToggle: disableToggle ?? false }),
- [toggleTheme, theme, disableToggle]
- );
-
- return (
- {children}
- );
-}
diff --git a/src/core/extension-manager.tsx b/src/core/extension-manager.tsx
index 6cb9e44d..5071e8bb 100644
--- a/src/core/extension-manager.tsx
+++ b/src/core/extension-manager.tsx
@@ -46,7 +46,9 @@ export class StudioExtensionContext {
protected resourceContextMenu: Record =
{};
- constructor(protected extensions: IStudioExtension[]) {}
+ constructor(protected extensions: IStudioExtension[]) {
+ this.extensions.forEach((ext) => ext.init(this));
+ }
registerBeforeQuery(handler: BeforeQueryHandler) {
this.beforeQueryHandlers.push(handler);
@@ -82,12 +84,14 @@ export class StudioExtensionContext {
registerQueryCellContextMenu(handler: QueryResultCellMenuHandler) {
this.queryResultCellContextMenu.push(handler);
}
+
+ getExtension(name: string): T | undefined {
+ return this.extensions.find((ext) => ext.extensionName === name) as
+ | T
+ | undefined;
+ }
}
export class StudioExtensionManager extends StudioExtensionContext {
- init() {
- this.extensions.forEach((ext) => ext.init(this));
- }
-
cleanup() {
this.extensions.forEach((ext) => ext.cleanup());
}
diff --git a/src/core/standard-extension.tsx b/src/core/standard-extension.tsx
index 9aa23416..3923b6f2 100644
--- a/src/core/standard-extension.tsx
+++ b/src/core/standard-extension.tsx
@@ -2,10 +2,10 @@
* This contains the standard extensions as a base for all databases.
*/
+import ColumnDescriptorExtension from "@/extensions/column-descriptor";
import QueryHistoryConsoleLogExtension from "@/extensions/query-console-log";
-import ViewEditorExtension from "@/extensions/view-editor";
import TriggerEditorExtension from "@/extensions/trigger-editor";
-import ColumnDescriptorExtension from "@/extensions/column-descriptor";
+import ViewEditorExtension from "@/extensions/view-editor";
export function createStandardExtensions() {
return [
diff --git a/src/drivers/board-source/README b/src/drivers/board-source/README
new file mode 100644
index 00000000..6c1e4fea
--- /dev/null
+++ b/src/drivers/board-source/README
@@ -0,0 +1 @@
+This is multiple database driver that will be used for board
\ No newline at end of file
diff --git a/src/drivers/board-source/base-source.ts b/src/drivers/board-source/base-source.ts
new file mode 100644
index 00000000..a8aaadc6
--- /dev/null
+++ b/src/drivers/board-source/base-source.ts
@@ -0,0 +1,12 @@
+
+export interface BoardSource {
+ id: string;
+ name: string;
+ type: string;
+}
+
+export abstract class BoardSourceDriver {
+ abstract sourceList(): BoardSource[];
+ abstract query(sourceId: string, statement: string): Promise[]>
+ abstract cleanup(): void;
+}
\ No newline at end of file
diff --git a/src/extensions/data-catalog/data-model-tab.tsx b/src/extensions/data-catalog/data-model-tab.tsx
new file mode 100644
index 00000000..3e1d85eb
--- /dev/null
+++ b/src/extensions/data-catalog/data-model-tab.tsx
@@ -0,0 +1,392 @@
+import SchemaNameSelect from "@/components/gui/schema-editor/schema-name-select";
+import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import HighlightText from "@/components/ui/highlight-text";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { useConfig } from "@/context/config-provider";
+import { useDatabaseDriver } from "@/context/driver-provider";
+import { useSchema } from "@/context/schema-provider";
+import {
+ DatabaseTableColumn,
+ DatabaseTableSchema,
+} from "@/drivers/base-driver";
+import { MagicWand } from "@phosphor-icons/react";
+import { LucideLoader, LucideMoreHorizontal } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import DataCatalogExtension from ".";
+import DataCatalogDriver from "./driver";
+
+interface DataCatalogTableColumnModalProps {
+ driver: DataCatalogDriver;
+ schemaName: string;
+ tableName: string;
+ columnName: string;
+ onClose: () => void;
+}
+
+function DataCatalogTableColumnModal({
+ driver,
+ schemaName,
+ tableName,
+ columnName,
+ onClose,
+}: DataCatalogTableColumnModalProps) {
+ const modelColumn = driver.getColumn(schemaName, tableName, columnName);
+ const { databaseDriver } = useDatabaseDriver();
+
+ const [definition, setDefinition] = useState(modelColumn?.definition ?? "");
+ const [samples, setSamples] = useState(
+ (modelColumn?.samples ?? []).join(",")
+ );
+
+ const [loading, setLoading] = useState(false);
+ const [sampleLoading, setSampleLoading] = useState(false);
+
+ const onAutomaticSampleData = useCallback(() => {
+ setSampleLoading(true);
+ databaseDriver
+ .query(
+ `SELECT DISTINCT ${databaseDriver.escapeId(columnName)} FROM ${databaseDriver.escapeId(schemaName)}.${databaseDriver.escapeId(tableName)} LIMIT 10`
+ )
+ .then((r) => {
+ setSamples(r.rows.map((row) => row[columnName]).join(", "));
+ })
+ .finally(() => setSampleLoading(false));
+ }, [databaseDriver, columnName, schemaName, tableName]);
+
+ const onSaveUpdateColumn = useCallback(() => {
+ setLoading(true);
+
+ driver
+ .updateColumn(schemaName, tableName, columnName, {
+ definition,
+ samples:
+ samples && samples.trim()
+ ? samples.split(",").map((s) => s.trim())
+ : [],
+ hideFromEzql: modelColumn?.hideFromEzql ?? false,
+ })
+ .then()
+ .finally(() => {
+ setLoading(false);
+ onClose();
+ });
+ }, [
+ driver,
+ modelColumn,
+ samples,
+ columnName,
+ onClose,
+ schemaName,
+ tableName,
+ definition,
+ ]);
+
+ return (
+ <>
+
+ Column Metadata
+
+ Add metadata to this column to help your team and AI understand its
+ purpose. Include detailed descriptions and examples of sample data to
+ make the data more clear and easier to use.
+
+
+
+
- {group && {group}}
-
- {title}
+ {title && ( +
+
-
+ {group && {group}}
+
{title}
+
- {children}
+ {children}
);
diff --git a/src/components/resource-card/icon.tsx b/src/components/resource-card/icon.tsx
new file mode 100644
index 00000000..5e1d3987
--- /dev/null
+++ b/src/components/resource-card/icon.tsx
@@ -0,0 +1,184 @@
+type IconProps = {
+ className?: string;
+};
+
+export const CloudflareIcon = ({ className }: IconProps) => (
+
+);
+
+export const DigitalOceanIcon = ({ className }: IconProps) => (
+
+);
+
+export const NeonIcon = ({ className }: IconProps) => (
+
+);
+
+export const RQLiteIcon = ({ className }: IconProps) => (
+
+);
+
+export const StarbaseIcon = ({ className }: IconProps) => (
+
+);
+
+export const TursoIcon = ({ className }: IconProps) => (
+
+);
+
+export const SupabaseIcon = ({ className }: IconProps) => (
+
+);
+
+export const ValTownIcon = ({ className }: IconProps) => (
+
+);
diff --git a/src/components/resource-card/index.tsx b/src/components/resource-card/index.tsx
new file mode 100644
index 00000000..427c783b
--- /dev/null
+++ b/src/components/resource-card/index.tsx
@@ -0,0 +1,152 @@
+import { cn } from "@/lib/utils";
+import {
+ Circle,
+ Database,
+ DotsThreeVertical,
+ Triangle,
+} from "@phosphor-icons/react";
+import Link from "next/link";
+import { PropsWithChildren, useState } from "react";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { BoardVisual } from "./visual";
+
+interface DatabaseCardProps {
+ className?: string;
+ href: string;
+ status?: string;
+ statusType?: "error" | "info" | "success";
+ title?: string;
+ subtitle?: string;
+ color?: string;
+ visual?: React.FC
+ {IconComponent &&
+
+
+ + {title} +
+ {subtitle && ( +{subtitle}
+ )} +
+ {status === "success" ? (
+
+
+ {VisualComponent && {status}
+
+
+
+