@lobb-js/studio 0.1.31 → 0.1.33

package/src/lib/utils.ts

@@ -1,84 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-import { fileOpen } from 'browser-fs-access';
-import { MediaQuery } from 'svelte/reactivity';
-import { ctx } from "./store.svelte";
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
-export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
-export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
-
-
-export const mediaQueries = {
-    sm: new MediaQuery('min-width: 640px'),
-    md: new MediaQuery('min-width: 768px'),
-    lg: new MediaQuery('min-width: 1024px'),
-    xl: new MediaQuery('min-width: 1280px'),
-    '2xl': new MediaQuery('min-width: 1536px'),
-}
-
-export async function getFileFromUser() {
-    return await fileOpen()
-};
-
-export function getFieldRelation(collectionName: string, fieldName: string) {
-    const relations = ctx.meta.relations;
-    for (let index = 0; index < relations.length; index++) {
-        const relation = relations[index];
-        if (relation.from.collection === collectionName && relation.from.field === fieldName) {
-            return relation;
-        }
-    }
-    return null;
-};
-
-export function getDiscriminatorFieldRelation(collectionName: string, fieldName: string) {
-    const relations = ctx.meta.relations;
-    for (let index = 0; index < relations.length; index++) {
-        const relation = relations[index];
-        if (relation.from.collection === collectionName && relation.from.discriminator === fieldName) {
-            return relation;
-        }
-    }
-    return null;
-};
-
-export function recordHasChildrean(collectionName: string) {
-    for (let index = 0; index < ctx.meta.relations.length; index++) {
-        const relation = ctx.meta.relations[index];
-        if (relation.to.collection === collectionName) {
-            return true;
-        }
-    }
-    return false;
-};
-
-export function calculateDrawerWidth() {
-    const backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");
-    const drawersCount = Array.from(backgroundDrawerButtons).length;
-    const width = 672 - (30 * drawersCount);
-    return width;
-};
-
-export function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>) {
-    const changes: Record<string, any> = {};
-    for (const key of Object.keys(newObj)) {
-        if (oldObj[key] !== newObj[key]) {
-            changes[key] = newObj[key];
-        }
-    }
-    return changes;
-}
-
-export function parseFunction(functionString: string) {
-    const functionObj = new Function("return " + functionString)();
-    return functionObj;
-};

package/src/main.ts

@@ -1,18 +0,0 @@
-import "./app.css";
-
-import { mount } from 'svelte'
-import Studio from './Studio.svelte'
-
-declare global {
-  interface Window {
-    APP_ENV: {
-        LOBB_URL: string
-    }
-  }
-}
-
-const app = mount(Studio, {
-  target: document.getElementById('app')!,
-})
-
-export default app

package/src/routes/collections/collection.svelte

@@ -1,46 +0,0 @@
-<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/routes/collections/collections.svelte

@@ -1,43 +0,0 @@
-<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/routes/data_model/dataModel.svelte

@@ -1,40 +0,0 @@
-<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/routes/data_model/flow.css

@@ -1,22 +0,0 @@
-.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/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>