@lobb-js/studio 0.1.31 → 0.1.32

package/src/routes/data_model/flow.svelte

@@ -1,82 +0,0 @@
-<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 { ctx } from "$lib/store.svelte";
-
-    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/routes/data_model/syncManager.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-    import DiffViewer from "$lib/components/diffViewer.svelte";
-    import { ctx } from "$lib/store.svelte";
-    import { onMount } from "svelte";
-    import stringify from "json-stable-stringify";
-    import MonacoEditor from "$lib/components/monacoEditor.svelte";
-    import Table from "$lib/components/dataTable/table.svelte";
-    import Button from "$lib/components/ui/button/button.svelte";
-    import { LoaderCircle, SendHorizontal } from "lucide-svelte";
-    import { lobb } from "$lib";
-
-    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">
-    {#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>
-        <MonacoEditor
-            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/routes/data_model/utils.ts

@@ -1,35 +0,0 @@
-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/routes/extensions/extension.svelte

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

package/src/routes/home.svelte

@@ -1,36 +0,0 @@
-<script>
-    import Button from "$lib/components/ui/button/button.svelte";
-    import { ctx } from "$lib/store.svelte";
-    import { location } from "@wjfe/n-savant";
-    import { ArrowRight } from "lucide-svelte";
-</script>
-
-<div class="flex flex-col">
-    <div
-        class="flex flex-1 w-full flex-col items-center justify-center gap-4 text-muted-foreground"
-    >
-        <div class="flex flex-col items-center justify-center p-4">
-            <div class="text-3xl">Welcome to Lobb!</div>
-            <div class="text-xs text-center">
-                Your journey starts here. Explore and make the most of your
-                experience.
-            </div>
-        </div>
-        <div class="flex flex-col items-center justify-center">
-            <Button
-                Icon={ArrowRight}
-                variant="outline"
-                class="h-7 px-3 text-xs font-normal"
-                onclick={() => location.navigate("/collections")}
-            >
-                Go to collections
-            </Button>
-        </div>
-    </div>
-    <div class="flex justify-end p-2 text-xs text-muted-foreground/50">
-        <div class="flex flex-col text-end">
-            <div>studio: v{ctx.studioVersion}</div>
-            <div>core: v{ctx.meta.version}</div>
-        </div>
-    </div>
-</div>

package/src/routes/workflows/workflows.svelte

@@ -1,135 +0,0 @@
-<script lang="ts">
-    import type { SideBarData } from "$lib/components/sidebar/sidebarElements.svelte";
-    import WorkflowEditor, {
-        type WorkflowEntry,
-    } from "$lib/components/workflowEditor.svelte";
-    import { lobb } from "$lib";
-    import Sidebar from "$lib/components/sidebar/sidebar.svelte";
-    import Button from "$lib/components/ui/button/button.svelte";
-    import { ctx } from "$lib/store.svelte";
-    import { location } from "@wjfe/n-savant";
-    import { CircleSlash2, Plus, Trash2 } from "lucide-svelte";
-    import { onMount } from "svelte";
-    import { showDialog } from "$lib/components/confirmationDialog/store.svelte";
-    import SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
-
-    let { workflowName } = $props();
-
-    let sidebarData: SideBarData | null = $state(null);
-    let workflowEntry: WorkflowEntry | null = $state(null);
-
-    onMount(async () => {
-        getSidebarData();
-    });
-
-    $effect(() => {
-        fetchWorkflowData(workflowName);
-    });
-
-    async function getSidebarData() {
-        const response = await lobb.findAll("core_workflows", {});
-        const result = await response.json();
-        const workflows: any[] = result.data;
-        sidebarData = workflows.map((workflow) => {
-            return {
-                name: workflow.name,
-                path: workflow.directory,
-                onclick: () => {
-                    location.navigate(`/workflows/${workflow.name}`);
-                },
-                meta: {
-                    id: workflow.id,
-                },
-            };
-        });
-    }
-
-    async function fetchWorkflowData(workflowName: string) {
-        if (workflowName && workflowName !== "new") {
-            const response = await lobb.findAll("core_workflows", {
-                filter: {
-                    name: workflowName,
-                },
-            });
-            const result = await response.json();
-            const workflow = result.data[0];
-            workflowEntry = workflow;
-        } else {
-            const workflowHandlerDefaultValue =
-                ctx.meta.collections.core_workflows.fields.handler
-                    .pre_processors.default;
-            workflowEntry = {
-                name: "",
-                event_name: "",
-                handler: workflowHandlerDefaultValue,
-                directory: "",
-            };
-        }
-    }
-
-    async function handleWorkflowDelete(
-        workflowName: string,
-        workflowId: string,
-    ) {
-        const result = await showDialog(
-            "Are you sure?",
-            "This will delete the Workflow you selected.",
-        );
-        if (result) {
-            await lobb.deleteOne("core_workflows", workflowId);
-            getSidebarData();
-            if (workflowEntry && workflowName === workflowEntry.name) {
-                location.navigate("/workflows");
-            }
-        }
-    }
-</script>
-
-<Sidebar title="Workflows" data={sidebarData}>
-    {#snippet belowSearch()}
-        <div class="pb-4 px-2">
-            <Button
-                class="h-7 px-3 text-xs font-normal w-full"
-                variant="outline"
-                onclick={() => location.navigate("/workflows/new")}
-                Icon={Plus}
-            >
-                Create a Workflow
-            </Button>
-        </div>
-    {/snippet}
-    {#snippet elementRightSide(element)}
-        <Button
-            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-            variant="ghost"
-            size="icon"
-            onclick={() => handleWorkflowDelete(element.name, element.meta?.id)}
-            Icon={Trash2}
-        ></Button>
-    {/snippet}
-    <div class="relative h-full w-full">
-        {#if workflowName === undefined}
-            <div
-                class="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 workflow selected</div>
-                    <div class="text-xs">
-                        Select a workflow to edit it or create new ones
-                    </div>
-                </div>
-            </div>
-        {:else if workflowEntry}
-            {#key workflowEntry}
-                <WorkflowEditor
-                    bind:workflow={workflowEntry}
-                    refreshSidebar={getSidebarData}
-                />
-            {/key}
-        {/if}
-        <div class="absolute top-0 left-0 p-2.5">
-            <SidebarTrigger />
-        </div>
-    </div>
-</Sidebar>