@lobb-js/studio 0.1.34 → 0.1.36

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

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

@@ -0,0 +1,16 @@
+<script>
+    import ExtensionsComponents from "$lib/components/extensionsComponents.svelte";
+    import { getExtensionUtils } from "$lib/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/lib/components/routes/home.svelte

@@ -0,0 +1,36 @@
+<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/lib/components/routes/workflows/workflows.svelte

@@ -0,0 +1,135 @@
+<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>

package/src/lib/components/routes/workflows/workflows.svelte.d.ts

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

package/src/lib/eventSystem.d.ts

@@ -0,0 +1 @@
+export declare function emitEvent(eventName: string, input: Record<string, any>): Promise<Record<string, any>>;

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/extensions/extension.types.d.ts

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

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

@@ -0,0 +1,93 @@
+import type { Lobb } from "$lib/Lobb";
+import type { CTX } from "../lib/store.types";
+import type { Button } from "$lib/components/ui/button";
+import type { Input } from "$lib/components/ui/input";
+import type { Separator } from "$lib/components/ui/separator";
+import type { Skeleton } from "$lib/components/ui/skeleton";
+import type LlmButton from "$lib/components/LlmButton.svelte";
+import type Sidebar from "$lib/components/sidebar/sidebar.svelte";
+import type SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
+import type CreateDetailViewButton from "$lib/components/detailView/create/createDetailViewButton.svelte";
+import type UpdateDetailViewButton from "$lib/components/detailView/update/updateDetailViewButton.svelte";
+import type { getFileFromUser, mediaQueries } from "$lib/utils";
+import type Table from "$lib/components/dataTable/table.svelte";
+import type { Location } from "@wjfe/n-savant";
+import type RangeCalendarButton from "$lib/components/rangeCalendarButton.svelte";
+import type DataTable from "$lib/components/dataTable/dataTable.svelte";
+import type Drawer from "$lib/components/drawer.svelte";
+import type SelectRecord from "$lib/components/selectRecord.svelte";
+import * as Popover from "$lib/components/ui/popover";
+import * as intlDate from "@internationalized/date";
+import * as Icons from "lucide-svelte"
+import { ContextMenu } from "bits-ui";
+import * as Tooltip from "$lib/components/ui/tooltip";
+import * as Breadcrumb from "$lib/components/ui/breadcrumb";
+import { showDialog } from "$lib/components/confirmationDialog/store.svelte";
+import { toast } from "svelte-sonner";
+import type Drawer from "$lib/components/drawer.svelte";
+import { Switch } from "$lib/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: Lobb;
+    location: Location;
+    toast: typeof toast;
+    showDialog: typeof showDialog;
+    getFileFromUser: typeof getFileFromUser;
+    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.d.ts

@@ -0,0 +1,8 @@
+import type { Components, DashboardNavs, Extension, ExtensionUtils } from "./extension.types";
+export declare function getComponents(): Components;
+export declare function getExtensionUtils(): ExtensionUtils;
+export declare function getExtensionsThatHasDash(): string[];
+export declare function loadExtensions(studioExtensions?: any[]): Promise<Record<string, Extension>>;
+export declare function loadExtensionComponents(name: string, filterByExtensions?: string[]): any[];
+export declare function executeExtensionsOnStartup(): Promise<void>;
+export declare function getDashboardNavs(): DashboardNavs;

package/src/lib/extensions/extensionUtils.ts

