@lobb-js/studio 0.1.31

package/src/lib/components/ui/select/select-item.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+	import Check from "@lucide/svelte/icons/check";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-disabled:pointer-events-none data-disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<Check class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>

package/src/lib/components/ui/select/select-scroll-down-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import ChevronDown from "@lucide/svelte/icons/chevron-down";
+	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDown class="size-4" />
+</SelectPrimitive.ScrollDownButton>

package/src/lib/components/ui/select/select-scroll-up-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import ChevronUp from "@lucide/svelte/icons/chevron-up";
+	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUp class="size-4" />
+</SelectPrimitive.ScrollUpButton>

package/src/lib/components/ui/select/select-separator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator bind:ref class={cn("bg-muted -mx-1 my-1 h-px", className)} {...restProps} />

package/src/lib/components/ui/select/select-trigger.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+	import ChevronDown from "@lucide/svelte/icons/chevron-down";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	class={cn(
+		"border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDown class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>

package/src/lib/components/ui/separator/index.ts

@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};

package/src/lib/components/ui/separator/separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "horizontal",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	class={cn(
+		"bg-border shrink-0",
+		orientation === "horizontal" ? "h-px w-full" : "min-h-full w-px",
+		className
+	)}
+	{orientation}
+	{...restProps}
+/>

package/src/lib/components/ui/skeleton/index.ts

@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+	Root,
+	//
+	Root as Skeleton,
+};

package/src/lib/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<
+		WithElementRef<HTMLAttributes<HTMLDivElement>>
+	> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn(
+		"bg-primary/10 animate-pulse rounded-md",
+		className,
+	)}
+	{...restProps}
+></div>

package/src/lib/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

package/src/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={$mode}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+	{...restProps}
+/>

package/src/lib/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};

package/src/lib/components/ui/switch/switch.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	class={cn(
+		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>

package/src/lib/components/ui/textarea/index.ts

@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+	Root,
+	//
+	Root as Textarea,
+};

package/src/lib/components/ui/textarea/textarea.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	bind:value
+	class={cn(
+		"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+		className
+	)}
+	{...restProps}
+></textarea>

package/src/lib/components/ui/tooltip/index.ts

@@ -0,0 +1,18 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+const Provider = TooltipPrimitive.Provider;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+};

