@lobb-js/studio 0.7.2 → 0.8.0

package/src/lib/components/richTextEditor.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { Editor } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import UnderlineExt from '@tiptap/extension-underline';
+	import LinkExt from '@tiptap/extension-link';
+	import {
+		Bold,
+		Italic,
+		Underline,
+		Strikethrough,
+		Heading1,
+		Heading2,
+		Heading3,
+		List,
+		ListOrdered,
+		Quote,
+		Minus,
+		Undo2,
+		Redo2,
+		Link
+	} from 'lucide-svelte';
+	import { cn } from '../utils.js';
+
+	interface Props {
+		value?: string;
+		name?: string;
+	}
+
+	let { value = $bindable(''), name }: Props = $props();
+
+	let editorElement = $state<HTMLDivElement | undefined>(undefined);
+	let editor = $state<Editor | null>(null);
+
+	// Individual states for toolbar buttons.
+	// Updated in onUpdate/onSelectionUpdate — these callbacks never fire during
+	// the Editor constructor, so no $state writes happen mid-construction and
+	// the onMount effect cannot be re-queued by Svelte's scheduler.
+	let isBold = $state(false);
+	let isItalic = $state(false);
+	let isUnderline = $state(false);
+	let isStrike = $state(false);
+	let isH1 = $state(false);
+	let isH2 = $state(false);
+	let isH3 = $state(false);
+	let isBulletList = $state(false);
+	let isOrderedList = $state(false);
+	let isBlockquote = $state(false);
+	let isLink = $state(false);
+	let canUndo = $state(false);
+	let canRedo = $state(false);
+
+	function syncButtonStates(e: Editor) {
+		isBold = e.isActive('bold');
+		isItalic = e.isActive('italic');
+		isUnderline = e.isActive('underline');
+		isStrike = e.isActive('strike');
+		isH1 = e.isActive('heading', { level: 1 });
+		isH2 = e.isActive('heading', { level: 2 });
+		isH3 = e.isActive('heading', { level: 3 });
+		isBulletList = e.isActive('bulletList');
+		isOrderedList = e.isActive('orderedList');
+		isBlockquote = e.isActive('blockquote');
+		isLink = e.isActive('link');
+		canUndo = e.can().undo();
+		canRedo = e.can().redo();
+	}
+
+	onMount(() => {
+		const e = new Editor({
+			element: editorElement,
+			extensions: [
+				StarterKit.configure({
+					heading: { levels: [1, 2, 3] },
+				}),
+				UnderlineExt,
+				LinkExt.configure({ openOnClick: false }),
+			],
+			content: value,
+			editorProps: {
+				attributes: { dir: 'auto' },
+			},
+			onUpdate: ({ editor: e }) => {
+				value = e.getHTML();
+				syncButtonStates(e);
+			},
+			onSelectionUpdate: ({ editor: e }) => {
+				syncButtonStates(e);
+			},
+		});
+		editor = e;
+	});
+
+	onDestroy(() => {
+		editor?.destroy();
+	});
+
+	// Syncs an externally-changed `value` prop into the editor.
+	// Treats TipTap's empty-doc representation ('<p></p>') as equivalent to ''
+	// so the effect doesn't endlessly call setContent on an empty editor.
+	$effect(() => {
+		if (!editor) return;
+		const incoming = value;
+		const current = editor.getHTML();
+		const normalizedCurrent = current === '<p></p>' ? '' : current;
+		if (normalizedCurrent !== incoming) {
+			editor.commands.setContent(incoming);
+			syncButtonStates(editor);
+		}
+	});
+
+	function handleLink() {
+		if (!editor) return;
+		if (editor.isActive('link')) {
+			editor.chain().focus().unsetLink().run();
+		} else {
+			const url = window.prompt('URL');
+			if (url) editor.chain().focus().setLink({ href: url }).run();
+		}
+	}
+</script>
+
+<div class="flex flex-col rounded-md border bg-muted/30">
+	<div class="flex flex-wrap items-center gap-0.5 border-b p-1.5">
+		{#if editor}
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().toggleBold().run()}
+				class={cn('rounded p-1.5 transition-colors hover:bg-muted', isBold ? 'bg-muted text-foreground' : 'text-muted-foreground')}
+			><Bold size={14} /></button>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().toggleItalic().run()}
+				class={cn('rounded p-1.5 transition-colors hover:bg-muted', isItalic ? 'bg-muted text-foreground' : 'text-muted-foreground')}
+			><Italic size={14} /></button>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().toggleUnderline().run()}
+				class={cn('rounded p-1.5 transition-colors hover:bg-muted', isUnderline ? 'bg-muted text-foreground' : 'text-muted-foreground')}
+			><Underline size={14} /></button>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().toggleStrike().run()}
+				class={cn('rounded p-1.5 transition-colors hover:bg-muted', isStrike ? 'bg-muted text-foreground' : 'text-muted-foreground')}
+			><Strikethrough size={14} /></button>
+
+			<div class="mx-0.5 self-stretch w-px bg-border"></div>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().toggleHeading({ level: 1 }).run()}
+				class={cn('rounded p-1.5 transition-colors hover:bg-muted', isH1 ? 'bg-muted text-foreground' : 'text-muted-foreground')}
+			><Heading1 size={14} /></button>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()}
+				class={cn('rounded p-1.5 transition-colors hover:bg-muted', isH2 ? 'bg-muted text-foreground' : 'text-muted-foreground')}
+			><Heading2 size={14} /></button>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()}
+				class={cn('rounded p-1.5 transition-colors hover:bg-muted', isH3 ? 'bg-muted text-foreground' : 'text-muted-foreground')}
+			><Heading3 size={14} /></button>
+
+			<div class="mx-0.5 self-stretch w-px bg-border"></div>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().toggleBulletList().run()}
+				class={cn('rounded p-1.5 transition-colors hover:bg-muted', isBulletList ? 'bg-muted text-foreground' : 'text-muted-foreground')}
+			><List size={14} /></button>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().toggleOrderedList().run()}
+				class={cn('rounded p-1.5 transition-colors hover:bg-muted', isOrderedList ? 'bg-muted text-foreground' : 'text-muted-foreground')}
+			><ListOrdered size={14} /></button>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().toggleBlockquote().run()}
+				class={cn('rounded p-1.5 transition-colors hover:bg-muted', isBlockquote ? 'bg-muted text-foreground' : 'text-muted-foreground')}
+			><Quote size={14} /></button>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().setHorizontalRule().run()}
+				class="rounded p-1.5 text-muted-foreground transition-colors hover:bg-muted"
+			><Minus size={14} /></button>
+
+			<button
+				type="button"
+				onclick={handleLink}
+				class={cn('rounded p-1.5 transition-colors hover:bg-muted', isLink ? 'bg-muted text-foreground' : 'text-muted-foreground')}
+			><Link size={14} /></button>
+
+			<div class="mx-0.5 self-stretch w-px bg-border"></div>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().undo().run()}
+				disabled={!canUndo}
+				class="rounded p-1.5 text-muted-foreground transition-colors hover:bg-muted disabled:opacity-40"
+			><Undo2 size={14} /></button>
+
+			<button
+				type="button"
+				onclick={() => editor?.chain().focus().redo().run()}
+				disabled={!canRedo}
+				class="rounded p-1.5 text-muted-foreground transition-colors hover:bg-muted disabled:opacity-40"
+			><Redo2 size={14} /></button>
+		{/if}
+	</div>
+
+	<div bind:this={editorElement} class="rte-content min-h-48 max-h-96 overflow-y-auto p-3 text-sm"></div>
+</div>
+
+<style>
+	.rte-content :global(.ProseMirror) {
+		outline: none;
+		min-height: 180px;
+	}
+	.rte-content :global(.ProseMirror > * + *) {
+		margin-top: 0.4em;
+	}
+	.rte-content :global(.ProseMirror h1) {
+		font-size: 1.5rem;
+		font-weight: 700;
+	}
+	.rte-content :global(.ProseMirror h2) {
+		font-size: 1.25rem;
+		font-weight: 600;
+	}
+	.rte-content :global(.ProseMirror h3) {
+		font-size: 1.1rem;
+		font-weight: 600;
+	}
+	.rte-content :global(.ProseMirror ul) {
+		list-style-type: disc;
+		padding-left: 1.5rem;
+	}
+	.rte-content :global(.ProseMirror ol) {
+		list-style-type: decimal;
+		padding-left: 1.5rem;
+	}
+	.rte-content :global(.ProseMirror blockquote) {
+		border-left: 3px solid var(--border);
+		padding-left: 1rem;
+		color: var(--muted-foreground);
+		font-style: italic;
+	}
+	.rte-content :global(.ProseMirror hr) {
+		border: none;
+		border-top: 1px solid var(--border);
+		margin: 0.75rem 0;
+	}
+	.rte-content :global(.ProseMirror a) {
+		color: var(--primary);
+		text-decoration: underline;
+		cursor: pointer;
+	}
+	.rte-content :global(.ProseMirror code) {
+		background-color: var(--muted);
+		padding: 0.1em 0.3em;
+		border-radius: 3px;
+		font-size: 0.875em;
+		font-family: monospace;
+	}
+	.rte-content :global(.ProseMirror pre) {
+		background-color: var(--muted);
+		padding: 0.75rem 1rem;
+		border-radius: 6px;
+		overflow-x: auto;
+	}
+	.rte-content :global(.ProseMirror pre code) {
+		background: none;
+		padding: 0;
+	}
+</style>

