@lobb-js/studio 0.7.2 → 0.8.0

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 "../../../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 "../../../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 "../../../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 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 "../../../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,188 @@
+<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 { getStudioContext } from "../context";
+    import CodeEditor from "../components/codeEditor.svelte";
+
+    const { lobb, ctx } = getStudioContext();
+    import Button from "../components/ui/button/button.svelte";
+    import Input from "../components/ui/input/input.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(`/studio/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}
+        <CodeEditor
+            type="typescript"
+            name="workflow"
+            class="h-full rounded-none border-none"
+            {types}
+            {handleCtrlSave}
+            bind:value={workflow.handler}
+        />
+    {/key}
+</div>

package/src/lib/context.ts

@@ -0,0 +1,22 @@
+import { setContext, getContext } from 'svelte';
+import type { LobbClient } from '@lobb-js/sdk';
+import type { CTX } from './store.types';
+
+export interface StudioContext {
+    ctx: CTX;
+    lobb: LobbClient;
+}
+
+export const STUDIO_CONTEXT_KEY = Symbol('studio');
+
+export function setStudioContext(context: StudioContext) {
+    setContext(STUDIO_CONTEXT_KEY, context);
+}
+
+export function getStudioContext(): StudioContext {
+    return getContext(STUDIO_CONTEXT_KEY);
+}
+
+export function createStudioContextMap(context: StudioContext): Map<symbol, StudioContext> {
+    return new Map([[STUDIO_CONTEXT_KEY, context]]);
+}

package/src/lib/eventSystem.ts

@@ -0,0 +1,40 @@
+import { toast } from "svelte-sonner";
+import type { StudioContext } from "./context";
+import { openCreateDetailView, openUpdateDetailView } from "./components/detailView/store.svelte";
+import type { UpdateDetailViewProp } from "./components/detailView/update/updateDetailView.svelte";
+
+export async function emitEvent(studioContext: StudioContext, eventName: string, input: Record<string, any>) {
+    const { ctx } = studioContext;
+    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(studioContext),
+        );
+
+        if (localOutput) {
+            input = localOutput;
+        }
+      } catch (error) {
+        toast.error((error as any).message);
+        throw error;
+      }
+    }
+
+    return input;
+}
+
+async function getEventContext(studioContext: StudioContext) {
+    return {
+        toast,
+        openCreateDetailView: (props: UpdateDetailViewProp) => openCreateDetailView(studioContext, props),
+        openUpdateDetailView: (props: UpdateDetailViewProp) => openUpdateDetailView(studioContext, props),
+    };
+}

package/src/lib/extensions/extension.types.ts

@@ -0,0 +1,92 @@
+import type { LobbClient } from "@lobb-js/sdk";
+import type { CTX } from "../lib/store.types";
+import type { Button } from "../components/ui/button";
+import type { Input } from "../components/ui/input";
+import type { Separator } from "../components/ui/separator";
+import type { Skeleton } from "../components/ui/skeleton";
+import type LlmButton from "../components/LlmButton.svelte";
+import type Sidebar from "../components/sidebar/sidebar.svelte";
+import type SidebarTrigger from "../components/sidebar/sidebarTrigger.svelte";
+import type CreateDetailViewButton from "../components/detailView/create/createDetailViewButton.svelte";
+import type UpdateDetailViewButton from "../components/detailView/update/updateDetailViewButton.svelte";
+import type { mediaQueries } from "../utils";
+import type Table from "../components/dataTable/table.svelte";
+import type { Location } from "@wjfe/n-savant";
+import type RangeCalendarButton from "../components/rangeCalendarButton.svelte";
+import type DataTable from "../components/dataTable/dataTable.svelte";
+import type Drawer from "../components/drawer.svelte";
+import type SelectRecord from "../components/selectRecord.svelte";
+import * as Popover from "../components/ui/popover";
+import * as intlDate from "@internationalized/date";
+import * as Icons from "lucide-svelte"
+import { ContextMenu } from "bits-ui";
+import * as Tooltip from "../components/ui/tooltip";
+import * as Breadcrumb from "../components/ui/breadcrumb";
+import { showDialog } from "../components/confirmationDialog/store.svelte";
+import { toast } from "svelte-sonner";
+import type Drawer from "../components/drawer.svelte";
+import { Switch } from "../components/ui/switch";
+
+// extensions utils
+export interface Components {
+    Button: typeof Button;
+    Input: typeof Input;
+    Separator: typeof Separator;
+    Skeleton: typeof Skeleton;
+    LlmButton: typeof LlmButton;
+    Sidebar: typeof Sidebar;
+    SidebarTrigger: typeof SidebarTrigger;
+    CreateDetailViewButton: typeof CreateDetailViewButton;
+    UpdateDetailViewButton: typeof UpdateDetailViewButton;
+    Tooltip: typeof Tooltip;
+    Breadcrumb: typeof Breadcrumb;
+    ContextMenu: typeof ContextMenu;
+    Popover: typeof Popover;
+    Icons: typeof Icons;
+    Table: typeof Table;
+    RangeCalendarButton: typeof RangeCalendarButton;
+    DataTable: typeof DataTable;
+    Drawer: typeof Drawer;
+    SelectRecord: typeof SelectRecord,
+    Switch: typeof Switch,
+}
+
+export interface ExtensionUtils {
+    ctx: CTX;
+    lobb: LobbClient;
+    location: Location;
+    toast: typeof toast;
+    showDialog: typeof showDialog;
+    components: Components;
+    mediaQueries: typeof mediaQueries;
+    intlDate: typeof intlDate;
+}
+
+// dashboard nav
+interface DashboardNav {
+    label: string;
+    icon: any;
+    href?: string;
+    onclick?: () => void;
+    navs?: DashboardNav[];
+}
+
+export interface DashboardNavs {
+    top?: DashboardNav[];
+    middle?: DashboardNav[];
+    bottom?: DashboardNav[];
+}
+
+// extension components base Props
+export interface ExtensionProps {
+    utils: ExtensionUtils;
+    [key: string]: any;
+}
+
+// extension exported object
+export interface Extension {
+    name: string;
+    onStartup?: (utils: ExtensionUtils) => Promise<void>;
+    components?: Record<string, any>;
+    dashboardNavs?: DashboardNavs;
+}

