@lobb-js/studio 0.1.35 → 0.1.37

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "src/lib/components",
+    "src/lib",
     "vite-plugins"
   ],
   "exports": {
@@ -45,7 +45,6 @@
     "@vitest/browser-playwright": "^4.0.5",
     "@vitest/coverage-v8": "^4.0.5",
     "autoprefixer": "^10.4.20",
-    "browser-fs-access": "^0.35.0",
     "dts-bundle-generator": "^9.5.1",
     "playwright": "^1.56.1",
     "qs": "^6.14.1",

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/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,82 @@
+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 { 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;
+    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,92 @@
+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 { 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;
+    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,191 @@
+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 { 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,
+    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;

package/src/lib/index.ts

@@ -0,0 +1,36 @@
+// Main Studio component
+export { default as Studio } from "./components/Studio.svelte";
+
+// Lobb client and utilities
+export { Lobb } from "./Lobb";
+export * from "./utils";
+export * from "./eventSystem";
+export { ctx, lobb } from "./store.svelte";
+export type * from "./store.types";
+
+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.d.ts

@@ -0,0 +1,4 @@
+import type { CTX } from './store.types';
+import { Lobb } from './Lobb';
+export declare const ctx: CTX;
+export declare const lobb: Lobb;

package/src/lib/store.svelte.ts

@@ -0,0 +1,33 @@
+import type { CTX } from './store.types';
+import { Lobb } from './Lobb';
+import { toast } from 'svelte-sonner';
+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
+  },
+});
+
+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);
+  }
+});

package/src/lib/store.types.d.ts

@@ -0,0 +1,26 @@
+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;
+}
+export {};

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;
+}

package/src/lib/utils.d.ts

@@ -0,0 +1,26 @@
+import { type ClassValue } from "clsx";
+import { MediaQuery } from 'svelte/reactivity';
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, "child"> : T;
+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 declare const mediaQueries: {
+    sm: MediaQuery;
+    md: MediaQuery;
+    lg: MediaQuery;
+    xl: MediaQuery;
+    '2xl': MediaQuery;
+};
+export declare function getFieldRelation(collectionName: string, fieldName: string): any;
+export declare function getDiscriminatorFieldRelation(collectionName: string, fieldName: string): any;
+export declare function recordHasChildrean(collectionName: string): boolean;
+export declare function calculateDrawerWidth(): number;
+export declare function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>): Record<string, any>;
+export declare function parseFunction(functionString: string): any;

package/src/lib/utils.ts

@@ -0,0 +1,79 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+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 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;
+};