@@ -0,0 +1,192 @@
+import type {
+  Components,
+  DashboardNavs,
+  Extension,
+  ExtensionUtils,
+} from "./extension.types";
+import { lobb } from "$lib";
+import { ctx } from "$lib/store.svelte";
+import { toast } from "svelte-sonner";
+import { showDialog } from "$lib/components/confirmationDialog/store.svelte";
+import { Button } from "$lib/components/ui/button";
+import { Input } from "$lib/components/ui/input";
+import { Separator } from "$lib/components/ui/separator";
+import { Skeleton } from "$lib/components/ui/skeleton";
+import Table from "$lib/components/dataTable/table.svelte";
+import { getFileFromUser, mediaQueries } from "$lib/utils";
+import LlmButton from "$lib/components/LlmButton.svelte";
+import Sidebar from "$lib/components/sidebar/sidebar.svelte";
+import SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
+import CreateDetailViewButton from "$lib/components/detailView/create/createDetailViewButton.svelte";
+import UpdateDetailViewButton from "$lib/components/detailView/update/updateDetailViewButton.svelte";
+import * as intlDate from "@internationalized/date";
+import * as Tooltip from "$lib/components/ui/tooltip";
+import * as Breadcrumb from "$lib/components/ui/breadcrumb";
+import { ContextMenu } from "bits-ui";
+import * as Popover from "$lib/components/ui/popover";
+import * as Icons from "lucide-svelte";
+import { location } from "@wjfe/n-savant";
+import RangeCalendarButton from "$lib/components/rangeCalendarButton.svelte";
+import DataTable from "$lib/components/dataTable/dataTable.svelte";
+import Drawer from "$lib/components/drawer.svelte";
+import SelectRecord from "$lib/components/selectRecord.svelte";
+import { Switch } from "$lib/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(): ExtensionUtils {
+  return {
+    ctx: ctx,
+    lobb: lobb,
+    location: location,
+    toast: toast,
+    showDialog: showDialog,
+    getFileFromUser: getFileFromUser,
+    components: getComponents(),
+    mediaQueries: mediaQueries,
+    intlDate: intlDate,
+  };
+}
+
+export function getExtensionsThatHasDash(): string[] {
+  const extensionNames = Object.keys(ctx.meta.extensions);
+
+  const extensionsWithDashExt = [];
+  for (let index = 0; index < extensionNames.length; index++) {
+    const extensionName = extensionNames[index];
+    const extensionMeta = ctx.meta.extensions[extensionName];
+    if (extensionMeta.hasDashboardExtension) {
+      extensionsWithDashExt.push(extensionName);
+    }
+  }
+
+  return extensionsWithDashExt;
+}
+
+export async function loadExtensions(studioExtensions?: any[]): Promise<Record<string, Extension>> {
+  const extensions: Record<string, Extension> = {};
+
+
+  if (studioExtensions) {
+    for (let index = 0; index < studioExtensions.length; index++) {
+      const studioExtension = studioExtensions[index](getExtensionUtils());
+      extensions[studioExtension.name] = studioExtension;
+    }
+  }
+
+  const extensionsThatHasDash = getExtensionsThatHasDash();
+  for (let index = 0; index < extensionsThatHasDash.length; index++) {
+    const extensionName = extensionsThatHasDash[index];
+
+    // Try to import locally-installed extension by name first
+    if (extensionName && extensions[extensionName]) {
+      continue;
+    }
+
+    // Fall back to remote import
+    try {
+      extensions[extensionName] = (
+        await import(
+          /* @vite-ignore */ `${ctx.lobbUrl}/api/extensions/${extensionName}/dashboard?v=${ctx.meta.extensions[extensionName]?.version}`
+        )
+      ).extension(getExtensionUtils());
+    } catch (error) {
+      console.warn(`Failed to load remote extension ${extensionName}`, error);
+    }
+  }
+
+  return extensions;
+}
+
+export function loadExtensionComponents(
+  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() {
+  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());
+      }
+    }
+  }
+}
+
+export function getDashboardNavs(): 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.d.ts

@@ -0,0 +1,9 @@
+export { default as Studio } from "./components/Studio.svelte";
+export { Lobb } from "./Lobb";
+export * from "./utils";
+export * from "./eventSystem";
+export { ctx, lobb } from "./store.svelte";
+export type * from "./store.types";
+export declare function createSet(lastNumber: number): Set<number>;
+export declare function moveElement<T>(array: T[], fromIndex: number, toIndex: number): T[];
+export declare function pxToRem(px: number): number;