package/src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		...restProps
+	}: TooltipPrimitive.ContentProps = $props();
+</script>
+
+<TooltipPrimitive.Content
+	bind:ref
+	{sideOffset}
+	class={cn(
+		"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/workflowEditor.svelte

@@ -0,0 +1,187 @@
+<script lang="ts" module>
+    export interface WorkflowEntry {
+        id?: string;
+        name: string;
+        directory: string;
+        event_name: string;
+        input_schema?: string;
+        output_schema?: string;
+        handler?: string;
+    }
+</script>
+
+<script lang="ts">
+    import { lobb } from "$lib";
+    import MonacoEditor from "$lib/components/monacoEditor.svelte";
+    import Button from "$lib/components/ui/button/button.svelte";
+    import Input from "$lib/components/ui/input/input.svelte";
+    import { ctx } from "$lib/store.svelte";
+    import { location } from "@wjfe/n-savant";
+    import { Edit, Plus } from "lucide-svelte";
+    import { toast } from "svelte-sonner";
+    import { isEqual } from "lodash";
+
+    interface Props {
+        workflow: WorkflowEntry;
+        refreshSidebar: () => Promise<void>;
+    }
+
+    let { workflow = $bindable(), refreshSidebar }: Props = $props();
+
+    let initialWorkflow = $state.snapshot(workflow);
+    let workflowHasChanged = $state(false);
+
+    // track editor change
+    $effect(() => {
+        const hasChanged = !isEqual(workflow, initialWorkflow);
+        workflowHasChanged = hasChanged;
+    });
+
+    $effect(() => {
+        handleWorkflowEventChange(workflow.event_name);
+    });
+
+    function handleCtrlSave() {
+        if (workflow.id) {
+            handleUpdateWorkflow();
+        } else {
+            handleCreateWorkflow();
+        }
+    }
+
+    let types = $state("");
+    let eventsOptions = $derived([
+        {
+            label: "No Event",
+            value: "",
+        },
+        ...ctx.meta.events.map((event) => ({
+            label: event.name,
+            value: event.name,
+        })),
+    ]);
+
+    function handleWorkflowEventChange(eventName: WorkflowEntry["event_name"]) {
+        setTimeout(() => {
+            const event = ctx.meta.events.find(
+                (event) => event.name === eventName,
+            );
+            let localType = "";
+            if (event && event.inputSchema) {
+                localType += event.inputSchema;
+            } else {
+                localType += "type Input = unknown;";
+            }
+            if (ctx.meta.event_context_type) {
+                localType += ctx.meta.event_context_type;
+            } else {
+                localType += "type Context = unknown;";
+            }
+            if (event && event.outputSchema) {
+                localType += event.outputSchema;
+            } else {
+                localType += "type Output = Promise<unknown>;";
+            }
+            types = localType;
+        }, 100);
+    }
+
+    async function handleCreateWorkflow() {
+        if (!workflow.name) {
+            toast.error("You need to specify a workflow name");
+            return;
+        }
+
+        const reponse = await lobb.createOne("core_workflows", workflow);
+        const result = await reponse.json();
+        const workflowEntry = result.data;
+        location.navigate(`/workflows/${workflowEntry.name}`);
+        await refreshSidebar();
+    }
+
+    async function handleUpdateWorkflow() {
+        if (!workflow.id) {
+            throw new Error(
+                "For some reasont the id of the currentWorkflow doesnt exist",
+            );
+        }
+        const reponse = await lobb.updateOne("core_workflows", workflow.id, {
+            name: workflow.name,
+            event_name: workflow.event_name,
+            handler: workflow.handler,
+        });
+        const result = await reponse.json();
+
+        if (!(reponse.status >= 400)) {
+            toast.success("The workflow was updated successfully");
+        }
+
+        workflow = result.data;
+
+        await refreshSidebar();
+    }
+</script>
+
+<div class="flex flex-col h-full">
+    <div
+        class="flex justify-between items-start py-2 pl-9 pr-2 bg-background border-b"
+    >
+        <div class="flex gap-2 flex-wrap">
+            <Input
+                bind:value={workflow.name}
+                class="h-7 w-48 bg-background"
+                placeholder="Workflow name"
+            />
+            <Input
+                bind:value={workflow.event_name}
+                class="h-7 w-48 bg-background"
+                placeholder="Workflow event"
+                list="events_options"
+            />
+            <datalist id="events_options">
+                {#each eventsOptions as eventOption}
+                    <option value={eventOption.value}>
+                        {eventOption.label}
+                    </option>
+                {/each}
+            </datalist>
+            <Input
+                bind:value={workflow.directory}
+                class="h-7 w-48 bg-background"
+                placeholder="Workflow directory"
+            />
+        </div>
+        <div>
+            {#if workflow.id}
+                <Button
+                    class="h-7 px-3 text-xs font-normal w-full"
+                    variant="default"
+                    onclick={handleUpdateWorkflow}
+                    Icon={Edit}
+                    disabled={!workflowHasChanged}
+                >
+                    Save
+                </Button>
+            {:else}
+                <Button
+                    class="h-7 px-3 text-xs font-normal w-full"
+                    variant="default"
+                    onclick={handleCreateWorkflow}
+                    Icon={Plus}
+                >
+                    Create
+                </Button>
+            {/if}
+        </div>
+    </div>
+    {#key types}
+        <MonacoEditor
+            type="typescript"
+            name="workflow"
+            class="h-full rounded-none border-none"
+            {types}
+            {handleCtrlSave}
+            bind:value={workflow.handler}
+        />
+    {/key}
+</div>

package/src/lib/eventSystem.ts

@@ -0,0 +1,38 @@
+import { toast } from "svelte-sonner";
+import { ctx } from "./store.svelte";
+import { openCreateDetailView, openUpdateDetailView } from "./components/detailView/store.svelte";
+
+export async function emitEvent(eventName: string, input: Record<string, any>) {
+    const workflows = ctx.meta.studio_workflows.filter(
+        (workflow) => {
+            return eventName.startsWith(workflow.eventName);
+        },
+    );
+
+    for (let index = 0; index < workflows.length; index++) {
+      const workflow = workflows[index];
+      try {
+        const localOutput = await workflow.handler(
+            input,
+            await getEventContext(),
+        );
+
+        if (localOutput) {
+            input = localOutput;
+        }
+      } catch (error) {
+        toast.error((error as any).message);
+        throw error;
+      }
+    }
+
+    return input;
+}
+
+async function getEventContext() {
+    return {
+        toast,
+        openCreateDetailView,
+        openUpdateDetailView,
+    };
+}

package/src/lib/index.ts

@@ -0,0 +1,40 @@
+import { Lobb } from "./Lobb";
+import { ctx } from "$lib/store.svelte";
+import { toast } from "svelte-sonner";
+
+export const lobb = new Lobb(ctx.lobbUrl);
+
+// logging the message if got any bad responses
+lobb.onResponse(async (response) => {
+	if (response.status >= 400) {
+		const body = await response.json();
+		toast.error(body.message);
+	}
+});
+
+export function createSet(lastNumber: number): Set<number> {
+	const set = new Set() as Set<number>;
+	for (let i = 0; i <= lastNumber; i++) {
+		set.add(i);
+	}
+	return set;
+}
+
+export function moveElement<T>(array: T[], fromIndex: number, toIndex: number) {
+	if (
+		fromIndex < 0 || fromIndex >= array.length || toIndex < 0 ||
+		toIndex >= array.length
+	) {
+		throw new Error("Index out of bounds");
+	}
+	const [element] = array.splice(fromIndex, 1);
+	array.splice(toIndex, 0, element);
+	return array;
+}
+
+export function pxToRem(px: number) {
+	const rootFontSize = parseFloat(
+		getComputedStyle(document.documentElement).fontSize,
+	);
+	return px / rootFontSize;
+}

package/src/lib/store.svelte.ts

@@ -0,0 +1,21 @@
+import type { CTX } from './store.types';
+import pkg from '../../package.json';
+
+if (!window.APP_ENV) {
+  window.APP_ENV = {};
+}
+
+if (window.APP_ENV.LOBB_URL === '%LOBB_URL%') {
+  window.APP_ENV.LOBB_URL = null;
+}
+
+export const ctx: CTX = $state.raw({
+  studioVersion: pkg.version,
+  lobbUrl: window.APP_ENV.LOBB_URL || localStorage.getItem("lobb_url"),
+  extensions: {},
+  meta: {
+    collections: null,
+    extensions: null,
+    filter: null
+  },
+});

package/src/lib/store.types.ts

@@ -0,0 +1,28 @@
+import type { Extension } from "../extensions/extension.types";
+
+interface Collection {
+    category: string;
+    owner: string;
+    fields: Record<string, any>;
+    singleton: boolean;
+}
+type Collections = Record<string, Collection>;
+
+interface Meta {
+    version: string;
+    relations: Array<any>;
+    collections: Collections;
+    extensions: Record<string, any>;
+    filter: any;
+    events: any[];
+    event_context_type: string;
+    studio_workflows: any[];
+}
+
+export interface CTX {
+    studioVersion: string;
+    lobbUrl: string | null;
+    extensions: Record<string, Extension>;
+    meta: Meta;
+    currentUrl: URL;
+}