package/src/lib/components/routes/collections/collection.svelte

@@ -0,0 +1,57 @@
+<script>
+    import { CircleSlash2 } from "lucide-svelte";
+    import DataTable from "../../../components/dataTable/dataTable.svelte";
+    import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
+    import { getStudioContext } from "../../../context";
+    import Singletone from "../../../components/singletone.svelte";
+    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
+
+    const { ctx, lobb } = getStudioContext();
+
+    let { collectionName } = $props();
+    let isSingletonCollection = $derived(ctx.meta.collections[collectionName].singleton);
+
+    let containerWidth = $state();
+</script>
+
+<div bind:clientWidth={containerWidth} class="h-full">
+    {#if collectionName}
+        <!-- TODO: add support in here for the views for each collection view -->
+        <!-- {#if true}
+            <ExtensionsComponents
+                name="studio.listView"
+                utils={getExtensionUtils(lobb, ctx)}
+            ></ExtensionsComponents>
+        {:else if isSingletonCollection} -->
+        {#if isSingletonCollection}
+            <Singletone collectionName={collectionName} />
+        {:else}
+            <DataTable
+                {collectionName}
+                tableProps={{
+                    parentWidth: containerWidth,
+                }}
+            >
+                {#snippet headerLeft()}
+                    <SidebarTrigger />
+                {/snippet}
+            </DataTable>
+        {/if}
+    {:else}
+        <div
+            class="relative flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+        >
+            <CircleSlash2 class="opacity-50" size="50" />
+            <div class="flex flex-col items-center justify-center">
+                <div>No collection selected</div>
+                <div class="text-xs">
+                    Select a collection to view its entries or create new ones
+                </div>
+            </div>
+            <div class="absolute top-0 left-0 p-2.5">
+                <SidebarTrigger />
+            </div>
+        </div>
+    {/if}
+</div>

package/src/lib/components/routes/collections/collections.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { SideBarData } from "../../../components/sidebar/sidebarElements.svelte";
+    import Sidebar from "../../../components/sidebar/sidebar.svelte";
+    import { getStudioContext } from "../../../context";
+    import Collection from "./collection.svelte";
+
+    const { ctx } = getStudioContext();
+    import { Table } from "lucide-svelte";
+
+    let { collectionName } = $props();
+
+    const collectionsList = $state(getCollectionsList());
+
+    function getCollectionsList() {
+        const collections = ctx.meta.collections;
+        let collectionsOwners: SideBarData = Object.entries(collections).map(
+            ([collectionName, collectionValue]) => {
+                return {
+                    name: collectionName,
+                    path: collectionValue.category ?? collectionValue.owner,
+                    icon: Table,
+                    href: `/studio/collections/${collectionName}`,
+                };
+            },
+        );
+
+        // updating the path from '__project' and '__core' to a more readable names
+        collectionsOwners = collectionsOwners.map((item) => {
+            if (item.path === "__project") {
+                item.path = "project";
+            } else if (item.path === "__core") {
+                item.path = "core";
+            }
+            return item;
+        });
+
+        return collectionsOwners;
+    }
+</script>
+
+<Sidebar title="Collections" data={collectionsList}>
+    {#key collectionName}
+        <Collection {collectionName} />
+    {/key}
+</Sidebar>

package/src/lib/components/routes/data_model/dataModel.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { SvelteFlowProvider } from "@xyflow/svelte";
+    import Flow from "./flow.svelte";
+    import Sidebar from "../../../components/sidebar/sidebar.svelte";
+    import { location } from "@wjfe/n-savant";
+    import SyncManager from "./syncManager.svelte";
+    import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
+
+    const currentPage = $derived(location.url.pathname.replace("/studio", "").split("/")[2]);
+</script>
+
+<Sidebar
+    title="Data Model"
+    showSearch={false}
+    data={[
+        {
+            name: "graph",
+            href: "/studio/datamodel/graph",
+        },
+        {
+            name: "query_editor",
+            href: "/studio/datamodel/query_editor",
+        },
+    ]}
+>
+    <div class="relative h-full w-full">
+        {#if currentPage === "graph"}
+            <SvelteFlowProvider>
+                <div style:width="100%" style:height="100%">
+                    <Flow />
+                </div>
+            </SvelteFlowProvider>
+        {:else if currentPage === "query_editor"}
+            <SyncManager />
+        {/if}
+        <div class="absolute top-0 left-0 p-2.5">
+            <SidebarTrigger />
+        </div>
+    </div>
+</Sidebar>

package/src/lib/components/routes/data_model/flow.css

@@ -0,0 +1,22 @@
+.svelte-flow {
+  --xy-edge-stroke-default: hsl(var(--muted-foreground));
+  --xy-edge-stroke-selected-default: hsl(var(--primary));
+  --xy-connectionline-stroke-default: hsl(var(--primary));
+  --xy-attribution-background-color-default: transparent;
+  --xy-minimap-background-color-default: hsl(var(--background));
+  --xy-minimap-mask-background-color-default: hsl(var(--primary) / 0.1);
+  --xy-minimap-node-background-color-default: hsl(var(--primary) / 0.2);
+  --xy-background-color-default: hsl(var(--soft));
+  --xy-background-pattern-dots-color-default: hsl(var(--muted-foreground));
+  --xy-background-pattern-lines-color-default: hsl(var(--background));
+  --xy-background-pattern-cross-color-default: hsl(var(--soft));
+  --xy-node-border-default: 1px solid hsl(var(--primary) / 0.25);
+  --xy-node-background-color-default: hsl(var(--background));
+  --xy-node-boxshadow-selected-default: 0 0 0 0.5px hsl(var(--primary) / 0.5);
+  --xy-handle-background-color-default: hsl(var(--primary));
+  --xy-handle-border-color-default: hsl(var(--background));
+  --xy-controls-button-background-color-default: hsl(var(--background));
+  --xy-controls-button-background-color-hover-default: hsl(var(--muted));
+  --xy-controls-button-border-color-default: hsl(var(--muted));
+  --xy-edge-label-background-color-default: hsl(var(--background));
+}

package/src/lib/components/routes/data_model/flow.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    import "@xyflow/svelte/dist/style.css";
+    import "./flow.css";
+
+    import type { Node, Edge } from "@xyflow/svelte";
+
+    import {
+        SvelteFlow,
+        Background,
+        MiniMap,
+        Controls,
+        useSvelteFlow,
+    } from "@xyflow/svelte";
+    import { getLayoutedElements } from "./utils";
+    import { onMount } from "svelte";
+    import { getStudioContext } from "../../../context";
+
+    const { ctx } = getStudioContext();
+
+    const { fitView } = useSvelteFlow();
+
+    let nodes = $state.raw<Node[]>(generateNodes());
+    let edges = $state.raw<Edge[]>(generateEdges());
+
+    onMount(() => {
+        setTimeout(() => {
+            onLayout();
+        }, 0);
+    });
+
+    function generateNodes() {
+        const localNodes: Node[] = [];
+
+        for (const [collectionName, collectionValue] of Object.entries(
+            ctx.meta.collections,
+        )) {
+            if (collectionValue.owner !== "__project") {
+                continue;
+            }
+
+            localNodes.push({
+                id: collectionName,
+                data: { label: collectionName },
+                position: { x: 0, y: 0 },
+            });
+        }
+
+        return localNodes;
+    }
+
+    function generateEdges() {
+        const localEdges: Edge[] = [];
+
+        const relations = ctx.meta.relations;
+        for (let index = 0; index < relations.length; index++) {
+            const relation = relations[index];
+            localEdges.push({
+                id: `${relation.from.collection}_${relation.to.collection}`,
+                source: relation.from.collection,
+                target: relation.to.collection,
+                animated: true,
+            });
+        }
+
+        return localEdges;
+    }
+
+    function onLayout() {
+        const layouted = getLayoutedElements(nodes, edges);
+
+        nodes = [...layouted.nodes];
+        edges = [...layouted.edges];
+
+        fitView({
+            padding: 0.5,
+        });
+    }
+</script>
+
+<SvelteFlow bind:nodes bind:edges>
+    <Background />
+    <MiniMap />
+    <Controls />
+</SvelteFlow>

package/src/lib/components/routes/data_model/syncManager.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import DiffViewer from "../../../components/diffViewer.svelte";
+    import { getStudioContext } from "../../../context";
+
+    const { lobb, ctx } = getStudioContext();
+    import { onMount } from "svelte";
+    import stringify from "json-stable-stringify";
+    import CodeEditor from "../../../components/codeEditor.svelte";
+    import Table from "../../../components/dataTable/table.svelte";
+    import Button from "../../../components/ui/button/button.svelte";
+    import { LoaderCircle, SendHorizontal } from "lucide-svelte";
+
+    let configSchema: string = $state("");
+    let dbSchema: string = $state("");
+    let sqlPrompt = $state("");
+    let sqlResult = $state([]);
+
+    onMount(() => {
+        loadSchemas();
+    });
+
+    async function loadSchemas() {
+        configSchema = "";
+        dbSchema = "";
+        const response = await fetch(`${ctx.lobbUrl}/api/schema/diff`);
+        const result = await response.json();
+        configSchema = stringify(result.dbSchema, {
+            space: 2,
+        }) as string;
+        dbSchema = stringify(result.configSchema, {
+            space: 2,
+        }) as string;
+    }
+
+    async function handleExecute() {
+        const response = await lobb.createOne("core_query", {
+            query: sqlPrompt,
+        });
+        const result = await response.json();
+        sqlResult = result.data;
+        loadSchemas();
+    }
+</script>
+
+<div class="h-[50%] border-b overflow-auto">
+    {#if configSchema && dbSchema}
+        <DiffViewer
+            type="json"
+            original={configSchema}
+            modified={dbSchema}
+            class="h-full rounded-none border-0"
+        />
+    {:else}
+        <div class="flex justify-center items-center h-full gap-2">
+            <LoaderCircle class="animate-spin" />
+            <div>loading...</div>
+        </div>
+    {/if}
+</div>
+<div class="flex h-[50%] w-full">
+    <div class="h-full flex-1 flex flex-col border-r">
+        <div
+            class="h-10 flex items-center px-2 bg-background border-b justify-between"
+        >
+            <div>Query Editor</div>
+            <Button
+                class="h-7 px-3 text-xs font-normal"
+                Icon={SendHorizontal}
+                onclick={handleExecute}
+            >
+                Execute
+            </Button>
+        </div>
+        <CodeEditor
+            type="sql"
+            name="prompt"
+            bind:value={sqlPrompt}
+            class="flex-1 rounded-none border-0"
+        />
+    </div>
+    <div class="flex-1">
+        {#if Array.isArray(sqlResult) && sqlResult.length}
+            <Table
+                data={sqlResult}
+                showLastRowBorder={true}
+                showLastColumnBorder={true}
+            />
+        {:else}
+            <div class="flex flex-1 h-full items-center justify-center">
+                No results
+            </div>
+        {/if}
+    </div>
+</div>

package/src/lib/components/routes/data_model/utils.ts

@@ -0,0 +1,35 @@
+import Dagre from '@dagrejs/dagre';
+
+export function getLayoutedElements(nodes: any[], edges: any[]) {
+    const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+    g.setGraph({ rankdir: "LR" });
+
+    edges.forEach((edge) => g.setEdge(edge.source, edge.target));
+    nodes.forEach((node) => {
+        return g.setNode(node.id, {
+            ...node,
+            width: node.measured?.width ?? 0,
+            height: node.measured?.height ?? 0,
+        });
+    });
+
+    Dagre.layout(g);
+
+    return {
+        nodes: nodes.map((node) => {
+            const position = g.node(node.id);
+            // We are shifting the dagre node position (anchor=center center) to the top left
+            // so it matches the Svelte Flow node anchor point (top left).
+            const x = position.x - (node.measured?.width ?? 0) / 2;
+            const y = position.y - (node.measured?.height ?? 0) / 2;
+
+            return {
+                ...node,
+                position: { x, y },
+                targetPosition: "left",
+                sourcePosition: "right",
+            };
+        }),
+        edges,
+    };
+}

package/src/lib/components/routes/extensions/extension.svelte

@@ -0,0 +1,19 @@
+<script>
+    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import { getStudioContext } from "../../../context";
+
+    let { extension, page } = $props();
+
+    const { lobb, ctx } = getStudioContext();
+</script>
+
+<div class="grid overflow-auto bg-background">
+    {#key extension && page}
+        <ExtensionsComponents
+            name="pages.{page}"
+            utils={getExtensionUtils(lobb, ctx)}
+            filterByExtensions={[extension]}
+        />
+    {/key}
+</div>