@lobb-js/studio 0.1.34 → 0.1.36

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "src/lib/components",
+    "src/lib",
     "vite-plugins"
   ],
   "exports": {

package/src/lib/Lobb.d.ts

@@ -0,0 +1,30 @@
+interface RouteParams {
+    method: string;
+    route: string;
+    payload?: any;
+}
+type OnResponseHandlers = (reponse: Response) => void;
+export declare class Lobb {
+    lobbUrl: string;
+    private headers;
+    private onResponseHandlers;
+    constructor(lobbUrl: string);
+    onResponse(callback: OnResponseHandlers): Promise<void>;
+    setHeaders(headers: HeadersInit): void;
+    getHeaders(): HeadersInit;
+    getMeta(): Promise<any>;
+    findAll(collectionName: string, params: any): Promise<Response>;
+    findOne(collectionName: string, id: string, queryParams?: any): Promise<Response>;
+    createOne(collectionName: string, body: any, file?: File): Promise<Response>;
+    updateOne(collectionName: string, id: string, body: any): Promise<Response>;
+    readSingleton(collectionName: string): Promise<Response>;
+    updateSingleton(collectionName: string, body: Record<string, any>): Promise<Response>;
+    deleteOne(collectionName: string, id: string, force?: boolean): Promise<Response>;
+    deleteMany(collectionName: string, filter: any, force?: boolean): Promise<Response>;
+    createMany(collectionName: string, body: any): Promise<Response>;
+    updateMany(collectionName: string, body: any, filter: any): Promise<Response>;
+    transactions(body: any[], rollback?: boolean): Promise<Response>;
+    request(params: RouteParams): Promise<Response>;
+    private handleResponse;
+}
+export {};

package/src/lib/Lobb.ts

@@ -0,0 +1,241 @@
+import qs from "qs";
+import { parseFunction } from "./utils";
+
+interface RouteParams {
+    method: string;
+    route: string;
+    payload?: any;
+}
+
+type OnResponseHandlers = (reponse: Response) => void;
+
+export class Lobb {
+    public lobbUrl: string;
+    private headers: HeadersInit = [];
+    private onResponseHandlers: Array<OnResponseHandlers> = [];
+
+    constructor(lobbUrl: string) {
+        this.lobbUrl = lobbUrl;
+    }
+
+    public async onResponse(callback: OnResponseHandlers) {
+        this.onResponseHandlers.push(callback);
+    }
+
+    public setHeaders(headers: HeadersInit) {
+        this.headers = headers;
+    }
+
+    public getHeaders() {
+        return this.headers;
+    }
+
+    public async getMeta() {
+        const response = await fetch(`${this.lobbUrl}/api/meta`, {
+            headers: this.headers,
+        });
+
+        const metaResponse = await this.handleResponse(response);
+        const meta = await metaResponse.json();
+
+        meta.studio_workflows = meta.studio_workflows.map((workflow: any) => {
+            return {
+                ...workflow,
+                handler: parseFunction(workflow.handler),
+            };
+        });
+
+        return meta;
+    }
+
+    // CRUD methods
+    public async findAll(collectionName: string, params: any) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/search`,
+            {
+                method: "POST",
+                headers: this.headers,
+                body: JSON.stringify(params),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async findOne(
+        collectionName: string,
+        id: string,
+        queryParams?: any,
+    ) {
+        queryParams = queryParams ? `?${qs.stringify(queryParams)}` : "";
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/${id}${queryParams}`,
+            {
+                method: "GET",
+                headers: this.headers,
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async createOne(collectionName: string, body: any, file?: File) {
+        if (file) {
+            const formData = new FormData();
+            Object.keys(body).forEach((key) => {
+                formData.append(key, body[key]);
+            });
+            formData.append("file", file, file.name);
+            formData.append(
+                "payload",
+                JSON.stringify({
+                    data: body,
+                }),
+            );
+            body = formData;
+        } else {
+            body = JSON.stringify({
+                data: body,
+            });
+        }
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}`,
+            {
+                method: "POST",
+                headers: this.headers,
+                body,
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async updateOne(collectionName: string, id: string, body: any) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/${id}`,
+            {
+                method: "PATCH",
+                headers: this.headers,
+                body: JSON.stringify({
+                    data: body,
+                }),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async readSingleton(
+        collectionName: string,
+    ) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/singleton`,
+            {
+                method: "GET",
+                headers: this.headers,
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async updateSingleton(
+        collectionName: string,
+        body: Record<string, any>
+    ) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/singleton`,
+            {
+                method: "PATCH",
+                headers: this.headers,
+                body: JSON.stringify({
+                    data: body,
+                }),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async deleteOne(collectionName: string, id: string, force = false) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}/${id}${force ? "?force" : ""}`,
+            {
+                method: "DELETE",
+                headers: this.headers,
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async deleteMany(collectionName: string, filter: any, force = false) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}${force ? "?force" : ""}`,
+            {
+                method: "DELETE",
+                headers: this.headers,
+                body: JSON.stringify({
+                    filter,
+                }),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async createMany(collectionName: string, body: any) {
+        body = JSON.stringify({
+            data: body,
+        });
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}`,
+            {
+                method: "POST",
+                headers: this.headers,
+                body,
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async updateMany(collectionName: string, body: any, filter: any) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/${collectionName}`,
+            {
+                method: "PATCH",
+                headers: this.headers,
+                body: JSON.stringify({
+                    filter,
+                    data: body,
+                }),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    public async transactions(body: any[], rollback?: boolean) {
+        const response = await fetch(
+            `${this.lobbUrl}/api/collections/transactions${
+                rollback ? "?rollback" : ""
+            }`,
+            {
+                method: "POST",
+                headers: this.headers,
+                body: JSON.stringify(body),
+            },
+        );
+        return await this.handleResponse(response);
+    }
+
+    // CUSTOM REQUEST methods
+    public async request(params: RouteParams) {
+        const response = await fetch(`${this.lobbUrl}${params.route}`, {
+            method: params.method,
+            headers: this.headers,
+            body: JSON.stringify(params.payload),
+        });
+        return await this.handleResponse(response);
+    }
+
+    // HELPER methods
+    private async handleResponse(response: Response): Promise<Response> {
+        for (let index = 0; index < this.onResponseHandlers.length; index++) {
+            const handler = this.onResponseHandlers[index];
+            handler(response.clone());
+        }
+        return response;
+    }
+}

package/src/lib/components/Studio.svelte

@@ -16,11 +16,11 @@
         loadExtensions,
     } from "$lib/extensions/extensionUtils";
     import { mediaQueries } from "$lib/utils";
-    import Home from "../../routes/home.svelte";
-    import DataModel from "../../routes/data_model/dataModel.svelte";
-    import Collections from "../../routes/collections/collections.svelte";
-    import Workflows from "../../routes/workflows/workflows.svelte";
-    import Extension from "../../routes/extensions/extension.svelte";
+    import Home from "./routes/home.svelte";
+    import DataModel from "./routes/data_model/dataModel.svelte";
+    import Collections from "./routes/collections/collections.svelte";
+    import Workflows from "./routes/workflows/workflows.svelte";
+    import Extension from "./routes/extensions/extension.svelte";
 
     interface StudioProps {
       extensions?: any[];

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

@@ -0,0 +1,46 @@
+<script>
+    import { CircleSlash2 } from "lucide-svelte";
+    import DataTable from "$lib/components/dataTable/dataTable.svelte";
+    import SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
+    import { ctx } from "$lib/store.svelte";
+  import Singletone from "$lib/components/singletone.svelte";
+
+    let { collectionName } = $props();
+    let isSingletonCollection = $derived(ctx.meta.collections[collectionName].singleton);
+
+    let containerWidth = $state();
+</script>
+
+<div bind:clientWidth={containerWidth} class="h-full">
+    {#if collectionName}
+        {#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,43 @@
+<script lang="ts">
+    import type { SideBarData } from "$lib/components/sidebar/sidebarElements.svelte";
+    import Sidebar from "$lib/components/sidebar/sidebar.svelte";
+    import { ctx } from "$lib/store.svelte";
+    import Collection from "./collection.svelte";
+    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: `/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/collections/collections.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Collections: import("svelte").Component<{
+    collectionName: any;
+}, {}, "">;
+type Collections = ReturnType<typeof Collections>;
+export default Collections;

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 "$lib/components/sidebar/sidebar.svelte";
+    import { location } from "@wjfe/n-savant";
+    import SyncManager from "./syncManager.svelte";
+    import SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
+
+    const currentPage = $derived(location.url.pathname.split("/")[2]);
+</script>
+
+<Sidebar
+    title="Data Model"
+    showSearch={false}
+    data={[
+        {
+            name: "graph",
+            href: "/datamodel/graph",
+        },
+        {
+            name: "query_editor",
+            href: "/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/dataModel.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DataModel: import("svelte").Component<Record<string, never>, {}, "">;
+type DataModel = ReturnType<typeof DataModel>;
+export default DataModel;

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,82 @@
+<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/lib/components/routes/data_model/flow.svelte.d.ts

@@ -0,0 +1,5 @@
+import "@xyflow/svelte/dist/style.css";
+import "./flow.css";
+declare const Flow: import("svelte").Component<Record<string, never>, {}, "">;
+type Flow = ReturnType<typeof Flow>;
+export default Flow;

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

@@ -0,0 +1,93 @@
+<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/lib/components/routes/data_model/syncManager.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SyncManager: import("svelte").Component<Record<string, never>, {}, "">;
+type SyncManager = ReturnType<typeof SyncManager>;
+export default SyncManager;

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

@@ -0,0 +1,4 @@
+export declare function getLayoutedElements(nodes: any[], edges: any[]): {
+    nodes: any[];
+    edges: any[];
+};