package/src/lib/extensions/extensionUtils.ts

@@ -0,0 +1,156 @@
+import type {
+  Components,
+  DashboardNavs,
+  Extension,
+  ExtensionUtils,
+} from "./extension.types";
+import type { LobbClient } from "@lobb-js/sdk";
+import type { CTX } from "../store.types";
+import { toast } from "svelte-sonner";
+import { showDialog } from "../components/confirmationDialog/store.svelte";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Separator } from "../components/ui/separator";
+import { Skeleton } from "../components/ui/skeleton";
+import Table from "../components/dataTable/table.svelte";
+import { mediaQueries } from "../utils";
+import LlmButton from "../components/LlmButton.svelte";
+import Sidebar from "../components/sidebar/sidebar.svelte";
+import SidebarTrigger from "../components/sidebar/sidebarTrigger.svelte";
+import CreateDetailViewButton from "../components/detailView/create/createDetailViewButton.svelte";
+import UpdateDetailViewButton from "../components/detailView/update/updateDetailViewButton.svelte";
+import * as intlDate from "@internationalized/date";
+import * as Tooltip from "../components/ui/tooltip";
+import * as Breadcrumb from "../components/ui/breadcrumb";
+import { ContextMenu } from "bits-ui";
+import * as Popover from "../components/ui/popover";
+import * as Icons from "lucide-svelte";
+import { location } from "@wjfe/n-savant";
+import RangeCalendarButton from "../components/rangeCalendarButton.svelte";
+import DataTable from "../components/dataTable/dataTable.svelte";
+import Drawer from "../components/drawer.svelte";
+import SelectRecord from "../components/selectRecord.svelte";
+import { Switch } from "../components/ui/switch";
+
+export function getComponents(): Components {
+  return {
+    Button: Button,
+    Input: Input,
+    Separator: Separator,
+    Skeleton: Skeleton,
+    LlmButton: LlmButton,
+    Sidebar: Sidebar,
+    SidebarTrigger: SidebarTrigger,
+    CreateDetailViewButton: CreateDetailViewButton,
+    UpdateDetailViewButton: UpdateDetailViewButton,
+    Tooltip: Tooltip,
+    Breadcrumb: Breadcrumb,
+    ContextMenu: ContextMenu,
+    Popover: Popover,
+    Icons: Icons,
+    Table: Table,
+    RangeCalendarButton: RangeCalendarButton,
+    DataTable: DataTable,
+    Drawer: Drawer,
+    SelectRecord: SelectRecord,
+    Switch: Switch,
+  };
+}
+
+export function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils {
+  return {
+    ctx: ctx,
+    lobb: lobb,
+    location: location,
+    toast: toast,
+    showDialog: showDialog,
+    components: getComponents(),
+    mediaQueries: mediaQueries,
+    intlDate: intlDate,
+  };
+}
+
+export async function loadExtensions(lobb: LobbClient, ctx: CTX, extensionMap: Record<string, any> = {}): Promise<Record<string, Extension>> {
+  const extensions: Record<string, Extension> = {};
+
+  const extensionNames = Object.keys(extensionMap).filter(name => ctx.meta.extensions[name] != null);
+  for (let index = 0; index < extensionNames.length; index++) {
+    const extensionName = extensionNames[index];
+
+    const studioExtension = extensionMap[extensionName](getExtensionUtils(lobb, ctx));
+    extensions[studioExtension.name] = studioExtension;
+  }
+
+  return extensions;
+}
+
+export function loadExtensionComponents(
+  ctx: CTX,
+  name: string,
+  filterByExtensions?: string[],
+): any[] {
+  const components = [];
+  for (const [extensionName, extensionValue] of Object.entries(
+    ctx.extensions,
+  )) {
+    if (filterByExtensions && !filterByExtensions.includes(extensionName)) {
+      continue;
+    }
+    if (extensionValue.components) {
+      for (const [componentName, componentValue] of Object.entries(
+        extensionValue.components,
+      )) {
+        if (name.startsWith(componentName)) {
+          components.push(componentValue);
+        }
+      }
+    }
+  }
+  return components;
+}
+
+export async function executeExtensionsOnStartup(lobb: LobbClient, ctx: CTX) {
+  const extensionNames: string[] = Object.keys(ctx.extensions);
+  for (let index = 0; index < extensionNames.length; index++) {
+    const extensionName = extensionNames[index];
+    const extension = ctx.extensions[extensionName];
+    if (extension) {
+      if (extension.onStartup) {
+        await extension.onStartup(getExtensionUtils(lobb, ctx));
+      }
+    }
+  }
+}
+
+export function getDashboardNavs(ctx: CTX): DashboardNavs {
+  let navs: DashboardNavs = {
+    top: [],
+    middle: [],
+    bottom: [],
+  };
+  const extensionNames: string[] = Object.keys(ctx.extensions);
+  for (let index = 0; index < extensionNames.length; index++) {
+    const extensionName = extensionNames[index];
+    const extension = ctx.extensions[extensionName];
+    if (extension) {
+      if (extension.dashboardNavs && extension.dashboardNavs.top && navs.top) {
+        navs.top = [...navs.top, ...extension.dashboardNavs.top];
+      }
+      if (
+        extension.dashboardNavs &&
+        extension.dashboardNavs.middle &&
+        navs.middle
+      ) {
+        navs.middle = [...navs.middle, ...extension.dashboardNavs.middle];
+      }
+      if (
+        extension.dashboardNavs &&
+        extension.dashboardNavs.bottom &&
+        navs.bottom
+      ) {
+        navs.bottom = [...navs.bottom, ...extension.dashboardNavs.bottom];
+      }
+    }
+  }
+  return navs;
+}

package/src/lib/index.ts

@@ -0,0 +1,24 @@
+export type { ExtensionProps, Extension, ExtensionUtils } from "./extensions/extension.types"
+
+export { default as Studio } from "./components/Studio.svelte";
+export { Button } from "./components/ui/button";
+export { Input } from "./components/ui/input";
+export { Separator } from "./components/ui/separator";
+export { Skeleton } from "./components/ui/skeleton";
+export { default as LlmButton } from "./components/LlmButton.svelte";
+export { default as Sidebar } from "./components/sidebar/sidebar.svelte";
+export { default as SidebarTrigger } from "./components/sidebar/sidebarTrigger.svelte";
+export { default as CreateDetailViewButton } from "./components/detailView/create/createDetailViewButton.svelte";
+export { default as UpdateDetailViewButton } from "./components/detailView/update/updateDetailViewButton.svelte";
+export * as Tooltip from "./components/ui/tooltip";
+export * as Breadcrumb from "./components/ui/breadcrumb";
+export { ContextMenu } from "bits-ui";
+export * as Popover from "./components/ui/popover";
+export * as Icons from "lucide-svelte";
+export * as Dialog from "./components/ui/dialog/index";
+export { default as Table } from "./components/dataTable/table.svelte";
+export { default as RangeCalendarButton } from "./components/rangeCalendarButton.svelte";
+export { default as DataTable } from "./components/dataTable/dataTable.svelte";
+export { default as Drawer } from "./components/drawer.svelte";
+export { default as SelectRecord } from "./components/selectRecord.svelte";
+export { Switch } from "./components/ui/switch";